feat: 新增系统配置/用户管理页面，重构页面目录结构为 /xxx/index.tsx

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

src/layouts/RootLayout.tsx

@@ -3,16 +3,11 @@ import { Layout, Menu } from 'antd';
 import { useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router';
 import { routes } from '../routes';
+import { toMenuItems } from '../routes/utils';
 
 const { Header, Sider, Content } = Layout;
 
-const menuItems = routes
-  .filter((r) => !r.hideInMenu)
-  .map((r) => ({
-    key: r.path,
-    icon: r.icon,
-    label: r.label,
-  }));
+const menuItems = toMenuItems(routes);
 
 const RootLayout = () => {
   const navigate = useNavigate();
@@ -42,6 +37,7 @@ const RootLayout = () => {
           <Menu
             mode="inline"
             selectedKeys={[location.pathname]}
+            defaultOpenKeys={menuItems.map((item) => item.key)}
             items={menuItems}
             onClick={({ key }) => navigate(key)}
             style={{ height: '100%', borderRight: 0, paddingBottom: 48 }}

src/layouts/SystemLayout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from 'react-router';
+
+const SystemLayout = () => <Outlet />;
+
+export default SystemLayout;

src/pages/system/user/index.tsx

@@ -0,0 +1,21 @@
+import { Table, Typography } from 'antd';
+
+const { Title } = Typography;
+
+const columns = [
+  { title: '用户名', dataIndex: 'username', key: 'username' },
+  { title: '姓名', dataIndex: 'name', key: 'name' },
+  { title: '邮箱', dataIndex: 'email', key: 'email' },
+  { title: '状态', dataIndex: 'status', key: 'status' },
+];
+
+const UserManagement = () => {
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={4} style={{ marginBottom: 16 }}>用户管理</Title>
+      <Table columns={columns} dataSource={[]} rowKey="username" />
+    </div>
+  );
+};
+
+export default UserManagement;

src/routes/index.tsx

@@ -1,7 +1,9 @@
-import { HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import About from '../pages/About';
-import Home from '../pages/Home';
-import NotFound from '../pages/NotFound';
+import { HomeOutlined, InfoCircleOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import SystemLayout from '../layouts/SystemLayout';
+import About from '../pages/about';
+import Home from '../pages/home';
+import NotFound from '../pages/not-found';
+import UserManagement from '../pages/system/user';
 import type { RouteItem } from './types';
 
 export const routes: RouteItem[] = [
@@ -17,6 +19,20 @@ export const routes: RouteItem[] = [
     icon: <InfoCircleOutlined />,
     component: <About />,
   },
+  {
+    path: '/system',
+    label: '系统配置',
+    icon: <SettingOutlined />,
+    component: <SystemLayout />,
+    children: [
+      {
+        path: '/system/user',
+        label: '用户管理',
+        icon: <UserOutlined />,
+        component: <UserManagement />,
+      },
+    ],
+  },
   {
     path: '*',
     label: '404',

src/routes/utils.tsx

@@ -21,3 +21,21 @@ export function toRouteObjects(items: RouteItem[]): RouteObject[] {
     return route;
   });
 }
+
+type MenuItem = {
+  key: string;
+  icon?: React.ReactNode;
+  label: string;
+  children?: MenuItem[];
+};
+
+export function toMenuItems(items: RouteItem[]): MenuItem[] {
+  return items
+    .filter((r) => !r.hideInMenu)
+    .map((r) => ({
+      key: r.path,
+      icon: r.icon,
+      label: r.label,
+      children: r.children ? toMenuItems(r.children) : undefined,
+    }));
+}