feat: 重构用户管理页面，集成 msw mock，统一路径别名和 API 命名规范

2026-05-15 15:44:27 +08:00
parent 790b6905ef
commit 311ce55fb7
19 changed files with 1307 additions and 40 deletions
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
+# 生产环境后端接口地址
 PUBLIC_BASE_URL=http://localhost:8080
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -84,6 +84,30 @@ tsconfig.json
 - **单引号**（`.prettierrc` 中 `singleQuote: true`）
 - ESLint 仅作用于 `**/*.{ts,tsx}`，启用了 `react-hooks` 和 `react-refresh` 插件

+## 注释规范
+
+**所有代码都应附带必要的注释，说明意图而非重复代码本身。**
+
+- 函数 / Hook：用 JSDoc 说明用途、参数含义
+- 复杂逻辑、非直觉的实现：行内注释解释原因
+- 模拟数据 / 临时代码：标注 `// TODO:` 或 `// FIXME:` 方便后续替换
+- 类型字段：用 JSDoc 注释说明每个字段的含义
+
+```ts
+// ✅ 说明意图
+// 用 cancelled 标志位防止组件卸载后的竞态更新
+let cancelled = false;
+
+/**
+ * 根据部门 ID 获取用户列表
+ * @param deptKey 部门节点 key
+ */
+const fetchUsersByDept = (deptKey: string): Promise<UserRecord[]> => { ... };
+
+// TODO: 替换为真实接口
+const mockData = [...];
+```
+
 ## UI 组件规范（antd）

 **页面 UI 优先使用 antd 组件，不自行实现已有组件的功能。**
@@ -109,9 +133,22 @@ import { ConfigProvider } from 'antd';
 ## HTTP 请求

 - 所有请求通过 `src/utils/request.ts` 封装的方法发出，不直接使用 `axios`
- 导出方法：`get` / `post` / `put` / `del`，返回值类型自动推断为 `API.Response<T>`
+- **只使用 `get` 和 `post` 两种方法**，不使用 `put` / `delete` 等其他方法
+- 编辑接口用 `post`，路径加 `/edit` 后缀；删除接口用 `post`，路径加 `/del` 后缀
 - 全局响应结构 `API.Response<T>` 定义在 `src/types/http.d.ts`，无需 import 直接使用
 - 请求拦截器（添加 token）和响应拦截器（处理错误码）统一在 `request.ts` 中维护
