使用全局state管理加载哪个页面

src/layouts/BasicLayout.tsx

@@ -1,5 +1,6 @@
 // BasicLayout.tsx
-import React, { useState } from 'react';
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import { Layout, Row, Col, ConfigProvider, Image } from 'antd';
 import { TabBar } from 'antd-mobile';
 
@@ -18,6 +19,8 @@ import PatientManagement from '@/pages/patient/PatientManagement';
 import MeButton from '@/pages/security/components/MeButton';
 import Profile from '@/pages/security/Profile';
 import ExamPage from '@/pages/exam/ExamPage';
+import { RootState } from '@/states/store';
+import { setBusinessFlow } from '@/states/BusinessFlowSlice';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -44,8 +47,10 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
     wifiStrength: 0,
     heatCapacity: 0,
   };
-  //使用key state更新整个basic layout ，用于加载新的内容组件
-  const [currentKey, setCurrentKey] = useState('register');
+  const dispatch = useDispatch();
+  const currentKey = useSelector(
+    (state: RootState) => state.BusinessFlow.currentKey
+  );
   // key和内容组件的映射
   const contentMap = {
     exam: <ExamPage />,
@@ -61,7 +66,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
   };
   //感知菜单项点击
   const handleMenuClick = (key: string) => {
-    setCurrentKey(key);
+    dispatch(setBusinessFlow(key));
   };
 
   return (
@@ -104,13 +109,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
             md={19}
             sm={0}
             xs={0}
-            className="items-center 
-                                    justify-end xl:flex 
-                                    lg:flex 
-                                    md:flex 
-                                    sm:hidden 
-                                    xs:hidden 
-                                    h-full 
+            className="items-center
+                                    justify-end xl:flex
+                                    lg:flex
+                                    md:flex
+                                    sm:hidden
+                                    xs:hidden
+                                    h-full
                                     text-[100%]"
           >
             {/* text-[100%] 用于传导父元素的字体大小，最终影响图标大小 */}

src/layouts/NavMenu.tsx

@@ -12,9 +12,10 @@ import { FormattedMessage } from 'react-intl';
 import { Space, Button, Row } from 'antd';
 import { ToolOutlined } from '@ant-design/icons';
 import MeButton from '../pages/security/components/MeButton';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '@/states/store'; // 使用路径别名@指向src
 import { isLoggedIn } from '../states/user_info'; // 根据你的实际路径调整
+import { setBusinessFlow } from '@/states/BusinessFlowSlice';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -130,8 +131,11 @@ interface NavMenuProps {
 }
 
 const NavMenu: React.FC<NavMenuProps> = ({ onMenuClick }) => {
+  const dispatch = useDispatch();
+
   const onClick: MenuProps['onClick'] = (e) => {
     console.log('click ', e);
+    dispatch(setBusinessFlow(e.key));
     onMenuClick?.(e.key);
   };
 

src/layouts/NavbarFloat.tsx

@@ -10,9 +10,10 @@ import {
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import MeButton from '../pages/security/components/MeButton';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '@/states/store';
 import { isLoggedIn } from '../states/user_info';
+import { setBusinessFlow } from '@/states/BusinessFlowSlice';
 
 interface NavbarFloatProps {
   position?: 'left' | 'right';
@@ -25,6 +26,7 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
   className,
   ...props
 }) => {
+  const dispatch = useDispatch();
   const [open, setOpen] = useState(false);
   const [btnPos, setBtnPos] = useState({ x: 100, y: 100 });
 
@@ -102,6 +104,7 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
     if (props.onMenuClick) {
       props.onMenuClick(e.key as string);
     }
+    dispatch(setBusinessFlow(e.key as string));
     setOpen(false); // 点击菜单后自动关闭抽屉
   };
 

src/states/BusinessFlowSlice.ts

@@ -0,0 +1,22 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface BusinessFlowState {
+  currentKey: string;
+}
+
+const initialState: BusinessFlowState = {
+  currentKey: 'register',
+};
+
+const BusinessFlowSlice = createSlice({
+  name: 'BusinessFlow',
+  initialState,
+  reducers: {
+    setBusinessFlow: (state, action: PayloadAction<string>) => {
+      state.currentKey = action.payload;
+    },
+  },
+});
+
+export const { setBusinessFlow } = BusinessFlowSlice.actions;
+export default BusinessFlowSlice.reducer;

src/states/store.ts

@@ -5,6 +5,7 @@ import patientTypeReducer from './patientTypeSlice';
 import bodyPartReducer from './bodyPartSlice';
 import selectionReducer from './patient/register/SelectionTypeSlice';
 import productReducer from './productSlice';
+import BusinessFlowReducer from './BusinessFlowSlice';
 import {
   workEntitiesSlice,
   workFiltersSlice,
@@ -21,6 +22,7 @@ const store = configureStore({
     bodyPart: bodyPartReducer,
     selection: selectionReducer,
     product: productReducer,
+    BusinessFlow: BusinessFlowReducer,
     workEntities: workEntitiesSlice.reducer,
     workFilters: workFiltersSlice.reducer,
     workPagination: workPaginationSlice.reducer,