为tabbar和浮动菜单中的患者管理菜单项添加导航功能

src/layouts/BasicLayout.tsx

@@ -14,6 +14,7 @@ import HistorylistPage from '@/pages/patient/HistoryList';
 import ArchivelistPage from '@/pages/patient/ArchiveList';
 import BinPage from '@/pages/patient/Bin';
 import OutputlistPage from '@/pages/patient/OutputList';
+import PatientManagement from '@/pages/patient/PatientManagement';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -52,6 +53,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
     archivelist: <ArchivelistPage />,
     bin: <BinPage />,
     outputlist: <OutputlistPage />,
+    patient_management: <PatientManagement />,
   };
   //感知菜单项点击
   const handleMenuClick = (key: string) => {
@@ -148,17 +150,20 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
         </Row>
         {/* Tabbar：固定在底部，仅在手机屏幕显示 */}
         <div className="sticky bottom-0 w-full bg-red xl:hidden">
-          <TabBar className="xl:hidden lg:hidden md:hidden sm:block xs:block">
+          <TabBar
+            className="xl:hidden lg:hidden md:hidden sm:block xs:block"
+            onChange={(key) => handleMenuClick(key)}
+          >
             <TabBar.Item
               className="text-red-500"
               title="患者管理"
-              key="home"
+              key="patient_management"
               icon={<div>🏠</div>}
             />
             <TabBar.Item
               className="text-red-500"
               title="检查"
-              key="profile"
+              key="examination"
               icon={<div>👤</div>}
             />
             <TabBar.Item
@@ -170,7 +175,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
             <TabBar.Item
               className="text-red-500"
               title="图像处理"
-              key="image-handling"
+              key="process"
               icon={<div>⚙️</div>}
             />
             <TabBar.Item
@@ -184,6 +189,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
         <NavbarFloat
           className="fixed hidden sm:hidden xs:hidden md:block lg:hidden xl:hidden"
           position="right"
+          onMenuClick={handleMenuClick}
         />
       </Layout>
     </ConfigProvider>

src/layouts/NavbarFloat.tsx

@@ -13,11 +13,13 @@ import type { MenuProps } from 'antd';
 interface NavbarFloatProps {
   position?: 'left' | 'right';
   className?: string;
+  onMenuClick?: (key: string) => void; // 新增
 }
 
 const NavbarFloat: React.FC<NavbarFloatProps> = ({
   position = 'left',
   className,
+  ...props
 }) => {
   const [open, setOpen] = useState(false);
   const [btnPos, setBtnPos] = useState({ x: 100, y: 100 });
@@ -63,9 +65,10 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
     document.removeEventListener('mouseup', onMouseUp);
   };
 
+  // 菜单项key与BasicLayout的contentMap保持一致
   const menuItems = [
     {
-      key: 'patient',
+      key: 'patient_management',
       icon: <Button shape="circle" icon={<UserOutlined />} />,
       label: '患者',
     },
@@ -92,7 +95,9 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
   ];
 
   const handleClick: MenuProps['onClick'] = (e) => {
-    console.log('clicked ', e.key);
+    if (props.onMenuClick) {
+      props.onMenuClick(e.key as string);
+    }
     setOpen(false); // 点击菜单后自动关闭抽屉
   };
 
@@ -141,7 +146,7 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
         open={open}
         onClose={() => setOpen(false)}
         closable={false}
-        width={120}
+        width={320}
         maskClosable={true}
         style={{
           top: 0,

src/pages/patient/PatientManagement.tsx

@@ -0,0 +1,100 @@
+import React, { Suspense, lazy } from 'react';
+import { Tabs } from 'antd';
+import { FormattedMessage } from 'react-intl';
+
+// 懒加载各子页面
+const WorklistPage = lazy(() => import('./worklist'));
+const OutputListPage = lazy(() => import('./OutputList'));
+const HistoryListPage = lazy(() => import('./HistoryList'));
+const ArchiveListPage = lazy(() => import('./ArchiveList'));
+const BinPage = lazy(() => import('./Bin'));
+const RegisterPage = lazy(() => import('./register'));
+
+const { TabPane } = Tabs;
+
+const PatientManagement: React.FC = () => {
+  return (
+    <div className="h-full flex flex-col">
+      <Tabs
+        defaultActiveKey="worklist"
+        type="line"
+        className="flex-1 h-full"
+        tabBarGutter={32}
+        destroyInactiveTabPane
+      >
+        <TabPane
+          tab={
+            <FormattedMessage
+              id="patient.tab.worklist"
+              defaultMessage="Worklist"
+            />
+          }
+          key="worklist"
+        >
+          <Suspense fallback={null}>
+            <WorklistPage />
+          </Suspense>
+        </TabPane>
+        <TabPane
+          tab={
+            <FormattedMessage id="patient.tab.output" defaultMessage="Output" />
+          }
+          key="output"
+        >
+          <Suspense fallback={null}>
+            <OutputListPage />
+          </Suspense>
+        </TabPane>
+        <TabPane
+          tab={
+            <FormattedMessage
+              id="patient.tab.history"
+              defaultMessage="History"
+            />
+          }
+          key="history"
+        >
+          <Suspense fallback={null}>
+            <HistoryListPage />
+          </Suspense>
+        </TabPane>
+        <TabPane
+          tab={
+            <FormattedMessage
+              id="patient.tab.archive"
+              defaultMessage="Archive"
+            />
+          }
+          key="archive"
+        >
+          <Suspense fallback={null}>
+            <ArchiveListPage />
+          </Suspense>
+        </TabPane>
+        <TabPane
+          tab={<FormattedMessage id="patient.tab.bin" defaultMessage="Bin" />}
+          key="bin"
+        >
+          <Suspense fallback={null}>
+            <BinPage />
+          </Suspense>
+        </TabPane>
+        <TabPane
+          tab={
+            <FormattedMessage
+              id="patient.tab.register"
+              defaultMessage="Register"
+            />
+          }
+          key="register"
+        >
+          <Suspense fallback={null}>
+            <RegisterPage />
+          </Suspense>
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+
+export default PatientManagement;