feat(web): 搭建应用骨架并完善开发环境配置

2026-09-02 22:42:21 +08:00
parent 09e5207c83
commit 403f6cfa27
43 changed files with 2056 additions and 2356 deletions
@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Menu } from 'antd';
+import type { MenuProps } from 'antd';
+import { routeMenuConfig } from './menuConfig';
+import './SidebarMenu.css';
+
+interface SidebarMenuProps {
+  collapsed: boolean;
+  onMenuClick?: () => void;
+}
+
+const SidebarMenu = ({ collapsed, onMenuClick }: SidebarMenuProps) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const menuItems: MenuProps['items'] = useMemo(() => {
+    const children = routeMenuConfig.map((config) => ({
+      key: config.key,
+      icon: config.icon,
+      label: config.label,
+    }));
+    return [
+      {
+        type: 'group' as const,
+        label: collapsed ? '' : '主要功能',
+        className: 'menu-section-title',
+        children,
+      },
+    ];
+  }, [collapsed]);
+
+  const selectedKeys = useMemo(() => {
+    const path = location.pathname;
+    if (path === '/' || path === '') {
+      return [routeMenuConfig[0].key];
+    }
+    const config = routeMenuConfig.find((item) => path.startsWith(item.path));
+    return [config ? config.key : path];
+  }, [location.pathname]);
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    navigate(key);
+    if (onMenuClick) onMenuClick();
+  };
+
+  return (
+    <div className="sidebar-menu-container">
+      <Menu
+        theme="dark"
+        mode="inline"
+        inlineCollapsed={collapsed}
+        selectedKeys={selectedKeys}
+        items={menuItems}
+        onClick={handleMenuClick}
+        className="sidebar-menu"
+      />
+    </div>
+  );
+};
+
+export default SidebarMenu;