实现导航菜单，并集成到框架页面的导航区域

src/assets/i18n/messages/zh.js

@@ -1,4 +1,11 @@
 export default {
   greeting: '你好，世界！',
   name: '张三',
+  patient:'患者管理',
+  register:'注册',
+  tasklist:'任务清单',
+  historylist:'历史清单',
+  archivelist:'归档清单',
+  bin:'回收站',
+  sendlist:'发送清单',
 };

src/layouts/BasicLayout.tsx

@@ -6,6 +6,7 @@ import {
 import { TabBar } from 'antd-mobile';
 import logo from '../assets/imgs/logo-v3.jpg';
 import NavbarFloat from './NavbarFloat';
+import NavMenu from './NavMenu';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -56,8 +57,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
                 {/* 第二行：导航区域（第1列）和内容区域（第2列） */}
                 <Row style={{ flex: 1, display: 'flex', height: '100%', border: '1px solid red' }}>
                     {/* 导航区域 */}
-                    <Col xl={4} lg={4} xs={24} md={0} sm={12} style={{ flex: 1 }}>
-                        <div style={{ backgroundColor: 'yellow', height: '100%' }}>Column 2.1</div>
+                    <Col xl={4} lg={4} md={0} sm={0} xs={0} style={{ flex: 1 }}>
+                        <NavMenu></NavMenu>
                     </Col>
                     {/* 内容区域 */}
                     <Col xl={20} lg={20} xs={24} md={24} sm={12} style={{ flex: 1, border: '1px solid blue' }}>

src/layouts/NavMenu.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import { FormattedMessage } from 'react-intl';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+const items: MenuItem[] = [
+    {
+        key: 'patient_management',
+        label: <FormattedMessage id='patient' defaultMessage={'语言包中没有定义patient的翻译文本'} />,
+        icon: <MailOutlined />,
+        children: [
+            {
+                key: 'g1',
+                label: <FormattedMessage id='register' defaultMessage={'语言包中没有定义patient的翻译文本'} />,
+            },
+            {
+                key: 'tasklist',
+                label: <FormattedMessage id='tasklist' defaultMessage={'语言包中没有定义patient的翻译文本'} />
+            },
+            {
+                key: 'historylist',
+                label: <FormattedMessage id='historylist' defaultMessage={'语言包中没有定义patient的翻译文本'} />
+            },
+            {
+                key: 'archivelist',
+                label: <FormattedMessage id='archivelist' defaultMessage={'语言包中没有定义patient的翻译文本'} />
+            },
+            {
+                key: 'bin',
+                label: <FormattedMessage id='bin' defaultMessage={'语言包中没有定义patient的翻译文本'} />
+            },
+            {
+                key: 'sendlist',
+                label: <FormattedMessage id='sendlist' defaultMessage={'语言包中没有定义patient的翻译文本'} />
+            },
+        ],
+    },
+    {
+        key: 'sub2',
+        label: 'Navigation Two',
+        icon: <AppstoreOutlined />,
+        children: [
+            { key: '5', label: 'Option 5' },
+            { key: '6', label: 'Option 6' },
+            {
+                key: 'sub3',
+                label: 'Submenu',
+                children: [
+                    { key: '7', label: 'Option 7' },
+                    { key: '8', label: 'Option 8' },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'divider',
+    },
+    {
+        key: 'sub4',
+        label: 'Navigation Three',
+        icon: <SettingOutlined />,
+        children: [
+            { key: '9', label: 'Option 9' },
+            { key: '10', label: 'Option 10' },
+            { key: '11', label: 'Option 11' },
+            { key: '12', label: 'Option 12' },
+        ],
+    },
+    {
+        key: 'grp',
+        label: 'Group',
+        type: 'group',
+        children: [
+            { key: '13', label: 'Option 13' },
+            { key: '14', label: 'Option 14' },
+        ],
+    },
+];
+
+const NavMenu: React.FC = () => {
+    const onClick: MenuProps['onClick'] = (e) => {
+        console.log('click ', e);
+    };
+
+    return (
+        <Menu
+            onClick={onClick}
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            mode="inline"
+            items={items}
+        />
+    );
+};
+
+export default NavMenu;