+- 接口函数统一放在 `src/api/` 下，按模块分文件管理（如 `src/api/system/user.ts`）
+
+**接口函数命名规范：**
+
+| 操作 | 前缀 | 示例 |
+|------|------|------|
+| 新增 | `add` | `addDept` |
+| 编辑 | `edit` | `editDept` |
+| 删除 | `del` | `delDept` |
+| 获取列表 | `list` | `listUser` |
+| 获取详情 | `detail` | `detailUser` |
+| 特殊查询（树等） | 语义命名 | `deptTree` |

 ```ts
 // 使用示例
--- a/package.json
+++ b/package.json
@@ -29,8 +29,14 @@
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.6.0",
+    "msw": "^2.14.6",
    "prettier": "^3.8.3",
    "typescript": "^6.0.3",
    "typescript-eslint": "^8.59.1"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
  }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
      globals:
        specifier: ^17.6.0
        version: 17.6.0
+      msw:
+        specifier: ^2.14.6
+        version: 2.14.6(@types/node@25.8.0)(typescript@6.0.3)
      prettier:
        specifier: ^3.8.3
        version: 3.8.3
@@ -249,6 +252,41 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@inquirer/ansi@2.0.5':
+    resolution: {integrity: sha512-doc2sWgJpbFQ64UflSVd17ibMGDuxO1yKgOgLMwavzESnXjFWJqUeG8saYosqKpHp4kWiM5x1nXvEjbpx90gzw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+
+  '@inquirer/confirm@6.0.13':
+    resolution: {integrity: sha512-wkGPC7yJ5WJk1DJ5SX7fzk+gfj4BM8cf5dDDi71B/551xHrdsZVRJOC0WyikXd0pEsb/9cLniuE4atbsMqmFkw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@11.1.10':
+    resolution: {integrity: sha512-a4Q5BXHQAHa9eO202sTaFCHFYVB3x5fauDuThEAdZ9gfn76pSxiKU7wWcEH0N1O0XmQvNfQNU6QXpiRxmYQx+A==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@2.0.5':
+    resolution: {integrity: sha512-NsSs4kzfm12lNetHwAn3GEuH317IzpwrMCbOuMIVytpjnJ90YYHNwdRgYGuKmVxwuIqSgqk3M5qqQt1cDk0tGQ==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+
+  '@inquirer/type@4.0.5':
+    resolution: {integrity: sha512-aetVUNeKNc/VriqXlw1NRSW0zhMBB0W4bNbWRJgzRl/3d0QNDQFfk0GO5SDdtjMZVg6o8ZKEiadd7SCCzoOn5Q==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

@@ -265,12 +303,28 @@ packages:
  '@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

+  '@mswjs/interceptors@0.41.9':
+    resolution: {integrity: sha512-VVPPgHyQ6ShqnrmDWuxjmUIsO9gWyOZFmuOfLd9LfBGQJwZfy0gvv9pbHSJuoFNIYC7ZDX9aoFwowjcdSC4E8w==}
+    engines: {node: '>=18'}
+
  '@napi-rs/wasm-runtime@1.1.4':
    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
    peerDependencies:
      '@emnapi/core': ^1.7.1
      '@emnapi/runtime': ^1.7.1

+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/deferred-promise@3.0.0':
+    resolution: {integrity: sha512-XW375UK8/9SqUVNVa6M0yEy8+iTi4QN5VZ7aZuRFQmy76LRwI9wy5F4YIBU6T+eTe2/DNDo8tqu8RHlwLHM6RA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
  '@rc-component/async-validator@5.1.0':
    resolution: {integrity: sha512-n4HcR5siNUXRX23nDizbZBQPO0ZM/5oTtmKZ6/eqL0L2bo747cklFdZGRN2f+c9qWGICwDzrhW0H7tE9PptdcA==}
    engines: {node: '>=14.x'}
@@ -658,6 +712,9 @@ packages:
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

+  '@types/node@25.8.0':
+    resolution: {integrity: sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ==}
+
  '@types/react-dom@19.2.3':
    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
    peerDependencies:
@@ -666,6 +723,12 @@ packages:
  '@types/react@19.2.14':
    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}

+  '@types/set-cookie-parser@2.4.10':
+    resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
+
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
  '@typescript-eslint/eslint-plugin@8.59.3':
    resolution: {integrity: sha512-PwFvSKsXGShKGW6n5bZOhGHEcCZXM8HofLK9fNsEwZXzFRjoY+XT1Vsf1zgyXdwTr0ZYz1/2tkZ0DBTT9jZjhw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -742,6 +805,14 @@ packages:
  ajv@6.15.0:
    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}

+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
  antd@6.4.2:
    resolution: {integrity: sha512-PNJz8Vxc/mC3EsOg/h3e2YuaZduJ1RDp4RmySDuDmKPCxVgyp4Da4kB36o87p9hbLbOWdAWCKQlnyopsN8utKQ==}
    peerDependencies:
@@ -779,10 +850,25 @@ packages:
  caniuse-lite@1.0.30001792:
    resolution: {integrity: sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==}

+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
  clsx@2.1.1:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
  combined-stream@1.0.8:
    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
    engines: {node: '>= 0.8'}
@@ -830,6 +916,9 @@ packages:
  electron-to-chromium@1.5.356:
    resolution: {integrity: sha512-9NgFd7m5t5MCJ5rUSjJITUXAH9mEGlrlofnMf4YEr+pz6JlP7cWmTAH+JFmbPnaSW8koVTkuW7pacORWAnA5Yw==}

+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
  es-define-property@1.0.1:
    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
    engines: {node: '>= 0.4'}
@@ -916,6 +1005,15 @@ packages:
  fast-levenshtein@2.0.6:
    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}

+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
+  fast-wrap-ansi@0.2.0:
+    resolution: {integrity: sha512-rLV8JHxTyhVmFYhBJuMujcrHqOT2cnO5Zxj37qROj23CP39GXubJRBUFF0z8KFK77Uc0SukZUf7JZhsVEQ6n8w==}
+
  fdir@6.5.0:
    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
    engines: {node: '>=12.0.0'}
@@ -960,6 +1058,10 @@ packages:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}

+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
  get-intrinsic@1.3.0:
    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
    engines: {node: '>= 0.4'}
@@ -980,6 +1082,10 @@ packages:
    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
    engines: {node: '>= 0.4'}

+  graphql@16.14.0:
+    resolution: {integrity: sha512-BBvQ/406p+4CZbTpCbVPSxfzrZrbnuWSP1ELYgyS6B+hNeKzgrdB4JczCa5VZUBQrDa9hUngm0KnexY6pJRN5Q==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
  has-symbols@1.1.0:
    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
    engines: {node: '>= 0.4'}
@@ -992,6 +1098,9 @@ packages:
    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
    engines: {node: '>= 0.4'}

+  headers-polyfill@5.0.1:
+    resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
+
  hermes-estree@0.25.1:
    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}

@@ -1018,6 +1127,10 @@ packages:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
    engines: {node: '>=0.10.0'}

+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
  is-glob@4.0.3:
    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
    engines: {node: '>=0.10.0'}
@@ -1025,6 +1138,9 @@ packages:
  is-mobile@5.0.0:
    resolution: {integrity: sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==}

+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
  isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}

@@ -1086,6 +1202,20 @@ packages:
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

+  msw@2.14.6:
+    resolution: {integrity: sha512-ALe+N10S72cyx94cMcy3Zs4HhXCj35sgeAL4c+WTvKi0zWnbd8/h0lcFqv0mb2P+aSgAdD7p9HzvA0DiUPxsyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@3.0.0:
+    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

@@ -1096,6 +1226,9 @@ packages:
    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
    engines: {node: '>= 0.8.0'}

+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
  p-limit@3.1.0:
    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
    engines: {node: '>=10'}
@@ -1112,6 +1245,9 @@ packages:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
    engines: {node: '>=8'}

+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

@@ -1162,6 +1298,13 @@ packages:
    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
    engines: {node: '>=0.10.0'}

+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  rettime@0.11.11:
+    resolution: {integrity: sha512-ILJRqVWBCTlg9r42fFgwVZx1gnFAcQF8mRoMkbgQfIrjEDf9nbBFDFx00oloOa+Q869FUtaYDXZvEfnecQSCoQ==}
+
  scheduler@0.27.0:
    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}

@@ -1180,6 +1323,9 @@ packages:
  set-cookie-parser@2.7.2:
    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}

+  set-cookie-parser@3.1.0:
+    resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
+
  shebang-command@2.0.0:
    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
    engines: {node: '>=8'}
@@ -1188,12 +1334,35 @@ packages:
    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
    engines: {node: '>=8'}

+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
  string-convert@0.2.1:
    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}

+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
  stylis@4.4.0:
    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}

+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
  throttle-debounce@5.0.2:
    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
    engines: {node: '>=12.22'}
@@ -1202,6 +1371,17 @@ packages:
    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
    engines: {node: '>=12.0.0'}

+  tldts-core@7.0.30:
+    resolution: {integrity: sha512-uiHN8PIB1VmWyS98eZYja4xzlYqeFZVjb4OuYlJQnZAuJhMw4PbKQOKgHKhBdJR3FE/t5mUQ1Kd80++B+qhD1Q==}
+
+  tldts@7.0.30:
+    resolution: {integrity: sha512-ELrFxuqsDdHUwoh0XxDbxuLD3Wnz49Z57IFvTtvWy1hJdcMZjXLIuonjilCiWHlT2GbE4Wlv1wKVTzDFnXH1aw==}
+    hasBin: true
+
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
+
  ts-api-utils@2.5.0:
    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
    engines: {node: '>=18.12'}
@@ -1215,6 +1395,10 @@ packages:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}

+  type-fest@5.6.0:
+    resolution: {integrity: sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==}
+    engines: {node: '>=20'}
+
  typescript-eslint@8.59.3:
    resolution: {integrity: sha512-KgusgyDgG4LI8Ih/sWaCtZ06tckLAS5CvT5A4D1Q7bYVoAAyzwiZvE4BmwDHkhRVkvhRBepKeASoFzQetha7Fg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1227,6 +1411,12 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true

+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
+
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
  update-browserslist-db@1.2.3:
    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
    hasBin: true
@@ -1245,9 +1435,25 @@ packages:
    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
    engines: {node: '>=0.10.0'}

+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
  yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
  yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
@@ -1481,6 +1687,33 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@inquirer/ansi@2.0.5': {}
+
+  '@inquirer/confirm@6.0.13(@types/node@25.8.0)':
+    dependencies:
+      '@inquirer/core': 11.1.10(@types/node@25.8.0)
+      '@inquirer/type': 4.0.5(@types/node@25.8.0)
+    optionalDependencies:
+      '@types/node': 25.8.0
+
+  '@inquirer/core@11.1.10(@types/node@25.8.0)':
+    dependencies:
+      '@inquirer/ansi': 2.0.5
+      '@inquirer/figures': 2.0.5
+      '@inquirer/type': 4.0.5(@types/node@25.8.0)
+      cli-width: 4.1.0
+      fast-wrap-ansi: 0.2.0
+      mute-stream: 3.0.0
+      signal-exit: 4.1.0
+    optionalDependencies:
+      '@types/node': 25.8.0
+
+  '@inquirer/figures@2.0.5': {}
+
+  '@inquirer/type@4.0.5(@types/node@25.8.0)':
+    optionalDependencies:
+      '@types/node': 25.8.0
+
  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -1500,6 +1733,15 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

+  '@mswjs/interceptors@0.41.9':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
    dependencies:
      '@emnapi/core': 1.10.0
@@ -1507,6 +1749,17 @@ snapshots:
      '@tybys/wasm-util': 0.10.2
    optional: true

+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/deferred-promise@3.0.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
  '@rc-component/async-validator@5.1.0':
    dependencies:
      '@babel/runtime': 7.29.2
@@ -1934,6 +2187,10 @@ snapshots:

  '@types/json-schema@7.0.15': {}

+  '@types/node@25.8.0':
+    dependencies:
+      undici-types: 7.24.6
+
  '@types/react-dom@19.2.3(@types/react@19.2.14)':
    dependencies:
      '@types/react': 19.2.14
@@ -1942,6 +2199,12 @@ snapshots:
    dependencies:
      csstype: 3.2.3

+  '@types/set-cookie-parser@2.4.10':
+    dependencies:
+      '@types/node': 25.8.0
+
+  '@types/statuses@2.0.6': {}
+
  '@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@6.0.3))(eslint@10.3.0)(typescript@6.0.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
@@ -2052,6 +2315,12 @@ snapshots:
      json-schema-traverse: 0.4.1
      uri-js: 4.4.1

+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
  antd@6.4.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
    dependencies:
      '@ant-design/colors': 8.0.1
@@ -2143,8 +2412,22 @@ snapshots:

  caniuse-lite@1.0.30001792: {}

+  cli-width@4.1.0: {}
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
  clsx@2.1.1: {}

+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
  combined-stream@1.0.8:
    dependencies:
      delayed-stream: 1.0.0
@@ -2181,6 +2464,8 @@ snapshots:

  electron-to-chromium@1.5.356: {}

+  emoji-regex@8.0.0: {}
+
  es-define-property@1.0.1: {}

  es-errors@1.3.0: {}
@@ -2285,6 +2570,16 @@ snapshots:

  fast-levenshtein@2.0.6: {}

+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
+
+  fast-wrap-ansi@0.2.0:
+    dependencies:
+      fast-string-width: 3.0.2
+
  fdir@6.5.0(picomatch@4.0.4):
    optionalDependencies:
      picomatch: 4.0.4
@@ -2319,6 +2614,8 @@ snapshots:

  gensync@1.0.0-beta.2: {}

+  get-caller-file@2.0.5: {}
+
  get-intrinsic@1.3.0:
    dependencies:
      call-bind-apply-helpers: 1.0.2
@@ -2345,6 +2642,8 @@ snapshots:

  gopd@1.2.0: {}

+  graphql@16.14.0: {}
+
  has-symbols@1.1.0: {}

  has-tostringtag@1.0.2:
@@ -2355,6 +2654,11 @@ snapshots:
    dependencies:
      function-bind: 1.1.2

+  headers-polyfill@5.0.1:
+    dependencies:
+      '@types/set-cookie-parser': 2.4.10
+      set-cookie-parser: 3.1.0
+
  hermes-estree@0.25.1: {}

  hermes-parser@0.25.1:
@@ -2376,12 +2680,16 @@ snapshots:

  is-extglob@2.1.1: {}

+  is-fullwidth-code-point@3.0.0: {}
+
  is-glob@4.0.3:
    dependencies:
      is-extglob: 2.1.1

  is-mobile@5.0.0: {}

+  is-node-process@1.2.0: {}
+
  isexe@2.0.0: {}

  js-tokens@4.0.0: {}
@@ -2431,6 +2739,33 @@ snapshots:

  ms@2.1.3: {}

+  msw@2.14.6(@types/node@25.8.0)(typescript@6.0.3):
+    dependencies:
+      '@inquirer/confirm': 6.0.13(@types/node@25.8.0)
+      '@mswjs/interceptors': 0.41.9
+      '@open-draft/deferred-promise': 3.0.0
+      '@types/statuses': 2.0.6
+      cookie: 1.1.1
+      graphql: 16.14.0
+      headers-polyfill: 5.0.1
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.11.11
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.1
+      type-fest: 5.6.0
+      until-async: 3.0.2
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@3.0.0: {}
+
  natural-compare@1.4.0: {}

  node-releases@2.0.44: {}
@@ -2444,6 +2779,8 @@ snapshots:
      type-check: 0.4.0
      word-wrap: 1.2.5

+  outvariant@1.4.3: {}
+
  p-limit@3.1.0:
    dependencies:
      yocto-queue: 0.1.0
@@ -2456,6 +2793,8 @@ snapshots:

  path-key@3.1.1: {}

+  path-to-regexp@6.3.0: {}
+
  picocolors@1.1.1: {}

  picomatch@4.0.4: {}
@@ -2487,6 +2826,10 @@ snapshots:

  react@19.2.6: {}

+  require-directory@2.1.1: {}
+
+  rettime@0.11.11: {}
+
  scheduler@0.27.0: {}

  scroll-into-view-if-needed@3.1.0:
@@ -2499,16 +2842,36 @@ snapshots:

  set-cookie-parser@2.7.2: {}

+  set-cookie-parser@3.1.0: {}
+
  shebang-command@2.0.0:
    dependencies:
      shebang-regex: 3.0.0

  shebang-regex@3.0.0: {}

+  signal-exit@4.1.0: {}
+
+  statuses@2.0.2: {}
+
+  strict-event-emitter@0.5.1: {}
+
  string-convert@0.2.1: {}

+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
  stylis@4.4.0: {}

+  tagged-tag@1.0.0: {}
+
  throttle-debounce@5.0.2: {}

  tinyglobby@0.2.16:
@@ -2516,6 +2879,16 @@ snapshots:
      fdir: 6.5.0(picomatch@4.0.4)
      picomatch: 4.0.4

+  tldts-core@7.0.30: {}
+
+  tldts@7.0.30:
+    dependencies:
+      tldts-core: 7.0.30
+
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.0.30
+
  ts-api-utils@2.5.0(typescript@6.0.3):
    dependencies:
      typescript: 6.0.3
@@ -2526,6 +2899,10 @@ snapshots:
    dependencies:
      prelude-ls: 1.2.1

+  type-fest@5.6.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
  typescript-eslint@8.59.3(eslint@10.3.0)(typescript@6.0.3):
    dependencies:
      '@typescript-eslint/eslint-plugin': 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@6.0.3))(eslint@10.3.0)(typescript@6.0.3)
@@ -2539,6 +2916,10 @@ snapshots:

  typescript@6.0.3: {}

+  undici-types@7.24.6: {}
+
+  until-async@3.0.2: {}
+
  update-browserslist-db@1.2.3(browserslist@4.28.2):
    dependencies:
      browserslist: 4.28.2
@@ -2555,8 +2936,28 @@ snapshots:

  word-wrap@1.2.5: {}

+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  y18n@5.0.8: {}
+
  yallist@3.1.1: {}

+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
  yocto-queue@0.1.0: {}

  zod-validation-error@4.0.2(zod@4.4.3):
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.14.6'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import zhCN from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { RouterProvider } from 'react-router';
-import router from './router';
+import router from '@/router';
 import './App.css';

 dayjs.locale('zh-cn');
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -0,0 +1,55 @@
+import { get, post } from '@/utils/request';
+
+/** 部门节点数据结构 */
+export interface DeptNode {
+  key: string;
+  title: string;
+  parentKey: string | null;
+  children?: DeptNode[];
+}
+
+/** 新增/编辑部门的请求参数 */
+export interface DeptParams {
+  title: string;
+  parentKey?: string | null;
+}
+
+/** 用户记录数据结构 */
+export interface UserRecord {
+  username: string;
+  name: string;
+  email: string;
+  status: string;
+}
+
+/**
+ * 获取部门树
+ */
+export const deptTree = () => get<DeptNode[]>('/api/system/dept/tree');
+
+/**
+ * 新增部门
+ * @param params 部门参数
+ */
+export const addDept = (params: DeptParams) => post<DeptNode>('/api/system/dept/add', params);
+
+/**
+ * 编辑部门
+ * @param key 部门 key
+ * @param params 部门参数
+ */
+export const editDept = (key: string, params: DeptParams) =>
+  post<DeptNode>('/api/system/dept/edit', { key, ...params });
+
+/**
+ * 删除部门
+ * @param key 部门 key
+ */
+export const delDept = (key: string) => post('/api/system/dept/del', { key });
+
+/**
+ * 获取用户列表
+ * @param deptKey 部门 key
+ */
+export const listUser = (deptKey: string) =>
+  get<UserRecord[]>('/api/system/user/list', { deptKey });
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import App from '@/App';
+
+async function prepare() {
+  // 仅开发环境启动 mock service worker
+  if (import.meta.env.DEV) {
+    const { default: worker } = await import('@/mock');
+    await worker.start({ onUnhandledRequest: 'bypass' });
+  }
+}

 const rootEl = document.getElementById('root');
 if (rootEl) {
-  const root = ReactDOM.createRoot(rootEl);
-  root.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>,
-  );
+  prepare().then(() => {
+    const root = ReactDOM.createRoot(rootEl);
+    root.render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>,
+    );
+  });
 }
--- a/src/layouts/RootLayout.tsx
+++ b/src/layouts/RootLayout.tsx
@@ -2,8 +2,8 @@ import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 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';
+import { routes } from '@/routes';
+import { toMenuItems } from '@/routes/utils';

 const { Header, Sider, Content } = Layout;

--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -0,0 +1,7 @@
+import { setupWorker } from 'msw/browser';
+import { systemHandlers } from './system';
+
+/** 汇总所有模块的 mock handlers */
+const worker = setupWorker(...systemHandlers);
+
+export default worker;
--- a/src/mock/system.ts
+++ b/src/mock/system.ts
@@ -0,0 +1,71 @@
+import { http, HttpResponse } from 'msw';
+
+/** 部门树 mock 数据 */
+const deptList = [
+  {
+    key: '1',
+    title: '总公司',
+    parentKey: null,
+    children: [
+      {
+        key: '1-1',
+        title: '技术部',
+        parentKey: '1',
+        children: [
+          { key: '1-1-1', title: '前端组', parentKey: '1-1', children: [] },
+          { key: '1-1-2', title: '后端组', parentKey: '1-1', children: [] },
+        ],
+      },
+      { key: '1-2', title: '产品部', parentKey: '1', children: [] },
+      { key: '1-3', title: '运营部', parentKey: '1', children: [] },
+    ],
+  },
+];
+
+/** 用户列表 mock 数据，按部门 key 分组 */
+const userMap: Record<string, object[]> = {
+  '1': [{ username: 'admin', name: '管理员', email: 'admin@example.com', status: '启用' }],
+  '1-1': [
+    { username: 'zhangsan', name: '张三', email: 'zhangsan@example.com', status: '启用' },
+    { username: 'lisi', name: '李四', email: 'lisi@example.com', status: '启用' },
+  ],
+  '1-1-1': [{ username: 'wangwu', name: '王五', email: 'wangwu@example.com', status: '启用' }],
+  '1-1-2': [{ username: 'zhaoliu', name: '赵六', email: 'zhaoliu@example.com', status: '禁用' }],
+  '1-2': [{ username: 'sunqi', name: '孙七', email: 'sunqi@example.com', status: '启用' }],
+  '1-3': [],
+};
+
+/** 包装为统一响应格式 */
+const ok = (data: unknown) => ({ code: '0', msg: 'ok', data, time: Date.now(), ok: true });
+
+export const systemHandlers = [
+  // 获取部门树
+  http.get('/api/system/dept/tree', () => {
+    return HttpResponse.json(ok(deptList));
+  }),
+
+  // 新增部门
+  http.post('/api/system/dept/add', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json(ok({ key: `dept_${Date.now()}`, ...body }));
+  }),
+
+  // 编辑部门
+  http.post('/api/system/dept/edit', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json(ok(body));
+  }),
+
+  // 删除部门
+  http.post('/api/system/dept/del', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json(ok({ key: body.key }));
+  }),
+
+  // 根据部门获取用户列表
+  http.get('/api/system/user/list', ({ request }) => {
+    const url = new URL(request.url);
+    const deptKey = url.searchParams.get('deptKey') ?? '';
+    return HttpResponse.json(ok(userMap[deptKey] ?? []));
+  }),
+];
--- a/src/pages/system/user/DeptModal.tsx
+++ b/src/pages/system/user/DeptModal.tsx
@@ -0,0 +1,52 @@
+import { Form, Input, Modal } from 'antd';
+import { useEffect } from 'react';
+
+export interface DeptFormValues {
+  name: string;
+}
+
+interface DeptModalProps {
+  /** 弹窗是否可见 */
+  open: boolean;
+  /** 弹窗标题 */
+  title: string;
+  /** 编辑时的初始值，新增时为 undefined */
+  initialValues?: DeptFormValues;
+  /** 确认回调，返回表单数据 */
+  onOk: (values: DeptFormValues) => void;
+  /** 取消回调 */
+  onCancel: () => void;
+}
+
+const DeptModal = ({ open, title, initialValues, onOk, onCancel }: DeptModalProps) => {
+  const [form] = Form.useForm<DeptFormValues>();
+
+  // 每次打开时重置并填充表单
+  useEffect(() => {
+    if (open) {
+      form.resetFields();
+      if (initialValues) form.setFieldsValue(initialValues);
+    }
+  }, [open, initialValues, form]);
+
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    onOk(values);
+  };
+
+  return (
+    <Modal title={title} open={open} onOk={handleOk} onCancel={onCancel} destroyOnHidden>
+      <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
+        <Form.Item
+          label="部门名称"
+          name="name"
+          rules={[{ required: true, message: '请输入部门名称' }]}
+        >
+          <Input placeholder="请输入部门名称" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default DeptModal;
--- a/src/pages/system/user/DeptTree.tsx
+++ b/src/pages/system/user/DeptTree.tsx
@@ -0,0 +1,214 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Card, Col, Popconfirm, Space, Spin, Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import { useEffect, useState } from 'react';
+import {
+  addDept,
+  delDept,
+  deptTree,
+  editDept,
+  type DeptNode,
+} from '@/api/system/user';
+import DeptModal from './DeptModal';
+import type { DeptFormValues } from './DeptModal';
+
+/** 单个树节点标题，含悬浮操作按钮 */
+const DeptTreeNode = ({
+  node,
+  onAdd,
+  onEdit,
+  onDelete,
+}: {
+  node: DeptNode;
+  onAdd: (key: string) => void;
+  onEdit: (node: DeptNode) => void;
+  onDelete: (key: string) => Promise<void>;
+}) => {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 4 }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <span>{node.title}</span>
+      {/* 仅悬浮时显示操作按钮 */}
+      <Space
+        size={0}
+        style={{ visibility: hovered ? 'visible' : 'hidden' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Button
+          type="text"
+          size="small"
+          icon={<PlusOutlined />}
+          title="新增子部门"
+          onClick={() => onAdd(node.key)}
+        />
+        <Button
+          type="text"
+          size="small"
+          icon={<EditOutlined />}
+          title="编辑"
+          onClick={() => onEdit(node)}
+        />
+        {/* 删除使用气泡卡片二次确认，不打开 Modal */}
+        <Popconfirm
+          title="确认删除"
+          description={`确定要删除「${node.title}」及其所有子部门吗？`}
+          okText="删除"
+          cancelText="取消"
+          okButtonProps={{ danger: true }}
+          onConfirm={() => onDelete(node.key)}
+        >
+          <Button type="text" size="small" danger icon={<DeleteOutlined />} title="删除" />
+        </Popconfirm>
+      </Space>
+    </div>
+  );
+};
+
+/** 递归将 DeptNode 转为 antd Tree 的 DataNode */
+const toTreeData = (
+  nodes: DeptNode[],
+  onAdd: (key: string) => void,
+  onEdit: (node: DeptNode) => void,
+  onDelete: (key: string) => Promise<void>,
+): DataNode[] =>
+  nodes.map((node) => ({
+    key: node.key,
+    title: <DeptTreeNode node={node} onAdd={onAdd} onEdit={onEdit} onDelete={onDelete} />,
+    children: node.children ? toTreeData(node.children, onAdd, onEdit, onDelete) : undefined,
+  }));
+
+interface DeptTreeProps {
+  /** 当前选中的部门 key */
+  selectedKey: string;
+  /** 选中部门回调 */
+  onSelect: (key: string) => void;
+}
+
+/** 弹窗模式：新增根部门 | 新增子部门 | 编辑 */
+type ModalMode = 'addRoot' | 'addChild' | 'edit';
+
+const DeptTree = ({ selectedKey, onSelect }: DeptTreeProps) => {
+  const [loading, setLoading] = useState(false);
+  const [deptData, setDeptData] = useState<DeptNode[]>([]);
+
+  // tick 变化时触发部门树重新加载
+  const [tick, setTick] = useState(0);
+
+  /** 触发部门树刷新 */
+  const loadDeptTree = () => setTick((n) => n + 1);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await deptTree();
+        // 用 cancelled 标志位防止卸载后的竞态更新
+        if (!cancelled) setDeptData(res.data ?? []);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    load();
+    return () => { cancelled = true; };
+  }, [tick]);
+
+  // 弹窗状态
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalMode, setModalMode] = useState<ModalMode>('addRoot');
+  const [modalTitle, setModalTitle] = useState('新增部门');
+  const [editingNode, setEditingNode] = useState<DeptNode | null>(null);
+  const [parentKey, setParentKey] = useState<string>('');
+
+  /** 打开新增根部门弹窗 */
+  const handleAddRoot = () => {
+    setModalMode('addRoot');
+    setModalTitle('新增根部门');
+    setEditingNode(null);
+    setModalOpen(true);
+  };
+
+  /** 打开新增子部门弹窗 */
+  const handleAddChild = (pKey: string) => {
+    setModalMode('addChild');
+    setModalTitle('新增子部门');
+    setParentKey(pKey);
+    setEditingNode(null);
+    setModalOpen(true);
+  };
+
+  /** 打开编辑弹窗 */
+  const handleEdit = (node: DeptNode) => {
+    setModalMode('edit');
+    setModalTitle('编辑部门');
+    setEditingNode(node);
+    setModalOpen(true);
+  };
+
+  /** 删除部门，由 Popconfirm 确认后调用 */
+  const handleDelete = async (key: string) => {
+    await delDept(key);
+    // 删除成功后重新加载部门树
+    loadDeptTree();
+  };
+
+  /** Modal 确认，根据模式调用对应接口后刷新部门树 */
+  const handleModalOk = async (values: DeptFormValues) => {
+    if (modalMode === 'addRoot') {
+      await addDept({ title: values.name, parentKey: null });
+    } else if (modalMode === 'addChild') {
+      await addDept({ title: values.name, parentKey: parentKey });
+    } else if (modalMode === 'edit' && editingNode) {
+      await editDept(editingNode.key, { title: values.name });
+    }
+    setModalOpen(false);
+    // 操作成功后重新加载部门树
+    loadDeptTree();
+  };
+
+  const treeData = toTreeData(deptData, handleAddChild, handleEdit, handleDelete);
+
+  return (
+    <Col xs={24} sm={24} md={7} lg={6} xl={5} style={{ display: 'flex' }}>
+      <Card
+        title="部门"
+        style={{ width: '100%' }}
+        styles={{ body: { padding: 12, overflow: 'auto' } }}
+        extra={
+          <Button type="link" size="small" icon={<PlusOutlined />} onClick={handleAddRoot}>
+            新增
+          </Button>
+        }
+      >
+        <Spin spinning={loading}>
+          <Tree
+            treeData={treeData}
+            defaultExpandAll
+            selectedKeys={[selectedKey]}
+            blockNode
+            onSelect={(keys) => {
+              if (keys.length > 0) onSelect(String(keys[0]));
+            }}
+          />
+        </Spin>
+      </Card>
+
+      <DeptModal
+        open={modalOpen}
+        title={modalTitle}
+        initialValues={editingNode ? { name: editingNode.title } : undefined}
+        onOk={handleModalOk}
+        onCancel={() => setModalOpen(false)}
+      />
+    </Col>
+  );
+};
+
+export default DeptTree;
--- a/src/pages/system/user/UserTable.tsx
+++ b/src/pages/system/user/UserTable.tsx
@@ -0,0 +1,66 @@
+import { Card, Col, Table, Tag } from 'antd';
+import { useEffect, useState } from 'react';
+import { listUser, type UserRecord } from '@/api/system/user';
+
+/** 状态值与 Tag 颜色的映射 */
+const statusColorMap: Record<string, string> = {
+  启用: 'success',
+  禁用: 'error',
+};
+
+const columns = [
+  { title: '用户名', dataIndex: 'username', key: 'username' },
+  { title: '姓名', dataIndex: 'name', key: 'name' },
+  { title: '邮箱', dataIndex: 'email', key: 'email' },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    render: (status: string) => (
+      <Tag color={statusColorMap[status] ?? 'default'}>{status}</Tag>
+    ),
+  },
+];
+
+interface UserTableProps {
+  deptKey: string;
+}
+
+const UserTable = ({ deptKey }: UserTableProps) => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<UserRecord[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await listUser(deptKey);
+        // 用 cancelled 标志位防止组件卸载后的竞态更新
+        if (!cancelled) setData(res.data ?? []);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    load();
+    return () => { cancelled = true; };
+  }, [deptKey]);
+
+  return (
+    <Col xs={24} sm={24} md={17} lg={18} xl={19} style={{ display: 'flex' }}>
+      <Card title="用户列表" style={{ width: '100%' }}>
+        <Table
+          columns={columns}
+          dataSource={data}
+          rowKey="username"
+          loading={loading}
+          pagination={{ pageSize: 10 }}
+        />
+      </Card>
+    </Col>
+  );
+};
+
+export default UserTable;
--- a/src/pages/system/user/index.tsx
+++ b/src/pages/system/user/index.tsx
@@ -1,20 +1,19 @@
-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' },
-];
+import { Row } from 'antd';
+import { useState } from 'react';
+import DeptTree from './DeptTree';
+import UserTable from './UserTable';

 const UserManagement = () => {
+  const [selectedDeptKey, setSelectedDeptKey] = useState('1');
+
  return (
-    <div style={{ padding: 24 }}>
-      <Title level={4} style={{ marginBottom: 16 }}>用户管理</Title>
-      <Table columns={columns} dataSource={[]} rowKey="username" />
-    </div>
+    <Row
+      gutter={[16, 16]}
+      style={{ padding: 24, height: '100%', alignContent: 'flex-start' }}
+    >
+      <DeptTree selectedKey={selectedDeptKey} onSelect={setSelectedDeptKey} />
+      <UserTable deptKey={selectedDeptKey} />
+    </Row>
  );
 };

--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,7 +1,7 @@
 import { createBrowserRouter } from 'react-router';
-import RootLayout from './layouts/RootLayout';
-import { routes } from './routes';
-import { toRouteObjects } from './routes/utils';
+import RootLayout from '@/layouts/RootLayout';
+import { routes } from '@/routes';
+import { toRouteObjects } from '@/routes/utils';

 const router = createBrowserRouter([
  {
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,9 +1,9 @@
 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 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[] = [
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -34,10 +34,4 @@ export const get = <T>(url: string, params?: object) =>
 export const post = <T>(url: string, data?: object) =>
  request.post<API.Response<T>>(url, data).then((res) => res.data);

-export const put = <T>(url: string, data?: object) =>
-  request.put<API.Response<T>>(url, data).then((res) => res.data);
-
-export const del = <T>(url: string, params?: object) =>
-  request.delete<API.Response<T>>(url, { params }).then((res) => res.data);
-
 export default request;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,11 @@
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,

+    /* 路径别名 */
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
    /* type checking */
    "noUnusedLocals": true,
    "noUnusedParameters": true