diff --git a/frontend-pc/.agents/README.md b/frontend-pc/.agents/README.md
index 65b0e12..858fd4a 100644
--- a/frontend-pc/.agents/README.md
+++ b/frontend-pc/.agents/README.md
@@ -2,20 +2,25 @@
 
 本目录为 AI 编码助手规范的**唯一来源**（Single Source of Truth），适用于 Cursor、OpenCode、Codex 等工具。
 
+> ⚠️ **2026-10 已整体重写**：PC 端从 **Gi Admin Pro + Arco Design Vue** 换成 **纯 Vue 3 + Naive UI**。
+> 上一版 skills 里的 Arco 组件名（`a-table` / `a-form` / `a-modal`）、`v-hasPerm`、auto-import、
+> Stylelint、Gi 的 `useTable/usePagination` **全部不再适用** —— 照着写会编译不过或静默失效。
+> 唯一保留原样的是 `git-commit`（与框架无关）。
+
 ## 结构
 
 ```
 .agents/
 ├── rules/
-│   └── agent.md                # 唯一常驻规则（Cursor 经 AGENTS.md 内联注入）
+│   └── agent.md                # 唯一常驻规则（AGENTS.md 内联注入）
 └── skills/                   # 按需加载
-    ├── code-ts/SKILL.md
-    ├── code-vue/SKILL.md
-    ├── code-css/SKILL.md
-    ├── project-guide/SKILL.md
-    ├── project-crud/SKILL.md
-    ├── project-api/SKILL.md
-    └── git-commit/SKILL.md
+    ├── code-ts/SKILL.md          # TS 命名 / 导入 / 显式 import
+    ├── code-vue/SKILL.md         # SFC 写法与模板约定
+    ├── code-css/SKILL.md         # SCSS 与样式边界
+    ├── project-guide/SKILL.md    # 技术栈 / 目录 / 七条最容易写错的约定
+    ├── project-crud/SKILL.md     # 列表 + 表单的标准写法
+    ├── project-api/SKILL.md      # 接口调用（没有 Mock）
+    └── git-commit/SKILL.md       # 提交规范（与框架无关）
 ```
 
 ## 工具适配
@@ -23,7 +28,5 @@
 | 工具 | 适配方式 |
 |------|----------|
 | Cursor | `AGENTS.md`（内联 behavior 规则 + 技能索引）+ `.agents/skills/`（按需） |
-| OpenCode | `AGENTS.md` + `opencode.json` + `.agents/rules/` + `.agents/skills/` |
+| OpenCode | `AGENTS.md` + `.agents/rules/` + `.agents/skills/` |
 | Codex | `AGENTS.md` + `.agents/skills/` |
-
-修改 `agent.md` 后请同步 `AGENTS.md` 的「常驻规则」一节；编码规范改对应 skill，不要重复写入 `AGENTS.md`。
diff --git a/frontend-pc/.agents/rules/agent.md b/frontend-pc/.agents/rules/agent.md
index 01550ae..19fe9d6 100644
--- a/frontend-pc/.agents/rules/agent.md
+++ b/frontend-pc/.agents/rules/agent.md
@@ -1,6 +1,6 @@
 # Agent 行为准则
 
-> 适用于 Cursor、OpenCode、Codex 等 AI 编码助手。Cursor 经 `AGENTS.md` 内联本节每轮注入。
+> 适用于 Cursor、OpenCode、Codex 等 AI 编码助手。AGENTS.md 内联本节每轮注入。
 
 ## 通用要求
 
@@ -11,26 +11,27 @@
 
 ## 应当
 
-- 改代码前先阅读项目既有实现，保持风格一致。
-- 优先复用项目内已有组件、composables、工具函数与 API 封装。
-- 任务完成后，视情况运行 lint / typecheck / test（与改动相关时）。
-- **按需读取** skills，不要预加载全部；写代码前按任务类型加载对应 skill（见 `AGENTS.md` 技能索引）。
+- 改代码前先阅读项目既有实现（`src/views/` 里同类页面就是最好的模板），保持风格一致。
+- 优先复用已有组件、composables（`src/composables/`）、工具函数（`src/utils/`）与 API 封装（`src/apis/xt/`）。
+- 任务完成后运行 `pnpm typecheck`（**当前 0 错，有报错就是新引入的**）与 `pnpm lint`。
+- **按需读取** skills，不要预加载全部。
 
 ## 不应
 
-- 为已自动导入的 API / 组件写冗余 import。
-- 引入与项目技术栈不符的 UI 库或全新抽象层。
-- 猜测不存在的 API 路径、响应结构或配置项；以项目代码与类型定义为准。
-- 在用户未要求时添加测试、文档或无关注释。
+- ❌ 写 **Arco Design** 的组件与属性（`a-table` / `a-form` / `a-modal` / `arcoblue` …）—— 项目已不用 Arco。
+- ❌ 用 `v-hasPerm` 指令或指望 **auto-import**：本仓库组件与 API **全部显式 import**。
+- ❌ 把 `apis/xt/*.ts` 里映射的 **Arco 色词**直接塞给 `n-tag`（会静默变灰，见 `utils/tag.ts`）。
+- ❌ 猜测不存在的接口路径、响应结构或配置项；以 `src/apis/xt/` 与后端契约为准。
+- ❌ 在用户未要求时添加测试、文档或无关注释。
 
 ## 编码前必读 skill
 
 | 任务 | 技能 |
 |------|------|
-| 写/改 `.vue` | `code-vue` |
-| 写/改样式 | `code-css` |
-| 写/改 `.ts` / composable | `code-ts` |
-| 项目约定、Gi 组件 | `project-guide` |
-| CRUD 列表/表单 | `project-crud` |
-| API / Mock | `project-api` |
-| 提交代码 | `git-commit` |
+| 写/改 `.vue` | `skills/code-vue/SKILL.md` |
+| 写/改样式 | `skills/code-css/SKILL.md` |
+| 写/改 `.ts` / composable | `skills/code-ts/SKILL.md` |
+| 项目约定、Naive UI 组件与目录 | `skills/project-guide/SKILL.md` |
+| CRUD 列表/表单 | `skills/project-crud/SKILL.md` |
+| 接口调用 | `skills/project-api/SKILL.md` |
+| git commit | `skills/git-commit/SKILL.md` |
diff --git a/frontend-pc/.agents/skills/code-css/SKILL.md b/frontend-pc/.agents/skills/code-css/SKILL.md
index b9bcffa..3a0ab74 100644
--- a/frontend-pc/.agents/skills/code-css/SKILL.md
+++ b/frontend-pc/.agents/skills/code-css/SKILL.md
@@ -1,36 +1,112 @@
 ---
 name: code-css
-description: Vue SFC 样式块、BEM 命名、Stylelint 与 scoped 约定。编写或修改组件样式（.vue style、scss、less、css）时加载本技能。
+description: SCSS 写法、样式作用域与全局样式的边界。编写或修改 .vue 的 style 块、.scss 文件时加载本技能。
 ---
 
-# CSS 规范（Vue 3）
+# 样式规范（SCSS + Naive UI）
 
-## SFC 样式块
+> ⚠️ **Stylelint 已随 2026-10 重搭移除**（`pnpm lint:style` 不存在了）。样式只受 ESLint 与人工约定约束。
 
-- 位于 `<script>` 之后；默认 **scoped**；全局样式须在注释中说明原因。
-- 预处理器按项目约定，同一组件内保持一致。
+## 放哪里
 
-## 命名（BEM）
+| 场景 | 位置 |
+|---|---|
+| 组件的具体样式 | 该 SFC 的 `<style scoped lang="scss">` |
+| **跨页面**的版面基线（背景、卡片外观、卡片间距、滚动、分页器容器、区块标题） | `src/styles/index.scss`（**只放跨页面的东西**） |
+| 组件外观的主题变量（Card / Button / DataTable 的描边、圆角、阴影） | `src/App.vue` 的 `themeOverrides` |
 
-- 自定义 class：**kebab-case** + **BEM**（`block`、`block__element`、`block--modifier`）。
-- 一个 SFC 通常一个 Block；元素用 `__`，修饰符用 `--`；**禁止** `block__a__b` 链式元素。
-- 第三方 UI 类名、全局工具类不在 BEM 约束内。
+## 设计基线（2026-10 卡片式改造后：**页面只引用，不再各写一套**）
 
-```scss
-.user-card {
-  &__avatar { width: 48px; }
-  &__badge--vip { color: var(--color-warning); }
-}
-```
+`src/styles/index.scss` 的 `:root` 里定义，页面直接 `var()`：
 
-## 编写原则
+| 变量 | 值 | 用途 |
+|---|---|---|
+| `--xt-header-h` | `56px` | 顶栏高度（`.app-shell__header` 与 `.page-card` 高度算式**共用**） |
+| `--xt-content-pad` | `16px` | 内容区内边距（同上，两处共用，别写死数值） |
+| `--xt-gap` | `16px` | 卡片/区域之间的间距 |
+| `--xt-bg` | `#f2f4f7` | 页面底色（**卡片要靠它才浮得起来**） |
+| `--xt-card-border` / `--xt-card-border-weak` | `#e5e8ee` / `#eef1f5` | 卡片描边 / 嵌套卡片描边 |
+| `--xt-card-radius` | `10px` | 卡片圆角 |
+| `--xt-card-pad-x` / `--xt-card-pad-y` | `18px` / `16px` | 卡片内容区左右 / 上下内边距（**别在页面里写死**，见下） |
+| `--xt-band-bg` | `#f7f8fa` | 浅灰色带：卡片头 / 表头 / 卡片内的子格子 |
+| `--xt-text` / `--xt-text-2` / `--xt-text-3` | `#1f2229` / `#667085` / `#98a2b3` | 主 / 次 / 弱文字 |
 
-- 颜色、间距、字号优先复用项目 CSS 变量或设计令牌。
-- 避免内联 `style`（动态样式除外）和滥用 `!important`。
-- 遵循项目 Stylelint；改动后视情况运行 `lint:style`。
+### ⚠️ 卡片内边距：**不要让页面自己写**
 
-## 禁止
+Naive 的规则是 `cB("card-content", "padding: 0 var(--n-padding-left) var(--n-padding-bottom) …")`
+外加 `c("&:first-child", "padding-top: var(--n-padding-top)")` ——
+**`padding-top` 只给"内容区是长子"（也就是没有卡片头）的卡片**。
+所以有标题的卡片，内容区 `padding-top` 是 **0**，第一行内容直接贴在标题下面那条灰条上。
 
-- ❌ 自定义 class 用 camelCase 或非语义命名
-- ❌ BEM 元素链式嵌套（`block__a__b`）
-- ❌ 大段内联 style 或过多 `:deep()` 堆叠
+全局 `.n-card.n-card > .n-card-content { padding: var(--xt-card-pad-y) var(--xt-card-pad-x) }`
+已经统一处理掉了。**但它是普通样式，会被内联样式盖掉** ——
+页面里写 `:content-style="{ padding: '12px' }"` 会让那张卡片比邻居紧一圈
+（而且那个写法只解决左右，不管上面这件事）。要调内边距就改 `--xt-card-pad-x/y`。
+
+> 📌 排查手法：`getComputedStyle(card.querySelector(':scope > .n-card-content')).paddingTop`
+> 应当是 `16px`；是 `0` 说明没匹配上，是别的值说明有内联样式或更具体的选择器在盖。
+
+现成的全局类（**优先复用，不要另起名字**）：
+
+| 类 | 用途 |
+|---|---|
+| `.page-plain` | 普通（非列表）页根节点：flex 列 + `--xt-gap` 间距 |
+| `.page-card` + `.page-card__body` | **列表页专用**高度链：卡片撑满内容区 → 表体自滚 → 分页器钉底 |
+| `.toolbar` / `.toolbar--plain` | 筛选与动作行（自带下分隔线 / 去掉分隔线） |
+| `.toolbar__hint` | 工具条里的灰色小字提示 |
+| `.section-title` + `.section-title__note` | 卡片**内部**次级区块标题（左侧蓝色小竖条 + 右侧灰色说明） |
+
+## 卡片式的三条规矩
+
+1. **卡片外观是全局给的**：`.n-card.n-card` 统一白底 + 描边 + 轻阴影 + 卡片头浅灰色带
+   （权重写成 `.n-card.n-card` 是因为 naive 的样式由 css-render **运行时注入**，先后顺序不保证）。
+   页面**不要再**自己给卡片写边框/阴影。
+2. **卡里不要套卡**：卡片内部要分区时，用浅灰底（`--xt-band-bg`）+ 弱描边（`--xt-card-border-weak`）
+   的小格子，或 `.section-title` + `1px` 分隔线。嵌套的 `NCard` 已被全局降级为无阴影 + 无色带，
+   但布局上仍然容易糊成一片。
+3. **区域间隔靠"色带 + 描边"，不是靠加大 margin**：卡片之间 `--xt-gap`，卡片内区块 12~20px。
+   上一版的教训是把卡片写成 `:bordered="false"` + 内容区白底 → 白卡片浮在白底上，整页没有任何边界。
+
+## 按钮的可见性
+
+- 页面**主操作**（新建 / 导入 / 批量通过…）用 `type="primary"`，**默认尺寸**（不要 `size="small"`）。
+- **同一行内控件尺寸必须一致**：一行里混用 `small`(28px) 与默认(34px) 会参差不齐。
+  工具条统一默认尺寸；表格行内动作保持 `text` + `size="small"`。
+- 默认按钮的描边已在 `App.vue` 里加深（`#d0d5dd`）—— 原来用的 `common.borderColor`(`#e0e0e6`)
+  在白色卡片上几乎看不见，这是"按钮不明显"的主因。
+- ⚠️ naive 的按钮**边框画在子元素 `.n-button__border` 上**，不是根节点；
+  用 `getComputedStyle(btn).borderTopWidth` 检查会得到 `0px`，别据此判断"边框没生效"。
+
+## 覆盖 naive 内部类之前：**先确认真实类名**
+
+⚠️ naive 的类名**不是一套统一规则**，同一个组件里两种命名混着用：
+
+| 真实类名 | 由什么生成 |
+|---|---|
+| `.n-card-header` / `.n-card-content` | `cB("card-header")` / `cB("card-content")` —— **单短横** |
+| `.n-button__border` / `.n-button__content` | `cE("border")` / `cE("content")` —— **双下划线** |
+
+所以"想当然按 BEM 写"会**静默失效**：`:deep(.n-card__content)` 匹配不到任何元素，
+不报错、不影响编译，只是那条样式**什么也没做**。
+
+> 2026-10 实际踩到：`.page-card` 的高度链第一环（卡片内容区要是能撑满的 flex 列）
+> 就写在 `:deep(.n-card__content)` 里 —— 结果「操作日志」的表格体高度算成 **0**，
+> 行**在 DOM 里、数据也查得到，屏幕上一行都看不见**。
+>
+> **正确做法**：在 DevTools 里选中那个元素，看它实际的 class；或者去
+> `node_modules/naive-ui/es/<组件>/src/styles/index.cssr.mjs` 里搜一眼。
+> 顺带：`.n-card-content` 与 `.n-card-header` 这两个名字已经被 `styles/index.scss` 用到，
+> 改卡片相关样式时以那里为准。
+
+## 约定
+
+- class 用 **kebab-case**；同一块的子元素用 `块__元素` 风格（`task__tabs`、`join__hint`），
+  与现有页面保持一致即可，**不要引入新的方法论或工具链**。
+- 颜色优先用 Naive UI 的 CSS 变量 / 主题变量，**不要**写死 Arco 时代的 `--arco-*` 变量（已不存在）。
+- 选择器保持扁平（≤2 层），避免 `!important`；确实要覆盖 naive 内部类时**加注释说明原因**。
+
+## 踩过的坑（照抄现有写法即可）
+
+1. **列表页卡片要能自己滚**：分页器被裁出可视区是本项目反复踩的问题 ——
+   列表页统一用 `styles/index.scss` 里的 `.page-card` 容器（卡片撑满内容区 → 表体自己滚 → 分页器钉在卡片底部）。
+2. 页面根节点用 `NPagination`/`NDataTable` 时别自己写 `overflow: hidden`，会把分页器裁掉。
diff --git a/frontend-pc/.agents/skills/code-ts/SKILL.md b/frontend-pc/.agents/skills/code-ts/SKILL.md
index d011f7b..c109da1 100644
--- a/frontend-pc/.agents/skills/code-ts/SKILL.md
+++ b/frontend-pc/.agents/skills/code-ts/SKILL.md
@@ -1,38 +1,41 @@
 ---
 name: code-ts
-description: Vue 3 + TypeScript 命名、导入顺序、目录组织与 Lint 约定。编写或修改 .ts/.js 代码、新增 composable 或工具函数时加载本技能。
+description: Vue 3 + TypeScript 命名、导入顺序、显式 import 与目录组织。编写或修改 .ts/.js 代码、新增 composable 或工具函数时加载本技能。
 ---
 
-# TypeScript 规范（Vue 3）
+# TypeScript 规范（Vue 3 + Naive UI）
 
 Vue SFC 见 [code-vue](../code-vue/SKILL.md)，样式见 [code-css](../code-css/SKILL.md)。
 
 ## 命名
 
-- 组件 / 文件名：**PascalCase**；变量 / 函数：**camelCase**（事件处理推荐 `handle` 前缀）。
-- 常量：需要时 **UPPER_SNAKE_CASE**；Composables：`use` 前缀。
-- Props camelCase；模板事件名与 emits 定义 **kebab-case**。
-- 样式 class：**kebab-case** + BEM（见 [code-css](../code-css/SKILL.md)）；全局组件前缀遵循项目统一约定。
+- 组件文件：**PascalCase**（`AppIcon.vue`、`AuditDetailDrawer.vue`）；工具/接口模块：**kebab-case 或小写**（`export-task.ts`、`acting-tenant.ts`）。
+- 变量 / 函数：**camelCase**；事件处理用 `handle` 前缀；Composables 用 `use` 前缀。
+- 常量：`UPPER_SNAKE_CASE`（如 `TENANT_STATUS`）；展示映射放在 `src/apis/xt/<域>.ts` 里与接口同处。
+- 样式 class：kebab-case（见 [code-css](../code-css/SKILL.md)）。
 
 ## TypeScript
 
-- `import type` 与值导入分离；对象结构优先 `interface`，联合/工具类型用 `type`。
+- `import type { ... }` 与值导入**分开写**（ESLint `@antfu` 会强制）。
+- 对象结构优先 `interface`；联合/工具类型用 `type`。
 - Props 默认值：`withDefaults(defineProps<Type>(), { ... })`；避免 `any`。
-- 公共类型集中管理；领域类型靠近业务模块。
+- **接口出入参类型直接复用 `src/apis/xt/` 里的契约类型**，不要手写一份字段。
 
-## 导入顺序
+## 导入顺序（ESLint 会排）
 
-1. 类型导入 → 2. 第三方 → 3. Vue/官方库 → 4. 项目内部（composables、组件、utils、样式）
+1. 类型导入（`import type`） → 2. 第三方（`vue` / `naive-ui` / `axios`） → 3. 项目内部（`@/apis`、`@/stores`、`@/utils`、`@/icons`、`@/composables`）
 
-不要重复 import 已自动注册的符号（类型除外）。
+⚠️ **本仓库没有 auto-import**：naive-ui 组件、Vue API（`ref`/`computed`/`h`…）、工具函数**必须显式 import**。
+不要写"为已自动导入的 API 写冗余 import"这类旧规范 —— 那是上一版（Gi 模板）的约定，现在写了才不报错。
 
-## 组织
+## 常用内部模块
 
-- 遵循项目现有目录划分；单文件建议不超过 400 行，超出应拆分。
-- 可复用 UI 放组件目录；跨页面逻辑抽 composables；纯函数抽 utils。
-- 路径别名遵循项目配置，避免 `../../../` 穿越。
-
-## Lint
-
-- 遵循项目 ESLint、Stylelint、tsconfig，不擅自关闭规则。
-- 必要的 `eslint-disable` / `@ts-expect-error` 须注释说明原因。
+| 模块 | 用途 |
+|---|---|
+| `@/utils/http.ts` | axios 实例：成功直接 resolve `data`、失败弹提示、带 `Authorization` 与 `X-Tenant-Id` |
+| `@/utils/naive.ts` | 全局 `message`（在组件外用，如 http 拦截器） |
+| `@/utils/tag.ts` | `tagOf()`：状态色词 → `n-tag` 的 `type`（**必须过这一层**） |
+| `@/utils/format.ts` | `fmtDate` 等格式化 |
+| `@/composables/pagination.ts` | `listPagination()`：列表页分页器统一参数 |
+| `@/stores/user.ts` | `useUserStore()`：`has('码')` / `hasAny(...)` / `menus` / `isPlatform` |
+| `@/stores/acting-tenant.ts` | 平台运营的「当前学校」（请求头 `X-Tenant-Id`） |
diff --git a/frontend-pc/.agents/skills/code-vue/SKILL.md b/frontend-pc/.agents/skills/code-vue/SKILL.md
index 0934eb1..b3cb502 100644
--- a/frontend-pc/.agents/skills/code-vue/SKILL.md
+++ b/frontend-pc/.agents/skills/code-vue/SKILL.md
@@ -1,67 +1,92 @@
 ---
 name: code-vue
-description: Vue 3 Composition API、SFC 块顺序、defineEmits、useTemplateRef、响应式约定。编写或修改 .vue 文件时加载本技能。
+description: Vue 3 Composition API、SFC 块顺序、Naive UI 组件显式导入、props/emits 与模板约定。编写或修改 .vue 文件时加载本技能。
 ---
 
-# Vue 规范（Vue 3）
+# Vue 规范（Vue 3 + Naive UI）
 
 适用于 Composition API + `<script setup lang="ts">`。样式见 [code-css](../code-css/SKILL.md)。
 
 ## 基础
 
-- 新组件一律 **Composition API** + `<script setup>`，禁止 Options API。
-- 需要组件名时用 `defineOptions({ name: 'ComponentName' })`；路由页 `name` 与路由配置一致。
-- 块顺序：`<template>` → `<script setup>` → `<style>`（遵循项目 ESLint block-order）。
+- 新组件一律 **Composition API** + `<script setup lang="ts">`，禁止 Options API。
+- 块顺序：`<template>` → `<script setup>` → `<style scoped>`。
+- 需要组件名时用 `defineOptions({ name: 'XxxYyy' })`。
 
 ## Script 内顺序
 
-类型导入 → 第三方 → Vue API → 项目模块 → `defineOptions` → `defineModel` → `defineProps` + `withDefaults` → `defineEmits` → `defineSlots` → 常量/函数 → `ref`/`reactive` → `computed` → 方法 → 生命周期/`watch` → `defineExpose`
+类型导入 → 第三方 → Vue API → 项目模块 → `defineOptions` → `defineProps` + `withDefaults` → `defineEmits` → 常量/函数 → `ref`/`reactive` → `computed` → 方法 → 生命周期/`watch`。
 
-## 自动导入
+## ⚠️ 显式 import（本仓库没有 auto-import）
 
-已自动注册的 API / 组件不要重复 import；仅需类型时用 `import type`。以 `vite.config` 与现有代码为准。
+```ts
+import type { DataTableColumns, FormInst } from 'naive-ui'
+import { NButton, NCard, NDataTable, NForm, NFormItem, NInput, NModal, NTag, useMessage } from 'naive-ui'
+import { computed, h, onMounted, reactive, ref } from 'vue'
+import * as tenantApi from '@/apis/xt/tenant'
+```
+
+- 组件用 **PascalCase** 标签：`<NDataTable :columns="columns" :data="list" />`（**不是** `<a-table>`）。
+- 弹窗/抽屉、表格、表单全部来自 **naive-ui**；主题与全局配置在 `utils/naive.ts` / `App.vue` 一侧。
+
+### 漏 import 是**静默故障**（2026-10 实测踩到 4 个文件 6 处）
+
+写小写标签（`<n-button>`）而忘了 import 时，Vue 把它当**未知自定义元素**渲染：
+**不报错、不崩、`pnpm typecheck` 与 `pnpm lint` 全绿**，只是样式整块丢掉。
+实测表现：`<n-button>` 变成无边框透明块、`<n-avatar>` 变成 18×29 的裸元素、`<n-form>` 的表单排版全丢 ——
+用户看到的就是"这个页面样式坏了"。
+
+> **统一写 PascalCase 标签**（`<NButton>`），漏 import 时 Vue 会给出
+> `Failed to resolve component` 警告，比小写标签好排查。
+> 另外 `python scripts/check-wiring.py` 的**第 ⑧ 项**会静态核对
+> 「模板里用到的 `<n-*>` ↔ 本文件的 import」，改完 PC 端跑一下它。
+
+## ⚠️ `n-tab-pane` 的标签必须用 `#tab` **插槽**
+
+naive-ui 2.45.3 里，`tab="文字"` **属性**写法渲染不出任何文字（只留一个空注释节点），
+表现是**整排 tab 一个字都不显示、整行高度只剩 12px** —— 筛选功能等于消失，且不报错。
+
+```vue
+<!-- ✅ 正确 -->
+<NTabs v-model:value="node">
+  <NTabPane :name="1">
+    <template #tab>
+      初审（班主任）
+    </template>
+  </NTabPane>
+</NTabs>
+
+<!-- ❌ 不要：标签会静默消失 -->
+<NTabPane :name="1" tab="初审（班主任）" />
+```
+
+原因：属性值走 `normalizeVNode(() => render(mergedTab ?? name))`，而这个 thunk 返回
+Text VNode，被当成块 `createBlock(vnode)` 处理；插槽那条分支返回数组，所以正常。
+
+## 权限与状态色
+
+```ts
+const user = useUserStore()
+// 没有 v-hasPerm 指令，权限判断就是一次函数调用
+const canManage = computed(() => user.has('org:manage'))
+```
+
+```vue
+<NTag
+  :type="tagOf(row.status)"
+  size="small"
+>
+  {{ STATUS_NAMES[row.status] }}
+</NTag>
+```
+
+⚠️ **不要**把 `apis/xt/*.ts` 里的 `color`（Arco 色词 `green`/`arcoblue`/`gold`）直接传给 `n-tag` 的 `type` ——
+会**静默变成默认灰色**且不报错；必须过 `@/utils/tag.ts` 的 `tagOf()`。
 
 ## 模板
 
 - 事件名、插槽名 **kebab-case**；组件 **PascalCase**。
-- 受控表单优先 `v-model`；复杂逻辑抽到 `computed` 或方法，不要写在模板里。
-- 子组件通过 props/emits 通信，避免随意访问父组件实例。
-
-## defineEmits
-
-使用**基于类型的函数调用签名**，禁止数组 / tuple 形式：
-
-```typescript
-// ✅
-const emit = defineEmits<{
-  (e: 'submit'): void
-  (e: 'change', value: string): void
-}>()
-
-// ❌ defineEmits<{ submit: [] }>() 或 tuple 形式
-```
-
-## 模板 Ref
-
-优先 **`useTemplateRef`**（Vue 3.5+）；模板 `ref` 属性值与参数字符串一致。
-
-```typescript
-const formRef = useTemplateRef<FormInstance>('formRef')
-// template: <form ref="formRef">
-```
-
-## 响应式
-
-- 原始值 `ref`，对象 `reactive`，派生 `computed`。
-- 解构 reactive 注意响应性丢失，必要时 `toRefs`。
-- 深拷贝优先 `structuredClone` 或项目工具，禁止 `JSON.parse(JSON.stringify())`。
-
-## defineExpose
-
-仅暴露父组件确实需要调用的方法或属性（如弹窗 `open`/`close`/`reset`）。
-
-## 禁止
-
-- ❌ Options API、重复自动导入、defineEmits tuple 形式
-- ❌ 无关 `ref()` 绑定模板 ref（优先 `useTemplateRef`）
-- ❌ 模板中写复杂业务逻辑
+- 表格列用 `h()` 渲染（`NButton` / `NTag` / `AppIcon`），逻辑别堆在模板里。
+- 受控表单优先 `v-model`；复杂逻辑抽到 `computed` 或方法。
+- 图标统一用 `@/icons/AppIcon.vue`（缺图标是**空占位、不报错**）。
+- 子组件通过 props/emits 通信，避免访问父组件实例。
diff --git a/frontend-pc/.agents/skills/project-api/SKILL.md b/frontend-pc/.agents/skills/project-api/SKILL.md
index d5e7c87..00f59b9 100644
--- a/frontend-pc/.agents/skills/project-api/SKILL.md
+++ b/frontend-pc/.agents/skills/project-api/SKILL.md
@@ -1,162 +1,58 @@
 ---
 name: project-api
-description: 在本模板项目中新增或修改 API 接口与类型定义（本仓库已不用 Mock，见开头说明）。涉及 http、baseAPI、分页响应格式、响应体适配时使用。
+description: 接口调用约定（axios 封装、apis/xt 模块、平台代管头、错误处理）。新增或修改接口调用时加载本技能。
 ---
 
-# API 与 Mock
+# 接口调用
 
-> ⚠️ **本仓库不用 Mock（2026-09-30 核实）**：`mock/` 目录与 `vite-plugin-mock` 都已删除，
-> `.env.development` 里 `VITE_API_PREFIX = '/api/v1'`、`VITE_API_BASE_URL = 'http://localhost:8080'`，
-> `pnpm dev` 把 `/api` 代理到真实后端 —— **后端不起着就没有数据**（这不是故障）。
->
-> 所以本文档里所有关于 Mock 的部分（`mock/**`、`defineMock`、`getBaseApi` 生成 mock、
-> Mock 目录约定）在本仓库**不适用**，保留它们只是因为 Gi 模板升级时要做差异比对。
-> 新增接口照 `src/apis/xt/*.ts` 的写法：用 `@/utils/http`，响应体 `{ code, msg, data }`
-> （适配层会补 `records`）已在 `@/utils/http` 统一处理，业务模块不要再自己解一层。
+> ⚠️ **本仓库没有 Mock**：`mock/` 与 `vite-plugin-mock` 都已删除。
+> `pnpm dev` 把 `/api` 代理到 `http://localhost:8080` → **后端不起着就没有数据**。
+> （上一版这份 skill 以 Mock 为主线，那是 Gi 模板的写法，**已不适用**。）
 
-## 接口层结构
+## 契约
 
-每个业务模块一个文件，例如 `src/apis/system/user.ts`：
+- 响应恒为 `{ code, msg, data }`；**业务错误也用 HTTP 200**，
+  只有 `401` / `403` / `429` / `5xx` 用**真实状态码**（别在业务码里找 `40301`）。
+- `code === 0` 是成功。
+
+## 封装（`src/utils/http.ts`）
+
+它替业务代码做掉三件事，所以页面里几乎不出现 `code`：
+
+1. 成功时**直接 resolve `data`** → `const vo = await getTask(id)` 拿到的就是数据；
+2. 失败时**弹一次提示**并 reject 一个带 `bizCode` 的错误（要按码分支也能拿到）；
+3. 自动带 `Authorization: Bearer <token>` 与平台代管头 `X-Tenant-Id`。
+
+## 写一个接口模块（`src/apis/xt/<域>.ts`）
 
 ```ts
-import { getBaseApi } from '@/apis/base'
+import type { PageResult } from '@/apis/types'
 import http from '@/utils/http'
 
-export interface ListItem {
-  id: string
-  name: string
-  status: Status
-  createTime: string
-  // ...
+export interface XxxVO { id: number, name: string, status: number }
+
+/** 状态映射与接口同处一个文件（别处也要用，改动只有一处） */
+export const XXX_STATUS: Record<number, { text: string, color: string }> = {
+  0: { text: '停用', color: 'gray' },
+  1: { text: '正常', color: 'green' }
 }
 
-/** 标准 CRUD */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/user' })
-
-/** 非标准接口单独声明 */
-export function getDictDataList(params: { code: string } & Pagination) {
-  return http.get<PageRes<DictDataItem[]>>('/system/dict/getDictDataList', params)
+export function list(params: { page: number, pageSize: number, keyword?: string }) {
+  return http.get<PageResult<XxxVO>>('/xxx', { params })
 }
 ```
 
-## getBaseApi 约定路径
+- 新域就**新建一个文件**，并在 `src/apis/xt/index.ts` 里按需导出；
+- 通用类型（`PageResult`、`BizError` 等）在 `src/apis/types.ts`；
+- ⚠️ 展示映射里的 `color` 是**上一版 Arco 的色词**，给 `n-tag` 用之前必须过 `@/utils/tag.ts` 的 `tagOf()`。
 
-| 方法 | HTTP | 路径 |
-|------|------|------|
-| getList | GET | `{baseUrl}/getList` |
-| getDetail | GET | `{baseUrl}/getDetail` |
-| add | POST | `{baseUrl}/add` |
-| update | POST | `{baseUrl}/update` |
-| delete | POST | `{baseUrl}/delete` |
+## 平台代管（`X-Tenant-Id`）
 
-列表参数：`{ page, size, ...filters }`
-删除参数：`{ ids: string[] }`
+平台运营的请求要带"当前学校"：值存在 `src/stores/acting-tenant.ts`，
+由 `http.ts` 统一注入。**页面不要自己拼这个头**；不选学校时**不要发请求**（发了会把各租户数据混在一起）。
 
-## 响应格式
+## 其它
 
-```ts
-// 单条/布尔
-interface ApiRes<T> {
-  code: number
-  data: T
-  message: string
-  success: boolean
-}
-
-// 分页列表 data 结构
-interface PageRes<T> {
-  records: T
-  total: number
-}
-```
-
-`useTable` 同时兼容 `data` 为数组或 `PageRes` 两种形态。
-
-## http 封装
-
-- 实例：`src/utils/http.ts`，`baseURL` = `import.meta.env.VITE_API_PREFIX`
-- 开发环境 `.env.development`：`VITE_API_PREFIX = '/mock'`
-- Token：请求头 `token` 字段（`getToken()`）
-- 业务失败：`success === false` 时 Message/Notification 提示并 reject
-- 401：跳转 `/login`
-
-```ts
-import http from '@/utils/http'
-
-http.get<PageRes<Item[]>>('/path', { page: 1, size: 10 })
-http.post<boolean>('/path', { ids: ['1'] })
-```
-
-## Mock 开发流程
-
-### 1. 静态数据
-
-在 `mock/_data/` 下维护 JSON/TS 数据，如 `system_dict.ts`。
-
-### 2. 路由 Mock
-
-在 `mock/system/`（或对应模块）新建文件：
-
-```ts
-import { defineMock } from '../_base'
-import { getBaseApi, getDelayTime, resultError, resultSuccess } from '../_utils'
-
-export default defineMock([
-  ...getBaseApi({
-    baseUrl: '/system/xxx',
-    getListData: () => resultSuccess({ total: list.length, records: list }),
-    getDetailData: (query) => {
-      const obj = list.find((i) => i.id === query.id)
-      return obj ? resultSuccess(obj) : resultError(null, '未找到', 400)
-    }
-  }),
-  {
-    url: '/system/xxx/customAction',
-    method: 'get',
-    timeout: getDelayTime(),
-    response: ({ query }) => {
-      // 筛选、分页后返回
-      return resultSuccess({ total, records })
-    }
-  }
-])
-```
-
-### 3. 工具函数
-
-| 函数 | 用途 |
-|------|------|
-| `resultSuccess(data)` | `{ code:200, success:true, data, message }` |
-| `resultError(data, message, code?)` | 失败响应 |
-| `getDelayTime()` | 50–300ms 随机延迟 |
-| `getBaseApi({ baseUrl, getListData, ... })` | 生成标准 CRUD mock |
-
-`defineMock` 会自动给 url 加前缀 `/mock`，与 `VITE_API_PREFIX` 对应。
-
-### 4. 注册
-
-确保 mock 文件被 `mock/index` 或同级聚合引入（遵循现有 `mock/system/*.ts` 模式）。
-
-## 新增模块检查清单
-
-- [ ] `src/apis/{module}/{name}.ts`：类型 + `baseAPI` 或自定义方法
-- [ ] `mock/{module}/{name}.ts`：与接口路径一致
-- [ ] 列表 Mock 返回 `{ total, records }`
-- [ ] 字段类型与 `Status`、`Gender` 等全局类型对齐
-- [ ] 在页面通过 `useTable({ listAPI, deleteAPI })` 接入
-
-## 自定义 listAPI 示例
-
-```ts
-useTable({
-  listAPI: (page) => getDictDataList({
-    ...page,
-    code: dictCode.value,
-    name: query.name || undefined,
-    status: query.status === '' ? undefined : query.status
-  }),
-  immediate: false
-})
-```
-
-`immediate: false` 用于依赖左侧选中项后再 `search()` 的场景。
+- 下载类接口（导出包、整理结果）必须走 `fetch`/axios **取 blob**：接口要鉴权，
+  直接 `window.open` 或 `<a href>` 会 401，用户看到的是"下载没反应"。
+- 签名 URL（预览图片等）**每次现取**，不要缓存进本地状态或存库（有有效期）。
diff --git a/frontend-pc/.agents/skills/project-crud/SKILL.md b/frontend-pc/.agents/skills/project-crud/SKILL.md
index fde7159..71daf0e 100644
--- a/frontend-pc/.agents/skills/project-crud/SKILL.md
+++ b/frontend-pc/.agents/skills/project-crud/SKILL.md
@@ -1,214 +1,121 @@
 ---
 name: project-crud
-description: 在本模板项目中创建或修改 CRUD 列表页、表格列、搜索区、表单弹窗。使用 GiPageLayout、useTable、GiButton、a-table、GiForm、useDict 时加载本技能。
+description: 列表页 + 新增/编辑弹窗的标准写法（Naive UI + 本项目约定）。新增或修改 CRUD 页面时加载本技能。
 ---
 
-# CRUD 列表页开发
+# CRUD 列表 / 表单（标准写法）
 
-> 写/改 `.vue` 前先读 [code-vue](../code-vue/SKILL.md)；写样式前读 [code-css](../code-css/SKILL.md)。
+先找一个同类页面照抄结构（`src/views/tenant/index.vue`、`src/views/user/index.vue`、
+`src/views/dict/index.vue` 是最典型的三份）。
 
-## 标准页面结构
+## 列表页骨架
 
 ```vue
-<template>
-  <GiPageLayout margin collapsed>
-    <template #left><!-- 可选：树/分类 --></template>
+<script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
+import { NButton, NCard, NDataTable, NSpace, NTag, useMessage } from 'naive-ui'
+import { h, onMounted, reactive, ref } from 'vue'
+import * as xxxApi from '@/apis/xt/xxx'
+import { listPagination } from '@/composables/pagination'
+import { fmtDate } from '@/utils/format'
+import { tagOf } from '@/utils/tag'
 
-    <a-row justify="space-between" class="g-row-tool">
-      <a-space wrap>
-        <GiButton type="add" @click="onAdd" />
-        <GiButton type="delete" @click="onBatchDelete" />
-      </a-space>
-      <a-space wrap>
-        <!-- 搜索表单项 -->
-        <GiButton type="search" @click="search" />
-        <GiButton type="reset" @click="reset" />
-      </a-space>
-    </a-row>
+const message = useMessage()
+const loading = ref(false)
+const list = ref<XxxVO[]>([])
+const query = reactive({ page: 1, pageSize: 20, keyword: '' })
+const total = ref(0)
 
-    <a-table
-      class="g-table"
-      row-key="id"
-      :loading="loading"
-      :data="tableData"
-      :columns="tableColumns"
-      :bordered="{ cell: true }"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
-      :pagination="pagination"
-      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
-      :selected-keys="selectedKeys"
-      @select="select"
-      @select-all="selectAll"
-    />
-
-    <XxxFormModal ref="XxxFormModalRef" @save-success="search" />
-  </GiPageLayout>
-</template>
-
-<script setup lang="tsx">
-defineOptions({ name: 'ModuleName' })
-</script>
-```
-
-## useTable 用法
-
-```ts
-import type * as T from '@/apis/system/user'
-import { baseAPI } from '@/apis/system/user'
-import { useDict, useTable } from '@/hooks'
-
-const { dictData } = useDict(['STATUS'] as const)
-
-const queryParams = reactive({ status: '', username: '' })
-
-const {
-  loading,
-  tableData,
-  pagination,
-  selectedKeys,
-  search,
-  select,
-  selectAll,
-  fixed, // 操作列 fixed: 'right'（小屏自动取消）
-  onDelete,
-  onBatchDelete,
-  refresh
-} = useTable({
-  listAPI: (page) => baseAPI.getList({ ...page, ...queryParams }),
-  deleteAPI: (ids) => baseAPI.delete({ ids }),
-  immediate: true,
-  rowKey: 'id', // 默认 id
-  crossPageSelect: false // 跨页多选时设为 true
-})
-```
-
-要点：
-
-- `search()` 会重置到第 1 页并清空选中
-- `refresh()` 保持当前页刷新
-- `listAPI` 参数为 `{ page, size }`，需展开到接口
-- 空字符串查询条件建议转 `undefined` 再传 API
-
-## GiButton 预设类型
-
-`add` | `edit` | `delete` | `search` | `reset` | `upload` | `import` | `export`
-
-列表工具栏与操作列统一使用 `GiButton`，操作列常用 `size="mini"`。
-
-## 表格列（TSX）
-
-使用 `lang="tsx"`，从 `@arco-design/web-vue` 引入 `TableColumnData`：
-
-```tsx
-const tableColumns: TableColumnData[] = [
-  {
-    title: '序号',
-    width: 68,
-    align: 'center',
-    render: ({ rowIndex }) => <span>{rowIndex + 1}</span>
-  },
-  { title: '名称', dataIndex: 'name', ellipsis: true, tooltip: true },
-  {
-    title: '状态',
-    width: 100,
-    align: 'center',
-    render: ({ record }) => (
-      <GiCellStatus status={record.status} />
-    )
-  },
-  {
-    title: '操作',
-    width: 160,
-    align: 'center',
-    fixed: 'right', // 或绑定 useTable 的 fixed
-    render: ({ record }) => (
-      <Space>
-        <GiButton type="edit" size="mini" onClick={() => onEdit(record as T.ListItem)} />
-        <Popconfirm content="确定删除?" onBeforeOk={() => onDelete(record as T.ListItem)}>
-          <GiButton type="delete" size="mini" />
-        </Popconfirm>
-      </Space>
-    )
+async function load() {
+  loading.value = true
+  try {
+    const res = await xxxApi.list({ ...query })
+    list.value = res.list
+    total.value = res.total
+  } finally {
+    loading.value = false
   }
+}
+
+const columns: DataTableColumns<XxxVO> = [
+  { title: '名称', key: 'name' },
+  { title: '状态', key: 'status', render: (row) => h(NTag, { type: tagOf(row.status), size: 'small' }, { default: () => STATUS_NAMES[row.status] }) },
+  { title: '操作', key: 'actions', render: (row) => h(NSpace, null, { default: () => [
+    h(NButton, { size: 'small', onClick: () => openEdit(row) }, { default: () => '编辑' })
+  ] }) }
 ]
+
+onMounted(load)
+</script>
+
+<template>
+  <!--
+    高度链必须完整：.page-card（撑满内容区）→ .page-card__body → n-data-table[flex-height]，
+    每一层都要 min-height: 0（前两层由 styles/index.scss 给）。少一层 → 分页器被顶出可视区。
+  -->
+  <NCard title="xxx" :bordered="false" class="page-card">
+    <template #header-extra>
+      <span class="toolbar__hint">共 {{ total }} 条</span>
+    </template>
+
+    <!-- 工具条：筛选在左/右，主操作 type="primary" + **默认尺寸**；
+         同一行控件尺寸要一致（别混 size="small"，否则 28px 与 34px 参差不齐） -->
+    <div class="toolbar">
+      <NSpace :size="8">
+        <NButton v-if="canManage" type="primary" @click="openAdd">
+          新建 xxx
+        </NButton>
+      </NSpace>
+      <NSpace :size="8">
+        <NInput v-model:value="query.keyword" placeholder="搜索名称" clearable @keyup.enter="search" />
+        <NButton type="primary" ghost @click="search">
+          搜索
+        </NButton>
+      </NSpace>
+    </div>
+
+    <div class="page-card__body">
+      <NDataTable
+        remote
+        flex-height
+        :loading="loading"
+        :columns="columns"
+        :data="list"
+        :pagination="listPagination({ page: query.page, pageSize: query.pageSize, itemCount: total })"
+        @update:page="(p) => { query.page = p; load() }"
+        @update:page-size="(s) => { query.page = 1; query.pageSize = s; load() }"
+      />
+    </div>
+  </NCard>
+</template>
 ```
 
-常用单元格组件：`GiCellAvatar`、`GiCellGender`、`GiCellStatus`（从 `@/components/GiCell` 引入或在 TSX 中直接使用）。
+### 三个必须记住的点
 
-## GiPageLayout
+1. **远程分页要处理两个事件**：`@update:page` **和** `@update:page-size`，
+   且都要**重新取数**。naive 的表格在 `pagination` 非 false 时会自己再切一次数据
+   （内部 `flattenData`）—— 只改本地每页条数不重新取数，会出现"分页器说 50 条/页、表里还是 20 条"。
+2. **分页器容器用 `.page-card` + `.page-card__body`**（`styles/index.scss`）：
+   否则卡片变高会把分页器顶出可视区、怎么滚都看不到（本项目反复踩过）。
+3. **`listPagination()` 而不是手写对象**：手写时 `prefix` 的参数少一个 `?` 就报 TS2322。
 
-| 属性/插槽 | 说明 |
-|-----------|------|
-| `#left` | 左侧栏（部门树、字典类型列表等） |
-| `#header` | 顶栏（少用） |
-| `margin` | 外边距模式 |
-| `collapsed` | 显示折叠按钮 |
-| `size` | 左侧宽度，如 `"280px"` |
+### 版面（2026-10 卡片式基线）
 
-左栏选中后通过事件同步右侧列表，参考 `dict/index.vue` 的 `onDictTypeRefresh`。
+- **卡片外观是全局给的**（白底 + 描边 + 轻阴影 + 卡片头浅灰色带），页面**不要**再自己写边框/阴影；
+  卡片之所以"浮"得起来，靠的是 `layout` 那一层的 `--xt-bg` 灰底。
+- 卡片**内部分区**用 `.section-title`（左侧蓝色小竖条）+ 浅灰小格子，**不要卡里套卡**。
+- 工具条用 `.toolbar`（自带下分隔线，把"筛选区"和"表格区"切开）。
+- 详细规则见 [code-css](../code-css/SKILL.md) 的「设计基线」「卡片式的三条规矩」「按钮的可见性」。
 
-## 表单弹窗（Modal + GiForm）
+## 表单弹窗
 
-```vue
-<a-modal v-model:visible="visible" :title="title" :mask-closable="false"
-  @before-ok="save" @close="close">
-  <GiForm ref="GiFormRef" :model-value="form" :columns="formColumns"
-    @update:model-value="Object.assign(form, $event)" />
-</a-modal>
-```
+- `NModal` + `NForm` + `NFormItem`，`ref<FormInst | null>` 拿实例，提交前 `await formRef.value?.validate()`。
+- 校验规则用 `FormRules`，与后端约束对齐（**但服务端才是权威**，前端只减少无效提交）。
+- 成功后 `message.success(...)` + 关弹窗 + `load()`。
+- 危险动作（删除/停用/重置密码）用 `useDialog()` 二次确认，文案写明后果。
 
-```ts
-import type { FormColumnItem } from '@/components/index'
-import { useResetReactive } from '@/hooks'
+## 权限与展示
 
-const [form, resetForm] = useResetReactive({ id: '', name: '', status: '1' as Status })
-const GiFormRef = useTemplateRef<InstanceType<typeof GiForm>>('GiFormRef')
-
-const add = () => {
-  detailId.value = ''
-  visible.value = true
-}
-const edit = async (id: string) => {
-  visible.value = true
-  detailId.value = id
-  Object.assign(form, (await baseAPI.getDetail({ id })).data)
-}
-const close = () => {
-  GiFormRef.value?.formRef?.resetFields()
-  resetForm()
-}
-const save = async () => {
-  const valid = await GiFormRef.value?.formRef?.validate()
-  if (valid) return false
-  // await baseAPI.add(form) 或 baseAPI.update(form)
-  emit('save-success')
-  return true
-}
-
-defineExpose({ add, edit })
-```
-
-`formColumns` 常用 `type`：`input`、`select`、`tree-select`、`radio-group`、`switch`、`textarea`。校验可用 `required`、`rules`；正则见 `@/utils/regexp`。
-
-## 字典下拉
-
-```ts
-const { dictData } = useDict(['STATUS'] as const)
-// 模板：<a-select :options="dictData.STATUS" />
-```
-
-## 表格增强方案选型
-
-| 需求 | 方案 |
-|------|------|
-| 内置斑马纹/全屏/列设置 | `GiTable` |
-| 继续用 `a-table` + 工具栏/列设置 | `GiTableSetting` 包裹（见 `views/table/custom3`） |
-| 简单列表 | `a-table` + `useTable`（系统模块主流） |
-
-## 检查清单
-
-- [ ] `defineOptions({ name })` 已设置
-- [ ] `row-key="id"` 与 `useTable` 的 `rowKey` 一致
-- [ ] 删除走 `onDelete` / `onBatchDelete` 或自定义 `Popconfirm` + API
-- [ ] 弹窗 `defineExpose({ add, edit })`，父组件 `useTemplateRef` 调用
-- [ ] 保存成功后 `emit('save-success')` 并触发 `search`
+- 按钮显隐：`computed(() => user.has('xxx:manage'))`；**不要**用 `v-hasPerm`。
+- 状态色：`tagOf(row.status)`；状态文案映射放 `apis/xt/<域>.ts` 里与接口同处。
+- 敏感字段（手机号/证件号）后端只回**脱敏值** → 编辑时**无法回填原文**，要改就得重填（照抄账号页的写法）。
diff --git a/frontend-pc/.agents/skills/project-guide/SKILL.md b/frontend-pc/.agents/skills/project-guide/SKILL.md
index c75edd1..df39480 100644
--- a/frontend-pc/.agents/skills/project-guide/SKILL.md
+++ b/frontend-pc/.agents/skills/project-guide/SKILL.md
@@ -1,171 +1,72 @@
 ---
 name: project-guide
-description: 后台管理模板的项目总览与前端强制规范。涵盖 Vue 3 + Arco Design + Gi 组件库、目录结构、自动导入、CRUD/API 约定与代码风格。在当前仓库内开发、新增页面、查阅架构或不确定项目规范时使用。
+description: PC 管理端的技术栈、目录结构、菜单与权限模型，以及七条最容易写错的约定。开始任何 PC 端改动前加载本技能。
 ---
 
-# 项目开发指南
-
-> **适用范围**：本仓库 `src/**`、`mock/**`
-> **规范来源**：`AGENTS.md` 常驻行为准则 + 本 skill（项目细节）；编码规范按需读 `code-vue` / `code-css` / `code-ts` skill
-
-## 本项目 Agent 约定
-- 优先复用 `Gi*`、`hooks`、`getBaseApi`、现有 mock 工具；新增页面/接口对齐参考页与 `getBaseApi` 约定。
-- API / Mock 以 `src/apis`、`mock` 与类型定义为准，不要猜测路径。
-- 涉及 CRUD、API、Mock 时按需读取对应 skill；写 `.vue` / 样式 / TS 前读取 [code-vue](../code-vue/SKILL.md)、[code-css](../code-css/SKILL.md)、[code-ts](../code-ts/SKILL.md)。
-- 改动后视情况运行 `pnpm typecheck`、`pnpm lint`、`pnpm lint:style`。
+# 项目总览（PC 管理端）
 
 ## 技术栈
 
-| 类别 | 选型 |
-|------|------|
-| 框架 | Vue 3.5 + TypeScript + `<script setup lang="ts">` |
-| 构建 | Vite 7 |
-| UI | Arco Design Vue（按需自动导入）+ 本地 `Gi*` 组件 |
-| 状态 | Pinia + pinia-plugin-persistedstate |
-| 路由 | Vue Router 4（Hash 模式） |
-| HTTP | `@/utils/http`，统一响应类型 `ApiRes<T>`、`PageRes<T>` |
-| 工具 | @vueuse/core、lodash-es、dayjs、xe-utils |
-| Mock | vite-plugin-mock + mockjs（开发默认启用） |
+| 项 | 值 |
+|---|---|
+| 框架 | **Vue 3.5 + TypeScript + Vite 7** |
+| UI | **Naive UI 2.42**（2026-10 从 Gi Admin Pro + Arco 重搭，**已无 Arco/Gi 依赖**） |
+| 状态 | Pinia（`pinia-plugin-persistedstate`） |
+| 请求 | axios（`src/utils/http.ts` 统一封装） |
+| 样式 | SCSS（无 Stylelint） |
+| 检查 | `pnpm typecheck`（vue-tsc，**当前 0 错**）、`pnpm lint`（@antfu/eslint-config） |
 
-每个 SFC 必须 `defineOptions({ name: 'XxxYyy' })`；通用 Vue 规范见 [code-vue](../code-vue/SKILL.md)，本项目补充见下文「本项目 Vue 约定」。
-
-## 路径别名
-
-- `@` → `src/`
-- `~` → 项目根目录
-
-## 目录约定
+## 目录
 
 ```
 src/
-├── apis/          # 接口（按业务模块分文件，标准 CRUD 用 getBaseApi）
-├── components/    # Gi* 业务组件 + 部分通用组件
-├── hooks/         # 组合式函数（useTable、useDict 等）
-├── hooks/app/     # 业务域 hooks（useDept、useRole）
-├── stores/        # Pinia
-├── views/         # 页面（按模块分子目录）
-├── router/        # 路由与守卫
-├── utils/         # http、auth、regexp、deepClone 等
-├── types/         # 全局类型（global.d.ts、api.d.ts）
-mock/              # vite-plugin-mock 模拟数据
+├── apis/xt/          接口模块（按业务域分文件）+ types.ts（通用类型）
+├── composables/      pagination.ts（列表页分页器统一参数）
+├── config/           xt-routes.ts（**业务菜单表：菜单 + 路由 + 分组**）
+├── icons/            AppIcon.vue + icon-data.ts（由 scripts/extract-pc-icons.py 生成）
+├── layout/           AppSider / AppHeader / index.vue
+├── router/           index.ts（本地菜单表按后端 menuKeys 过滤后注册）
+├── stores/           user.ts（登录态/权限/菜单）、acting-tenant.ts（平台代管学校）、app.ts
+├── styles/           index.scss（只放跨页面样式）
+├── utils/            http.ts / naive.ts / tag.ts / format.ts / auth.ts / rsa.ts
+└── views/            页面（每个菜单一个目录，行内抽屉与弹窗同目录）
 ```
 
-页面文件命名：
+## 菜单与权限模型（**后端决定可见性**）
 
-```
-src/views/{module}/index.vue           # 列表页
-src/views/{module}/XxxFormModal.vue    # 新增/编辑弹窗（有表单时必建）
-src/apis/{module}/{name}.ts            # 类型定义 + CRUD API（或 apis/system/user.ts）
-mock/{module}/{name}.ts                # 与 API 路径一致的 Mock
+- 前端 `config/xt-routes.ts` 是**唯一**菜单表：`key`（菜单键）↔ 路由 ↔ 视图 ↔ 分组。
+- **能不能看由后端决定**：`/auth/me` 返回 `menus: string[]`，前端只按它过滤；
+  绕过前端也只会拿到 `40301`。
+- **能不能做**看权限码：`useUserStore().has('码')`，字符串必须与后端 `PermissionDef` **逐字一致**
+  （`progress:viewAll` 是驼峰，**不是** `progress:view:all` —— 写错只会恒为 false，不报错）。
+- 平台运营要**先选学校**（`stores/acting-tenant.ts` → 请求头 `X-Tenant-Id`）；
+  不选就不发请求，否则会把各租户数据混在一起且看起来正常。
+
+## 七条最容易写错的约定
+
+1. **没有 auto-import**：组件与 API 全显式 import，标签写 **PascalCase**。
+   漏 import 是**静默故障**（未知自定义元素 → 样式整块丢掉，typecheck/lint 全绿）；
+   `python scripts/check-wiring.py` 第 ⑧ 项会核对。
+2. **没有 `v-hasPerm`**：权限判断写 `user.has('码')`。
+3. **`n-tag` 的 `type` 必须过 `@/utils/tag.ts`**（Arco 色词直接透传会静默变灰）。
+4. **图标要重跑脚本**：`scripts/extract-pc-icons.py` → `src/icons/icon-data.ts`（37 个）；
+   缺图标是空占位、不报错 → 图标集升级后必须重跑。
+5. **`n-tab-pane` 的标签用 `#tab` 插槽**，不要用 `tab="文字"` 属性 ——
+   naive-ui 2.45.3 的属性写法只渲染出空注释节点，整排 tab 一个字都不显示（不报错）。
+6. **卡片式版面**：白卡片靠全局 `--xt-bg` 灰底浮起来；卡片外观由 `styles/index.scss` 统一给，
+   页面不要再自己写；卡片内部分区用 `.section-title` + 浅灰小格子，不要卡里套卡。
+   详见 [code-css](../code-css/SKILL.md) 的「设计基线」一节。
+7. **品牌标是几何标**：`src/assets/images/logo.svg`（方 = 卷宗，环 = 在线）。
+   **不要换回文字字形标**；页签用 `public/favicon.svg`（加粗版），改一个要同步另一个。
+   ⚠️ SVG 注释里**不能出现连续两个减号**（XML 规范禁止）→ 整个文件 not well-formed，
+   图片裂开而控制台一句话都不报；`python scripts/check-wiring.py` 第 ⑨ 项会核对。
+
+## 开发
+
+```bash
+pnpm install
+pnpm dev          # → http://localhost:5173，/api 代理到 8080（后端不起着就没有数据）
+pnpm typecheck && pnpm lint
 ```
 
-## 全局类型（`src/types/`）
-
-- `Status`：`'0' | '1'`（禁用/启用，与字典 `STATUS` 一致）
-- `Gender`：`'1' | '2' | '3'`
-- `Pagination`：`{ page, size }`
-- `ApiRes<T>`、`PageRes<T>`：统一接口响应（分页 `data` 为 `{ records, total }`）
-
-## CRUD 列表页（强制遵循）
-
-新建/修改表格页时，**必须**参考并遵循：
-
-- 参考实现：`src/views/system/user/index.vue`、`UserFormModal.vue`
-- Hook：`@/hooks/useTable`
-- API 模板：`src/apis/system/user.ts` + `getBaseApi`
-- 详细步骤：读取并遵循 [project-crud](../project-crud/SKILL.md)
-
-核心结构：
-
-1. `GiPageLayout` 布局（可选 `#left` 树/分类）
-2. `queryParams`（reactive）+ 搜索区 + `GiButton`（search/reset）
-3. `tableColumns`（`TableColumnData[]`，复杂列用 `lang="tsx"` + `render`）
-4. `useTable` 绑定 `listAPI` 与 `deleteAPI`
-5. `XxxFormModal` ref，`defineExpose({ add, edit })`，`@save-success="search"`
-
-分页类型：`PageRes<T>`（`records` + `total`）。Mock 与接口详见 [project-api](../project-api/SKILL.md)。
-
-## API 层模板
-
-```typescript
-import { getBaseApi } from '@/apis/base'
-import http from '@/utils/http'
-
-export interface ListItem {
-  id: string
-  name: string
-  status: Status
-}
-
-/** 标准 CRUD */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/xxx' })
-
-/** 非标准接口 */
-export function customAction(params: Pagination) {
-  return http.get<PageRes<Item[]>>('/system/xxx/customAction', params)
-}
-```
-
-- 开发环境 `VITE_API_PREFIX = '/mock'`（`.env.development`）
-- 禁止绕过 `@/utils/http` 裸用 axios
-
-## 代码风格
-
-- 遵循 `@antfu/eslint-config`（`eslint.config.js`）：箭头参数括号、1TBS、无尾随逗号；Vue block 顺序 `[['script', 'template'], 'style']`；宏顺序 `defineOptions/defineModel/defineProps/defineEmits/defineSlots`，`defineExpose` 最后。
-- 布局放 `src/layout/`，Gi 组件放 `src/components/Gi*`，业务 Hook 放 `hooks/` 或 `hooks/app/`。
-- 空字符串查询条件传 API 前建议转为 `undefined`。
-- 通用编码规范见 [code-ts](../code-ts/SKILL.md)、[code-vue](../code-vue/SKILL.md)、[code-css](../code-css/SKILL.md)；本项目补充见下文。
-
-## 本项目编码约定
-
-- 路径别名：`@` → `src/`，`~` → 项目根；禁止 `../../../` 穿越。
-- 组件全局前缀 **`Gi`** 仅用于 `src/components/Gi*` 全局组件。
-- 目录：`src/views` 页面、`src/components` 组件、`src/apis/<domain>/` + `type.ts` 接口类型、`src/types` 公共类型、`src/hooks` composables。
-- API 统一 `@/utils/http`；状态 Pinia + `pinia-plugin-persistedstate`。
-- 图标 `@iconify/vue`；样式从 scss/less 导入，避免内联。
-- 业务注释中文，标识符英文。
-- 检查：`pnpm lint`、`pnpm lint:style`、`pnpm typecheck`。
-
-## 本项目 Vue 约定
-
-- 每个 SFC 必须 `defineOptions({ name: 'XxxYyy' })`，名称与路由/模块对应，并与路由表 `name` 一致以支持缓存。
-- **自动导入**（`vite.config.ts`，勿重复 import）：
-  - Vue API：`ref`、`reactive`、`computed`、`watch`、`useTemplateRef` 等
-  - Gi 组件：`src/components/Gi*`（如 `GiPageLayout`、`GiButton`、`GiForm`）
-  - Arco 组件：`a-table`、`a-modal`、`a-select` 等
-  - 图标：`icon-*`（Iconify `icon-park-outline`）
-- Gi 组件模板用 **PascalCase**；Arco 用 `a-*` 前缀；禁止手动 import Gi/Arco（类型除外）。
-- 表格列复杂时用 `lang="tsx"` + `TableColumnData[]` 的 `render`；字典字段用 `useDict(['STATUS'])` 等。
-- `dayjs` 默认导入变量名必须为 **`Dayjs`**（大写），禁止小写 `dayjs`。
-- 深拷贝使用 `@/utils` 的 `deepClone`，禁止 `JSON.parse(JSON.stringify())`。
-- Vue 参考页：`src/views/system/user/index.vue`、`UserFormModal.vue`、`src/views/table/custom3/index.vue`
-
-## 本项目样式
-
-- 全局样式：`src/styles/index.scss`（变量 `var.scss`、混入 `mixin.scss`、Arco 主题 `arco-ui/`）
-- Stylelint：`pnpm lint:style`
-- 列表页常用工具类：`g-row-tool`（工具栏行）、`g-table`（表格）、`g-full-column`（左栏撑满）、`g-mb`（下边距）
-- BEM 示例：`src/views/login/LoginLeft.vue`
-
-## 子技能（按需阅读）
-
-| 场景 | 技能 |
-|------|------|
-| Vue SFC、Emits、Ref | [code-vue](../code-vue/SKILL.md) |
-| 样式、BEM | [code-css](../code-css/SKILL.md) |
-| TS 命名、导入 | [code-ts](../code-ts/SKILL.md) |
-| 新建 CRUD 列表页、表格、弹窗表单 | [project-crud](../project-crud/SKILL.md) |
-| 新增接口、Mock、baseAPI | [project-api](../project-api/SKILL.md) |
-
-## 参考页面
-
-- 标准 CRUD + 左树：`src/views/system/user/index.vue`
-- 左右分栏 + 字典：`src/views/system/dict/index.vue`
-- GiTableSetting + a-table：`src/views/table/custom3/index.vue`
-- 表单弹窗：`src/views/system/user/UserFormModal.vue`
-
-## 禁止事项
-
-- ❌ 绕过 `@/utils/http` 直接裸用 axios
-- ❌ 表格页自行实现分页/删除逻辑，而不使用 `useTable`
-- ❌ 新建列表页不参考 `system/user` 与 [project-crud](../project-crud/SKILL.md) 约定
+演示账号：`admin / Admin@123` + 租户码 `demo`（**不是** Gi README 里的 `admin/123456`）。
diff --git a/frontend-pc/.gitignore b/frontend-pc/.gitignore
index a7face3..d64686f 100644
--- a/frontend-pc/.gitignore
+++ b/frontend-pc/.gitignore
@@ -28,3 +28,11 @@ coverage
 *.sw?
 
 .stylelintcache
+
+# ⚠️ 这两个是**上游模板时代的自动生成文件**，重搭为纯 Vue 3 + Naive UI 后已经删掉：
+#   · `src/components.d.ts` 是 `unplugin-vue-components` 生成的全局组件声明（内容全是 Arco 组件）
+#   · `src/auto-import.d.ts` 同理（本项目**没有 auto-import**，组件与 API 全显式 import）
+#   之所以要忽略而不是只删掉：它们曾被误从 git 恢复回来一次 —— 这种"看起来还在用 Arco"的
+#   残留不会让 typecheck 失败（`skipLibCheck` 跳过 .d.ts），只会误导后来人。
+src/components.d.ts
+src/auto-import.d.ts
diff --git a/frontend-pc/.stylelintignore b/frontend-pc/.stylelintignore
deleted file mode 100644
index 3060b5f..0000000
--- a/frontend-pc/.stylelintignore
+++ /dev/null
@@ -1,31 +0,0 @@
-# Dependencies
-node_modules/
-
-# Build output
-dist/
-build/
-
-# Coverage
-coverage/
-
-# Temporary files
-*.tmp
-*.temp
-.cache/
-
-# Editor directories and files
-.vscode/
-.idea/
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# OS generated files
-Thumbs.db
-.DS_Store
-
-# CSS preprocessors cache
-.sass-cache/
-.less-cache/
\ No newline at end of file
diff --git a/frontend-pc/AGENTS.md b/frontend-pc/AGENTS.md
index ec33923..975a8dc 100644
--- a/frontend-pc/AGENTS.md
+++ b/frontend-pc/AGENTS.md
@@ -1,6 +1,10 @@
 # AGENTS.md
 
-面向 AI 编码助手的项目指南。规范以 `.agents/` 为唯一来源。
+面向 AI 编码助手的项目指南（PC 管理端）。规范以 `.agents/` 为唯一来源。
+
+> ⚠️ **2026-10 已重搭**：从 **Gi Admin Pro + Arco Design Vue** 换成 **纯 Vue 3 + Naive UI 2.42**。
+> 上一版基于 Gi/Arco 的 skills 已全部重写 —— **不要再按 Arco 的组件名（`a-table` / `a-form`）、
+> `v-hasPerm`、auto-import、Stylelint 去写代码**。
 
 ## 常驻规则（Agent 行为准则）
 
@@ -19,36 +23,50 @@
 | 写/改 `.vue` | `.agents/skills/code-vue/SKILL.md` |
 | 写/改样式 | `.agents/skills/code-css/SKILL.md` |
 | 写/改 `.ts` / composable | `.agents/skills/code-ts/SKILL.md` |
-| 项目约定、Gi 组件 | `.agents/skills/project-guide/SKILL.md` |
+| 项目约定、Naive UI 组件与目录 | `.agents/skills/project-guide/SKILL.md` |
 | CRUD 列表/表单 | `.agents/skills/project-crud/SKILL.md` |
-| API / Mock | `.agents/skills/project-api/SKILL.md` |
+| 接口调用（`src/apis/xt/`） | `.agents/skills/project-api/SKILL.md` |
 | 提交代码（git commit） | `.agents/skills/git-commit/SKILL.md` |
 
-## 按需技能（`.agents/skills/`）
-
-| 场景 | 文件 |
-|------|------|
-| TS 命名、导入、Lint | `code-ts/SKILL.md` |
-| Vue SFC、Emits、Ref | `code-vue/SKILL.md` |
-| 样式、BEM、Stylelint | `code-css/SKILL.md` |
-| 项目总览、技术栈、Gi 约定 | `project-guide/SKILL.md` |
-| CRUD 列表/表单 | `project-crud/SKILL.md` |
-| API 与 Mock | `project-api/SKILL.md` |
-| Git 提交 | `git-commit/SKILL.md` |
-
 ## 快速入口
 
 ```bash
 pnpm dev          # 开发（/api 代理到 http://localhost:8080，没有 Mock）
 pnpm build        # 生产构建
-pnpm typecheck    # vue-tsc
-pnpm lint         # ESLint
-pnpm lint:style   # Stylelint
+pnpm typecheck    # vue-tsc（**当前 0 错**，有报错就是新引入的）
+pnpm lint         # ESLint（@antfu/eslint-config）
 ```
 
-- 路径别名：`@` → `src/`，`~` → 项目根目录
-- **开发没有 Mock**：`mock/` 目录与 `vite-plugin-mock` 都已删除，`pnpm dev` 把 `/api`
-  代理到 `http://localhost:8080`（见 `vite.config.ts` 的 `server.proxy` 与
-  `.env.development` 的 `VITE_API_BASE_URL`）→ **后端不起着就没有数据**。
-  我们的接口模块在 `src/apis/xt/`（`apis/system|user|…` 是 Gi 模板自带的）
-- 登录演示账号见 `README.md`（如 admin / 123456）
+- 路径别名：`@` → `src/`
+- **开发没有 Mock**：`pnpm dev` 把 `/api` 代理到 `http://localhost:8080`
+  （见 `vite.config.ts` 的 `server.proxy`）→ **后端不起着就没有数据**
+- 接口模块在 `src/apis/xt/`（按业务域分文件），统一从 `@/apis/xt` 或 `@/apis/xt/<域>` 引
+- 演示账号：`admin / Admin@123` + 租户码 `demo`（⚠️ **不是** Gi 模板 README 里的 `admin/123456`）
+
+## 七条最容易写错的约定
+
+1. **没有 auto-import**：naive-ui 组件、Vue API、工具函数**全部显式 `import`**，
+   标签统一写 **PascalCase**（`<NButton>`）。
+   ⚠️ 漏 import 是**静默故障**：写小写 `<n-button>` 而没 import 时，Vue 把它当未知自定义元素渲染，
+   **不报错、typecheck/lint 全绿，只是样式整块丢掉**（2026-10 实测踩到 4 个文件 6 处）。
+   `python scripts/check-wiring.py` 第 ⑧ 项会静态核对这件事。
+2. **权限判断**：`useUserStore().has('码')` / `hasAny(...)`（**没有 `v-hasPerm` 指令**）；
+   权限码字符串必须与后端 `PermissionDef` **逐字一致**（`progress:viewAll` 是驼峰）。
+3. **状态色**：`n-tag` 的 `type` 必须过 **`@/utils/tag.ts`** 的 `tagOf()` ——
+   `apis/xt/*.ts` 里的展示映射仍是 Arco 色词（`green`/`arcoblue`/`gold`），
+   直接透传给 `n-tag` 会**静默变灰**且不报错。
+4. **图标**：用 `@/icons/AppIcon.vue` + 图标名；图标数据由
+   `scripts/extract-pc-icons.py` 生成到 `src/icons/icon-data.ts`（37 个），
+   缺图标是**空占位、不报错** → **图标集升级后要重跑该脚本**。
+5. **`n-tab-pane` 的标签用 `#tab` 插槽，不要用 `tab="文字"` 属性** ——
+   naive-ui 2.45.3 的属性写法只渲染出一个空注释节点，**整排 tab 一个字都不显示**（不报错）。
+6. **卡片式版面**：白卡片靠全局的 `--xt-bg` 灰底浮起来；卡片外观（描边/阴影/圆角/卡片头色带）
+   由 `src/styles/index.scss` 的 `.n-card.n-card` 统一给，**页面不要再自己写**；
+   卡片内部分区用 `.section-title` + 浅灰小格子，**不要卡里套卡**。
+   工具条控件同一行尺寸要一致（统一默认尺寸，别混 `size="small"`）。
+7. **品牌标**：几何标在 `src/assets/images/logo.svg`（**不要换回文字字形标** —— 形状的出处与
+   构造参数写在该文件注释里）；页签用 `public/favicon.svg`（加粗版），改一个要同步另一个，
+   外加侧栏/登录页的引用尺寸与 `docs/prototype/admin-web.html` 的 `.mark`。
+   ⚠️ **SVG 的注释里不能出现连续两个减号**（XML 规范禁止）：会让整个文件 not well-formed，
+   表现是图片裂开、**控制台一句话都不报**，typecheck/lint 也全绿。
+   `python scripts/check-wiring.py` 第 ⑨ 项会核对这件事。
diff --git a/frontend-pc/README.md b/frontend-pc/README.md
index ddc5ff4..4620fc7 100644
--- a/frontend-pc/README.md
+++ b/frontend-pc/README.md
@@ -1,622 +1,64 @@
-<div align="center">
-	<img style="width: 80px;height: 80px" src="https://gitee.com/lin0716/gi-image/raw/master/gi-logo.gif"/>
-	<h1>Gi Admin Pro</h1>
-    <a href='https://gitee.com/lin0716/gi-demo/stargazers'><img src='https://gitee.com/lin0716/gi-demo/badge/star.svg?theme=dark' alt='star'></img></a>
-</div>
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
+# PC 管理端（frontend-pc）
 
-## 简介
+深学在线 · 管理端。**纯 Vue 3 + Naive UI**（2026-10 从 Gi Admin Pro + Arco Design Vue 重搭）。
 
-**Gi Admin Pro** 是一个基于 Vue3、Vite、TypeScript、Arco Design Vue、Pinia、VueUse 等的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态数据展示，开箱即用的模板，也可用于学习参考。
+> 上一版这份 README 是 Gi Admin Pro 的模板原文（含它的演示账号 `admin / 123456`），已整体替换 ——
+> 那个账号在本项目里**不存在**。
 
-> **Gi 前缀含义：** G：代表全局 i：代表我的
->
-> Gi 用来定义全局组件前缀，如 GiTable、GiForm、GiPageLayout等
+## 技术栈
 
-## 特性
+| 项 | 值 |
+|---|---|
+| 框架 | Vue 3.5 + TypeScript + Vite 7 |
+| UI | **Naive UI 2.42**（无 Arco / Gi 依赖） |
+| 状态 | Pinia（`pinia-plugin-persistedstate`） |
+| 请求 | axios（`src/utils/http.ts` 统一封装） |
+| 样式 | SCSS（**Stylelint 已移除**，只有 ESLint） |
 
-- **最新技术栈**：使用 Vue3 / Vite 等前端前沿技术开发，使用高效率的 npm 包管理器
-- **TypeScript**：应用程序级 JavaScript 的语言
-- **主题**：丰富可配置的主题、暗黑模式
-- **代码规范**：丰富的规范插件及极高的代码规范
-
-## 预览
-
-
-| 平台       | 预览地址                                                   |
-| ---------- | ---------------------------------------------------------- |
-| **github** | [Gi Admin Pro 预览地址](https://lin-97.github.io/gi-demo/) |
-
-
-|        | 账号  | 密码   |
-| ------ | ----- | ------ |
-| 管理员 | admin | 123456 |
-| 用户   | user  | 123456 |
-
-## 代码仓库
-
-
-| 平台              | 预览地址                                                     | 仓库地址                                                     |
-| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| **gitee**（码云） | --                                                           | <a href="https://gitee.com/lin0716/gi-demo" target="_blank">Gitee  仓库地址</a> |
-| **github**        | <a href="https://lin-97.github.io/gi-demo/" target="_blank">Gi Admin Pro 预览地址</a> | <a href="https://github.com/lin-97/gi-demo" target="_blank">Github 仓库地址</a> |
-
-## 项目示例图
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/01.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/02.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/03.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/04.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/05.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/06.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/07.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/08.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/09.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/10.png" />
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/demo/11.png" />
-
-## 安装使用
-
-- 安装依赖
+## 常用命令
 
 ```bash
-npm install
+pnpm install
+pnpm dev          # → http://localhost:5173（/api 代理到 http://localhost:8080）
+pnpm build        # 生产构建 → dist/
+pnpm typecheck    # vue-tsc（当前 0 错）
+pnpm lint         # ESLint（@antfu/eslint-config）
 ```
 
-- 运行
+- **没有 Mock**：`pnpm dev` 把 `/api` 代理到后端 8080 → **后端不起着就没有数据**
+- 路径别名：`@` → `src/`
 
-```bash
-npm run dev
-```
+## 演示账号（本地 dev）
 
-- 打包
+| 账号 | 密码 | 租户码 | 角色 |
+|---|---|---|---|
+| `admin` | `Admin@123` | `demo` | 学校管理员 |
+| `platform` | `Platform@123` | — | 平台运营 |
 
-```bash
-npm run build
-```
+> 账号在多个单位下重名时，登录页才会出现「租户码」输入框（服务端返回 `40012`）。
+> 一键登录脚本：`python scripts/dev-login.py`。
 
-## 开源作者
-
-**Lin**
-
-## 常见问题
-
-**为什么安装依赖不成功？**
-
-检查`node`版本，最好使用原生镜像`npm`
-
-还原镜像
+## 目录
 
 ```
-npm config set registry https://registry.npmjs.org/
+src/
+├── apis/xt/        接口模块（按业务域分文件）+ types.ts
+├── composables/    pagination.ts（列表页分页器统一参数）
+├── config/         xt-routes.ts（业务菜单表：菜单键 ↔ 路由 ↔ 视图 ↔ 分组）
+├── icons/          AppIcon.vue + icon-data.ts（由 scripts/extract-pc-icons.py 生成）
+├── layout/         AppSider / AppHeader / index.vue
+├── router/         本地菜单表按后端 menuKeys 过滤后注册
+├── stores/         user.ts / acting-tenant.ts / app.ts
+├── styles/         index.scss（只放跨页面样式）
+├── utils/          http.ts / naive.ts / tag.ts / format.ts / auth.ts / rsa.ts
+└── views/          页面（每个菜单一个目录）
 ```
 
-**为什么选择 Arco 组件库，而不是 Element Plus?**
+## 写代码前必读
 
-[Element Plus 对比 Arco design](https://juejin.cn/post/7294219581894705190)
+**`AGENTS.md` 与 `.agents/`**（本目录内的规范，已按 Naive UI 重写）。四条最容易写错的：
 
-**为什么全局组件使用前缀 Gi?**
-
-全局组件设置了按需引入，使用前缀，方便和局部组件做区分
-
-**为什么组件使用单词大写开头 (PascalCase)命名写法？**
-
-本项目`.vue`文件名以及在模板使用中，均采用大写`开头 (PascalCase)`命名方式
-
-参考 Vue2 官网-风格指南: https://v2.cn.vuejs.org/v2/style-guide/
-
-组件命名：`单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)`
-
-其他优点：方便搜索（横线连接 (kebab-case)对搜索没那么方便）
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/comp-name.png" />
-
-**为什么 css 类名推荐横线连接 (kebab-case)**
-
-参考大部分大网站，都是这个命名规则，不使用： `.myClass`这种
-
-**页面显示异常？**
-
-**`页面必须要保留一个根元素！！！`**
-
-**Vue3 权限管理对路由进行排序和格式化处理方式**
-
-使用 **xe-utils** 这个 js 库，简化数据处理
-
-[文章地址](https://juejin.cn/post/7301260557222805567)
-
-**页面无法缓存？**
-
-请检查页面是否配置了`name`，且名称是否与数据一致
-
-```js
-defineOptions({ name: 'AboutIndex' })
-```
-
-```js
-{
-  path: '/about/index',
-  name: 'AboutIndex', // 检查name是否一致
-  component: () => import('@/views/about/index.vue')
-}
-```
-
-## 项目规范
-
-#### .vue 文件行数规范
-
-一般来说，一个 .vue 文件行数建议不超过 **`400`** 行，超过建议组件化拆分
-
-#### vue 相关的命名
-
-```vue
-<script setup lang="ts">
-const isEdit = ref(false)
-
-// 不推荐
-const title = computed(() => {
-  return isEdit.value ? '编辑' : '新增'
-})
-
-// 推荐 能一行就尽量写一行
-const title = computed(() => (isEdit.value ? '编辑' : '新增'))
-</script>
-```
-
-```vue
-<script setup lang="ts">
-// 表单建议使用 form 命名(简洁)，不必要使用 formData, 同时使用 reactive
-const form = reactive({
-  name: '',
-  phone: ''
-})
-</script>
-```
-
-```vue
-<script setup lang="ts">
-// 如果属性比较多
-const getInitForm = () => ({
-  name: '',
-  phone: '',
-  email: '',
-  sex: 1,
-  age: ''
-})
-
-const form = reactive(getInitForm())
-
-// 重置form
-const resetForm = () => {
-  for (const key in form) {
-    delete form[key]
-  }
-  Object.assign(form, getInitForm())
-}
-</script>
-```
-
-```vue
-<script setup lang="ts">
-import { useAppStore, useUserStore } from '@/stores'
-import { useLoading } from '@/hooks'
-
-// stores 或 hooks 的使用命名规则定义
-const appStore = useAppStore()
-const userStore = useUserStore()
-
-const { loading, setLoading } = useLoading()
-</script>
-```
-
-#### 写法技巧
-
-尽量使用三元表达式
-
-```js
-// 优化前
-let isEdit = true
-let title = ''
-if (isEdit) {
-  title = '编辑'
-} else {
-  title = '新增'
-}
-
-// 优化后
-let title = isEdit ? '编辑' : '新增'
-```
-
-善用 includes 方法
-
-```js
-// 优化前
-if (type === 1 || type === 2 || type === 3) {
-}
-
-// 优化后，此种方式在vue模板也可使用
-if ([1, 2, 3].includes(type)) {
-}
-```
-
-使用箭头函数简化函数
-
-```js
-// 优化前
-function add(num1, num2) {
-  return num1 + num2
-}
-
-// 优化后
-const add = (num1, num2) => num1 + num2
-```
-
-尽量减少 if else if
-
-```vue
-<script setup lang="ts">
-// 比例进度条颜色 尽量减少 if else if
-const getProportionColor = (proportion: number) => {
-  if (proportion < 30) return 'danger'
-  if (proportion < 60) return 'warning'
-  return 'success'
-}
-</script>
-```
-
-```js
-// 优化前
-const status = 200
-const message = ''
-if (status === 200) {
-  message = '请求成功'
-} else if (status === 404) {
-  message = '请求出错'
-} else if (status === 500) {
-  message = '服务器错误'
-}
-
-// 优化后
-const status = 200
-const messageMap = {
-  200: '请求成功',
-  404: '请求出错',
-  500: '服务器错误'
-}
-const message = messageMap[status]
-```
-
-如果函数参数超过两个，建议优化
-
-```vue
-<script setup lang="ts">
-function createUser(name, phone, age) {
-  console.log('姓名', name)
-  console.log('手机', phone)
-  console.log('年龄', age)
-}
-
-// 这种方式在使用的时候可读性很差，扩展性差，而且不易于维护
-createUser('张三', '178****2828', 20)
-
-function createUser2({ name, phone, age }) {
-  console.log('姓名', name)
-  console.log('手机', phone)
-  console.log('年龄', age)
-}
-
-// 以对象传参更直观，更好扩展和维护
-createUser2({ name: '张三', phone: '178****2828', age: 20 })
-</script>
-```
-
-#### 接口调用书写
-
-**写法一**
-
-不需要 loading，不需要错误打印的 情况
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { getUserList as getUserListApi, type UserItem } from '@/apis' // 同名可以使用别名
-
-const userList = ref<UserItem[]>([])
-const getUserList = async () => {
-  const res = await getUserListApi()
-  console.log('如果异步成功，则会打印这行文字，否则不会打印这行文字，也不会往下执行')
-  userList.value = res.data
-}
-</script>
-
-// getUserListApi 是一个 Promise 异步函数，Promise 最后只有 成功 / 失败 两种状态 // getUserListApi 是基于 axios
-封装的，在 axios 响应拦截器做了处理 // 当 res.success === false 的时候 Promise.reject(),
-也就异步失败，异步失败不会往下执行
-```
-
-**写法二**
-
-需要 loading，需要错误打印的情况
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { getUserList as getUserListApi, type UserItem } from '@/apis' // 同名可以使用别名
-
-const loading = ref(false)
-const userList = ref<UserItem[]>([])
-const getUserList = async () => {
-  try {
-    loading.value = true
-    const res = await getUserListApi()
-    console.log('如果异步成功，则会打印这行文字，否则不会打印这行文字，也不会往下执行')
-    userList.value = res.data
-  } catch (error) {
-    console.log('如果异步失败，会打印这行文字')
-    // 由于 axios 在封装的时候，已经在异步失败给了失败的提示弹窗处理
-    // 所以这里没必要再写 Message.error(error)
-  } finally {
-    console.log('如果异步或者失败，都会打印这行代码')
-    loading.value = false // 可以用来处理 loading
-  }
-}
-</script>
-```
-
-**写法三**
-
-需要 loading, 不需要错误打印（不进行错误处理）的情况
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { getUserList as getUserListApi, type UserItem } from '@/apis' // 同名可以使用别名
-
-const loading = ref(false)
-const userList = ref<UserItem[]>([])
-const getUserList = async () => {
-  try {
-    loading.value = true
-    const res = await getUserListApi()
-    console.log('如果异步成功，则会打印这行文字，否则不会打印这行文字，也不会往下执行')
-    userList.value = res.data
-  } finally {
-    console.log('如果异步或者失败，都会打印这行代码')
-    loading.value = false // 可以用来处理 loading
-  }
-}
-</script>
-
-// catch 可以省略
-```
-
-#### 全局组件--命名规范
-
-组件命名：**单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)**
-
-可参考 Vue2 官网-风格指南: https://v2.cn.vuejs.org/v2/style-guide/
-
-```
-GiForm.vue
-GiTable.vue
-GiPageLayout.vue
-```
-
-#### 局部组件--命名规范
-
-组件命名：**单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)**
-
-可参考 Vue2 官网-风格指南: https://v2.cn.vuejs.org/v2/style-guide/
-
-```
-Pane1.vue
-Pane2.vue
-PaneQuota1.vue
-PaneQuota2.vue
-Step1.vue
-Step2.vue
-AddModal.vue
-EditDrawer.vue
-DetailModal.vue
-```
-
-#### 文件夹命名--命名规范 (采用中划线-)
-
-1、文件名建议只使用小写字母，不使用大写字母
-
-2、名称较长时采用半角连接符(-)分隔
-
-```
-home/index.vue
-user/index.vue
-user-detail/index.vue
-```
-
-#### 弹窗组件 Modal、抽屉组件 Drawer 的一般封装
-
-```vue
-<template>
-  <a-modal v-model:visible="visible" :title="title" @ok="confirm">
-    <!-- 内容 -->
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-
-const visible = ref(false)
-const detailId = ref('')
-const isEdit = computed(() => !!detailId.value) // 判断是新增还是编辑模式
-const title = computed(() => (isEdit.value ? '编辑' : '新增'))
-
-const add = () => {
-  detailId.value = ''
-  visible.value = true
-}
-
-// 如果这里的参数超过两个，建议优化成对象形式
-// const edit = ({ id, taskId }) = {
-//   console.log(id, taskId)
-// }
-
-const edit = (id: string) => {
-  detailId.value = id
-  visible.value = true
-  // getDetail() 回显操作
-}
-
-defineExpose({ add, edit })
-
-const confirm = () => {
-  console.log('点击了确认按钮')
-}
-</script>
-```
-
-使用
-
-**`模板里使用自定义组件：使用大写开头驼峰，双击好复制，对于搜索便利`**
-
-```vue
-<template>
-  <EditModal ref="EditModalRef"></EditModal>
-</template>
-
-<script setup lang="ts">
-import EditModal from './EditModal.vue'
-
-const EditModalRef = ref<InstanceType<typeof EditModal>>()
-
-// 新增
-const onAdd = () => {
-  EditModalRef.value?.add()
-}
-
-// 编辑
-const onEdit = (item: PersonItem) => {
-  EditModalRef.value?.edit(item.id)
-}
-</script>
-```
-
-#### CSS 命名规范
-
-建议采用全小写，多单词使用-连接符(参考大部分网站，包括掘金，码云等，都是采用这个规则)
-
-或者采用`BEM`命名规范 [BEM 命名规范](https://getbem.com/naming/)
-
-**BEM 命名规范**
-
-```html
-<div class="article">
-  <div class="article__body">
-    <button class="article__button--primary"></button>
-    <button class="article__button--success"></button>
-  </div>
-</div>
-```
-
-
-其他：
-
-位置 1： 使用 var(--margin) 全局 css 变量
-
-位置 2：使用 var(--padding) 全局 css 变量
-
-建议尽量使用全局 css 变量来开发，可以有效提高效率和团队协作
-
-<img src="https://gitee.com/lin0716/gi-image/raw/master/gap.png" />
-
-
-
-#### 其他规范
-
-可参考 Vue2 官网-风格指南: https://v2.cn.vuejs.org/v2/style-guide/ , 其中一些规范也可借鉴
-
-可参考 **Gi Admin Pro** 源码，如有更好的规范建议，可以联系作者本人
-
-## Vue 相关
-
-<a href="https://cn.vuejs.org/" target="_blank">Vue3 官网</a>
-
-<a href="https://router.vuejs.org/zh/" target="_blank">Vue-Router</a>
-
-<a href="https://cn.vitejs.dev/" target="_blank">Vite</a>
-
-<a href="https://pinia.web3doc.top/" target="_blank">Pinia</a>
-
-## 插件推荐
-
-<a href="https://arco.design/vue/component/button" target="_blank">Arco Design 组件库</a>
-
-<a href="https://dayjs.fenxianglu.cn/" target="_blank">Day.js 一个极简的 JavaScript 库，可以为现代浏览器解析、验证、操作和显示日期和时间 2K 大小</a>
-
-<a href="https://www.lodashjs.com/" target="_blank">Lodash 一个一致性、模块化、高性能的 JavaScript 实用工具库</a>
-
-<a href="https://vxetable.cn/xe-utils/#/" target="_blank">Xe-utils 一个 JavaScript 函数库、工具类</a>
-
-<a href="https://vueuse.org/" target="_blank">VueUse 一个 Vue3 Hooks 库</a>
-
-<a href="https://next.attojs.com/" target="_blank">VueRequest 一个 Vue 请求库</a>
-
-<a href="https://mirari.cc/v-viewer/" target="_blank">V-Viewer 基于 viewer.js 的 vue 图像查看器组件，支持旋转、缩放等操作</a>
-
-<a href="https://www.npmjs.com/package/vue-color-kit" target="_blank">Vue-Color-Kit 一个 vue3 颜色选择器组件</a>
-
-<a href="https://vxetable.cn/#/table/start/install" target="_blank">Vxe-Table</a>
-
-<a href="https://github.com/fslflame/vue3-request" target="_blank">vue3-request 一个专为 Vue 3 设计的异步请求处理库，它通过统一的 useRequest Hook 和强大的插件生态，彻底简化了异步操作和 API 调用的复杂性</a>
-
-**其他**
-
-<a href="https://vcalendar.io/" target="_blank">VCalendar 日历组件</a>
-
-<a href="https://antoniandre.github.io/vue-cal/" target="_blank">Vue Cal 日历组件</a>
-
-<a href="https://alfred-skyblue.github.io/vue-draggable-plus/" target="_blank">VueDraggablePlus 支持 Vue2 和 Vue3 的拖拽组件</a>
-
-## 推荐书籍
-
-<a href="https://vue3.chengpeiquan.com/" target="_blank">Vue 入门指南与实战案例</a>
-
-<a href="https://jkchao.github.io/typescript-book-chinese/" target="_blank">深入理解 TypeScript</a>
-
-<a href="https://vue3js.cn/interview/" target="_blank">前端宝典</a>
-
-<a href="https://lhammer.cn/You-need-to-know-css/#/translucent-borders" target="_blank">Web 开发人员需要知道的 CSS 技巧</a>
-
-<a href="https://es6.ruanyifeng.com/#README" target="_blank">阮一峰 ES6</a>
-
-<a href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank">阮一峰 flex 布局</a>
-
-## 开源项目集合
-
-<a href="https://vue-admin.cn/admin" target="_blank">Vue3 开源项目集合</a>
-
-<a href="https://react-admin.cn/admin/" target="_blank">React 开源项目集合</a>
-
-## 工具
-
-<a href="https://c.runoob.com/" target="_blank">菜鸟工具</a>
-
-<a href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=material&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false" target="_blank">代码生成图片</a>
-
-<a href="http://xiets.gitee.io/json-to-any-web/" target="_blank">JSON-TO-ANY 对象转 ts 类型</a>
-
-<a href="http://49.234.61.19/tool/cssTriangle" target="_blank">在线三角形样式生成器</a>
-
-<a href="https://go.itab.link/" target="_blank">iTab</a>
-
-## 捐赠
-
-<img style="width:300px" src="https://gitee.com/lin0716/gi-image/raw/master/alipay.jpg" />
+1. **没有 auto-import** —— 组件与 API 全部显式 `import`；
+2. **没有 `v-hasPerm`** —— 权限判断写 `useUserStore().has('码')`，字符串与后端 `PermissionDef` 逐字一致；
+3. **`n-tag` 的 `type` 必须过 `@/utils/tag.ts`** —— Arco 色词直接透传会静默变灰；
+4. **图标集升级后重跑** `scripts/extract-pc-icons.py` —— 缺图标是空占位、不报错。
diff --git a/frontend-pc/index.html b/frontend-pc/index.html
index 4466c27..7fb4798 100644
--- a/frontend-pc/index.html
+++ b/frontend-pc/index.html
@@ -1,35 +1,37 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-    <!-- 移动端浏览器地址栏跟随品牌色（与 TDesign 主色一致） -->
-    <meta name="theme-color" content="#0052D9" />
-    <meta name="description" content="职业技能等级认定 · 报名材料收集系统" />
-    <meta name="format-detection" content="telephone=no" />
-    <link rel="stylesheet" href="./static/css/loading.css" type="text/css" />
-    <title>填报通 · 管理端</title>
-    <!--
-      已移除模板自带的百度统计脚本：
-      它上报到 gi-demo 作者的统计账号，属于把本项目的访问数据发给第三方，
-      不是我们自己的埋点。需要统计时请接入本单位自己的方案。
-    -->
-  </head>
 
-  <body>
-    <div id="app">
-      <!-- 首屏骨架：在 JS 包下载并执行之前显示，避免白屏 -->
-      <section class="init-box">
-        <div class="init-loading">
-          <div class="init-loading-rect"></div>
-          <div class="init-loading-rect"></div>
-          <div class="init-loading-rect"></div>
-          <div class="init-loading-rect"></div>
-          <div class="init-loading-rect"></div>
-        </div>
-      </section>
-    </div>
-    <script type="module" src="./src/main.ts"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <title>深学在线</title>
+  <style>
+    html,
+    body,
+    #app {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* 首屏白屏时的占位，避免"看起来没在加载" */
+    #app-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #8a8a8a;
+      font-size: 14px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <div id="app-loading">正在加载…</div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
 </html>
diff --git a/frontend-pc/package.json b/frontend-pc/package.json
index 3bb942b..26ee672 100644
--- a/frontend-pc/package.json
+++ b/frontend-pc/package.json
@@ -1,7 +1,9 @@
 {
   "name": "xt-frontend-pc",
   "type": "module",
-  "version": "1.0.0",
+  "version": "2.0.0",
+  "private": true,
+  "description": "深学在线 · PC 管理端（Vue 3 + Naive UI）",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -9,59 +11,30 @@
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "lint:style": "stylelint \"**/*.{vue,scss,css}\" --cache",
-    "lint:style:fix": "stylelint \"**/*.{vue,scss,css}\" --cache --fix"
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@arco-design/color": "^0.4.0",
+    "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify/vue": "^5.0.0",
     "@vueuse/core": "^13.6.0",
-    "animate.css": "^4.1.1",
-    "axios": "^0.27.2",
+    "axios": "^1.7.9",
     "dayjs": "^1.11.4",
-    "echarts": "^6.0.0",
     "jsencrypt": "^3.5.4",
-    "lodash-es": "^4.17.21",
-    "mitt": "^3.0.1",
-    "nprogress": "^0.2.0",
+    "naive-ui": "^2.42.0",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
-    "sortablejs": "^1.15.6",
     "vue": "^3.5.18",
-    "vue-color-kit": "^1.0.6",
-    "vue-draggable-plus": "^0.6.0",
-    "vue-router": "^4.5.1",
-    "xe-utils": "^3.7.8"
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^7.0.1",
-    "@arco-design/web-vue": "^2.58.0",
-    "@iconify-json/icon-park-outline": "^1.2.4",
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.2.0",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.0.1",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.5.0",
-    "less": "^4.4.0",
-    "postcss": "^8.5.6",
-    "postcss-html": "^1.8.0",
     "sass": "^1.62.1",
-    "stylelint": "^16.25.0",
-    "stylelint-config-recess-order": "^7.4.0",
-    "stylelint-config-recommended-vue": "^1.6.1",
-    "stylelint-config-standard": "^39.0.1",
-    "stylelint-config-standard-scss": "^16.0.0",
-    "stylelint-scss": "^6.12.1",
     "typescript": "^5.9.2",
-    "unplugin-auto-import": "^20.0.0",
-    "unplugin-icons": "^22.5.0",
-    "unplugin-vue-components": "^29.0.0",
     "vite": "^7.0.6",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "^8.0.5",
     "vue-tsc": "^3.0.5"
-  },
-  "description": "数据信息填报系统 · PC 管理端（管理员 / 班主任）"
+  }
 }
diff --git a/frontend-pc/pnpm-lock.yaml b/frontend-pc/pnpm-lock.yaml
index 8c67240..94ec0de 100644
--- a/frontend-pc/pnpm-lock.yaml
+++ b/frontend-pc/pnpm-lock.yaml
@@ -8,142 +8,64 @@ importers:
 
   .:
     dependencies:
-      '@arco-design/color':
-        specifier: ^0.4.0
-        version: 0.4.0
+      '@iconify-json/icon-park-outline':
+        specifier: ^1.2.4
+        version: 1.2.4
       '@iconify/vue':
         specifier: ^5.0.0
         version: 5.0.3(vue@3.5.23(typescript@5.9.3))
       '@vueuse/core':
         specifier: ^13.6.0
         version: 13.9.0(vue@3.5.23(typescript@5.9.3))
-      animate.css:
-        specifier: ^4.1.1
-        version: 4.1.1
       axios:
-        specifier: ^0.27.2
-        version: 0.27.2
+        specifier: ^1.7.9
+        version: 1.20.0
       dayjs:
         specifier: ^1.11.4
         version: 1.11.19
-      echarts:
-        specifier: ^6.0.0
-        version: 6.1.0
       jsencrypt:
         specifier: ^3.5.4
         version: 3.5.4
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
-      mitt:
-        specifier: ^3.0.1
-        version: 3.0.1
-      nprogress:
-        specifier: ^0.2.0
-        version: 0.2.0
+      naive-ui:
+        specifier: ^2.42.0
+        version: 2.45.3(vue@3.5.23(typescript@5.9.3))
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       pinia-plugin-persistedstate:
         specifier: ^4.4.1
         version: 4.7.1(pinia@3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3)))
-      sortablejs:
-        specifier: ^1.15.6
-        version: 1.15.6
       vue:
         specifier: ^3.5.18
         version: 3.5.23(typescript@5.9.3)
-      vue-color-kit:
-        specifier: ^1.0.6
-        version: 1.0.6(vue@3.5.23(typescript@5.9.3))
-      vue-draggable-plus:
-        specifier: ^0.6.0
-        version: 0.6.0(@types/sortablejs@1.15.9)
       vue-router:
         specifier: ^4.5.1
         version: 4.6.3(vue@3.5.23(typescript@5.9.3))
-      xe-utils:
-        specifier: ^3.7.8
-        version: 3.7.9
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^7.0.1
         version: 7.7.3(@typescript-eslint/typescript-estree@8.70.1(typescript@5.9.3))(@typescript-eslint/utils@8.70.1(eslint@9.39.1)(typescript@5.9.3))(@vue/compiler-sfc@3.5.23)(eslint@9.39.1)(typescript@5.9.3)
-      '@arco-design/web-vue':
-        specifier: ^2.58.0
-        version: 2.58.0(vue@3.5.23(typescript@5.9.3))
-      '@iconify-json/icon-park-outline':
-        specifier: ^1.2.4
-        version: 1.2.4
-      '@types/lodash-es':
-        specifier: ^4.17.12
-        version: 4.17.12
       '@types/node':
         specifier: ^24.2.0
         version: 24.10.0
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
         version: 6.0.1(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))
-      '@vitejs/plugin-vue-jsx':
-        specifier: ^5.0.1
-        version: 5.1.1(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       eslint:
         specifier: ^9.5.0
         version: 9.39.1
-      less:
-        specifier: ^4.4.0
-        version: 4.4.2
-      postcss:
-        specifier: ^8.5.6
-        version: 8.5.6
-      postcss-html:
-        specifier: ^1.8.0
-        version: 1.8.0
       sass:
         specifier: ^1.62.1
         version: 1.93.3
-      stylelint:
-        specifier: ^16.25.0
-        version: 16.25.0(typescript@5.9.3)
-      stylelint-config-recess-order:
-        specifier: ^7.4.0
-        version: 7.4.0(stylelint-order@7.0.0(stylelint@16.25.0(typescript@5.9.3)))(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-config-recommended-vue:
-        specifier: ^1.6.1
-        version: 1.6.1(postcss-html@1.8.0)(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-config-standard:
-        specifier: ^39.0.1
-        version: 39.0.1(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-config-standard-scss:
-        specifier: ^16.0.0
-        version: 16.0.0(postcss@8.5.6)(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-scss:
-        specifier: ^6.12.1
-        version: 6.12.1(stylelint@16.25.0(typescript@5.9.3))
       typescript:
         specifier: ^5.9.2
         version: 5.9.3
-      unplugin-auto-import:
-        specifier: ^20.0.0
-        version: 20.2.0(@vueuse/core@13.9.0(vue@3.5.23(typescript@5.9.3)))
-      unplugin-icons:
-        specifier: ^22.5.0
-        version: 22.5.0(@vue/compiler-sfc@3.5.23)
-      unplugin-vue-components:
-        specifier: ^29.0.0
-        version: 29.2.0(@babel/parser@7.28.5)(vue@3.5.23(typescript@5.9.3))
       vite:
         specifier: ^7.0.6
         version: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-      vite-plugin-compression:
-        specifier: ^0.5.1
-        version: 0.5.1(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))
-      vite-plugin-vue-devtools:
-        specifier: ^8.0.5
-        version: 8.0.5(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))
       vue-tsc:
         specifier: ^3.0.5
         version: 3.1.3(typescript@5.9.3)
@@ -217,83 +139,6 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
-  '@antfu/install-pkg@2.1.0':
-    resolution: {integrity: sha512-sdg9NxU3zR4Mnawfbc/x6GB5Wf17WYud5qOuEuxXjaKpYpMkISSJEjItGebXJ2bQ4DIcly4NYH23mtkGJjvKUw==}
-
-  '@arco-design/color@0.4.0':
-    resolution: {integrity: sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==}
-
-  '@arco-design/web-vue@2.58.0':
-    resolution: {integrity: sha512-b1vdPYOmjG5VAkVa7jlVwCb+WynBK+rnKN8zH3yKohpZObZbostRd3HgYNtjjZjGVU3OqR0Yy2FX7ftgF0bcOw==}
-    peerDependencies:
-      vue: '>=3.1.0'
-
-  '@babel/code-frame@7.27.1':
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.28.5':
-    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.28.5':
-    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.28.5':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.27.2':
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-create-class-features-plugin@7.28.5':
-    resolution: {integrity: sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.27.1':
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.28.3':
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-replace-supers@7.27.1':
-    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -302,81 +147,15 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.28.4':
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.28.5':
     resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-proposal-decorators@7.28.0':
-    resolution: {integrity: sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-decorators@7.27.1':
-    resolution: {integrity: sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-import-attributes@7.27.1':
-    resolution: {integrity: sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-import-meta@7.10.4':
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-jsx@7.27.1':
-    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-typescript@7.27.1':
-    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-typescript@7.28.5':
-    resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/template@7.27.2':
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.28.5':
-    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.28.5':
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
-  '@cacheable/memoize@2.0.3':
-    resolution: {integrity: sha512-hl9wfQgpiydhQEIv7fkjEzTGE+tcosCXLKFDO707wYJ/78FVOlowb36djex5GdbSyeHnG62pomYLMuV/OT8Pbw==}
-
-  '@cacheable/memory@2.0.4':
-    resolution: {integrity: sha512-cCmJKCKlT1t7hNBI1+gFCwmKFd9I4pS3zqBeNGXTSODnpa0EeDmORHY8oEMTuozfdg3cgsVh8ojLaPYb6eC7Cg==}
-
-  '@cacheable/utils@2.2.0':
-    resolution: {integrity: sha512-7xaQayO3msdVcxXLYcLU5wDqJBNdQcPPPHr6mdTEIQI7N7TbtSVVTpWOTfjyhg0L6AQwQdq7miKdWtTDBoBldQ==}
-
   '@clack/core@1.5.1':
     resolution: {integrity: sha512-iHTrHA8MtVuLl2TfZySmcKv1qO2PoyC9Z7pfSDozEuV5vtY3/wcOPKJXlqJ5Oq2Cx5DDGQGAMVx6HZfRRoVEbQ==}
     engines: {node: '>= 20.12.0'}
@@ -385,31 +164,15 @@ packages:
     resolution: {integrity: sha512-dlT1m5e/0yUL0kRNcQn7yGLVThkgbB0Ga/1AmfDDC/8ik6AIiSf2QLQO2zPYvefsHP0aFgxO93cVLCCfDp7kzQ==}
     engines: {node: '>= 20.12.0'}
 
-  '@csstools/css-parser-algorithms@3.0.5':
-    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
-    engines: {node: '>=18'}
+  '@css-render/plugin-bem@0.15.14':
+    resolution: {integrity: sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==}
     peerDependencies:
-      '@csstools/css-tokenizer': ^3.0.4
+      css-render: ~0.15.14
 
-  '@csstools/css-tokenizer@3.0.4':
-    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
-    engines: {node: '>=18'}
-
-  '@csstools/media-query-list-parser@4.0.3':
-    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
-    engines: {node: '>=18'}
+  '@css-render/vue3-ssr@0.15.14':
+    resolution: {integrity: sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==}
     peerDependencies:
-      '@csstools/css-parser-algorithms': ^3.0.5
-      '@csstools/css-tokenizer': ^3.0.4
-
-  '@csstools/selector-specificity@5.0.0':
-    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      postcss-selector-parser: ^7.0.0
-
-  '@dual-bundle/import-meta-resolve@4.2.1':
-    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
+      vue: ^3.0.11
 
   '@e18e/eslint-plugin@0.2.0':
     resolution: {integrity: sha512-mXgODVwhuDjTJ+UT+XSvmMmCidtGKfrV5nMIv1UtpWex2pYLsIM3RSpT8HWIMAebS9qANbXPKlSX4BE7ZvuCgA==}
@@ -422,6 +185,9 @@ packages:
       oxlint:
         optional: true
 
+  '@emotion/hash@0.8.0':
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+
   '@es-joy/jsdoccomment@0.86.0':
     resolution: {integrity: sha512-ukZmRQ81WiTpDWO6D/cTBM7XbrNtutHKvAVnZN/8pldAwLoJArGOvkNyxPTBGsPjsoaQBJxlH+tE2TNA/92Qgw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -687,50 +453,16 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@3.1.7':
-    resolution: {integrity: sha512-JZHlwdID+dy+lTgbYC8NEC4zeugqeYsc6jewvzb4c58kHauJn+X7rNwQjxz5p2qSjqaEeQoLkCIQ9v/H4PK0/w==}
-
   '@iconify/vue@5.0.3':
     resolution: {integrity: sha512-e9x6QZe2/HyeHUog0jzZJSZts7m/YntPYp/p4OqtZEXpHznxWnQpcX30YpuaUH43h69l3YeR1FCJ8V1t3qd7qA==}
     peerDependencies:
       vue: '>=3.0.0'
 
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-
-  '@jridgewell/remapping@2.3.5':
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-
-  '@keyv/bigmap@1.1.0':
-    resolution: {integrity: sha512-MX7XIUNwVRK+hjZcAbNJ0Z8DREo+Weu9vinBOjGU1thEi9F6vPhICzBbk4CCf3eEefKRz7n6TfZXwUFZTSgj8Q==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      keyv: ^5.5.3
-
-  '@keyv/serialize@1.1.1':
-    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
-
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
+  '@juggle/resize-observer@3.4.0':
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
 
   '@ota-meshi/ast-token-store@0.3.0':
     resolution: {integrity: sha512-XRO0zi2NIUKq2lUk3T1ecFSld1fMWRKE6naRFGkgkdeosx7IslyUKNv5Dcb5PJTja9tHJoFu0v/7yEpAkrkrTg==}
@@ -828,15 +560,9 @@ packages:
     resolution: {integrity: sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  '@polka/url@1.0.0-next.29':
-    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
-
   '@rolldown/pluginutils@1.0.0-beta.29':
     resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
 
-  '@rolldown/pluginutils@1.0.0-beta.47':
-    resolution: {integrity: sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==}
-
   '@rollup/rollup-android-arm-eabi@4.52.5':
     resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
     cpu: [arm]
@@ -998,9 +724,6 @@ packages:
   '@types/node@26.6.3':
     resolution: {integrity: sha512-dsqMQQoeTLqu9wynDD00q573mNzso3IdQOAfHRJqLCcmCFPoGo9A1bDpUcv/9tnKpErQWv9uKeGfl37EIS02Yg==}
 
-  '@types/sortablejs@1.15.9':
-    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
-
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -1066,13 +789,6 @@ packages:
     resolution: {integrity: sha512-Vwj9lUIW5Xq3wQ9w6gv3R86g1hMK8f2zNOdGTAgeXUMMXFK78G9ruCjjqutHMNJc0+CH7LYRnHeUB9IT8wFmcw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@vitejs/plugin-vue-jsx@5.1.1':
-    resolution: {integrity: sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-      vue: ^3.0.0
-
   '@vitejs/plugin-vue@6.0.1':
     resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1105,22 +821,6 @@ packages:
   '@volar/typescript@2.4.23':
     resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==}
 
-  '@vue/babel-helper-vue-transform-on@1.5.0':
-    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
-
-  '@vue/babel-plugin-jsx@1.5.0':
-    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-
-  '@vue/babel-plugin-resolve-type@1.5.0':
-    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@vue/compiler-core@3.5.23':
     resolution: {integrity: sha512-nW7THWj5HOp085ROk65LwaoxuzDsjIxr485F4iu63BoxsXoSqKqmsUUoP4A7Gl67DgIgi0zJ8JFgHfvny/74MA==}
 
@@ -1139,23 +839,12 @@ packages:
   '@vue/devtools-api@7.7.7':
     resolution: {integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==}
 
-  '@vue/devtools-core@8.0.5':
-    resolution: {integrity: sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==}
-    peerDependencies:
-      vue: ^3.0.0
-
   '@vue/devtools-kit@7.7.7':
     resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
 
-  '@vue/devtools-kit@8.0.5':
-    resolution: {integrity: sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==}
-
   '@vue/devtools-shared@7.7.7':
     resolution: {integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==}
 
-  '@vue/devtools-shared@8.0.5':
-    resolution: {integrity: sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==}
-
   '@vue/language-core@3.1.3':
     resolution: {integrity: sha512-KpR1F/eGAG9D1RZ0/T6zWJs6dh/pRLfY5WupecyYKJ1fjVmDMgTPw9wXmKv2rBjo4zCJiOSiyB8BDP1OUwpMEA==}
     peerDependencies:
@@ -1220,22 +909,16 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
-
   alien-signals@3.0.6:
     resolution: {integrity: sha512-gCs0YqC1mkYGC6IRXsSrA62ShOSv1FlVN5tRp/Cs2vRWLK/BAeluWIdfsl253pFQPznKEvRmHhfep7crWfyfWQ==}
 
-  animate.css@4.1.1:
-    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
-
-  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'}
@@ -1244,10 +927,6 @@ packages:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
   are-docs-informative@0.0.2:
     resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
     engines: {node: '>=14'}
@@ -1255,32 +934,18 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-
-  astral-regex@2.0.0:
-    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
-    engines: {node: '>=8'}
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
-  axios@0.27.2:
-    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
-
-  b-tween@0.3.3:
-    resolution: {integrity: sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==}
-
-  b-validate@1.5.3:
-    resolution: {integrity: sha512-iCvCkGFskbaYtfQ0a3GmcQCHl/Sv1GufXFGuUQ+FE+WJa7A/espLOuFIn09B944V8/ImPj71T4+rTASxO2PAuA==}
+  axios@1.20.0:
+    resolution: {integrity: sha512-r8aOh8j9cGKpgQAqpzrUHnSIc6a59Y3Xf/cv8sy1DrHCkZHzQGEuoq1tARk6qSyDdtQGSDgpb9kFlruzPvrgwg==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  balanced-match@2.0.0:
-    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
-
   balanced-match@4.0.4:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -1289,10 +954,6 @@ packages:
     resolution: {integrity: sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==}
     hasBin: true
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   birpc@2.7.0:
     resolution: {integrity: sha512-tub/wFGH49vNCm0xraykcY3TcRgX/3JsALYq/Lwrtti+bTyFHkCUAWF5wgYoie8P41wYwig2mIKiqoocr1EkEQ==}
 
@@ -1319,17 +980,10 @@ packages:
     resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
     engines: {node: '>=18.20'}
 
-  bundle-name@4.1.0:
-    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
-    engines: {node: '>=18'}
-
   cac@7.0.0:
     resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==}
     engines: {node: '>=20.19.0'}
 
-  cacheable@2.1.1:
-    resolution: {integrity: sha512-LmF4AXiSNdiRbI2UjH8pAp9NIXxeQsTotpEaegPiDcnN0YPygDJDV3l/Urc0mL72JWdATEorKqIHEx55nDlONg==}
-
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -1354,10 +1008,6 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
@@ -1370,28 +1020,13 @@ packages:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
 
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
-
-  color@3.2.1:
-    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
-
-  colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -1408,9 +1043,6 @@ packages:
     resolution: {integrity: sha512-0h+uSNtQGW3D98eQt3jJ8L06Fves8hncB4V/PKdw/Qb8Hnk19VaKuTr55UNRYiSoVa7WwrFls+rh3ux9agmkeQ==}
     engines: {node: '>= 12.0.0'}
 
-  compute-scroll-into-view@1.0.20:
-    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -1420,9 +1052,6 @@ packages:
   confbox@0.2.2:
     resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-
   copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
 
@@ -1433,35 +1062,32 @@ packages:
   core-js-compat@3.46.0:
     resolution: {integrity: sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==}
 
-  cosmiconfig@9.0.0:
-    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  css-functions-list@3.2.3:
-    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
-    engines: {node: '>=12 || >=16'}
-
-  css-tree@3.1.0:
-    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+  css-render@0.15.14:
+    resolution: {integrity: sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==}
 
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
 
+  csstype@3.0.11:
+    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  date-fns-tz@3.2.0:
+    resolution: {integrity: sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==}
+    peerDependencies:
+      date-fns: ^3.0.0 || ^4.0.0
+
+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
+
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
@@ -1480,18 +1106,6 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  default-browser-id@5.0.1:
-    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
-    engines: {node: '>=18'}
-
-  default-browser@5.4.0:
-    resolution: {integrity: sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==}
-    engines: {node: '>=18'}
-
-  define-lazy-prop@3.0.0:
-    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
-    engines: {node: '>=12'}
-
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
@@ -1515,36 +1129,13 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-
-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
-  domelementtype@2.3.0:
-    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
-
-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
-  domutils@3.2.2:
-    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
-
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
-  echarts@6.1.0:
-    resolution: {integrity: sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==}
-
   electron-to-chromium@1.5.245:
     resolution: {integrity: sha512-rdmGfW47ZhL/oWEJAY4qxRtdly2B98ooTJ0pdEI4jhVLZ6tNf8fPtov2wS1IRKwFJT92le3x4Knxiwzl7cPPpQ==}
 
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
   empathic@2.0.0:
     resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
     engines: {node: '>=14'}
@@ -1561,20 +1152,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-
   errno@0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
     hasBin: true
 
-  error-ex@1.3.4:
-    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
-
-  error-stack-parser-es@1.0.5:
-    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
-
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1813,23 +1394,19 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
-
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  evtd@0.2.4:
+    resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==}
+
   exsolve@1.0.7:
     resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -1842,19 +1419,9 @@ packages:
   fast-string-width@3.0.2:
     resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
 
-  fast-uri@3.1.0:
-    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
-
   fast-wrap-ansi@0.2.2:
     resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
 
-  fastest-levenshtein@1.0.16:
-    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
-    engines: {node: '>= 4.9.1'}
-
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
-
   fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
 
@@ -1867,9 +1434,6 @@ packages:
       picomatch:
         optional: true
 
-  file-entry-cache@10.1.4:
-    resolution: {integrity: sha512-5XRUFc0WTtUbjfGzEwXc42tiGxQHBmtbUG1h9L2apu4SulCGN3Hqm//9D6FAolf8MYNL7f/YlJl9vy08pj5JuA==}
-
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -1890,14 +1454,11 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
-  flat-cache@6.1.18:
-    resolution: {integrity: sha512-JUPnFgHMuAVmLmoH9/zoZ6RHOt5n9NlUw/sDXsTbROJ2SFoS2DS4s+swAV6UTeTbGH/CAsZIE6M8TaG/3jVxgQ==}
-
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  follow-redirects@1.15.11:
-    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+  follow-redirects@1.16.1:
+    resolution: {integrity: sha512-FNvFGzoMLWmE6Yj9spb/zjd7yiNCHiAW9/Tg9CXrQ8wuu32HtlJOwWO11OJafl5FfY3DxTdQ0vj42zU1kvv5jg==}
     engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
@@ -1905,18 +1466,14 @@ packages:
       debug:
         optional: true
 
-  form-data@4.0.4:
-    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
     engines: {node: '>= 6'}
 
   format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
 
-  fs-extra@10.1.0:
-    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
-    engines: {node: '>=12'}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1925,10 +1482,6 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -1943,22 +1496,10 @@ packages:
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
   glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  global-modules@2.0.0:
-    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
-    engines: {node: '>=6'}
-
-  global-prefix@3.0.0:
-    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
-    engines: {node: '>=6'}
-
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -1975,13 +1516,6 @@ packages:
     resolution: {integrity: sha512-cezEd/DTyyht9cvSSURyygXPfy04GtWO/5e6ZPvH7fCtjKz9PYOmuawphw1Ctd1f6C+5JypXfGD7ahNMXvevBA==}
     engines: {node: '>=18'}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
-  globjoin@0.1.4:
-    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
-
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
@@ -2004,25 +1538,23 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  highlight.js@11.12.0:
+    resolution: {integrity: sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg==}
+    engines: {node: '>=12.0.0'}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  hookified@1.12.2:
-    resolution: {integrity: sha512-aokUX1VdTpI0DUsndvW+OiwmBpKCu/NgRsSSkuSY0zq8PY6Q6a+lmOfAFDXAAOtBqJELvcWY9L1EVtzjbQcMdg==}
-
   html-entities@2.6.0:
     resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
 
-  html-tags@3.3.1:
-    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
-    engines: {node: '>=8'}
-
-  htmlparser2@8.0.2:
-    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
 
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
@@ -2048,9 +1580,6 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-meta-resolve@4.2.0:
-    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2059,53 +1588,22 @@ packages:
     resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
     engines: {node: '>=12'}
 
-  ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
-  is-arrayish@0.3.4:
-    resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
-
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
   is-builtin-module@5.0.0:
     resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
     engines: {node: '>=18.20'}
 
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
-
   is-extglob@2.1.1:
     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'}
 
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
-
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-plain-object@5.0.0:
-    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
-    engines: {node: '>=0.10.0'}
-
   is-what@3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
 
@@ -2113,19 +1611,9 @@ packages:
     resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
     engines: {node: '>=18'}
 
-  is-wsl@3.1.0:
-    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
-    engines: {node: '>=16'}
-
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  js-tokens@9.0.1:
-    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
-
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -2149,49 +1637,19 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   jsonc-eslint-parser@3.3.0:
     resolution: {integrity: sha512-hYTGkHGNRZnXOFZ1urhINADoqDrGfpy53cjw+dxk84QE0pUDujQzeUeamNs6Mz44/TKD49z2x6/GVSu4ZrtA+Q==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
-
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  keyv@5.5.3:
-    resolution: {integrity: sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==}
-
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
-
-  known-css-properties@0.36.0:
-    resolution: {integrity: sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==}
-
-  known-css-properties@0.37.0:
-    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
-
-  kolorist@1.8.0:
-    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
-
   less@4.4.2:
     resolution: {integrity: sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==}
     engines: {node: '>=14'}
@@ -2201,9 +1659,6 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   local-pkg@1.1.2:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
@@ -2218,15 +1673,12 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lodash.truncate@4.4.2:
-    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
 
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -2241,9 +1693,6 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mathml-tag-names@2.1.3:
-    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
-
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -2280,20 +1729,6 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  mdn-data@2.12.2:
-    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
-
-  mdn-data@2.25.0:
-    resolution: {integrity: sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==}
-
-  meow@13.2.0:
-    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
-    engines: {node: '>=18'}
-
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -2414,26 +1849,23 @@ packages:
   module-replacements@2.11.0:
     resolution: {integrity: sha512-j5sNQm3VCpQQ7nTqGeOZtoJtV3uKERgCBm9QRhmGRiXiqkf7iRFOkfxdJRZWLkqYY8PNf4cDQF/WfXUYLENrRA==}
 
-  mrmime@2.0.1:
-    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
-    engines: {node: '>=10'}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
+  naive-ui@2.45.3:
+    resolution: {integrity: sha512-D83gJ+6zUdkQ5DuUbmlfyaM1t8pV5WMPa6KmL9mByqQuiL12qBdA0n/iEIth4dQw1x/duNGpOS2anpt5FKO1kw==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      vue: ^3.0.0
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.1.6:
-    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -2452,29 +1884,12 @@ packages:
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  nprogress@0.2.0:
-    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
-
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  number-precision@1.6.0:
-    resolution: {integrity: sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==}
-
   object-deep-merge@2.0.1:
     resolution: {integrity: sha512-aKttDKcU3pyZqKcCkDhsMn70WmZFG2JGDQLP9EcLyTSIFQRCPWLAmBZRLJnrVUrhPG1jETEEbfdgbNtJf1LyMg==}
 
-  ohash@2.0.11:
-    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
-
-  open@10.2.0:
-    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
-    engines: {node: '>=18'}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -2490,9 +1905,6 @@ packages:
   package-manager-detector@1.5.0:
     resolution: {integrity: sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==}
 
-  package-manager-detector@1.8.0:
-    resolution: {integrity: sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2504,10 +1916,6 @@ packages:
   parse-imports-exports@0.2.4:
     resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
   parse-node-version@1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
@@ -2526,19 +1934,12 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  perfect-debounce@2.0.0:
-    resolution: {integrity: sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -2594,50 +1995,10 @@ packages:
   pnpm-workspace-yaml@1.9.1:
     resolution: {integrity: sha512-Xj/T2X6DNAWbtk/9UQ0/TJRswltiHZevmcMjqoL7WrpJi67lu3qaslU4+I+zJ8wtwqmuvAE0KkB8rbv2ZdogBg==}
 
-  postcss-html@1.8.0:
-    resolution: {integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==}
-    engines: {node: ^12 || >=14}
-
-  postcss-media-query-parser@0.2.3:
-    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
-
-  postcss-resolve-nested-selector@0.1.6:
-    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
-
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.3.3
-
-  postcss-safe-parser@7.0.1:
-    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
-    engines: {node: '>=18.0'}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  postcss-scss@4.0.9:
-    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.4.29
-
-  postcss-selector-parser@7.1.0:
-    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@7.1.6:
     resolution: {integrity: sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==}
     engines: {node: '>=4'}
 
-  postcss-sorting@9.1.0:
-    resolution: {integrity: sha512-Mn8KJ45HNNG6JBpBizXcyf6LqY/qyqetGcou/nprDnFwBFBLGj0j/sNKV2lj2KMOVOwdXu14aEzqJv8CIV6e8g==}
-    peerDependencies:
-      postcss: ^8.4.20
-
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2646,6 +2007,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
@@ -2653,20 +2018,9 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qified@0.5.1:
-    resolution: {integrity: sha512-+BtFN3dCP+IaFA6IYNOu/f/uK1B8xD2QWyOeCse0rjtAebBmkzgd2d1OAXi3ikAzJMIBSdzZDNZ3wZKEUDQs5w==}
-    engines: {node: '>=20'}
-
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
@@ -2687,32 +2041,17 @@ packages:
     resolution: {integrity: sha512-ycwFAS14Jw4mppvmK4GR/J6u3WpWpjkEApehuHtLc/8VpPNpDMbQ4WjqwplXifGeyKOzHSFLmSPqzksDQE2Sfg==}
     hasBin: true
 
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-
   reserved-identifiers@1.2.0:
     resolution: {integrity: sha512-yE7KUfFvaBFzGPs5H3Ops1RevfUEsDc5Iz65rOwWg4lE8HJSYtle77uul3+573457oHvBKuHYDl/xqUkKpEEdw==}
     engines: {node: '>=18'}
 
-  resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
-  resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
-
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
@@ -2721,13 +2060,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  run-applescript@7.1.0:
-    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
-    engines: {node: '>=18'}
-
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -2739,24 +2071,17 @@ packages:
   sax@1.4.3:
     resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
 
-  scroll-into-view-if-needed@2.2.31:
-    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
-
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
     engines: {node: ^14.0.0 || >=16.0.0}
 
-  scule@1.3.0:
-    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+  seemly@0.3.10:
+    resolution: {integrity: sha512-2+SMxtG1PcsL0uyhkumlOU6Qo9TAQ/WyH7tthnPIOQB05/12jz9naq6GZ6iZ6ApVsO3rr2gsnTf3++OV63kE1Q==}
 
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
   semver@7.7.3:
     resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
@@ -2775,31 +2100,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
-  simple-swizzle@0.2.4:
-    resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
-
-  sirv@3.0.2:
-    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
-    engines: {node: '>=18'}
-
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
-  slice-ansi@4.0.0:
-    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
-    engines: {node: '>=10'}
-
-  sortablejs@1.15.6:
-    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2821,14 +2124,6 @@ packages:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
 
-  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'}
-
   strip-indent@4.1.1:
     resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
@@ -2837,78 +2132,6 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  strip-literal@3.1.0:
-    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
-
-  stylelint-config-html@1.1.0:
-    resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
-    engines: {node: ^12 || >=14}
-    peerDependencies:
-      postcss-html: ^1.0.0
-      stylelint: '>=14.0.0'
-
-  stylelint-config-recess-order@7.4.0:
-    resolution: {integrity: sha512-W3G517cBaMDYRX5Fzhro4fhRkkLafLgVSPfQnhxbiLyMnbLq47RMF/NRaOJ4OQsKWYhsIHOIc2Q3VL0X3Q7oPg==}
-    peerDependencies:
-      stylelint: '>=16.18'
-      stylelint-order: '>=7'
-
-  stylelint-config-recommended-scss@16.0.2:
-    resolution: {integrity: sha512-aUTHhPPWCvFyWaxtckJlCPaXTDFsp4pKO8evXNCsW9OwsaUWyMd6jvcUhSmfGWPrTddvzNqK4rS/UuSLcbVGdQ==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      postcss: ^8.3.3
-      stylelint: ^16.24.0
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-
-  stylelint-config-recommended-vue@1.6.1:
-    resolution: {integrity: sha512-lLW7hTIMBiTfjenGuDq2kyHA6fBWd/+Df7MO4/AWOxiFeXP9clbpKgg27kHfwA3H7UNMGC7aeP3mNlZB5LMmEQ==}
-    engines: {node: ^12 || >=14}
-    peerDependencies:
-      postcss-html: ^1.0.0
-      stylelint: '>=14.0.0'
-
-  stylelint-config-recommended@17.0.0:
-    resolution: {integrity: sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      stylelint: ^16.23.0
-
-  stylelint-config-standard-scss@16.0.0:
-    resolution: {integrity: sha512-/FHECLUu+med/e6OaPFpprG86ShC4SYT7Tzb2PTVdDjJsehhFBOioSlWqYFqJxmGPIwO3AMBxNo+kY3dxrbczA==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      postcss: ^8.3.3
-      stylelint: ^16.23.1
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-
-  stylelint-config-standard@39.0.1:
-    resolution: {integrity: sha512-b7Fja59EYHRNOTa3aXiuWnhUWXFU2Nfg6h61bLfAb5GS5fX3LMUD0U5t4S8N/4tpHQg3Acs2UVPR9jy2l1g/3A==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      stylelint: ^16.23.0
-
-  stylelint-order@7.0.0:
-    resolution: {integrity: sha512-rSWxx0KscYfxU02wEskKXES9lkRzuuONMMNkZ7SUc6uiF3tDKm7e+sE0Ax/SBlG4TUf1sp1R6f3/SlsPGmzthg==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      stylelint: ^16.18.0
-
-  stylelint-scss@6.12.1:
-    resolution: {integrity: sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      stylelint: ^16.0.2
-
-  stylelint@16.25.0:
-    resolution: {integrity: sha512-Li0avYWV4nfv1zPbdnxLYBGq4z8DVZxbRgx4Kn6V+Uftz1rMoF1qiEI3oL4kgWqyYgCgs7gT5maHNZ82Gk03vQ==}
-    engines: {node: '>=18.12.0'}
-    hasBin: true
-
   superjson@2.2.5:
     resolution: {integrity: sha512-zWPTX96LVsA/eVYnqOM2+ofcdPqdS1dAF1LN4TS2/MWuUpfitd9ctTa87wt4xrYnZnkLtS69xpBdSxVBP5Rm6w==}
     engines: {node: '>=16'}
@@ -2917,21 +2140,10 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  supports-hyperlinks@3.2.0:
-    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
-    engines: {node: '>=14.18'}
-
-  svg-tags@1.0.0:
-    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
-
   synckit@0.11.13:
     resolution: {integrity: sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  table@6.9.0:
-    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
-    engines: {node: '>=10.0.0'}
-
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -2940,10 +2152,6 @@ packages:
     resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
     engines: {node: '>=18'}
 
-  tinyexec@1.3.1:
-    resolution: {integrity: sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==}
-    engines: {node: '>=18'}
-
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -2964,9 +2172,8 @@ packages:
     resolution: {integrity: sha512-A5F0cM6+mDleacLIEUkmfpkBbnHJFV1d2rprHU2MXNk7mlxHq2zGojA+SRvQD1RoMo9gqjZPWEaKG4v1BQ48lw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  totalist@3.0.1:
-    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
-    engines: {node: '>=6'}
+  treemate@0.3.11:
+    resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==}
 
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
@@ -2979,9 +2186,6 @@ packages:
     peerDependencies:
       typescript: '>=4.0.0'
 
-  tslib@2.3.0:
-    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3003,10 +2207,6 @@ packages:
   undici-types@8.9.0:
     resolution: {integrity: sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==}
 
-  unimport@5.5.0:
-    resolution: {integrity: sha512-/JpWMG9s1nBSlXJAQ8EREFTFy3oy6USFd8T6AoBaw1q2GGcF4R9yp3ofg32UODZlYEO5VD0EWE1RpI9XDWyPYg==}
-    engines: {node: '>=18.12.0'}
-
   unist-util-is@6.0.1:
     resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
@@ -3019,66 +2219,6 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
-
-  unplugin-auto-import@20.2.0:
-    resolution: {integrity: sha512-vfBI/SvD9hJqYNinipVOAj5n8dS8DJXFlCKFR5iLDp2SaQwsfdnfLXgZ+34Kd3YY3YEY9omk8XQg0bwos3Q8ug==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@nuxt/kit': ^4.0.0
-      '@vueuse/core': '*'
-    peerDependenciesMeta:
-      '@nuxt/kit':
-        optional: true
-      '@vueuse/core':
-        optional: true
-
-  unplugin-icons@22.5.0:
-    resolution: {integrity: sha512-MBlMtT5RuMYZy4TZgqUL2OTtOdTUVsS1Mhj6G1pEzMlFJlEnq6mhUfoIt45gBWxHcsOdXJDWLg3pRZ+YmvAVWQ==}
-    peerDependencies:
-      '@svgr/core': '>=7.0.0'
-      '@svgx/core': ^1.0.1
-      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
-      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
-      vue-template-compiler: ^2.6.12
-      vue-template-es2015-compiler: ^1.9.0
-    peerDependenciesMeta:
-      '@svgr/core':
-        optional: true
-      '@svgx/core':
-        optional: true
-      '@vue/compiler-sfc':
-        optional: true
-      svelte:
-        optional: true
-      vue-template-compiler:
-        optional: true
-      vue-template-es2015-compiler:
-        optional: true
-
-  unplugin-utils@0.3.1:
-    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
-    engines: {node: '>=20.19.0'}
-
-  unplugin-vue-components@29.2.0:
-    resolution: {integrity: sha512-QxBeBdmEflgtJRgMQMc/z/JVV5lcwXN5nOy5ehX6CKDGylIu6Qn4Goy8X95S0qOxF7EdI+uNhdBd4v5i0bvzCw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@babel/parser': ^7.15.8
-      '@nuxt/kit': ^3.2.2 || ^4.0.0
-      vue: 2 || 3
-    peerDependenciesMeta:
-      '@babel/parser':
-        optional: true
-      '@nuxt/kit':
-        optional: true
-
-  unplugin@2.3.10:
-    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
-    engines: {node: '>=18.12.0'}
-
   update-browserslist-db@1.1.4:
     resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
     hasBin: true
@@ -3091,46 +2231,15 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  vdirs@0.1.8:
+    resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
+    peerDependencies:
+      vue: ^3.0.11
+
   verkit@0.3.2:
     resolution: {integrity: sha512-zj/ob3UsvJGN0whEAKFp53REA5X66hvffVqoCtVQAakJKnKlH+/PcOfMoFwIG/o4rElqLv/ycAFlx8ZlXUorCg==}
     engines: {node: '>=18.12.0'}
 
-  vite-dev-rpc@1.1.0:
-    resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0
-
-  vite-hot-client@2.1.0:
-    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
-    peerDependencies:
-      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
-
-  vite-plugin-compression@0.5.1:
-    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
-    peerDependencies:
-      vite: '>=2.0.0'
-
-  vite-plugin-inspect@11.3.3:
-    resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@nuxt/kit': '*'
-      vite: ^6.0.0 || ^7.0.0-0
-    peerDependenciesMeta:
-      '@nuxt/kit':
-        optional: true
-
-  vite-plugin-vue-devtools@8.0.5:
-    resolution: {integrity: sha512-p619BlKFOqQXJ6uDWS1vUPQzuJOD6xJTfftj57JXBGoBD/yeQCowR7pnWcr/FEX4/HVkFbreI6w2uuGBmQOh6A==}
-    engines: {node: '>=v14.21.3'}
-    peerDependencies:
-      vite: ^6.0.0 || ^7.0.0-0
-
-  vite-plugin-vue-inspector@5.3.2:
-    resolution: {integrity: sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==}
-    peerDependencies:
-      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
-
   vite@7.2.1:
     resolution: {integrity: sha512-qTl3VF7BvOupTR85Zc561sPEgxyUSNSvTQ9fit7DEMP7yPgvvIGm5Zfa1dOM+kOwWGNviK9uFM9ra77+OjK7lQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3171,23 +2280,14 @@ packages:
       yaml:
         optional: true
 
+  vooks@0.2.12:
+    resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  vue-color-kit@1.0.6:
-    resolution: {integrity: sha512-56oSUp8hGIZ3E4ayZLqTDAb2C7VzaWAC1EVUsZEvPCD2wiiiFd2L2BiEGN1ingfz538sYWKNXxMZQGslqbMiBg==}
-    peerDependencies:
-      vue: ^3.0.5
-
-  vue-draggable-plus@0.6.0:
-    resolution: {integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==}
-    peerDependencies:
-      '@types/sortablejs': ^1.15.0
-      '@vue/composition-api': '*'
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   vue-eslint-parser@10.4.1:
     resolution: {integrity: sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3213,12 +2313,10 @@ packages:
       typescript:
         optional: true
 
-  webpack-virtual-modules@0.6.2:
-    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
-
-  which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
+  vueuc@0.4.66:
+    resolution: {integrity: sha512-hHrZl+0AsrUvqYPBXSXQ2QaSrO3razjeUseLAhJWlOS/Hdfw/Y2MU05fOTP1qn1A3121gMxsHLaEz2V6CkWdTg==}
+    peerDependencies:
+      vue: ^3.0.11
 
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -3229,24 +2327,10 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  write-file-atomic@5.0.1:
-    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  wsl-utils@0.1.0:
-    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
-    engines: {node: '>=18'}
-
-  xe-utils@3.7.9:
-    resolution: {integrity: sha512-LWH6M7g+TKX8P2fqGxDPgJQygiULhbMtpmfxTMxJTUjuUv9y2+I45UCcVLh5AnmJSxDV1xTxsq7G5P9Eid06JQ==}
-
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
 
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-
   yaml-eslint-parser@2.1.0:
     resolution: {integrity: sha512-1zo9KRfp6vIAXBEhWAz09ex3hUwh3T+/6dGbGteHvNseA0Uk4FgQnPES55klZ6cDzSy9FpgKS0D/CoLUvCCj4w==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -3265,9 +2349,6 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  zrender@6.1.0:
-    resolution: {integrity: sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==}
-
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -3327,233 +2408,19 @@ snapshots:
       package-manager-detector: 1.5.0
       tinyexec: 1.0.2
 
-  '@antfu/install-pkg@2.1.0':
-    dependencies:
-      package-manager-detector: 1.8.0
-      tinyexec: 1.3.1
-
-  '@arco-design/color@0.4.0':
-    dependencies:
-      color: 3.2.1
-
-  '@arco-design/web-vue@2.58.0(vue@3.5.23(typescript@5.9.3))':
-    dependencies:
-      '@arco-design/color': 0.4.0
-      b-tween: 0.3.3
-      b-validate: 1.5.3
-      compute-scroll-into-view: 1.0.20
-      dayjs: 1.11.19
-      number-precision: 1.6.0
-      resize-observer-polyfill: 1.5.1
-      scroll-into-view-if-needed: 2.2.31
-      vue: 3.5.23(typescript@5.9.3)
-
-  '@babel/code-frame@7.27.1':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/compat-data@7.28.5': {}
-
-  '@babel/core@7.28.5':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
-      '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.28.5':
-    dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    dependencies:
-      '@babel/types': 7.28.5
-
-  '@babel/helper-compilation-targets@7.27.2':
-    dependencies:
-      '@babel/compat-data': 7.28.5
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.27.0
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.5
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    dependencies:
-      '@babel/types': 7.28.5
-
-  '@babel/helper-plugin-utils@7.27.1': {}
-
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.28.4':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-
   '@babel/parser@7.28.5':
     dependencies:
       '@babel/types': 7.28.5
 
-  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.5)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/template@7.27.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-
-  '@babel/traverse@7.28.5':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@cacheable/memoize@2.0.3':
-    dependencies:
-      '@cacheable/utils': 2.2.0
-
-  '@cacheable/memory@2.0.4':
-    dependencies:
-      '@cacheable/utils': 2.2.0
-      '@keyv/bigmap': 1.1.0(keyv@5.5.3)
-      hookified: 1.12.2
-      keyv: 5.5.3
-
-  '@cacheable/utils@2.2.0':
-    dependencies:
-      keyv: 5.5.3
-
   '@clack/core@1.5.1':
     dependencies:
       fast-wrap-ansi: 0.2.2
@@ -3566,22 +2433,13 @@ snapshots:
       fast-wrap-ansi: 0.2.2
       sisteransi: 1.0.5
 
-  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+  '@css-render/plugin-bem@0.15.14(css-render@0.15.14)':
     dependencies:
-      '@csstools/css-tokenizer': 3.0.4
+      css-render: 0.15.14
 
-  '@csstools/css-tokenizer@3.0.4': {}
-
-  '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+  '@css-render/vue3-ssr@0.15.14(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-tokenizer': 3.0.4
-
-  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0)':
-    dependencies:
-      postcss-selector-parser: 7.1.0
-
-  '@dual-bundle/import-meta-resolve@4.2.1': {}
+      vue: 3.5.23(typescript@5.9.3)
 
   '@e18e/eslint-plugin@0.2.0(eslint@9.39.1)':
     dependencies:
@@ -3589,6 +2447,8 @@ snapshots:
     optionalDependencies:
       eslint: 9.39.1
 
+  '@emotion/hash@0.8.0': {}
+
   '@es-joy/jsdoccomment@0.86.0':
     dependencies:
       '@types/estree': 1.0.8
@@ -3792,54 +2652,14 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@3.1.7':
-    dependencies:
-      '@antfu/install-pkg': 2.1.0
-      '@iconify/types': 2.0.0
-      import-meta-resolve: 4.2.0
-
   '@iconify/vue@5.0.3(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@iconify/types': 2.0.0
       vue: 3.5.23(typescript@5.9.3)
 
-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/remapping@2.3.5':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  '@keyv/bigmap@1.1.0(keyv@5.5.3)':
-    dependencies:
-      hookified: 1.12.2
-      keyv: 5.5.3
-
-  '@keyv/serialize@1.1.1': {}
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
+  '@juggle/resize-observer@3.4.0': {}
 
   '@ota-meshi/ast-token-store@0.3.0': {}
 
@@ -3906,12 +2726,8 @@ snapshots:
 
   '@pkgr/core@0.3.6': {}
 
-  '@polka/url@1.0.0-next.29': {}
-
   '@rolldown/pluginutils@1.0.0-beta.29': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.47': {}
-
   '@rollup/rollup-android-arm-eabi@4.52.5':
     optional: true
 
@@ -4020,8 +2836,6 @@ snapshots:
     dependencies:
       undici-types: 8.9.0
 
-  '@types/sortablejs@1.15.9': {}
-
   '@types/unist@3.0.3': {}
 
   '@types/web-bluetooth@0.0.21': {}
@@ -4117,18 +2931,6 @@ snapshots:
       '@typescript-eslint/types': 8.70.1
       eslint-visitor-keys: 5.0.1
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
-      '@rolldown/pluginutils': 1.0.0-beta.47
-      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-      vue: 3.5.23(typescript@5.9.3)
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitejs/plugin-vue@6.0.1(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
@@ -4158,35 +2960,6 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue/babel-helper-vue-transform-on@1.5.0': {}
-
-  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      '@vue/babel-helper-vue-transform-on': 1.5.0
-      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.5)
-      '@vue/shared': 3.5.23
-    optionalDependencies:
-      '@babel/core': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/core': 7.28.5
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/parser': 7.28.5
-      '@vue/compiler-sfc': 3.5.23
-    transitivePeerDependencies:
-      - supports-color
-
   '@vue/compiler-core@3.5.23':
     dependencies:
       '@babel/parser': 7.28.5
@@ -4223,18 +2996,6 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
-  '@vue/devtools-core@8.0.5(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))':
-    dependencies:
-      '@vue/devtools-kit': 8.0.5
-      '@vue/devtools-shared': 8.0.5
-      mitt: 3.0.1
-      nanoid: 5.1.6
-      pathe: 2.0.3
-      vite-hot-client: 2.1.0(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))
-      vue: 3.5.23(typescript@5.9.3)
-    transitivePeerDependencies:
-      - vite
-
   '@vue/devtools-kit@7.7.7':
     dependencies:
       '@vue/devtools-shared': 7.7.7
@@ -4245,24 +3006,10 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.5
 
-  '@vue/devtools-kit@8.0.5':
-    dependencies:
-      '@vue/devtools-shared': 8.0.5
-      birpc: 2.7.0
-      hookable: 5.5.3
-      mitt: 3.0.1
-      perfect-debounce: 2.0.0
-      speakingurl: 14.0.1
-      superjson: 2.2.5
-
   '@vue/devtools-shared@7.7.7':
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/devtools-shared@8.0.5':
-    dependencies:
-      rfdc: 1.4.1
-
   '@vue/language-core@3.1.3(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.23
@@ -4329,6 +3076,12 @@ snapshots:
 
   acorn@8.18.0: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -4336,61 +3089,38 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.17.1:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.0
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-
   alien-signals@3.0.6: {}
 
-  animate.css@4.1.1: {}
-
-  ansi-regex@5.0.1: {}
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
 
   ansis@4.2.0: {}
 
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
   are-docs-informative@0.0.2: {}
 
   argparse@2.0.1: {}
 
-  array-union@2.1.0: {}
-
-  astral-regex@2.0.0: {}
+  async-validator@4.2.5: {}
 
   asynckit@0.4.0: {}
 
-  axios@0.27.2:
+  axios@1.20.0:
     dependencies:
-      follow-redirects: 1.15.11
-      form-data: 4.0.4
+      follow-redirects: 1.16.1
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
-
-  b-tween@0.3.3: {}
-
-  b-validate@1.5.3: {}
+      - supports-color
 
   balanced-match@1.0.2: {}
 
-  balanced-match@2.0.0: {}
-
   balanced-match@4.0.4: {}
 
   baseline-browser-mapping@2.8.25: {}
 
-  binary-extensions@2.3.0: {}
-
   birpc@2.7.0: {}
 
   boolbase@1.0.0: {}
@@ -4407,6 +3137,7 @@ snapshots:
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
+    optional: true
 
   browserslist@4.27.0:
     dependencies:
@@ -4418,21 +3149,8 @@ snapshots:
 
   builtin-modules@5.0.0: {}
 
-  bundle-name@4.1.0:
-    dependencies:
-      run-applescript: 7.1.0
-
   cac@7.0.0: {}
 
-  cacheable@2.1.1:
-    dependencies:
-      '@cacheable/memoize': 2.0.3
-      '@cacheable/memory': 2.0.4
-      '@cacheable/utils': 2.2.0
-      hookified: 1.12.2
-      keyv: 5.5.3
-      qified: 0.5.1
-
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -4453,18 +3171,6 @@ snapshots:
 
   character-entities@2.0.2: {}
 
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
@@ -4475,30 +3181,12 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
-  color-string@1.9.1:
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.4
-
-  color@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-      color-string: 1.9.1
-
-  colord@2.9.3: {}
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -4509,19 +3197,16 @@ snapshots:
 
   comment-parser@1.4.7: {}
 
-  compute-scroll-into-view@1.0.20: {}
-
   concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
 
   confbox@0.2.2: {}
 
-  convert-source-map@2.0.0: {}
-
   copy-anything@2.0.6:
     dependencies:
       is-what: 3.14.1
+    optional: true
 
   copy-anything@4.0.5:
     dependencies:
@@ -4531,32 +3216,29 @@ snapshots:
     dependencies:
       browserslist: 4.27.0
 
-  cosmiconfig@9.0.0(typescript@5.9.3):
-    dependencies:
-      env-paths: 2.2.1
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-    optionalDependencies:
-      typescript: 5.9.3
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css-functions-list@3.2.3: {}
-
-  css-tree@3.1.0:
+  css-render@0.15.14:
     dependencies:
-      mdn-data: 2.12.2
-      source-map-js: 1.2.1
+      '@emotion/hash': 0.8.0
+      csstype: 3.0.11
 
   cssesc@3.0.0: {}
 
+  csstype@3.0.11: {}
+
   csstype@3.1.3: {}
 
+  date-fns-tz@3.2.0(date-fns@4.4.0):
+    dependencies:
+      date-fns: 4.4.0
+
+  date-fns@4.4.0: {}
+
   dayjs@1.11.19: {}
 
   debug@4.4.3:
@@ -4569,15 +3251,6 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  default-browser-id@5.0.1: {}
-
-  default-browser@5.4.0:
-    dependencies:
-      bundle-name: 4.1.0
-      default-browser-id: 5.0.1
-
-  define-lazy-prop@3.0.0: {}
-
   defu@6.1.4: {}
 
   delayed-stream@1.0.0: {}
@@ -4593,43 +3266,14 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
-  dir-glob@3.0.1:
-    dependencies:
-      path-type: 4.0.0
-
-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
-
-  domelementtype@2.3.0: {}
-
-  domhandler@5.0.3:
-    dependencies:
-      domelementtype: 2.3.0
-
-  domutils@3.2.2:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  echarts@6.1.0:
-    dependencies:
-      tslib: 2.3.0
-      zrender: 6.1.0
-
   electron-to-chromium@1.5.245: {}
 
-  emoji-regex@8.0.0: {}
-
   empathic@2.0.0: {}
 
   empathic@2.1.0: {}
@@ -4641,19 +3285,11 @@ snapshots:
 
   entities@4.5.0: {}
 
-  env-paths@2.2.1: {}
-
   errno@0.1.8:
     dependencies:
       prr: 1.0.1
     optional: true
 
-  error-ex@1.3.4:
-    dependencies:
-      is-arrayish: 0.2.1
-
-  error-stack-parser-es@1.0.5: {}
-
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -4667,7 +3303,7 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.2
+      hasown: 2.0.4
 
   esbuild@0.25.12:
     optionalDependencies:
@@ -4993,24 +3629,14 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-
   esutils@2.0.3: {}
 
+  evtd@0.2.4: {}
+
   exsolve@1.0.7: {}
 
   fast-deep-equal@3.1.3: {}
 
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -5021,18 +3647,10 @@ snapshots:
     dependencies:
       fast-string-truncated-width: 3.0.3
 
-  fast-uri@3.1.0: {}
-
   fast-wrap-ansi@0.2.2:
     dependencies:
       fast-string-width: 3.0.2
 
-  fastest-levenshtein@1.0.16: {}
-
-  fastq@1.19.1:
-    dependencies:
-      reusify: 1.1.0
-
   fault@2.0.1:
     dependencies:
       format: 0.2.2
@@ -5045,10 +3663,6 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.7
 
-  file-entry-cache@10.1.4:
-    dependencies:
-      flat-cache: 6.1.18
-
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -5056,6 +3670,7 @@ snapshots:
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
+    optional: true
 
   find-up-simple@1.0.1: {}
 
@@ -5069,39 +3684,25 @@ snapshots:
       flatted: 3.3.3
       keyv: 4.5.4
 
-  flat-cache@6.1.18:
-    dependencies:
-      cacheable: 2.1.1
-      flatted: 3.3.3
-      hookified: 1.12.2
-
   flatted@3.3.3: {}
 
-  follow-redirects@1.15.11: {}
+  follow-redirects@1.16.1: {}
 
-  form-data@4.0.4:
+  form-data@4.0.6:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
-      hasown: 2.0.2
+      hasown: 2.0.4
       mime-types: 2.1.35
 
   format@0.2.2: {}
 
-  fs-extra@10.1.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.2.0
-      universalify: 2.0.1
-
   fsevents@2.3.3:
     optional: true
 
   function-bind@1.1.2: {}
 
-  gensync@1.0.0-beta.2: {}
-
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -5112,7 +3713,7 @@ snapshots:
       get-proto: 1.0.1
       gopd: 1.2.0
       has-symbols: 1.1.0
-      hasown: 2.0.2
+      hasown: 2.0.4
       math-intrinsics: 1.1.0
 
   get-proto@1.0.1:
@@ -5126,24 +3727,10 @@ snapshots:
 
   github-slugger@2.0.0: {}
 
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob-parent@6.0.2:
     dependencies:
       is-glob: 4.0.3
 
-  global-modules@2.0.0:
-    dependencies:
-      global-prefix: 3.0.0
-
-  global-prefix@3.0.0:
-    dependencies:
-      ini: 1.3.8
-      kind-of: 6.0.3
-      which: 1.3.1
-
   globals@14.0.0: {}
 
   globals@15.15.0: {}
@@ -5152,17 +3739,6 @@ snapshots:
 
   globals@17.12.0: {}
 
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.3
-      ignore: 5.3.2
-      merge2: 1.4.1
-      slash: 3.0.0
-
-  globjoin@0.1.4: {}
-
   globrex@0.1.2: {}
 
   gopd@1.2.0: {}
@@ -5177,24 +3753,22 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
-  hasown@2.0.2:
+  hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
 
-  hookable@5.5.3: {}
+  highlight.js@11.12.0: {}
 
-  hookified@1.12.2: {}
+  hookable@5.5.3: {}
 
   html-entities@2.6.0: {}
 
-  html-tags@3.3.1: {}
-
-  htmlparser2@8.0.2:
+  https-proxy-agent@5.0.1:
     dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      entities: 4.5.0
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
 
   iconv-lite@0.6.3:
     dependencies:
@@ -5215,58 +3789,30 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-meta-resolve@4.2.0: {}
-
   imurmurhash@0.1.4: {}
 
   indent-string@5.0.0: {}
 
-  ini@1.3.8: {}
-
-  is-arrayish@0.2.1: {}
-
-  is-arrayish@0.3.4: {}
-
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
   is-builtin-module@5.0.0:
     dependencies:
       builtin-modules: 5.0.0
 
-  is-docker@3.0.0: {}
-
   is-extglob@2.1.1: {}
 
-  is-fullwidth-code-point@3.0.0: {}
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
-  is-inside-container@1.0.0:
-    dependencies:
-      is-docker: 3.0.0
+  is-number@7.0.0:
+    optional: true
 
-  is-number@7.0.0: {}
-
-  is-plain-object@5.0.0: {}
-
-  is-what@3.14.1: {}
+  is-what@3.14.1:
+    optional: true
 
   is-what@5.5.0: {}
 
-  is-wsl@3.1.0:
-    dependencies:
-      is-inside-container: 1.0.0
-
   isexe@2.0.0: {}
 
-  js-tokens@4.0.0: {}
-
-  js-tokens@9.0.1: {}
-
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
@@ -5284,44 +3830,20 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
-  json-schema-traverse@1.0.0: {}
-
   json-stable-stringify-without-jsonify@1.0.1: {}
 
-  json5@2.2.3: {}
-
   jsonc-eslint-parser@3.3.0:
     dependencies:
       acorn: 8.15.0
       eslint-visitor-keys: 5.0.1
       verkit: 0.3.2
 
-  jsonfile@6.2.0:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
-  keyv@5.5.3:
-    dependencies:
-      '@keyv/serialize': 1.1.1
-
-  kind-of@6.0.3: {}
-
-  known-css-properties@0.36.0: {}
-
-  known-css-properties@0.37.0: {}
-
-  kolorist@1.8.0: {}
-
   less@4.4.2:
     dependencies:
       copy-anything: 2.0.6
@@ -5335,14 +3857,13 @@ snapshots:
       mime: 1.6.0
       needle: 3.3.1
       source-map: 0.6.1
+    optional: true
 
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lines-and-columns@1.2.4: {}
-
   local-pkg@1.1.2:
     dependencies:
       mlly: 1.8.0
@@ -5357,14 +3878,10 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lodash.truncate@4.4.2: {}
+  lodash@4.18.1: {}
 
   longest-streak@3.1.0: {}
 
-  lru-cache@5.1.1:
-    dependencies:
-      yallist: 3.1.1
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -5379,8 +3896,6 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mathml-tag-names@2.1.3: {}
-
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -5494,14 +4009,6 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  mdn-data@2.12.2: {}
-
-  mdn-data@2.25.0: {}
-
-  meow@13.2.0: {}
-
-  merge2@1.4.1: {}
-
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.2.0
@@ -5704,6 +4211,7 @@ snapshots:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
+    optional: true
 
   mime-db@1.52.0: {}
 
@@ -5733,15 +4241,33 @@ snapshots:
 
   module-replacements@2.11.0: {}
 
-  mrmime@2.0.1: {}
-
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
 
-  nanoid@3.3.11: {}
+  naive-ui@2.45.3(vue@3.5.23(typescript@5.9.3)):
+    dependencies:
+      '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
+      '@css-render/vue3-ssr': 0.15.14(vue@3.5.23(typescript@5.9.3))
+      '@types/lodash': 4.17.20
+      '@types/lodash-es': 4.17.12
+      async-validator: 4.2.5
+      css-render: 0.15.14
+      csstype: 3.1.3
+      date-fns: 4.4.0
+      date-fns-tz: 3.2.0(date-fns@4.4.0)
+      evtd: 0.2.4
+      highlight.js: 11.12.0
+      lodash: 4.18.1
+      lodash-es: 4.17.21
+      seemly: 0.3.10
+      treemate: 0.3.11
+      vdirs: 0.1.8(vue@3.5.23(typescript@5.9.3))
+      vooks: 0.2.12(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vueuc: 0.4.66(vue@3.5.23(typescript@5.9.3))
 
-  nanoid@5.1.6: {}
+  nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
 
@@ -5758,27 +4284,12 @@ snapshots:
 
   node-releases@2.0.27: {}
 
-  normalize-path@3.0.0: {}
-
-  nprogress@0.2.0: {}
-
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
-  number-precision@1.6.0: {}
-
   object-deep-merge@2.0.1: {}
 
-  ohash@2.0.11: {}
-
-  open@10.2.0:
-    dependencies:
-      default-browser: 5.4.0
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      wsl-utils: 0.1.0
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -5798,8 +4309,6 @@ snapshots:
 
   package-manager-detector@1.5.0: {}
 
-  package-manager-detector@1.8.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -5810,14 +4319,8 @@ snapshots:
     dependencies:
       parse-statements: 1.0.11
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      error-ex: 1.3.4
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
-  parse-node-version@1.0.1: {}
+  parse-node-version@1.0.1:
+    optional: true
 
   parse-statements@1.0.11: {}
 
@@ -5827,17 +4330,14 @@ snapshots:
 
   path-key@3.1.1: {}
 
-  path-type@4.0.0: {}
-
   pathe@2.0.3: {}
 
   perfect-debounce@1.0.0: {}
 
-  perfect-debounce@2.0.0: {}
-
   picocolors@1.1.1: {}
 
-  picomatch@2.3.1: {}
+  picomatch@2.3.1:
+    optional: true
 
   picomatch@4.0.3: {}
 
@@ -5877,45 +4377,11 @@ snapshots:
     dependencies:
       yaml: 2.9.1
 
-  postcss-html@1.8.0:
-    dependencies:
-      htmlparser2: 8.0.2
-      js-tokens: 9.0.1
-      postcss: 8.5.6
-      postcss-safe-parser: 6.0.0(postcss@8.5.6)
-
-  postcss-media-query-parser@0.2.3: {}
-
-  postcss-resolve-nested-selector@0.1.6: {}
-
-  postcss-safe-parser@6.0.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-safe-parser@7.0.1(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-scss@4.0.9(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-selector-parser@7.1.0:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@7.1.6:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-sorting@9.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-value-parser@4.2.0: {}
-
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -5924,23 +4390,15 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  proxy-from-env@2.1.0: {}
+
   prr@1.0.1:
     optional: true
 
   punycode@2.3.1: {}
 
-  qified@0.5.1:
-    dependencies:
-      hookified: 1.12.2
-
   quansync@0.2.11: {}
 
-  queue-microtask@1.2.3: {}
-
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   readdirp@4.1.2: {}
 
   refa@0.12.1:
@@ -5958,20 +4416,12 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
-  require-from-string@2.0.2: {}
-
   reserved-identifiers@1.2.0: {}
 
-  resize-observer-polyfill@1.5.1: {}
-
   resolve-from@4.0.0: {}
 
-  resolve-from@5.0.0: {}
-
   resolve-pkg-maps@1.0.0: {}
 
-  reusify@1.1.0: {}
-
   rfdc@1.4.1: {}
 
   rollup@4.52.5:
@@ -6002,12 +4452,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.52.5
       fsevents: 2.3.3
 
-  run-applescript@7.1.0: {}
-
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
   safer-buffer@2.1.2:
     optional: true
 
@@ -6022,23 +4466,17 @@ snapshots:
   sax@1.4.3:
     optional: true
 
-  scroll-into-view-if-needed@2.2.31:
-    dependencies:
-      compute-scroll-into-view: 1.0.20
-
   scslre@0.3.0:
     dependencies:
       '@eslint-community/regexpp': 4.12.2
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
-  scule@1.3.0: {}
+  seemly@0.3.10: {}
 
   semver@5.7.2:
     optional: true
 
-  semver@6.3.1: {}
-
   semver@7.7.3: {}
 
   semver@7.8.5: {}
@@ -6049,30 +4487,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  signal-exit@4.1.0: {}
-
-  simple-swizzle@0.2.4:
-    dependencies:
-      is-arrayish: 0.3.4
-
-  sirv@3.0.2:
-    dependencies:
-      '@polka/url': 1.0.0-next.29
-      mrmime: 2.0.1
-      totalist: 3.0.1
-
   sisteransi@1.0.5: {}
 
-  slash@3.0.0: {}
-
-  slice-ansi@4.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      astral-regex: 2.0.0
-      is-fullwidth-code-point: 3.0.0
-
-  sortablejs@1.15.6: {}
-
   source-map-js@1.2.1: {}
 
   source-map@0.6.1:
@@ -6089,130 +4505,10 @@ snapshots:
 
   speakingurl@14.0.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
-
   strip-indent@4.1.1: {}
 
   strip-json-comments@3.1.1: {}
 
-  strip-literal@3.1.0:
-    dependencies:
-      js-tokens: 9.0.1
-
-  stylelint-config-html@1.1.0(postcss-html@1.8.0)(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      postcss-html: 1.8.0
-      stylelint: 16.25.0(typescript@5.9.3)
-
-  stylelint-config-recess-order@7.4.0(stylelint-order@7.0.0(stylelint@16.25.0(typescript@5.9.3)))(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      stylelint: 16.25.0(typescript@5.9.3)
-      stylelint-order: 7.0.0(stylelint@16.25.0(typescript@5.9.3))
-
-  stylelint-config-recommended-scss@16.0.2(postcss@8.5.6)(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      postcss-scss: 4.0.9(postcss@8.5.6)
-      stylelint: 16.25.0(typescript@5.9.3)
-      stylelint-config-recommended: 17.0.0(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-scss: 6.12.1(stylelint@16.25.0(typescript@5.9.3))
-    optionalDependencies:
-      postcss: 8.5.6
-
-  stylelint-config-recommended-vue@1.6.1(postcss-html@1.8.0)(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      postcss-html: 1.8.0
-      semver: 7.7.3
-      stylelint: 16.25.0(typescript@5.9.3)
-      stylelint-config-html: 1.1.0(postcss-html@1.8.0)(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-config-recommended: 17.0.0(stylelint@16.25.0(typescript@5.9.3))
-
-  stylelint-config-recommended@17.0.0(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      stylelint: 16.25.0(typescript@5.9.3)
-
-  stylelint-config-standard-scss@16.0.0(postcss@8.5.6)(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      stylelint: 16.25.0(typescript@5.9.3)
-      stylelint-config-recommended-scss: 16.0.2(postcss@8.5.6)(stylelint@16.25.0(typescript@5.9.3))
-      stylelint-config-standard: 39.0.1(stylelint@16.25.0(typescript@5.9.3))
-    optionalDependencies:
-      postcss: 8.5.6
-
-  stylelint-config-standard@39.0.1(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      stylelint: 16.25.0(typescript@5.9.3)
-      stylelint-config-recommended: 17.0.0(stylelint@16.25.0(typescript@5.9.3))
-
-  stylelint-order@7.0.0(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      postcss: 8.5.6
-      postcss-sorting: 9.1.0(postcss@8.5.6)
-      stylelint: 16.25.0(typescript@5.9.3)
-
-  stylelint-scss@6.12.1(stylelint@16.25.0(typescript@5.9.3)):
-    dependencies:
-      css-tree: 3.1.0
-      is-plain-object: 5.0.0
-      known-css-properties: 0.36.0
-      mdn-data: 2.25.0
-      postcss-media-query-parser: 0.2.3
-      postcss-resolve-nested-selector: 0.1.6
-      postcss-selector-parser: 7.1.0
-      postcss-value-parser: 4.2.0
-      stylelint: 16.25.0(typescript@5.9.3)
-
-  stylelint@16.25.0(typescript@5.9.3):
-    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-tokenizer': 3.0.4
-      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
-      '@dual-bundle/import-meta-resolve': 4.2.1
-      balanced-match: 2.0.0
-      colord: 2.9.3
-      cosmiconfig: 9.0.0(typescript@5.9.3)
-      css-functions-list: 3.2.3
-      css-tree: 3.1.0
-      debug: 4.4.3
-      fast-glob: 3.3.3
-      fastest-levenshtein: 1.0.16
-      file-entry-cache: 10.1.4
-      global-modules: 2.0.0
-      globby: 11.1.0
-      globjoin: 0.1.4
-      html-tags: 3.3.1
-      ignore: 7.0.5
-      imurmurhash: 0.1.4
-      is-plain-object: 5.0.0
-      known-css-properties: 0.37.0
-      mathml-tag-names: 2.1.3
-      meow: 13.2.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-resolve-nested-selector: 0.1.6
-      postcss-safe-parser: 7.0.1(postcss@8.5.6)
-      postcss-selector-parser: 7.1.0
-      postcss-value-parser: 4.2.0
-      resolve-from: 5.0.0
-      string-width: 4.2.3
-      supports-hyperlinks: 3.2.0
-      svg-tags: 1.0.0
-      table: 6.9.0
-      write-file-atomic: 5.0.1
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   superjson@2.2.5:
     dependencies:
       copy-anything: 4.0.5
@@ -6221,31 +4517,14 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-hyperlinks@3.2.0:
-    dependencies:
-      has-flag: 4.0.0
-      supports-color: 7.2.0
-
-  svg-tags@1.0.0: {}
-
   synckit@0.11.13:
     dependencies:
       '@pkgr/core': 0.3.6
 
-  table@6.9.0:
-    dependencies:
-      ajv: 8.17.1
-      lodash.truncate: 4.4.2
-      slice-ansi: 4.0.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
   tapable@2.3.0: {}
 
   tinyexec@1.0.2: {}
 
-  tinyexec@1.3.1: {}
-
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
@@ -6259,6 +4538,7 @@ snapshots:
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
+    optional: true
 
   to-valid-identifier@1.0.0:
     dependencies:
@@ -6269,7 +4549,7 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 5.0.1
 
-  totalist@3.0.1: {}
+  treemate@0.3.11: {}
 
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
@@ -6280,9 +4560,8 @@ snapshots:
       picomatch: 4.0.3
       typescript: 5.9.3
 
-  tslib@2.3.0: {}
-
-  tslib@2.8.1: {}
+  tslib@2.8.1:
+    optional: true
 
   type-check@0.4.0:
     dependencies:
@@ -6296,23 +4575,6 @@ snapshots:
 
   undici-types@8.9.0: {}
 
-  unimport@5.5.0:
-    dependencies:
-      acorn: 8.15.0
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      local-pkg: 1.1.2
-      magic-string: 0.30.21
-      mlly: 1.8.0
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      pkg-types: 2.3.0
-      scule: 1.3.0
-      strip-literal: 3.1.0
-      tinyglobby: 0.2.15
-      unplugin: 2.3.10
-      unplugin-utils: 0.3.1
-
   unist-util-is@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
@@ -6332,59 +4594,6 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
-  universalify@2.0.1: {}
-
-  unplugin-auto-import@20.2.0(@vueuse/core@13.9.0(vue@3.5.23(typescript@5.9.3))):
-    dependencies:
-      local-pkg: 1.1.2
-      magic-string: 0.30.21
-      picomatch: 4.0.3
-      unimport: 5.5.0
-      unplugin: 2.3.10
-      unplugin-utils: 0.3.1
-    optionalDependencies:
-      '@vueuse/core': 13.9.0(vue@3.5.23(typescript@5.9.3))
-
-  unplugin-icons@22.5.0(@vue/compiler-sfc@3.5.23):
-    dependencies:
-      '@antfu/install-pkg': 1.1.0
-      '@iconify/utils': 3.1.7
-      debug: 4.4.3
-      local-pkg: 1.1.2
-      unplugin: 2.3.10
-    optionalDependencies:
-      '@vue/compiler-sfc': 3.5.23
-    transitivePeerDependencies:
-      - supports-color
-
-  unplugin-utils@0.3.1:
-    dependencies:
-      pathe: 2.0.3
-      picomatch: 4.0.3
-
-  unplugin-vue-components@29.2.0(@babel/parser@7.28.5)(vue@3.5.23(typescript@5.9.3)):
-    dependencies:
-      chokidar: 3.6.0
-      debug: 4.4.3
-      local-pkg: 1.1.2
-      magic-string: 0.30.21
-      mlly: 1.8.0
-      tinyglobby: 0.2.15
-      unplugin: 2.3.10
-      unplugin-utils: 0.3.1
-      vue: 3.5.23(typescript@5.9.3)
-    optionalDependencies:
-      '@babel/parser': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  unplugin@2.3.10:
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      acorn: 8.15.0
-      picomatch: 4.0.3
-      webpack-virtual-modules: 0.6.2
-
   update-browserslist-db@1.1.4(browserslist@4.27.0):
     dependencies:
       browserslist: 4.27.0
@@ -6397,71 +4606,13 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  vdirs@0.1.8(vue@3.5.23(typescript@5.9.3)):
+    dependencies:
+      evtd: 0.2.4
+      vue: 3.5.23(typescript@5.9.3)
+
   verkit@0.3.2: {}
 
-  vite-dev-rpc@1.1.0(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)):
-    dependencies:
-      birpc: 2.7.0
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-      vite-hot-client: 2.1.0(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))
-
-  vite-hot-client@2.1.0(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)):
-    dependencies:
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-
-  vite-plugin-compression@0.5.1(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)):
-    dependencies:
-      chalk: 4.1.2
-      debug: 4.4.3
-      fs-extra: 10.1.0
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  vite-plugin-inspect@11.3.3(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)):
-    dependencies:
-      ansis: 4.2.0
-      debug: 4.4.3
-      error-stack-parser-es: 1.0.5
-      ohash: 2.0.11
-      open: 10.2.0
-      perfect-debounce: 2.0.0
-      sirv: 3.0.2
-      unplugin-utils: 0.3.1
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-      vite-dev-rpc: 1.1.0(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  vite-plugin-vue-devtools@8.0.5(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3)):
-    dependencies:
-      '@vue/devtools-core': 8.0.5(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))(vue@3.5.23(typescript@5.9.3))
-      '@vue/devtools-kit': 8.0.5
-      '@vue/devtools-shared': 8.0.5
-      sirv: 3.0.2
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-      vite-plugin-inspect: 11.3.3(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))
-      vite-plugin-vue-inspector: 5.3.2(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1))
-    transitivePeerDependencies:
-      - '@nuxt/kit'
-      - supports-color
-      - vue
-
-  vite-plugin-vue-inspector@5.3.2(vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)):
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
-      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.5)
-      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
-      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
-      '@vue/compiler-dom': 3.5.23
-      kolorist: 1.8.0
-      magic-string: 0.30.21
-      vite: 7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1)
-    transitivePeerDependencies:
-      - supports-color
-
   vite@7.2.1(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(yaml@2.9.1):
     dependencies:
       esbuild: 0.25.12
@@ -6477,15 +4628,12 @@ snapshots:
       sass: 1.93.3
       yaml: 2.9.1
 
-  vscode-uri@3.1.0: {}
-
-  vue-color-kit@1.0.6(vue@3.5.23(typescript@5.9.3)):
+  vooks@0.2.12(vue@3.5.23(typescript@5.9.3)):
     dependencies:
+      evtd: 0.2.4
       vue: 3.5.23(typescript@5.9.3)
 
-  vue-draggable-plus@0.6.0(@types/sortablejs@1.15.9):
-    dependencies:
-      '@types/sortablejs': 1.15.9
+  vscode-uri@3.1.0: {}
 
   vue-eslint-parser@10.4.1(eslint@9.39.1):
     dependencies:
@@ -6520,11 +4668,16 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  webpack-virtual-modules@0.6.2: {}
-
-  which@1.3.1:
+  vueuc@0.4.66(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      isexe: 2.0.0
+      '@css-render/vue3-ssr': 0.15.14(vue@3.5.23(typescript@5.9.3))
+      '@juggle/resize-observer': 3.4.0
+      css-render: 0.15.14
+      evtd: 0.2.4
+      seemly: 0.3.10
+      vdirs: 0.1.8(vue@3.5.23(typescript@5.9.3))
+      vooks: 0.2.12(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
 
   which@2.0.2:
     dependencies:
@@ -6532,21 +4685,8 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  write-file-atomic@5.0.1:
-    dependencies:
-      imurmurhash: 0.1.4
-      signal-exit: 4.1.0
-
-  wsl-utils@0.1.0:
-    dependencies:
-      is-wsl: 3.1.0
-
-  xe-utils@3.7.9: {}
-
   xml-name-validator@5.0.0: {}
 
-  yallist@3.1.1: {}
-
   yaml-eslint-parser@2.1.0:
     dependencies:
       eslint-visitor-keys: 5.0.1
@@ -6558,8 +4698,4 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  zrender@6.1.0:
-    dependencies:
-      tslib: 2.3.0
-
   zwitch@2.0.4: {}
diff --git a/frontend-pc/public/favicon.svg b/frontend-pc/public/favicon.svg
index b7fd708..7b23aaa 100644
--- a/frontend-pc/public/favicon.svg
+++ b/frontend-pc/public/favicon.svg
@@ -1,19 +1,21 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
   <!--
     浏览器页签图标。
-    与 src/assets/images/logo.svg 同一识别符号，但**刻意做减法**：
+    与 src/assets/images/logo.svg 同一识别符号，但**刻意做减法 + 加粗**：
     favicon 实际渲染尺寸只有 16~32px，渐变、高光、内描边到这里全都会糊成噪点，
-    所以只保留「圆角方形 + 填」两个元素 —— 在 1 倍屏下反而是最清楚的。
-    配色仍取腾讯云主色 #0052D9。
+    而 5.9 的白环描边缩到 16px 只剩 1.5px，会被抗锯齿吃掉一半。
+    所以这里：去掉渐变（平铺 #0052D9）、去掉高光与内描边、描边加粗到 7.7。
+    外接盒与 logo.svg 完全一致（四周留白 8.5），两处切换时不会有位移。
+
+    ⚠️ index.html 引的是 /favicon.svg。**这里没有 favicon.ico**，
+       写成 .ico 会 404、页签变成空白（2026-10 修过一次）。
   -->
-  <rect x="0" y="0" width="64" height="64" rx="14" fill="#0052D9" />
-  <text
-    x="32" y="33.5"
-    fill="#FFFFFF"
-    font-size="40"
-    font-weight="700"
-    font-family="Songti SC, STSong, SimSun, Noto Serif SC, serif"
-    text-anchor="middle"
-    dominant-baseline="central"
-  >填</text>
+  <rect x="0" y="0" width="64" height="64" rx="15" fill="#0052D9" />
+
+  <!-- 环（在线 / 汇聚点）：中线半径 15.4 + 描边 7.7 = 外径 38.5，与 logo.svg 同 -->
+  <circle cx="36.25" cy="26.62" r="15.4"
+          fill="none" stroke="#FFFFFF" stroke-width="7.7" stroke-opacity="0.82" />
+
+  <!-- 方（卷宗） -->
+  <rect x="8.5" y="22.65" width="34" height="34" rx="10.4" fill="#FFFFFF" />
 </svg>
diff --git a/frontend-pc/src/App.vue b/frontend-pc/src/App.vue
index 7494249..09f7201 100644
--- a/frontend-pc/src/App.vue
+++ b/frontend-pc/src/App.vue
@@ -1,31 +1,74 @@
-<template>
-  <a-config-provider update-at-scroll>
-    <router-view></router-view>
-    <!-- <template #loading>
-      <img src="/static/images/loading.gif" class="loading-icon" />
-    </template> -->
-  </a-config-provider>
-</template>
-
 <script setup lang="ts">
-import { useTheme } from '@/hooks'
+import { dateZhCN, NConfigProvider, NDialogProvider, NLoadingBarProvider, NMessageProvider, NNotificationProvider, zhCN } from 'naive-ui'
 
-defineOptions({ name: 'App' })
+/**
+ * 根组件：只做一件事 —— 把 Naive UI 的各种 Provider 装好。
+ *
+ * ⚠️ 提示类能力有两套，别混：
+ *   · 组件里用 `useMessage()` / `useDialog()`（从 Provider 注入）；
+ *   · 组件之外（http 拦截器、路由守卫）用 `@/utils/naive` 的离屏实例。
+ *   少了下面这层 Provider，组件里的 `useMessage()` 会直接抛错。
+ */
+const themeOverrides = {
+  common: {
+    // 客户 2026-10-09 明确要求：外壳保持纯白，不要深色菜单/深蓝顶栏
+    primaryColor: '#0052d9',
+    primaryColorHover: '#366ef4',
+    primaryColorPressed: '#003cab',
+    borderRadius: '4px'
+  },
 
-const { initThemeColor } = useTheme()
-initThemeColor()
+  /**
+   * 卡片式外观。
+   *
+   * ⚠️ 描边与阴影**同时**写在 `styles/index.scss` 里（`.n-card.n-card`）：
+   *    Naive 的组件样式由 css-render 在运行时注入，与本文件的先后顺序不保证，
+   *    主题变量负责"正常情况"，CSS 那条负责"顺序不利时兜底"。改样式时两处一起改。
+   */
+  Card: {
+    borderColor: '#e5e8ee',
+    borderRadius: '10px',
+    boxShadow: '0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06)',
+    // 统一左右内边距：Naive 的 small=16 / medium=24 混用会让各页左右不齐
+    paddingSmall: '12px 18px 12px',
+    paddingMedium: '16px 18px 16px'
+  },
 
-// 字典数据：本项目的字典接口属 M1 范围（后端尚未实现），
-// 现在启动就请求会稳定 404 并在控制台刷错误。
-// 页面用的枚举（组织类型 / 租户状态 / 角色名）目前以常量形式定义在
-// @/apis/xt/* 与 @/config/xt-routes 里，不依赖字典。
-// 待后端 `/system/dict/*` 落地后，把下面两行恢复即可。
-// const dictStore = useDictStore()
-// dictStore.getDictData()
+  Button: {
+    // 默认按钮原来用的是 common 的 #e0e0e6 描边 —— 白卡片上几乎看不见，
+    // 这是"按钮不明显"的主因之一，这里加深一档
+    border: '1px solid #d0d5dd',
+    borderHover: '1px solid #0052d9',
+    borderFocus: '1px solid #0052d9',
+    borderPressed: '1px solid #003cab',
+    textColor: '#3f4756'
+  },
+
+  DataTable: {
+    // 表头由 #fafafc 加深到浅灰色带，让"表头 / 表体"和"卡片内容"分得开
+    thColor: '#f7f8fa',
+    thTextColor: '#475467',
+    thFontWeight: '600',
+    borderColor: '#eef1f5'
+  },
+
+  Tabs: {
+    // tab 是"当前视图"的切换器，选中态要压得住下面的白底表格
+    tabFontWeightActive: '600'
+  }
+}
 </script>
 
-<style lang="scss" scoped>
-.loading-icon {
-  width: 30px;
-}
-</style>
+<template>
+  <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides">
+    <NLoadingBarProvider>
+      <NDialogProvider>
+        <NNotificationProvider>
+          <NMessageProvider>
+            <router-view />
+          </NMessageProvider>
+        </NNotificationProvider>
+      </NDialogProvider>
+    </NLoadingBarProvider>
+  </NConfigProvider>
+</template>
diff --git a/frontend-pc/src/apis/area/index.ts b/frontend-pc/src/apis/area/index.ts
deleted file mode 100644
index f526bff..0000000
--- a/frontend-pc/src/apis/area/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type * as T from './type'
-import http from '@/utils/http'
-
-export type * from './type'
-
-/** 获取地区列表 */
-export const getProvinceCityArea = (params: { type: 'province' | 'city' | 'area', code?: string }) => {
-  return http.get<T.AreaItem[]>('/area/getProvinceCityArea', params)
-}
diff --git a/frontend-pc/src/apis/area/type.ts b/frontend-pc/src/apis/area/type.ts
deleted file mode 100644
index f129e36..0000000
--- a/frontend-pc/src/apis/area/type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface AreaItem {
-  label: string
-  code: string
-  children?: AreaItem[]
-}
diff --git a/frontend-pc/src/apis/base.ts b/frontend-pc/src/apis/base.ts
deleted file mode 100644
index cfc05ec..0000000
--- a/frontend-pc/src/apis/base.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import http from '@/utils/http'
-
-interface DefaultP {
-  GetListParams?: Record<string, any>
-  GetDetailParams?: { id: string }
-  AddParams?: Record<string, any>
-  UpdateParams?: Record<string, any>
-  DeleteParams?: { ids: string[] }
-}
-
-// 获取基础接口
-export function getBaseApi<T, P extends DefaultP = DefaultP>(params: { baseUrl: string }) {
-  const { baseUrl } = params
-
-  const baseApi = {
-    // 获取分页列表
-    getList(params?: P['GetListParams'] & { page?: number, size?: number }) {
-      return http.get<PageRes<T[]>>(`${baseUrl}/getList`, params)
-    },
-    // 获取详情
-    getDetail(params: P['GetDetailParams']) {
-      return http.get<T>(`${baseUrl}/getDetail`, params)
-    },
-    // 新增
-    add(params: P['AddParams']) {
-      return http.post<T>(`${baseUrl}/add`, params)
-    },
-    // 修改
-    update(params: P['UpdateParams']) {
-      return http.post<T>(`${baseUrl}/update`, params)
-    },
-    // 删除
-    delete(params: P['DeleteParams']) {
-      return http.post<boolean>(`${baseUrl}/delete`, params)
-    }
-  }
-
-  return baseApi
-}
diff --git a/frontend-pc/src/apis/cate/index.ts b/frontend-pc/src/apis/cate/index.ts
deleted file mode 100644
index c1aa836..0000000
--- a/frontend-pc/src/apis/cate/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type * as T from './type'
-import http from '@/utils/http'
-
-export type * from './type'
-
-/** 获取分类树 */
-export function getCateTree() {
-  return http.get<T.CateTreeItem[]>('/cate/getCateTree')
-}
diff --git a/frontend-pc/src/apis/cate/type.ts b/frontend-pc/src/apis/cate/type.ts
deleted file mode 100644
index 8d97442..0000000
--- a/frontend-pc/src/apis/cate/type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface CateTreeItem {
-  id: string
-  name: string
-  pid: string | null
-  type: string | null
-  disabled: boolean
-  children: CateTreeItem[]
-}
diff --git a/frontend-pc/src/apis/file/index.ts b/frontend-pc/src/apis/file/index.ts
deleted file mode 100644
index 31923bb..0000000
--- a/frontend-pc/src/apis/file/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type * as T from './type'
-import http from '@/utils/http'
-
-export type * from './type'
-
-/** 获取文件列表 */
-export function getFileList(params: { fileType: string | number }) {
-  return http.get<PageRes<T.FileItem[]>>('/file/getFileList', params)
-}
diff --git a/frontend-pc/src/apis/file/type.ts b/frontend-pc/src/apis/file/type.ts
deleted file mode 100644
index fd58c7e..0000000
--- a/frontend-pc/src/apis/file/type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// 文件
-export interface FileItem {
-  id: string
-  type: string
-  name: string
-  extendName: string
-  src: string
-  updateTime: string
-  isDir: boolean
-  filePath: string
-  size: number
-  [propName: string]: any // 一个 interface 中任意属性只能有一个
-}
diff --git a/frontend-pc/src/apis/person/index.ts b/frontend-pc/src/apis/person/index.ts
deleted file mode 100644
index 8b6959d..0000000
--- a/frontend-pc/src/apis/person/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type * as T from './type'
-import { getBaseApi } from '@/apis/base'
-
-export type * from './type'
-
-/** 人物模块 */
-export const baseAPI = getBaseApi<T.ListItem>({ baseUrl: '/person' })
diff --git a/frontend-pc/src/apis/person/type.ts b/frontend-pc/src/apis/person/type.ts
deleted file mode 100644
index bbfae6b..0000000
--- a/frontend-pc/src/apis/person/type.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// 表格项目
-export interface ListItem {
-  id: string
-  name: string
-  account: string
-  avatar: string
-  gender: Gender
-  phone: string
-  email: string
-  createTime: string
-  address: string
-  age: number
-  status: Status
-  hobby: string[]
-  remark: string
-}
diff --git a/frontend-pc/src/apis/system/dept.ts b/frontend-pc/src/apis/system/dept.ts
deleted file mode 100644
index edba807..0000000
--- a/frontend-pc/src/apis/system/dept.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { getBaseApi } from '@/apis/base'
-
-export interface ListItem {
-  id: string
-  name: string
-  sort: number
-  status: Status
-  createTime: string
-  parentId: string
-  children?: ListItem[]
-  description: string
-}
-
-/** 部门模块 */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/dept' })
diff --git a/frontend-pc/src/apis/system/dict.ts b/frontend-pc/src/apis/system/dict.ts
deleted file mode 100644
index 53fc692..0000000
--- a/frontend-pc/src/apis/system/dict.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { SelectOptionData } from '@arco-design/web-vue'
-import { getBaseApi } from '@/apis/base'
-import http from '@/utils/http'
-
-export interface ListItem {
-  id: string
-  createUserString: string
-  createTime: string
-  name: string
-  code: string
-  sort: number
-  status: Status
-  description: string
-}
-
-export type DictDetail = ListItem
-
-export type DictDataItem = {
-  id: string
-  name: string
-  value: string | number
-  sort: number
-  status: Status
-  remark?: string
-  createTime?: string
-}
-
-/** 字典模块 */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/dict' })
-
-/** 字典数据列表 */
-export function getDictDataList(params: { code: string, name?: string, status?: string } & Pagination) {
-  return http.get<PageRes<DictDataItem[]>>('/system/dict/getDictDataList', params)
-}
-
-/** 字典数据详情 */
-export function getDictDataDetail(params: { id: string, code: string }) {
-  return http.get<DictDataItem>('/system/dict/getDictDataDetail', params)
-}
-
-/** 获取字典数据映射 */
-export function getDictData() {
-  return http.get<Record<string, SelectOptionData[]>>('/system/dict/getDictData')
-}
diff --git a/frontend-pc/src/apis/system/menu.ts b/frontend-pc/src/apis/system/menu.ts
deleted file mode 100644
index 689e3f6..0000000
--- a/frontend-pc/src/apis/system/menu.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { getBaseApi } from '@/apis/base'
-import http from '@/utils/http'
-
-export interface ListItem {
-  activeMenu: string
-  alwaysShow: boolean
-  breadcrumb: boolean
-  children: ListItem[]
-  component: string
-  hidden: boolean
-  icon: string
-  id: string
-  keepAlive: boolean
-  parentId: string
-  path: string
-  permission: string
-  redirect: string
-  roles: string[]
-  showInTabs: boolean
-  sort: number
-  status: Status
-  title: string
-  type: 1 | 2 | 3
-  affix: boolean
-}
-
-export interface MenuOptionsItem {
-  id: string
-  title: string
-  children: MenuOptionsItem[]
-}
-
-/** 菜单模块 */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/menu' })
-
-/** 获取角色分配权限菜单树 */
-export function getMenuOptions() {
-  return http.get<MenuOptionsItem[]>('/system/menu/getMenuOptions')
-}
diff --git a/frontend-pc/src/apis/system/role.ts b/frontend-pc/src/apis/system/role.ts
deleted file mode 100644
index 730d497..0000000
--- a/frontend-pc/src/apis/system/role.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { getBaseApi } from '@/apis/base'
-import http from '@/utils/http'
-
-export interface ListItem {
-  id: string
-  createUserString: string
-  createTime: string
-  disabled: boolean
-  name: string
-  code: string
-  sort: number
-  status: Status
-  type: number
-  description: string
-}
-
-/** 角色模块 */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/role' })
-
-/** 获取角色权限 */
-export function getRoleMenuIds(params: { role: string }) {
-  return http.get<string[]>('/system/role/getRoleMenuIds', params)
-}
diff --git a/frontend-pc/src/apis/system/user.ts b/frontend-pc/src/apis/system/user.ts
deleted file mode 100644
index 1ec6607..0000000
--- a/frontend-pc/src/apis/system/user.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { getBaseApi } from '@/apis/base'
-
-export interface ListItem {
-  id: string
-  createUserString: string
-  createTime: string
-  disabled: boolean
-  deptId: string
-  deptName: string
-  username: string
-  nickname: string
-  gender: Gender
-  avatar: string
-  email: string
-  phone: string
-  status: Status
-  type: 1 | 2
-  description: string
-  roleIds: string[]
-  roleNames: string[]
-}
-
-/** 用户模块 */
-export const baseAPI = getBaseApi<ListItem>({ baseUrl: '/system/user' })
diff --git a/frontend-pc/src/apis/test/index.ts b/frontend-pc/src/apis/test/index.ts
deleted file mode 100644
index 48b3a94..0000000
--- a/frontend-pc/src/apis/test/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import http from '@/utils/http'
-
-/** 请求成功的接口 */
-export function getTestSuccess() {
-  return http.get<string>('/test/success')
-}
-
-/** 请求失败的接口 */
-export function getTestFail() {
-  return http.get<any>('/test/fail')
-}
diff --git a/frontend-pc/src/apis/types.ts b/frontend-pc/src/apis/types.ts
new file mode 100644
index 0000000..b62da12
--- /dev/null
+++ b/frontend-pc/src/apis/types.ts
@@ -0,0 +1,20 @@
+/**
+ * 后端响应契约（《03-接口设计》§1.3）与分页形状。
+ *
+ * ⚠️ 成功判定是 `code === 0`，**业务错误也是 HTTP 200**（只有 401/403/429/5xx 用真状态码）。
+ * 这层适配在 `@/utils/http` 里做掉了：调用方拿到的直接是 `data`，
+ * 所以业务代码里几乎不再需要碰 `code`。
+ */
+
+/** 分页列表（后端恒为 { list, total }） */
+export interface PageData<T> {
+  list: T[]
+  total: number
+}
+
+/** 带业务码的错误（调用方按码分支时用，例如租户重名 40011） */
+export interface BizError extends Error {
+  bizCode?: number
+  bizData?: unknown
+  status?: number
+}
diff --git a/frontend-pc/src/apis/user/index.ts b/frontend-pc/src/apis/user/index.ts
deleted file mode 100644
index ae6bd68..0000000
--- a/frontend-pc/src/apis/user/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type * as T from './type'
-import http from '@/utils/http'
-
-export type * from './type'
-
-/** 登录 */
-export function login(data: { username: string, password: string }) {
-  return http.post<T.Login>('/user/login', data)
-}
-
-/** 退出登录 */
-export function logout() {
-  return http.post('/user/logout')
-}
-
-/** 获取用户信息 */
-export const getUserInfo = () => {
-  return http.get<T.UserInfo>('/user/getUserInfo')
-}
-
-/** 获取用户路由信息 */
-export const getUserRoutes = () => {
-  return http.get<T.UserRouteItem[]>('/user/getUserRoutes')
-}
diff --git a/frontend-pc/src/apis/user/type.ts b/frontend-pc/src/apis/user/type.ts
deleted file mode 100644
index 387384a..0000000
--- a/frontend-pc/src/apis/user/type.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export interface UserInfo {
-  id: string
-  nickname: string
-  avatar: string
-  roles: string[]
-  permissions: string[]
-}
-
-export interface Login {
-  token: string
-}
-
-export interface UserRouteItem {
-  activeMenu: string
-  alwaysShow: boolean
-  breadcrumb: boolean
-  children: UserRouteItem[]
-  component: string
-  hidden: boolean
-  icon: string
-  id: string
-  keepAlive: boolean
-  parentId: string
-  path: string
-  permission: string
-  redirect: string
-  roles: string[]
-  showInTabs: boolean
-  sort: number
-  status: Status
-  title: string
-  type: 1 | 2 | 3
-  affix: boolean
-}
diff --git a/frontend-pc/src/apis/xt/audit.ts b/frontend-pc/src/apis/xt/audit.ts
index 9389715..2406b57 100644
--- a/frontend-pc/src/apis/xt/audit.ts
+++ b/frontend-pc/src/apis/xt/audit.ts
@@ -17,11 +17,16 @@
  *
  * ## 状态与分级（不要按直觉写分支）
  *
- * - 填报单状态：`1` 草稿 / `2` 待初审 / `3` 待终审（初审已过）/ `4` 已驳回 / `5` 已通过
+ * - **填报单状态**（`collect_submission.status`，权威见后端 `CollectSubmission` 的字段注释）：
+ *   `0` 草稿 / `1` 待初审 / `2` 待终审 / `3` 已通过 / `4` 已驳回 / `5` 已归档
+ * - **名册行状态**（`collect_roster.submit_status`）是**另一套枚举**，别混用：
+ *   `0` 未提交 / `1` 草稿 / `2` 待审 / `3` 已通过 / `4` 已驳回（见 `apis/xt/roster.ts`）
  * - 卡片分级 `level`：**只有 0 / 2 / 3**，没有 1（写了"信息级"的分支永远不会触发）
  *
- * ⚠️ 上面这两个数字口径**以服务端返回的 `statusText` 为准**：界面优先显示 `statusText`，
- * 数字只用于选色。这样即便枚举有调整，界面也不会说错话。
+ * ⚠️ 两套枚举的**起点不同**（填报单从"草稿"起、名册从"未提交"起），
+ *    照抄对方必然整体错位一格 —— 本文件曾把填报单写成 `1 草稿 / 2 待初审 / 3 待终审 / 4 已驳回 / 5 已通过`，
+ *    结果是**状态文案被服务端 `statusText` 兜住了，但 tag 的颜色永远取自错的本地表**
+ *    （"已通过"显示成待终审的蓝）。所以：文案优先用服务端的 `statusText`，本地表只负责选色。
  */
 import http from '@/utils/http'
 import { actingTenantConfig } from './acting-tenant'
@@ -34,6 +39,22 @@ export function bizCodeOf(e: unknown): number | undefined {
   return (e as BizError)?.bizCode
 }
 
+/**
+ * 填报单状态 → 文案与色词（`tagOf()` 会把它翻成 `n-tag` 的 type）。
+ *
+ * ⚠️ 与 `roster.ts` 的 `SUBMIT_STATUS`（名册行口径）**不是同一套**：起点差一格。
+ *    改这里之前先看文件头那段说明与后端 `CollectSubmission` 的字段注释。
+ *    界面文案仍以服务端 `statusText` 为准，本表只负责**选色**与兜底文案。
+ */
+export const SUBMISSION_STATUS: Record<number, { text: string, color: string }> = {
+  0: { text: '草稿', color: 'gray' },
+  1: { text: '待初审', color: 'orange' },
+  2: { text: '待终审', color: 'arcoblue' },
+  3: { text: '已通过', color: 'green' },
+  4: { text: '已驳回', color: 'red' },
+  5: { text: '已归档', color: 'gray' }
+}
+
 // ── 待办列表（§11.1 / §10.2）────────────────────
 
 export interface AuditTodo {
diff --git a/frontend-pc/src/apis/xt/cleanup.ts b/frontend-pc/src/apis/xt/cleanup.ts
deleted file mode 100644
index c99be84..0000000
--- a/frontend-pc/src/apis/xt/cleanup.ts
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * 历史数据整理器（《03-接口设计》§13.2）。
- *
- * ## 这个功能的"卖点"就是报告里的一句话
- *
- * 契约里写明：**报告里最重要的一句话是 `autoHandled / needManual`** ——
- * 「112 个文件里 90 个系统全自动处理，只有 1 个必须你亲自判断」。
- * 所以这一屏的核心不是"进度条"，而是**那两个数字与重点清单**。
- * 进度只是等待时的安抚，报告才是客户付钱的理由。
- *
- * ## 几个界面必须区分清楚的状态
- *
- * | status | 界面该显示什么 |
- * |---|---|
- * | `0` 排队 / `1` 解析中 / `2` 处理中 | 进度条 + 已处理的文件数；**不给"下载"按钮**（还没有产物） |
- * | `3` 已完成 | 报告 + 下载结果包 + 导入为正式任务 |
- * | `4` 失败 | **`errorMsg` 必须显示出来** |
- *
- * ⚠️ 失败时 `errorMsg` 是唯一能让用户知道"为什么"的东西。常见原因是
- * "传了不是 zip 的文件"与"包里单个文件超过 50MB" —— 这两条都在服务端有明确文案，
- * 界面要做的是**把它原样显示**，而不是笼统说"整理失败"。
- *
- * ## 为什么 `rosterTaskId` 这个参数要在界面上强调
- *
- * 契约 §13.2 的原话：**没有名册就只能做文件名规范化；有名单才能做证件号校验、
- * 疑似串档检测** —— 而"疑似串档 1 例"正是报告里最有价值的一条。
- * 也就是说：关联名册与不关联，"体检报告"是两份完全不同的东西。
- * 界面必须把这件事说在**上传之前**，而不是等报告出来发现那两项全是 0。
- */
-
-import { getToken } from '@/utils/auth'
-import http from '@/utils/http'
-
-/** 整理任务状态。 */
-export type CleanupStatus = 0 | 1 | 2 | 3 | 4
-
-export interface CleanupJobVO {
-  id: number
-  jobName: string
-  /** `1` 压缩包 / `2` 文件夹 / `3` 云盘链接（一期只支持 `1`）。 */
-  sourceType: number
-  /** 关联的已有名册任务。**有关联才有证件号校验与串档检测**。 */
-  rosterTaskId?: number | null
-  status: CleanupStatus
-  statusText: string
-  progress: number
-  totalFiles?: number | null
-  processedFiles?: number | null
-  parsedStudents?: number | null
-  parsedMaterials?: number | null
-  rawSizeBytes?: number | null
-  finalSizeBytes?: number | null
-  /** 形如 `91.5%`；没算出来时是 `—`（**不是 0%** —— 0% 看起来像"没压缩"）。 */
-  compressRatio?: string
-  resultPath?: string | null
-  /** 导入成正式任务后的任务 id（有值就说明已导入，导入是幂等的）。 */
-  targetTaskId?: number | null
-  errorMsg?: string | null
-  createTime?: string
-  finishTime?: string | null
-}
-
-export interface CleanupJobPage {
-  list: CleanupJobVO[]
-  total: number
-}
-
-/** 报告汇总。 */
-export interface ReportSummary {
-  totalFiles: number
-  nameInvalid: number
-  sizeExceeded: number
-  formatConverted: number
-  idcardMismatch: number
-  idcardAutoFixed: number
-  idcardNeedConfirm: number
-  /** 疑似串档：某人的**多项**材料证件号与名册均不同、且彼此一致 → 整个文件夹可能被换过。 */
-  crossFileSuspected: number
-  lowResolution: number
-  orphanImages: number
-}
-
-export interface Highlight {
-  type: string
-  /** `1` 提示 / `2` 警告 / `3` 必须人工。 */
-  level: number
-  rosterId?: number | null
-  realName?: string | null
-  title: string
-  materialCode?: string | null
-  detail?: string | null
-  suggestion?: string | null
-}
-
-export interface NameFixSample {
-  original: string
-  fixed: string
-  rule?: string
-}
-
-export interface IdcardConflict {
-  rosterId?: number | null
-  realName?: string | null
-  rosterValue?: string | null
-  fileNameValue?: string | null
-  verdict: string
-  verdictText: string
-}
-
-export interface CleanupReportVO {
-  jobId: number
-  summary: ReportSummary
-  /** 系统全自动处理了多少（**服务端算的**，不让前端去减）。 */
-  autoHandled: number
-  /** 必须人工判断的（串档 + 无法归位 + 待确认的证件号冲突）。 */
-  needManual: number
-  highlights: Highlight[]
-  nameFixedSamples: NameFixSample[]
-  idcardConflicts: IdcardConflict[]
-}
-
-export interface CleanupImportVO {
-  taskId: number
-  rosterCount: number
-  fileCount: number
-}
-
-export function getCleanupJobs(params: {
-  status?: number
-  keyword?: string
-  pageNum?: number
-  pageSize?: number
-}) {
-  return http.get<CleanupJobPage>('/cleanup/jobs', params)
-}
-
-export function getCleanupJob(id: number) {
-  return http.get<CleanupJobVO>(`/cleanup/jobs/${id}`)
-}
-
-export function getCleanupReport(id: number) {
-  return http.get<CleanupReportVO>(`/cleanup/jobs/${id}/report`)
-}
-
-/**
- * 创建整理任务（multipart）。
- *
- * ⚠️ 超时给到 600s：大包的解压 + 解析 + 重新打包都在服务端同步做，
- * 而默认 30s 在几百 MB 的包上必然超时 —— 超时的表现是"点了没反应"，
- * 用户会重复点，于是同一个包被整理好几次。
- */
-export function createCleanupJob(file: File, opts: {
-  jobName: string
-  rosterTaskId?: number
-  namingTemplate?: string
-}) {
-  const fd = new FormData()
-  fd.append('file', file)
-  fd.append('jobName', opts.jobName)
-  fd.append('sourceType', '1')
-  if (opts.rosterTaskId !== undefined) {
-    fd.append('rosterTaskId', String(opts.rosterTaskId))
-  }
-  if (opts.namingTemplate) {
-    fd.append('namingTemplate', opts.namingTemplate)
-  }
-  // 不要手动设 Content-Type：axios 会带着 boundary 自己设
-  return http.request<{ jobId: number, status: number, estimatedSeconds: number }>({
-    method: 'post',
-    url: '/cleanup/jobs',
-    data: fd,
-    timeout: 600 * 1000
-  })
-}
-
-/**
- * 导入为正式任务。
- *
- * ⚠️ 这条路**不能带 `importFiles`**：一期还做不到把整理结果里的文件自动挂到填报单，
- * 而服务端会**如实拒绝**（`40044`）而不是安静忽略。界面因此不要给这个勾选项 ——
- * 给了一个必然报错的选项，用户只会以为系统坏了。
- */
-export function importCleanupJob(id: number, data: {
-  taskName: string
-  collectMode?: number
-  batchNo: string
-  importRoster?: boolean
-  majorName?: string
-}) {
-  return http.post<CleanupImportVO>(`/cleanup/jobs/${id}/import`, {
-    collectMode: 1,
-    importRoster: true,
-    ...data
-  })
-}
-
-/**
- * 真正下载整理结果包。
- *
- * ⚠️ 必须带 token 取 blob 再本地触发下载：`/cleanup/jobs/{id}/result` 是要登录的，
- * 直接 `window.open` / `<a href>` 都不会带 `Authorization` 头，
- * 用户会看到一个 401 页面（或"下载没反应"）。
- *
- * 放在 api 层而不是页面里，与导出中心的 `downloadExportFile` 保持同一写法 ——
- * 同一件事在一个项目里有两处实现，改的时候一定会漏一处。
- */
-export async function downloadCleanupResult(id: number, jobName?: string): Promise<void> {
-  const token = getToken()
-  const base = import.meta.env.VITE_API_PREFIX || '/api/v1'
-  const res = await fetch(`${base}/cleanup/jobs/${id}/result`, {
-    headers: token ? { Authorization: `Bearer ${token}` } : {}
-  })
-  if (!res.ok) {
-    throw new Error(`下载失败（HTTP ${res.status}）`)
-  }
-  const blob = await res.blob()
-  const href = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = href
-  a.download = `${jobName || '整理结果'}-${id}.zip`
-  document.body.appendChild(a)
-  a.click()
-  a.remove()
-  URL.revokeObjectURL(href)
-}
-
-/** 状态 → Tag 颜色（Arco 的 status 只认 normal/warning/success/danger）。 */
-export function statusColor(status: CleanupStatus): 'normal' | 'warning' | 'success' | 'danger' {
-  switch (status) {
-    case 3:
-      return 'success'
-    case 4:
-      return 'danger'
-    case 1:
-    case 2:
-      return 'warning'
-    default:
-      return 'normal'
-  }
-}
-
-/** 重点条目的级别 → Tag 颜色。`3` 是"必须人工"，用红色。 */
-export function levelColor(level: number): 'normal' | 'warning' | 'danger' {
-  if (level >= 3) return 'danger'
-  if (level === 2) return 'warning'
-  return 'normal'
-}
-
-/**
- * 报告里"最有说服力的一句话"。
- *
- * 契约的原话就是这个格式：**「112 个文件里 90 个系统全自动处理，
- * 只有 1 个必须你亲自判断」**。所以这句话由前端按同一口径拼 ——
- * 但它拼的是**服务端算好的两个数**，不是自己减出来的
- * （前端减出来的数字早晚会与服务端分叉）。
- */
-export function headlineOf(report: CleanupReportVO): string {
-  const total = report.summary.totalFiles
-  const need = report.needManual
-  return `${total} 个文件里，${report.autoHandled} 个系统全自动处理，`
-    // ⚠️ 不要在这里写 Markdown 的 `**粗体**`：它落在**文本节点**里，
-    //    页面上会原样显示两个星号（要粗体得让调用方用富文本渲染）
-    + `${need > 0 ? `只有 ${need} 个必须你亲自判断` : '没有需要你判断的'}`
-}
diff --git a/frontend-pc/src/apis/xt/export-task.ts b/frontend-pc/src/apis/xt/export-task.ts
index 6097654..71cc6ed 100644
--- a/frontend-pc/src/apis/xt/export-task.ts
+++ b/frontend-pc/src/apis/xt/export-task.ts
@@ -191,7 +191,7 @@ export async function downloadExportFile(id: number, fileIndex = 0): Promise<voi
   const base = import.meta.env.VITE_API_PREFIX || '/api/v1'
   // 服务端回的是本服务的绝对路径（/api/v1/exports/{id}/file?...），
   // 去掉前缀再拼 base，避免出现 /api/v1/api/v1/... 这种双前缀
-  const res = await fetch(`${base}${info.data.url.replace('/api/v1', '')}`, {
+  const res = await fetch(`${base}${info.url.replace('/api/v1', '')}`, {
     headers: token ? { Authorization: `Bearer ${token}` } : {}
   })
   if (!res.ok) {
@@ -201,7 +201,7 @@ export async function downloadExportFile(id: number, fileIndex = 0): Promise<voi
   const href = URL.createObjectURL(blob)
   const a = document.createElement('a')
   a.href = href
-  a.download = info.data.fileName
+  a.download = info.fileName
   document.body.appendChild(a)
   a.click()
   a.remove()
diff --git a/frontend-pc/src/apis/xt/join-request.ts b/frontend-pc/src/apis/xt/join-request.ts
deleted file mode 100644
index 2d9a623..0000000
--- a/frontend-pc/src/apis/xt/join-request.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * 名单加入申请接口（《03-接口设计》§8.7.3 ~ §8.7.5，FR-509）。
- *
- * ## 这条通道的边界（界面文案要照着说）
- *
- * 它**只解决"进名单"，不绕过门禁** —— 申请期间学生仍然不能填报。
- * 所以审批通过之后，界面要告诉管理员"学生返回重新核验就能进"，
- * 而不是"他已经可以填了"。
- *
- * ## 两个刻意的设计，前端要照做
- *
- * 1. **没有批量通过/一键全通过接口**（契约 §8.7.5 的取舍）：身份认定环节的
- *    误操作代价极高 —— 放错一个人进名单，等于让一个不是这批的人拿到认定资格。
- *    所以这里只有逐条通过、逐条驳回（驳回还必须填原因）。
- * 2. **`notifySent` 恒为 false**：通知渠道（M5-12）还没做，
- *    服务端如实返回 false，界面必须显示"请口头/群里告知学生"，不能假装通知过了。
- */
-import http from '@/utils/http'
-
-export interface JoinDupHint {
-  type: string
-  taskName: string
-  realName: string
-}
-
-export interface JoinAdminItem {
-  requestId: number
-  taskId: number
-  taskName: string | null
-  realName: string
-  idCardMask: string
-  phoneMask: string | null
-  orgHint: string | null
-  reason: string | null
-  /** `0` 待审 / `1` 已通过 / `2` 已驳回 */
-  status: number
-  statusText: string
-  createTime: string | null
-  waitHours: number | null
-  /** 该证件号在**其他任务**的名册里出现过（帮判断是不是本校学生） */
-  duplicateHint: JoinDupHint | null
-  rosterId: number | null
-}
-
-export interface JoinAdminList {
-  list: JoinAdminItem[]
-  total: number
-  counts: { pending: number, approved: number, rejected: number }
-  alert: { level: number, text: string } | null
-}
-
-export interface JoinListQuery {
-  taskId?: number
-  /** 默认 0（待审） */
-  status?: number
-  keyword?: string
-  pageNum?: number
-  pageSize?: number
-}
-
-export function getJoinRequests(params: JoinListQuery = {}) {
-  return http.get<JoinAdminList>('/roster/join-requests', params)
-}
-
-export interface JoinApproveReq {
-  /** 指定班级；不传则用学生的自述班级匹配组织名（匹配不上会要求手选） */
-  orgId: number
-  /** 修正姓名（管理员核对后可改） */
-  realName?: string
-  /** 修正证件号 */
-  idCardNo?: string
-}
-
-export interface JoinApproveResult {
-  requestId: number
-  status: number
-  rosterId: number
-  rosterCreated: boolean
-  /** ⚠️ 恒为 false：通知没发出去，需要人工告知 */
-  notifySent: boolean
-  /** true = 已绑定，学生返回重新核验就能直接进 */
-  canFillNow: boolean
-}
-
-export function approveJoinRequest(id: number, data: JoinApproveReq) {
-  return http.post<JoinApproveResult>(`/roster/join-requests/${id}/approve`, data)
-}
-
-export interface JoinRejectReq {
-  /** **必填** —— 会原样给学生看 */
-  reason: string
-  reasonCode?: string
-}
-
-export function rejectJoinRequest(id: number, data: JoinRejectReq) {
-  return http.post<{ requestId: number, status: number, notifySent: boolean }>(
-    `/roster/join-requests/${id}/reject`,
-    data
-  )
-}
-
-/** 申请状态。 */
-export const JOIN_STATUS: Record<number, { text: string, color: string }> = {
-  0: { text: '待审核', color: 'orange' },
-  1: { text: '已通过', color: 'green' },
-  2: { text: '已驳回', color: 'red' }
-}
-
-/** 驳回快捷原因码（契约 §8.7.5）。 */
-export const REJECT_REASON_CODES = [
-  { code: 'NOT_THIS_SCHOOL', label: '不是本校学生' },
-  { code: 'INFO_MISMATCH', label: '信息与报名资料不符' },
-  { code: 'NOT_IN_SCOPE', label: '不在本次认定范围' },
-  { code: 'OTHER', label: '其他原因（请在说明里写清）' }
-]
-
-/** 关键错误码 → 一句"接下来怎么办"。 */
-export const JOIN_ERROR_HINT: Record<number, string> = {
-  40040: '这条申请已经被别人处理过了（刷新列表即可看到最新状态）。',
-  40041: '名册里已经有这个证件号了 —— 可能刚被老师手工加进去，去「名单管理」核对一下。',
-  40042: '已通过的申请不能驳回。要撤销请到「名单管理」里删掉那条名册项。',
-  40037: '该学生申请次数已达上限（每任务 2 次）。',
-  40038: '该学生已有一条待审申请。',
-  40039: '该证件号已在名册中 —— 学生只是姓名打错了，让他回去重新核验即可。'
-}
diff --git a/frontend-pc/src/apis/xt/log.ts b/frontend-pc/src/apis/xt/log.ts
index 58c8f67..97edb3f 100644
--- a/frontend-pc/src/apis/xt/log.ts
+++ b/frontend-pc/src/apis/xt/log.ts
@@ -106,8 +106,14 @@ export const OPERATION_ACTIONS: Array<{ value: string, label: string }> = [
   { value: 'PROXY_UPLOAD', label: '代传材料' },
   { value: 'VIEW_IDCARD_FULL', label: '查看完整证件号' },
   { value: 'CONFIG_COMPRESS', label: '改压缩配置' },
-  { value: 'JOIN_APPROVE', label: '通过加入申请' },
-  { value: 'JOIN_REJECT', label: '驳回加入申请' }
+  // ⚠️ 2026-10 需求收敛：`JOIN_APPROVE` / `JOIN_REJECT` 两个动作码已随「加入申请」模块删除，
+  //    这里不再列出（库里若有历史行，`actionText` 会原样回显那个码，不会显示成空白）。
+  { value: 'CREATE_ROLE', label: '新建角色' },
+  { value: 'UPDATE_ROLE', label: '改角色' },
+  { value: 'DELETE_ROLE', label: '删除角色' },
+  { value: 'GRANT_ROLE', label: '改角色授权' },
+  { value: 'UPDATE_ROLE_MENU', label: '改角色菜单' },
+  { value: 'TOGGLE_ROLE', label: '停用/启用角色' }
 ]
 
 export function actionText(v?: string) {
diff --git a/frontend-pc/src/apis/xt/notify.ts b/frontend-pc/src/apis/xt/notify.ts
index bc50f39..1869c70 100644
--- a/frontend-pc/src/apis/xt/notify.ts
+++ b/frontend-pc/src/apis/xt/notify.ts
@@ -99,8 +99,10 @@ export const BIZ_TYPES: Array<{ value: number, label: string }> = [
   { value: 3, label: '驳回通知' },
   { value: 4, label: '审核通过' },
   { value: 5, label: '催报' },
-  { value: 6, label: '导出完成' },
-  { value: 7, label: '加入审批' }
+  { value: 6, label: '导出完成' }
+  // ⚠️ 2026-10 需求收敛：`7 加入审批` 已随「加入申请」模块删除。
+  //    后端 `CollectMessage.BIZ_JOIN_AUDIT` 也删了 —— 这里留着它会让运营
+  //    在下拉里选一个永远查不到记录的类型。
 ]
 
 export function bizTypeText(v?: string | number) {
diff --git a/frontend-pc/src/apis/xt/org.ts b/frontend-pc/src/apis/xt/org.ts
index 56a4fa8..348dda7 100644
--- a/frontend-pc/src/apis/xt/org.ts
+++ b/frontend-pc/src/apis/xt/org.ts
@@ -34,8 +34,11 @@ export interface OrgUpsertReq {
 
 /**
  * 组织树。
- * @param withCount 是否附带每节点学生数（会多一次聚合查询，列表页按需开）
- * @param tenantId **仅平台运营**：代管哪个学校的组织（见 `acting-tenant.ts`）。
+ *
+ * @param params 查询条件（下面三个字段都可选；整体可省略）
+ * @param params.withCount 是否附带每节点学生数（会多一次聚合查询，列表页按需开）
+ * @param params.rootId 只取某个节点为根的子树
+ * @param params.tenantId **仅平台运营**：代管哪个学校的组织（见 `acting-tenant.ts`）。
  *        不传 = 不代管 —— 此时服务端只会返回平台自己租户的组织（空树），
  *        **不会**再把所有租户的组织混在一起端出来。
  */
diff --git a/frontend-pc/src/apis/xt/role.ts b/frontend-pc/src/apis/xt/role.ts
new file mode 100644
index 0000000..100ba94
--- /dev/null
+++ b/frontend-pc/src/apis/xt/role.ts
@@ -0,0 +1,183 @@
+/**
+ * 角色与授权（二期）。
+ *
+ * ## 三条口径（界面上要按它写，不要"看起来更合理"地改）
+ *
+ * 1. **内置角色只读**：`roleType === 1` 的角色可以看权限矩阵，但改不了 ——
+ *    它的权限由后端代码决定（`BuiltinRole`）。一次误操作就能把管理员锁在系统外，
+ *    而这类错误不可逆。所以界面上的正确做法是**新建一个自定义角色**，而不是改内置的。
+ * 2. **看得见 ≠ 有权限**：`menus` 只决定左侧出现哪些入口；真正的访问控制是
+ *    后端对权限码的校验（绕过前端只会拿到 `40301`）。
+ * 3. **数据范围（本人/本班/本院系/全租户）本期只展示**：它目前由"拿到了哪些权限码 +
+ *    任务里被指派了哪些班"共同决定，做成可配要先把散在各处的判据收口（下一批）。
+ *    所以这里的 `dataScope` 是只读展示 —— 让界面出现一个"改了不生效"的开关更糟。
+ *
+ * ## 改完立即生效
+ *
+ * 服务端在每次写授权后会清掉该角色的缓存，所以**不需要重新登录**：
+ * 改完刷新页面即可看到按钮/菜单的变化。
+ */
+import http from '@/utils/http'
+import { actingTenantConfig } from './acting-tenant'
+
+/** 角色（内置或自定义） */
+export interface RoleVO {
+  id: number
+  roleCode: string
+  roleName: string
+  /** 1 内置（只读）/ 2 自定义 */
+  roleType: number
+  /** 1 平台运营 / 2 学校管理员 / 3 班主任 / 4 学生 —— 账号的用户类型由它推导 */
+  userType: number
+  /** 1 全平台 / 2 本租户 / 3 本组织及下级 / 4 仅本人（本期只展示） */
+  dataScope: number
+  /** 0 停用 / 1 正常 */
+  status: number
+  sortNo?: number
+  remark?: string | null
+  /** 有多少账号在用（删除前的依据：大于 0 就删不掉） */
+  userCount: number
+  /** 能否编辑 / 删除 / 停用（内置角色恒 false） */
+  editable: boolean
+  /**
+   * 能否发给账号。
+   *
+   * ⚠️ 与 `editable` 是两件事：内置的「平台运营」角色**看得见**（列表里列出来），
+   * 但在学校租户里**发不出去**（服务端 40301 —— 拿到它会直接越权到平台级）。
+   * 所以账号页的角色选项要按它过滤，而不是让人选完再收到一个错误。
+   */
+  assignable: boolean
+  permCodes: string[]
+  menus: string[]
+}
+
+/** 权限码（角色授权界面的勾选项） */
+export interface PermVO {
+  code: string
+  label: string
+  /** PC / MP / BOTH */
+  platform: string
+  /** true = 平台级权限，学校租户不可授予（界面上要禁用勾选） */
+  platformOnly: boolean
+}
+
+/** 权限码按分组返回（30 条平铺成一张表没人看得懂） */
+export interface PermGroupVO {
+  group: string
+  items: PermVO[]
+}
+
+export interface RoleCreateReq {
+  roleCode: string
+  roleName: string
+  userType: number
+  remark?: string
+  permCodes: string[]
+  menus: string[]
+}
+
+export interface RoleUpdateReq {
+  roleName: string
+  userType: number
+  remark?: string
+}
+
+/** 账号页用的角色选项（内置 + 自定义都在这份里） */
+export interface RoleOption {
+  value: string
+  label: string
+  userType: number
+  roleType: number
+  status: number
+}
+
+export function getRoles(tenantId?: number | null) {
+  return http.get<RoleVO[]>('/roles', undefined, actingTenantConfig(tenantId))
+}
+
+export function getPermissions() {
+  return http.get<PermGroupVO[]>('/permissions')
+}
+
+export function createRole(data: RoleCreateReq) {
+  return http.post<number>('/roles', data)
+}
+
+export function updateRole(id: number, data: RoleUpdateReq) {
+  return http.put<void>(`/roles/${id}`, data)
+}
+
+export function deleteRole(id: number) {
+  return http.delete<void>(`/roles/${id}`)
+}
+
+/** 覆盖式设置权限码（改完立即生效，不必重新登录） */
+export function setRolePermissions(id: number, permCodes: string[]) {
+  return http.put<void>(`/roles/${id}/permissions`, { permCodes })
+}
+
+/** 覆盖式设置可见菜单 */
+export function setRoleMenus(id: number, menus: string[]) {
+  return http.put<void>(`/roles/${id}/menus`, { menus })
+}
+
+export function setRoleStatus(id: number, status: number) {
+  return http.put<void>(`/roles/${id}/status`, undefined, { params: { status } })
+}
+
+/** 角色列表 → 账号页的下拉/勾选项（只取**能发给账号**的启用角色） */
+export async function getRoleOptions(tenantId?: number | null): Promise<RoleOption[]> {
+  const res = await getRoles(tenantId)
+  return (res ?? [])
+    .filter((r) => r.status === 1 && r.assignable !== false)
+    .map((r) => ({
+      value: r.roleCode,
+      label: r.roleName,
+      userType: r.userType,
+      roleType: r.roleType,
+      status: r.status
+    }))
+}
+
+/**
+ * 从所选角色推导用户类型。
+ *
+ * 用户类型与角色是**一对一绑定**的（账号的 `userType` 由它决定），所以界面上不让用户手选：
+ * 分别选就会产生"学生 + 学校管理员"这种自相矛盾的账号，而服务端还会因此拒掉整个提交。
+ *
+ * ⚠️ 判据来自**接口返回的角色**（`RoleVO.userType`），不是前端写死的映射表 ——
+ * 二期之后可选角色里还有租户自己建的那些，写死的表推不出它们的类型。
+ *
+ * @returns 同一类时返回那个类型；跨类（如「班主任 + 审核员」）或选不出时返回 null
+ */
+export function deriveUserType(roleCodes: string[], options: RoleOption[]): number | null {
+  const types = new Set<number>()
+  for (const code of roleCodes) {
+    const opt = options.find((o) => o.value === code)
+    if (opt) {
+      types.add(opt.userType)
+    }
+  }
+  return types.size === 1 ? [...types][0] : null
+}
+
+/** 用户类型中文名（与契约 §2.7 / 后端 BuiltinRole.UserType 一致） */
+export const ROLE_USER_TYPE_NAMES: Record<number, string> = {
+  1: '平台运营',
+  2: '学校管理员',
+  3: '班主任',
+  4: '学生'
+}
+
+/** 数据范围中文名（本期只展示） */
+export const DATA_SCOPE_NAMES: Record<number, string> = {
+  1: '全平台',
+  2: '本租户',
+  3: '本组织及下级',
+  4: '仅本人'
+}
+
+/** 错误码 → 人话（后端 msg 已经说清了，这里只补"我该做什么"） */
+export const ROLE_ERROR_HINT: Record<number, string> = {
+  40045: '该角色还有账号在用：请先给这些账号换一个角色，再回来删'
+}
diff --git a/frontend-pc/src/apis/xt/task.ts b/frontend-pc/src/apis/xt/task.ts
index 246214e..706b15f 100644
--- a/frontend-pc/src/apis/xt/task.ts
+++ b/frontend-pc/src/apis/xt/task.ts
@@ -121,6 +121,7 @@ export interface TaskListQuery {
 /**
  * 任务分页列表。班主任只会拿到自己带的班级的任务
  *
+ * @param params 分页与筛选（`orgId` / `status` / `keyword` / `pageNum` / `pageSize`）
  * @param tenantId **仅平台运营**：看哪所学校的任务（见 `./acting-tenant`）。
  *        不传 = 平台自己租户（空列表）—— 不再把各租户的任务混在一起。
  */
@@ -254,8 +255,6 @@ export interface TaskOrgVO {
    */
   headUserId: number | null
   headUserName: string | null
-  deputyUserIds: number[]
-  deputyUserNames: string[]
   /** 应填人数（期望值）。null = 未设置，与 0（预期 0 人）含义不同 */
   expectedCount: number | null
   /** 恒为 1（只返回生效行） */
@@ -266,7 +265,6 @@ export interface TaskOrgVO {
 export interface TaskOrgItem {
   orgId: number
   headUserId?: number | null
-  deputyUserIds?: number[]
   /** 不传或传 null 表示"未设置"，**不要传 0** —— 那是"预期 0 人" */
   expectedCount?: number | null
 }
@@ -281,23 +279,23 @@ export function saveTaskOrgs(taskId: number, orgs: TaskOrgItem[]) {
 }
 
 /**
- * 可被指定为初审人的账号。
+ * 可被指定为初审人的账号（只能是**班主任**）。
  *
- * 拉两种角色再合并：后端要求初审人持有班主任**或**副班主任角色，
- * 所以两边的账号都是合法选项。只取启用状态 —— 停用的账号会被后端拒掉，
- * 列在选项里只会让人白选一次。
+ * ⚠️ 2026-10 需求收敛：删掉副班主任角色后，初审人只剩班主任一种。
+ *    这里**不能**再顺手带一个 `roleCode=DEPUTY_TEACHER` 的查询 ——
+ *    那个角色码已经不在后端的 `BuiltinRole` 里，而老版本的后端对
+ *    "不认识的角色码"是**静默忽略过滤条件**（等于返回全校账号，含学生）。
+ *    后端已改成"失败关闭"（返回空列表），前端这边也不再传它。
+ *
+ * 只取启用状态 —— 停用的账号会被后端拒掉，列在选项里只会让人白选一次。
  */
 export async function getTeacherOptions(): Promise<Array<{ id: number, label: string }>> {
-  const [head, deputy] = await Promise.all([
-    getUserList({ roleCode: 'HEAD_TEACHER', status: 1, pageSize: 200 }),
-    getUserList({ roleCode: 'DEPUTY_TEACHER', status: 1, pageSize: 200 })
-  ])
-  const merged = new Map<number, string>()
-  for (const u of [...(head.data?.list ?? []), ...(deputy.data?.list ?? [])]) {
+  const page = await getUserList({ roleCode: 'HEAD_TEACHER', status: 1, pageSize: 200 })
+  return (page.list ?? []).map((u) => ({
+    id: u.id,
     // 带账号：学校里同名同姓很常见，只显示姓名选错了就是把别人的班交给了错误的人
-    merged.set(u.id, u.username ? `${u.realName}（${u.username}）` : u.realName)
-  }
-  return Array.from(merged.entries(), ([id, label]) => ({ id, label }))
+    label: u.username ? `${u.realName}（${u.username}）` : u.realName
+  }))
 }
 
 // ── 任务统计（§7.11，工作台看板用）─────────────────
diff --git a/frontend-pc/src/apis/xt/user.ts b/frontend-pc/src/apis/xt/user.ts
index 7f8f7c4..de586c0 100644
--- a/frontend-pc/src/apis/xt/user.ts
+++ b/frontend-pc/src/apis/xt/user.ts
@@ -152,30 +152,17 @@ export const USER_TYPE_NAMES: Record<number, string> = {
 }
 
 /**
- * 角色 → 用户类型。
+ * 角色选项、角色 → 用户类型、角色名的映射**都不在这里了**。
  *
- * 二者本来就是一对一绑定的，所以：
- *   · 表单里**不让用户选**用户类型，而是从角色推导出来（避免选出矛盾组合）
- *   · 服务端也会用同一套映射反推校验（`UserService.assertRoleMatchesUserType`）
+ * 二期（角色与授权）之后，可选角色不再只有 6 个内置角色 —— 租户自己建的角色也要能发出去，
+ * 而它们的名字与用户类型只存在于库里。所以这三件事统一走 `@/apis/xt/role`：
+ *   · 选项：`getRoleOptions()`（`GET /roles`）
+ *   · 用户类型：`RoleVO.userType`（`deriveUserType(roleCodes, options)`）
+ *   · 角色名：`UserVO.roleNames`（后端已按 `sys_role.role_name` 装配）
+ *
+ * ⚠️ 留一份前端写死的映射表会**静默过期**：自定义角色推不出类型，
+ *    表现是"账号建不出来，但看不出为什么"（服务端 40001：用户类型与所选角色不符）。
  */
-export const ROLE_TO_USER_TYPE: Record<string, number> = {
-  PLATFORM_ADMIN: 1,
-  SCHOOL_ADMIN: 2,
-  AUDITOR: 2,
-  HEAD_TEACHER: 3,
-  DEPUTY_TEACHER: 3,
-  STUDENT: 4
-}
-
-/** 从所选角色推导用户类型；角色为空或跨类时返回 `null`（调用方据此拦提交） */
-export function deriveUserType(roleCodes: string[]): number | null {
-  const types = new Set<number>()
-  for (const c of roleCodes) {
-    const t = ROLE_TO_USER_TYPE[c]
-    if (t) types.add(t)
-  }
-  return types.size === 1 ? [...types][0] : null
-}
 
 /** 账号状态（对应 sys_user.status） */
 export const USER_STATUS: Record<number, { text: string, color: string }> = {
@@ -184,41 +171,6 @@ export const USER_STATUS: Record<number, { text: string, color: string }> = {
   2: { text: '待激活', color: 'orange' }
 }
 
-/**
- * 可分配的角色，**必须与后端 `BuiltinRole` 逐字一致**。
- *
- * 为什么在前端也写一份：一期没有任何"自定义角色"的界面，角色集合由代码决定、
- * 不由数据库决定（这是项目已定的决策 —— 权限码是前后端契约，放 DB 必然漂移）。
- * 所以这里是「与后端枚举对称的镜像」，不是"业务配置"。
- *
- * 真实的可分配范围仍由后端 `UserService.resolveAssignableRoles` 判定：
- * 传了这里的列表之外的角色会拿到 40301，前端只负责不显示没得选的项。
- *
- * 平台运营角色只在平台租户可分配 —— 学校管理员拿到它会直接越权到平台级。
- */
-export const SCHOOL_ROLE_OPTIONS: Array<{ value: string, label: string }> = [
-  { value: 'SCHOOL_ADMIN', label: '学校管理员' },
-  { value: 'HEAD_TEACHER', label: '班主任' },
-  { value: 'DEPUTY_TEACHER', label: '副班主任' },
-  { value: 'AUDITOR', label: '审核员' },
-  { value: 'STUDENT', label: '学生' }
-]
-
-/** 平台租户的可分配角色 */
-export const PLATFORM_ROLE_OPTIONS: Array<{ value: string, label: string }> = [
-  { value: 'PLATFORM_ADMIN', label: '平台运营' }
-]
-
-/** 导入时「角色」列允许写的角色中文名 → 角色码（与后端 BuiltinRole 对齐） */
-export const ROLE_NAME_TO_CODE: Record<string, string> = {
-  平台运营: 'PLATFORM_ADMIN',
-  学校管理员: 'SCHOOL_ADMIN',
-  班主任: 'HEAD_TEACHER',
-  副班主任: 'DEPUTY_TEACHER',
-  审核员: 'AUDITOR',
-  学生: 'STUDENT'
-}
-
 /** 导入文件里被识别的列名（与后端 HEADER_ALIASES 对齐，供界面提示用） */
 export const IMPORT_FIELD_NAMES: Record<string, string> = {
   realName: '姓名',
diff --git a/frontend-pc/src/assets/images/logo.svg b/frontend-pc/src/assets/images/logo.svg
index 9f239d6..bc00ab8 100644
--- a/frontend-pc/src/assets/images/logo.svg
+++ b/frontend-pc/src/assets/images/logo.svg
@@ -1,15 +1,29 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="填报通">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="深学在线">
   <!--
-    填报通 品牌标
+    深学在线 品牌标 · 2026-10 定稿
     ================================================================
-    配色取自腾讯云 / TDesign 官方色板（与 src/styles/arco-ui/xt-theme.less 一致）：
-      主色  #0052D9   主色亮阶  #2975E1   浅底  #ECF2FE
+    替代原先「圆角方块 + 填字」的文字标。两个几何体，都有出处：
+      · 实心圆角方 = 卷宗（原型设计语言「档案室 / 电子卷宗」）
+      · 白    环   = 在线 / 汇聚点（这件产品的入口就是扫码进来）
+    环画在方**之前**，只有右上四分之一露出来 —— 一个标里同时读到"在线"与"归档"。
 
-    设计说明：
-      · 圆角方形 + 「填」字，与产品原型（docs/prototype 的 .mark）保持同一识别符号
-      · 用渐变而不是纯色，是为了在 32px 的侧栏尺寸下也不显得扁平死板
-      · 顶部一道极淡的高光，给方形一点体积感（模仿纸质卡片的受光）
-      · 不画对勾等附加符号：尺寸一旦缩到 favicon，多余元素只会变成噪点
+    为什么是几何标而不是字形标：字形标在 16px 页签下退化成一块色斑，
+    换字体族还会走形。为什么后排是环而不是第二枚圆角方：两枚错位圆角方
+    是通用的「复制 / 多副本」图标，会被直接读成那个意思；环与方是相叠的
+    一体，也不会被读成放大镜。完整取舍过程见 docs/交接摘要.md §一·三十八，
+    五轮实测稿在 shots/logo-lab*.html。
+
+    构造（对齐 64 栅格；四周留白对称，均为 8.5；外接盒 47×49.3 居中）：
+      · 圆角方 34×34 @ (8.5, 22.65) 圆角 10.4                     —— 坐下偏左
+      · 白环 外径 38.5（描边 5.9 / 中线半径 16.31）@ (36.25, 26.62) —— 立上偏右
+    ⚠️ 留白从 11.25 收到 8.5 是**有意**的：11.25 时内容只占底板 65%，
+       24px 侧栏下真正画出来的只有 16px，标明显偏小（见 shots/rename/logo-sizes.png）。
+
+    ⚠️ 改这里要同步三处：public/favicon.svg（加粗版）、AppSider 与 login 页的
+       引用尺寸（24 / 34px）、docs/prototype/admin-web.html 的 .mark（内嵌同形状）。
+    ⚠️ 注释里不能出现连续两个减号（XML 规范禁止，非浏览器宽容度问题）：
+       写下 CSS 自定义属性的那种两减号写法会让整个 SVG not well-formed，
+       表现是图片裂开、控制台一句话都不报，lint / typecheck 也全绿。
   -->
   <defs>
     <linearGradient id="xtLogoBg" x1="0" y1="0" x2="0.35" y2="1">
@@ -22,24 +36,20 @@
     </linearGradient>
   </defs>
 
-  <!-- 底板 -->
+  <!-- 底板（配色取腾讯云 / TDesign 色板，与主题主色一致） -->
   <rect x="0" y="0" width="64" height="64" rx="15" fill="url(#xtLogoBg)" />
 
-  <!-- 顶部高光 -->
+  <!-- 顶部高光：给方形一点体积感（模仿纸质卡片的受光） -->
   <path d="M0 15A15 15 0 0 1 15 0h34a15 15 0 0 1 15 15v9H0z" fill="url(#xtLogoGloss)" />
 
   <!-- 内描边：让标在浅色底上也有轮廓，不至于"浮"着 -->
   <rect x="0.75" y="0.75" width="62.5" height="62.5" rx="14.25"
         fill="none" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5" />
 
-  <!-- 「填」字 -->
-  <text
-    x="32" y="33.5"
-    fill="#FFFFFF"
-    font-size="37"
-    font-weight="600"
-    font-family="Songti SC, STSong, SimSun, Noto Serif SC, Source Han Serif SC, serif"
-    text-anchor="middle"
-    dominant-baseline="central"
-  >填</text>
+  <!-- 环（在线 / 汇聚点）—— 画在方之前，被方遮掉左下四分之三 -->
+  <circle cx="36.25" cy="26.62" r="16.31"
+          fill="none" stroke="#FFFFFF" stroke-width="5.9" stroke-opacity="0.76" />
+
+  <!-- 方（卷宗） -->
+  <rect x="8.5" y="22.65" width="34" height="34" rx="10.4" fill="#FFFFFF" />
 </svg>
diff --git a/frontend-pc/src/auto-import.d.ts b/frontend-pc/src/auto-import.d.ts
deleted file mode 100644
index 72370df..0000000
--- a/frontend-pc/src/auto-import.d.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-  const EffectScope: typeof import('vue').EffectScope
-  const computed: typeof import('vue').computed
-  const createApp: typeof import('vue').createApp
-  const customRef: typeof import('vue').customRef
-  const defineAsyncComponent: typeof import('vue').defineAsyncComponent
-  const defineComponent: typeof import('vue').defineComponent
-  const effectScope: typeof import('vue').effectScope
-  const getCurrentInstance: typeof import('vue').getCurrentInstance
-  const getCurrentScope: typeof import('vue').getCurrentScope
-  const getCurrentWatcher: typeof import('vue').getCurrentWatcher
-  const h: typeof import('vue').h
-  const inject: typeof import('vue').inject
-  const isProxy: typeof import('vue').isProxy
-  const isReactive: typeof import('vue').isReactive
-  const isReadonly: typeof import('vue').isReadonly
-  const isRef: typeof import('vue').isRef
-  const isShallow: typeof import('vue').isShallow
-  const markRaw: typeof import('vue').markRaw
-  const nextTick: typeof import('vue').nextTick
-  const onActivated: typeof import('vue').onActivated
-  const onBeforeMount: typeof import('vue').onBeforeMount
-  const onBeforeRouteLeave: typeof import('vue-router').onBeforeRouteLeave
-  const onBeforeRouteUpdate: typeof import('vue-router').onBeforeRouteUpdate
-  const onBeforeUnmount: typeof import('vue').onBeforeUnmount
-  const onBeforeUpdate: typeof import('vue').onBeforeUpdate
-  const onDeactivated: typeof import('vue').onDeactivated
-  const onErrorCaptured: typeof import('vue').onErrorCaptured
-  const onMounted: typeof import('vue').onMounted
-  const onRenderTracked: typeof import('vue').onRenderTracked
-  const onRenderTriggered: typeof import('vue').onRenderTriggered
-  const onScopeDispose: typeof import('vue').onScopeDispose
-  const onServerPrefetch: typeof import('vue').onServerPrefetch
-  const onUnmounted: typeof import('vue').onUnmounted
-  const onUpdated: typeof import('vue').onUpdated
-  const onWatcherCleanup: typeof import('vue').onWatcherCleanup
-  const provide: typeof import('vue').provide
-  const reactive: typeof import('vue').reactive
-  const readonly: typeof import('vue').readonly
-  const ref: typeof import('vue').ref
-  const resolveComponent: typeof import('vue').resolveComponent
-  const shallowReactive: typeof import('vue').shallowReactive
-  const shallowReadonly: typeof import('vue').shallowReadonly
-  const shallowRef: typeof import('vue').shallowRef
-  const toRaw: typeof import('vue').toRaw
-  const toRef: typeof import('vue').toRef
-  const toRefs: typeof import('vue').toRefs
-  const toValue: typeof import('vue').toValue
-  const triggerRef: typeof import('vue').triggerRef
-  const unref: typeof import('vue').unref
-  const useAttrs: typeof import('vue').useAttrs
-  const useCssModule: typeof import('vue').useCssModule
-  const useCssVars: typeof import('vue').useCssVars
-  const useId: typeof import('vue').useId
-  const useLink: typeof import('vue-router').useLink
-  const useModel: typeof import('vue').useModel
-  const useRoute: typeof import('vue-router').useRoute
-  const useRouter: typeof import('vue-router').useRouter
-  const useSlots: typeof import('vue').useSlots
-  const useTemplateRef: typeof import('vue').useTemplateRef
-  const watch: typeof import('vue').watch
-  const watchEffect: typeof import('vue').watchEffect
-  const watchPostEffect: typeof import('vue').watchPostEffect
-  const watchSyncEffect: typeof import('vue').watchSyncEffect
-}
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
-  import('vue')
-}
diff --git a/frontend-pc/src/components.d.ts b/frontend-pc/src/components.d.ts
deleted file mode 100644
index 896f07b..0000000
--- a/frontend-pc/src/components.d.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// biome-ignore lint: disable
-// oxlint-disable
-// ------
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-import { GlobalComponents } from 'vue'
-
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    AAlert: typeof import('@arco-design/web-vue')['Alert']
-    AAvatar: typeof import('@arco-design/web-vue')['Avatar']
-    ABadge: typeof import('@arco-design/web-vue')['Badge']
-    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
-    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
-    AButton: typeof import('@arco-design/web-vue')['Button']
-    ACard: typeof import('@arco-design/web-vue')['Card']
-    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
-    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
-    ACol: typeof import('@arco-design/web-vue')['Col']
-    AComment: typeof import('@arco-design/web-vue')['Comment']
-    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
-    ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
-    ADescriptions: typeof import('@arco-design/web-vue')['Descriptions']
-    ADescriptionsItem: typeof import('@arco-design/web-vue')['DescriptionsItem']
-    ADivider: typeof import('@arco-design/web-vue')['Divider']
-    ADoption: typeof import('@arco-design/web-vue')['Doption']
-    ADrawer: typeof import('@arco-design/web-vue')['Drawer']
-    ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
-    AEmpty: typeof import('@arco-design/web-vue')['Empty']
-    AForm: typeof import('@arco-design/web-vue')['Form']
-    AFormItem: typeof import('@arco-design/web-vue')['FormItem']
-    AGrid: typeof import('@arco-design/web-vue')['Grid']
-    AGridItem: typeof import('@arco-design/web-vue')['GridItem']
-    AInput: typeof import('@arco-design/web-vue')['Input']
-    AInputGroup: typeof import('@arco-design/web-vue')['InputGroup']
-    AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
-    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
-    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
-    AInputTag: typeof import('@arco-design/web-vue')['InputTag']
-    ALayout: typeof import('@arco-design/web-vue')['Layout']
-    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
-    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
-    ALink: typeof import('@arco-design/web-vue')['Link']
-    AMenu: typeof import('@arco-design/web-vue')['Menu']
-    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
-    AModal: typeof import('@arco-design/web-vue')['Modal']
-    AOption: typeof import('@arco-design/web-vue')['Option']
-    AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
-    APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm']
-    APopover: typeof import('@arco-design/web-vue')['Popover']
-    AProgress: typeof import('@arco-design/web-vue')['Progress']
-    ARadio: typeof import('@arco-design/web-vue')['Radio']
-    ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
-    ARow: typeof import('@arco-design/web-vue')['Row']
-    AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
-    ASelect: typeof import('@arco-design/web-vue')['Select']
-    ASpace: typeof import('@arco-design/web-vue')['Space']
-    ASpin: typeof import('@arco-design/web-vue')['Spin']
-    ASplit: typeof import('@arco-design/web-vue')['Split']
-    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
-    ASwitch: typeof import('@arco-design/web-vue')['Switch']
-    ATable: typeof import('@arco-design/web-vue')['Table']
-    ATableColumn: typeof import('@arco-design/web-vue')['TableColumn']
-    ATabPane: typeof import('@arco-design/web-vue')['TabPane']
-    ATabs: typeof import('@arco-design/web-vue')['Tabs']
-    ATag: typeof import('@arco-design/web-vue')['Tag']
-    ATextarea: typeof import('@arco-design/web-vue')['Textarea']
-    ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
-    ATree: typeof import('@arco-design/web-vue')['Tree']
-    ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
-    AUpload: typeof import('@arco-design/web-vue')['Upload']
-    GiButton: typeof import('./components/GiButton/GiButton.vue')['default']
-    GiCellAvatar: typeof import('./components/GiCell/GiCellAvatar.vue')['default']
-    GiCellGender: typeof import('./components/GiCell/GiCellGender.vue')['default']
-    GiCellStatus: typeof import('./components/GiCell/GiCellStatus.vue')['default']
-    GiCellTags: typeof import('./components/GiCell/GiCellTags.vue')['default']
-    GiDot: typeof import('./components/GiDot/GiDot.tsx')['default']
-    GiEditTable: typeof import('./components/GiEditTable/GiEditTable.vue')['default']
-    GiFlex: typeof import('./components/GiFlex/GiFlex.vue')['default']
-    GiForm: typeof import('./components/GiForm/GiForm.vue')['default']
-    GiIconBox: typeof import('./components/GiIconBox/GiIconBox.vue')['default']
-    GiInputSearch: typeof import('./components/GiInputSearch/GiInputSearch.vue')['default']
-    GiOption: typeof import('./components/GiOption/GiOption.vue')['default']
-    GiOptionItem: typeof import('./components/GiOption/GiOptionItem.vue')['default']
-    GiPageLayout: typeof import('./components/GiPageLayout/GiPageLayout.vue')['default']
-    GiTable: typeof import('./components/GiTable/GiTable.vue')['default']
-    GiTableSetting: typeof import('./components/GiTableSetting/GiTableSetting.vue')['default']
-    GiTag: typeof import('./components/GiTag/GiTag.tsx')['default']
-    GiTenantPicker: typeof import('./components/GiTenantPicker/GiTenantPicker.vue')['default']
-    GiThemeBtn: typeof import('./components/GiThemeBtn/GiThemeBtn.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SplitButton: typeof import('./components/GiPageLayout/SplitButton.vue')['default']
-  }
-}
-
-// For TSX support
-declare global {
-  const AAlert: typeof import('@arco-design/web-vue')['Alert']
-  const AAvatar: typeof import('@arco-design/web-vue')['Avatar']
-  const ABadge: typeof import('@arco-design/web-vue')['Badge']
-  const ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
-  const ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
-  const AButton: typeof import('@arco-design/web-vue')['Button']
-  const ACard: typeof import('@arco-design/web-vue')['Card']
-  const ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
-  const ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
-  const ACol: typeof import('@arco-design/web-vue')['Col']
-  const AComment: typeof import('@arco-design/web-vue')['Comment']
-  const AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
-  const ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
-  const ADescriptions: typeof import('@arco-design/web-vue')['Descriptions']
-  const ADescriptionsItem: typeof import('@arco-design/web-vue')['DescriptionsItem']
-  const ADivider: typeof import('@arco-design/web-vue')['Divider']
-  const ADoption: typeof import('@arco-design/web-vue')['Doption']
-  const ADrawer: typeof import('@arco-design/web-vue')['Drawer']
-  const ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
-  const AEmpty: typeof import('@arco-design/web-vue')['Empty']
-  const AForm: typeof import('@arco-design/web-vue')['Form']
-  const AFormItem: typeof import('@arco-design/web-vue')['FormItem']
-  const AGrid: typeof import('@arco-design/web-vue')['Grid']
-  const AGridItem: typeof import('@arco-design/web-vue')['GridItem']
-  const AInput: typeof import('@arco-design/web-vue')['Input']
-  const AInputGroup: typeof import('@arco-design/web-vue')['InputGroup']
-  const AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
-  const AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
-  const AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
-  const AInputTag: typeof import('@arco-design/web-vue')['InputTag']
-  const ALayout: typeof import('@arco-design/web-vue')['Layout']
-  const ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
-  const ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
-  const ALink: typeof import('@arco-design/web-vue')['Link']
-  const AMenu: typeof import('@arco-design/web-vue')['Menu']
-  const AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
-  const AModal: typeof import('@arco-design/web-vue')['Modal']
-  const AOption: typeof import('@arco-design/web-vue')['Option']
-  const AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
-  const APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm']
-  const APopover: typeof import('@arco-design/web-vue')['Popover']
-  const AProgress: typeof import('@arco-design/web-vue')['Progress']
-  const ARadio: typeof import('@arco-design/web-vue')['Radio']
-  const ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
-  const ARow: typeof import('@arco-design/web-vue')['Row']
-  const AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
-  const ASelect: typeof import('@arco-design/web-vue')['Select']
-  const ASpace: typeof import('@arco-design/web-vue')['Space']
-  const ASpin: typeof import('@arco-design/web-vue')['Spin']
-  const ASplit: typeof import('@arco-design/web-vue')['Split']
-  const ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
-  const ASwitch: typeof import('@arco-design/web-vue')['Switch']
-  const ATable: typeof import('@arco-design/web-vue')['Table']
-  const ATableColumn: typeof import('@arco-design/web-vue')['TableColumn']
-  const ATabPane: typeof import('@arco-design/web-vue')['TabPane']
-  const ATabs: typeof import('@arco-design/web-vue')['Tabs']
-  const ATag: typeof import('@arco-design/web-vue')['Tag']
-  const ATextarea: typeof import('@arco-design/web-vue')['Textarea']
-  const ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
-  const ATree: typeof import('@arco-design/web-vue')['Tree']
-  const ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
-  const AUpload: typeof import('@arco-design/web-vue')['Upload']
-  const GiButton: typeof import('./components/GiButton/GiButton.vue')['default']
-  const GiCellAvatar: typeof import('./components/GiCell/GiCellAvatar.vue')['default']
-  const GiCellGender: typeof import('./components/GiCell/GiCellGender.vue')['default']
-  const GiCellStatus: typeof import('./components/GiCell/GiCellStatus.vue')['default']
-  const GiCellTags: typeof import('./components/GiCell/GiCellTags.vue')['default']
-  const GiDot: typeof import('./components/GiDot/GiDot.tsx')['default']
-  const GiEditTable: typeof import('./components/GiEditTable/GiEditTable.vue')['default']
-  const GiFlex: typeof import('./components/GiFlex/GiFlex.vue')['default']
-  const GiForm: typeof import('./components/GiForm/GiForm.vue')['default']
-  const GiIconBox: typeof import('./components/GiIconBox/GiIconBox.vue')['default']
-  const GiInputSearch: typeof import('./components/GiInputSearch/GiInputSearch.vue')['default']
-  const GiOption: typeof import('./components/GiOption/GiOption.vue')['default']
-  const GiOptionItem: typeof import('./components/GiOption/GiOptionItem.vue')['default']
-  const GiPageLayout: typeof import('./components/GiPageLayout/GiPageLayout.vue')['default']
-  const GiTable: typeof import('./components/GiTable/GiTable.vue')['default']
-  const GiTableSetting: typeof import('./components/GiTableSetting/GiTableSetting.vue')['default']
-  const GiTag: typeof import('./components/GiTag/GiTag.tsx')['default']
-  const GiTenantPicker: typeof import('./components/GiTenantPicker/GiTenantPicker.vue')['default']
-  const GiThemeBtn: typeof import('./components/GiThemeBtn/GiThemeBtn.vue')['default']
-  const RouterLink: typeof import('vue-router')['RouterLink']
-  const RouterView: typeof import('vue-router')['RouterView']
-  const SplitButton: typeof import('./components/GiPageLayout/SplitButton.vue')['default']
-}
\ No newline at end of file
diff --git a/frontend-pc/src/components/GiButton/GiButton.vue b/frontend-pc/src/components/GiButton/GiButton.vue
deleted file mode 100644
index 637f1f7..0000000
--- a/frontend-pc/src/components/GiButton/GiButton.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <a-button v-bind="buttonProps" @click="emit('click')">
-    <template v-if="buttonConfig?.icon" #icon>
-      <component :is="buttonConfig.icon" />
-    </template>
-    <template #default>
-      <slot>{{ buttonConfig?.text }}</slot>
-    </template>
-  </a-button>
-</template>
-
-<script setup lang="ts">
-import type { ButtonProps as AButtonProps } from '@arco-design/web-vue'
-import type { Component } from 'vue'
-import type { ButtonProps as Props } from './type'
-import { IconDelete, IconDownload, IconEdit, IconImport, IconPlus, IconSearch, IconUpload } from '@arco-design/web-vue/es/icon'
-import { computed } from 'vue'
-
-defineOptions({
-  name: 'GiButton'
-})
-
-const props = withDefaults(defineProps<Props>(), {
-  type: ''
-})
-
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-
-/** 按钮配置类型 */
-interface ButtonConfig {
-  icon?: Component
-  text: string
-  status?: AButtonProps['status']
-  type?: AButtonProps['type']
-}
-
-/** 按钮类型映射表 */
-const BUTTON_MAP: Record<string, ButtonConfig> = {
-  add: { icon: IconPlus, text: '新增' },
-  edit: { icon: IconEdit, text: '编辑' },
-  delete: { icon: IconDelete, text: '删除', status: 'danger' },
-  search: { icon: IconSearch, text: '搜索' },
-  reset: { icon: undefined, text: '重置', type: 'secondary' },
-  upload: { icon: IconUpload, text: '上传', type: 'secondary' },
-  import: { icon: IconImport, text: '导入', type: 'secondary' },
-  export: { icon: IconDownload, text: '导出', type: 'secondary' }
-}
-
-/** Arco 原生按钮类型 */
-const ARCO_BUTTON_TYPES: AButtonProps['type'][] = ['primary', 'secondary', 'outline', 'dashed', 'text']
-
-/** 当前按钮配置 */
-const buttonConfig = computed<ButtonConfig | undefined>(() => {
-  if (!props.type) {
-    return undefined
-  }
-  return BUTTON_MAP[props.type]
-})
-
-/** 按钮属性计算 */
-const buttonProps = computed(() => {
-  // 判断是否为 Arco 原生类型
-  const isArcoType = ARCO_BUTTON_TYPES.includes(props.type as AButtonProps['type'])
-
-  // 确定按钮类型
-  let buttonType: AButtonProps['type'] = 'primary'
-  if (isArcoType) {
-    buttonType = props.type as AButtonProps['type']
-  } else if (buttonConfig.value?.type) {
-    buttonType = buttonConfig.value.type
-  }
-
-  // 确定按钮状态
-  const buttonStatus: AButtonProps['status'] = buttonConfig.value?.status || 'normal'
-
-  return {
-    ...props,
-    type: buttonType,
-    status: buttonStatus
-  }
-})
-</script>
-
-<style lang='scss' scoped></style>
diff --git a/frontend-pc/src/components/GiButton/index.ts b/frontend-pc/src/components/GiButton/index.ts
deleted file mode 100644
index 9750fe6..0000000
--- a/frontend-pc/src/components/GiButton/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Button from './GiButton.vue'
-
-export type ButtonInstance = InstanceType<typeof Button>
-export * from './type'
-export { Button as GiButton }
diff --git a/frontend-pc/src/components/GiButton/type.ts b/frontend-pc/src/components/GiButton/type.ts
deleted file mode 100644
index 7c6bf35..0000000
--- a/frontend-pc/src/components/GiButton/type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ButtonProps as ArcoButtonProps } from '@arco-design/web-vue'
-
-export interface ButtonProps extends Omit<ArcoButtonProps, 'type'> {
-  type?: 'add' | 'edit' | 'delete' | 'search' | 'reset' | 'upload' | 'import' | 'export' | ''
-}
diff --git a/frontend-pc/src/components/GiCell/GiCellAvatar.vue b/frontend-pc/src/components/GiCell/GiCellAvatar.vue
deleted file mode 100644
index 5bf95dd..0000000
--- a/frontend-pc/src/components/GiCell/GiCellAvatar.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <a-space fill>
-    <a-avatar :size="24" shape="circle">
-      <img :src="props.avatar" />
-    </a-avatar>
-    <a-link v-if="props.isLink" @click="emit('click')">{{ props.name }}</a-link>
-    <span v-else>{{ props.name }}</span>
-  </a-space>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'GiCellAvatar' })
-
-const props = withDefaults(defineProps<Props>(), {
-  avatar: '',
-  name: '',
-  isLink: false // 是否可以点击
-})
-
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-
-interface Props {
-  avatar?: string
-  name?: string
-  isLink?: boolean
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/GiCell/GiCellGender.vue b/frontend-pc/src/components/GiCell/GiCellGender.vue
deleted file mode 100644
index ee22cbf..0000000
--- a/frontend-pc/src/components/GiCell/GiCellGender.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <a-tag v-if="props.gender === '1'" color="arcoblue" class="g-round">
-    <template #icon><icon-man /></template>
-    <template #default>男</template>
-  </a-tag>
-  <a-tag v-if="props.gender === '2'" color="purple" class="g-round">
-    <template #icon><icon-woman /></template>
-    <template #default>女</template>
-  </a-tag>
-  <a-tag v-if="props.gender === '3'" color="gray" class="g-round">
-    <template #icon><icon-lock /></template>
-    <template #default>保密</template>
-  </a-tag>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'GiCellGender' })
-
-const props = withDefaults(defineProps<Props>(), {
-  gender: '1'
-})
-
-interface Props {
-  gender?: Gender
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/GiCell/GiCellStatus.vue b/frontend-pc/src/components/GiCell/GiCellStatus.vue
deleted file mode 100644
index 918885e..0000000
--- a/frontend-pc/src/components/GiCell/GiCellStatus.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <a-tag v-if="props.status === '1'" color="arcoblue">
-    <template #icon><icon-check-circle-fill /></template>
-    <template #default>正常</template>
-  </a-tag>
-  <a-tag v-if="props.status === '0'" color="orangered">
-    <template #icon><icon-minus-circle-fill /></template>
-    <template #default>禁用</template>
-  </a-tag>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'GiCellStatus' })
-
-const props = withDefaults(defineProps<Props>(), {
-  status: '1'
-})
-
-interface Props {
-  status?: Status
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/GiCell/GiCellTags.vue b/frontend-pc/src/components/GiCell/GiCellTags.vue
deleted file mode 100644
index 7456aab..0000000
--- a/frontend-pc/src/components/GiCell/GiCellTags.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <a-overflow-list v-if="data.length">
-    <a-tag v-for="(item, index) in data" :key="index">
-      {{ item }}
-    </a-tag>
-    <template #overflow="{ number }">
-      <a-popover :content-style="{ maxWidth: '300px', padding: '8px 12px' }">
-        <a-tag color="arcoblue">+{{ number }}</a-tag>
-        <template #content>
-          <a-space wrap>
-            <a-tag v-for="tag in data.filter((i, n) => n >= data.length - number)" :key="tag">
-              {{ tag }}
-            </a-tag>
-          </a-space>
-        </template>
-      </a-popover>
-    </template>
-  </a-overflow-list>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'GiCellTags' })
-
-withDefaults(defineProps<Props>(), {
-  data: () => []
-})
-
-interface Props {
-  data?: string[]
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/GiCell/index.ts b/frontend-pc/src/components/GiCell/index.ts
deleted file mode 100644
index d39267f..0000000
--- a/frontend-pc/src/components/GiCell/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import GiCellAvatar from './GiCellAvatar.vue'
-import GiCellGender from './GiCellGender.vue'
-import GiCellStatus from './GiCellStatus.vue'
-import GiCellTags from './GiCellTags.vue'
-
-export { GiCellAvatar, GiCellGender, GiCellStatus, GiCellTags }
diff --git a/frontend-pc/src/components/GiDot/GiDot.tsx b/frontend-pc/src/components/GiDot/GiDot.tsx
deleted file mode 100644
index 83c6119..0000000
--- a/frontend-pc/src/components/GiDot/GiDot.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @file GiDot 组件 - 用于显示带有可选动画效果的状态点
- */
-import type { PropType } from 'vue'
-import type { DotType, DotProps as Props } from './type'
-import { defineComponent } from 'vue'
-import './dot.scss'
-
-export default defineComponent({
-  name: 'GiDot',
-  props: {
-    animation: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-      required: false
-    },
-    type: {
-      type: String as PropType<DotType>,
-      default: 'primary',
-      required: false,
-      validator: (value: string): boolean => {
-        return ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
-      }
-    }
-  },
-  setup(props: Props) {
-    return () => (
-      <span
-        class={['gi-dot', { 'gi-dot-processing': props.animation }, `gi-dot-${props.type}`]}
-      />
-    )
-  }
-})
diff --git a/frontend-pc/src/components/GiDot/dot.scss b/frontend-pc/src/components/GiDot/dot.scss
deleted file mode 100644
index a762721..0000000
--- a/frontend-pc/src/components/GiDot/dot.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.gi-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  vertical-align: middle;
-  background: #000;
-  border-radius: 50%;
-}
-
-$types: primary, success, warning, danger, info;
-
-@each $i in $types {
-  .gi-dot-#{$i}
-
- {
-    background-color: rgb(var(--#{$i}-6));
-  }
-
-  @if ($i ==info) {
-    .gi-dot-#{$i}
-
- {
-      background-color: rgb(var(--gray-6));
-    }
-  }
-}
-
-.gi-dot-processing {
-  position: relative;
-}
-
-.gi-dot-processing::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  content: '';
-  background: inherit;
-  border-radius: 50%;
-  animation: gi-dot-animated 1.2s ease-in-out infinite;
-}
-
-@keyframes gi-dot-animated {
-  0% {
-    opacity: 1;
-    transform: scale(0.5);
-  }
-
-  30% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(2.5);
-  }
-}
\ No newline at end of file
diff --git a/frontend-pc/src/components/GiDot/index.ts b/frontend-pc/src/components/GiDot/index.ts
deleted file mode 100644
index 0f39877..0000000
--- a/frontend-pc/src/components/GiDot/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Dot from './GiDot.tsx'
-
-export type * from './type'
-export type DotInstance = InstanceType<typeof Dot>
-export { Dot as GiDot }
diff --git a/frontend-pc/src/components/GiDot/type.ts b/frontend-pc/src/components/GiDot/type.ts
deleted file mode 100644
index c066c69..0000000
--- a/frontend-pc/src/components/GiDot/type.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/** 点的类型 */
-export type DotType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
-
-/** 组件属性定义 */
-export interface DotProps {
-  /** 点的类型 */
-  type?: DotType
-  /** 是否启用动画效果 */
-  animation?: boolean
-}
diff --git a/frontend-pc/src/components/GiEditTable/GiEditTable.vue b/frontend-pc/src/components/GiEditTable/GiEditTable.vue
deleted file mode 100644
index f6bef61..0000000
--- a/frontend-pc/src/components/GiEditTable/GiEditTable.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="gi-edit-table">
-    <a-form ref="formRef" scroll-to-first-error :model="form">
-      <a-table :data="form.tableData" :bordered="{ cell: true }" :pagination="false" v-bind="attrs">
-        <template #columns>
-          <a-table-column v-for="col in props.columns" :key="col.dataIndex" :data-index="col.dataIndex"
-            :header-cell-class="headerCellClass(col)" v-bind="col.columnProps" :title="col.title">
-            <template #title>
-              <component :is="col?.columnProps?.title" v-if="typeof col?.columnProps?.title === 'function'"></component>
-              <template v-else>{{ col?.columnProps?.title || col.title }}</template>
-            </template>
-            <template #cell="{ record, rowIndex, column }">
-              <template v-if="!col.type && !col.slotName">{{ record[col.dataIndex] }}</template>
-              <a-form-item v-else :field="`tableData[${rowIndex}].${col.dataIndex}`"
-                :label-col-style="{ display: 'none' }" :wrapper-col-props="{ span: 24 }" v-bind="col.formItemProps"
-                :rules="[{ required: col.required || false, message: getRuleMessage(col) }, ...(col.rules || [])]">
-                <template v-if="col.slotName">
-                  <slot :name="col.dataIndex" v-bind="{ record, rowIndex, column }"></slot>
-                </template>
-                <component :is="COMP_MAP[col.type!]" v-else-if="col.type" v-bind="getComponentBindProps(col)"
-                  v-model="record[col.dataIndex]" :disabled="isDisabled({ row: record, rowIndex, col })">
-                </component>
-              </a-form-item>
-            </template>
-          </a-table-column>
-        </template>
-        <template #tr="{ record, rowIndex }">
-          <tr class="gi-edit-table-tr" @dblclick="emit('tr-dblclick', { record, rowIndex })"></tr>
-        </template>
-        <template #td="{ record, column, rowIndex }">
-          <td class="gi-edit-table-td" @dblclick="emit('td-dblclick', { record, column, rowIndex })"></td>
-        </template>
-      </a-table>
-    </a-form>
-  </div>
-</template>
-
-<script lang='ts' setup generic="T extends TableData">
-import type { TableColumnData, TableData } from '@arco-design/web-vue'
-import type { Component } from 'vue'
-import type { EditTableColumnItem, EditTableProps as Props } from './type'
-import * as A from '@arco-design/web-vue'
-
-defineOptions({ name: 'GiEditTable', inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props<T>>(), {
-  cellDisabled: false
-})
-
-/** 事件定义 */
-const emit = defineEmits<{
-  (e: 'tr-dblclick', value: { record: any, rowIndex: number }): void
-  (e: 'td-dblclick', value: { record: any, rowIndex: number, column: TableColumnData }): void
-}>()
-
-/** 插槽定义 */
-defineSlots<{
-  [propsName: string]: (props: { record: T, rowIndex: number, column: EditTableColumnItem }) => void
-}>()
-
-const attrs = useAttrs()
-
-const COMP_MAP: Record<string, Component> = {
-  'input': A.Input,
-  'input-number': A.InputNumber,
-  'input-tag': A.InputTag,
-  'input-search': A.InputSearch,
-  'textarea': A.Textarea,
-  'select': A.Select,
-  'tree-select': A.TreeSelect,
-  'radio': A.Radio,
-  'radio-group': A.RadioGroup,
-  'checkbox': A.Checkbox,
-  'checkbox-group': A.CheckboxGroup,
-  'date-picker': A.DatePicker,
-  'year-picker': A.YearPicker,
-  'quarter-picker': A.QuarterPicker,
-  'month-picker': A.MonthPicker,
-  'week-picker': A.WeekPicker,
-  'time-picker': A.TimePicker,
-  'range-picker': A.RangePicker,
-  'color-picker': A.ColorPicker,
-  'rate': A.Rate,
-  'switch': A.Switch,
-  'slider': A.Slider,
-  'cascader': A.Cascader,
-  'upload': A.Upload,
-  'auto-complete': A.AutoComplete,
-  'mention': A.Mention
-}
-
-/** 表单数据 */
-const form = computed(() => ({ tableData: props.data }))
-
-/** 表单实例 */
-const formRef = useTemplateRef('formRef')
-
-/** 获取表头必填星号*样式 */
-const headerCellClass = (col: EditTableColumnItem) => {
-  return col.required ? 'g-column-require' : ''
-}
-
-/** 静态配置 */
-const STATIC_PROPS = new Map<EditTableColumnItem['type'], Partial<EditTableColumnItem['props']>>([
-  ['input', { allowClear: true, maxLength: 20 }],
-  ['textarea', { allowClear: false, maxLength: 200 }],
-  ['input-tag', { allowClear: true }],
-  ['mention', { allowClear: true }],
-  ['select', { allowClear: true }],
-  ['tree-select', { allowClear: true }],
-  ['cascader', { allowClear: true }],
-  ['date-picker', { allowClear: true }],
-  ['time-picker', { allowClear: true }]
-])
-
-/** 获取组件默认占位 */
-const getPlaceholder = (item: EditTableColumnItem) => {
-  if (!item.type) return undefined
-  if (['input', 'input-tag', 'mention'].includes(item.type)) {
-    return `请输入${item.title}`
-  }
-  if (['textarea'].includes(item.type)) {
-    return `请填写${item.title}`
-  }
-  if (['select', 'tree-select', 'cascader'].includes(item.type)) {
-    return `请选择${item.title}`
-  }
-  if (['date-picker'].includes(item.type)) {
-    return '请选择日期'
-  }
-  if (['time-picker'].includes(item.type)) {
-    return '请选择时间'
-  }
-  return undefined
-}
-
-/** 获取组件默认配置 */
-const getComponentBindProps = (col: EditTableColumnItem) => {
-  return {
-    ...STATIC_PROPS.get(col.type) || {},
-    placeholder: getPlaceholder(col),
-    ...col.props
-  }
-}
-
-/** 获取组件默认规则 */
-const getRuleMessage = (col: EditTableColumnItem) => {
-  if (['input', 'input-number', 'input-tag', 'mention'].includes(col.type ?? '')) {
-    return `请输入${col.title}`
-  }
-  if (['textarea'].includes(col.type ?? '')) {
-    return `请填写${col.title}`
-  }
-  return `请选择${col.title}`
-}
-
-/** 判断是否禁用 */
-const isDisabled: Props<T>['cellDisabled'] = (p) => {
-  if (typeof props?.cellDisabled === 'boolean') return props.cellDisabled
-  if (typeof props?.cellDisabled === 'function') return props.cellDisabled(p)
-  return false
-}
-
-/** 暴露表单实例 */
-defineExpose({ formRef })
-</script>
-
-<style lang='scss' scoped>
-:deep(.arco-form-item) {
-  margin-bottom: 0;
-
-  .arco-form-item-message {
-    display: none;
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiEditTable/index.ts b/frontend-pc/src/components/GiEditTable/index.ts
deleted file mode 100644
index cd2918f..0000000
--- a/frontend-pc/src/components/GiEditTable/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { FormInstance } from '@arco-design/web-vue'
-import EditTable from './GiEditTable.vue'
-
-export type * from './type'
-
-/**
- * 组件实例类型。
- *
- * 与 `GiTable/index.ts` 同一个原因：泛型 SFC 不能用 `InstanceType<>` 推导
- * （`<script setup generic="T extends TableData">` 让组件类型成为泛型函数签名），
- * 所以按 `defineExpose({ formRef })` 的真实形状手工声明。
- */
-export interface EditTableInstance {
-  /** 内层 a-form 的实例（校验用） */
-  formRef: FormInstance | null
-}
-
-export { EditTable as GiEditTable }
diff --git a/frontend-pc/src/components/GiEditTable/type.ts b/frontend-pc/src/components/GiEditTable/type.ts
deleted file mode 100644
index 02fc519..0000000
--- a/frontend-pc/src/components/GiEditTable/type.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type * as A from '@arco-design/web-vue'
-import type { VNode } from 'vue'
-
-export type EditTableColumnItemType
-  = | 'input'
-    | 'input-number'
-    | 'input-tag'
-    | 'textarea'
-    | 'select'
-    | 'tree-select'
-    | 'radio'
-    | 'radio-group'
-    | 'checkbox'
-    | 'checkbox-group'
-    | 'date-picker'
-    | 'year-picker'
-    | 'quarter-picker'
-    | 'month-picker'
-    | 'week-picker'
-    | 'time-picker'
-    | 'range-picker'
-    | 'color-picker'
-    | 'rate'
-    | 'switch'
-    | 'slider'
-    | 'cascader'
-    | 'upload'
-    | 'auto-complete'
-    | 'mention'
-    | ''
-
-export type EditTableComponentProps
-  = & A.InputInstance['$props']
-    & A.InputNumberInstance['$props']
-    & A.InputTagInstance['$props']
-    & A.TextareaInstance['$props']
-    & A.SelectInstance['$props']
-    & A.TreeSelectInstance['$props']
-    & A.RadioInstance['$props']
-    & A.RadioGroupInstance['$props']
-    & A.CheckboxInstance['$props']
-    & A.CheckboxGroupInstance['$props']
-    & A.DatePickerInstance['$props']
-    & A.YearPickerInstance['$props']
-    & A.QuarterPickerInstance['$props']
-    & A.MonthPickerInstance['$props']
-    & A.WeekPickerInstance['$props']
-    & A.TimePickerInstance['$props']
-    & A.RangePickerInstance['$props']
-    & A.ColorPickerInstance['$props']
-    & A.RateInstance['$props']
-    & A.SwitchInstance['$props']
-    & A.SliderInstance['$props']
-    & A.CascaderInstance['$props']
-    & A.UploadInstance['$props']
-    & A.AutoCompleteInstance['$props']
-    & A.MentionInstance['$props']
-
-interface EditTableColumnItemProps extends Partial<Omit<EditTableComponentProps, 'placeholder'>> {
-  placeholder?: string | string[]
-}
-
-export interface EditTableColumnItem {
-  type?: EditTableColumnItemType
-  title: string
-  dataIndex: string
-  required?: boolean
-  rules?: A.FormItemInstance['$props']['rules'] // 表单校验规则
-  props?: EditTableColumnItemProps
-  columnProps?: Partial<Omit<A.TableColumnInstance['$props'], 'title'>> & { title?: string | (() => VNode) }
-  formItemProps?: A.FormItemInstance['$props']
-  slotName?: string
-}
-
-export type EditTableCellDisabled<T> = boolean | ((e: { row: T, rowIndex: number, col: EditTableColumnItem }) => boolean)
-
-export interface EditTableProps<T> {
-  columns: EditTableColumnItem[]
-  data: T[]
-  cellDisabled?: EditTableCellDisabled<T>
-}
diff --git a/frontend-pc/src/components/GiFlex/GiFlex.vue b/frontend-pc/src/components/GiFlex/GiFlex.vue
deleted file mode 100644
index b418f81..0000000
--- a/frontend-pc/src/components/GiFlex/GiFlex.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="gi-flex" :class="getClass" :style="getStyle">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import type { FlexProps as Props } from './type'
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<Props>(), {
-  column: false,
-  justify: 'start',
-  align: 'start',
-  wrap: true,
-  gap: false
-})
-
-/** 计算组件的 class */
-const getClass = computed(() => {
-  const arr: string[] = []
-  if (props.wrap) {
-    arr.push('gi-flex__wrap')
-  }
-  if (props.column) {
-    arr.push('gi-flex__column')
-  }
-  return arr.join(' ')
-})
-
-/** 计算组件的样式 */
-const getStyle = computed((): CSSProperties => {
-  const style: CSSProperties = {
-    'justify-content': props.justify,
-    'align-items': props.align
-  }
-  // 联合类型中若 boolean 不在最前，裸写 `gap` 会得到 `""`；与「开启主题间距」语义一致
-  if (props.gap === true || props.gap === '') {
-    style.gap = 'var(--margin)'
-  } else if (props.gap === false) {
-    style.gap = undefined
-  } else if (typeof props.gap === 'number') {
-    style.gap = `${props.gap}px`
-  } else {
-    style.gap = props.gap
-  }
-  style.flex = props.flex
-  return style
-})
-</script>
-
-<style lang="scss" scoped>
-.gi-flex {
-  display: flex;
-
-  &.gi-flex__wrap {
-    flex-wrap: wrap;
-  }
-
-  &.gi-flex__column {
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiFlex/index.ts b/frontend-pc/src/components/GiFlex/index.ts
deleted file mode 100644
index 4293675..0000000
--- a/frontend-pc/src/components/GiFlex/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Flex from './GiFlex.vue'
-
-export type FlexInstance = InstanceType<typeof Flex>
-export * from './type'
-export { Flex as GiFlex }
diff --git a/frontend-pc/src/components/GiFlex/type.ts b/frontend-pc/src/components/GiFlex/type.ts
deleted file mode 100644
index 252c50f..0000000
--- a/frontend-pc/src/components/GiFlex/type.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/** 组件属性定义 */
-export interface FlexProps {
-  /** 排列方向 */
-  column?: boolean
-  /** 水平对齐方式（与 CSS justify-content 一致） */
-  justify?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'flex-start'
-    | 'flex-end'
-    | 'space-between'
-    | 'space-around'
-    | 'space-evenly'
-  /** 垂直对齐方式（与 CSS align-items 一致） */
-  align?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'flex-start'
-    | 'flex-end'
-    | 'baseline'
-    | 'stretch'
-  /** 是否自动换行 */
-  wrap?: boolean
-  /** `boolean` 须写在联合类型最前，否则模板里单独写 `gap` 会被解析成 `""` 而不是 `true` */
-  gap?: boolean | number | string
-  flex?: number | string
-}
diff --git a/frontend-pc/src/components/GiForm/GiForm.vue b/frontend-pc/src/components/GiForm/GiForm.vue
deleted file mode 100644
index b3d3462..0000000
--- a/frontend-pc/src/components/GiForm/GiForm.vue
+++ /dev/null
@@ -1,273 +0,0 @@
-<!--
-  @file GiForm 组件
-  @description 动态表单组件，支持多种表单项类型、栅格布局、搜索模式等功能
--->
-<template>
-  <a-form ref="formRef" v-bind="formProps" :model="modelValue">
-    <a-grid class="w-full" :col-gap="8" v-bind="props.gridProps" :collapsed="collapsed && search">
-      <!-- 表单项列表 -->
-      <template v-for="item in columns" :key="item.field">
-        <a-grid-item v-if="!isHide(item)" v-bind="item.gridItemProps || props.gridItemProps"
-          :span="item.span || item.gridItemProps?.span || props.gridItemProps?.span">
-          <a-form-item v-bind="item.formItemProps" :field="item.field" :rules="getFormItemRules(item)"
-            :disabled="isDisabled(item)">
-            <!-- 表单项标签 -->
-            <template #label>
-              <component :is="item.labelRender" v-if="item.labelRender"></component>
-              <template v-else>{{ item.label }}</template>
-            </template>
-
-            <!-- 表单项内容 -->
-            <slot v-if="getStringType(item.type) === 'slot'" :name="item.field"></slot>
-            <slot v-else-if="getStringType(item.type) !== 'group-title'" :name="item.field"
-              v-bind="{ disabled: isDisabled(item) }">
-              <component :is="(COMP_MAP[getStringType(item.type)] || item.type)" v-bind="getComponentBindProps(item)"
-                :model-value="modelValue[getModelField(item)]"
-                @update:model-value="updateValue($event, getModelField(item))">
-                <!-- 组件插槽 -->
-                <template v-for="(slotValue, slotKey) in item?.slots" :key="slotKey" #[slotKey]="scope">
-                  <template v-if="typeof slotValue === 'string'">{{ slotValue }}</template>
-                  <template v-else-if="slotValue">
-                    <component :is="slotValue(scope)"></component>
-                  </template>
-                </template>
-              </component>
-            </slot>
-
-            <!-- 分组标题 -->
-            <slot v-else :name="item.field">
-              <a-alert>{{ item.label }}</a-alert>
-            </slot>
-
-            <!-- 表单项插槽 -->
-            <template v-for="(slotValue, slotKey) in item?.formItemSlots" :key="slotKey" #[slotKey]>
-              <template v-if="typeof slotValue === 'string'">{{ slotValue }}</template>
-              <component :is="slotValue" v-else></component>
-            </template>
-          </a-form-item>
-        </a-grid-item>
-      </template>
-
-      <!-- 搜索按钮组 -->
-      <a-grid-item v-if="props.search" :key="!props.suffix ? String(collapsed) : undefined" v-bind="props.gridItemProps"
-        :span="props.gridItemProps?.span" :suffix="props.search && (props.suffix || (!props.suffix && collapsed))">
-        <a-space wrap style="margin-bottom: 8px">
-          <slot name="suffix">
-            <a-button type="primary" @click="emit('search')">
-              <template #icon><icon-search /></template>
-              <template #default>{{ props.searchBtnText }}</template>
-            </a-button>
-            <a-button @click="emit('reset')">重置</a-button>
-            <a-button v-if="!props.hideFoldBtn" class="gi-form__fold-btn" type="text" size="mini"
-              @click="collapsed = !collapsed">
-              <template #icon>
-                <icon-up v-if="!collapsed" />
-                <icon-down v-else />
-              </template>
-              <template #default>{{ collapsed ? '展开' : '收起' }}</template>
-            </a-button>
-          </slot>
-        </a-space>
-      </a-grid-item>
-    </a-grid>
-  </a-form>
-</template>
-
-<script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
-import type { Component } from 'vue'
-import type { FormColumnItem, FormProps as Props } from './type'
-import * as A from '@arco-design/web-vue'
-import { omit } from 'lodash-es'
-
-// FormProps 默认值
-const props = withDefaults(defineProps<Props>(), {
-  autoLabelWidth: true,
-  scrollToFirstError: true,
-  defaultCollapsed: true,
-  search: false,
-  gridItemProps: () => ({ span: { xs: 24, sm: 12 } }),
-  searchBtnText: '搜索',
-  hideFoldBtn: false,
-  suffix: true,
-  fc: () => ({})
-})
-
-/** Emits 类型定义 */
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: Record<string, any>): void
-  (e: 'search'): void
-  (e: 'reset'): void
-}>()
-
-const COMP_MAP: Record<string, Component> = {
-  'input': A.Input,
-  'input-number': A.InputNumber,
-  'input-tag': A.InputTag,
-  'input-search': A.InputSearch,
-  'textarea': A.Textarea,
-  'select': A.Select,
-  'tree-select': A.TreeSelect,
-  'radio-group': A.RadioGroup,
-  'checkbox-group': A.CheckboxGroup,
-  'date-picker': A.DatePicker,
-  'year-picker': A.YearPicker,
-  'quarter-picker': A.QuarterPicker,
-  'month-picker': A.MonthPicker,
-  'week-picker': A.WeekPicker,
-  'time-picker': A.TimePicker,
-  'range-picker': A.RangePicker,
-  'color-picker': A.ColorPicker,
-  'rate': A.Rate,
-  'switch': A.Switch,
-  'slider': A.Slider,
-  'cascader': A.Cascader,
-  'upload': A.Upload,
-  'auto-complete': A.AutoComplete,
-  'mention': A.Mention
-}
-
-/** 表单属性计算 */
-const formProps = computed(() => {
-  const baseProps = omit(props, [
-    'columns',
-    'gridProps',
-    'gridItemProps',
-    'search',
-    'defaultCollapsed',
-    'searchBtnText',
-    'hideFoldBtn',
-    'suffix',
-    'layout',
-    'fc'
-  ])
-  return {
-    layout: ((props.search ? 'inline' : 'horizontal') as FormInstance['layout']),
-    ...baseProps
-  }
-})
-
-/** 组件状态 */
-const formRef = useTemplateRef('formRef')
-/** 是否折叠 */
-const collapsed = ref(props.defaultCollapsed)
-/** 数据字典（预留功能：用于动态加载选项数据，可通过 request 和 format 配置项加载） */
-const dicData: Record<string, unknown> = reactive({})
-
-/** 静态配置 */
-const STATIC_PROPS = new Map<FormColumnItem['type'], Partial<FormColumnItem['props']>>([
-  ['input', { allowClear: true, maxLength: 20 }],
-  ['textarea', { allowClear: false, maxLength: 200 }],
-  ['input-tag', { allowClear: true }],
-  ['mention', { allowClear: true }],
-  ['select', { allowClear: true }],
-  ['tree-select', { allowClear: true }],
-  ['cascader', { allowClear: true }],
-  ['date-picker', { allowClear: true }],
-  ['time-picker', { allowClear: true }]
-])
-
-/** 占位符映射表 */
-const PLACEHOLDER_MAP: Record<string, (label?: string) => string | undefined> = {
-  'input': (label) => `请输入${label}`,
-  'input-tag': (label) => `请输入${label}`,
-  'mention': (label) => `请输入${label}`,
-  'textarea': (label) => `请填写${label}`,
-  'select': (label) => `请选择${label}`,
-  'input-search': (label) => `请选择${label}`,
-  'tree-select': (label) => `请选择${label}`,
-  'cascader': (label) => `请选择${label}`,
-  'date-picker': () => '请选择日期',
-  'time-picker': () => '请选择时间'
-}
-
-/** 获取字符串类型的表单项类型 */
-const getStringType = (type: FormColumnItem['type']): string => {
-  return typeof type === 'string' ? type : ''
-}
-
-/** 获取模型字段名 */
-const getModelField = (item: FormColumnItem) => item?.fieldName || item.field
-
-/** 获取组件默认占位 */
-const getPlaceholder = (item: FormColumnItem) => {
-  if (!item.type || typeof item.type !== 'string') return undefined
-  const placeholderFn = PLACEHOLDER_MAP[item.type]
-  return placeholderFn ? placeholderFn(item.label) : undefined
-}
-
-/** 获取选项数据 */
-const getOptions = (item: FormColumnItem) => {
-  if (!item.type) return undefined
-  /** 需要选项数据的组件类型 */
-  const arr = ['select', 'tree-select', 'cascader', 'radio-group', 'checkbox-group']
-  if (typeof item.type === 'string' && arr.includes(item.type)) {
-    return dicData[item.field] || []
-  }
-  return undefined
-}
-
-/** 获取组件绑定属性 */
-const getComponentBindProps = (item: FormColumnItem) => {
-  return {
-    ...STATIC_PROPS.get(item.type) || {},
-    placeholder: getPlaceholder(item),
-    options: getOptions(item),
-    ...item.props
-  }
-}
-
-/** 表单数据更新处理 */
-const updateValue = (value: unknown, field: string) => {
-  const newValue = { ...props.modelValue, [field]: value }
-  emit('update:modelValue', newValue)
-}
-
-/** 获取表单项校验规则 */
-const getFormItemRules = (item: FormColumnItem) => {
-  if (item.required) {
-    return [
-      { required: true, message: `${item.label}为必填项` },
-      ...(Array.isArray(item.rules) ? item.rules : [])
-    ]
-  }
-  if (props.fc?.[item.field]?.required) {
-    return [
-      {
-        required: props.fc?.[item.field]?.required,
-        message: `${item.label}为必填项`
-      },
-      ...(Array.isArray(item.rules) ? item.rules : [])
-    ]
-  }
-  return item.rules
-}
-
-/** 判断表单项是否隐藏 */
-const isHide = (item: FormColumnItem) => {
-  if (typeof item.hide === 'boolean') return item.hide
-  if (typeof item.hide === 'function') {
-    return item.hide(props.modelValue)
-  }
-  if (props.fc?.[item.field]?.hidden) return true
-  return false
-}
-
-/** 判断表单项是否禁用 */
-const isDisabled = (item: FormColumnItem) => {
-  if (typeof item.disabled === 'boolean') return item.disabled
-  if (typeof item.disabled === 'function') {
-    return item.disabled(props.modelValue)
-  }
-  if (props.fc?.[item.field]?.disabled === true) return true
-  if (item.disabled === undefined) return (item?.props?.disabled as boolean) ?? false
-}
-
-defineExpose({ formRef })
-</script>
-
-<style lang="scss" scoped>
-.gi-form__fold-btn {
-  padding: 0 5px;
-}
-</style>
diff --git a/frontend-pc/src/components/GiForm/index.ts b/frontend-pc/src/components/GiForm/index.ts
deleted file mode 100644
index 219e98e..0000000
--- a/frontend-pc/src/components/GiForm/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Form from './GiForm.vue'
-
-export type * from './type'
-export type FormInstance = InstanceType<typeof Form>
-export { Form as GiForm }
diff --git a/frontend-pc/src/components/GiForm/type.ts b/frontend-pc/src/components/GiForm/type.ts
deleted file mode 100644
index c37bc0b..0000000
--- a/frontend-pc/src/components/GiForm/type.ts
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * @file GiForm 组件类型定义
- * @description 包含表单组件所需的所有类型定义，用于构建动态表单
- */
-
-import type * as A from '@arco-design/web-vue'
-import type { GridItemProps } from '@arco-design/web-vue'
-import type { Component, VNode } from 'vue'
-import type { MergeMultiple } from '@/types/tool'
-
-type FormItemProps = A.FormItemInstance['$props']
-
-/** 支持的表单项类型 */
-export type FormColumnItemType
-  = | 'input' // 输入框
-    | 'input-number' // 数字输入框
-    | 'input-tag' // 标签输入框
-    | 'input-search' // 搜索框
-    | 'textarea' // 文本域
-    | 'select' // 选择器
-    | 'tree-select' // 树选择器
-    | 'radio' // 单选框
-    | 'radio-group' // 单选框组
-    | 'checkbox' // 复选框
-    | 'checkbox-group' // 复选框组
-    | 'date-picker' // 日期选择器
-    | 'year-picker' // 年份选择器
-    | 'quarter-picker' // 季度选择器
-    | 'month-picker' // 月份选择器
-    | 'week-picker' // 周选择器
-    | 'time-picker' // 时间选择器
-    | 'range-picker' // 范围选择器
-    | 'color-picker' // 颜色选择器
-    | 'rate' // 评分
-    | 'switch' // 开关
-    | 'slider' // 滑块
-    | 'cascader' // 级联选择器
-    | 'upload' // 上传
-    | 'auto-complete' // 自动完成
-    | 'mention' // 提及
-    | 'group-title' // 分组标题
-    | 'slot' // 插槽，由父组件通过具名插槽渲染内容
-    | Component
-
-/** 组件属性合并类型 */
-export type FormComponentProps = MergeMultiple<[
-  Partial<A.InputInstance['$props']>,
-  Partial<A.InputNumberInstance['$props']>,
-  Partial<A.InputTagInstance['$props']>,
-  Partial<A.InputSearchInstance['$props']>,
-  Partial<A.TextareaInstance['$props']>,
-  Partial<A.SelectInstance['$props']>,
-  Partial<A.TreeSelectInstance['$props']>,
-  Partial<A.RadioInstance['$props']>,
-  Partial<A.RadioGroupInstance['$props']>,
-  Partial<A.CheckboxInstance['$props']>,
-  Partial<A.CheckboxGroupInstance['$props']>,
-  Partial<A.DatePickerInstance['$props']>,
-  Partial<A.YearPickerInstance['$props']>,
-  Partial<A.QuarterPickerInstance['$props']>,
-  Partial<A.MonthPickerInstance['$props']>,
-  Partial<A.WeekPickerInstance['$props']>,
-  Partial<A.TimePickerInstance['$props']>,
-  Partial<A.RangePickerInstance['$props']>,
-  Partial<A.ColorPickerInstance['$props']>,
-  Partial<A.RateInstance['$props']>,
-  Partial<A.SwitchInstance['$props']>,
-  Partial<A.SliderInstance['$props']>,
-  Partial<A.CascaderInstance['$props']>,
-  Partial<A.UploadInstance['$props']>,
-  Partial<A.AutoCompleteInstance['$props']>,
-  Partial<A.MentionInstance['$props']>,
-  Partial<A.AlertInstance['$props']>
-]>
-
-/** 选项类型定义 */
-export type FormColumnItemOptions
-  = MergeMultiple<[A.SelectInstance['$props']['options'], A.RadioGroupInstance['$props']['options'], A.CheckboxGroupInstance['$props']['options'], A.CascaderInstance['$props']['options']]>
-
-/** 数据源类型定义 */
-export type FormColumnItemData
-  = MergeMultiple<[A.TreeSelectInstance['$props']['data'], A.AutoCompleteInstance['$props']['data'], A.MentionInstance['$props']['data']]>
-
-/** 自动完成组件插槽 */
-type AutoCompleteSlots = {
-  option: (e: { data: (string | number | A.SelectOptionData | A.SelectOptionGroup)[] }) => VNode
-  footer: () => VNode
-}
-
-/** 级联选择器插槽 */
-type CascaderSlots = {
-  'label': (e: { data: A.CascaderOption }) => VNode
-  'prefix': () => VNode
-  'arrow-icon': () => VNode
-  'loading-icon': () => VNode
-  'search-icon': () => VNode
-  'empty': () => VNode
-  'option': (e: { data: A.CascaderOption }) => VNode
-}
-
-/** 复选框组插槽 */
-type CheckboxGroupSlots = {
-  checkbox: (e: { checked: boolean, disabled: string }) => VNode
-  label: (e: { data: A.CheckboxOption }) => VNode
-}
-
-/** 单选框组插槽 */
-type RadioGroupSlots = {
-  radio: (e: { checked: boolean, disabled: string }) => VNode
-  label: (e: { data: any }) => VNode
-}
-
-/** 日期选择器插槽 */
-type DatePickerSlots = {
-  'prefix': () => VNode
-  'suffix-icon': () => VNode
-  'icon-next-double': () => VNode
-  'icon-prev-double': () => VNode
-  'icon-next': () => VNode
-  'icon-prev': () => VNode
-  'cell': (e: { data: Date }) => VNode
-  'extra': () => VNode
-}
-
-/** 输入框插槽 */
-type InputSlots = {
-  append: (() => VNode) | string
-  prepend: (() => VNode) | string
-  suffix: (() => VNode) | string
-  prefix: (() => VNode) | string
-}
-
-/** 数字输入框插槽 */
-type InputNumberSlots = {
-  minus: (() => VNode) | string
-  plus: (() => VNode) | string
-  append: (() => VNode) | string
-  prepend: (() => VNode) | string
-  suffix: (() => VNode) | string
-}
-
-/** 标签输入框插槽 */
-type InputTagSlots = {
-  tag: (e: { data: A.TagData }) => VNode
-  prefix: (() => VNode) | string
-  suffix: (() => VNode) | string
-}
-
-/** 评分插槽 */
-type RateSlots = {
-  character: (e: { index: number }) => VNode
-}
-
-/** 选择器插槽 */
-type SelectSlots = {
-  'trigger': () => VNode
-  'prefix': () => VNode
-  'search-icon': () => VNode
-  'loading-icon': () => VNode
-  'arrow-icon': () => VNode
-  'footer': () => VNode
-  'header': () => VNode
-  'label': (e: { data: A.SelectOptionData }) => VNode
-  'option': (e: { data: A.SelectOptionData }) => VNode
-  'empty': () => VNode
-}
-
-/** 开关插槽 */
-type SwitchSlots = {
-  'checked-icon': () => VNode
-  'unchecked-icon': () => VNode
-  'checked': () => VNode
-  'unchecked': () => VNode
-}
-
-/** 树选择器插槽 */
-type TreeSelectSlots = {
-  'trigger': () => VNode
-  'prefix': () => VNode
-  'label': (e: { data: any }) => VNode
-  'header': () => VNode
-  'loader': () => VNode
-  'empty': () => VNode
-  'footer': () => VNode
-  'tree-slot-extra': () => VNode
-  'tree-slot-title': (e: { title: string }) => VNode
-  'tree-slot-icon': (e: { node: A.TreeNodeData }) => VNode
-  'tree-slot-switcher-icon': () => VNode
-}
-
-/** 提及插槽 */
-type MentionSlots = {
-  option: (e: { data: any }) => VNode
-}
-
-/** 组件插槽合并类型 */
-export type FormComponentSlots = MergeMultiple<[
-  AutoCompleteSlots,
-  CascaderSlots,
-  CheckboxGroupSlots,
-  RadioGroupSlots,
-  DatePickerSlots,
-  InputSlots,
-  InputNumberSlots,
-  InputTagSlots,
-  RateSlots,
-  SelectSlots,
-  SwitchSlots,
-  TreeSelectSlots,
-  MentionSlots
-]>
-
-/** 表单项插槽接口 */
-export type FormColumnItemSlots = FormComponentSlots
-
-/** 表单项显隐控制类型 */
-export type FormColumnItemHide<F> = boolean | ((form: F) => boolean)
-export type FormColumnItemDisabled<F> = boolean | ((form: F) => boolean)
-
-/** 表单项数据请求相关类型 */
-export type FormColumnItemRequest<F = any> = (form: F) => Promise<any>
-export type FormColumnItemFormat<T = any> = (res: T) => FormColumnItemOptions | FormColumnItemData
-
-/** 表单列配置项接口 */
-export interface FormColumnItem<F = any> {
-  /** 表单项类型 */
-  type?: FormColumnItemType
-  /** 标签名 */
-  label?: string
-  /** 字段名 */
-  field: string
-  fieldName?: string
-  /** 自定义渲染label */
-  labelRender?: (() => VNode)
-  /** 表单项属性 */
-  props?: Partial<FormComponentProps>
-  /** 表单项校验规则 */
-  rules?: FormItemProps['rules']
-  /** 是否必填 */
-  required?: boolean
-  /** 栅格属性 */
-  gridItemProps?: GridItemProps
-  /** 表单项属性 */
-  formItemProps?: FormItemProps
-  /** 表单项插槽 */
-  slots?: FormColumnItemSlots
-  /** 表单项组件插槽 */
-  formItemSlots?: Record<string, string | VNode | (() => VNode)>
-  /** 是否隐藏（支持函数） */
-  hide?: boolean | ((model: F) => boolean)
-  /** 是否禁用（支持函数） */
-  disabled?: boolean | ((model: F) => boolean)
-  /** 栅格跨度 */
-  span?: number | Record<string, number>
-}
-
-/** Props 类型定义 */
-export interface FormProps {
-  /** 表单数据对象 */
-  modelValue: any
-  /** 表单布局方式 */
-  layout?: A.FormInstance['layout']
-  /** 表单尺寸 */
-  size?: A.FormInstance['size']
-  /** 标签布局属性 */
-  labelColProps?: A.FormInstance['labelColProps']
-  /** 表单项布局属性 */
-  wrapperColProps?: A.FormInstance['wrapperColProps']
-  /** 标签对齐方式 */
-  labelAlign?: A.FormInstance['labelAlign']
-  /** 是否禁用表单 */
-  disabled?: A.FormInstance['disabled']
-  /** 表单校验规则 */
-  rules?: A.FormInstance['rules']
-  /** 自动标签宽度 */
-  autoLabelWidth?: A.FormInstance['autoLabelWidth']
-  /** 表单ID */
-  id?: A.FormInstance['id']
-  /** 是否滚动到第一个错误项 */
-  scrollToFirstError?: A.FormInstance['scrollToFirstError']
-  /** 表单列配置 */
-  columns: FormColumnItem[]
-  /** 栅格布局属性 */
-  gridProps?: A.GridProps
-  /** 栅格项属性 */
-  gridItemProps?: GridItemProps
-  /** 是否为搜索模式 */
-  search?: boolean
-  /** 默认是否折叠 */
-  defaultCollapsed?: boolean
-  /** 搜索按钮文字 */
-  searchBtnText?: string
-  /** 是否隐藏折叠按钮 */
-  hideFoldBtn?: boolean
-  /** 是否显示后缀 */
-  suffix?: boolean
-  /** 表单控制 */
-  fc?: Record<string, { disabled?: boolean, hidden?: boolean, required?: boolean }>
-}
diff --git a/frontend-pc/src/components/GiIconBox/GiIconBox.vue b/frontend-pc/src/components/GiIconBox/GiIconBox.vue
deleted file mode 100644
index 2d184bb..0000000
--- a/frontend-pc/src/components/GiIconBox/GiIconBox.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<!--
-  @file GiIconBox 组件 - 图标容器
-  @description 提供可自定义的图标容器，支持不同颜色、尺寸和形状
--->
-<template>
-  <div class="gi-icon-box" :class="getClass" :style="getStyle">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import type { IconBoxProps as Props } from './type'
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<Props>(), {
-  color: '#165DFF',
-  size: 20,
-  shape: 'square'
-})
-
-/** 预设状态颜色 */
-const STATUS_COLORS = ['primary', 'success', 'warning', 'danger'] as const
-
-/** 计算容器的 class */
-const getClass = computed(() => {
-  const classes = [
-    STATUS_COLORS.includes(props.color as typeof STATUS_COLORS[number])
-    && `gi-icon-box--${props.color}`,
-    props.shape && `gi-icon-box__shape--${props.shape}`
-  ].filter(Boolean)
-
-  return classes.join(' ')
-})
-
-/** 计算容器的样式 */
-const getStyle = computed((): CSSProperties => {
-  const style: CSSProperties = {}
-
-  // 处理自定义颜色（纯色或 linear-gradient / radial-gradient）
-  if (!STATUS_COLORS.includes(props.color as typeof STATUS_COLORS[number])) {
-    const c = String(props.color)
-    if (/gradient\(/i.test(c)) {
-      style.background = c
-    } else {
-      style.backgroundColor = c
-    }
-  }
-
-  // 处理自定义尺寸
-  if (props.size !== 20) {
-    style.width = `${props.size}px`
-    style.height = `${props.size}px`
-  }
-
-  return style
-})
-</script>
-
-<style lang="scss" scoped>
-.gi-icon-box {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  color: #fff;
-  transition: all 0.2s ease;
-
-  // 状态颜色
-  &--primary {
-    background-color: rgb(var(--primary-6));
-  }
-
-  &--success {
-    background-color: rgb(var(--success-6));
-  }
-
-  &--warning {
-    background-color: rgb(var(--warning-6));
-  }
-
-  &--danger {
-    background-color: rgb(var(--danger-6));
-  }
-
-  // 形状样式
-  &__shape {
-    &--square {
-      border-radius: 4px;
-    }
-
-    &--round {
-      border-radius: 50%;
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiIconBox/index.ts b/frontend-pc/src/components/GiIconBox/index.ts
deleted file mode 100644
index 255bffc..0000000
--- a/frontend-pc/src/components/GiIconBox/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import IconBox from './GiIconBox.vue'
-
-export * from './type'
-export type IconBoxInstance = InstanceType<typeof IconBox>
-export { IconBox as GiIconBox }
diff --git a/frontend-pc/src/components/GiIconBox/type.ts b/frontend-pc/src/components/GiIconBox/type.ts
deleted file mode 100644
index 180d504..0000000
--- a/frontend-pc/src/components/GiIconBox/type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/** 组件属性定义 */
-export interface IconBoxProps {
-  color?: 'primary' | 'success' | 'warning' | 'danger' | string
-  size?: number
-  shape?: 'square' | 'round'
-}
diff --git a/frontend-pc/src/components/GiInputSearch/GiInputSearch.vue b/frontend-pc/src/components/GiInputSearch/GiInputSearch.vue
deleted file mode 100644
index fbdf1e5..0000000
--- a/frontend-pc/src/components/GiInputSearch/GiInputSearch.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <a-input-group class="gi-input-search">
-    <a-input v-model="model" :placeholder="props.placeholder" readonly></a-input>
-    <template v-if="!props.readonly">
-      <a-button :disabled="props.disabled" @click="emit('search', model)">
-        <icon-search />
-      </a-button>
-      <a-button :disabled="props.disabled" @click="emit('clear')">
-        <icon-close />
-      </a-button>
-    </template>
-  </a-input-group>
-</template>
-
-<script setup lang="ts">
-import type { InputSearchProps as Props } from './type'
-
-const model = defineModel({ type: String, default: '' })
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: '请选择',
-  disabled: false,
-  readonly: false
-})
-
-const emit = defineEmits<{
-  (e: 'search', value: string): void
-  (e: 'clear'): void
-}>()
-</script>
-
-<style lang="scss" scoped>
-.gi-input-search {
-  display: flex;
-  width: 100%;
-
-  > :deep(.arco-btn) {
-    flex-shrink: 0;
-
-    &:hover,
-    &:active {
-      z-index: 1;
-    }
-  }
-
-  > :deep(.arco-btn + .arco-btn) {
-    margin-left: -1px;
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiInputSearch/index.ts b/frontend-pc/src/components/GiInputSearch/index.ts
deleted file mode 100644
index 9e3fb86..0000000
--- a/frontend-pc/src/components/GiInputSearch/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import InputSearch from './GiInputSearch.vue'
-
-export type InputSearchInstance = InstanceType<typeof InputSearch>
-export * from './type'
-export { InputSearch as GiInputSearch }
diff --git a/frontend-pc/src/components/GiInputSearch/type.ts b/frontend-pc/src/components/GiInputSearch/type.ts
deleted file mode 100644
index b6cbf1c..0000000
--- a/frontend-pc/src/components/GiInputSearch/type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface InputSearchProps {
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-}
diff --git a/frontend-pc/src/components/GiOption/GiOption.vue b/frontend-pc/src/components/GiOption/GiOption.vue
deleted file mode 100644
index 8a35cb8..0000000
--- a/frontend-pc/src/components/GiOption/GiOption.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <ul class="gi-option">
-    <slot></slot>
-  </ul>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'GiOption' })
-</script>
-
-<style lang="scss" scoped>
-.gi-option {
-  width: 100%;
-  min-width: 120px;
-}
-</style>
diff --git a/frontend-pc/src/components/GiOption/GiOptionItem.vue b/frontend-pc/src/components/GiOption/GiOptionItem.vue
deleted file mode 100644
index 72f9550..0000000
--- a/frontend-pc/src/components/GiOption/GiOptionItem.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<!--
-  @file GiOptionItem 组件 - 选项列表项
-  @description 提供统一的选项列表项样式，支持图标和更多操作
--->
-<template>
-  <li class="gi-option-item" :class="{ 'gi-option-item--more': props.more, 'gi-option-item--active': props.active }"
-    @click="handleClick">
-    <div class="gi-option-item__wrapper">
-      <span class="gi-option-item__icon">
-        <slot name="icon">
-          <Icon v-if="props.icon" :icon="props.icon" :width="16" :height="16" />
-        </slot>
-      </span>
-      <slot>
-        <span class="gi-option-item__label">{{ props.label }}</span>
-      </slot>
-    </div>
-    <IconRight v-if="props.more" />
-  </li>
-</template>
-
-<script setup lang="ts">
-import type { OptionItemProps as Props } from './type'
-import { Icon } from '@iconify/vue'
-
-defineOptions({ name: 'GiOptionItem' })
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: '',
-  label: '',
-  more: false,
-  active: false
-})
-
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-
-/** 处理点击事件 */
-const handleClick = () => {
-  emit('click')
-}
-</script>
-
-<style lang="scss" scoped>
-.gi-option-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 34px;
-  padding: 0 5px 0 10px;
-  font-size: 14px;
-  line-height: 34px;
-  color: var(--color-text-2);
-  cursor: pointer;
-  user-select: none;
-
-  &__wrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    margin-right: 8px;
-  }
-
-  &--active,
-  &:hover {
-    color: rgb(var(--primary-6));
-    background: var(--color-primary-light-1);
-  }
-
-  &--more {
-    justify-content: space-between;
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiOption/index.ts b/frontend-pc/src/components/GiOption/index.ts
deleted file mode 100644
index 811323f..0000000
--- a/frontend-pc/src/components/GiOption/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Option from './GiOption.vue'
-import OptionItem from './GiOptionItem.vue'
-
-export type OptionInstance = InstanceType<typeof Option>
-export type OptionItemInstance = InstanceType<typeof OptionItem>
-export * from './type'
-export { Option as GiOption, OptionItem as GiOptionItem }
diff --git a/frontend-pc/src/components/GiOption/type.ts b/frontend-pc/src/components/GiOption/type.ts
deleted file mode 100644
index bbddcce..0000000
--- a/frontend-pc/src/components/GiOption/type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/** 组件属性定义 */
-export interface OptionItemProps {
-  /** 图标名称 */
-  icon?: string
-  /** 选项文本 */
-  label?: string
-  /** 是否显示更多图标 */
-  more?: boolean
-  /** 是否激活状态 */
-  active?: boolean
-}
diff --git a/frontend-pc/src/components/GiPageLayout/GiPageLayout.vue b/frontend-pc/src/components/GiPageLayout/GiPageLayout.vue
deleted file mode 100644
index f2511cb..0000000
--- a/frontend-pc/src/components/GiPageLayout/GiPageLayout.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-  <a-split v-model:size="size" class="gi-page-layout" :class="getClass" min="1px" max="600px" :disabled="!slots.left">
-    <template #first>
-      <div v-if="slots.left" class="gi-page-layout__left" :style="props.leftStyle">
-        <slot name="left"></slot>
-      </div>
-    </template>
-    <template #second>
-      <div v-if="slots.header" class="gi-page-layout__header" :style="props.headerStyle">
-        <slot name="header"></slot>
-      </div>
-      <div class="gi-page-layout__body" :style="props.bodyStyle">
-        <slot></slot>
-      </div>
-    </template>
-    <template v-if="props.collapsed || isMobile" #resize-trigger-icon>
-      <SplitButton :collapsed="parseInt(size) < 20" @click="handleClick"></SplitButton>
-    </template>
-  </a-split>
-</template>
-
-<script setup lang='ts'>
-import type { PageLayoutProps as Props } from './type'
-import { browse } from 'xe-utils'
-import SplitButton from './SplitButton.vue'
-
-defineOptions({ name: 'GiPageLayout' })
-
-const props = withDefaults(defineProps<Props>(), {
-  size: '270px',
-  margin: false,
-  inner: false,
-  headerBordered: true,
-  leftStyle: () => ({}),
-  headerStyle: () => ({}),
-  bodyStyle: () => ({}),
-  collapsed: false,
-  bgTransparent: false
-})
-
-/** 组件插槽定义 */
-defineSlots<{
-  header: () => void
-  left: () => void
-  default: () => void
-}>()
-
-const slots = useSlots()
-const isMobile = browse().isMobile ?? false
-const size = ref(isMobile ? '0px' : props.size)
-const collapsing = ref(false)
-
-const getClass = computed(() => {
-  return {
-    'gi-page-layout--disabled': !slots.left,
-    'gi-page-layout--margin': props.margin,
-    'gi-page-layout--inner': props.inner,
-    'gi-page-layout--has-header': slots.header,
-    'gi-page-layout--header-bordered': props.headerBordered,
-    'gi-page-layout--collapsing': collapsing.value,
-    'gi-page-layout--bg-transparent': props.bgTransparent
-  }
-})
-
-function handleClick() {
-  collapsing.value = true
-  setTimeout(() => {
-    collapsing.value = false
-  }, 300)
-  size.value = Number.parseInt(size.value) > 20 ? '0px' : props.size
-}
-</script>
-
-<style lang='scss' scoped>
-:deep(.arco-split-pane) {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-:deep(.arco-split-trigger) {
-  position: relative;
-}
-
-:deep(.arco-split-trigger-icon-wrapper) {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 9;
-  width: 16px;
-  height: 100%;
-  user-select: none;
-  background-color: transparent;
-  transform: translate(-50%, -50%);
-
-  .arco-split-trigger-icon {
-    display: none;
-  }
-
-  &:hover,
-  &:active {
-    &::before {
-      width: 2px;
-      background-color: var(--color-primary-light-2);
-    }
-  }
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: 1px;
-    height: 100%;
-    content: '';
-    background-color: var(--color-border-2);
-    transform: translateX(-50%);
-  }
-}
-
-.gi-page-layout {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  width: auto;
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--color-bg-1);
-}
-
-.gi-page-layout--bg-transparent {
-  background-color: transparent;
-}
-
-.gi-page-layout--margin {
-  margin: var(--margin);
-}
-
-.gi-page-layout--inner {
-  .gi-page-layout__header {
-    padding: 0;
-  }
-
-  .gi-page-layout__body {
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-  }
-}
-
-.gi-page-layout--header-bordered {
-  .gi-page-layout__header {
-    border-bottom: 1px solid var(--color-border);
-  }
-}
-
-.gi-page-layout--disabled {
-  :deep(> .arco-split-pane-first) {
-    display: none;
-  }
-}
-
-.gi-page-layout--collapsing {
-  :deep(> .arco-split-pane-first) {
-    transition: flex-basis 0.3s;
-  }
-}
-
-.gi-page-layout__left {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: var(--padding);
-  overflow: hidden;
-}
-
-.gi-page-layout__header {
-  box-sizing: border-box;
-  padding: var(--padding);
-  padding-bottom: 0;
-}
-
-.gi-page-layout__body {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding: var(--padding);
-  overflow: hidden;
-}
-</style>
diff --git a/frontend-pc/src/components/GiPageLayout/SplitButton.vue b/frontend-pc/src/components/GiPageLayout/SplitButton.vue
deleted file mode 100644
index 820ab64..0000000
--- a/frontend-pc/src/components/GiPageLayout/SplitButton.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
-  @file GiSplitButton 组件 - 分割面板切换按钮
-  @description 提供可折叠面板的切换按钮，支持多种样式和交互效果
--->
-<template>
-  <div class="gi-split-button" :class="buttonClass" @click="handleClick">
-    <icon-right v-if="collapsed" :size="iconSize" />
-    <icon-left v-else :size="iconSize" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-/** 按钮类型 */
-type ButtonType = 'default' | 'circle'
-
-/** 组件属性定义 */
-interface Props {
-  /** 是否折叠状态 */
-  collapsed?: boolean
-  /** 按钮类型 */
-  type?: ButtonType
-  /** 图标大小 */
-  iconSize?: number
-  /** 是否禁用 */
-  disabled?: boolean
-}
-
-/** 组件事件定义 */
-interface Emits {
-  (e: 'click'): void
-  (e: 'update:collapsed', value: boolean): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  collapsed: false,
-  type: 'circle',
-  iconSize: 14,
-  disabled: false
-})
-
-const emit = defineEmits<Emits>()
-
-/** 计算按钮类名 */
-const buttonClass = computed(() => [
-  `gi-split-button--${props.type}`,
-  {
-    'is-collapsed': props.collapsed,
-    'is-disabled': props.disabled
-  }
-])
-
-/** 处理点击事件 */
-const handleClick = () => {
-  if (props.disabled) return
-  emit('click')
-  emit('update:collapsed', !props.collapsed)
-}
-</script>
-
-<style lang="scss" scoped>
-.gi-split-button {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  background-color: var(--color-bg-1);
-  border: 1px solid var(--color-border-2);
-  transform: translateY(-50%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform, background-color, border-color;
-
-  &.is-disabled {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  &--default {
-    left: 0;
-    width: 18px;
-    height: 40px;
-    box-shadow: 2px 0 6px rgb(0 0 0 / 10%);
-  }
-
-  &--circle {
-    left: -4px;
-    width: 24px;
-    height: 24px;
-    overflow: hidden;
-    border-radius: 50%;
-    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiPageLayout/index.ts b/frontend-pc/src/components/GiPageLayout/index.ts
deleted file mode 100644
index 7050a1b..0000000
--- a/frontend-pc/src/components/GiPageLayout/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import PageLayout from './GiPageLayout.vue'
-
-export type PageLayoutInstance = InstanceType<typeof PageLayout>
-export * from './type'
-export { PageLayout as GiPageLayout }
diff --git a/frontend-pc/src/components/GiPageLayout/type.ts b/frontend-pc/src/components/GiPageLayout/type.ts
deleted file mode 100644
index e25e74e..0000000
--- a/frontend-pc/src/components/GiPageLayout/type.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-/** 组件属性定义 */
-export interface PageLayoutProps {
-  size?: string
-  margin?: boolean
-  inner?: boolean
-  headerBordered?: boolean
-  leftStyle?: CSSProperties
-  headerStyle?: CSSProperties
-  bodyStyle?: CSSProperties
-  collapsed?: boolean
-  bgTransparent?: boolean
-}
diff --git a/frontend-pc/src/components/GiTable/GiTable.vue b/frontend-pc/src/components/GiTable/GiTable.vue
deleted file mode 100644
index 5efa51b..0000000
--- a/frontend-pc/src/components/GiTable/GiTable.vue
+++ /dev/null
@@ -1,440 +0,0 @@
-<!--
-  @file GiTable 组件
-  @description 增强型表格组件，支持全屏、列设置、斑马纹、边框等功能
--->
-<template>
-  <div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }">
-    <!-- 表格头部区域 -->
-    <a-row justify="space-between" align="center" class="g-row-tool">
-      <!-- 左侧标题区域 -->
-      <a-space wrap>
-        <slot name="custom-title">
-          <div class="gi-table__title">{{ props.title }}</div>
-        </slot>
-      </a-space>
-
-      <!-- 表格操作按钮组 -->
-      <a-space wrap>
-        <slot name="custom-extra"></slot>
-        <!-- 斑马纹开关 -->
-        <a-tooltip content="斑马纹">
-          <a-switch v-model="stripe" size="small" type="round" />
-        </a-tooltip>
-
-        <!-- 刷新按钮 -->
-        <a-tooltip content="刷新">
-          <a-button size="mini" class="g-hover-btn" @click="handleRefresh">
-            <template #icon><icon-refresh :size="18" /></template>
-          </a-button>
-        </a-tooltip>
-
-        <!-- 全屏按钮 -->
-        <a-tooltip content="全屏">
-          <a-button size="mini" class="g-hover-btn" @click="toggleFullscreen">
-            <template #icon>
-              <icon-fullscreen v-if="!isFullscreen" :size="18" />
-              <icon-fullscreen-exit v-else :size="18" />
-            </template>
-          </a-button>
-        </a-tooltip>
-
-        <!-- 边框显示按钮 -->
-        <a-tooltip content="显示边框">
-          <a-button size="mini" class="g-hover-btn" @click="toggleBorder">
-            <template #icon>
-              <Icon icon="custom:borders" :width="18" :height="18" />
-            </template>
-          </a-button>
-        </a-tooltip>
-
-        <!-- 表格尺寸设置 -->
-        <a-dropdown @select="handleSizeChange">
-          <a-tooltip content="表格尺寸">
-            <a-button size="mini" class="g-hover-btn">
-              <template #icon>
-                <Icon icon="custom:table-size" :width="17" :height="17" />
-              </template>
-            </a-button>
-          </a-tooltip>
-          <template #content>
-            <a-doption v-for="item in TABLE_SIZE_OPTIONS" :key="item.value" :value="item.value"
-              :active="item.value === size">
-              {{ item.label }}
-            </a-doption>
-          </template>
-        </a-dropdown>
-
-        <!-- 列设置按钮 -->
-        <a-popover v-if="showSettingColumnBtn" trigger="click" position="br"
-          :content-style="{ minWidth: '160px', padding: '6px 8px 10px' }">
-          <a-button type="primary" size="mini">
-            <template #icon><icon-settings /></template>
-          </a-button>
-          <template #content>
-            <!-- 列拖拽排序区域 -->
-            <div class="gi-table__draggable">
-              <VueDraggable :model-value="currentSettingColumns" :animation="150"
-                @update:model-value="(val) => { settingColumnList = val as TableSettingColumnItem[] }">
-                <div v-for="item in currentSettingColumns" :key="item.key" class="gi-table__draggable-item">
-                  <div class="gi-table__draggable-item-move">
-                    <icon-drag-dot-vertical />
-                  </div>
-                  <a-checkbox v-model:model-value="item.show" :disabled="item.disabled">
-                    {{ item.title }}
-                  </a-checkbox>
-                  <div class="gi-table__draggable-item-fixed">
-                    <span class="gi-table__pin-btn" :class="{ 'is-active': item.fixedLeft }"
-                      @click.stop="toggleFixedLeft(item.key)">
-                      <icon-pushpin />
-                    </span>
-                    <span class="gi-table__pin-btn gi-table__pin-btn--right" :class="{ 'is-active': item.fixedRight }"
-                      @click.stop="toggleFixedRight(item.key)">
-                      <icon-pushpin />
-                    </span>
-                  </div>
-                </div>
-              </VueDraggable>
-            </div>
-            <a-divider :margin="6" />
-            <a-row justify="center">
-              <a-button type="primary" size="mini" long @click="resetSettingColumns">
-                <template #icon><icon-refresh /></template>
-                <template #default>重置</template>
-              </a-button>
-            </a-row>
-          </template>
-        </a-popover>
-      </a-space>
-    </a-row>
-
-    <!-- 表格主体区域 -->
-    <div class="gi-table__container">
-      <a-table ref="tableRef" v-bind="tableProps" :stripe="stripe" :size="size" :bordered="{ cell: isBordered }"
-        :columns="visibleColumns" :data="data">
-        <template v-for="key in slotKeys" :key="key" #[key]="scope">
-          <slot :key="key" :name="key" v-bind="scope" />
-        </template>
-      </a-table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" generic="T extends TableData">
-import type { DropdownInstance, TableColumnData, TableData, TableInstance } from '@arco-design/web-vue'
-import type { TableProps, TableSettingColumnItem } from './type'
-import { Icon } from '@iconify/vue'
-import { omit } from 'lodash-es'
-import { computed, ref, watch } from 'vue'
-import { VueDraggable } from 'vue-draggable-plus'
-
-defineOptions({ name: 'GiTable' })
-
-// Props 默认值
-const props = withDefaults(defineProps<Props>(), {
-  title: '',
-  disabledColumnKeys: () => [],
-  data: () => []
-})
-
-/** Emits 类型定义 */
-const emit = defineEmits<{
-  (e: 'refresh'): void
-}>()
-
-/** Slots 类型定义 */
-defineSlots<{
-  'th': (props: { column: TableColumnData }) => void
-  'thead': () => void
-  'empty': (props: { column: TableColumnData }) => void
-  'summary-cell': (props: { column: TableColumnData, record: T, rowIndex: number }) => void
-  'pagination-right': () => void
-  'pagination-left': () => void
-  'td': (props: { column: TableColumnData, record: T, rowIndex: number }) => void
-  'tr': (props: { record: T, rowIndex: number }) => void
-  'tbody': () => void
-  'drag-handle-icon': () => void
-  'footer': () => void
-  'expand-row': (props: { record: T }) => void
-  'expand-icon': (props: { record: T, expanded?: boolean }) => void
-  'columns': () => void
-  'custom-title': () => void
-  'custom-extra': () => void
-  [propsName: string]: (props: { key: string, record: T, column: TableColumnData, rowIndex: number }) => void
-}>()
-
-/** Props 类型定义 */
-interface Props extends TableProps {
-  /** 表格标题 */
-  title?: string
-  /** 禁止控制显示隐藏的列 */
-  disabledColumnKeys?: string[]
-  /** 表格数据 */
-  data?: T[]
-}
-
-const slots = useSlots()
-const attrs = useAttrs()
-
-/** 插槽键名列表（性能优化：避免模板中重复计算） */
-const slotKeys = computed(() => Object.keys(slots))
-
-/** 表格属性计算 */
-const tableProps = computed(() => {
-  return { ...attrs, ...omit(props, ['title', 'disabledColumnKeys']) }
-})
-
-/** 组件状态 */
-const tableRef = useTemplateRef('tableRef')
-const stripe = ref(false)
-const size = ref<TableInstance['size']>('medium')
-const isBordered = ref(true)
-const isFullscreen = ref(false)
-
-/** 表格尺寸选项 */
-const TABLE_SIZE_OPTIONS = [
-  { label: '迷你', value: 'mini' },
-  { label: '小型', value: 'small' },
-  { label: '中等', value: 'medium' },
-  { label: '大型', value: 'large' }
-] as const
-
-/** 处理表格尺寸变更 */
-const handleSizeChange: DropdownInstance['onSelect'] = (value) => {
-  if (value) {
-    size.value = value as TableInstance['size']
-  }
-}
-
-/** 处理表格刷新 */
-const handleRefresh = () => {
-  emit('refresh')
-}
-
-/** 切换全屏状态 */
-const toggleFullscreen = () => {
-  isFullscreen.value = !isFullscreen.value
-}
-
-/** 切换边框显示 */
-const toggleBorder = () => {
-  isBordered.value = !isBordered.value
-}
-
-/** 列设置相关逻辑 */
-const showSettingColumnBtn = computed(() => {
-  const columns = Array.isArray(props.columns) ? props.columns : undefined
-  return Boolean(columns?.length)
-})
-
-/** 获取列的 key */
-const getColumnKey = (column: TableColumnData, index?: number) => {
-  if (column.dataIndex) return String(column.dataIndex)
-  if (typeof column.title === 'string' && column.title) return column.title
-  // 使用索引作为后备，确保唯一性
-  return `__column_${index ?? Date.now()}__`
-}
-
-/** 计算初始列设置列表 */
-const initialSettingColumns = computed<TableSettingColumnItem[]>(() => {
-  if (!props.columns) return []
-
-  const columns = Array.isArray(props.columns) ? props.columns : []
-  return columns.map((column, index) => {
-    const key = getColumnKey(column, index)
-    const fixed = column.fixed
-    return {
-      key,
-      title: typeof column.title === 'string' ? column.title : '',
-      show: true,
-      disabled: props.disabledColumnKeys.includes(key),
-      fixedLeft: fixed === 'left',
-      fixedRight: fixed === 'right'
-    }
-  })
-})
-
-/** 用户修改后的列设置列表 */
-const settingColumnList = ref<TableSettingColumnItem[]>([])
-
-/** 检查列结构是否匹配 */
-const isColumnStructureMatch = (userColumns: TableSettingColumnItem[], initialColumns: TableSettingColumnItem[]): boolean => {
-  if (userColumns.length === 0 || userColumns.length !== initialColumns.length) return false
-  const initialKeys = new Set(initialColumns.map((item) => item.key))
-  const userKeys = new Set(userColumns.map((item) => item.key))
-  return initialKeys.size === userKeys.size && [...initialKeys].every((key) => userKeys.has(key))
-}
-
-/** 列映射表（性能优化：避免在 visibleColumns 中重复创建） */
-const columnMap = computed(() => {
-  if (!props.columns) return new Map<string, TableColumnData>()
-  const columns = Array.isArray(props.columns) ? props.columns : []
-  return new Map(columns.map((col, index) => [getColumnKey(col, index), col]))
-})
-
-/** 当前使用的列设置列表（自动处理列结构变化） */
-const currentSettingColumns = computed(() => {
-  const isValid = isColumnStructureMatch(settingColumnList.value, initialSettingColumns.value)
-  return isValid ? settingColumnList.value : initialSettingColumns.value
-})
-
-/** 重置列设置 */
-const resetSettingColumns = () => {
-  settingColumnList.value = [...initialSettingColumns.value]
-}
-
-/** 确保列设置列表已初始化（首次点击或拖拽前可能为空） */
-const ensureSettingColumnList = () => {
-  if (settingColumnList.value.length === 0 && initialSettingColumns.value.length > 0) {
-    settingColumnList.value = initialSettingColumns.value.map((item) => ({ ...item }))
-  }
-}
-
-/** 切换列固定左侧：图标高亮且当前列固定到左侧 */
-const toggleFixedLeft = (key: string) => {
-  ensureSettingColumnList()
-  settingColumnList.value = settingColumnList.value.map((item) =>
-    item.key === key
-      ? { ...item, fixedLeft: !item.fixedLeft, fixedRight: false }
-      : item
-  )
-}
-
-/** 切换列固定右侧：图标高亮且当前列固定到右侧 */
-const toggleFixedRight = (key: string) => {
-  ensureSettingColumnList()
-  settingColumnList.value = settingColumnList.value.map((item) =>
-    item.key === key
-      ? { ...item, fixedRight: !item.fixedRight, fixedLeft: false }
-      : item
-  )
-}
-
-/** 监听 columns 变化，自动重置列设置 */
-watch(() => props.columns, () => {
-  // 列结构变化时，如果用户设置不匹配，自动重置
-  if (!isColumnStructureMatch(settingColumnList.value, initialSettingColumns.value)) {
-    resetSettingColumns()
-  }
-}, { deep: true })
-
-/** 计算显示的列（含固定列设置）：固定左 → 不固定 → 固定右 */
-const visibleColumns = computed(() => {
-  if (!props.columns) return []
-
-  const shown = currentSettingColumns.value.filter((item) => item.show)
-  const leftFixed: typeof shown = []
-  const noFixed: typeof shown = []
-  const rightFixed: typeof shown = []
-  for (const item of shown) {
-    if (item.fixedLeft) leftFixed.push(item)
-    else if (item.fixedRight) rightFixed.push(item)
-    else noFixed.push(item)
-  }
-  const ordered = [...leftFixed, ...noFixed, ...rightFixed]
-
-  return ordered
-    .map((item) => {
-      const col = columnMap.value.get(item.key)
-      if (!col) return null
-      // 以列配置为准：未勾选固定时不再回退到 props 的 fixed，以便用户能取消固定
-      const fixed = item.fixedRight ? 'right' : item.fixedLeft ? 'left' : undefined
-      return { ...col, fixed }
-    })
-    .filter(Boolean) as TableColumnData[]
-})
-
-defineExpose({ tableRef })
-</script>
-
-<style lang="scss" scoped>
-.gi-table {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--color-bg-1);
-
-  &--fullscreen {
-    position: fixed;
-    inset: 0;
-    z-index: 1001;
-    padding: var(--padding);
-  }
-
-  &__container {
-    max-height: 100%;
-    overflow: hidden;
-  }
-
-  &__title {
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.5;
-    color: var(--color-text-1);
-  }
-
-  &__draggable {
-    box-sizing: border-box;
-    max-height: 250px;
-    padding: 1px 0;
-    overflow: hidden auto;
-  }
-
-  &__draggable-item {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--color-fill-2);
-    }
-
-    &-move {
-      padding: 0 2px;
-      cursor: move;
-    }
-
-    &-fixed {
-      display: flex;
-      flex-shrink: 0;
-      gap: 4px;
-      align-items: center;
-      margin-left: auto;
-    }
-
-    :deep(.arco-checkbox) {
-      flex: 1;
-      min-width: 0;
-      font-size: 12px;
-
-      .arco-checkbox-icon {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
-  &__pin-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px;
-    font-size: 14px;
-    color: var(--color-text-3);
-    cursor: pointer;
-    transition: color 0.2s;
-
-    &:hover {
-      color: var(--color-text-2);
-    }
-
-    &.is-active {
-      color: rgb(var(--primary-6));
-    }
-
-    &--right {
-      transform: scaleX(-1);
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiTable/index.ts b/frontend-pc/src/components/GiTable/index.ts
deleted file mode 100644
index b717e3c..0000000
--- a/frontend-pc/src/components/GiTable/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { TableInstance as ArcoTableInstance } from '@arco-design/web-vue'
-import Table from './GiTable.vue'
-
-export type * from './type'
-
-/**
- * 组件实例类型。
- *
- * ⚠️ 这里**不能**写 `InstanceType<typeof Table>`。
- * `GiTable.vue` 是泛型 SFC（`<script setup generic="T extends TableData">`），
- * 它的类型是一个泛型函数签名而不是构造函数，`InstanceType<>` 对它不成立，
- * vue-tsc 会报 `TS2344: ... does not satisfy the constraint
- * 'abstract new (...args: any) => any'`。
- *
- * 所以按 `defineExpose({ tableRef })` 的**真实形状**手工声明：
- * 暴露出来的就是那一个内层 a-table 的实例（模板 ref 在暴露时会被解包）。
- * 这比 `InstanceType` 推导出来的"全部 props + slots"更准确 —— 后者本来也是假的。
- */
-export interface TableInstance {
-  /** 内层 a-table 的实例 */
-  tableRef: ArcoTableInstance | null
-}
-
-export { Table as GiTable }
diff --git a/frontend-pc/src/components/GiTable/type.ts b/frontend-pc/src/components/GiTable/type.ts
deleted file mode 100644
index 359a266..0000000
--- a/frontend-pc/src/components/GiTable/type.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { TableInstance } from '@arco-design/web-vue'
-
-export type TableProps = {
-  columns?: TableInstance['$props']['columns']
-  data?: TableInstance['$props']['data']
-  bordered?: TableInstance['$props']['bordered']
-  hoverable?: TableInstance['$props']['hoverable']
-  stripe?: TableInstance['$props']['stripe']
-  size?: TableInstance['$props']['size']
-  tableLayoutFixed?: TableInstance['$props']['tableLayoutFixed']
-  loading?: TableInstance['$props']['loading']
-  rowSelection?: TableInstance['$props']['rowSelection']
-  expandable?: TableInstance['$props']['expandable']
-  scroll?: TableInstance['$props']['scroll']
-  pagination?: TableInstance['$props']['pagination']
-  pagePosition?: TableInstance['$props']['pagePosition']
-  indentSize?: TableInstance['$props']['indentSize']
-  rowKey?: TableInstance['$props']['rowKey']
-  showHeader?: TableInstance['$props']['showHeader']
-  virtualListProps?: TableInstance['$props']['virtualListProps']
-  spanMethod?: TableInstance['$props']['spanMethod']
-  spanAll?: TableInstance['$props']['spanAll']
-  loadMore?: TableInstance['$props']['loadMore']
-  filterIconAlignLeft?: TableInstance['$props']['filterIconAlignLeft']
-  hideExpandButtonOnEmpty?: TableInstance['$props']['hideExpandButtonOnEmpty']
-  rowClass?: TableInstance['$props']['rowClass']
-  draggable?: TableInstance['$props']['draggable']
-  rowNumber?: TableInstance['$props']['rowNumber']
-  columnResizable?: TableInstance['$props']['columnResizable']
-  summary?: TableInstance['$props']['summary']
-  summaryText?: TableInstance['$props']['summaryText']
-  summarySpanMethod?: TableInstance['$props']['summarySpanMethod']
-  selectedKeys?: TableInstance['$props']['selectedKeys']
-  defaultSelectedKeys?: TableInstance['$props']['defaultSelectedKeys']
-  expandedKeys?: TableInstance['$props']['expandedKeys']
-  defaultExpandedKeys?: TableInstance['$props']['defaultExpandedKeys']
-  defaultExpandAllRows?: TableInstance['$props']['defaultExpandAllRows']
-  stickyHeader?: TableInstance['$props']['stickyHeader']
-  scrollbar?: TableInstance['$props']['scrollbar']
-  showEmptyTree?: TableInstance['$props']['showEmptyTree']
-}
-
-/** 列设置项类型 */
-export interface TableSettingColumnItem {
-  title: string
-  key: string
-  show: boolean
-  disabled: boolean
-  /** 固定左侧 */
-  fixedLeft?: boolean
-  /** 固定右侧 */
-  fixedRight?: boolean
-}
diff --git a/frontend-pc/src/components/GiTableSetting/GiTableSetting.vue b/frontend-pc/src/components/GiTableSetting/GiTableSetting.vue
deleted file mode 100644
index acebb7c..0000000
--- a/frontend-pc/src/components/GiTableSetting/GiTableSetting.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-  <div class="gi-table-setting" :class="{ 'gi-table-setting--fullscreen': isFullscreen }">
-    <a-row justify="space-between" align="center" class="g-row-tool">
-      <a-space wrap>
-        <slot name="custom-title">
-          <div class="gi-table-setting__title">{{ title }}</div>
-        </slot>
-      </a-space>
-
-      <a-space wrap>
-        <slot name="custom-extra" />
-
-        <a-tooltip content="导出">
-          <a-button class="gi-table-setting__btn" type="text" size="mini" @click="emit('export')">
-            <template #icon><icon-download :size="18" /></template>
-          </a-button>
-        </a-tooltip>
-
-        <a-tooltip content="斑马纹">
-          <a-button class="gi-table-setting__btn" type="text" size="mini" @click="stripe = !stripe">
-            <template #icon><icon-brush :size="18" /></template>
-          </a-button>
-        </a-tooltip>
-
-        <a-tooltip content="刷新">
-          <a-button class="gi-table-setting__btn" type="text" size="mini" @click="emit('refresh')">
-            <template #icon><icon-refresh :size="18" /></template>
-          </a-button>
-        </a-tooltip>
-
-        <a-tooltip :content="isFullscreen ? '退出全屏' : '全屏'">
-          <a-button class="gi-table-setting__btn" type="text" size="mini" @click="toggleFullscreen">
-            <template #icon>
-              <icon-fullscreen v-if="!isFullscreen" :size="18" />
-              <icon-fullscreen-exit v-else :size="18" />
-            </template>
-          </a-button>
-        </a-tooltip>
-
-        <a-tooltip content="显示边框">
-          <a-button class="gi-table-setting__btn" type="text" size="mini" @click="toggleBorder">
-            <template #icon><icon-apps :size="18" /></template>
-          </a-button>
-        </a-tooltip>
-
-        <a-dropdown @select="handleSizeChange">
-          <a-tooltip content="表格尺寸">
-            <a-button class="gi-table-setting__btn" type="text" size="mini">
-              <template #icon>
-                <icon-font-colors :size="18" />
-              </template>
-            </a-button>
-          </a-tooltip>
-          <template #content>
-            <a-doption v-for="item in TABLE_SIZE_OPTIONS" :key="item.value" :value="item.value"
-              :active="item.value === size">
-              {{ item.label }}
-            </a-doption>
-          </template>
-        </a-dropdown>
-
-        <a-popover v-if="showSettingColumnBtn" trigger="click" position="br"
-          :content-style="{ minWidth: '160px', padding: '6px 8px 10px' }">
-          <a-button class="gi-table-setting__btn" type="text" size="mini">
-            <template #icon><icon-settings :size="18" /></template>
-          </a-button>
-          <template #content>
-            <div class="gi-table-setting__draggable">
-              <VueDraggable :model-value="currentSettingColumns" :animation="150"
-                @update:model-value="onSettingColumnsUpdate">
-                <div v-for="item in currentSettingColumns" :key="item.key" class="gi-table-setting__draggable-item">
-                  <div class="gi-table-setting__draggable-item-move">
-                    <icon-drag-dot-vertical />
-                  </div>
-                  <a-checkbox v-model:model-value="item.show" :disabled="item.disabled">
-                    {{ item.title }}
-                  </a-checkbox>
-                  <div class="gi-table-setting__draggable-item-fixed">
-                    <span class="gi-table-setting__pin-btn" :class="{ 'is-active': item.fixedLeft }"
-                      @click.stop="toggleFixedLeft(item.key)">
-                      <icon-pushpin />
-                    </span>
-                    <span class="gi-table-setting__pin-btn gi-table-setting__pin-btn--right"
-                      :class="{ 'is-active': item.fixedRight }" @click.stop="toggleFixedRight(item.key)">
-                      <icon-pushpin />
-                    </span>
-                  </div>
-                </div>
-              </VueDraggable>
-            </div>
-            <a-divider :margin="6" />
-            <a-row justify="center">
-              <a-button type="primary" size="mini" long @click="resetSettingColumns">
-                <template #icon><icon-refresh /></template>
-                <template #default>重置</template>
-              </a-button>
-            </a-row>
-          </template>
-        </a-popover>
-      </a-space>
-    </a-row>
-
-    <div class="gi-table-setting__body">
-      <slot :setting-columns="settingColumns" :is-fullscreen="isFullscreen" :table-props="tableProps" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { DropdownInstance, TableColumnData, TableInstance } from '@arco-design/web-vue'
-import type { GiTableSettingProps, TableSettingColumnListItem } from './type'
-import { computed, ref } from 'vue'
-import { VueDraggable } from 'vue-draggable-plus'
-import { useTableColumnSetting } from './useTableColumnSetting'
-
-defineOptions({ name: 'GiTableSetting' })
-
-const props = withDefaults(defineProps<GiTableSettingProps>(), {
-  title: '',
-  columns: () => [],
-  disabledColumnKeys: () => []
-})
-
-const emit = defineEmits<{
-  refresh: []
-  export: []
-}>()
-
-defineSlots<{
-  'custom-title'?: () => unknown
-  'custom-extra'?: () => unknown
-  'default': (props: {
-    settingColumns: TableColumnData[]
-    isFullscreen: boolean
-    tableProps: {
-      stripe: boolean
-      bordered: { cell: boolean }
-      size: TableInstance['size']
-    }
-  }) => unknown
-}>()
-
-const stripe = ref(false)
-const size = ref<TableInstance['size']>('medium')
-const isBordered = ref(true)
-const isFullscreen = ref(false)
-
-const TABLE_SIZE_OPTIONS = [
-  { label: '迷你', value: 'mini' },
-  { label: '小型', value: 'small' },
-  { label: '中等', value: 'medium' },
-  { label: '大型', value: 'large' }
-] as const
-
-const tableProps = computed(() => ({
-  stripe: stripe.value,
-  bordered: { cell: isBordered.value },
-  size: size.value
-}))
-
-const {
-  showSettingColumnBtn,
-  currentSettingColumns,
-  settingColumnList,
-  settingColumns,
-  resetSettingColumns,
-  toggleFixedLeft,
-  toggleFixedRight
-} = useTableColumnSetting({
-  columns: () => props.columns,
-  disabledColumnKeys: () => props.disabledColumnKeys
-})
-
-function onSettingColumnsUpdate(val: TableSettingColumnListItem[]) {
-  settingColumnList.value = val
-}
-
-const handleSizeChange: DropdownInstance['onSelect'] = (value) => {
-  if (value) {
-    size.value = value as TableInstance['size']
-  }
-}
-
-function toggleFullscreen() {
-  isFullscreen.value = !isFullscreen.value
-}
-
-function toggleBorder() {
-  isBordered.value = !isBordered.value
-}
-</script>
-
-<style lang="scss" scoped>
-.gi-table-setting {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--color-bg-1);
-
-  &--fullscreen {
-    position: fixed;
-    inset: 0;
-    z-index: 1001;
-    box-sizing: border-box;
-    padding: var(--padding);
-  }
-
-  &__btn {
-    color: var(--color-text-1);
-  }
-
-  &__title {
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.5;
-    color: var(--color-text-1);
-  }
-
-  &__body {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  &__draggable {
-    box-sizing: border-box;
-    max-height: 250px;
-    padding: 1px 0;
-    overflow: hidden auto;
-  }
-
-  &__draggable-item {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--color-fill-2);
-    }
-
-    &-move {
-      padding: 0 2px;
-      cursor: move;
-    }
-
-    &-fixed {
-      display: flex;
-      flex-shrink: 0;
-      gap: 4px;
-      align-items: center;
-      margin-left: auto;
-    }
-
-    :deep(.arco-checkbox) {
-      flex: 1;
-      min-width: 0;
-      font-size: 12px;
-
-      .arco-checkbox-icon {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
-  &__pin-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px;
-    font-size: 14px;
-    color: var(--color-text-3);
-    cursor: pointer;
-    transition: color 0.2s;
-
-    &:hover {
-      color: var(--color-text-2);
-    }
-
-    &.is-active {
-      color: rgb(var(--primary-6));
-    }
-
-    &--right {
-      transform: scaleX(-1);
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/components/GiTableSetting/index.ts b/frontend-pc/src/components/GiTableSetting/index.ts
deleted file mode 100644
index 048b334..0000000
--- a/frontend-pc/src/components/GiTableSetting/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import TableSetting from './GiTableSetting.vue'
-
-export type * from './type'
-export type TableSettingInstance = InstanceType<typeof TableSetting>
-export { TableSetting as GiTableSetting }
diff --git a/frontend-pc/src/components/GiTableSetting/type.ts b/frontend-pc/src/components/GiTableSetting/type.ts
deleted file mode 100644
index 53eb8f7..0000000
--- a/frontend-pc/src/components/GiTableSetting/type.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { TableInstance } from '@arco-design/web-vue'
-
-export interface GiTableSettingProps {
-  /** 工具栏标题 */
-  title?: string
-  /** 列配置（用于列设置） */
-  columns?: TableInstance['columns']
-  /** 禁止控制显示隐藏的列 key */
-  disabledColumnKeys?: string[]
-}
-
-/** 列设置项类型 */
-export interface TableSettingColumnListItem {
-  title: string
-  key: string
-  show: boolean
-  disabled: boolean
-  /** 固定左侧 */
-  fixedLeft?: boolean
-  /** 固定右侧 */
-  fixedRight?: boolean
-}
diff --git a/frontend-pc/src/components/GiTableSetting/useTableColumnSetting.ts b/frontend-pc/src/components/GiTableSetting/useTableColumnSetting.ts
deleted file mode 100644
index 5fab867..0000000
--- a/frontend-pc/src/components/GiTableSetting/useTableColumnSetting.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { TableColumnData, TableInstance } from '@arco-design/web-vue'
-import type { MaybeRefOrGetter } from 'vue'
-import type { TableSettingColumnListItem } from './type'
-import { computed, ref, toValue, watch } from 'vue'
-
-export interface UseTableColumnSettingOptions {
-  columns: MaybeRefOrGetter<TableInstance['columns'] | undefined>
-  disabledColumnKeys?: MaybeRefOrGetter<string[]>
-}
-
-/** 获取列的 key */
-export function getTableColumnKey(column: TableColumnData, index?: number) {
-  if (column.dataIndex) return String(column.dataIndex)
-  if (typeof column.title === 'string' && column.title) return column.title
-  return `__column_${index ?? Date.now()}__`
-}
-
-/** 表格列设置：显隐、排序、固定 */
-export function useTableColumnSetting(options: UseTableColumnSettingOptions) {
-  const showSettingColumnBtn = computed(() => {
-    const columns = Array.isArray(toValue(options.columns)) ? toValue(options.columns) : undefined
-    return Boolean(columns?.length)
-  })
-
-  const initialSettingColumns = computed<TableSettingColumnListItem[]>(() => {
-    const raw = toValue(options.columns)
-    if (!raw) return []
-
-    const columns = Array.isArray(raw) ? raw : []
-    return columns.map((column, index) => {
-      const key = getTableColumnKey(column, index)
-      const fixed = column.fixed
-      const disabledKeys = toValue(options.disabledColumnKeys) ?? []
-      return {
-        key,
-        title: typeof column.title === 'string' ? column.title : '',
-        show: true,
-        disabled: disabledKeys.includes(key),
-        fixedLeft: fixed === 'left',
-        fixedRight: fixed === 'right'
-      }
-    })
-  })
-
-  const settingColumnList = ref<TableSettingColumnListItem[]>([])
-
-  const isColumnStructureMatch = (
-    userColumns: TableSettingColumnListItem[],
-    initialColumns: TableSettingColumnListItem[]
-  ): boolean => {
-    if (userColumns.length === 0 || userColumns.length !== initialColumns.length) return false
-    const initialKeys = new Set(initialColumns.map((item) => item.key))
-    const userKeys = new Set(userColumns.map((item) => item.key))
-    return initialKeys.size === userKeys.size && [...initialKeys].every((key) => userKeys.has(key))
-  }
-
-  const columnMap = computed(() => {
-    const raw = toValue(options.columns)
-    if (!raw) return new Map<string, TableColumnData>()
-    const columns = Array.isArray(raw) ? raw : []
-    return new Map(columns.map((col, index) => [getTableColumnKey(col, index), col]))
-  })
-
-  const currentSettingColumns = computed(() => {
-    const isValid = isColumnStructureMatch(settingColumnList.value, initialSettingColumns.value)
-    return isValid ? settingColumnList.value : initialSettingColumns.value
-  })
-
-  const resetSettingColumns = () => {
-    settingColumnList.value = [...initialSettingColumns.value]
-  }
-
-  const ensureSettingColumnList = () => {
-    if (settingColumnList.value.length === 0 && initialSettingColumns.value.length > 0) {
-      settingColumnList.value = initialSettingColumns.value.map((item) => ({ ...item }))
-    }
-  }
-
-  const toggleFixedLeft = (key: string) => {
-    ensureSettingColumnList()
-    settingColumnList.value = settingColumnList.value.map((item) =>
-      item.key === key
-        ? { ...item, fixedLeft: !item.fixedLeft, fixedRight: false }
-        : item
-    )
-  }
-
-  const toggleFixedRight = (key: string) => {
-    ensureSettingColumnList()
-    settingColumnList.value = settingColumnList.value.map((item) =>
-      item.key === key
-        ? { ...item, fixedRight: !item.fixedRight, fixedLeft: false }
-        : item
-    )
-  }
-
-  watch(
-    () => toValue(options.columns),
-    () => {
-      if (!isColumnStructureMatch(settingColumnList.value, initialSettingColumns.value)) {
-        resetSettingColumns()
-      }
-    },
-    { deep: true }
-  )
-
-  const settingColumns = computed(() => {
-    const raw = toValue(options.columns)
-    if (!raw) return []
-
-    const shown = currentSettingColumns.value.filter((item) => item.show)
-    const leftFixed: typeof shown = []
-    const noFixed: typeof shown = []
-    const rightFixed: typeof shown = []
-    for (const item of shown) {
-      if (item.fixedLeft) leftFixed.push(item)
-      else if (item.fixedRight) rightFixed.push(item)
-      else noFixed.push(item)
-    }
-    const ordered = [...leftFixed, ...noFixed, ...rightFixed]
-
-    return ordered
-      .map((item) => {
-        const col = columnMap.value.get(item.key)
-        if (!col) return null
-        const fixed = item.fixedRight ? 'right' : item.fixedLeft ? 'left' : undefined
-        return { ...col, fixed }
-      })
-      .filter(Boolean) as TableColumnData[]
-  })
-
-  return {
-    showSettingColumnBtn,
-    currentSettingColumns,
-    settingColumnList,
-    settingColumns,
-    resetSettingColumns,
-    toggleFixedLeft,
-    toggleFixedRight
-  }
-}
diff --git a/frontend-pc/src/components/GiTag/GiTag.tsx b/frontend-pc/src/components/GiTag/GiTag.tsx
deleted file mode 100644
index 07ae1a4..0000000
--- a/frontend-pc/src/components/GiTag/GiTag.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * @file GiTag 组件 - 提供多样化的标签展示
- * @description 支持多种样式类型、状态、颜色和大小的标签组件
- */
-
-import type { CSSProperties, PropType } from 'vue'
-import type { TagProps as Props } from './type'
-import { computed, defineComponent } from 'vue'
-import './tag.scss'
-
-/** 基础颜色映射表 */
-const BASE_COLORS: Record<string, string> = {
-  red: '#FF0000',
-  orangered: '#f77234',
-  orange: '#ff7d00',
-  gold: '#f7ba1e',
-  lime: '#9fdb1d',
-  green: '#00b42a',
-  cyan: '#14c9c9',
-  blue: '#3491fa',
-  purple: '#722ed1',
-  pink: '#f5319d',
-  gray: '#86909c'
-} as const
-
-export default defineComponent({
-  name: 'GiTag',
-  props: {
-    type: {
-      type: String as PropType<Props['type']>,
-      default: 'light'
-    },
-    status: {
-      type: String as PropType<Props['status']>,
-      default: 'primary'
-    },
-    color: {
-      type: String as PropType<Props['color'] | string>,
-      default: ''
-    },
-    size: {
-      type: String as PropType<Props['size']>,
-      default: 'small'
-    },
-    closable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click', 'close'],
-  setup(props: Props, { slots, emit }) {
-    /**
-     * 将十六进制颜色转换为 RGB 对象
-     * @param hex - 十六进制颜色值
-     */
-    const hexToRgb = (hex: string) => {
-      const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex
-      return {
-        r: Number.parseInt(cleanHex.slice(0, 2), 16),
-        g: Number.parseInt(cleanHex.slice(2, 4), 16),
-        b: Number.parseInt(cleanHex.slice(4, 6), 16)
-      }
-    }
-
-    /** 计算标签的 class */
-    const className = computed(() => {
-      return [
-        'gi-tag',
-        props.type && `gi-tag__type--${props.type}`,
-        props.size && `gi-tag__size--${props.size}`,
-        props.status && `gi-tag__status--${props.status}`
-      ].filter(Boolean)
-    })
-
-    /** 计算标签的样式 */
-    const calcStyle = computed((): CSSProperties => {
-      if (!props.color) return {}
-
-      const color = BASE_COLORS[props.color as string] || props.color
-      const { r, g, b } = hexToRgb(color)
-      const style: CSSProperties = {}
-
-      switch (props.type) {
-        case 'light':
-          style.color = color
-          style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`
-          style['--tag-close-hover-bg-color'] = color
-          break
-        case 'dark':
-          style.color = '#fff'
-          style.backgroundColor = color
-          style['--tag-close-hover-color'] = color
-          style['--tag-close-hover-bg-color'] = 'rgba(255, 255, 255, 0.9)'
-          break
-        case 'outline':
-          style.color = color
-          style.backgroundColor = 'transparent'
-          style.borderColor = color
-          style['--tag-close-hover-bg-color'] = color
-          break
-        case 'light-outline':
-          style.color = color
-          style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`
-          style.borderColor = `rgba(${r}, ${g}, ${b}, 0.2)`
-          style['--tag-close-hover-bg-color'] = color
-          break
-      }
-
-      return style
-    })
-
-    /** 点击标签事件处理 */
-    const handleClick = () => emit('click')
-
-    /** 关闭标签事件处理 */
-    const handleClose = (event: MouseEvent) => {
-      event.stopPropagation()
-      emit('close')
-    }
-
-    /** 关闭图标组件 */
-    const CloseIcon = props.closable && (
-      <span class="gi-tag-close-btn" onClick={handleClose}>
-        <icon-close class="close-icon" />
-      </span>
-    )
-
-    return () => (
-      <span class={className.value} style={calcStyle.value} onClick={handleClick}>
-        {slots.default?.()}
-        {CloseIcon}
-      </span>
-    )
-  }
-})
diff --git a/frontend-pc/src/components/GiTag/index.ts b/frontend-pc/src/components/GiTag/index.ts
deleted file mode 100644
index fe51656..0000000
--- a/frontend-pc/src/components/GiTag/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Tag from './GiTag.tsx'
-
-export type TagInstance = InstanceType<typeof Tag>
-export * from './type'
-export { Tag as GiTag }
diff --git a/frontend-pc/src/components/GiTag/tag.scss b/frontend-pc/src/components/GiTag/tag.scss
deleted file mode 100644
index ed27c19..0000000
--- a/frontend-pc/src/components/GiTag/tag.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-$status: primary, success, warning, danger;
-
-$tag-size-mini-height: 20px;
-$tag-size-small-height: 22px;
-$tag-size-large-height: 24px;
-
-$tag-size-mini-padding: 0 6px;
-$tag-size-small-padding: 0 8px;
-$tag-size-large-padding: 0 10px;
-
-.gi-tag {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: $tag-size-small-height;
-  padding: $tag-size-small-padding;
-  font-size: 12px;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.gi-tag-close-btn {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-left: 4px;
-  cursor: pointer;
-  background-color: transparent;
-  border-radius: var(--border-radius-circle);
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
-
-  .close-icon {
-    z-index: 9;
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.gi-tag__size--mini {
-  height: $tag-size-mini-height;
-  padding: $tag-size-mini-padding;
-
-  .gi-tag-close-btn {
-    .close-icon {
-      width: 10px;
-      height: 10px;
-    }
-
-    &::before {
-      width: 14px;
-      height: 14px;
-    }
-  }
-}
-
-.gi-tag__size--small {
-  height: $tag-size-small-height;
-  padding: $tag-size-small-padding;
-}
-
-.gi-tag__size--large {
-  height: $tag-size-large-height;
-  padding: $tag-size-small-padding;
-}
-
-.gi-tag__type--light {
-  color: #fff;
-
-  @each $i in $status {
-    &.gi-tag__status--#{$i}
-
- {
-      color: rgb(var(--#{$i}-6));
-      background-color: rgb(var(--#{$i}-1));
-
-      --tag-close-hover-color: #fff;
-      --tag-close-hover-bg-color: rgb(var(--#{$i}-6));
-
-      .gi-tag-close-btn {
-        &:hover {
-          color: var(--tag-close-hover-color);
-          background-color: var(--tag-close-hover-bg-color);
-        }
-      }
-    }
-  }
-}
-
-.gi-tag__type--dark {
-  color: #fff;
-
-  @each $i in $status {
-    &.gi-tag__status--#{$i}
-
- {
-      background-color: rgb(var(--#{$i}-6));
-
-      --tag-close-hover-color: rgb(var(--#{$i}-6));
-      --tag-close-hover-bg-color: rgb(255 255 255 / 90%);
-
-      .gi-tag-close-btn {
-        &:hover {
-          color: var(--tag-close-hover-color);
-          background-color: var(--tag-close-hover-bg-color);
-        }
-      }
-    }
-  }
-}
-
-.gi-tag__type--outline {
-  background: transparent;
-  border-style: solid;
-  border-width: 1px;
-
-  @each $i in $status {
-    &.gi-tag__status--#{$i}
-
- {
-      color: rgb(var(--#{$i}-6));
-      border-color: rgb(var(--#{$i}-6));
-
-      --tag-close-hover-color: #fff;
-      --tag-close-hover-bg-color: rgb(var(--#{$i}-6));
-
-      .gi-tag-close-btn {
-        &:hover {
-          color: var(--tag-close-hover-color);
-          background-color: var(--tag-close-hover-bg-color);
-        }
-      }
-    }
-  }
-}
-
-.gi-tag__type--light-outline {
-  border-style: solid;
-  border-width: 1px;
-
-  @each $i in $status {
-    &.gi-tag__status--#{$i}
-
- {
-      color: rgb(var(--#{$i}-6));
-      background-color: rgb(var(--#{$i}-1));
-      border-color: rgb(var(--#{$i}-2));
-
-      --tag-close-hover-color: #fff;
-      --tag-close-hover-bg-color: rgb(var(--#{$i}-6));
-
-      .gi-tag-close-btn {
-        &:hover {
-          color: var(--tag-close-hover-color);
-          background-color: var(--tag-close-hover-bg-color);
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend-pc/src/components/GiTag/type.ts b/frontend-pc/src/components/GiTag/type.ts
deleted file mode 100644
index 91e282e..0000000
--- a/frontend-pc/src/components/GiTag/type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/** 组件属性定义 */
-export interface TagProps {
-  /** 标签类型 */
-  type?: 'dark' | 'light' | 'outline' | 'light-outline'
-  /** 标签状态 */
-  status?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
-  /** 自定义颜色，支持预设颜色名或十六进制颜色值 */
-  color?: 'red' | 'orangered' | 'orange' | 'gold' | 'lime' | 'green' | 'cyan' | 'blue' | 'purple' | 'pink' | 'gray' | string
-  /** 标签尺寸 */
-  size?: 'mini' | 'small' | 'large'
-  /** 是否可关闭 */
-  closable?: boolean
-}
diff --git a/frontend-pc/src/components/GiTenantPicker/GiTenantPicker.vue b/frontend-pc/src/components/GiTenantPicker/GiTenantPicker.vue
deleted file mode 100644
index 3d8c7f4..0000000
--- a/frontend-pc/src/components/GiTenantPicker/GiTenantPicker.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <a-select
-    v-model="model"
-    class="gi-tenant-picker"
-    :placeholder="props.placeholder"
-    :loading="loading"
-    :disabled="props.disabled"
-    :style="{ width: props.width }"
-    allow-search
-    allow-clear
-  >
-    <a-option v-for="t in options" :key="t.id" :value="t.id" :disabled="t.status === 0">
-      {{ t.tenantName }}（{{ t.tenantCode }}）{{ t.status === 0 ? ' · 已停用' : '' }}
-    </a-option>
-  </a-select>
-</template>
-
-<script setup lang="ts">
-import type { TenantVO } from '@/apis/xt/tenant'
-import { getTenantList } from '@/apis/xt/tenant'
-
-/**
- * 「选择学校」——平台运营的当前租户。
- *
- * 为什么要有这个东西：平台运营是跨租户身份，服务端对它的租户过滤是**关掉的**，
- * 所以它必须**先指明看哪所学校**，否则「组织架构」「账号管理」会拿到所有租户混在一起的数据。
- * 选中的值由页面带进请求头 `X-Tenant-Id`（见 `@/apis/xt/acting-tenant`）。
- *
- * ⚠️ 只有平台运营的页面才渲染它 —— 学校管理员的租户由 token 决定，给他一个
- * "选择学校"的下拉框是纯粹的困惑（而且服务端会忽略他传的值）。
- *
- * ⚠️ 租户列表接口只对平台运营开放（学校管理员调它得 40301），所以本组件
- * **不要**在非平台页面里渲染。
- */
-defineOptions({ name: 'GiTenantPicker' })
-
-const model = defineModel<number | undefined>({ default: undefined })
-
-const props = withDefaults(defineProps<{
-  placeholder?: string
-  disabled?: boolean
-  width?: string
-}>(), {
-  placeholder: '选择学校',
-  disabled: false,
-  width: '100%'
-})
-
-const loading = ref(false)
-const options = ref<TenantVO[]>([])
-
-async function load() {
-  loading.value = true
-  try {
-    // 一期租户规模是"几十所"量级（接口上限 200），一次取完比做分页下拉简单得多。
-    // 已停用的也列出来但不可选 —— 服务端会拒（"目标单位不存在或已停用"），
-    // 与其让人选完才知道，不如在选择时就说明。
-    const res = await getTenantList({ pageNum: 1, pageSize: 200 })
-    options.value = res.data?.list ?? []
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(load)
-
-defineExpose({ reload: load })
-</script>
-
-<style lang="scss" scoped>
-.gi-tenant-picker {
-  min-width: 180px;
-}
-</style>
diff --git a/frontend-pc/src/components/GiThemeBtn/GiThemeBtn.vue b/frontend-pc/src/components/GiThemeBtn/GiThemeBtn.vue
deleted file mode 100644
index 19d2d05..0000000
--- a/frontend-pc/src/components/GiThemeBtn/GiThemeBtn.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <a-button size="mini" class="g-hover-btn" @click="toggleTheme">
-    <template #icon>
-      <icon-sun-fill v-if="!isDark" :size="18" />
-      <icon-moon-fill v-else :size="18" />
-    </template>
-  </a-button>
-</template>
-
-<script setup lang="ts">
-import { useTheme } from '@/hooks'
-
-defineOptions({ name: 'GiThemeBtn' })
-
-const { isDark, toggleTheme } = useTheme()
-</script>
diff --git a/frontend-pc/src/components/GiThemeBtn/index.ts b/frontend-pc/src/components/GiThemeBtn/index.ts
deleted file mode 100644
index 228ec31..0000000
--- a/frontend-pc/src/components/GiThemeBtn/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ThemeBtn from './GiThemeBtn.vue'
-
-export type ThemeBtnInstance = InstanceType<typeof ThemeBtn>
-export { ThemeBtn as GiThemeBtn }
diff --git a/frontend-pc/src/components/dialog/TreeUserList/Tree.vue b/frontend-pc/src/components/dialog/TreeUserList/Tree.vue
deleted file mode 100644
index 3921133..0000000
--- a/frontend-pc/src/components/dialog/TreeUserList/Tree.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="g-full-column">
-    <a-input-search class="g-mb" placeholder="请输入关键词" allow-clear />
-
-    <a-scrollbar style="height: 100%; overflow: auto" outer-style="flex: 1;overflow: hidden">
-      <a-tree ref="treeRef" show-line size="mini" :data="(treeData as unknown as TreeNodeData[])"
-        :field-names="{ key: 'id', title: 'name' }" @select="select">
-      </a-tree>
-    </a-scrollbar>
-  </a-spin>
-</template>
-
-<script lang="ts" setup>
-import type { TreeNodeData } from '@arco-design/web-vue'
-import { getCateTree } from '@/apis/cate'
-
-const emit = defineEmits<{
-  (e: 'node-click'): void
-}>()
-
-const treeRef = useTemplateRef('treeRef')
-const loading = ref(false)
-const treeData = ref<any[]>([])
-
-// 获取分类树
-const getTreeData = async () => {
-  try {
-    loading.value = true
-    const res = await getCateTree()
-    treeData.value = res.data
-    nextTick(() => {
-      treeRef.value?.expandAll()
-    })
-  } finally {
-    loading.value = false
-  }
-}
-getTreeData()
-
-const select = () => {
-  emit('node-click')
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/dialog/TreeUserList/index.vue b/frontend-pc/src/components/dialog/TreeUserList/index.vue
deleted file mode 100644
index 91f27d0..0000000
--- a/frontend-pc/src/components/dialog/TreeUserList/index.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <GiPageLayout bg-transparent>
-    <template #left>
-      <Tree @node-click="search" />
-    </template>
-    <a-row justify="end" class="g-row-tool">
-      <a-space wrap>
-        <a-input v-model="searchParams.username" placeholder="输入用户名搜索" allow-clear style="max-width: 250px">
-        </a-input>
-        <a-button type="primary" @click="search">
-          <template #icon><icon-search /></template>
-          <span>查询</span>
-        </a-button>
-        <a-button @click="reset">重置</a-button>
-      </a-space>
-    </a-row>
-
-    <a-table class="g-table" row-key="id" :loading="loading" :bordered="{ cell: true }" :columns="columns"
-      :data="tableData" :scroll="{ x: '100%', y: '100%' }"
-      :row-selection="{ type: props.multiple ? 'checkbox' : 'radio', showCheckedAll: true }" :pagination="pagination"
-      @select="select" @select-all="selectAll">
-    </a-table>
-  </GiPageLayout>
-</template>
-
-<script setup lang="tsx">
-import type { TableColumnData } from '@arco-design/web-vue'
-import { baseAPI } from '@/apis/person'
-import { GiCellStatus } from '@/components/index'
-import { useTable } from '@/hooks'
-import Tree from './Tree.vue'
-
-interface Props {
-  multiple?: boolean
-  queryParams?: Record<string, any>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  multiple: false,
-  queryParams: () => ({})
-})
-
-const searchParams = reactive({
-  username: ''
-})
-
-const columns = [
-  {
-    title: '序号',
-    width: 68,
-    align: 'center',
-    render: ({ rowIndex }) => (<span>{rowIndex + 1}</span>)
-  },
-  {
-    title: '姓名',
-    dataIndex: 'name',
-    width: 100
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180
-  },
-  {
-    title: '地址',
-    dataIndex: 'address',
-    ellipsis: true,
-    tooltip: true
-  },
-  {
-    title: '状态',
-    width: 100,
-    align: 'center',
-    render: ({ record }) => {
-      return <GiCellStatus status={record.status} />
-    }
-  }
-] as TableColumnData[]
-
-const { loading, tableData, pagination, search, select, selectAll, getSelectedData } = useTable({
-  listAPI: (page) => baseAPI.getList({ ...page, ...searchParams, ...props.queryParams }),
-  immediate: true
-})
-
-const reset = () => {
-  searchParams.username = ''
-  search()
-}
-
-defineExpose({ getSelectedData })
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/dialog/UserList/index.vue b/frontend-pc/src/components/dialog/UserList/index.vue
deleted file mode 100644
index 9645e20..0000000
--- a/frontend-pc/src/components/dialog/UserList/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <GiPageLayout bg-transparent>
-    <a-row justify="end" class="g-row-tool">
-      <a-space wrap>
-        <a-input v-model="searchParams.username" placeholder="输入用户名搜索" allow-clear style="max-width: 250px">
-        </a-input>
-        <a-button type="primary" @click="search">
-          <template #icon><icon-search /></template>
-          <span>查询</span>
-        </a-button>
-        <a-button @click="reset">重置</a-button>
-      </a-space>
-    </a-row>
-
-    <a-table class="g-table" row-key="id" :loading="loading" :bordered="{ cell: true }" :columns="columns"
-      :data="tableData" :scroll="{ x: '100%', y: '100%' }"
-      :row-selection="{ type: props.multiple ? 'checkbox' : 'radio', showCheckedAll: true }" :pagination="pagination"
-      @select="select" @select-all="selectAll">
-    </a-table>
-  </GiPageLayout>
-</template>
-
-<script setup lang="tsx">
-import type { TableColumnData } from '@arco-design/web-vue'
-import { baseAPI } from '@/apis/person'
-import { GiCellStatus } from '@/components/index'
-import { useTable } from '@/hooks'
-
-interface Props {
-  multiple?: boolean
-  queryParams?: Record<string, any>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  multiple: false,
-  queryParams: () => ({})
-})
-
-const searchParams = reactive({
-  username: ''
-})
-
-const columns = [
-  {
-    title: '序号',
-    width: 68,
-    align: 'center',
-    render: ({ rowIndex }) => (<span>{rowIndex + 1}</span>)
-  },
-  {
-    title: '姓名',
-    dataIndex: 'name',
-    width: 180
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180
-  },
-  {
-    title: '地址',
-    dataIndex: 'address',
-    ellipsis: true,
-    tooltip: true
-  },
-  {
-    title: '状态',
-    width: 100,
-    align: 'center',
-    render: ({ record }) => {
-      return <GiCellStatus status={record.status} />
-    }
-  }
-] as TableColumnData[]
-
-const { loading, tableData, pagination, search, select, selectAll, getSelectedData } = useTable({
-  listAPI: (page) => baseAPI.getList({ ...page, ...searchParams, ...props.queryParams }),
-  immediate: true
-})
-
-const reset = () => {
-  searchParams.username = ''
-  search()
-}
-
-defineExpose({ getSelectedData })
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/dialog/index.ts b/frontend-pc/src/components/dialog/index.ts
deleted file mode 100644
index 3d3ffd5..0000000
--- a/frontend-pc/src/components/dialog/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ListItem as UserListItem } from '@/apis/person'
-import { createSelectDialog } from '@/utils/createSelectDialog'
-import TreeUserList from './TreeUserList/index.vue'
-import UserList from './UserList/index.vue'
-
-/** 选择用户列表的对话框 */
-export const SelectUserListDialog = createSelectDialog<UserListItem[]>({
-  title: '选择用户',
-  component: UserList
-})
-
-/** 左树右表的对话框 */
-export const SelectTreeUserListDialog = createSelectDialog<UserListItem[]>({
-  title: '左树右表对话框示例',
-  component: TreeUserList
-})
diff --git a/frontend-pc/src/components/icons/Icon403.vue b/frontend-pc/src/components/icons/Icon403.vue
deleted file mode 100644
index 6f0abf4..0000000
--- a/frontend-pc/src/components/icons/Icon403.vue
+++ /dev/null
@@ -1,625 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <g id="freepik--Floor--inject-70">
-      <ellipse id="freepik--floor--inject-70" cx="250" cy="384.61" rx="209.73" ry="94.79" style="fill: #f5f5f5">
-      </ellipse>
-    </g>
-    <g id="freepik--Shadows--inject-70">
-      <ellipse id="freepik--Shadow--inject-70" cx="352.36" cy="395.73" rx="56.05" ry="32.36" style="fill: #e0e0e0">
-      </ellipse>
-      <path id="freepik--shadow--inject-70"
-        d="M91.71,412.52c-9.53,5.57-9.53,14.59,0,20.15s25,5.56,34.51,0,9.53-14.58,0-20.15S101.24,407,91.71,412.52Z"
-        style="fill: #e0e0e0"></path>
-    </g>
-    <g id="freepik--Door--inject-70">
-      <g id="freepik--Bricks--inject-70">
-        <path d="M103.87,225.91v3.46c0,1.09.77,1.53,1.71,1l3.34-1.92V221L105.58,223A3.78,3.78,0,0,0,103.87,225.91Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M93.28,223v3.45c0,1.09.77,1.53,1.71,1l13.93-8V212L95,220A3.78,3.78,0,0,0,93.28,223Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M100.82,262.05,85,271.18a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.13a3.78,3.78,0,0,0,1.71-3V263C102.53,261.94,101.76,261.5,100.82,262.05Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M108.92,302.88l-13.93,8a3.78,3.78,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l13.93-8Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M93.28,186.59V190c0,1.09.77,1.53,1.71,1l13.93-8v-7.4l-13.93,8A3.78,3.78,0,0,0,93.28,186.59Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M77.44,295.91v3.46c0,1.09.76,1.53,1.71,1L95,291.23a3.77,3.77,0,0,0,1.71-3v-3.46c0-1.09-.76-1.53-1.71-1L79.15,293A3.77,3.77,0,0,0,77.44,295.91Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M93.28,259.32v3.46c0,1.09.77,1.53,1.71,1l13.93-8v-7.41L95,256.37A3.78,3.78,0,0,0,93.28,259.32Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M91.94,318.09v-3.45c0-1.09-.76-1.54-1.71-1l-15.82,9.13a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.14A3.75,3.75,0,0,0,91.94,318.09Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M92,176.33,76.2,185.46a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1L92,183.74a3.8,3.8,0,0,0,1.71-3v-3.46C93.73,176.23,93,175.79,92,176.33Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M100.82,189.31,85,198.44a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.14a3.78,3.78,0,0,0,1.71-3v-3.46C102.53,189.2,101.76,188.76,100.82,189.31Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M100.82,225.68,85,234.81a3.8,3.8,0,0,0-1.71,3v3.46c0,1.09.77,1.53,1.71,1l15.82-9.13a3.78,3.78,0,0,0,1.71-3v-3.46C102.53,225.57,101.76,225.13,100.82,225.68Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M85,333.14,100.82,324a3.8,3.8,0,0,0,1.71-3v-3.46c0-1.09-.77-1.53-1.71-1L85,325.73a3.8,3.8,0,0,0-1.71,3v3.46C83.29,333.24,84.06,333.68,85,333.14Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M235.65,161.92v3.46a3.77,3.77,0,0,1-1.7,3l-3.34,1.93v-7.41l3.34-1.92C234.89,160.39,235.65,160.83,235.65,161.92Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M230.61,281.09l13.93-8c.94-.55,1.7-.1,1.7,1v3.45a3.77,3.77,0,0,1-1.7,3l-13.93,8Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M246.24,146.74v3.46a3.79,3.79,0,0,1-1.7,3l-13.93,8v-7.4l13.93-8C245.48,145.21,246.24,145.65,246.24,146.74Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M238.71,194.54l15.82-9.14c.94-.54,1.71-.1,1.71,1v3.46a3.8,3.8,0,0,1-1.71,3l-15.82,9.13c-1,.55-1.71.1-1.71-1V197.5A3.75,3.75,0,0,1,238.71,194.54Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M230.61,244.72l13.93-8c.94-.54,1.7-.1,1.7,1v3.45a3.77,3.77,0,0,1-1.7,3l-13.93,8Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M246.24,110.37v3.46a3.77,3.77,0,0,1-1.7,3l-13.93,8v-7.4l13.93-8C245.48,108.84,246.24,109.28,246.24,110.37Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M262.09,201.4v3.46a3.77,3.77,0,0,1-1.71,3L244.56,217c-.94.55-1.7.11-1.7-1v-3.46a3.77,3.77,0,0,1,1.7-3l15.82-9.13C261.33,199.87,262.09,200.31,262.09,201.4Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M246.24,183.11v3.46a3.79,3.79,0,0,1-1.7,3l-13.93,8v-7.4l13.93-8C245.48,181.58,246.24,182,246.24,183.11Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M247.59,240.33v-3.46a3.77,3.77,0,0,1,1.71-3l15.82-9.13c.94-.55,1.71-.11,1.71,1v3.46a3.78,3.78,0,0,1-1.71,3l-15.82,9.14C248.35,241.86,247.59,241.42,247.59,240.33Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M238.71,121.8l15.82-9.14c.94-.54,1.71-.1,1.71,1v3.46a3.8,3.8,0,0,1-1.71,3l-15.82,9.13c-1,.55-1.71.1-1.71-1v-3.46A3.75,3.75,0,0,1,238.71,121.8Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M238.71,158.17,254.53,149c.94-.54,1.71-.1,1.71,1v3.46a3.8,3.8,0,0,1-1.71,3l-15.82,9.13c-1,.55-1.71.1-1.71-1v-3.45A3.75,3.75,0,0,1,238.71,158.17Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M254.53,247.36l-15.82,9.14c-1,.54-1.71.1-1.71-1v-3.46a3.77,3.77,0,0,1,1.71-3L254.53,240c.94-.55,1.71-.1,1.71,1v3.46A3.78,3.78,0,0,1,254.53,247.36Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M230.61,299.27l13.93-8c.94-.54,1.7-.1,1.7,1v3.46a3.79,3.79,0,0,1-1.7,3l-13.93,8Z"
-          style="fill: #e0e0e0"></path>
-      </g>
-      <g id="freepik--door--inject-70">
-        <g id="freepik--door--inject-70">
-          <path
-            d="M108.92,413V165.44a12,12,0,0,1,5.42-9.38L221.46,94.21a3.83,3.83,0,0,1,3.83-.38L229,96a3.79,3.79,0,0,1,1.6,3.51V347.06l-7.81,4.51-6.34-3.67-96,55.42v7.33l-7.81,4.51Z"
-            style="fill: #37474f"></path>
-          <path d="M134.28,395.32l-13.85,8v7.33l-7.81,4.51-3.7-2.14V165.44a11,11,0,0,1,1.6-5.35l23.58,13.62Z"
-            style="fill: #263238"></path>
-          <path
-            d="M112.62,167.59V415.14l7.81-4.5v-7.32l96-55.42,6.34,3.66,7.81-4.5V99.48c0-3.47-2.43-4.85-5.4-3.13L118,158.21A12,12,0,0,0,112.62,167.59Z"
-            style="fill: #455a64"></path>
-          <polygon points="120.43 168.9 120.43 406.38 219.1 349.42 219.1 111.95 120.43 168.9"
-            style="fill: currentcolor"></polygon>
-          <polygon points="120.43 168.9 120.43 406.38 219.1 349.42 219.1 111.95 120.43 168.9"
-            style=" opacity: 0.7;fill: #fff"></polygon>
-          <g style="opacity: 0.43">
-            <path d="M137.25,377.26V178.61l65-37.54V339.71ZM140,180.19V372.53l59.59-34.4V145.8Z"
-              style="fill: currentcolor"></path>
-            <path d="M137.25,178.61V377.26l65-37.55V141.07Zm62.31,159.52L140,372.53V180.19l59.59-34.39Z"
-              style="opacity: 0.1"></path>
-          </g>
-          <polygon points="219.1 349.42 219.1 111.95 222.75 109.83 222.76 351.57 219.1 349.42" style="fill: #263238">
-          </polygon>
-          <polygon points="120.43 410.64 222.76 351.57 219.1 349.42 120.43 406.38 120.43 410.64" style="fill: #e0e0e0">
-          </polygon>
-        </g>
-        <g id="freepik--Latch--inject-70">
-          <polygon points="122.34 258.22 124.31 259.36 124.32 292.09 122.34 290.95 122.34 258.22" style="fill: #e0e0e0">
-          </polygon>
-          <polygon points="124.31 259.36 134.94 253.22 134.95 285.95 124.32 292.09 124.31 259.36" style="fill: #fafafa">
-          </polygon>
-          <path d="M135,262.23l-4.66,2.68v5.32a.64.64,0,0,0,1,.55l3.7-2.13Z" style="opacity: 0.05"></path>
-          <polygon points="134.94 253.22 132.97 252.08 122.34 258.22 124.31 259.36 134.94 253.22" style="fill: #ebebeb">
-          </polygon>
-          <path
-            d="M128.39,263.82l4.88,2.81,1.95-3.38-4.88-2.81h0a.94.94,0,0,0-1,.09,3,3,0,0,0-1.38,2.39A1,1,0,0,0,128.39,263.82Z"
-            style="fill: #e0e0e0"></path>
-          <polygon
-            points="130.29 264.91 132.06 265.94 132.06 263.61 133.95 262.52 132.18 261.5 130.29 262.58 130.29 264.91"
-            style="opacity: 0.1"></polygon>
-          <polygon points="132.65 263.98 132.65 269.09 152.15 257.84 152.15 252.73 132.65 263.98" style="fill: #fafafa">
-          </polygon>
-          <polygon points="132.65 263.98 130.88 262.95 130.88 268.07 132.65 269.09 132.65 263.98" style="fill: #e0e0e0">
-          </polygon>
-          <polygon points="152.15 252.73 150.38 251.7 130.88 262.95 132.65 263.98 152.15 252.73" style="fill: #ebebeb">
-          </polygon>
-          <path
-            d="M127.84,278.23a4,4,0,0,1,1.79-3.1c1-.57,1.79-.11,1.79,1a3.92,3.92,0,0,1-1.08,2.52V282a1.35,1.35,0,0,1-.61,1.05l-.2.12c-.34.19-.61,0-.61-.35v-3.34C128.28,279.56,127.84,279.08,127.84,278.23Z"
-            style="fill: #455a64"></path>
-        </g>
-        <g id="freepik--Close--inject-70">
-          <path
-            d="M155.5,200.16l30.07-17.36c1.79-1,3.25-.2,3.25,1.87v20.65a7.21,7.21,0,0,1-3.25,5.63L155.5,228.31c-1.79,1-3.25.19-3.25-1.88V205.78A7.17,7.17,0,0,1,155.5,200.16Z"
-            style="opacity: 0.15"></path>
-          <path
-            d="M156.65,201l30.07-17.36c1.79-1,3.25-.2,3.25,1.87v20.65a7.21,7.21,0,0,1-3.25,5.63l-30.07,17.36c-1.8,1-3.25.19-3.25-1.88V206.66A7.15,7.15,0,0,1,156.65,201Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M165.59,198h-.08a.37.37,0,0,1-.29-.45l6.1-26.68a.36.36,0,0,1,.35-.29h0a.37.37,0,0,1,.36.26l6.1,19.65a.38.38,0,1,1-.72.22l-5.68-18.31L166,197.74A.38.38,0,0,1,165.59,198Z"
-            style="fill: #263238"></path>
-          <path
-            d="M157.66,220.88a.72.72,0,0,1-.09-.44V209.63a1.37,1.37,0,0,1,.09-.55.58.58,0,0,1,.29-.31l3.27-1.89c.11-.06.18,0,.23.05a1.51,1.51,0,0,1,.06.52v.45a2.41,2.41,0,0,1-.06.6.5.5,0,0,1-.23.31l-2.16,1.25v3L161,212c.1-.06.18,0,.22.05a1.3,1.3,0,0,1,.07.53V213a1.89,1.89,0,0,1-.07.6.55.55,0,0,1-.22.32L159.06,215v3.28l2.17-1.26a.15.15,0,0,1,.22,0,1.54,1.54,0,0,1,.06.53v.45a2.34,2.34,0,0,1-.06.61.54.54,0,0,1-.22.3l-3.28,1.9C157.81,220.93,157.71,220.94,157.66,220.88Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M162.78,217.6v-11a1.19,1.19,0,0,1,.1-.53.72.72,0,0,1,.29-.33l1.81-1q2.25-1.31,2.25,2a5.9,5.9,0,0,1-1,3.53v.07c.3.08.55.56.76,1.44l.68,2.95a.44.44,0,0,0,0,.1.34.34,0,0,1,0,.1c0,.27-.2.52-.61.75l-.32.19c-.35.2-.55.18-.58-.06l-.62-3a1.21,1.21,0,0,0-.31-.64c-.12-.08-.29-.05-.53.09l-.42.24v4.26a1,1,0,0,1-.59.85l-.31.17C163,218,162.78,217.93,162.78,217.6Zm2.28-7.69a1.4,1.4,0,0,0,.51-.76,3.86,3.86,0,0,0,.22-1.37,2,2,0,0,0-.21-1.1q-.21-.27-.57-.06l-.76.44v3.32Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M168.65,214.21v-11a1.38,1.38,0,0,1,.09-.54.8.8,0,0,1,.3-.33l1.81-1q2.25-1.31,2.25,2a5.94,5.94,0,0,1-1,3.53v.06c.3.09.55.57.76,1.45l.67,2.94,0,.1s0,.07,0,.11c0,.26-.2.51-.61.74l-.32.19c-.36.2-.55.18-.59-.06l-.61-3a1.19,1.19,0,0,0-.31-.63c-.12-.08-.3-.06-.54.08l-.41.24v4.27a1,1,0,0,1-.6.84l-.3.18C168.84,214.6,168.65,214.55,168.65,214.21Zm2.28-7.69a1.36,1.36,0,0,0,.51-.76,4.07,4.07,0,0,0,.21-1.37,1.92,1.92,0,0,0-.2-1.09.39.39,0,0,0-.57-.07l-.76.44V207Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M174.29,205.36q0-6.15,2.89-7.82t2.89,4.48q0,6.18-2.89,7.85T174.29,205.36Zm3.93,1a13.59,13.59,0,0,0,.33-3.46,9.2,9.2,0,0,0-.33-3.07q-.33-.77-1-.36a2.49,2.49,0,0,0-1,1.56,13.45,13.45,0,0,0-.33,3.45,9.36,9.36,0,0,0,.33,3.08c.23.52.57.64,1,.37A2.55,2.55,0,0,0,178.22,206.36Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M181.35,206.88v-11a1.38,1.38,0,0,1,.09-.54.68.68,0,0,1,.3-.33l1.8-1q2.27-1.31,2.26,2a5.94,5.94,0,0,1-1.05,3.53v.06c.29.09.55.57.76,1.45l.67,2.94a.3.3,0,0,1,0,.1.41.41,0,0,1,0,.11c0,.26-.2.51-.6.74l-.33.19c-.35.2-.54.18-.58-.06l-.62-3a1.13,1.13,0,0,0-.31-.63c-.11-.09-.29-.06-.53.08l-.41.24V206a1,1,0,0,1-.6.84l-.3.17C181.54,207.27,181.35,207.21,181.35,206.88Zm2.27-7.69a1.32,1.32,0,0,0,.52-.76,4.11,4.11,0,0,0,.21-1.37,2,2,0,0,0-.21-1.1.39.39,0,0,0-.56-.06l-.76.44v3.32Z"
-            style="fill: #fafafa"></path>
-        </g>
-      </g>
-      <g id="freepik--Tapes--inject-70">
-        <polygon points="112.53 369.86 108.83 367.75 108.84 380.2 112.53 382.31 112.53 369.86" style="opacity: 0.2">
-        </polygon>
-        <polygon points="112.53 366.54 108.35 364.1 108.36 376.55 112.53 378.99 112.53 366.54"
-          style="fill: currentcolor"></polygon>
-        <polygon points="112.53 366.54 108.35 364.1 108.36 376.55 112.53 378.99 112.53 366.54" style="opacity: 0.2">
-        </polygon>
-        <polygon points="230.53 215.01 112.53 369.86 112.54 382.31 230.53 227.47 230.53 215.01" style="opacity: 0.25">
-        </polygon>
-        <polygon points="230.53 211.7 112.53 366.54 112.54 378.99 230.53 224.15 230.53 211.7"
-          style="fill: currentcolor"></polygon>
-        <polygon points="230.53 224.13 230.53 218.48 224.68 219.38 219.81 225.77 230.53 224.13" style="fill: #455a64">
-        </polygon>
-        <polygon points="215.94 243.32 205.18 244.97 200.3 251.37 211.07 249.71 215.94 243.32" style="fill: #455a64">
-        </polygon>
-        <polygon points="225.69 230.52 214.93 232.17 210.05 238.57 220.82 236.92 225.69 230.52" style="fill: #455a64">
-        </polygon>
-        <polygon points="206.19 256.11 195.43 257.77 190.55 264.16 201.32 262.51 206.19 256.11" style="fill: #455a64">
-        </polygon>
-        <polygon points="196.44 268.91 185.67 270.56 180.8 276.96 191.56 275.31 196.44 268.91" style="fill: #455a64">
-        </polygon>
-        <polygon points="186.69 281.71 175.92 283.36 171.05 289.76 181.81 288.11 186.69 281.71" style="fill: #455a64">
-        </polygon>
-        <polygon points="176.94 294.5 166.17 296.16 161.29 302.55 172.06 300.9 176.94 294.5" style="fill: #455a64">
-        </polygon>
-        <polygon points="167.18 307.3 156.42 308.95 151.54 315.35 162.31 313.7 167.18 307.3" style="fill: #455a64">
-        </polygon>
-        <polygon points="157.43 320.1 146.67 321.75 141.79 328.15 152.56 326.5 157.43 320.1" style="fill: #455a64">
-        </polygon>
-        <polygon points="147.68 332.89 136.91 334.55 132.04 340.94 142.81 339.29 147.68 332.89" style="fill: #455a64">
-        </polygon>
-        <polygon points="137.93 345.69 127.16 347.34 122.29 353.74 133.05 352.09 137.93 345.69" style="fill: #455a64">
-        </polygon>
-        <polygon points="128.18 358.49 117.41 360.14 112.53 366.54 123.3 364.88 128.18 358.49" style="fill: #455a64">
-        </polygon>
-        <polygon points="118.41 371.29 112.53 372.19 112.53 378.99 113.53 377.68 118.41 371.29" style="fill: #455a64">
-        </polygon>
-        <polygon points="112.53 283.52 230.53 298.93 230.53 311.38 112.53 295.98 112.53 283.52" style="opacity: 0.25">
-        </polygon>
-        <polygon points="112.53 281.42 230.53 296.82 230.53 309.27 112.53 293.87 112.53 281.42"
-          style="fill: currentcolor"></polygon>
-        <polygon points="112.53 283.52 108.83 281.35 108.84 293.81 112.53 295.97 112.53 283.52" style="opacity: 0.2">
-        </polygon>
-        <polygon points="112.53 281.42 108.35 278.97 108.36 291.43 112.53 293.87 112.53 281.42"
-          style="fill: currentcolor"></polygon>
-        <polygon points="112.53 281.42 108.35 278.97 108.36 291.43 112.53 293.87 112.53 281.42" style="opacity: 0.2">
-        </polygon>
-        <path
-          d="M117.8,284.78s.06,0,.07.09a.54.54,0,0,1,0,.22l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.34-.17-.22,1.48,1.25.16s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.16a.66.66,0,0,1-.06.2s-.07.08-.1.07l-1.25-.16-.34,2.35a.77.77,0,0,1-.07.2c0,.06-.07.09-.1.08l-.59-.07s0,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2s.07-.08.1-.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M118.2,287.72a7.33,7.33,0,0,1,.27-1.14,4.74,4.74,0,0,1,.41-.9,1.83,1.83,0,0,1,.53-.57A.8.8,0,0,1,120,285a.81.81,0,0,1,.55.31,1.82,1.82,0,0,1,.35.68,4.55,4.55,0,0,1,.13,1,7.67,7.67,0,0,1,0,1.16c0,.32-.09.64-.14,1s-.1.66-.15,1a7.47,7.47,0,0,1-.27,1.13,4.85,4.85,0,0,1-.41.91,2,2,0,0,1-.53.57.86.86,0,0,1-.61.16.84.84,0,0,1-.56-.31,1.88,1.88,0,0,1-.34-.68,4,4,0,0,1-.13-1,7.78,7.78,0,0,1,0-1.16c0-.3.08-.62.13-1S118.14,288,118.2,287.72Zm1.69,2.13c0-.13,0-.28.07-.43s.06-.33.08-.49,0-.33.07-.49,0-.29,0-.42a2.9,2.9,0,0,0,0-.5,1.58,1.58,0,0,0-.05-.41.71.71,0,0,0-.13-.29.34.34,0,0,0-.48-.06.74.74,0,0,0-.22.24,2.29,2.29,0,0,0-.16.38,3.33,3.33,0,0,0-.12.5,3.86,3.86,0,0,0-.07.41c0,.16,0,.32-.08.49s0,.33-.07.49,0,.3,0,.43a2.79,2.79,0,0,0,0,.93c0,.25.17.39.36.41a.47.47,0,0,0,.46-.31A2.93,2.93,0,0,0,119.89,289.85Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M123.63,285.52a1,1,0,0,1,.5.22,1.3,1.3,0,0,1,.34.51,2.92,2.92,0,0,1,.13.81,5.59,5.59,0,0,1-.07,1.11,5.42,5.42,0,0,1-.34,1.34,1.91,1.91,0,0,1-.51.77l.18,2.66v.12a.38.38,0,0,1-.06.16s0,.07-.08.07l-.61-.08a.13.13,0,0,1-.11-.12.69.69,0,0,1,0-.2l-.16-2.39-.42-.05-.34,2.32a.52.52,0,0,1-.06.2c0,.06-.07.09-.1.08l-.59-.07s0,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.08Zm-1,3.23.51.07a.37.37,0,0,0,.33-.14,1.11,1.11,0,0,0,.22-.61,1.27,1.27,0,0,0,0-.65.35.35,0,0,0-.29-.21l-.51-.07Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M124.75,293.42a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l1-7a.93.93,0,0,1,.07-.2c0-.05.07-.08.1-.07l1.44.18a.69.69,0,0,1,.48.27,1.37,1.37,0,0,1,.25.56,2.93,2.93,0,0,1,.08.75,7.35,7.35,0,0,1-.07.82,3.19,3.19,0,0,1-.11.54,4,4,0,0,1-.12.4c0,.11-.09.19-.13.26l-.09.15a2,2,0,0,1,.15.71,7.05,7.05,0,0,1-.07.94,6.25,6.25,0,0,1-.18.86,3.27,3.27,0,0,1-.29.73,1.32,1.32,0,0,1-.4.49.63.63,0,0,1-.51.14Zm1-1.6.74.1c.09,0,.17-.05.24-.17a1.24,1.24,0,0,0,.15-.46,1.26,1.26,0,0,0,0-.48c0-.14-.1-.21-.19-.22l-.74-.09Zm1.49-3.49a1.17,1.17,0,0,0,0-.46c0-.12-.09-.19-.18-.2l-.7-.09-.18,1.24.7.09c.09,0,.16,0,.23-.14A1.44,1.44,0,0,0,127.2,288.33Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M128.27,293.87s-.05,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07l.59.07a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-1,7a.86.86,0,0,1-.07.21c0,.05-.07.08-.1.07Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M132.37,286.64a.83.83,0,0,1,.53.29,1.72,1.72,0,0,1,.35.69,3.94,3.94,0,0,1,.16,1,8.93,8.93,0,0,1-.06,1.24q0,.24-.06.42c0,.13,0,.25,0,.37s0,.23-.06.36a3.55,3.55,0,0,1-.06.4,7.41,7.41,0,0,1-.29,1.21,4.66,4.66,0,0,1-.43.92,1.94,1.94,0,0,1-.52.57.81.81,0,0,1-.59.15l-1.22-.15s0,0-.07-.1a.7.7,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07Zm.15,3.06c.11-.83,0-1.28-.42-1.32l-.46-.06-.6,4.13.48.06c.37.05.63-.34.77-1.18l.06-.42.06-.4.06-.38C132.49,290,132.5,289.86,132.52,289.7Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M136,287.1a.79.79,0,0,1,.53.29,1.75,1.75,0,0,1,.35.68,4.1,4.1,0,0,1,.16,1,8.93,8.93,0,0,1-.06,1.24c0,.16,0,.29-.06.42s0,.25,0,.37,0,.23-.05.35,0,.26-.07.41a7.67,7.67,0,0,1-.29,1.21,4.66,4.66,0,0,1-.43.92,1.94,1.94,0,0,1-.52.57.81.81,0,0,1-.59.15l-1.22-.15s0,0-.07-.1a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2s.07-.08.1-.07Zm.15,3.06c.11-.83,0-1.28-.42-1.33l-.46-.05-.6,4.13.48.06c.37,0,.63-.34.77-1.18l.06-.43L136,291l.06-.38C136.08,290.46,136.09,290.32,136.11,290.16Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M139.62,293.55s0,0,.07.09a.49.49,0,0,1,0,.21l-.16,1.16a.93.93,0,0,1-.07.2.14.14,0,0,1-.1.08l-2.13-.28s0,0-.07-.1a.67.67,0,0,1,0-.2l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08l2.09.27s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.38-.18-.17,1.18,1.28.16a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-.17,1.15a.65.65,0,0,1-.06.21c0,.05-.07.08-.1.07l-1.28-.16-.18,1.21Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M142.39,295.67s-.08,0-.1-.11a.41.41,0,0,1,0-.16l-.49-3.85-.53,3.67a.77.77,0,0,1-.07.2c0,.06-.07.09-.1.08l-.59-.07s-.05,0-.07-.1a.7.7,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07l.47.06s.09,0,.11.11,0,.12,0,.16l.48,3.85.54-3.68a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07l.59.07s.06,0,.07.1a.48.48,0,0,1,0,.21l-1,7a.65.65,0,0,1-.06.21s-.07.08-.1.07Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M146.72,296.22s-.06,0-.08-.09a.74.74,0,0,1,0-.21l.16-1.11-1.41-.18s-.06,0-.08-.1a.74.74,0,0,1,0-.21l.17-1.15a1.4,1.4,0,0,1,.12-.47l1.94-3.92a.42.42,0,0,1,.1-.15.14.14,0,0,1,.09,0l.68.09s.06,0,.07.1a.48.48,0,0,1,0,.21l-.61,4.17.39.05a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-.17,1.15a.48.48,0,0,1-.07.21c0,.05-.06.08-.09.07l-.39,0-.16,1.11a.52.52,0,0,1-.07.2c0,.06-.06.08-.1.08Zm.35-3.15.3-2-1,1.92Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M151.09,288.92a.79.79,0,0,1,.54.31,1.88,1.88,0,0,1,.31.7,4.59,4.59,0,0,1,.1,1A11.23,11.23,0,0,1,152,292c0,.32-.09.64-.14,1s-.1.66-.14,1a11.3,11.3,0,0,1-.26,1.11,4.09,4.09,0,0,1-.38.91,1.84,1.84,0,0,1-.49.59.81.81,0,0,1-.61.17.79.79,0,0,1-.55-.31,1.81,1.81,0,0,1-.31-.7,4.59,4.59,0,0,1-.1-1,11.23,11.23,0,0,1,.07-1.13c0-.3.08-.62.13-1s.1-.67.16-1a9,9,0,0,1,.25-1.11,4.09,4.09,0,0,1,.38-.91,1.84,1.84,0,0,1,.49-.59A.82.82,0,0,1,151.09,288.92Zm-.23,4.89c.1-.62.19-1.22.27-1.83,0-.18,0-.35,0-.5a2.55,2.55,0,0,0,0-.41.71.71,0,0,0-.11-.28.27.27,0,0,0-.21-.13.3.3,0,0,0-.24.07.7.7,0,0,0-.18.25,2.35,2.35,0,0,0-.14.38c0,.15-.07.32-.1.5q-.15.9-.27,1.83a4.77,4.77,0,0,0,0,.5,1.76,1.76,0,0,0,0,.41.66.66,0,0,0,.11.28.27.27,0,0,0,.21.13.3.3,0,0,0,.24-.07.7.7,0,0,0,.18-.25,1.68,1.68,0,0,0,.14-.38C150.8,294.16,150.83,294,150.86,293.81Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M155.51,289.6s.06,0,.07.09a.49.49,0,0,1,0,.21l-.17,1.16a.65.65,0,0,1-.06.21l-.09.16-.73,1.25a1.59,1.59,0,0,1,.46.81,3.34,3.34,0,0,1,0,1.39,3.93,3.93,0,0,1-.62,1.81,1.09,1.09,0,0,1-1.06.49.92.92,0,0,1-.55-.26,1.49,1.49,0,0,1-.35-.54,2.71,2.71,0,0,1-.16-.72,3.56,3.56,0,0,1,0-.8.69.69,0,0,1,0-.17s.05-.06.08-.06l.57.07a.17.17,0,0,1,.13.12,2.17,2.17,0,0,0,.07.24.7.7,0,0,0,.13.24.32.32,0,0,0,.26.14.43.43,0,0,0,.38-.13.84.84,0,0,0,.22-.53.86.86,0,0,0-.06-.58.47.47,0,0,0-.33-.22l-.37,0a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l.14-.94a.65.65,0,0,1,.06-.21l.09-.17.64-1.1-1.17-.15s-.06,0-.07-.1a.48.48,0,0,1,0-.21l.17-1.15a.4.4,0,0,1,.07-.2c0-.06.06-.08.09-.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M160.1,290.18s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.58.58,0,0,1-.06.21s-.07.08-.1.07l-1.34-.17-.22,1.49,1.25.16s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.65.65,0,0,1-.06.21c0,.05-.07.08-.1.07L158,295l-.34,2.35a.52.52,0,0,1-.07.2c0,.06-.06.08-.1.08l-.59-.08s-.05,0-.07-.09a.54.54,0,0,1,0-.22l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M160.47,293.12a8.91,8.91,0,0,1,.27-1.13,4.74,4.74,0,0,1,.41-.9,2.15,2.15,0,0,1,.53-.58.91.91,0,0,1,.62-.16.86.86,0,0,1,.55.31,2,2,0,0,1,.34.69,3.93,3.93,0,0,1,.13,1,6.63,6.63,0,0,1,0,1.16c0,.31-.09.64-.14,1s-.1.66-.14,1a8.64,8.64,0,0,1-.28,1.14,4.19,4.19,0,0,1-.41.9,1.88,1.88,0,0,1-.53.58.84.84,0,0,1-.61.15.89.89,0,0,1-.56-.3,1.93,1.93,0,0,1-.33-.69,3.9,3.9,0,0,1-.14-1,7.71,7.71,0,0,1,.06-1.16c0-.3.08-.62.13-1S160.42,293.43,160.47,293.12Zm1.69,2.13c0-.13.05-.27.08-.43s0-.32.07-.49.05-.33.07-.48,0-.3.05-.42a4.77,4.77,0,0,0,0-.51,2.42,2.42,0,0,0-.05-.41.78.78,0,0,0-.14-.29.34.34,0,0,0-.23-.13.32.32,0,0,0-.25.07.83.83,0,0,0-.21.24,1.76,1.76,0,0,0-.17.39,3.19,3.19,0,0,0-.12.49c0,.12,0,.26-.07.42s-.05.31-.08.48l-.06.49c0,.16,0,.31-.06.44a2.73,2.73,0,0,0,0,.92c0,.25.17.39.36.41s.34-.08.47-.3A3,3,0,0,0,162.16,295.25Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M165.89,290.92a1,1,0,0,1,.51.22,1.19,1.19,0,0,1,.33.51,2.64,2.64,0,0,1,.13.81,5.59,5.59,0,0,1-.07,1.11,6,6,0,0,1-.33,1.34,2,2,0,0,1-.52.77l.18,2.66a.48.48,0,0,1,0,.12.43.43,0,0,1-.06.17.1.1,0,0,1-.07.06l-.62-.08a.14.14,0,0,1-.11-.11.76.76,0,0,1,0-.21l-.16-2.39-.41,0-.34,2.33a.59.59,0,0,1-.07.2c0,.05-.06.08-.1.07l-.58-.07s-.06,0-.08-.1a.74.74,0,0,1,0-.21l1-7a.48.48,0,0,1,.07-.21s.06-.08.09-.07Zm-1,3.23.51.07a.39.39,0,0,0,.34-.14,1.12,1.12,0,0,0,.21-.61,1.08,1.08,0,0,0,0-.65.35.35,0,0,0-.29-.21l-.5-.07Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M167,298.82s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.65.65,0,0,1,.07-.21s.06-.08.1-.07l1.44.18a.73.73,0,0,1,.48.27,1.37,1.37,0,0,1,.25.56,3,3,0,0,1,.07.75,5.55,5.55,0,0,1-.06.82,5.33,5.33,0,0,1-.11.55,2.54,2.54,0,0,1-.13.39,1.29,1.29,0,0,1-.12.26l-.09.15a1.8,1.8,0,0,1,.14.71,5.5,5.5,0,0,1-.06.94c-.05.3-.11.58-.18.86a3.83,3.83,0,0,1-.29.73,1.47,1.47,0,0,1-.4.5.67.67,0,0,1-.51.14Zm.95-1.6.74.1c.09,0,.17,0,.25-.16a1.37,1.37,0,0,0,.15-.47,1.25,1.25,0,0,0,0-.48c0-.13-.09-.21-.18-.22l-.74-.09Zm1.5-3.49a1.4,1.4,0,0,0,0-.46c0-.12-.09-.19-.18-.2l-.7-.09-.18,1.24.7.09a.22.22,0,0,0,.22-.14A1.14,1.14,0,0,0,169.47,293.73Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M170.55,299.27s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.52.52,0,0,1,.07-.2c0-.06.06-.08.1-.08l.58.08s.06,0,.08.09a.74.74,0,0,1,0,.21l-1,7a.4.4,0,0,1-.07.2c0,.06-.06.08-.09.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M174.66,292a.82.82,0,0,1,.53.3,1.75,1.75,0,0,1,.35.68,4.1,4.1,0,0,1,.16,1,9,9,0,0,1-.06,1.24q0,.23-.06.42c0,.13,0,.25-.05.36s0,.24-.05.36,0,.26-.07.4a7.54,7.54,0,0,1-.29,1.22,4.94,4.94,0,0,1-.43.92,1.94,1.94,0,0,1-.52.57.86.86,0,0,1-.59.15l-1.22-.16s-.05,0-.07-.09a.5.5,0,0,1,0-.21l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08Zm.15,3.07c.11-.84,0-1.28-.42-1.33l-.46-.06-.6,4.13.48.07c.37,0,.63-.35.77-1.18l.06-.43.06-.39.06-.39C174.78,295.4,174.79,295.26,174.81,295.11Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M178.25,292.5a.87.87,0,0,1,.53.3,1.75,1.75,0,0,1,.35.68,3.63,3.63,0,0,1,.15,1,6.71,6.71,0,0,1-.06,1.24c0,.15,0,.29-.05.42s0,.25,0,.36l-.06.36c0,.12,0,.26-.06.4a6.81,6.81,0,0,1-.3,1.22,4.38,4.38,0,0,1-.42.92,1.94,1.94,0,0,1-.52.57.93.93,0,0,1-.6.15L176,300s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.77.77,0,0,1,.07-.2c0-.06.07-.08.1-.08Zm.15,3.07c.1-.84,0-1.28-.43-1.33l-.46-.06-.6,4.13.48.06c.38.05.64-.34.77-1.17,0-.15.05-.3.07-.43l.06-.39c0-.13,0-.26.05-.39S178.38,295.72,178.4,295.57Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M181.91,299s.05,0,.07.1a.49.49,0,0,1,0,.21l-.16,1.15a.77.77,0,0,1-.07.2c0,.06-.07.09-.1.08l-2.12-.27s-.06,0-.08-.1a.74.74,0,0,1,0-.21l1-7a.48.48,0,0,1,.07-.21c0-.05.06-.08.09-.07l2.09.27s.06,0,.08.09a.8.8,0,0,1,0,.22l-.17,1.15a.59.59,0,0,1-.06.2.14.14,0,0,1-.1.08l-1.38-.18-.17,1.17,1.28.17s.06,0,.07.1a.48.48,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.29-.17-.17,1.22Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M184.67,301.08a.15.15,0,0,1-.11-.12.73.73,0,0,1,0-.16L184,297l-.53,3.68a.4.4,0,0,1-.07.2c0,.06-.06.08-.09.08l-.59-.08s-.06,0-.07-.1a.48.48,0,0,1,0-.21l1-7a.52.52,0,0,1,.07-.2c0-.06.06-.08.1-.08l.46.06a.14.14,0,0,1,.11.11.9.9,0,0,1,0,.16l.49,3.85.53-3.67a.4.4,0,0,1,.07-.2c0-.06.06-.08.09-.08l.59.07s.06,0,.08.1a.74.74,0,0,1,0,.21l-1,7a.4.4,0,0,1-.07.2c0,.06-.06.08-.09.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M189,301.63a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l.16-1.11-1.41-.18s-.06,0-.07-.1a.48.48,0,0,1,0-.21l.17-1.15a1.61,1.61,0,0,1,.12-.46l1.94-3.93a.42.42,0,0,1,.1-.15.11.11,0,0,1,.1,0l.67.08s.06,0,.08.1a.74.74,0,0,1,0,.21l-.6,4.18.38.05s.06,0,.07.09a.53.53,0,0,1,0,.22l-.17,1.15a.52.52,0,0,1-.06.2s-.07.08-.1.08l-.39-.05-.16,1.11a.43.43,0,0,1-.07.2c0,.05-.06.08-.09.07Zm.36-3.16.29-2-.95,1.92Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M193.37,294.33a.76.76,0,0,1,.54.31,1.83,1.83,0,0,1,.31.69,4.07,4.07,0,0,1,.1,1,8.94,8.94,0,0,1-.07,1.14c0,.31-.08.64-.13,1s-.1.66-.15.95a8.77,8.77,0,0,1-.26,1.12,4.53,4.53,0,0,1-.37.91,2,2,0,0,1-.5.59.79.79,0,0,1-.61.16.76.76,0,0,1-.55-.31,1.83,1.83,0,0,1-.3-.69,4.63,4.63,0,0,1-.11-1,9,9,0,0,1,.08-1.14c0-.3.08-.62.13-1s.1-.66.15-1a9,9,0,0,1,.25-1.11,4.53,4.53,0,0,1,.38-.91,2,2,0,0,1,.49-.59A.82.82,0,0,1,193.37,294.33Zm-.23,4.88c.11-.61.19-1.22.27-1.82,0-.18,0-.35,0-.51a1.67,1.67,0,0,0,0-.4.7.7,0,0,0-.11-.29.28.28,0,0,0-.21-.12.26.26,0,0,0-.23.06.86.86,0,0,0-.19.25,2.49,2.49,0,0,0-.14.39,4.9,4.9,0,0,0-.1.5c-.1.59-.19,1.2-.27,1.82,0,.18,0,.35,0,.5a1.73,1.73,0,0,0,0,.41.7.7,0,0,0,.11.29.28.28,0,0,0,.21.12.29.29,0,0,0,.24-.06.7.7,0,0,0,.18-.25,1.77,1.77,0,0,0,.14-.39A3.15,3.15,0,0,0,193.14,299.21Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M197.78,295s.05,0,.07.1a.7.7,0,0,1,0,.21l-.17,1.15a.65.65,0,0,1-.07.21.79.79,0,0,1-.08.16l-.73,1.26a1.52,1.52,0,0,1,.46.8,3.57,3.57,0,0,1,0,1.4,3.84,3.84,0,0,1-.62,1.8,1.13,1.13,0,0,1-1.07.5,1,1,0,0,1-.54-.26,1.48,1.48,0,0,1-.35-.55,2.54,2.54,0,0,1-.16-.72,3.07,3.07,0,0,1,0-.8.42.42,0,0,1,.05-.17s0-.06.08-.06l.57.08q.09,0,.12.12c0,.07.05.15.08.23a.85.85,0,0,0,.13.25.34.34,0,0,0,.26.13.45.45,0,0,0,.38-.12.94.94,0,0,0,.22-.54.84.84,0,0,0-.06-.57.44.44,0,0,0-.33-.22l-.37-.05s-.06,0-.08-.1a.74.74,0,0,1,0-.21l.13-.93a.81.81,0,0,1,.07-.22l.09-.16.64-1.11-1.17-.14a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l.17-1.16a.59.59,0,0,1,.06-.2c0-.05.07-.08.1-.07Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M202.36,295.59s.06,0,.08.09a.81.81,0,0,1,0,.22l-.17,1.15a.59.59,0,0,1-.06.2c0,.05-.07.08-.1.08l-1.34-.18-.22,1.49,1.25.16s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.16a.59.59,0,0,1-.06.2s-.07.08-.1.07l-1.25-.16-.34,2.35a.77.77,0,0,1-.07.2c0,.06-.06.08-.1.08l-.59-.08s0,0-.07-.09a.49.49,0,0,1,0-.21l1-7a.59.59,0,0,1,.06-.2c0-.06.07-.08.1-.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M202.76,298.53a7.18,7.18,0,0,1,.28-1.13,3.78,3.78,0,0,1,.41-.9,2,2,0,0,1,.52-.58.87.87,0,0,1,.62-.16.84.84,0,0,1,.55.31,1.89,1.89,0,0,1,.34.68,4.06,4.06,0,0,1,.14,1,7.85,7.85,0,0,1-.06,1.16c0,.31-.08.63-.13,1s-.1.66-.15.95A7.6,7.6,0,0,1,205,302a3.94,3.94,0,0,1-.41.9,1.85,1.85,0,0,1-.52.58.88.88,0,0,1-1.17-.15,1.86,1.86,0,0,1-.34-.69,4.52,4.52,0,0,1-.14-1,7.91,7.91,0,0,1,.06-1.17c0-.29.08-.61.13-.95S202.71,298.84,202.76,298.53Zm1.7,2.13c0-.13,0-.27.07-.43s.05-.32.08-.49l.06-.49c0-.15,0-.29.05-.42a3,3,0,0,0,0-.5,1.64,1.64,0,0,0-.05-.41.71.71,0,0,0-.13-.29.32.32,0,0,0-.23-.13.36.36,0,0,0-.26.07.63.63,0,0,0-.21.24,2.7,2.7,0,0,0-.17.38c0,.15-.08.32-.11.5s-.05.26-.08.42,0,.31-.07.48-.05.33-.07.49,0,.3-.05.44a3,3,0,0,0,0,.92c.06.25.18.39.37.41a.47.47,0,0,0,.46-.31A2.83,2.83,0,0,0,204.46,300.66Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M208.17,296.33a.91.91,0,0,1,.5.22,1.13,1.13,0,0,1,.33.5,2.62,2.62,0,0,1,.14.81,6.52,6.52,0,0,1-.07,1.12,5.54,5.54,0,0,1-.34,1.34,2,2,0,0,1-.51.77l.18,2.65v.12a.43.43,0,0,1-.06.17c0,.05-.05.06-.08.06l-.61-.08c-.06,0-.1,0-.11-.11a.75.75,0,0,1,0-.2l-.16-2.39-.42-.06-.34,2.33a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-.59-.08s-.05,0-.07-.09a.79.79,0,0,1,0-.22l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08Zm-1,3.23.51.06a.37.37,0,0,0,.33-.13,1.68,1.68,0,0,0,.19-1.26.38.38,0,0,0-.29-.22l-.51-.06Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M209.29,304.22s-.06,0-.07-.09a.48.48,0,0,1,0-.21l1-7a.77.77,0,0,1,.07-.2c0-.06.06-.08.1-.08l1.44.19a.68.68,0,0,1,.48.26,1.41,1.41,0,0,1,.25.57,2.52,2.52,0,0,1,.07.75,5.55,5.55,0,0,1-.06.82,4.63,4.63,0,0,1-.11.54,2.35,2.35,0,0,1-.13.4,2.17,2.17,0,0,1-.12.26l-.09.14a1.85,1.85,0,0,1,.14.72,5.39,5.39,0,0,1-.06.93,6.09,6.09,0,0,1-.18.87,3.27,3.27,0,0,1-.29.73,1.53,1.53,0,0,1-.4.49.67.67,0,0,1-.51.14Zm1-1.59.75.09c.08,0,.16,0,.24-.16a1.31,1.31,0,0,0,.15-.46,1.5,1.5,0,0,0,0-.48c0-.14-.1-.21-.19-.22l-.74-.1Zm1.5-3.5a1.17,1.17,0,0,0,0-.46c0-.12-.09-.18-.18-.19l-.7-.09-.18,1.24.7.09c.09,0,.16,0,.23-.14A1.43,1.43,0,0,0,211.74,299.13Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M212.83,304.68s-.06,0-.08-.1a.74.74,0,0,1,0-.21l1-7a.43.43,0,0,1,.07-.2c0-.05.06-.08.09-.07l.59.07s.06,0,.07.1a.48.48,0,0,1,0,.21l-1,7a.52.52,0,0,1-.07.2c0,.06-.06.09-.1.08Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M216.92,297.45a.81.81,0,0,1,.53.29,1.89,1.89,0,0,1,.35.68,4.13,4.13,0,0,1,.15,1,6.68,6.68,0,0,1-.06,1.24c0,.15,0,.29,0,.42l-.06.37c0,.11,0,.23-.05.35s0,.26-.06.41a7.64,7.64,0,0,1-.3,1.21,4.15,4.15,0,0,1-.42.92,2,2,0,0,1-.53.57.8.8,0,0,1-.59.15l-1.21-.15a.12.12,0,0,1-.07-.1.48.48,0,0,1,0-.21l1-7a.59.59,0,0,1,.07-.2c0-.05.06-.08.1-.07Zm.15,3.06c.1-.83,0-1.28-.43-1.33l-.46-.06-.6,4.14.48.06c.38.05.64-.35.77-1.18,0-.15,0-.29.07-.43l.06-.39c0-.12,0-.25,0-.38S217.05,300.66,217.07,300.51Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M220.51,297.91a.81.81,0,0,1,.54.29,2.06,2.06,0,0,1,.35.68,4.69,4.69,0,0,1,.15,1,6.68,6.68,0,0,1-.06,1.24l-.06.42c0,.13,0,.25-.05.36s0,.24,0,.36l-.06.4a8.71,8.71,0,0,1-.3,1.22,4.15,4.15,0,0,1-.42.92,2,2,0,0,1-.53.57.81.81,0,0,1-.59.15l-1.21-.16s-.06,0-.08-.09a.74.74,0,0,1,0-.21l1-7a.4.4,0,0,1,.07-.2c0-.06.06-.08.1-.08Zm.16,3.06c.1-.83,0-1.28-.43-1.33l-.46-.06-.6,4.14.48.06c.38,0,.63-.35.77-1.18,0-.15,0-.29.07-.43s0-.26.05-.39l.06-.38C220.63,301.27,220.65,301.12,220.67,301Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M224.18,304.36s0,0,.07.09a.49.49,0,0,1,0,.21l-.16,1.16a.93.93,0,0,1-.07.2c0,.05-.06.08-.1.07l-2.13-.27s0,0-.07-.09a.74.74,0,0,1,0-.21l1-7a.4.4,0,0,1,.07-.2c0-.06.06-.08.09-.08l2.09.27s.06,0,.08.1a.74.74,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.38-.18-.17,1.18,1.28.16a.12.12,0,0,1,.07.1.48.48,0,0,1,0,.21l-.17,1.15a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-1.29-.16-.17,1.21Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M226.94,306.48c-.05,0-.08,0-.11-.11a.69.69,0,0,1,0-.16l-.49-3.85-.54,3.67a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08l-.59-.08s-.06,0-.07-.09a.48.48,0,0,1,0-.21l1-7a.52.52,0,0,1,.06-.2c0-.06.07-.08.1-.08l.47.06c.05,0,.08.05.1.12a.41.41,0,0,1,0,.16l.49,3.85.53-3.68a.77.77,0,0,1,.07-.2.14.14,0,0,1,.1-.08l.59.08s0,0,.07.1a.48.48,0,0,1,0,.21l-1,7a.52.52,0,0,1-.06.2c0,.06-.07.08-.1.08Z"
-          style="fill: #37474f"></path>
-      </g>
-    </g>
-    <g id="freepik--error-403--inject-70">
-      <g id="freepik--404--inject-70">
-        <path
-          d="M142.21,105.27a1.09,1.09,0,0,0-.17-.13l-5.26-3V77.19a1.71,1.71,0,0,0-.41-1.27.64.64,0,0,0-.17-.13l-5.62-3.24a.75.75,0,0,0-.82,0L122,77.11a3.55,3.55,0,0,0-1.07.89,7.56,7.56,0,0,0-.85,1.65L104.56,118.6a10.66,10.66,0,0,0-.67,3.81v8.45a1.67,1.67,0,0,0,.42,1.27.7.7,0,0,0,.17.13l5.62,3.25a.75.75,0,0,0,.81-.06l10.67-6.16v1.63a1.69,1.69,0,0,0,.42,1.27l.16.13,5.63,3.25a.79.79,0,0,0,.82-.06l6.77-3.91a2.64,2.64,0,0,0,1-1.21,4.14,4.14,0,0,0,.41-1.75v-8.12l4.45-2.57a2.63,2.63,0,0,0,1-1.21,4,4,0,0,0,.41-1.75v-8.44A1.7,1.7,0,0,0,142.21,105.27Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M126.47,81.24l0,.1a7.51,7.51,0,0,0-.79,1.55l-15.47,39a9.49,9.49,0,0,0-.46,1.6l-5.66-3.27a10.25,10.25,0,0,1,.45-1.58L120,79.65a7.74,7.74,0,0,1,.86-1.65,0,0,0,0,1,0,0Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M110,135.47c-.63-.37-5.32-3.08-5.55-3.2l-.17-.14a1.7,1.7,0,0,1-.42-1.28v-8.43a11.37,11.37,0,0,1,.22-2.22l5.62,3.25a11.3,11.3,0,0,0-.21,2.22v8.44a1.73,1.73,0,0,0,.41,1.27Z"
-          style="opacity: 0.3"></path>
-        <polygon points="127.47 98.5 127.47 113.15 122.73 110.42 127.47 98.5" style="opacity: 0.3"></polygon>
-        <polygon points="127.47 113.15 119.92 117.51 122.73 110.42 127.47 113.15" style="opacity: 0.4"></polygon>
-        <path
-          d="M127.62,135.44l.1.08-5.55-3.2a.43.43,0,0,1-.17-.13,1.67,1.67,0,0,1-.42-1.27v-1.63l5.63-3.25v8.12A1.74,1.74,0,0,0,127.62,135.44Z"
-          style="opacity: 0.3"></path>
-        <path d="M142,105.11a.78.78,0,0,0-.74.09l-4.45,2.57v-5.66Z" style="opacity: 0.15"></path>
-        <path
-          d="M136.16,75.77a.79.79,0,0,0-.78.07l-7.81,4.51a3.76,3.76,0,0,0-1,.89L120.89,78a3.72,3.72,0,0,1,1-.88l7.82-4.51a.75.75,0,0,1,.82,0Z"
-          style=" opacity: 0.4;fill: #fff"></path>
-        <path
-          d="M128.61,135.51a.77.77,0,0,1-1-.07,1.74,1.74,0,0,1-.41-1.28V126l-16.3,9.41a.74.74,0,0,1-1-.07,1.74,1.74,0,0,1-.41-1.28v-8.44a10.45,10.45,0,0,1,.67-3.81l15.47-39a7.24,7.24,0,0,1,.85-1.64,3.51,3.51,0,0,1,1.06-.89l7.81-4.51a.75.75,0,0,1,1,.07,1.71,1.71,0,0,1,.41,1.27v30.58l4.45-2.57a.76.76,0,0,1,1,.07,1.7,1.7,0,0,1,.41,1.28V115a4,4,0,0,1-.41,1.75,2.63,2.63,0,0,1-1,1.21l-4.45,2.57v8.12a4.14,4.14,0,0,1-.41,1.75,2.64,2.64,0,0,1-1,1.21Zm-1.14-22.36V98.5l-7.55,19Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M181.49,70a34.85,34.85,0,0,0-1.06-7.63,11.8,11.8,0,0,0-2.74-5.31A6.76,6.76,0,0,0,176.28,56l-5.64-3.25a6.94,6.94,0,0,0-3.21-.91,12.68,12.68,0,0,0-6.67,2.1,24.42,24.42,0,0,0-6.67,5.6,32.84,32.84,0,0,0-4.63,7.38,38.69,38.69,0,0,0-2.75,8.47,55.19,55.19,0,0,0-1.06,8.85q-.1,3.5-.1,7.23c0,2.5,0,4.81.1,7a35.47,35.47,0,0,0,1.06,7.63,11.81,11.81,0,0,0,2.75,5.31,6.12,6.12,0,0,0,1.4,1.1c.94.56,5.18,3,5.72,3.31a7.11,7.11,0,0,0,3.13.86,12.68,12.68,0,0,0,6.67-2.1,24.46,24.46,0,0,0,6.68-5.6,33.57,33.57,0,0,0,4.63-7.38,38.67,38.67,0,0,0,2.74-8.47,54.08,54.08,0,0,0,1.06-8.85q.1-3.33.1-7.07T181.49,70Zm-20.44,28.3a22.2,22.2,0,0,1-.2-2.6q-.25-6.63,0-13.38a26.75,26.75,0,0,1,.36-3.88,17.86,17.86,0,0,1,.93-3.44,11.62,11.62,0,0,1,1.66-2.91,8.47,8.47,0,0,1,2.25-2q.16,1.17.24,2.58.21,6.48,0,13.38a29.35,29.35,0,0,1-.33,3.85,15.61,15.61,0,0,1-.93,3.45,11.91,11.91,0,0,1-1.69,2.92A8.75,8.75,0,0,1,161.05,98.32Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M156.43,115.65c-.93-.53-4.7-2.7-5.57-3.22a6.65,6.65,0,0,1-1.4-1.1,11.81,11.81,0,0,1-2.75-5.31,35.47,35.47,0,0,1-1.06-7.63c-.06-2.14-.1-4.45-.1-7s0-4.91.1-7.23a55.06,55.06,0,0,1,1.06-8.85,38.81,38.81,0,0,1,1.75-6.06l5.62,3.25a39,39,0,0,0-1.74,6,53.12,53.12,0,0,0-1.06,8.86q-.1,3.48-.11,7.23c0,2.5,0,4.81.11,7a34.34,34.34,0,0,0,1.06,7.63,11.71,11.71,0,0,0,2.74,5.3A6.54,6.54,0,0,0,156.43,115.65Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M176.06,55.85a7.13,7.13,0,0,0-3-.79q-2.79-.14-6.68,2.1a24.57,24.57,0,0,0-6.67,5.61,33.21,33.21,0,0,0-4.63,7.36c-.19.41-.36.81-.53,1.23l-.47,1.19h0l-5.62-3.25c.13-.36.27-.71.41-1.06s.38-.9.59-1.35a33.3,33.3,0,0,1,4.62-7.38,24.76,24.76,0,0,1,6.68-5.6,12.59,12.59,0,0,1,6.67-2.1,6.9,6.9,0,0,1,3.21.91Z"
-          style=" opacity: 0.4;fill: #fff"></path>
-        <path
-          d="M171.92,89.32a29.32,29.32,0,0,1-.34,3.86,15.52,15.52,0,0,1-.92,3.44A12,12,0,0,1,170,98l-5.62-3.25a12.61,12.61,0,0,0,.63-1.34,15.77,15.77,0,0,0,.94-3.45,29.35,29.35,0,0,0,.33-3.85q.21-6.89,0-13.38c0-.94-.13-1.8-.24-2.59l.33-.21a4.35,4.35,0,0,1,2.59-.78,2.34,2.34,0,0,1,1.66,1,6.11,6.11,0,0,1,.9,2.38,26.61,26.61,0,0,1,.39,3.45Q172.12,82.43,171.92,89.32Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M170,98a10.51,10.51,0,0,1-1,1.58,8.86,8.86,0,0,1-2.59,2.21,4.38,4.38,0,0,1-2.58.77,2.33,2.33,0,0,1-1.68-1,5.76,5.76,0,0,1-.93-2.37c-.06-.28-.1-.57-.14-.87a8.6,8.6,0,0,0,2.29-2,11.4,11.4,0,0,0,1-1.58Z"
-          style="opacity: 0.4"></path>
-        <path
-          d="M166.38,57.16q3.88-2.25,6.68-2.1a6.71,6.71,0,0,1,4.63,2,11.8,11.8,0,0,1,2.74,5.31A34.85,34.85,0,0,1,181.49,70q.1,3.36.1,7.11t-.1,7.07a54.08,54.08,0,0,1-1.06,8.85,38.67,38.67,0,0,1-2.74,8.47,33.57,33.57,0,0,1-4.63,7.38,24.46,24.46,0,0,1-6.68,5.6,12.68,12.68,0,0,1-6.67,2.1,6.68,6.68,0,0,1-4.63-2,11.71,11.71,0,0,1-2.74-5.3,34.94,34.94,0,0,1-1.06-7.63c-.07-2.14-.1-4.45-.1-7s0-4.9.1-7.23a54,54,0,0,1,1.06-8.85,38.93,38.93,0,0,1,2.74-8.48,33.5,33.5,0,0,1,4.63-7.37A24.57,24.57,0,0,1,166.38,57.16Zm5.54,32.16q.21-6.88,0-13.38a26.64,26.64,0,0,0-.39-3.44,6.17,6.17,0,0,0-.9-2.38,2.31,2.31,0,0,0-1.66-1,4.44,4.44,0,0,0-2.59.78,9,9,0,0,0-2.58,2.21A11.62,11.62,0,0,0,162.14,75a17.86,17.86,0,0,0-.93,3.44,26.75,26.75,0,0,0-.36,3.88q-.25,6.75,0,13.38a21.32,21.32,0,0,0,.34,3.46,5.52,5.52,0,0,0,.93,2.37,2.31,2.31,0,0,0,1.68,1,4.38,4.38,0,0,0,2.58-.77A9,9,0,0,0,169,99.55a11.88,11.88,0,0,0,1.68-2.92,15.76,15.76,0,0,0,.93-3.45A31.14,31.14,0,0,0,171.92,89.32Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M219.68,56a6.27,6.27,0,0,0-1.16-.85,6.56,6.56,0,0,0-.76-.35,6,6,0,0,1,.58.25l-4.27-2.48h0l5.3-11.28c.21-.44.43-1,.66-1.57a4.82,4.82,0,0,0,.36-1.77V29.59a1.68,1.68,0,0,0-.41-1.26.91.91,0,0,0-.24-.16h0L214.25,25a.81.81,0,0,0-.79.07L189,39.14a2.31,2.31,0,0,0-.83,1,1.49,1.49,0,0,0-.14.24,4.17,4.17,0,0,0-.41,1.74V50.4a1.66,1.66,0,0,0,.41,1.25,1.46,1.46,0,0,0,.21.16c.19.09,4.54,2.62,5.41,3.12,0,0-.05,0-.06-.06h0a.75.75,0,0,0,1,.07l3.61-2.09L197,55.57a17.85,17.85,0,0,0-.71,1.67,3.17,3.17,0,0,0-.14.4c0,.13-.08.26-.11.4a.11.11,0,0,1,0,.05,1.9,1.9,0,0,0,0,.25s0,0,0,.08a3.1,3.1,0,0,0-.05.6v6.76a1.73,1.73,0,0,0,.4,1.26,1.43,1.43,0,0,0,.22.15L202,70.34l-.08-.06a.75.75,0,0,0,.94,0l4.23-2.45h0a7.94,7.94,0,0,1-1.52,3.72,12.92,12.92,0,0,1-4.06,3.6,5.83,5.83,0,0,1-3.13,1.07,5.76,5.76,0,0,1-.66-.1h0l-2.44-1.41a1,1,0,0,0-.34-.11,2,2,0,0,0-1.23.36l-6.44,3.72a2.18,2.18,0,0,0-.79,1,.49.49,0,0,0,0,.11h0a4.15,4.15,0,0,0-.22.65,2.88,2.88,0,0,0-.07.65,12.08,12.08,0,0,0,1.09,5.06,7.11,7.11,0,0,0,3,3.28c.82.46,4.08,2.38,5.34,3.09-.18-.11-.34-.24-.5-.36a6,6,0,0,0,.72.48,7.9,7.9,0,0,0,4.77.78A17.12,17.12,0,0,0,207.06,91a29.39,29.39,0,0,0,15.12-26.58C222.18,60.32,221.35,57.52,219.68,56Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M188.18,40.22a.64.64,0,0,0,0-.07l-.13.25a4,4,0,0,0-.41,1.74v8.32a1.63,1.63,0,0,0,.41,1.26.7.7,0,0,0,.2.15L193.68,55a.12.12,0,0,0-.06-.06h0a1.65,1.65,0,0,1-.41-1.26V45.34a3.87,3.87,0,0,1,.41-1.72,3,3,0,0,1,.28-.46c-.06.09-.13.17-.19.28Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M201.46,62.06l-5.56-3.21c0,.06,0,.11,0,.17v6.76a1.73,1.73,0,0,0,.4,1.26,1.43,1.43,0,0,0,.22.15c.21.11,4.83,2.78,5.46,3.15l-.07-.07,0,0a1.65,1.65,0,0,1-.41-1.24V62.23S201.46,62.12,201.46,62.06Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M201.8,60.45c.24-.61.48-1.16.72-1.67l5.41-11.54-9.72,5.62L197,55.57c-.24.5-.48,1-.71,1.67a3,3,0,0,0-.14.39c0,.14-.08.26-.11.4v.06a2,2,0,0,1,0,.24.19.19,0,0,1,0,.08,2.25,2.25,0,0,0,0,.44l5.56,3.21A5.05,5.05,0,0,1,201.8,60.45Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M186.45,79.66s0,.07,0,.11h0a3.41,3.41,0,0,0-.22.66,3,3,0,0,0-.08.64,12.13,12.13,0,0,0,1.1,5.07,7,7,0,0,0,3,3.27l5.33,3.1a.45.45,0,0,1-.1-.09,7.07,7.07,0,0,1-2.66-3.06,12,12,0,0,1-1.1-5.07,3.33,3.33,0,0,1,.33-1.41,3,3,0,0,1,.27-.44l-5.57-3.2A2.77,2.77,0,0,0,186.45,79.66Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M197.71,76.16h0l-2.44-1.42a1.13,1.13,0,0,0-.34-.1,2.08,2.08,0,0,0-1.23.35l-6.44,3.73a1.76,1.76,0,0,0-.52.53l5.57,3.2a1.9,1.9,0,0,1,.53-.53l6.43-3.71c.71-.41,1.26-.48,1.63-.19l-3.17-1.85Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M203.92,79.47a5.75,5.75,0,0,0,3.15-1.07,12.88,12.88,0,0,0,4.05-3.6,8.13,8.13,0,0,0,1.62-4.94c0-1.82-.55-2.86-1.62-3.08a6,6,0,0,0-4.05,1.1,7.85,7.85,0,0,1-1.52,3.71,12.88,12.88,0,0,1-4.05,3.6,5.71,5.71,0,0,1-3.14,1.06,4.25,4.25,0,0,1-.65-.09L200.88,78l1.26.89A3.75,3.75,0,0,0,203.92,79.47Z"
-          style="opacity: 0.4"></path>
-        <path d="M214.07,52.55s3.08,1.8,4.27,2.48a.46.46,0,0,0-.14-.05.34.34,0,0,0-.15-.07,7.72,7.72,0,0,0-4.86-.48Z"
-          style=" opacity: 0.4;fill: #fff"></path>
-        <path
-          d="M216.76,26.52l-2.52-1.47a.81.81,0,0,0-.79.07L189,39.21a2.36,2.36,0,0,0-.84.94.64.64,0,0,1,0,.07l5.55,3.22c.06-.11.13-.19.19-.28a3,3,0,0,1,.19-.3,1.79,1.79,0,0,1,.49-.43L219,28.34a.82.82,0,0,1,.71-.11Z"
-          style=" opacity: 0.4;fill: #fff"></path>
-        <path
-          d="M219,28.26a.75.75,0,0,1,1,.07,1.68,1.68,0,0,1,.41,1.26v8.34A4.82,4.82,0,0,1,220,39.7c-.23.61-.45,1.13-.66,1.57l-5.3,11.28-.88,1.88a7.58,7.58,0,0,1,5.33.71,6.63,6.63,0,0,1,1.16.85c1.67,1.53,2.5,4.33,2.5,8.42A29.39,29.39,0,0,1,207.06,91a17.12,17.12,0,0,1-6.51,2.42,7.9,7.9,0,0,1-4.77-.78,7.12,7.12,0,0,1-3-3.27,12.2,12.2,0,0,1-1.1-5.07,3.3,3.3,0,0,1,.33-1.41,2.07,2.07,0,0,1,.8-1l6.43-3.72c.72-.41,1.26-.48,1.64-.2s.79.58,1.25.89a3.68,3.68,0,0,0,1.78.58,5.86,5.86,0,0,0,3.14-1.06,13.09,13.09,0,0,0,4.06-3.61,8,8,0,0,0,1.61-4.93c0-1.84-.53-2.86-1.61-3.08a6.09,6.09,0,0,0-4.06,1.08l-4.23,2.45a.75.75,0,0,1-1-.07,1.69,1.69,0,0,1-.4-1.26V62.23a5,5,0,0,1,.35-1.78c.24-.61.48-1.16.72-1.67l5.41-11.54-13.33,7.7a.75.75,0,0,1-1-.07,1.69,1.69,0,0,1-.41-1.26V45.28a4.06,4.06,0,0,1,.41-1.73,2.61,2.61,0,0,1,1-1.19Z"
-          style="fill: currentcolor"></path>
-      </g>
-    </g>
-    <g id="freepik--Character--inject-70">
-      <g id="freepik--character--inject-70">
-        <path d="M414.41,218.19l7.08-.31,4.58,8.68s-2.85,1.48-13.05,1.6Z" style="fill: #f28f8f"></path>
-        <path
-          d="M369.6,197.3c2.7,1.27,4.17,2.74,7.07,5.1,3.58,2.92,15.93,11.31,18.58,12a170.44,170.44,0,0,0,21.36,3.44s-1.15,7,.34,10.45c-6.34.28-22.5.82-28.14-.51-6-1.42-12.66-4.8-17.78-7.77S367.05,199.82,369.6,197.3Z"
-          style="fill: currentcolor"></path>
-        <g style="opacity: 0.7">
-          <path
-            d="M369.6,197.3c2.7,1.27,4.17,2.74,7.07,5.1,3.58,2.92,15.93,11.31,18.58,12a170.44,170.44,0,0,0,21.36,3.44s-1.15,7,.34,10.45c-6.34.28-22.5.82-28.14-.51-6-1.42-12.66-4.8-17.78-7.77S367.05,199.82,369.6,197.3Z"
-            style="fill: #fff"></path>
-        </g>
-        <path
-          d="M371,220.06c5.12,3,11.74,6.35,17.78,7.77,4.08,1,13.68.95,21.08.76a118.81,118.81,0,0,1-19-3.06,73.51,73.51,0,0,1-11.77-6.2c-3.33-2.37-3.53-6.62-5.23-12.77-2.26-8.16-4.25-9.26-4.25-9.26C367.05,199.82,365.92,217.09,371,220.06Z"
-          style="opacity: 0.1"></path>
-        <path d="M409.89,228.59a14.48,14.48,0,0,1,.31-8.69s-2.06,2-1.62,8.72Z" style="fill: currentcolor"></path>
-        <path d="M409.89,228.59a14.48,14.48,0,0,1,.31-8.69s-2.06,2-1.62,8.72Z" style="opacity: 0.1"></path>
-        <path
-          d="M424.39,226.71c6-.21,8.23-3.25,9.07-8.52s.69-12.16.76-14-.47-2.46-1.2-2.56c-.27,0-1.43.25-1.56,2.2-.24,3.56-.33,5.75-1,5.72s-.57-2.66-.51-6.25c0-2.42,0-4.46-1.4-4.46s-1.79,1.44-1.86,4.71,0,5.7-.86,5.77c-.7,0-.56-3.43-.72-5.67s-.15-3.58-1.55-3.55-1.61,1.83-1.56,4a86.09,86.09,0,0,1-.23,9c-.39,1.29-1.73-1.89-2.71-3.2-1.61-2.15-3.58-1.17-2.78.79a38.83,38.83,0,0,1,2.18,7.4C418.88,220.58,419.89,226.73,424.39,226.71Z"
-          style="fill: #ffa8a7"></path>
-        <path d="M424.36,215.82s3.62,3.77,2.32,7.8a5.35,5.35,0,0,0,.65-5.4A4.09,4.09,0,0,0,424.36,215.82Z"
-          style="fill: #f28f8f"></path>
-        <path
-          d="M345.39,404.83c-.13,1.14-.28,4.34-6.07,5.13s-9.44-1.12-11-3.9-1.19-5.06-1.44-7.64-2.37-3.95-3-5.28c-.9-1.95.42-5,.42-5Z"
-          style="fill: #263238"></path>
-        <path
-          d="M387.63,395.77a3.49,3.49,0,0,1-.38,2.8,12.16,12.16,0,0,1-9.28,2.48,22.39,22.39,0,0,1-9.81-3.85,12.92,12.92,0,0,0-7.58-2.18c-2.79-.1-4.82-.72-5-1.45-.37-1.28-.37-2.1.23-2.06Z"
-          style="fill: #263238"></path>
-        <path
-          d="M345,402.2a31.89,31.89,0,0,0-2.66-3.17,28.64,28.64,0,0,1-6-15.36c0-.31-.06-.91-.37-1.1s-.63.08-1,.22h0v0a6,6,0,0,1-1.79.47,33.38,33.38,0,0,1-4.83-.19c-.4.05-.52,1.29-.49,2.62-.73-.46-1-1.38-1.62-1.91-.36-.29-.51-.3-.51-.77,0-.31,0-.59,0-.9-.52-.15-1,1.87-1.4,3.41-.5,1.78-1.12,3.79-.42,5.6a15.72,15.72,0,0,0,1.63,2.8,11.62,11.62,0,0,1,2.1,5.12c.08.81,0,1.64.13,2.45a7.16,7.16,0,0,0,5.06,5.87c3.52,1.11,8.82.93,11.93-1.53C345.85,405,345.48,403.15,345,402.2Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M385.29,392c-.77-.24-1.53-.52-2.28-.82a41.85,41.85,0,0,1-6.07-3c-.85-.52-1.69-1.06-2.51-1.63s-1.65-1.27-2.47-1.93a8.81,8.81,0,0,1-1.18-1.26,13,13,0,0,1-1.74-2.82,1,1,0,0,0-.43-.57.84.84,0,0,0-.82.17,4,4,0,0,1-.64.43l-.68.28a7.85,7.85,0,0,1-2.28.56c-2.94.26-3-.33-3.16.62a7.93,7.93,0,0,0,0,1.06c-1.55-.25-2.77-.76-2.84-1.34l-.18-1.88c-2.31-.32-2.08,2.38-2.36,5.34-.23,2.54-.82,4.73-.12,6.58,2.33,2,6.46,1.54,8.81,1.93,3.32.55,4.88,3,9.5,4.61,7.44,2.58,12.15-.4,13.54-1.69C388.28,395,388.46,393.05,385.29,392Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M329.2,250.14c-.93,9-1.91,22.55-2.29,33.12-.7,19.86-.43,44.69-.43,44.69a68.59,68.59,0,0,0-2.14,12.73c-.47,12.69-.38,44.1-.38,44.1s5.26,5.3,13.13,1.14c0,0,7-42.87,8.92-55.38,1.87-11.93,5.5-38,5.5-38l1.64,36.05a52.37,52.37,0,0,0-1.23,16.26c.42,5.81,3.74,37.44,3.74,37.44,3,2.84,11.84,1.3,13.77-1,0,0,3.09-45.34,3.43-51.47.74-13.26,1-63.83,0-71.5S329.2,250.14,329.2,250.14Z"
-          style="fill: #263238"></path>
-        <path d="M351.51,292.56l2.31-15.29a30.68,30.68,0,0,0,11-4.64s-1.8,4.08-8.82,7l-2.28,14.23-.55,34.75Z"></path>
-        <path
-          d="M340,155.33s-.21,0-.54.11a2.48,2.48,0,0,0-1.33-2.8,2.67,2.67,0,0,0-3.45,1.41l3.76,1.73a5.24,5.24,0,0,0-2.86,2.44c-1,2.12.33,6.64,1.7,12.22a79,79,0,0,0,3,10.34c.63,1.63,1.77,1.68,1.77,1.68v-5.57l-.24-4.61s3-4.05,3.29-7.37c.41-4.26-.48-6-.48-6Z"
-          style="fill: #263238"></path>
-        <path
-          d="M342,171.54c-1.11,1-2-1.53-2.95-2.51s-4-2.3-5.5.91,1.39,7.71,3.68,8.77c3.34,1.55,4.84-1.82,4.84-1.82v13.93c3.52,6.35,11.29,6.14,14.89,7a12.33,12.33,0,0,0-.14-6.25l0-4.54a16.7,16.7,0,0,0,4.6.25c3-.48,4.67-3,5.58-6.28,1.47-5.29,1.77-14.18-.27-24.45-3.4-2.63-14.92-2.21-22.06,2.32C345.19,168,343.14,170.57,342,171.54Z"
-          style="fill: #ffa8a7"></path>
-        <path
-          d="M356.82,187.06s-6.79-1.34-9.17-2.6a7.88,7.88,0,0,1-3.29-3.23,10.64,10.64,0,0,0,1.88,3.82c1.74,2.21,10.59,3.82,10.59,3.82Z"
-          style="fill: #f28f8f"></path>
-        <path d="M353.73,169.64a1.45,1.45,0,1,1-1.45-1.45A1.45,1.45,0,0,1,353.73,169.64Z" style="fill: #263238"></path>
-        <path d="M365.24,168.58a1.45,1.45,0,1,1-1.45-1.45A1.45,1.45,0,0,1,365.24,168.58Z" style="fill: #263238"></path>
-        <path d="M351.77,165.78l-3,1.59a1.79,1.79,0,0,1,.75-2.37A1.67,1.67,0,0,1,351.77,165.78Z" style="fill: #263238">
-        </path>
-        <path d="M354.48,178.6l5.09,1.32a2.57,2.57,0,0,1-3.15,2A2.75,2.75,0,0,1,354.48,178.6Z" style="fill: #b16668">
-        </path>
-        <path
-          d="M355,179.67a3.05,3.05,0,0,0-.52.05,2.73,2.73,0,0,0,2,2.17,2.41,2.41,0,0,0,1.28,0A2.77,2.77,0,0,0,355,179.67Z"
-          style="fill: #f28f8f"></path>
-        <path d="M366.44,166.06l-3.12-1.48a1.66,1.66,0,0,1,2.25-.86A1.82,1.82,0,0,1,366.44,166.06Z"
-          style="fill: #263238"></path>
-        <polygon points="358.23 167.93 359.14 177.24 363.79 175.15 358.23 167.93" style="fill: #f28f8f"></polygon>
-        <path
-          d="M336.08,190.82c-6.18,2.21-10.77,4.37-15.06,8.05,0,0,4.44,19.27,7.22,29.88,2.52,9.67.16,29.37.16,29.37s3.89,5.88,26,5.24C366.9,263,373,259,373,259s1.06-21.73.58-39.9c-.38-14.62-1.44-18.15-3.93-21.81-1.8-1.22-11.75-4.9-11.75-4.9a26.09,26.09,0,0,0-.86,5.45C353.36,192.18,336.08,190.82,336.08,190.82Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M336.08,190.82c-6.18,2.21-10.77,4.37-15.06,8.05,0,0,4.44,19.27,7.22,29.88,2.52,9.67.16,29.37.16,29.37s3.89,5.88,26,5.24C366.9,263,373,259,373,259s1.06-21.73.58-39.9c-.38-14.62-1.44-18.15-3.93-21.81-1.8-1.22-11.75-4.9-11.75-4.9a26.09,26.09,0,0,0-.86,5.45C353.36,192.18,336.08,190.82,336.08,190.82Z"
-          style=" opacity: 0.3;fill: #fff"></path>
-        <path
-          d="M333.15,240.67c-.26-6.51-1.67-18.85-1.57-28.2l-4.41-6.69-2.57,8.31c1.23,5.1,2.56,10.54,3.64,14.66,2.52,9.67.16,29.37.16,29.37s3.89,5.88,26,5.24l.4,0A37.07,37.07,0,0,1,342.93,260C336.06,256.6,333.41,247.19,333.15,240.67Z"
-          style="opacity: 0.1"></path>
-        <path
-          d="M342.1,184.93V186c.2,1,2.25,3.45,7.41,5.77a17.37,17.37,0,0,1,7.48,6.06s-1.76-2.71-3.93-1.28-4.37,5-5.49,5-4.86-3.57-7.79-6.63c-2.45-2.58-3.7-4.13-3.7-4.13S340.09,185,342.1,184.93Z"
-          style="fill: currentcolor"></path>
-        <path d="M357,197.85c1.57-3.76,4.4-.55,4.58-.53.82.05-1.79-6.86-4.73-8.76v3Z" style="fill: currentcolor"></path>
-        <path
-          d="M342.1,184.93V186c.2,1,2.25,3.45,7.41,5.77a17.37,17.37,0,0,1,7.48,6.06s-1.76-2.71-3.93-1.28-4.37,5-5.49,5-4.86-3.57-7.79-6.63c-2.45-2.58-3.7-4.13-3.7-4.13S340.09,185,342.1,184.93Z"
-          style=" opacity: 0.65;fill: #fff"></path>
-        <path d="M357,197.85c1.57-3.76,4.4-.55,4.58-.53.82.05-1.79-6.86-4.73-8.76v3Z" style=" opacity: 0.65;fill: #fff">
-        </path>
-        <path d="M361.11,262.77c.26-13.86.62-49.46-4.12-64.92,0,0,4.47,32.91,2.05,65.19Q360.12,262.92,361.11,262.77Z"
-          style="fill: currentcolor"></path>
-        <path d="M361.11,262.77c.26-13.86.62-49.46-4.12-64.92,0,0,4.47,32.91,2.05,65.19Q360.12,262.92,361.11,262.77Z"
-          style="opacity: 0.1"></path>
-        <path d="M338.56,214.48a38.54,38.54,0,0,0,14.09-1.7l.22,2.72a35,35,0,0,1-14,1.46Z" style="fill: currentcolor">
-        </path>
-        <path d="M338.56,214.48a38.54,38.54,0,0,0,14.09-1.7l.22,2.72a35,35,0,0,1-14,1.46Z" style="opacity: 0.1"></path>
-        <g id="freepik--Shield--inject-70">
-          <path
-            d="M373.17,208.11a.2.2,0,0,0-.07-.2h0c-.05,0-.38-.23-.43-.26h0c-.05,0-.12,0-.22.06a3.15,3.15,0,0,1-3.12.34,2.24,2.24,0,0,1-.35-.34v0h0a.32.32,0,0,0-.09-.08l-.44-.27h0c-.1-.05-.2,0-.27.14-.93,2.11-2.84,4.22-4.08,4.72a.7.7,0,0,0-.25.17.53.53,0,0,0-.15.35c-.09,2.75,1.27,7.19,4.07,8.76a5.58,5.58,0,0,0,.52.32C372.32,217.85,373.06,211.37,373.17,208.11Z"
-            style="fill: #ebebeb"></path>
-          <path
-            d="M367.74,221.45c-2.8-1.57-4.16-6-4.07-8.76a.55.55,0,0,1,.06-.22l.43.28a.46.46,0,0,0-.05.21C364,215.56,365.23,219.68,367.74,221.45Z"
-            style="fill: #e0e0e0"></path>
-          <path
-            d="M373.17,208.11c-.11,3.26-.85,9.74-4.91,13.66-2.86-1.53-4.24-6-4.15-8.81a.53.53,0,0,1,.15-.35.74.74,0,0,1,.25-.17c1.24-.5,3.15-2.61,4.08-4.72.07-.15.16-.19.26-.14h0a.32.32,0,0,1,.09.08h0v0a3,3,0,0,0,3.91.28.25.25,0,0,1,.22-.07h0A.2.2,0,0,1,373.17,208.11Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M368.85,207.58c-.1-.05-.19,0-.26.14-.93,2.11-2.84,4.22-4.08,4.72a.74.74,0,0,0-.25.17.53.53,0,0,0-.15.35c-.09,2.77,1.29,7.28,4.15,8.81A30.26,30.26,0,0,0,368.85,207.58Z"
-            style="fill: #f0f0f0"></path>
-        </g>
-        <path d="M346.57,160.89s9.32,4.54,19.32.61c10.27-4.05,1.27-6.92,1.27-6.92Z" style="fill: #263238"></path>
-        <path
-          d="M367.42,141c-7.75-1.72-16.22-2.63-26.39,1.54s-12.73,10.4-12.73,10.4,9.86,3.38,18.19,1.55S367.42,141,367.42,141Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M334.13,158.62s-5.45-4.43-5.83-5.73a34.25,34.25,0,0,0,11.82-1.45c6.68-2,13.93-8.7,21.41-10.25s10.4,2,10.4,2a35.42,35.42,0,0,1-4.74,8.65s-2.61,5.09-11.41,6.75S334.13,158.62,334.13,158.62Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M334.13,158.62a14.94,14.94,0,0,0,.42,1.74,8.37,8.37,0,0,0,.81,1.47c3.12.61,10.62,1.1,20.51-1.26,6.2-1.49,9.06-3.21,10.24-4.45a3.36,3.36,0,0,0,1.2-2.9l-.12-1.37s-2.06,2.73-12.2,5.26A70.36,70.36,0,0,1,334.13,158.62Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M334.13,158.62a14.94,14.94,0,0,0,.42,1.74,8.37,8.37,0,0,0,.81,1.47c3.12.61,10.62,1.1,20.51-1.26,6.2-1.49,9.06-3.21,10.24-4.45a3.36,3.36,0,0,0,1.2-2.9l-.12-1.37s-2.06,2.73-12.2,5.26A70.36,70.36,0,0,1,334.13,158.62Z"
-          style="opacity: 0.05"></path>
-        <path
-          d="M339.53,295.16c-1-1.46-3.31-2.78-4.17-3.64-1.52-1.54-3.74-4.79-3.41-5.39s1.26.18,3.2.17c3,0,3.82-1.18,3.79-2.28,0-.86-1.83-.7-4-1.18-1.91-.61-4.2-2.76-5.45-4.45s-2.26-6.1-2.26-6.1-6.49.09-11,3.16c0,0,1.29,6.7,2.77,11.45,1.65,5.33,5.39,11.21,11.08,12.53a13.83,13.83,0,0,0,7.16-.36,5.29,5.29,0,0,0,1.9-.94A2,2,0,0,0,339.53,295.16Z"
-          style="fill: #ffa8a7"></path>
-        <path
-          d="M321,198.87s-1-.2-2.68,3.66a61.94,61.94,0,0,0-3.27,11.53c-.67,3.22-3.87,20.13-3.87,27.4s2.17,21.88,5,34.33c3.48.35,9.46-.55,11.46-2.83-1.31-12.42-2.41-18.81-2.11-28.58,2-14.5,7.87-29.69,8.12-31.38C334.18,209.29,328.32,197.63,321,198.87Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M321,198.87s-1-.2-2.68,3.66a61.94,61.94,0,0,0-3.27,11.53c-.67,3.22-3.87,20.13-3.87,27.4s2.17,21.88,5,34.33c3.48.35,9.46-.55,11.46-2.83-1.31-12.42-2.41-18.81-2.11-28.58,2-14.5,7.87-29.69,8.12-31.38C334.18,209.29,328.32,197.63,321,198.87Z"
-          style=" opacity: 0.65;fill: #fff"></path>
-        <path
-          d="M316.27,260c-1.74-8.5-4.59-25.14-2.64-38.23-1.12,6.43-2.43,15-2.43,19.69,0,7.27,2.17,21.88,5,34.33a20.33,20.33,0,0,0,4.16-.08C319.11,271.6,317.34,265.24,316.27,260Z"
-          style="opacity: 0.1"></path>
-        <path d="M314.94,269.69c2.84.18,7.89-.62,10-2,0,0-3.68,1.63-10.19.7Z" style="fill: currentcolor"></path>
-        <path d="M314.94,269.69c2.84.18,7.89-.62,10-2,0,0-3.68,1.63-10.19.7Z" style="opacity: 0.1"></path>
-        <g id="freepik--shield--inject-70">
-          <path
-            d="M364.79,145.63c0-.08,0-.13,0-.15h0l-.32-.2h0s-.1,0-.17,0a2.37,2.37,0,0,1-2.33.25,1.6,1.6,0,0,1-.26-.26h0a.19.19,0,0,0-.07-.06l-.32-.2h0c-.07,0-.14,0-.19.11a7.61,7.61,0,0,1-3.05,3.52.5.5,0,0,0-.19.13.41.41,0,0,0-.11.26c-.07,2,.95,5.37,3,6.54a3,3,0,0,0,.38.24C364.16,152.9,364.71,148.07,364.79,145.63Z"
-            style="fill: #ebebeb"></path>
-          <path
-            d="M360.74,155.59c-2.1-1.17-3.11-4.49-3-6.54a.42.42,0,0,1,0-.16l.33.2a.29.29,0,0,0,0,.16C358,151.19,358.86,154.27,360.74,155.59Z"
-            style="fill: #e0e0e0"></path>
-          <path
-            d="M364.79,145.63c-.08,2.44-.63,7.27-3.67,10.2-2.13-1.14-3.16-4.51-3.09-6.58a.36.36,0,0,1,.11-.26.59.59,0,0,1,.18-.13,7.5,7.5,0,0,0,3.05-3.52c.05-.11.13-.15.2-.11h0a.19.19,0,0,1,.07.06h0a2.19,2.19,0,0,0,2.92.21c.07-.05.12-.06.16,0h0S364.8,145.55,364.79,145.63Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M361.57,145.23c-.07,0-.15,0-.2.11a7.5,7.5,0,0,1-3.05,3.52.59.59,0,0,0-.18.13.36.36,0,0,0-.11.26c-.07,2.07,1,5.44,3.09,6.58A22.54,22.54,0,0,0,361.57,145.23Z"
-            style="fill: #f0f0f0"></path>
-        </g>
-      </g>
-    </g>
-    <g id="freepik--speech-bubble--inject-70">
-      <g id="freepik--speech-bubble--inject-70">
-        <g id="freepik--speech-bubble--inject-70">
-          <path d="M349.86,130l-5.46-12.44,4.39-12.67V97.08l-13.44,7.76v7.76l5.78,12.18a.87.87,0,0,0,.39.35h0Z"
-            style="fill: currentcolor"></path>
-          <path d="M349.86,130l-5.46-12.44,4.39-12.67V97.08l-13.44,7.76v7.76l5.78,12.18a.87.87,0,0,0,.39.35h0Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M390.07,55.14a8.93,8.93,0,0,0-4-7l-3.28-1.89a8.88,8.88,0,0,0-8.06,0L297.61,90.86a8.9,8.9,0,0,0-4,7V128.6a8.93,8.93,0,0,0,4,7l3.28,1.89a8.88,8.88,0,0,0,8.06,0l34.84-20,5.77,12.17a.86.86,0,0,0,1.55-.15l6.1-19.77L386,92.88a8.91,8.91,0,0,0,4-7Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M293.58,128.6a8.93,8.93,0,0,0,4,7l3.28,1.89a9,9,0,0,0,7.37.33c-1.89.71-3.34-.36-3.34-2.65V104.38a8.2,8.2,0,0,1,1.18-4l-11.34-6.55a8.26,8.26,0,0,0-1.18,4Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M389.94,54c-.47-1.71-2-2.25-3.89-1.18L309,97.41a7.84,7.84,0,0,0-2.84,3l-11.33-6.54a8,8,0,0,1,2.83-3l77.08-44.6a9,9,0,0,1,8.07,0l3.29,1.9A8.93,8.93,0,0,1,389.94,54Z"
-            style=" opacity: 0.5;fill: #fff"></path>
-        </g>
-        <path
-          d="M310.48,123.13V106.88a2.14,2.14,0,0,1,.15-.88,1.11,1.11,0,0,1,.47-.51l4.61-2.67c.17-.09.29-.06.37.1a2.33,2.33,0,0,1,.12.91v.8a3.6,3.6,0,0,1-.12,1.05.84.84,0,0,1-.37.52l-2.61,1.51v3.77l2.46-1.42c.17-.1.29-.07.37.09a2.44,2.44,0,0,1,.11.92v.8a3.74,3.74,0,0,1-.11,1,.87.87,0,0,1-.37.52l-2.46,1.42v6.76a1.64,1.64,0,0,1-1,1.39l-.67.38C310.81,123.77,310.48,123.68,310.48,123.13Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M317.25,111q0-9.22,4.39-11.77,2.14-1.23,3.26.37c.74,1.06,1.12,3.18,1.12,6.34a21.71,21.71,0,0,1-1.12,7.64,7.75,7.75,0,0,1-3.26,4.13Q317.26,120.21,317.25,111Zm5.38,2.24a6.69,6.69,0,0,0,.55-2.11,27.55,27.55,0,0,0,.19-3.66,22.45,22.45,0,0,0-.19-3.41,2.52,2.52,0,0,0-.55-1.48c-.25-.2-.57-.18-1,0a2.53,2.53,0,0,0-1,1.08,7,7,0,0,0-.57,2.12,27.42,27.42,0,0,0-.19,3.64,22.69,22.69,0,0,0,.19,3.42,2.51,2.51,0,0,0,.57,1.48.83.83,0,0,0,1,0A2.63,2.63,0,0,0,322.63,113.2Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M327.56,113.27V97a2,2,0,0,1,.16-.88,1.11,1.11,0,0,1,.51-.54L331,94a2.29,2.29,0,0,1,2.48-.26c.63.43.94,1.55.94,3.37a9,9,0,0,1-1.59,5.28v.11a1.13,1.13,0,0,1,.67.64,4.44,4.44,0,0,1,.45,1.29l1,4.38.05.28c0,.46-.34.89-1,1.29l-.58.34c-.59.34-.93.31-1-.11l-.89-4.39a1.08,1.08,0,0,0-.34-.6c-.13-.08-.33,0-.61.12l-.4.23v5.83a1.67,1.67,0,0,1-1,1.41l-.57.33C327.89,113.9,327.56,113.82,327.56,113.27Zm3.52-11.63a1.69,1.69,0,0,0,.62-.93,5.19,5.19,0,0,0,.26-1.8,2.64,2.64,0,0,0-.26-1.44.47.47,0,0,0-.68-.11l-.88.51v4.31Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M336.35,108.72a1.09,1.09,0,0,1-.15-.7V92a2.09,2.09,0,0,1,.15-.85,1.11,1.11,0,0,1,.47-.51l3-1.73c2.35-1.36,3.52-.58,3.52,2.32a8.92,8.92,0,0,1-1.51,5.13l0,.09a1.28,1.28,0,0,1,1.34.73,5,5,0,0,1,.49,2.48,9.46,9.46,0,0,1-1,4.24,7,7,0,0,1-2.84,3l-3.05,1.77C336.61,108.82,336.45,108.82,336.35,108.72Zm3.49-12.47a1.85,1.85,0,0,0,.79-1,5.05,5.05,0,0,0,.26-1.82,2.79,2.79,0,0,0-.24-1.44q-.24-.34-.78,0l-1.19.69v4.25Zm.12,7.51a2.12,2.12,0,0,0,.91-1.06,5.23,5.23,0,0,0,.29-2,2.65,2.65,0,0,0-.28-1.52c-.19-.23-.5-.22-.92,0l-1.28.73v4.52Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M345.15,103.11V86.6a1.62,1.62,0,0,1,1-1.41l.71-.41c.63-.37.95-.26.95.3v16.51a1.63,1.63,0,0,1-.95,1.41l-.71.4C345.47,103.78,345.15,103.68,345.15,103.11Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M349.78,101a1,1,0,0,1-.16-.7v-16a2,2,0,0,1,.16-.88,1,1,0,0,1,.46-.51l3.19-1.84q2.18-1.26,3.21.39c.68,1.1,1,3.17,1,6.19a22.19,22.19,0,0,1-1,7.38,7.47,7.47,0,0,1-3.21,4.1l-3.19,1.83C350,101.07,349.87,101.08,349.78,101Zm3.56-5.19a3.08,3.08,0,0,0,1.28-2,20.41,20.41,0,0,0,.38-4.59,14.66,14.66,0,0,0-.38-4.15c-.26-.7-.68-.89-1.28-.54l-1.07.61V96.4Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M359.44,95.39a1.11,1.11,0,0,1-.15-.7v-16a2.14,2.14,0,0,1,.15-.88,1.11,1.11,0,0,1,.47-.51l3.19-1.84q2.17-1.26,3.2.39t1,6.19a22,22,0,0,1-1,7.38,7.41,7.41,0,0,1-3.2,4.1l-3.19,1.83C359.7,95.48,359.54,95.49,359.44,95.39Zm3.57-5.2a3.07,3.07,0,0,0,1.28-2,20.48,20.48,0,0,0,.38-4.59,14.66,14.66,0,0,0-.38-4.15c-.26-.71-.69-.89-1.28-.55l-1.07.62v11.3Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M369.11,89.81a1.11,1.11,0,0,1-.15-.7v-16a2.12,2.12,0,0,1,.15-.87,1.18,1.18,0,0,1,.47-.52l4.94-2.85a.23.23,0,0,1,.37.09,2.39,2.39,0,0,1,.12.92v.8a3.64,3.64,0,0,1-.12,1,.87.87,0,0,1-.37.52L371.57,74v3.74l2.62-1.51c.17-.09.29-.06.37.1a2.3,2.3,0,0,1,.12.91V78a3.6,3.6,0,0,1-.12,1.05.84.84,0,0,1-.37.52l-2.62,1.51v4.18l3-1.71c.17-.1.29-.07.36.1a2.63,2.63,0,0,1,.11.92v.8a4,4,0,0,1-.11,1,.82.82,0,0,1-.36.52l-5,2.86C369.37,89.9,369.21,89.91,369.11,89.81Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M376.53,85V68.48a1.61,1.61,0,0,1,1-1.38l.43-.26a1,1,0,0,1,.54-.16c.13,0,.24.14.33.38l3,6.67a13.89,13.89,0,0,1,.57,1.69l.07-.1c-.09-.84-.14-1.49-.14-2V65.13a1.62,1.62,0,0,1,1-1.38l.41-.23c.64-.38,1-.29,1,.26V80.29a1.64,1.64,0,0,1-1,1.39l-.32.18a1.06,1.06,0,0,1-.56.18c-.14,0-.26-.14-.35-.38l-3.2-6.92a10.16,10.16,0,0,1-.45-1.39l-.08.12a14.88,14.88,0,0,1,.13,1.68v8.49a1.62,1.62,0,0,1-1,1.39l-.4.23C376.86,85.63,376.53,85.54,376.53,85Z"
-          style="fill: #455a64"></path>
-      </g>
-    </g>
-    <g id="freepik--Plant--inject-70">
-      <g id="freepik--Pot--inject-70">
-        <g id="freepik--pot--inject-70">
-          <path
-            d="M124.7,425.24c8.41-8.69,13.36-44,5.15-50.91H88.08c-8.2,6.88-3.27,42.21,5.15,50.9l.23.24.29.28a8.57,8.57,0,0,0,.76.69l.2.16.63.48a10,10,0,0,0,1.09.7c6.92,4.05,18.15,4.05,25.07,0h0a10,10,0,0,0,1.09-.7c.21-.15.4-.3.6-.46l.24-.19c.27-.22.51-.44.74-.66l.33-.33Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M91.71,371.55c-9.53,5.57-9.53,14.59,0,20.15s25,5.56,34.51,0,9.53-14.58,0-20.15S101.24,366,91.71,371.55Z"
-            style="fill: #455a64"></path>
-          <g style="opacity: 0.1">
-            <path
-              d="M91.71,371.55c-9.53,5.57-9.53,14.59,0,20.15s25,5.56,34.51,0,9.53-14.58,0-20.15S101.24,366,91.71,371.55Z"
-              style="fill: #fff"></path>
-          </g>
-          <path d="M96.29,374.23c-7,4.08-7,10.71,0,14.79s18.35,4.09,25.35,0,7-10.71,0-14.79S103.29,370.14,96.29,374.23Z"
-            style="fill: #263238"></path>
-          <path
-            d="M121.63,381.25c-7-4.09-18.34-4.09-25.34,0a11.69,11.69,0,0,0-4.19,3.89A11.76,11.76,0,0,0,96.29,389c7,4.09,18.35,4.09,25.34,0a11.72,11.72,0,0,0,4.2-3.88A11.65,11.65,0,0,0,121.63,381.25Z"
-            style="fill: #f5f5f5"></path>
-        </g>
-        <g id="freepik--Plants--inject-70">
-          <path
-            d="M85.81,305.77l16.7,11.42-15.79-6a28.78,28.78,0,0,0,3.12,12.14s10.43,5.06,16.1,10.4l-13.89-4.37a15.32,15.32,0,0,0,.43,7.26c.09.32.19.65.29,1,.74,2.22,1.79,6.43,3.56,11.4h0a73.25,73.25,0,0,0,5.74,12.56,51.3,51.3,0,0,0,3.82,5.64l.26.34q3.87-2.58,8-5.05c1.6-4.1,3.37-14.06,3.69-22.14,1.21-30.93-23.23-46.89-42.31-51.47C75.59,288.91,82.57,296.5,85.81,305.77Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M85.81,305.77l16.7,11.42-15.79-6a28.78,28.78,0,0,0,3.12,12.14s10.43,5.06,16.1,10.4l-13.89-4.37a15.32,15.32,0,0,0,.43,7.26c.09.32.19.65.29,1,.74,2.22,1.79,6.43,3.56,11.4h0a73.25,73.25,0,0,0,5.74,12.56,51.3,51.3,0,0,0,3.82,5.64l.26.34q3.87-2.58,8-5.05c1.6-4.1,3.37-14.06,3.69-22.14,1.21-30.93-23.23-46.89-42.31-51.47C75.59,288.91,82.57,296.5,85.81,305.77Z"
-            style="opacity: 0.3"></path>
-          <path
-            d="M99.13,306.12a22.94,22.94,0,0,1,4.34,5.23,48.28,48.28,0,0,1,3.06,6.1,62.65,62.65,0,0,1,3.74,13.08,57.68,57.68,0,0,1-1.47,26.89h0a.44.44,0,0,0,.85.26h0a58.35,58.35,0,0,0,1.06-27.23,62.82,62.82,0,0,0-4-13.09,47.87,47.87,0,0,0-3.16-6.07A23.37,23.37,0,0,0,99.13,306.12Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M157.52,321.57l0,0c-.38.49-6.29,5.64-15.36,21.07l-18.39,4.62,15,1.35-6.88,12-15.7,3.88,12.44,1.54s-3,12.18-11.61,17.55c-4.78,3-7.15,3.48-8.67,2.15-1.06-.94-1.52-6.71-2.58-11.84s-1.45-13.52,3-23.83a31.46,31.46,0,0,1,4.78-7.64C124.72,329,146.58,321.83,157.52,321.57Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M157.52,321.57l0,0c-.38.49-6.29,5.64-15.36,21.07l-18.39,4.62,15,1.35-6.88,12-15.7,3.88,12.44,1.54s-3,12.18-11.61,17.55c-4.78,3-7.15,3.48-8.67,2.15-1.06-.94-1.52-6.71-2.58-11.84s-1.45-13.52,3-23.83a31.46,31.46,0,0,1,4.78-7.64C124.72,329,146.58,321.83,157.52,321.57Z"
-            style="opacity: 0.15"></path>
-          <path
-            d="M112.17,355.34a0,0,0,0,0,0,0v0A48.67,48.67,0,0,0,109,368.81h0a145.8,145.8,0,0,0,.22,17.45,2.92,2.92,0,0,1-.91-.51c-1.06-.94-1.52-6.71-2.58-11.84s-1.45-13.52,3-23.83a31.46,31.46,0,0,1,4.78-7.64c11.2-13.49,33.06-20.63,44-20.89-16.68,3.39-34.29,15.26-42.7,28.59A34.19,34.19,0,0,0,112.17,355.34Z"
-            style="opacity: 0.1"></path>
-          <path
-            d="M140.91,327.48c-8.17,4-15.85,9.28-21.77,16.31a43.5,43.5,0,0,0-7.21,11.67,41.81,41.81,0,0,0-3,13.34,0,0,0,0,0,.09,0,53.43,53.43,0,0,1,3.72-13,50.07,50.07,0,0,1,6.94-11.55,57.58,57.58,0,0,1,9.76-9.41,75.9,75.9,0,0,1,11.5-7.28,0,0,0,1,0,0-.08Z"
-            style="fill: #fafafa"></path>
-          <path
-            d="M60.05,333.25h0a33.68,33.68,0,0,1,4,0,64.21,64.21,0,0,1,15.67,2.9c1.89.59,3.78,1.26,5.66,2,.93.39,1.86.8,2.78,1.23a45,45,0,0,1,12.34,8.3,28.44,28.44,0,0,1,4.39,5.5c.16.26.33.52.48.78h0c.39.68.73,1.36,1.07,2A38.81,38.81,0,0,1,111,374.83c.09,4.62-1.19,10-2,10.89a2.23,2.23,0,0,1-.38.32c-1.27.91-3.39.54-7.42-1.43-8.07-3.94-11.76-14.86-11.76-14.86l10.78-2.45-14.12-2-6.17-8.54,10.34-2.47L76,352.87a209.33,209.33,0,0,0-15.88-19.6l0,0Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M64.1,333.22a64.21,64.21,0,0,1,15.67,2.9c1.89.59,3.78,1.26,5.66,2,.93.39,1.86.8,2.78,1.23a45,45,0,0,1,12.34,8.3,28.44,28.44,0,0,1,4.39,5.5c.16.26.33.52.48.78h0c.39.68.73,1.36,1.07,2A38.81,38.81,0,0,1,111,374.83c.09,4.62-1.19,10-2,10.89a2.23,2.23,0,0,1-.38.32,2.42,2.42,0,0,1-.85.37c.57-7.2-4-25.13-9.68-32.29-6-7.45-19.73-18-38-20.85l0,0A33,33,0,0,1,64.1,333.22Z"
-            style="opacity: 0.05"></path>
-          <path
-            d="M107.81,386.41a61.14,61.14,0,0,0-1.91-15.75A50.94,50.94,0,0,0,99.83,356a36,36,0,0,0-5.13-6.15,52.73,52.73,0,0,0-6.14-5.12,59.51,59.51,0,0,0-14.07-7.4,0,0,0,0,0-.06,0,.06.06,0,0,0,0,.06,78.8,78.8,0,0,1,13.58,8,66.22,66.22,0,0,1,6,5,35.22,35.22,0,0,1,5.15,5.9,50.3,50.3,0,0,1,6.23,14.42,61.24,61.24,0,0,1,2.25,15.64,0,0,0,0,0,0,0A0,0,0,0,0,107.81,386.41Z"
-            style="fill: #fafafa"></path>
-        </g>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/icons/Icon404.vue b/frontend-pc/src/components/icons/Icon404.vue
deleted file mode 100644
index e6972fd..0000000
--- a/frontend-pc/src/components/icons/Icon404.vue
+++ /dev/null
@@ -1,363 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <g id="freepik--Floor--inject-37">
-      <ellipse id="freepik--floor--inject-37" cx="249.03" cy="368.25" rx="228.44" ry="118.95" style="fill: #f5f5f5">
-      </ellipse>
-    </g>
-    <g id="freepik--Shadows--inject-37">
-      <ellipse id="freepik--Shadow--inject-37" cx="395.38" cy="348.61" rx="60.93" ry="35.18" style="fill: #e6e6e6">
-      </ellipse>
-      <g id="freepik--shadow--inject-37">
-        <path id="freepik--shadow--inject-37"
-          d="M150,327.73c23.31,13.46,24.26,35.68.94,49.14s-62.05,13.06-85.37-.4-23.31-35.28,0-48.74S126.67,314.27,150,327.73Z"
-          style="fill: #e6e6e6"></path>
-        <path id="freepik--shadow--inject-37"
-          d="M340.14,400.26l-76.52-44.18a9.57,9.57,0,0,0-8.66,0l-76.52,44.18c-2.39,1.38-2.39,3.62,0,5l34.85,20.12-32.55,18.79c-6.61,3.81-17.37,3.81-24,0l-51.2-29.56c-2.82-1.63-4.38-3.68-4.38-5.76s1.56-4.14,4.38-5.77l45.37-26.2a2,2,0,1,0-2-3.46L103.56,399.6c-4.11,2.38-6.38,5.66-6.38,9.24s2.27,6.85,6.38,9.23l51.2,29.56a30.56,30.56,0,0,0,28,0l34.55-19.94L255,449.44a9.57,9.57,0,0,0,8.66,0l76.52-44.18C342.53,403.88,342.53,401.64,340.14,400.26Z"
-          style="fill: #e6e6e6"></path>
-      </g>
-    </g>
-    <g id="freepik--character-2--inject-37">
-      <g id="freepik--Character--inject-37">
-        <g id="freepik--Bottom--inject-37">
-          <path
-            d="M427.58,332.09s2.78-41.18,2-56.36c-.65-12-2.28-17-2.62-19.71,0,0-2.95-28-3.19-51.89-.12-11.48-1.18-19.64-7.47-33.28l-40.43,9.67c-.82,6.06-3.6,46.36-4.26,82.19-.57,31.37.32,58.83.32,58.83l0,1.65c0,1.84-.4,3.12-1.58,6.06a35.32,35.32,0,0,1-6.26,10.36c-.83.9-6.6,5.94-7.36,7-2.48,2.89,2.66,4.52,6.47,4,4-.54,10.26-2.07,12-4.51,1.18-1.64,2.07-7.35,3.28-9,4.09-5.58,5.77-8,5.8-9.76.06-3.22-1.05-4.49-1.45-6.31.33-3.8,8.54-35.05,8.68-46.12.07-5.27-.29-12.53-.29-12.53l6.36-36.52c2.46,9.12,6.78,31.76,8.24,40.45,1.77,10.62,6.4,37.88,9.14,54.14,1.05,6.27,1.54,9.44,2,12.35l.11,1.24c.09,1.58,1.24,18.48,1.86,22,1.3,7.39,7.87,6.46,8.92.48.9-5.08-.22-20.84-.25-22.77Z"
-            style="fill: #ffa8a7"></path>
-          <path
-            d="M427.58,332.09c1.86,0,.64,7.21,1.12,11.82.51,4.95,2.13,8.57,2.6,12.62a16.48,16.48,0,0,1-1.55,10.39c-1.29,3-7.79,7-10.26,2.79s-3-9.08-2.71-13.7,0-7.72.09-11.35c.09-3.2-2.26-11.37.15-11.83l.11,1.24c.87,1.73,9.65,2.07,10.53-.27Z"
-            style="fill: #37474f"></path>
-          <path d="M384.7,331.27c.57,2.31,0,8.65,0,8.65s-1,2.19-4.57,3.64l-1.6-8.82Z" style="fill: #263238"></path>
-          <polygon points="380.11 343.56 372.25 340.98 370.35 334 379.19 338.47 380.11 343.56"></polygon>
-          <path
-            d="M371.93,323.19l0-1.65c-1.07.52-3.42,9.13-6.6,15-2.9,5.39-8.65,8.39-10.52,10.74-2.5,3.13,2.36,7.18,10.15,5.51,3.87-.83,9.73-3.3,11.32-5.91s2.12-7.41,3.42-9.33,4.39-4.13,5-6.31a12,12,0,0,0,0-6c-.61-2-1.15-4.39-1.83-4.17l0,1.51c-.52,1.06-2.41,2.3-6.34,2.52C374.61,325.19,372.79,324.9,371.93,323.19Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M375.05,180s-2.67,29.67-3.53,55.94-.09,60.17-.09,60.17,2.71,1.94,8.68,2.21,8-1.72,8-1.72,3.65-11.91,4.22-20.29a85.71,85.71,0,0,0,0-13.63l5.33-35.06s6.76,34.52,7.53,38.69,7.24,41.06,7.24,41.06,2.54,2.34,9.06,2.22c5.77-.11,7.44-2.18,7.44-2.18s1.39-22.62,1.07-32.28c-.27-8.52-2.22-15.3-2.61-20.83s-.61-37-1-49S425,183,414.73,168.56Z"
-            style="fill: #455a64"></path>
-          <path d="M397.7,227.65l-4.44-22s-7.73-2-11.34-6.74c0,0,1,5.24,9,8.59l4.72,21.88L394,252Z"
-            style="fill: #37474f"></path>
-        </g>
-        <g id="freepik--Top--inject-37">
-          <path
-            d="M318.56,174.53a19.1,19.1,0,0,0,8.51-.63,16.74,16.74,0,0,1-3.37-2.23,2.33,2.33,0,0,1-.4-3.22c.37-.4,1.29.53,3.37,1.12,2.66.75,4.59.91,7.15,2.39a4.69,4.69,0,0,0,3.2.56c6.24-1.17,20.79-8,27.46-11.56,1.36-5.55,3.72-13.71,6.63-23.89,2.69-9.38,7-13.48,13.88-13.33L384,144.11s-3.28,14.07-7.34,25.56c-.71,2-3.56,4.33-8.78,6.27-6.76,2.51-14.92,4.88-24.89,7.61A77.29,77.29,0,0,1,330.65,186c-10.54.9-14.58-2-16-4.08C310.61,176.18,313,173.42,318.56,174.53Z"
-            style="fill: #ffa8a7"></path>
-          <path
-            d="M402.72,123.59l9.62.74a22.36,22.36,0,0,0,7.24,21.54l-4.29,17.28c.14,2.14,3.68,9.34,7.11,17.08-6.45,8.64-38.09,11.59-48.41,4,1.59-8.14,2.78-14.32,3.1-17.41l-.52-11.17c-12.94-10.61,2.67-26.78,8.42-31.92l7.22-.32Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M443.23,209.68a5.39,5.39,0,0,1-2.06-4.64c.17-1.61.54-3.63,1.21-4.41s4.87-6.49,6.73-3.17c2,3.62,1.59,5.09,1.59,5.09Z"
-            style="fill: #f28f8f"></path>
-          <path
-            d="M430.27,286a25.84,25.84,0,0,1-12.75-3.86L367.59,253.3c-7.71-4.45-14-15.32-14-24.23V187.18a8,8,0,0,0-12-6.9L324.11,190.4a2,2,0,1,1-2-3.46l17.53-10.13a12,12,0,0,1,18,10.37v41.89c0,7.5,5.5,17,12,20.77l49.93,28.82c6.39,3.69,12.32,4.33,16.68,1.82s6.77-8,6.77-15.35V211.65c0-9.06,5.79-19.5,13.18-23.77l12.19-7a2,2,0,1,1,2,3.46l-12.19,7c-6.06,3.5-11.18,12.79-11.18,20.3v53.48c0,8.86-3.12,15.54-8.77,18.81A15.68,15.68,0,0,1,430.27,286Z"
-            style="fill: #37474f"></path>
-          <g id="freepik--Plug--inject-37">
-            <path
-              d="M344,193.29v3.27c0,5.23-3.67,11.6-8.21,14.21l-30.28,17.49-30.79-17.78V183.82L304.58,170c4.75-2.19,12.27-1.85,16.81.76l14.38,8.31C340.3,181.69,344,188.06,344,193.29Z"
-              style="fill: #37474f"></path>
-            <path
-              d="M304.58,170c4.75-2.19,12.27-1.85,16.81.76l14.38,8.31c4.53,2.61,4.35,6.51-.4,8.71l-29.89,13.8-30.8-17.77Z"
-              style="fill: #455a64"></path>
-            <path d="M308.39,195.18a9.07,9.07,0,0,1,4.1,7.1v21.93l-7,4-30.79-17.78V183.82l7.8-3.6Z"
-              style="opacity: 0.15"></path>
-            <path
-              d="M272.07,179.23a2.85,2.85,0,0,1,2.88.28L305.23,197a9.06,9.06,0,0,1,4.1,7.11v26.08a2.85,2.85,0,0,1-1.2,2.64c-.7.39-3.17,1.82-3.86,2.23a2.87,2.87,0,0,1-2.89-.28l-30.29-17.49a9.07,9.07,0,0,1-4.1-7.1V184.11a2.89,2.89,0,0,1,1.19-2.65Z"
-              style="fill: #37474f"></path>
-            <path
-              d="M301.38,199.22l-30.29-17.48c-2.26-1.31-4.1-.25-4.1,2.37v26.08a9.07,9.07,0,0,0,4.1,7.1l30.29,17.49c2.26,1.31,4.1.25,4.1-2.37V206.33A9.09,9.09,0,0,0,301.38,199.22Z"
-              style="fill: #455a64"></path>
-            <path
-              d="M265.51,229.58v4.51c0,1.83.63,3.1,1.67,3.7l2.72,1.57A4,4,0,0,0,274,239l25-14.46V206.74l-2.72-1.57-25.05,14.46A12.69,12.69,0,0,0,265.51,229.58ZM276.84,224A4,4,0,0,1,277,225a8.5,8.5,0,0,1-3.85,6.67,3.62,3.62,0,0,1-1,.4,4.11,4.11,0,0,1-.14-1,8.51,8.51,0,0,1,3.85-6.67A4.74,4.74,0,0,1,276.84,224Z"
-              style="fill: currentcolor"></path>
-            <path
-              d="M269.76,239.26a1,1,0,0,0,.17.12h0l-.1-.06-2.63-1.53c-1.05-.58-1.67-1.85-1.67-3.69v-4.51a11.64,11.64,0,0,1,1.69-5.67l2.72,1.57a11.8,11.8,0,0,0-1.68,5.67v4.51a4.59,4.59,0,0,0,1.05,3.22A2.45,2.45,0,0,0,269.76,239.26Z"
-              style="opacity: 0.2"></path>
-            <path
-              d="M299,206.74,274,221.2a11.72,11.72,0,0,0-4.06,4.28l-2.72-1.57a11.78,11.78,0,0,1,4.05-4.28l25.05-14.46Z"
-              style=" opacity: 0.5;fill: #fff"></path>
-            <path d="M270,239.45l-.07,0,0,0S270,239.45,270,239.45Z" style=" opacity: 0.5;fill: #fff"></path>
-            <path d="M270,239.43l0,0,0,0Z" style="opacity: 0.2"></path>
-            <path
-              d="M277,225a4.27,4.27,0,0,0-.14-1.07h0c1.65-.45,2.86.58,2.86,2.64a8.52,8.52,0,0,1-3.84,6.67c-1.78,1-3.3.49-3.72-1.17a3.27,3.27,0,0,0,1-.4A8.53,8.53,0,0,0,277,225Z"
-              style="opacity: 0.2"></path>
-            <path
-              d="M242.42,216.24v4.52c0,1.82.63,3.1,1.67,3.69l2.72,1.58a4,4,0,0,0,4.08-.38l25-14.47V193.41l-2.72-1.58-25,14.46A12.72,12.72,0,0,0,242.42,216.24Zm11.33-5.61a4.33,4.33,0,0,1,.14,1.07,8.51,8.51,0,0,1-3.85,6.67,4.6,4.6,0,0,1-1,.4,3.81,3.81,0,0,1-.14-1.05,8.52,8.52,0,0,1,3.84-6.67A3.91,3.91,0,0,1,253.75,210.63Z"
-              style="fill: currentcolor"></path>
-            <path
-              d="M246.93,226.1l-.05,0-.07,0-2.72-1.59c-1.05-.59-1.67-1.86-1.67-3.7v-4.51a9.88,9.88,0,0,1,.45-2.84,13.48,13.48,0,0,1,1.23-2.82h0l2.72,1.56h0a12.69,12.69,0,0,0-.69,1.38,10.89,10.89,0,0,0-1,4.28v4.51a4.61,4.61,0,0,0,1,3.22A2.8,2.8,0,0,0,246.93,226.1Z"
-              style="opacity: 0.2"></path>
-            <path d="M275.92,193.41l-25,14.46a11.64,11.64,0,0,0-4.06,4.28l-2.72-1.56a11.77,11.77,0,0,1,4-4.3l25-14.46Z"
-              style=" opacity: 0.5;fill: #fff"></path>
-            <path d="M247,226.12l-.07,0,.05,0Z" style=" opacity: 0.5;fill: #fff"></path>
-            <path
-              d="M253.88,211.69a4.21,4.21,0,0,0-.13-1.06h0c1.64-.46,2.86.58,2.86,2.64a8.52,8.52,0,0,1-3.84,6.67c-1.79,1-3.3.49-3.72-1.18a3.12,3.12,0,0,0,1-.4A8.5,8.5,0,0,0,253.88,211.69Z"
-              style="opacity: 0.2"></path>
-          </g>
-          <path
-            d="M250,199.55a1.49,1.49,0,0,1-1.45-1.13l-4-15.68a1.5,1.5,0,0,1,2.91-.75l4,15.69a1.48,1.48,0,0,1-1.08,1.82A1.57,1.57,0,0,1,250,199.55Z"
-            style="fill: #e0e0e0"></path>
-          <path
-            d="M238.74,206.09a1.5,1.5,0,0,1-.93-.32L222.92,194a1.5,1.5,0,1,1,1.86-2.35l14.89,11.76a1.51,1.51,0,0,1,.25,2.11A1.48,1.48,0,0,1,238.74,206.09Z"
-            style="fill: #e0e0e0"></path>
-          <path
-            d="M218.22,220.45a1.5,1.5,0,0,1-.11-3l17.41-1.35a1.49,1.49,0,0,1,1.61,1.38,1.51,1.51,0,0,1-1.38,1.61l-17.41,1.35Z"
-            style="fill: #e0e0e0"></path>
-          <path
-            d="M456.84,193.36a98.58,98.58,0,0,0-1.64-11,148.11,148.11,0,0,0-9.06-24.81c-1.67-3.19-5.44-7.84-8.11-11.77-3.78-5.55-6.44-8.66-9.31-12.43-6.32-8.27-9-8.75-16.38-9-1,2.63-3.28,13.41,4.11,22.12l15.84,16.7c.9,1.45,10.58,18,12.19,24.11a4.52,4.52,0,0,1-.38,3.23,39,39,0,0,0-2.77,8.76c-.47,2.12-1.73,3.8-1.3,4.13a2.84,2.84,0,0,0,3.51-.28,15.05,15.05,0,0,0,2.73-4.12,2.15,2.15,0,0,1,2.29,2.19c.09,1.23-.47,2.94-.9,5.07-.08.42-.18.9-.37,2.06a13.42,13.42,0,0,0-.28,2.38c2,.37,4.09-.85,7.45-4C457.49,203.76,457.69,199.9,456.84,193.36Z"
-            style="fill: #ffa8a7"></path>
-          <path
-            d="M404.44,118.73c.06-2,6.56-6.68,9.85-11.66,3-4.62,7.31-17.32-2.79-21.38,0,0,2.18-6.09-1.78-9.68s-9.29-1.37-10.13.13a9,9,0,0,0-8.46-6.64,7.87,7.87,0,0,0-8.28,6.17,7.59,7.59,0,0,0-9.21,2.58c-3.71,5.11,1.21,9.79,1.21,9.79A4.25,4.25,0,0,0,373,92c.29,2.16,2.36,2.69,2.6,3.77a1.06,1.06,0,0,1-1.81.94,2.18,2.18,0,0,0,2.56,1.73c2.33-.13,4.41-3.3,4.41-3.3Z"
-            style="fill: #263238"></path>
-          <path
-            d="M383.24,85.05c-3,1.3-5.83,5.87-5.79,18.65,0,10.83,3.36,13.57,5,14.38s4.95.39,8.14-.1v6.23s-5.77,7.16-.6,10.72c13.32-2.33,14.34-11.07,14.34-11.07l.24-13.58s1.83,1.92,5-.9c2.66-2.33,3.62-6.32,1.62-8.52s-4.56-2.37-6.88.08c0,0-4.25.28-10.64-3.73S385,89.13,383.24,85.05Z"
-            style="fill: #ffa8a7"></path>
-          <path d="M390.91,110.48a1.56,1.56,0,0,1-1.48,1.66,1.61,1.61,0,1,1,1.48-1.66Z" style="fill: #b16668"></path>
-          <path d="M382.68,100a1.44,1.44,0,1,1-1.5-1.45A1.47,1.47,0,0,1,382.68,100Z" style="fill: #263238"></path>
-          <path d="M393.75,100.66a1.56,1.56,0,0,1-1.48,1.66,1.59,1.59,0,0,1-1.6-1.56,1.54,1.54,0,1,1,3.08-.1Z"
-            style="fill: #263238"></path>
-          <path d="M381.68,94.27l-3.05,1.79a1.7,1.7,0,0,0,2.4.65A1.83,1.83,0,0,0,381.68,94.27Z" style="fill: #263238">
-          </path>
-          <path d="M404.37,99.18l0,6a2.82,2.82,0,0,1-2.89-2.92A3.1,3.1,0,0,1,404.37,99.18Z" style="fill: #263238">
-          </path>
-          <polygon points="386.62 98.57 386.01 107.21 381.45 106.14 386.62 98.57" style="fill: #f28f8f"></polygon>
-          <path d="M390.63,118c3.35-.39,10.27-2.31,11.4-5.13a7.35,7.35,0,0,1-2.48,3.57c-2.09,1.8-8.93,3.66-8.93,3.66Z"
-            style="fill: #f28f8f"></path>
-        </g>
-        <g id="freepik--question-marks--inject-37">
-          <path
-            d="M430.9,51.18a13.78,13.78,0,0,1,3.55,2,10.75,10.75,0,0,1,2.65,2.79,8.68,8.68,0,0,1,1.3,3.44,7.65,7.65,0,0,1-.47,3.87,7.9,7.9,0,0,1-1.59,2.66,9.5,9.5,0,0,1-2.13,1.68,14.81,14.81,0,0,1-2.4,1.1l-2.36.85a11.94,11.94,0,0,0-2,.94A3.57,3.57,0,0,0,426,71.85a1.76,1.76,0,0,1-.66.64,1,1,0,0,1-.86.05l-3.12-1.17a1.18,1.18,0,0,1-.67-.63,1,1,0,0,1,0-.89,7.71,7.71,0,0,1,1.74-2.56,10.91,10.91,0,0,1,2.25-1.63,15.6,15.6,0,0,1,2.46-1.06c.84-.28,1.62-.55,2.35-.83a10.4,10.4,0,0,0,1.89-.92,2.79,2.79,0,0,0,1.12-1.38,3.29,3.29,0,0,0-.34-3.06,6,6,0,0,0-3.11-2.31,5.73,5.73,0,0,0-6.43,1.55,2.59,2.59,0,0,1-.69.52,1.15,1.15,0,0,1-.84-.06l-3.32-1.25a.93.93,0,0,1-.54-.49.85.85,0,0,1,0-.75,6.67,6.67,0,0,1,2-2.6,10.71,10.71,0,0,1,3.27-1.86,13,13,0,0,1,4.07-.74A11.48,11.48,0,0,1,430.9,51.18Zm-7.12,23.9a1.1,1.1,0,0,1,.65.62,1.13,1.13,0,0,1,0,.9l-1.36,3.61a1.1,1.1,0,0,1-.62.65,1.13,1.13,0,0,1-.9,0l-3.53-1.33a1.1,1.1,0,0,1-.65-.62,1.13,1.13,0,0,1,0-.9l1.36-3.61a1.15,1.15,0,0,1,.62-.66,1.17,1.17,0,0,1,.9,0Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M432.63,94.28a1.1,1.1,0,0,1,0,1.57l-2.5,2.64a1.08,1.08,0,0,1-.78.34,1.11,1.11,0,0,1-.8-.3L426,96.08a1.08,1.08,0,0,1-.34-.78,1.07,1.07,0,0,1,.3-.8l2.51-2.63a1.12,1.12,0,0,1,1.57,0Zm15-18.13a13.34,13.34,0,0,1,2.37,3,10.44,10.44,0,0,1,1.27,3.4A8.25,8.25,0,0,1,451.1,86a8,8,0,0,1-4.19,4.91,8.77,8.77,0,0,1-2.46.68,14.86,14.86,0,0,1-2.49.07l-2.36-.13a12.13,12.13,0,0,0-2.11.07,3.4,3.4,0,0,0-1.72.7,1.56,1.56,0,0,1-.81.31.94.94,0,0,1-.77-.27l-2.27-2.16a1.15,1.15,0,0,1-.36-.79.92.92,0,0,1,.32-.79A7.27,7.27,0,0,1,434.32,87a10.23,10.23,0,0,1,2.55-.59,15.29,15.29,0,0,1,2.53,0q1.25.11,2.34.15a9.53,9.53,0,0,0,2-.11,2.61,2.61,0,0,0,1.49-.78,3.13,3.13,0,0,0,.82-2.78,5.62,5.62,0,0,0-1.85-3.15,5.42,5.42,0,0,0-6.16-1,2.3,2.3,0,0,1-.78.19,1,1,0,0,1-.71-.36l-2.42-2.31a.92.92,0,0,1-.3-.61.88.88,0,0,1,.26-.67,6.45,6.45,0,0,1,2.68-1.53,10.2,10.2,0,0,1,3.52-.41,12.17,12.17,0,0,1,3.81.86A10.6,10.6,0,0,1,447.59,76.15Z"
-            style="fill: currentcolor"></path>
-          <g style="opacity: 0.6">
-            <path
-              d="M432.63,94.28a1.1,1.1,0,0,1,0,1.57l-2.5,2.64a1.08,1.08,0,0,1-.78.34,1.11,1.11,0,0,1-.8-.3L426,96.08a1.08,1.08,0,0,1-.34-.78,1.07,1.07,0,0,1,.3-.8l2.51-2.63a1.12,1.12,0,0,1,1.57,0Zm15-18.13a13.34,13.34,0,0,1,2.37,3,10.44,10.44,0,0,1,1.27,3.4A8.25,8.25,0,0,1,451.1,86a8,8,0,0,1-4.19,4.91,8.77,8.77,0,0,1-2.46.68,14.86,14.86,0,0,1-2.49.07l-2.36-.13a12.13,12.13,0,0,0-2.11.07,3.4,3.4,0,0,0-1.72.7,1.56,1.56,0,0,1-.81.31.94.94,0,0,1-.77-.27l-2.27-2.16a1.15,1.15,0,0,1-.36-.79.92.92,0,0,1,.32-.79A7.27,7.27,0,0,1,434.32,87a10.23,10.23,0,0,1,2.55-.59,15.29,15.29,0,0,1,2.53,0q1.25.11,2.34.15a9.53,9.53,0,0,0,2-.11,2.61,2.61,0,0,0,1.49-.78,3.13,3.13,0,0,0,.82-2.78,5.62,5.62,0,0,0-1.85-3.15,5.42,5.42,0,0,0-6.16-1,2.3,2.3,0,0,1-.78.19,1,1,0,0,1-.71-.36l-2.42-2.31a.92.92,0,0,1-.3-.61.88.88,0,0,1,.26-.67,6.45,6.45,0,0,1,2.68-1.53,10.2,10.2,0,0,1,3.52-.41,12.17,12.17,0,0,1,3.81.86A10.6,10.6,0,0,1,447.59,76.15Z"
-              style="fill: #fff"></path>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="freepik--character-1--inject-37">
-      <g id="freepik--character--inject-37">
-        <g id="freepik--bottom--inject-37">
-          <path d="M76.81,345.71c3.17,1.93,7.38,2,11.35.61l3-21-14-3.58Z" style="fill: #ffa8a7"></path>
-          <path
-            d="M99.4,365.81c.35.36.14,3-.29,3.59s-2.84,2.59-7.28,2.67c-4.23.07-8-.7-10.36-2.41s-3.49-3.5-3.6-5.92.29-4.71-.75-6.62-2.29-3.51-2.61-4.45a12,12,0,0,1,0-5.17Z"
-            style="fill: #263238"></path>
-          <path
-            d="M89.13,345.44a11.56,11.56,0,0,0,.38,2.7,24.77,24.77,0,0,0,2.29,5.42,22.77,22.77,0,0,0,1.63,2.57c1.19,1.59,2.71,2.92,4,4.45a8.61,8.61,0,0,1,2.33,5.32c0,3.32-3.65,4.25-6.44,4.59a20.33,20.33,0,0,1-9-.93,8.26,8.26,0,0,1-5.69-6.92c-.11-.93,0-1.86-.06-2.79a12.93,12.93,0,0,0-2.26-5.93,17,17,0,0,1-1.8-3.26c-.76-2.09.06-4.36.72-6.37.57-1.73,1-3.82,1.64-3.62,0,.35,0,1.13,0,1.13.18.39.62.67.73,1.13a8.59,8.59,0,0,0,.43,1.39,3.6,3.6,0,0,0,1.38,1.7c.11-1.25.22-2.5.32-3.74a1.31,1.31,0,0,1,1.43-1.49,23.59,23.59,0,0,1,7.11-.21,1.36,1.36,0,0,1,.93.47,1.44,1.44,0,0,1,.11.85A32.79,32.79,0,0,0,89.13,345.44Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M89.13,345.44a11.56,11.56,0,0,0,.38,2.7,24.77,24.77,0,0,0,2.29,5.42,22.77,22.77,0,0,0,1.63,2.57c1.19,1.59,2.71,2.92,4,4.45a8.61,8.61,0,0,1,2.33,5.32c0,3.32-3.65,4.25-6.44,4.59a20.33,20.33,0,0,1-9-.93,8.26,8.26,0,0,1-5.69-6.92c-.11-.93,0-1.86-.06-2.79a12.93,12.93,0,0,0-2.26-5.93,17,17,0,0,1-1.8-3.26c-.76-2.09.06-4.36.72-6.37.57-1.73,1-3.82,1.64-3.62,0,.35,0,1.13,0,1.13.18.39.62.67.73,1.13a8.59,8.59,0,0,0,.43,1.39,3.6,3.6,0,0,0,1.38,1.7c.11-1.25.22-2.5.32-3.74a1.31,1.31,0,0,1,1.43-1.49,23.59,23.59,0,0,1,7.11-.21,1.36,1.36,0,0,1,.93.47,1.44,1.44,0,0,1,.11.85A32.79,32.79,0,0,0,89.13,345.44Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M92.21,354.28c-1.18-1-3.94-1.15-5.46-1.07a9.22,9.22,0,0,0-4.37,1.27,1,1,0,0,1-1.25-.17h0a.92.92,0,0,1,.16-1.4,9.45,9.45,0,0,1,4.93-1.53C90,351.32,91,352,91,352S92.64,353.2,92.21,354.28Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M94.86,357.82c-1.5-1-4.54-1-6.06-.95a8.6,8.6,0,0,0-4.25,1.36,1,1,0,0,1-1.26-.17h0a.91.91,0,0,1,.17-1.4,9.55,9.55,0,0,1,5-1.66c3.73-.07,4.66.75,4.66.75A3.07,3.07,0,0,1,94.86,357.82Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M84.93,347.75a9.27,9.27,0,0,1,4.65.64c.63.41,1,1.46.57,1.7A8.66,8.66,0,0,0,86,349.3a12.24,12.24,0,0,0-4.07.89c-.33.12-.71.3-1,.46a.87.87,0,0,1-1.2-.44h0a.84.84,0,0,1,.38-1A11.93,11.93,0,0,1,84.93,347.75Z"
-            style="fill: #455a64"></path>
-          <path d="M116.27,337.82c2.44,6.11,6.26,4.23,12.08.71l.88-20.86-14.81-1.37Z" style="fill: #ffa8a7"></path>
-          <path
-            d="M150.69,352.53a4,4,0,0,1-.32,2.93c-.46.84-5.09,3.14-11.14,2.4a25.22,25.22,0,0,1-12.32-5.06c-2.23-1.66-4.62-2.07-7.62-2.41s-5.25-1.38-5.84-2.82.31-3.82.31-3.82Z"
-            style="fill: #263238"></path>
-          <path
-            d="M127.13,333.3a11.94,11.94,0,0,0,1.61-.46,1.31,1.31,0,0,1,.91,0c.38.17.5.63.59,1a13.86,13.86,0,0,0,.52,2.67,6.54,6.54,0,0,0,1.6,1.88,27.83,27.83,0,0,0,4.69,3.39c1.93,1.18,3.83,2.11,5.82,3.14s4.78,1.77,6.36,3c2.29,1.74,2.38,5.79-.42,7.23-2.41,1.25-8.65,2.41-15,.23-3.47-1.19-7.17-5.16-11.77-5.77-2.93-.38-6.83-.84-8.6-3.17-.64-1-.08-3.9.44-7.29.47-3,.9-7.8,1.87-7.48l.07.92L117,334a10.07,10.07,0,0,0,.82.78,14.84,14.84,0,0,0,1,1.06,3,3,0,0,0,1.69.71,1.56,1.56,0,0,0,.85-.19c.5-.28.57-.94,1-1.35A4.88,4.88,0,0,1,124,333.9a9.61,9.61,0,0,1,2.66-.54A3.65,3.65,0,0,0,127.13,333.3Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M127.13,333.3a11.94,11.94,0,0,0,1.61-.46,1.31,1.31,0,0,1,.91,0c.38.17.5.63.59,1a13.86,13.86,0,0,0,.52,2.67,6.54,6.54,0,0,0,1.6,1.88,27.83,27.83,0,0,0,4.69,3.39c1.93,1.18,3.83,2.11,5.82,3.14s4.78,1.77,6.36,3c2.29,1.74,2.38,5.79-.42,7.23-2.41,1.25-8.65,2.41-15,.23-3.47-1.19-7.17-5.16-11.77-5.77-2.93-.38-6.83-.84-8.6-3.17-.64-1-.08-3.9.44-7.29.47-3,.9-7.8,1.87-7.48l.07.92L117,334a10.07,10.07,0,0,0,.82.78,14.84,14.84,0,0,0,1,1.06,3,3,0,0,0,1.69.71,1.56,1.56,0,0,0,.85-.19c.5-.28.57-.94,1-1.35A4.88,4.88,0,0,1,124,333.9a9.61,9.61,0,0,1,2.66-.54A3.65,3.65,0,0,0,127.13,333.3Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M134.4,340a2.76,2.76,0,0,0-2.1-1.57c-1.32-.32-3.73.54-5.26,1.67a1.1,1.1,0,0,0,.06,1.82h0a1.12,1.12,0,0,0,1.26-.07A8.32,8.32,0,0,1,134.4,340Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M138.41,342.57a3.15,3.15,0,0,0-2.5-1.46,9.76,9.76,0,0,0-5.76,1.81,1.07,1.07,0,0,0,0,1.76h0a1.07,1.07,0,0,0,1.22-.08A8.42,8.42,0,0,1,138.41,342.57Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M142.87,344.91a3.51,3.51,0,0,0-2.6-1.34,9.46,9.46,0,0,0-5.53,1.84,1.07,1.07,0,0,0,.06,1.76h0a1,1,0,0,0,1.21-.07A8,8,0,0,1,142.87,344.91Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M76.42,289.41c.45-10.07,2.59-15.31,2.89-18.1,0,0,.82-55.4,2.17-72.21l49.6-2.11c.73,18,1.39,66.36,1,72.76-.37,6.13-2.86,59.3-2.86,59.3-7,2.19-14.47-1-14.47-1s-4.16-30.25-4.84-36.92a85.23,85.23,0,0,1,.46-18l-3.17-43.07s-3.83,33.4-5.72,46C99.32,290.47,90,335.14,90,335.14c-6.7,1.67-13.22-1.22-13.22-1.22S75.76,304,76.42,289.41Z"
-            style="fill: #455a64"></path>
-          <path d="M107.21,230.1l.94-5.94c2.89-.43,10.21-5,14.54-9a34.5,34.5,0,0,1-12.16,11.21l-.15,46.78Z"
-            style="fill: #37474f"></path>
-        </g>
-        <g id="freepik--top--inject-37">
-          <path
-            d="M127.55,167.81c-3.37-7.69-9.17-20.64-9.17-20.64l-1.47-21a56.64,56.64,0,0,1,6.41.57c3.12.49,8.07,3.47,10.33,9.09,1.69,4.17,10.47,29.61,10.47,29.61l15.3-8.06c3.92-2.49,5.31-6.62,7.81-9s5-2.74,7.77-4.65,3.86-3.44,4.56-1.53-2.4,4.84-3,5.57-3.61,2.29.23,2.49,11.61-3.54,13.47-4.18,1.7,1.57.73,2.94-1.07,5.39-2.69,7.64c-1.72,2.4-2.65,3.43-6.34,4.86-3.43,1.32-10.54,1.66-14.2,3.77s-12.52,10.12-18.43,14.23c-7.93,5.52-12.39,5.88-15.5,1.48S128.74,170.52,127.55,167.81Z"
-            style="fill: #ffa8a7"></path>
-          <path
-            d="M114.84,125.72c5.2-.4,11.33-.08,14.72,3,2.71,2.47,3.73,4,6.75,12.54,2,5.73,6.28,18.93,6.28,18.93a27.32,27.32,0,0,0-15,9.19l-9.75-21.91Z"
-            style="fill: #e0e0e0"></path>
-          <path d="M144.12,165.39a13.09,13.09,0,0,0-6.47,5s.37-4,6-6.39Z" style="fill: #f28f8f"></path>
-          <path
-            d="M102.39,124.78a24.57,24.57,0,0,0-7.31.8c-4.57,1.21-12.76,3.51-12.76,3.51-2.6,1.35-3.61,5.85-4.2,8.44-1.88,8.29,3,27,3.75,34.29S81,201.44,81,201.44c5.59,6.48,35.88,10.78,50.63,0,0,0,.64-51.27-.81-58.63-2.2-11.14-5.47-16.43-17-17.1Z"
-            style="fill: #f5f5f5"></path>
-          <path d="M108.86,97.28l-3.29,1.81a2,2,0,0,1,.77-2.62A1.83,1.83,0,0,1,108.86,97.28Z" style="fill: #263238">
-          </path>
-          <path d="M123.17,98.6l-3-2.31a1.82,1.82,0,0,1,2.61-.4A2,2,0,0,1,123.17,98.6Z" style="fill: #263238"></path>
-          <path
-            d="M93.74,86.81S90.2,87.3,88.9,90c-1.12,2.32-.72,7.92.79,14a56.45,56.45,0,0,0,3.8,11.46,4.7,4.7,0,0,0,2.7,2.17L96,110.37l-.26-5s3.23-4.42,3.59-8c.46-4.66-.52-6.57-.52-6.57Z"
-            style="fill: #263238"></path>
-          <path
-            d="M99.45,93.81A13.53,13.53,0,0,0,113,107.29c7.46,0,13.06-6.15,13-13.62s-5.66-13.45-13.13-13.42A13.52,13.52,0,0,0,99.45,93.81Z"
-            style="fill: #263238"></path>
-          <path
-            d="M96,104.52c-1.22,1.06-2.21-1.67-3.23-2.74s-4.37-2.51-6,1,1.46,8.6,4,9.58A3.65,3.65,0,0,0,95.08,111v16c3.85,6.94,10.64,6.72,14.27,6.33s4.42-4.16,1.77-7.2l0-5a28.29,28.29,0,0,0,6.1.29c3.32-.52,5-3,6-6.63,1.6-5.79,2.25-15.51,0-26.74-3.72-2.88-16.62-2.4-24.43,2.55C99.4,100.67,97.16,103.47,96,104.52Z"
-            style="fill: #ffa8a7"></path>
-          <path
-            d="M123.88,82.49a24.39,24.39,0,0,0,.67-6.37c0-.84-.21-1.86-1-2.18s-1.57.26-2.25.72c-2.88,1.94-6.46,2.49-9.93,2.68-6,.33-15.17-.06-18.22,6.51-.85,1.82-1,3.74.68,5a11.5,11.5,0,0,0,5,1.86c3,.53,6,1.19,9.08,1.6s6.74.81,9.79-.13c2.57-.79,5.18-1.47,7.09-3.51a9.78,9.78,0,0,0,2.62-6.54c0-.34-.07-.77-.41-.86a.78.78,0,0,0-.49.1Z"
-            style="fill: #263238"></path>
-          <path
-            d="M111.09,121.24s-7.42-1.47-10-2.84a8.57,8.57,0,0,1-3.6-3.54,11.65,11.65,0,0,0,2,4.18c1.91,2.42,11.58,4.17,11.58,4.17Z"
-            style="fill: #f28f8f"></path>
-          <path d="M109.6,102.19a1.67,1.67,0,1,1-1.67-1.72A1.7,1.7,0,0,1,109.6,102.19Z" style="fill: #263238"></path>
-          <path
-            d="M112,113.74a1.6,1.6,0,0,1-1.56,1.63,1.61,1.61,0,0,1-1.58-1.63,1.59,1.59,0,0,1,1.56-1.62A1.61,1.61,0,0,1,112,113.74Z"
-            style="fill: #b16668"></path>
-          <path d="M107.5,96.94l-3.44,2.17a2.13,2.13,0,0,1,.66-2.88A2,2,0,0,1,107.5,96.94Z" style="fill: #263238">
-          </path>
-          <path d="M119.64,94.82l3.62,1.62a1.9,1.9,0,0,1-2.56,1A2.09,2.09,0,0,1,119.64,94.82Z" style="fill: #263238">
-          </path>
-          <path d="M121.55,101.69a1.61,1.61,0,1,1-1.62-1.67A1.65,1.65,0,0,1,121.55,101.69Z" style="fill: #263238">
-          </path>
-          <polygon points="113.37 98.87 113.97 109.99 119.24 108.59 113.37 98.87" style="fill: #f28f8f"></polygon>
-          <path
-            d="M20,144.67c1.73.93,8.78,5.89,12.61,6.32,1.62.18,2.06-.08,2-.5-.08-.58-1.11-1.45-1.36-1.92-.43-.82-3-4.22-2-6s1.87-.08,4.25,2.25,4.82,3.14,6.91,5.85,2.79,7,6.25,10.11l13.78,9.41s6.42-29.79,9.24-33.3c3-3.69,15.87,4.35,13.17,16.08S76,185.06,71.72,189.05c-2.76,2.59-8.57.15-15.82-6.3C50.17,177.65,42.32,170,39,167.29s-10.22-4.17-13.39-6c-3.41-2-4.16-3.17-5.47-5.82-1.23-2.49-.68-6.48-1.41-8S18.24,143.74,20,144.67Z"
-            style="fill: #ffa8a7"></path>
-          <path
-            d="M82.32,129.09c4.42,2.76,4.64,6.78,4.86,11.38a47.57,47.57,0,0,1-2.52,15.84c-1.87,5.79-4.84,16.36-4.84,16.36s-11.54.27-17.48-4.86c0,0,2.71-11.4,4.62-20S71.19,130.06,82.32,129.09Z"
-            style="fill: #e0e0e0"></path>
-          <path d="M62.39,170.21c3.15,1.75,5,5.51,5.57,7a11,11,0,0,0-5.24-8.53Z" style="fill: #f28f8f"></path>
-        </g>
-        <g id="freepik--Outlet--inject-37">
-          <polygon points="182.11 386.34 259.29 430.9 259.29 447.32 182.11 402.76 182.11 386.34"
-            style="fill: currentcolor"></polygon>
-          <polygon points="182.11 386.34 259.29 430.9 259.29 447.32 182.11 402.76 182.11 386.34" style="opacity: 0.35">
-          </polygon>
-          <polygon points="336.47 386.34 259.29 430.9 259.29 447.32 336.47 402.76 336.47 386.34"
-            style="fill: currentcolor"></polygon>
-          <polygon points="336.47 386.34 259.29 430.9 259.29 447.32 336.47 402.76 336.47 386.34" style="opacity: 0.2">
-          </polygon>
-          <polygon points="336.47 386.34 259.29 341.79 182.11 386.34 259.29 430.9 336.47 386.34"
-            style="fill: currentcolor"></polygon>
-          <polygon points="336.47 386.34 259.29 341.79 182.11 386.34 259.29 430.9 336.47 386.34" style="opacity: 0.15">
-          </polygon>
-          <polygon points="259.29 430.9 259.29 426.21 190.23 386.34 182.11 386.34 259.29 430.9" style="opacity: 0.1">
-          </polygon>
-          <polygon points="259.29 341.79 259.29 346.48 328.35 386.34 336.47 386.34 259.29 341.79" style="opacity: 0.1">
-          </polygon>
-          <polygon points="336.47 386.34 328.35 386.34 259.29 426.21 259.29 430.9 336.47 386.34"
-            style="fill: currentcolor"></polygon>
-          <polygon points="259.29 341.79 259.29 346.48 190.23 386.34 182.11 386.34 259.29 341.79"
-            style="fill: currentcolor"></polygon>
-          <path
-            d="M259.57,367l33.16,19.14c2.48,1.44,2.48,3.76,0,5.19L268,405.65a9.89,9.89,0,0,1-9,0l-33.16-19.14c-2.48-1.44-2.48-3.76,0-5.19L250.58,367A9.89,9.89,0,0,1,259.57,367Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M268,405.65l23.91-13.81-32.34-18.67a10,10,0,0,0-9,0L226.66,387,259,405.65A9.89,9.89,0,0,0,268,405.65Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M239.54,386.37,254.05,378a1.94,1.94,0,0,1,1.74,0l1.78,1c.48.27.48.72,0,1l-14.51,8.37a1.92,1.92,0,0,1-1.73,0l-1.78-1A.53.53,0,0,1,239.54,386.37Z"
-            style="fill: #263238"></path>
-          <path
-            d="M261.21,398.9l14.51-8.37a1.92,1.92,0,0,1,1.73,0l1.79,1c.48.27.48.72,0,1l-14.51,8.37a1.92,1.92,0,0,1-1.73,0l-1.78-1A.53.53,0,0,1,261.21,398.9Z"
-            style="fill: #263238"></path>
-          <path
-            d="M225.76,418.77a9.64,9.64,0,0,0-4.38-7.57,3.05,3.05,0,0,0-3.09-.3L216.4,412a3.06,3.06,0,0,0-1.28,2.82,9.69,9.69,0,0,0,4.37,7.58,3.07,3.07,0,0,0,3.1.3l1.88-1.13A3.08,3.08,0,0,0,225.76,418.77Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M219.49,412.33a9.64,9.64,0,0,1,4.38,7.57c0,2.79-2,3.92-4.38,2.53a9.69,9.69,0,0,1-4.37-7.58C215.12,412.07,217.08,410.94,219.49,412.33Z"
-            style="opacity: 0.1"></path>
-        </g>
-        <g id="freepik--Cable--inject-37">
-          <path
-            d="M168.76,444.27a28.55,28.55,0,0,1-14-3.39l-51.2-29.56c-4.11-2.38-6.38-5.66-6.38-9.24s2.27-6.85,6.38-9.23l59.32-34.25c6.5-3.75,12-13.26,12-20.77V150.1a2,2,0,0,1,4,0V337.83c0,9.06-6.14,19.71-14,24.24l-59.32,34.25c-2.82,1.63-4.38,3.67-4.38,5.76s1.56,4.14,4.38,5.77l51.2,29.56c6.61,3.82,17.37,3.82,24,0l37.75-21.78a2,2,0,1,1,2,3.46l-37.75,21.79A28.5,28.5,0,0,1,168.76,444.27Z"
-            style="fill: #37474f"></path>
-        </g>
-        <g id="freepik--exclamation-marks--inject-37">
-          <path
-            d="M78.92,78.31a1,1,0,0,1,.16-.79,1,1,0,0,1,.68-.45l4.86-.94a1,1,0,0,1,.8.16,1.09,1.09,0,0,1,.45.68l.75,3.9a1,1,0,0,1-.17.79,1,1,0,0,1-.67.46l-4.87.93a1,1,0,0,1-.79-.16,1,1,0,0,1-.45-.68ZM74.86,57.25A1.06,1.06,0,0,1,75.7,56l4.87-.94a1,1,0,0,1,.79.17,1,1,0,0,1,.45.67L85,72.57a1,1,0,0,1-.17.79,1,1,0,0,1-.67.45l-4.87.94a1,1,0,0,1-.79-.17,1,1,0,0,1-.45-.67Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M70.8,94.63a1.06,1.06,0,0,1,.08-1.5l3.69-3.31a1,1,0,0,1,.77-.26,1,1,0,0,1,.73.34l2.65,3a1.06,1.06,0,0,1-.08,1.5L75,97.67a1,1,0,0,1-.77.26,1,1,0,0,1-.73-.34Zm-14.31-16a1.07,1.07,0,0,1-.27-.77,1,1,0,0,1,.35-.73l3.69-3.31a1,1,0,0,1,.77-.27,1,1,0,0,1,.73.35L73.08,86.56a1,1,0,0,1,.26.77,1,1,0,0,1-.34.73l-3.7,3.31a1,1,0,0,1-.76.26,1,1,0,0,1-.74-.34Z"
-            style="fill: currentcolor"></path>
-          <g style="opacity: 0.6">
-            <path
-              d="M70.8,94.63a1.06,1.06,0,0,1,.08-1.5l3.69-3.31a1,1,0,0,1,.77-.26,1,1,0,0,1,.73.34l2.65,3a1.06,1.06,0,0,1-.08,1.5L75,97.67a1,1,0,0,1-.77.26,1,1,0,0,1-.73-.34Zm-14.31-16a1.07,1.07,0,0,1-.27-.77,1,1,0,0,1,.35-.73l3.69-3.31a1,1,0,0,1,.77-.27,1,1,0,0,1,.73.35L73.08,86.56a1,1,0,0,1,.26.77,1,1,0,0,1-.34.73l-3.7,3.31a1,1,0,0,1-.76.26,1,1,0,0,1-.74-.34Z"
-              style="fill: #fff"></path>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="freepik--error-404--inject-37">
-      <g id="freepik--Text--inject-37">
-        <path
-          d="M166,48a7.12,7.12,0,0,1,4.77,1.45,5.24,5.24,0,0,1,1.7,4.23,5.34,5.34,0,0,1-1.7,4.26A7.07,7.07,0,0,1,166,59.44H162v5.65a.66.66,0,0,1-.2.49.67.67,0,0,1-.48.2h-2.05a.68.68,0,0,1-.69-.69V48.71a.68.68,0,0,1,.69-.68ZM162,56.27h3.93a4.11,4.11,0,0,0,2.31-.57,2.19,2.19,0,0,0,.86-2,2.14,2.14,0,0,0-.86-2,4.29,4.29,0,0,0-2.31-.54H162Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M174.76,55.84a3.58,3.58,0,0,1,.47-1.14,4.24,4.24,0,0,1,1-1.14,5.61,5.61,0,0,1,1.65-.88,6.82,6.82,0,0,1,2.27-.34,7.36,7.36,0,0,1,2.33.34,5.13,5.13,0,0,1,1.79,1,4.38,4.38,0,0,1,1.15,1.66,6.13,6.13,0,0,1,.41,2.3v7.45a.67.67,0,0,1-.21.49.66.66,0,0,1-.48.2h-1.92a.68.68,0,0,1-.69-.69v-.83A4.13,4.13,0,0,1,181,65.51a5.48,5.48,0,0,1-2.55.52,6.15,6.15,0,0,1-2-.29,4,4,0,0,1-1.45-.82,3.74,3.74,0,0,1-.9-1.26,3.91,3.91,0,0,1-.31-1.58,3.3,3.3,0,0,1,1.24-2.74A7.21,7.21,0,0,1,178.44,58l4.13-.71a1.62,1.62,0,0,0-.68-1.47,3.22,3.22,0,0,0-1.7-.43,2.24,2.24,0,0,0-1,.18,2.81,2.81,0,0,0-.68.48,1.6,1.6,0,0,1-.42.28,1.16,1.16,0,0,1-.42.08h-2.36a.6.6,0,0,1-.43-.16A.39.39,0,0,1,174.76,55.84ZM179,63a4.55,4.55,0,0,0,1.53-.24,3.46,3.46,0,0,0,1.13-.65,2.68,2.68,0,0,0,.68-.91,2.42,2.42,0,0,0,.23-1V59.9l-3.45.6a3.67,3.67,0,0,0-1.49.52,1.09,1.09,0,0,0-.46.93.83.83,0,0,0,.55.79A3.14,3.14,0,0,0,179,63Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M195,68.31a3.89,3.89,0,0,0,1.09-.16,2.94,2.94,0,0,0,1-.52,3,3,0,0,0,.75-.9,2.75,2.75,0,0,0,.29-1.28v-.94a4.37,4.37,0,0,1-.53.49,4.06,4.06,0,0,1-.8.5,5.54,5.54,0,0,1-1.09.38,6.1,6.1,0,0,1-1.41.15,5.2,5.2,0,0,1-2.29-.49,5.36,5.36,0,0,1-1.75-1.32,6.17,6.17,0,0,1-1.14-1.9,6.9,6.9,0,0,1-.47-2.25c0-.25,0-.55,0-.88s0-.64,0-.89a6.9,6.9,0,0,1,.47-2.25,6.29,6.29,0,0,1,1.14-1.9A5.36,5.36,0,0,1,192,52.83a5.2,5.2,0,0,1,2.29-.49,6.1,6.1,0,0,1,1.41.15,5.54,5.54,0,0,1,1.09.38,4.06,4.06,0,0,1,.8.5,4.37,4.37,0,0,1,.53.49v-.58a.7.7,0,0,1,.68-.69h1.93a.72.72,0,0,1,.69.69V65.17a6,6,0,0,1-1.72,4.63A6.74,6.74,0,0,1,195,71.36a8,8,0,0,1-2.4-.35,6.51,6.51,0,0,1-1.91-.91,4.84,4.84,0,0,1-1.3-1.29,3,3,0,0,1-.53-1.49.57.57,0,0,1,.19-.48.71.71,0,0,1,.49-.2h1.73a.85.85,0,0,1,.61.24c.17.16.31.31.43.44a2.39,2.39,0,0,0,.9.71A4.21,4.21,0,0,0,195,68.31ZM192,58.48a6.74,6.74,0,0,0,0,1.42,3.37,3.37,0,0,0,1,2.37,3.15,3.15,0,0,0,2.1.72,3.07,3.07,0,0,0,2.09-.74,3,3,0,0,0,1-2.1,8.31,8.31,0,0,0,.05-1,8.5,8.5,0,0,0-.05-1,3,3,0,0,0-3.07-2.84,3.15,3.15,0,0,0-2.1.72A3.37,3.37,0,0,0,192,58.48Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M204.27,59.19a8.14,8.14,0,0,1,.44-2.68A6.32,6.32,0,0,1,206,54.33a5.82,5.82,0,0,1,2-1.46,6.58,6.58,0,0,1,5.15,0,6.06,6.06,0,0,1,2,1.39,6.35,6.35,0,0,1,1.26,2.06,7.06,7.06,0,0,1,.44,2.47v1.14a.62.62,0,0,1-.2.48.64.64,0,0,1-.48.21h-8.47a2.11,2.11,0,0,0,.24,1,2.24,2.24,0,0,0,.65.75,2.84,2.84,0,0,0,.94.46,3.93,3.93,0,0,0,1.09.15,4.25,4.25,0,0,0,1.31-.17,3,3,0,0,0,.84-.41,2.34,2.34,0,0,1,.46-.28,1.26,1.26,0,0,1,.48-.08h2a.71.71,0,0,1,.49.2.55.55,0,0,1,.19.49,2.19,2.19,0,0,1-.39.91,4.55,4.55,0,0,1-1.1,1.09,7.19,7.19,0,0,1-1.82.91,7.53,7.53,0,0,1-2.49.38,6.49,6.49,0,0,1-2.58-.49,5.44,5.44,0,0,1-2-1.41A6.19,6.19,0,0,1,204.71,62,8.38,8.38,0,0,1,204.27,59.19Zm6.22-3.81a3.19,3.19,0,0,0-1.26.22,2.56,2.56,0,0,0-.87.56,2.38,2.38,0,0,0-.55.76,2.59,2.59,0,0,0-.24.8h5.73a4.2,4.2,0,0,0-.19-.8,2,2,0,0,0-.46-.76,2.29,2.29,0,0,0-.83-.56A3.39,3.39,0,0,0,210.49,55.38Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M237.64,65.09a.68.68,0,0,1-.68.69H235a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49V58.65a3.82,3.82,0,0,0-.71-2.43,2.58,2.58,0,0,0-2.18-.91,2.61,2.61,0,0,0-2.11.91,3.62,3.62,0,0,0-.78,2.43v6.44a.66.66,0,0,1-.2.49.67.67,0,0,1-.48.2H226a.67.67,0,0,1-.48-.2.66.66,0,0,1-.2-.49V53.28a.62.62,0,0,1,.2-.48.64.64,0,0,1,.48-.21h1.93a.64.64,0,0,1,.48.21.62.62,0,0,1,.2.48v.58a5.77,5.77,0,0,1,1.55-1.09,4.71,4.71,0,0,1,2.1-.43,6.14,6.14,0,0,1,2.59.48,4.44,4.44,0,0,1,1.67,1.29,4.87,4.87,0,0,1,.9,1.89,9.35,9.35,0,0,1,.27,2.27Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M246.82,52.34a6.94,6.94,0,0,1,2.52.43A6.19,6.19,0,0,1,251.29,54a5.94,5.94,0,0,1,1.32,1.78,5.72,5.72,0,0,1,.57,2.18,4.51,4.51,0,0,1,0,.58v1.41a4.45,4.45,0,0,1,0,.57,6.4,6.4,0,0,1-.58,2.18,5.55,5.55,0,0,1-1.31,1.76,6.16,6.16,0,0,1-1.95,1.18,7.6,7.6,0,0,1-5,0,6.1,6.1,0,0,1-2-1.18,5.52,5.52,0,0,1-1.3-1.76,6.41,6.41,0,0,1-.59-2.18q0-.23,0-.57c0-.23,0-.46,0-.7s0-.47,0-.71,0-.43,0-.58a6.11,6.11,0,0,1,.57-2.18A5.94,5.94,0,0,1,242.34,54a6.13,6.13,0,0,1,2-1.19A6.94,6.94,0,0,1,246.82,52.34Zm3.07,5.7a3.38,3.38,0,0,0-.37-1.3,2.52,2.52,0,0,0-.72-.82,2.41,2.41,0,0,0-.94-.42,4.55,4.55,0,0,0-1-.12,4.48,4.48,0,0,0-1,.12,2.41,2.41,0,0,0-.94.42,2.31,2.31,0,0,0-.72.82,3.21,3.21,0,0,0-.37,1.3c0,.14,0,.31,0,.51s0,.42,0,.64,0,.43,0,.64a4.81,4.81,0,0,0,0,.5,3.17,3.17,0,0,0,.37,1.3,2.44,2.44,0,0,0,.72.83,2.74,2.74,0,0,0,.94.42,5.1,5.1,0,0,0,1,.11,5.17,5.17,0,0,0,1-.11,2.74,2.74,0,0,0,.94-.42,2.67,2.67,0,0,0,.72-.83,3.33,3.33,0,0,0,.37-1.3c0-.12,0-.29,0-.5V58.55C249.91,58.35,249.9,58.18,249.89,58Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M260.38,61a1.83,1.83,0,0,0,.42,1.26,2.06,2.06,0,0,0,1.56.47h1.55a.65.65,0,0,1,.48.2.66.66,0,0,1,.2.48v1.67a.68.68,0,0,1-.68.69H262a5.27,5.27,0,0,1-3.66-1.16,4.47,4.47,0,0,1-1.28-3.53V55.64h-1.68a.7.7,0,0,1-.68-.69V53.28a.7.7,0,0,1,.68-.69h1.68V48.46a.68.68,0,0,1,.68-.68h1.93a.65.65,0,0,1,.48.2.66.66,0,0,1,.2.48v4.13h3.27a.72.72,0,0,1,.69.69V55a.72.72,0,0,1-.69.69h-3.27Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M277,52.59h3.52a.67.67,0,0,1,.49.21.66.66,0,0,1,.2.48V55a.66.66,0,0,1-.2.48.67.67,0,0,1-.49.21H277v9.45a.68.68,0,0,1-.68.69h-1.93a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49V55.64H272a.63.63,0,0,1-.48-.21.62.62,0,0,1-.2-.48V53.28a.62.62,0,0,1,.2-.48.63.63,0,0,1,.48-.21h1.67V51.45a5.24,5.24,0,0,1,.36-2.06,3.41,3.41,0,0,1,1-1.39,4.2,4.2,0,0,1,1.59-.76,8.68,8.68,0,0,1,2.06-.22h2.06a.65.65,0,0,1,.48.2.66.66,0,0,1,.2.48v1.67a.68.68,0,0,1-.68.69H279a2.58,2.58,0,0,0-1.47.34,1.47,1.47,0,0,0-.51,1.31Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M289,52.34a6.94,6.94,0,0,1,2.52.43A6.19,6.19,0,0,1,293.43,54a5.94,5.94,0,0,1,1.32,1.78,5.72,5.72,0,0,1,.57,2.18,4.51,4.51,0,0,1,0,.58v1.41a4.45,4.45,0,0,1,0,.57,6.4,6.4,0,0,1-.58,2.18,5.55,5.55,0,0,1-1.31,1.76,6.16,6.16,0,0,1-1.95,1.18A6.94,6.94,0,0,1,289,66a7,7,0,0,1-2.53-.43,6.16,6.16,0,0,1-1.95-1.18,5.52,5.52,0,0,1-1.3-1.76,6.19,6.19,0,0,1-.59-2.18c0-.15,0-.34,0-.57s0-.46,0-.7,0-.47,0-.71,0-.43,0-.58a5.72,5.72,0,0,1,.57-2.18A5.94,5.94,0,0,1,284.48,54a6.19,6.19,0,0,1,1.95-1.19A7,7,0,0,1,289,52.34ZM292,58a3.38,3.38,0,0,0-.36-1.3,2.43,2.43,0,0,0-.73-.82,2.37,2.37,0,0,0-.93-.42,4.55,4.55,0,0,0-1-.12,4.42,4.42,0,0,0-1,.12,2.41,2.41,0,0,0-.94.42,2.31,2.31,0,0,0-.72.82,3.21,3.21,0,0,0-.37,1.3c0,.14,0,.31,0,.51s0,.42,0,.64,0,.43,0,.64a4.81,4.81,0,0,0,0,.5,3.17,3.17,0,0,0,.37,1.3,2.44,2.44,0,0,0,.72.83,2.74,2.74,0,0,0,.94.42,5,5,0,0,0,1,.11,5.17,5.17,0,0,0,1-.11,2.7,2.7,0,0,0,.93-.42,2.57,2.57,0,0,0,.73-.83,3.33,3.33,0,0,0,.36-1.3,3.25,3.25,0,0,0,0-.5V58.55A3.68,3.68,0,0,0,292,58Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M298.11,53.28a.7.7,0,0,1,.68-.69h1.93a.72.72,0,0,1,.69.69v6.44a4.14,4.14,0,0,0,.64,2.43,2.42,2.42,0,0,0,2.12.92,2.44,2.44,0,0,0,2.05-.92,3.82,3.82,0,0,0,.71-2.43V53.28a.72.72,0,0,1,.69-.69h1.92a.67.67,0,0,1,.49.21.66.66,0,0,1,.2.48V65.09a.68.68,0,0,1-.69.69h-1.92a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49v-.58a6.22,6.22,0,0,1-1.44,1,4.23,4.23,0,0,1-2.08.47,6,6,0,0,1-2.56-.48,4.19,4.19,0,0,1-1.62-1.29,5,5,0,0,1-.87-1.89,9.87,9.87,0,0,1-.25-2.27Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M326.1,65.09a.68.68,0,0,1-.68.69h-1.93a.66.66,0,0,1-.48-.2.67.67,0,0,1-.21-.49V58.65a3.82,3.82,0,0,0-.71-2.43,2.58,2.58,0,0,0-2.18-.91,2.61,2.61,0,0,0-2.11.91,3.62,3.62,0,0,0-.78,2.43v6.44a.66.66,0,0,1-.2.49.67.67,0,0,1-.48.2h-1.93a.67.67,0,0,1-.48-.2.66.66,0,0,1-.2-.49V53.28a.62.62,0,0,1,.2-.48.64.64,0,0,1,.48-.21h1.93a.64.64,0,0,1,.48.21.62.62,0,0,1,.2.48v.58a5.77,5.77,0,0,1,1.55-1.09,4.71,4.71,0,0,1,2.1-.43,6.14,6.14,0,0,1,2.59.48,4.44,4.44,0,0,1,1.67,1.29,4.87,4.87,0,0,1,.9,1.89,9.35,9.35,0,0,1,.27,2.27Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M334.54,52.34a6,6,0,0,1,1.41.15,5.54,5.54,0,0,1,1.09.38,4.06,4.06,0,0,1,.8.5,3.73,3.73,0,0,1,.53.49v-5.4a.68.68,0,0,1,.69-.68H341a.62.62,0,0,1,.48.2.63.63,0,0,1,.21.48V65.09a.67.67,0,0,1-.21.49.66.66,0,0,1-.48.2h-1.92a.68.68,0,0,1-.69-.69v-.58a3.73,3.73,0,0,1-.53.49,4.06,4.06,0,0,1-.8.5,5.54,5.54,0,0,1-1.09.38,6,6,0,0,1-1.41.15,5.2,5.2,0,0,1-2.29-.49,5.36,5.36,0,0,1-1.75-1.32,6.37,6.37,0,0,1-1.14-1.9,6.9,6.9,0,0,1-.47-2.25c0-.25,0-.55,0-.88s0-.64,0-.89a6.9,6.9,0,0,1,.47-2.25,6.49,6.49,0,0,1,1.14-1.9,5.36,5.36,0,0,1,1.75-1.32A5.2,5.2,0,0,1,334.54,52.34Zm-2.36,6.14a6.74,6.74,0,0,0,0,1.42,3.41,3.41,0,0,0,1,2.37,3.17,3.17,0,0,0,2.1.72,3.11,3.11,0,0,0,2.1-.74,3,3,0,0,0,1-2.1,8.31,8.31,0,0,0,.05-1,8.5,8.5,0,0,0-.05-1,3,3,0,0,0-3.07-2.84,3.17,3.17,0,0,0-2.1.72A3.41,3.41,0,0,0,332.18,58.48Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M196.44,90.76a.59.59,0,0,1,.44.19.6.6,0,0,1,.18.44v2.46a.6.6,0,0,1-.18.44.59.59,0,0,1-.44.19h-11a.58.58,0,0,1-.44-.19.61.61,0,0,1-.19-.44v-15a.61.61,0,0,1,.19-.44.58.58,0,0,1,.44-.19h10.83a.65.65,0,0,1,.63.63V81.3a.61.61,0,0,1-.19.45.6.6,0,0,1-.44.18h-7.16v2.51h6.65a.58.58,0,0,1,.44.19.61.61,0,0,1,.19.44v2.46a.61.61,0,0,1-.19.44.58.58,0,0,1-.44.19h-6.65v2.6Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M206.66,78.21a10.39,10.39,0,0,1,2.74.33,6,6,0,0,1,2.06,1,4.3,4.3,0,0,1,1.3,1.67,5.73,5.73,0,0,1,.45,2.35,5.37,5.37,0,0,1-.72,2.9,4.61,4.61,0,0,1-2,1.75l2.88,5.53a.56.56,0,0,1,.07.26.51.51,0,0,1-.51.51h-3.16a.87.87,0,0,1-.66-.21,2,2,0,0,1-.32-.42l-2.58-5H204v5a.6.6,0,0,1-.18.44.59.59,0,0,1-.44.19h-3a.59.59,0,0,1-.44-.19.6.6,0,0,1-.18-.44v-15a.6.6,0,0,1,.18-.44.59.59,0,0,1,.44-.19Zm-2.63,7h2.63a3.18,3.18,0,0,0,1.62-.37,1.43,1.43,0,0,0,.63-1.35,1.41,1.41,0,0,0-.63-1.34,3.18,3.18,0,0,0-1.62-.37H204Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M222.81,78.21a10.39,10.39,0,0,1,2.74.33,6,6,0,0,1,2.06,1,4.21,4.21,0,0,1,1.3,1.67,5.73,5.73,0,0,1,.45,2.35,5.37,5.37,0,0,1-.72,2.9,4.61,4.61,0,0,1-2,1.75l2.88,5.53a.56.56,0,0,1,.07.26.51.51,0,0,1-.51.51h-3.16a.87.87,0,0,1-.66-.21,2,2,0,0,1-.32-.42l-2.58-5h-2.13v5a.61.61,0,0,1-.19.44.59.59,0,0,1-.44.19h-3.05a.59.59,0,0,1-.44-.19.6.6,0,0,1-.18-.44v-15a.6.6,0,0,1,.18-.44.59.59,0,0,1,.44-.19Zm-2.62,7h2.62a3.18,3.18,0,0,0,1.62-.37,1.43,1.43,0,0,0,.63-1.35,1.41,1.41,0,0,0-.63-1.34,3.18,3.18,0,0,0-1.62-.37h-2.62Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M231.5,84.28a7.14,7.14,0,0,1,.57-2.45,5.8,5.8,0,0,1,1.42-2,6.62,6.62,0,0,1,2.23-1.35,9.4,9.4,0,0,1,6.05,0A6.72,6.72,0,0,1,244,79.83a5.77,5.77,0,0,1,1.41,2,6.71,6.71,0,0,1,.57,2.45c0,.66.05,1.36.05,2.09s0,1.41-.05,2a6.81,6.81,0,0,1-.57,2.46,6.1,6.1,0,0,1-1.41,2,6.54,6.54,0,0,1-2.25,1.34,9.58,9.58,0,0,1-6.05,0,6.45,6.45,0,0,1-2.23-1.34,6.13,6.13,0,0,1-1.42-2,7.25,7.25,0,0,1-.57-2.46c0-.63,0-1.31,0-2S231.47,84.94,231.5,84.28Zm10.2,4c0-.28,0-.59.05-.93s0-.69,0-1.05,0-.7,0-1,0-.63-.05-.9a3.57,3.57,0,0,0-.24-1.06,2.47,2.47,0,0,0-.56-.85,2.62,2.62,0,0,0-.89-.57,3.47,3.47,0,0,0-1.26-.21,3.37,3.37,0,0,0-1.25.21,2.57,2.57,0,0,0-.9.57,2.62,2.62,0,0,0-.56.85,3.57,3.57,0,0,0-.24,1.06q0,.4-.06.9c0,.33,0,.68,0,1s0,.71,0,1.05,0,.65.06.93a3.13,3.13,0,0,0,.8,1.93,2.79,2.79,0,0,0,2.15.76,2.75,2.75,0,0,0,2.14-.76A3.26,3.26,0,0,0,241.7,88.3Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M255.65,78.21a10.45,10.45,0,0,1,2.74.33,5.91,5.91,0,0,1,2.05,1,4.32,4.32,0,0,1,1.31,1.67,5.73,5.73,0,0,1,.45,2.35,5.37,5.37,0,0,1-.72,2.9,4.58,4.58,0,0,1-2.05,1.75l2.88,5.53a.59.59,0,0,1,.08.26.5.5,0,0,1-.16.36.49.49,0,0,1-.36.15h-3.16a.87.87,0,0,1-.66-.21,1.89,1.89,0,0,1-.31-.42l-2.58-5H253v5a.65.65,0,0,1-.63.63h-3a.65.65,0,0,1-.63-.63v-15a.65.65,0,0,1,.63-.63Zm-2.63,7h2.63a3.14,3.14,0,0,0,1.61-.37,1.41,1.41,0,0,0,.64-1.35,1.4,1.4,0,0,0-.64-1.34,3.14,3.14,0,0,0-1.61-.37H253Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M277.47,94.48a.61.61,0,0,1-.45-.19.6.6,0,0,1-.18-.44V91.48h-7.32a.6.6,0,0,1-.44-.18.61.61,0,0,1-.19-.45V88.39a1.63,1.63,0,0,1,.3-1l6.95-8.76a1.38,1.38,0,0,1,.38-.34,1.26,1.26,0,0,1,.48-.08h3.51a.58.58,0,0,1,.44.19.61.61,0,0,1,.19.44v8.92h2a.63.63,0,0,1,.44.19.6.6,0,0,1,.18.44v2.46a.64.64,0,0,1-.18.45.62.62,0,0,1-.44.18h-2v2.37a.61.61,0,0,1-.19.44.58.58,0,0,1-.44.19ZM277,87.76V83.49l-3.39,4.27Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M292.5,78a8,8,0,0,1,3,.51,6,6,0,0,1,2.08,1.37,5.62,5.62,0,0,1,1.23,2,8.82,8.82,0,0,1,.48,2.41c0,.66,0,1.36,0,2.09s0,1.41,0,2a8.82,8.82,0,0,1-.48,2.41,5.46,5.46,0,0,1-1.23,2,6,6,0,0,1-2.08,1.37,9.08,9.08,0,0,1-6,0,6,6,0,0,1-2.08-1.37,5.46,5.46,0,0,1-1.23-2,8.82,8.82,0,0,1-.48-2.41c0-.63,0-1.31,0-2s0-1.43,0-2.09a8.82,8.82,0,0,1,.48-2.41,5.62,5.62,0,0,1,1.23-2,6,6,0,0,1,2.08-1.37A8,8,0,0,1,292.5,78ZM295,88.3c.06-1.32.06-2.62,0-3.91a5.58,5.58,0,0,0-.18-1.06,2.31,2.31,0,0,0-.4-.85,2,2,0,0,0-.75-.57,2.8,2.8,0,0,0-1.16-.21,2.83,2.83,0,0,0-1.16.21,2,2,0,0,0-.75.57,2.49,2.49,0,0,0-.41.85,4.35,4.35,0,0,0-.17,1.06,36.43,36.43,0,0,0,0,3.91,5.75,5.75,0,0,0,.15,1.07,2.42,2.42,0,0,0,.42.85,2,2,0,0,0,.76.56,2.83,2.83,0,0,0,1.16.21,2.8,2.8,0,0,0,1.16-.21,2,2,0,0,0,.76-.56,2.42,2.42,0,0,0,.42-.85A5.75,5.75,0,0,0,295,88.3Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M309.79,94.48a.65.65,0,0,1-.63-.63V91.48h-7.32a.6.6,0,0,1-.44-.18.65.65,0,0,1-.19-.45V88.39a1.57,1.57,0,0,1,.31-1l6.94-8.76a1.27,1.27,0,0,1,.39-.34,1.17,1.17,0,0,1,.47-.08h3.51a.65.65,0,0,1,.63.63v8.92h2a.65.65,0,0,1,.63.63v2.46a.65.65,0,0,1-.19.45.6.6,0,0,1-.44.18h-2v2.37a.65.65,0,0,1-.63.63Zm-.51-6.72V83.49l-3.39,4.27Z"
-          style="fill: currentcolor"></path>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/icons/Icon500.vue b/frontend-pc/src/components/icons/Icon500.vue
deleted file mode 100644
index 91b82a2..0000000
--- a/frontend-pc/src/components/icons/Icon500.vue
+++ /dev/null
@@ -1,967 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <g id="freepik--Floor--inject-87">
-      <ellipse id="freepik--floor--inject-87" cx="250" cy="378.78" rx="230.68" ry="112.11" style="fill: #f5f5f5">
-      </ellipse>
-    </g>
-    <g id="freepik--Shadows--inject-87">
-      <path id="freepik--Shadow--inject-87"
-        d="M152.14,433.48a2,2,0,0,1-2-1.63l-.45-2.42a24.58,24.58,0,0,1-3.07-.75h-.07l-4.26,2a2.47,2.47,0,0,1-1,.21,2.42,2.42,0,0,1-1.21-.31l-4.24-2.45a1.68,1.68,0,0,1-.15-2.88l2.57-1.84a9.54,9.54,0,0,1-.64-1l-5.41-.34a1.94,1.94,0,0,1-1.81-1.93V417a1.94,1.94,0,0,1,1.82-1.93l5.4-.34a9.54,9.54,0,0,1,.64-1l-2.57-1.84a1.74,1.74,0,0,1-.74-1.48,1.71,1.71,0,0,1,.89-1.4l4.24-2.45a2.42,2.42,0,0,1,1.21-.31,2.31,2.31,0,0,1,1,.21l4.26,2h.05s0,0,0,0a26.67,26.67,0,0,1,3.11-.77l.45-2.41a2.05,2.05,0,0,1,2-1.64h6.24a2,2,0,0,1,2,1.64l.46,2.41a26.48,26.48,0,0,1,3.07.76H164l4.26-2a2.31,2.31,0,0,1,1-.21,2.42,2.42,0,0,1,1.21.31l4.24,2.45a1.71,1.71,0,0,1,.89,1.4,1.76,1.76,0,0,1-.74,1.48l-2.57,1.84a9.54,9.54,0,0,1,.64,1l5.4.34a1.94,1.94,0,0,1,1.82,1.93v3.16a1.94,1.94,0,0,1-1.82,1.93l-5.4.34a9.54,9.54,0,0,1-.64,1l2.57,1.84a1.76,1.76,0,0,1,.74,1.48,1.72,1.72,0,0,1-.89,1.4l-4.24,2.45a2.42,2.42,0,0,1-1.21.31h0a2.47,2.47,0,0,1-1-.21l-4.26-2h0s0,0,0,0a26,26,0,0,1-3.1.76l-.46,2.42a2,2,0,0,1-2,1.63Zm3.12-19.39a13.16,13.16,0,0,0-6.48,1.53c-1.45.84-2.28,1.91-2.28,2.95s.83,2.11,2.28,2.95a14.49,14.49,0,0,0,13,0c1.45-.84,2.28-1.91,2.28-2.95s-.83-2.11-2.28-2.95A13.16,13.16,0,0,0,155.26,414.09Z"
-        style="fill: #e6e6e6"></path>
-      <path id="freepik--shadow--inject-87"
-        d="M200.64,405.59a2.25,2.25,0,0,1-1.6-.7l-1.69-1.77-1.25,0c-.42,0-.83,0-1.24,0l-1.8,1.89a2,2,0,0,1-1.46.58,2.5,2.5,0,0,1-.54-.07l-4.2-1a1.84,1.84,0,0,1-1.24-1,1.6,1.6,0,0,1,0-1.37l.67-1.32c-.36-.2-.7-.41-1-.63l-4,.66a1.39,1.39,0,0,1-.3,0,2.14,2.14,0,0,1-1.69-.89l-1.59-2.21a1.84,1.84,0,0,1-.35-1,1.62,1.62,0,0,1,1.14-1.57l3.06-1a.66.66,0,0,1,0-.14l-2.95-.94a1.71,1.71,0,0,1-1.26-1.5v-.11a1.53,1.53,0,0,1,.3-.92l1.73-2.42a2,2,0,0,1,1.63-.77,2,2,0,0,1,.35,0l3.91.66c.28-.19.59-.38.91-.56l.12-.07-.62-1.23a1.62,1.62,0,0,1-.19-.69l0-.21,0-.11a1.65,1.65,0,0,1,1.25-1.41l4.39-1a1.49,1.49,0,0,1,.43-.05,2.22,2.22,0,0,1,1.59.7l1.7,1.77c.42,0,.85,0,1.27,0s.81,0,1.21,0l1.8-1.89a2,2,0,0,1,1.46-.58,1.88,1.88,0,0,1,.53.07l4.21,1a1.71,1.71,0,0,1,1.38,1.63,1.41,1.41,0,0,1-.15.69l-.68,1.35.14.08a10.26,10.26,0,0,1,.88.55l4-.66a1.36,1.36,0,0,1,.29,0,2.17,2.17,0,0,1,1.7.88l1.59,2.22a1.73,1.73,0,0,1,.35,1v.18l0,.12a1.62,1.62,0,0,1-1.1,1.3l-3.08,1v.14l3,.93a1.72,1.72,0,0,1,1,2.53c-.51.79-1.1,1.53-1.64,2.29l-.09.13a2,2,0,0,1-1.63.77l-.36,0-3.9-.65c-.33.22-.67.43-1,.63l.62,1.23a1.67,1.67,0,0,1,0,1.51,1.63,1.63,0,0,1-1.13.91l-4.36,1.05A2.06,2.06,0,0,1,200.64,405.59ZM190,395a3.29,3.29,0,0,0,.83.84,4.32,4.32,0,0,0,.5.33,7.8,7.8,0,0,0,2.12.81,11.25,11.25,0,0,0,2.62.3,9.87,9.87,0,0,0,4.73-1.1,5.65,5.65,0,0,0,.51-.33,3.16,3.16,0,0,0,.76-.74,1.35,1.35,0,0,0,.13-1.6l-.08-.12-.1-.15-.11-.13,0,0,0,0,0,0a6.51,6.51,0,0,0-3.11-1.56,11.32,11.32,0,0,0-2.62-.3c-2.62,0-5.09.89-6,2.17a1.37,1.37,0,0,0-.23,1.38l0,.11.11.19Z"
-        style="fill: #e6e6e6"></path>
-      <path id="freepik--shadow--inject-87"
-        d="M257.82,424.33l35.88-20.72a1.17,1.17,0,0,0,0-2.22l-8.8-5.08a4.28,4.28,0,0,0-3.85,0L245.18,417a1.17,1.17,0,0,0,0,2.22l4.39,2.54-45,26c-1.06.61-.61.82-.12,1.11s.87.54,1.93-.07l45-26,2.59,1.5A4.28,4.28,0,0,0,257.82,424.33Z"
-        style="fill: #e6e6e6"></path>
-      <path id="freepik--shadow--inject-87"
-        d="M244.29,384.57a16.13,16.13,0,0,1-8-1.95c-.25-.15-.49-.3-.72-.46l-1.32-.93,11.29-1.66,1-2.13-3.05-1.79-10.76,1.58.35-1a7,7,0,0,1,3.31-3.56,16.27,16.27,0,0,1,7.9-1.88,18.75,18.75,0,0,1,3.62.35l36.81-21.25a4.43,4.43,0,0,1-.31-3,6.67,6.67,0,0,1,3.42-4,16.34,16.34,0,0,1,7.91-1.88,16.14,16.14,0,0,1,8,2c.26.15.49.3.72.46l1.33.93-11.29,1.65-1,2.14,3.05,1.78,10.76-1.57-.35,1a7,7,0,0,1-3.31,3.55,16.27,16.27,0,0,1-7.9,1.88,18.83,18.83,0,0,1-3.62-.34l-36.81,21.25a4.35,4.35,0,0,1,.31,3,6.64,6.64,0,0,1-3.42,3.95A16.17,16.17,0,0,1,244.29,384.57Z"
-        style="fill: #e6e6e6"></path>
-      <ellipse id="freepik--shadow--inject-87" cx="387.02" cy="400.95" rx="57.04" ry="32.93" style="fill: #e6e6e6">
-      </ellipse>
-      <polygon id="freepik--shadow--inject-87"
-        points="143.07 320.2 205.13 356.03 263.01 322.5 200.95 286.68 143.07 320.2" style="fill: #e6e6e6"></polygon>
-      <polygon id="freepik--shadow--inject-87" points="119.51 407 203.19 358.69 129.97 316.42 46.3 364.73 119.51 407"
-        style="fill: #e6e6e6"></polygon>
-    </g>
-    <g id="freepik--Gate--inject-87">
-      <g id="freepik--gate--inject-87">
-        <polygon
-          points="205.12 353.37 146.37 319.44 146.37 316.88 200.37 285.7 259.12 319.62 259.12 322.19 205.12 353.37"
-          style="fill: currentcolor"></polygon>
-        <polygon points="146.37 316.88 205.12 350.8 259.12 319.62 200.37 285.7 146.37 316.88"
-          style="fill: currentcolor"></polygon>
-        <polygon points="146.37 316.88 205.12 350.8 259.12 319.62 200.37 285.7 146.37 316.88" style="opacity: 0.15">
-        </polygon>
-        <path
-          d="M219.68,331a4.34,4.34,0,0,0,3.94,0,1.2,1.2,0,0,0,0-2.27,4.34,4.34,0,0,0-3.94,0A1.2,1.2,0,0,0,219.68,331Z"
-          style="fill: #37474f"></path>
-        <polygon points="205.12 350.8 205.12 353.37 146.37 319.44 146.37 316.88 205.12 350.8" style="opacity: 0.3">
-        </polygon>
-      </g>
-    </g>
-    <g id="freepik--Server--inject-87">
-      <g id="freepik--server--inject-87">
-        <path
-          d="M128.34,115.9l65.46,37.79a4.85,4.85,0,0,1,2.19,3.79V356.29a4.85,4.85,0,0,1-2.19,3.8L123,401a4.83,4.83,0,0,1-4.38,0L53.16,363.17A4.83,4.83,0,0,1,51,359.38V160.57a4.85,4.85,0,0,1,2.19-3.8L124,115.9A4.83,4.83,0,0,1,128.34,115.9Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M51,160.56V359.38a4.87,4.87,0,0,0,2.19,3.79L118.62,401a4.36,4.36,0,0,0,2.19.53V197.62a4.49,4.49,0,0,1-2.19-.53L53.16,159.3l-.6-.5-.78-.64A4.57,4.57,0,0,0,51,160.56Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M51,160.56V359.38a4.87,4.87,0,0,0,2.19,3.79L118.62,401a4.36,4.36,0,0,0,2.19.53V197.62a4.49,4.49,0,0,1-2.19-.53L53.16,159.3l-.6-.5-.78-.64A4.57,4.57,0,0,0,51,160.56Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M53.16,156.77,124,115.9a4.81,4.81,0,0,1,4.37,0l65.46,37.79a1.34,1.34,0,0,1,0,2.53L123,197.1a4.89,4.89,0,0,1-4.38,0L53.16,159.3A1.34,1.34,0,0,1,53.16,156.77Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M53.16,156.77,124,115.9a4.81,4.81,0,0,1,4.37,0l65.46,37.79a1.34,1.34,0,0,1,0,2.53L123,197.1a4.89,4.89,0,0,1-4.38,0L53.16,159.3A1.34,1.34,0,0,1,53.16,156.77Z"
-          style="opacity: 0.15"></path>
-        <polygon points="188.13 291.62 129.38 325.54 129.38 387.89 188.13 353.97 188.13 291.62" style="fill: #455a64">
-        </polygon>
-        <path
-          d="M159.26,336.16a.62.62,0,0,0-.61.06L134.75,350a1.79,1.79,0,0,0-.61.64l-1.6-.93a1.77,1.77,0,0,1,.6-.64l23.4-13.45a1.85,1.85,0,0,1,1.71,0Z"
-          style="fill: #263238"></path>
-        <path
-          d="M133.89,351.46v26.77c0,.55.39.77.86.5L158.65,365a1.9,1.9,0,0,0,.86-1.48V336.72c0-.55-.39-.77-.86-.5L134.75,350A1.89,1.89,0,0,0,133.89,351.46Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M134.12,378.78l-1-.57a1.89,1.89,0,0,1-.85-1.48v-26.2a1.7,1.7,0,0,1,.25-.85l1.6.93a1.81,1.81,0,0,0-.25.85v26.77A.65.65,0,0,0,134.12,378.78Z"
-          style="fill: #263238"></path>
-        <path
-          d="M135.8,376.32a.46.46,0,0,1-.2-.05.51.51,0,0,1-.22-.46V352a1.34,1.34,0,0,1,.61-1l21.31-12.25a.5.5,0,0,1,.51,0,.51.51,0,0,1,.22.46v23.79a1.32,1.32,0,0,1-.6,1.05l-21.31,12.25A.64.64,0,0,1,135.8,376.32Zm21.8-37.44a.41.41,0,0,0-.18.05L136.1,351.19a1.08,1.08,0,0,0-.48.83v23.79c0,.12,0,.21.09.24a.26.26,0,0,0,.26,0h0l21.31-12.25a1.08,1.08,0,0,0,.48-.83V339.14c0-.12,0-.21-.09-.24A.12.12,0,0,0,157.6,338.88Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M137.48,373.19a.21.21,0,0,1-.12,0,.26.26,0,0,1-.13-.25V352.72a.72.72,0,0,1,.29-.5l18.21-10.49a.28.28,0,0,1,.29,0,.29.29,0,0,1,.13.26l0,20.22a.64.64,0,0,1-.29.51l-18.19,10.45A.32.32,0,0,1,137.48,373.19Zm0-.24Zm18.4-31h0l-18.22,10.5a.5.5,0,0,0-.16.28V373l0,0,18.18-10.45a.39.39,0,0,0,.17-.29h0l0-20.22A.06.06,0,0,0,155.89,341.93Z"
-          style="fill: currentcolor"></path>
-        <path d="M138.71,346.89a.25.25,0,0,1-.24-.25v-5.7a.24.24,0,1,1,.48,0v5.7A.25.25,0,0,1,138.71,346.89Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M142.7,344.6a.24.24,0,0,1-.24-.24v-5.71a.24.24,0,0,1,.24-.24.24.24,0,0,1,.24.24v5.71A.24.24,0,0,1,142.7,344.6Z"
-          style="fill: currentcolor"></path>
-        <path d="M146.69,342.31a.24.24,0,0,1-.25-.24v-5.7a.25.25,0,0,1,.49,0v5.7A.24.24,0,0,1,146.69,342.31Z"
-          style="fill: currentcolor"></path>
-        <path d="M150.67,340a.24.24,0,0,1-.24-.24v-5.71a.25.25,0,0,1,.49,0v5.71A.25.25,0,0,1,150.67,340Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M154.66,337.74a.24.24,0,0,1-.24-.24v-5.7a.24.24,0,0,1,.24-.24.23.23,0,0,1,.24.24v5.7A.23.23,0,0,1,154.66,337.74Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M159.26,315.1a.6.6,0,0,0-.61.06l-23.9,13.75a1.84,1.84,0,0,0-.61.63l-1.6-.92a1.69,1.69,0,0,1,.6-.64l23.4-13.46a1.91,1.91,0,0,1,1.71,0Z"
-          style="fill: #263238"></path>
-        <path
-          d="M133.89,330.39v13.5c0,.55.39.77.86.5l23.9-13.75a1.9,1.9,0,0,0,.86-1.48V315.65c0-.54-.39-.76-.86-.49l-23.9,13.75A1.88,1.88,0,0,0,133.89,330.39Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M134.12,344.44l-1-.57a1.89,1.89,0,0,1-.85-1.48V329.46a1.7,1.7,0,0,1,.25-.84l1.6.92a1.84,1.84,0,0,0-.25.85V343.9A.64.64,0,0,0,134.12,344.44Z"
-          style="fill: #263238"></path>
-        <path
-          d="M135.8,342a.46.46,0,0,1-.2-.05.51.51,0,0,1-.22-.46V331a1.34,1.34,0,0,1,.61-1l21.31-12.26a.46.46,0,0,1,.73.43v10.51a1.32,1.32,0,0,1-.6,1.05l-21.31,12.25A.64.64,0,0,1,135.8,342Zm21.8-24.17a.32.32,0,0,0-.18.06L136.1,330.13a1.08,1.08,0,0,0-.48.83v10.51c0,.12,0,.21.09.24a.26.26,0,0,0,.26,0h0l21.31-12.25a1.08,1.08,0,0,0,.48-.83V318.08a.29.29,0,0,0-.09-.25Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M137.48,338.86a.21.21,0,0,1-.12,0,.26.26,0,0,1-.13-.25v-6.91a.76.76,0,0,1,.29-.51l18.21-10.49a.3.3,0,0,1,.29,0,.27.27,0,0,1,.13.25l0,7a.64.64,0,0,1-.29.51l-18.19,10.45A.33.33,0,0,1,137.48,338.86Zm0-.25Zm18.4-17.75,0,0-18.22,10.49a.56.56,0,0,0-.16.29v6.95l0,0,18.18-10.45a.39.39,0,0,0,.17-.29h0l0-7S155.89,320.87,155.89,320.86Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,312.35a3.14,3.14,0,0,0-1.42,2.45c0,.9.64,1.26,1.42.81a3.14,3.14,0,0,0,1.41-2.44C165.5,312.27,164.86,311.9,164.09,312.35Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,336.35a3.14,3.14,0,0,0-1.42,2.45c0,.9.64,1.26,1.42.81a3.14,3.14,0,0,0,1.41-2.44C165.5,336.27,164.86,335.9,164.09,336.35Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,342.81a3.12,3.12,0,0,0-1.42,2.44c0,.9.64,1.26,1.42.81a3.12,3.12,0,0,0,1.41-2.44C165.5,342.72,164.86,342.36,164.09,342.81Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,349.26a3.14,3.14,0,0,0-1.42,2.45c0,.89.64,1.26,1.42.81a3.14,3.14,0,0,0,1.41-2.44C165.5,349.18,164.86,348.81,164.09,349.26Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,355.72a3.12,3.12,0,0,0-1.42,2.44c0,.9.64,1.26,1.42.81a3.14,3.14,0,0,0,1.41-2.44C165.5,355.63,164.86,355.27,164.09,355.72Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,318.18a3.14,3.14,0,0,0-1.42,2.45c0,.9.64,1.26,1.42.81A3.14,3.14,0,0,0,165.5,319C165.5,318.1,164.86,317.73,164.09,318.18Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164.09,324a3.14,3.14,0,0,0-1.42,2.45c0,.9.64,1.26,1.42.81a3.14,3.14,0,0,0,1.41-2.44C165.5,323.93,164.86,323.56,164.09,324Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M179.52,315.4l-.14-1.31a.14.14,0,0,0-.18-.13,2.94,2.94,0,0,1-.65.07.3.3,0,0,0-.26.13l-.29.43,1.54.88A.14.14,0,0,1,179.52,315.4Zm1.11-9.18a3,3,0,0,1,0,.31,5,5,0,0,1-2.28,4l-.28.15c.14,1.22,1.1,1.67,2.26,1a5,5,0,0,0,2.28-3.95C182.63,306.33,181.76,305.73,180.63,306.22Zm4.94-1.16-1.55-.9-.23.47a.33.33,0,0,0,0,.29,3,3,0,0,1,.27.6.14.14,0,0,0,.2.09l1.2-.53a.12.12,0,0,1,.1,0Zm-3-3.42-.87-.51h-.13l0,0s0,0,0,0l0,0-.71,1.07-.9-.52h0l-.65-.38h0l-.07,0-.93.54-.42.24-.05,0,0,.06,0,0,0,0h0a.41.41,0,0,0,0,.08l-.13,1.51a.17.17,0,0,1,0,.05.11.11,0,0,1,0,.05.61.61,0,0,1-.11.18,8.13,8.13,0,0,0-.76.79.14.14,0,0,1-.11.07.26.26,0,0,1-.15,0l-.87-.3h-.15l-.05,0,0,0-.41.71-.43.75-.15.26a.21.21,0,0,0,0,.13.23.23,0,0,0,.07.13l.7.6.05.07a.23.23,0,0,1,0,.11.19.19,0,0,1,0,.08,8.41,8.41,0,0,0-.32,1.05.51.51,0,0,1-.08.17l-.09.1-1.23.86s-.06.06-.09.1a.34.34,0,0,0,0,.17v1.56a.12.12,0,0,0,0,.1l1.57.9-.57,1.15a.18.18,0,0,0,.07.23l1.9,1.1.08,0a.46.46,0,0,1-.07-.07.2.2,0,0,1,0-.17l.8-1.61a.14.14,0,0,0,0-.07.29.29,0,0,0,0-.22,3.29,3.29,0,0,1-.26-.6.14.14,0,0,0-.2-.09l-.61.27-.6.27a.09.09,0,0,1-.1,0,.1.1,0,0,1-.05-.1v-1.56a.33.33,0,0,1,.05-.16s0-.08.09-.1l1.23-.87a.32.32,0,0,0,.1-.1.37.37,0,0,0,.07-.16,8.41,8.41,0,0,1,.32-1.05.25.25,0,0,0,0-.09.27.27,0,0,0-.08-.18l-.7-.6a.16.16,0,0,1-.06-.12.2.2,0,0,1,0-.13l.29-.49.34-.61.36-.62a.25.25,0,0,1,.16-.1h.09l.86.3a.22.22,0,0,0,.16,0,.26.26,0,0,0,.11-.07,8.22,8.22,0,0,1,.75-.8.42.42,0,0,0,.11-.17.23.23,0,0,0,0-.11l.14-1.5a.24.24,0,0,1,0-.08.34.34,0,0,1,.14-.17l.25-.15.54-.31.56-.32a.1.1,0,0,1,.09,0h0s.05.05.06.09l.07.69.06.62a.14.14,0,0,0,.18.13,3,3,0,0,1,.65-.07.24.24,0,0,0,.19-.06.16.16,0,0,0,.07-.07l1-1.5a.17.17,0,0,1,.23-.05Z"
-          style="fill: #263238"></path>
-        <path
-          d="M179.54,303.46a.24.24,0,0,0,0,.08l-.14,1.5a.23.23,0,0,1,0,.11l-2-1.15h0l0-.05a.17.17,0,0,0,0-.05l.13-1.51a.41.41,0,0,1,0-.08Z"
-          style="opacity: 0.1"></path>
-        <path d="M178.38,306.19a.22.22,0,0,1-.16,0l-.86-.3h-.09l-2-1.13h.06l.87.3a.26.26,0,0,0,.15,0Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M176.94,308.73l-2-1.14h0s0-.06,0-.1l-.05-.07-.7-.6a.23.23,0,0,1-.07-.13l2,1.15a.16.16,0,0,0,.06.12l.7.6A.27.27,0,0,1,176.94,308.73Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M176.93,313.29a.14.14,0,0,1,0,.07l-.8,1.61a.2.2,0,0,0,0,.17v0h0l-1.89-1.1a.18.18,0,0,1-.07-.23l.57-1.15.42.24h0a.09.09,0,0,0,.1,0l.6-.27Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M179.52,315.4a.14.14,0,0,0,0,.07l-1.54-.88.29-.43a.3.3,0,0,1,.26-.13,2.94,2.94,0,0,0,.65-.07.14.14,0,0,1,.18.13Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M183.64,302.28a.17.17,0,0,0-.23.05l-1,1.5a.16.16,0,0,1-.07.07l-.56-.32-.52-.3-.07-.69s0-.08-.06-.09h0l-.4-.24.71-1.07,0,0s0,0,0,0l0,0h0a.22.22,0,0,1,.11,0l.87.51Z"
-          style="opacity: 0.1"></path>
-        <path d="M176.54,310a.32.32,0,0,1-.1.1l-1.23.87s-.06.06-.09.1l-2-1.15s.05-.08.09-.1l1.23-.86.09-.1Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M185.48,305.07l-1.2.54a.14.14,0,0,1-.2-.09,3,3,0,0,0-.27-.6.33.33,0,0,1,0-.29l.8-1.61a.19.19,0,0,0-.07-.24l-.87-.5a.18.18,0,0,0-.24.05l-1,1.5a.3.3,0,0,1-.26.13,3,3,0,0,0-.65.07.14.14,0,0,1-.18-.13l-.13-1.31a.1.1,0,0,0-.16-.08l-1.35.78a.33.33,0,0,0-.16.25l-.14,1.5a.47.47,0,0,1-.14.28,8.22,8.22,0,0,0-.75.8.27.27,0,0,1-.27.07l-.86-.3a.22.22,0,0,0-.25.09l-1,1.72a.21.21,0,0,0,0,.25l.7.6a.27.27,0,0,1,.07.27,8.41,8.41,0,0,0-.32,1.05.41.41,0,0,1-.17.26l-1.23.87a.34.34,0,0,0-.14.26v1.56a.1.1,0,0,0,.15.1l1.21-.54a.14.14,0,0,1,.2.09,3.29,3.29,0,0,0,.26.6.3.3,0,0,1,0,.29l-.8,1.61a.19.19,0,0,0,.07.24l.87.5a.18.18,0,0,0,.24,0l1-1.5a.3.3,0,0,1,.26-.13,2.94,2.94,0,0,0,.65-.07.14.14,0,0,1,.18.13l.14,1.31c0,.09.07.13.16.08l1.35-.78a.38.38,0,0,0,.16-.25l.13-1.5a.47.47,0,0,1,.14-.28,7.16,7.16,0,0,0,.75-.8.27.27,0,0,1,.27-.07l.87.3a.21.21,0,0,0,.24-.09l1-1.72a.2.2,0,0,0,0-.25l-.7-.6a.27.27,0,0,1-.07-.27,8.41,8.41,0,0,0,.32-1.05.46.46,0,0,1,.17-.26l1.23-.87a.34.34,0,0,0,.14-.26v-1.56A.1.1,0,0,0,185.48,305.07Zm-5.13,6.56c-1.26.73-2.28.14-2.28-1.32a5,5,0,0,1,2.28-3.95c1.26-.73,2.28-.14,2.28,1.32A5,5,0,0,1,180.35,311.63Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M176.19,318.62l-.06,0,0,0h0l-.32-.18-.91-.53,0,0-.08,0h-.12l-.85.08h-.08l0,0,0,0,0,0s0,0,0,0l-.46,1.23a.23.23,0,0,1-.07.1l-.11.08-.28.14-.88-.51h0a.16.16,0,0,0-.09,0l-.66.7-.27.28a.13.13,0,0,0,0,.06l0,.06a.11.11,0,0,0,0,.05v0l.26.88s0,.07,0,.11a.42.42,0,0,1,0,.1,6.17,6.17,0,0,0-.43.74.24.24,0,0,1-.1.1.24.24,0,0,1-.1.05l-.8.2-.06,0a.1.1,0,0,0-.05,0l0,0a.07.07,0,0,0,0,.06l-.3,1-.1.36c0,.05,0,.08,0,.1h0l.53.31.07,0,.29.16h0c0,.12,0,.24,0,.36a.28.28,0,0,1-.07.21l-.81,1a.34.34,0,0,0,0,.11h0a.12.12,0,0,0,0,.1l.38.84,0,0h0l1.61.94.08,0v0l0-.08-.19-.41-.16-.36a.2.2,0,0,1,0-.11.14.14,0,0,1,.05-.09l.81-1a.31.31,0,0,0,0-.1.3.3,0,0,0,0-.12,4.09,4.09,0,0,1,0-.7.12.12,0,0,0-.12-.12l-.73,0-.06,0h0a.09.09,0,0,1,0-.09l.18-.61,0,0,.2-.7,0-.06a.26.26,0,0,1,.15-.09l.8-.2a.16.16,0,0,0,.1-.05.19.19,0,0,0,.1-.1,7.89,7.89,0,0,1,.43-.74.3.3,0,0,0,0-.1.22.22,0,0,0,0-.11l-.26-.88a.17.17,0,0,1,0-.1h0a.17.17,0,0,1,.06-.1l.63-.67.3-.32s.1-.06.13,0h0l0,0,.43.66s.11,0,.18,0a4.26,4.26,0,0,1,.53-.31.27.27,0,0,0,.1-.06.26.26,0,0,0,.08-.11l.46-1.24,0-.06.31-.08.68-.07h.07Zm-3.6,9a.13.13,0,0,0-.08-.15,1.51,1.51,0,0,1-.37-.22.18.18,0,0,0-.2,0l-.86.79a.21.21,0,0,1-.1,0l.85.49.53.31a.09.09,0,0,1,0-.08Zm3.8-8.92a.1.1,0,0,1,0,.09l-.27,1.21a.14.14,0,0,0,.09.15,2,2,0,0,1,.37.22s.12,0,.19,0l.86-.8c.05,0,.1-.05.13,0Zm-1.13,9-.43-.66c0-.05-.11-.05-.18,0l-.26.16.89.52Zm.69-5.51a.85.85,0,0,0-.67-.53h-.1a1.39,1.39,0,0,0-.6.13,1.69,1.69,0,0,1,0,.23,3.74,3.74,0,0,1-1.71,2.95l-.19.11a1.24,1.24,0,0,0,.11.44.84.84,0,0,0,.8.54h.33a2.42,2.42,0,0,0,1.1-.72A3.23,3.23,0,0,0,176,322.19Zm1.34,0c0,.12,0,.23,0,.34a.12.12,0,0,0,.13.12l.72,0,.06,0Z"
-          style="fill: #263238"></path>
-        <path d="M175.26,327.7l0,0-.89-.52.26-.16c.07-.05.15-.05.18,0Z" style="opacity: 0.15"></path>
-        <path
-          d="M172.32,328.88a.09.09,0,0,0,0,.08l-.53-.31-.85-.49a.21.21,0,0,0,.1,0l.86-.79a.18.18,0,0,1,.2,0,1.51,1.51,0,0,0,.37.22.13.13,0,0,1,.08.15Z"
-          style="opacity: 0.1"></path>
-        <path
-          d="M171.46,326a.28.28,0,0,1-.06.09l-.82,1a.18.18,0,0,0,0,.1l-1.71-1a.51.51,0,0,1,0-.12l.81-1s0-.06.05-.08Z"
-          style="opacity: 0.1"></path>
-        <path
-          d="M171.47,325.17c0,.24,0,.47,0,.7a.26.26,0,0,1,0,.12l-1.72-1a.21.21,0,0,0,0-.13c0-.12,0-.24,0-.36l.8.47h0l.06,0,.73,0A.12.12,0,0,1,171.47,325.17Z"
-          style="opacity: 0.05"></path>
-        <path
-          d="M172,323.15a.19.19,0,0,1-.11,0l-.8.2a.23.23,0,0,0-.15.1l-1.71-1,0,0s0,0,.05,0l.06,0,.8-.19a.27.27,0,0,0,.1-.06Z"
-          style="opacity: 0.1"></path>
-        <path
-          d="M172.59,322.09a.22.22,0,0,1,0,.11l-1.71-1a.24.24,0,0,0,0-.12l-.26-.88a0,0,0,0,1,0,0s0,0,0-.05l1.72,1a.38.38,0,0,0,0,.1Z"
-          style="opacity: 0.1"></path>
-        <path d="M175.32,318.88l0,.06-.45,1.23a.31.31,0,0,1-.09.12l-1.72-1,0,0,.07-.09.47-1.24,0,0s0,0,0,0Z"
-          style="opacity: 0.1"></path>
-        <path d="M175.32,318.88a.27.27,0,0,1,.14-.07h.17" style="fill: none"></path>
-        <path
-          d="M178.18,322.71l-.06,0-.72,0a.12.12,0,0,1-.13-.12c0-.11,0-.22,0-.34s0-.24,0-.36a.34.34,0,0,1,.08-.21l.82-1a.22.22,0,0,0,0-.2l-.38-.85,0,0s-.08,0-.13,0l-.86.8c-.07.05-.15.07-.19,0a2,2,0,0,0-.37-.22.14.14,0,0,1-.09-.15l.27-1.21a.1.1,0,0,0,0-.09.11.11,0,0,0-.08,0l-.68.07h-.17a.27.27,0,0,0-.14.07l0,.06-.46,1.24a.26.26,0,0,1-.08.11.27.27,0,0,1-.1.06,4.26,4.26,0,0,0-.53.31c-.07,0-.15,0-.18,0l-.43-.66,0,0s-.08,0-.13,0l-.3.32-.63.67a.26.26,0,0,0-.07.1.17.17,0,0,0,0,.1l.26.88a.22.22,0,0,1,0,.11.3.3,0,0,1,0,.1,7.89,7.89,0,0,0-.43.74.19.19,0,0,1-.1.1.16.16,0,0,1-.1.05l-.8.2a.26.26,0,0,0-.15.09l0,.06-.2.7,0,0-.18.61a.09.09,0,0,0,0,.09h0l.06,0,.73,0a.12.12,0,0,1,.12.12,4.09,4.09,0,0,0,0,.7.3.3,0,0,1,0,.12.31.31,0,0,1,0,.1l-.81,1a.23.23,0,0,0-.05.2l.16.36,0,.05.05.11.07.14,0,.13,0,.06v0s0,0,0,0a.21.21,0,0,0,.1,0l.86-.79a.18.18,0,0,1,.2,0,1.51,1.51,0,0,0,.37.22.13.13,0,0,1,.08.15l-.27,1.22a.09.09,0,0,0,0,.08.11.11,0,0,0,.08,0l.85-.08a.27.27,0,0,0,.19-.13l.46-1.23a.32.32,0,0,1,.18-.18l.27-.15.26-.16c.07-.05.15-.05.18,0l.43.66,0,0a.12.12,0,0,0,.14,0l.93-1a.21.21,0,0,0,.07-.2l-.26-.88a.34.34,0,0,1,.05-.21,7.89,7.89,0,0,0,.43-.74.28.28,0,0,1,.2-.15l.8-.19a.31.31,0,0,0,.18-.15l.4-1.36A.08.08,0,0,0,178.18,322.71Zm-4.25,3.3h-.33a.84.84,0,0,1-.8-.54,1.24,1.24,0,0,1-.11-.44,2.11,2.11,0,0,1,0-.25,3.83,3.83,0,0,1,1.05-2.41,2.75,2.75,0,0,1,.65-.52l.21-.11a1.39,1.39,0,0,1,.6-.13h.1a.85.85,0,0,1,.67.53,3.23,3.23,0,0,1-.92,3.1A2.42,2.42,0,0,1,173.93,326Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M175.34,341.7a6.41,6.41,0,0,0-3.62,3,5.94,5.94,0,0,0,.19,5.64,6.5,6.5,0,0,0-1,3.49,7.74,7.74,0,0,0,5.1,6.89l.29.1.87-.5a8.29,8.29,0,0,1-4.68-4.3,5.85,5.85,0,0,1,.15-4.59A7.35,7.35,0,0,0,174.3,353c1.74,1.14,5.13,2,6.72.17a2.84,2.84,0,0,0-.13-3.71,5.56,5.56,0,0,0-4-1.87,5.62,5.62,0,0,0-4.16,1.75,5.46,5.46,0,0,1-.41-2.58,4.92,4.92,0,0,1,3.52-4.13c1.44,2.24,4.62,4.28,7.07,2.37s-1.46-3.64-3.1-3.79a10.71,10.71,0,0,0-3.39.19,3.68,3.68,0,0,1-.22-2,4.39,4.39,0,0,1,1.67-2.6,5.6,5.6,0,0,1,6.6-.4.36.36,0,1,0,.46-.56C181,332.24,173.28,336.65,175.34,341.7Zm-.62,7.42a4.17,4.17,0,0,1,3.69-.17c1,.45,2.2,1.4,2,2.66-.28,2.19-3.23,1.58-4.61,1a5.79,5.79,0,0,1-2.59-2.24A4.77,4.77,0,0,1,174.72,349.12Zm3-6.91a7.28,7.28,0,0,1,3.08.22c.47.15,1.81.6,1.74,1.28,0,.42-.65.74-1,.88a2.54,2.54,0,0,1-1.61.08,5.49,5.49,0,0,1-2.78-2l-.23-.33A6.84,6.84,0,0,1,177.69,342.21Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M175.34,341.7a6.41,6.41,0,0,0-3.62,3,5.94,5.94,0,0,0,.19,5.64,6.5,6.5,0,0,0-1,3.49,7.74,7.74,0,0,0,5.1,6.89l.29.1.87-.5a8.29,8.29,0,0,1-4.68-4.3,5.85,5.85,0,0,1,.15-4.59A7.35,7.35,0,0,0,174.3,353c1.74,1.14,5.13,2,6.72.17a2.84,2.84,0,0,0-.13-3.71,5.56,5.56,0,0,0-4-1.87,5.62,5.62,0,0,0-4.16,1.75,5.46,5.46,0,0,1-.41-2.58,4.92,4.92,0,0,1,3.52-4.13c1.44,2.24,4.62,4.28,7.07,2.37s-1.46-3.64-3.1-3.79a10.71,10.71,0,0,0-3.39.19,3.68,3.68,0,0,1-.22-2,4.39,4.39,0,0,1,1.67-2.6,5.6,5.6,0,0,1,6.6-.4.36.36,0,1,0,.46-.56C181,332.24,173.28,336.65,175.34,341.7Zm-.62,7.42a4.17,4.17,0,0,1,3.69-.17c1,.45,2.2,1.4,2,2.66-.28,2.19-3.23,1.58-4.61,1a5.79,5.79,0,0,1-2.59-2.24A4.77,4.77,0,0,1,174.72,349.12Zm3-6.91a7.28,7.28,0,0,1,3.08.22c.47.15,1.81.6,1.74,1.28,0,.42-.65.74-1,.88a2.54,2.54,0,0,1-1.61.08,5.49,5.49,0,0,1-2.78-2l-.23-.33A6.84,6.84,0,0,1,177.69,342.21Z"
-          style=" opacity: 0.7;fill: #fff"></path>
-        <path
-          d="M172.27,352.4a5.43,5.43,0,0,1,.35-1,3.86,3.86,0,0,1-.71-1.09,7,7,0,0,0-.54,1.06A8.6,8.6,0,0,0,172.27,352.4Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M174.6,343.21a7.24,7.24,0,0,1,1.22-.59,5.7,5.7,0,0,1-.48-.92,7.31,7.31,0,0,0-1.36.63A6.94,6.94,0,0,0,174.6,343.21Z"
-          style="fill: currentcolor"></path>
-        <path d="M176.28,360.81l.87-.5a10.72,10.72,0,0,1-1.08-.52l-.93.53a7.2,7.2,0,0,0,.85.39Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M199.46,344.67a6.45,6.45,0,0,0-4.52-1.29,6,6,0,0,0-4.54,3.36,6.44,6.44,0,0,0-2.28.5,7.83,7.83,0,0,0-1.17.64,7.58,7.58,0,0,0-2.93,7.2c0,.31.09.61.15.91l.06.22.77-.44,0-.24a7.81,7.81,0,0,1,1.08-5.11,5.7,5.7,0,0,1,2.07-1.86,6,6,0,0,1,1.79-.62,6.89,6.89,0,0,0-.33,2.28c0,2.08,1.26,5.36,3.67,5.63a2.84,2.84,0,0,0,3-2.22,5.47,5.47,0,0,0-.74-4.36,5.63,5.63,0,0,0-3.79-2.44,5.4,5.4,0,0,1,1.88-1.8,4.92,4.92,0,0,1,5.4.56c-1,2.46-.9,6.22,2.06,7.15s2.16-3.26,1.37-4.69a11.14,11.14,0,0,0-2.08-2.69,3.64,3.64,0,0,1,1.54-1.33,4.36,4.36,0,0,1,3.08-.1,5.62,5.62,0,0,1,4.08,5.21.36.36,0,1,0,.72.06C210.47,344,202.45,340.11,199.46,344.67Zm-6.46,3.7a4.16,4.16,0,0,1,2.23,2.94c.21,1.1.1,2.61-1,3.19-2,1-3.14-1.77-3.45-3.24a5.87,5.87,0,0,1,.38-3.4A4.84,4.84,0,0,1,193,348.37Zm7.37-1.48a7.41,7.41,0,0,1,1.57,2.66c.14.47.54,1.84-.08,2.16-.36.2-1-.11-1.28-.31a2.47,2.47,0,0,1-1-1.28,5.44,5.44,0,0,1,.08-3.43,3,3,0,0,1,.13-.39C200,346.5,200.2,346.69,200.37,346.89Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M199.46,344.67a6.45,6.45,0,0,0-4.52-1.29,6,6,0,0,0-4.54,3.36,6.44,6.44,0,0,0-2.28.5,7.83,7.83,0,0,0-1.17.64,7.58,7.58,0,0,0-2.93,7.2c0,.31.09.61.15.91l.06.22.77-.44,0-.24a7.81,7.81,0,0,1,1.08-5.11,5.7,5.7,0,0,1,2.07-1.86,6,6,0,0,1,1.79-.62,6.89,6.89,0,0,0-.33,2.28c0,2.08,1.26,5.36,3.67,5.63a2.84,2.84,0,0,0,3-2.22,5.47,5.47,0,0,0-.74-4.36,5.63,5.63,0,0,0-3.79-2.44,5.4,5.4,0,0,1,1.88-1.8,4.92,4.92,0,0,1,5.4.56c-1,2.46-.9,6.22,2.06,7.15s2.16-3.26,1.37-4.69a11.14,11.14,0,0,0-2.08-2.69,3.64,3.64,0,0,1,1.54-1.33,4.36,4.36,0,0,1,3.08-.1,5.62,5.62,0,0,1,4.08,5.21.36.36,0,1,0,.72.06C210.47,344,202.45,340.11,199.46,344.67Zm-6.46,3.7a4.16,4.16,0,0,1,2.23,2.94c.21,1.1.1,2.61-1,3.19-2,1-3.14-1.77-3.45-3.24a5.87,5.87,0,0,1,.38-3.4A4.84,4.84,0,0,1,193,348.37Zm7.37-1.48a7.41,7.41,0,0,1,1.57,2.66c.14.47.54,1.84-.08,2.16-.36.2-1-.11-1.28-.31a2.47,2.47,0,0,1-1-1.28,5.44,5.44,0,0,1,.08-3.43,3,3,0,0,1,.13-.39C200,346.5,200.2,346.69,200.37,346.89Z"
-          style=" opacity: 0.7;fill: #fff"></path>
-        <path
-          d="M188.91,348.21a5.68,5.68,0,0,1,1-.27,4.22,4.22,0,0,1,.49-1.2,6.85,6.85,0,0,0-1.18.17A8.27,8.27,0,0,0,188.91,348.21Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M197.79,344.92a6,6,0,0,1,1.18.67,6.92,6.92,0,0,1,.49-.93,7.66,7.66,0,0,0-1.31-.73A5.86,5.86,0,0,0,197.79,344.92Z"
-          style="fill: currentcolor"></path>
-        <path d="M184.23,356.21l-.06-.22c-.06-.3-.11-.6-.15-.91l.95.45,0,.24Z" style="fill: currentcolor"></path>
-        <path
-          d="M185.94,245,131.56,276.4a4.84,4.84,0,0,0-2.18,3.79v18.66c0,1.4,1,2,2.19,1.27l54.37-31.39a4.87,4.87,0,0,0,2.19-3.79V246.27C188.13,244.88,187.15,244.31,185.94,245Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M184,253.23a4.7,4.7,0,0,1-2.19,3.64l-46.16,26.65c-1.21.69-2.19.2-2.19-1.11a4.7,4.7,0,0,1,2.19-3.64l46.16-26.65C183,251.43,184,251.92,184,253.23Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M184,262.72a4.7,4.7,0,0,1-2.19,3.64L135.67,293c-1.21.7-2.19.21-2.19-1.1a4.7,4.7,0,0,1,2.19-3.64l46.16-26.65C183,260.91,184,261.41,184,262.72Z"
-          style="fill: #263238"></path>
-        <path
-          d="M181.83,261.61l-19.59,11.31v4.74l19.59-11.3a4.7,4.7,0,0,0,2.19-3.64C184,261.41,183,260.91,181.83,261.61Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M110.54,201.07c-2.27-1.31-4.11-.12-4.11,2.68V304.13a9.4,9.4,0,0,0,4.11,7.44c2.27,1.32,4.11.12,4.11-2.67V208.51A9.43,9.43,0,0,0,110.54,201.07Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M110.54,201.07c-2.27-1.31-4.11-.12-4.11,2.68V304.13a9.4,9.4,0,0,0,4.11,7.44c2.27,1.32,4.11.12,4.11-2.67V208.51A9.43,9.43,0,0,0,110.54,201.07Z"
-          style="opacity: 0.5"></path>
-        <path
-          d="M110.54,309.17a4.7,4.7,0,0,1-2.05-3.71V204.77c0-1.4.92-2,2.05-1.35a4.69,4.69,0,0,1,2,3.72V307.83C112.59,309.23,111.67,309.83,110.54,309.17Z"
-          style="fill: #37474f"></path>
-        <path d="M110.54,309.17a4.7,4.7,0,0,1-2.05-3.71v-49.2l4.1,2.37v49.2C112.59,309.23,111.67,309.83,110.54,309.17Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M98.22,194c-2.27-1.32-4.11-.12-4.11,2.67V297a9.43,9.43,0,0,0,4.11,7.44c2.26,1.31,4.1.11,4.1-2.68V201.39A9.41,9.41,0,0,0,98.22,194Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M98.22,194c-2.27-1.32-4.11-.12-4.11,2.67V297a9.43,9.43,0,0,0,4.11,7.44c2.26,1.31,4.1.11,4.1-2.68V201.39A9.41,9.41,0,0,0,98.22,194Z"
-          style="opacity: 0.5"></path>
-        <path
-          d="M98.22,302.06a4.7,4.7,0,0,1-2.06-3.72V197.65c0-1.4.92-2,2.06-1.34a4.7,4.7,0,0,1,2,3.71V300.71C100.27,302.11,99.35,302.71,98.22,302.06Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M85.89,186.84c-2.27-1.31-4.11-.12-4.11,2.68V289.9a9.4,9.4,0,0,0,4.11,7.44c2.27,1.32,4.11.12,4.11-2.67V194.28A9.43,9.43,0,0,0,85.89,186.84Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M85.89,186.84c-2.27-1.31-4.11-.12-4.11,2.68V289.9a9.4,9.4,0,0,0,4.11,7.44c2.27,1.32,4.11.12,4.11-2.67V194.28A9.43,9.43,0,0,0,85.89,186.84Z"
-          style="opacity: 0.5"></path>
-        <path
-          d="M85.89,294.94a4.7,4.7,0,0,1-2-3.71V190.54c0-1.4.92-2,2-1.35A4.7,4.7,0,0,1,88,192.91V293.6C87.94,295,87,295.6,85.89,294.94Z"
-          style="fill: #37474f"></path>
-        <path d="M85.89,294.94a4.7,4.7,0,0,1-2-3.71V218.11L88,220.49V293.6C87.94,295,87,295.6,85.89,294.94Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M73.57,179.73c-2.27-1.32-4.11-.12-4.11,2.67V282.79a9.43,9.43,0,0,0,4.11,7.44c2.26,1.31,4.1.11,4.1-2.68V187.16A9.39,9.39,0,0,0,73.57,179.73Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M73.57,179.73c-2.27-1.32-4.11-.12-4.11,2.67V282.79a9.43,9.43,0,0,0,4.11,7.44c2.26,1.31,4.1.11,4.1-2.68V187.16A9.39,9.39,0,0,0,73.57,179.73Z"
-          style="opacity: 0.5"></path>
-        <path
-          d="M73.57,287.83a4.7,4.7,0,0,1-2.06-3.72V183.42c0-1.4.92-2,2.06-1.34a4.7,4.7,0,0,1,2.05,3.71V286.48C75.62,287.88,74.7,288.48,73.57,287.83Z"
-          style="fill: #37474f"></path>
-        <path d="M73.57,287.83a4.7,4.7,0,0,1-2.06-3.72V265.75l4.11,2.37v18.36C75.62,287.88,74.7,288.48,73.57,287.83Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M61.24,172.61c-2.27-1.32-4.11-.12-4.11,2.68V275.67a9.4,9.4,0,0,0,4.11,7.44c2.27,1.32,4.11.12,4.11-2.67V180.05A9.43,9.43,0,0,0,61.24,172.61Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M61.24,172.61c-2.27-1.32-4.11-.12-4.11,2.68V275.67a9.4,9.4,0,0,0,4.11,7.44c2.27,1.32,4.11.12,4.11-2.67V180.05A9.43,9.43,0,0,0,61.24,172.61Z"
-          style="opacity: 0.5"></path>
-        <path
-          d="M61.24,280.71A4.7,4.7,0,0,1,59.19,277V176.3c0-1.39.92-2,2.05-1.34a4.7,4.7,0,0,1,2.06,3.72V279.37C63.3,280.76,62.38,281.37,61.24,280.71Z"
-          style="fill: #37474f"></path>
-        <path d="M61.24,280.71A4.7,4.7,0,0,1,59.19,277V223.05l4.11,2.38v53.94C63.3,280.76,62.38,281.37,61.24,280.71Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M185.94,169.32l-54.38,31.39a4.82,4.82,0,0,0-2.18,3.79V267c0,1.39,1,2,2.19,1.26l54.37-31.39a4.87,4.87,0,0,0,2.19-3.79V170.58C188.13,169.18,187.15,168.62,185.94,169.32Z"
-          style="fill: #37474f"></path>
-        <path d="M130,202.43a4.29,4.29,0,0,0-.59,2.07V267c0,1.39,1,2,2.19,1.26l54.37-31.39a4.58,4.58,0,0,0,1.59-1.72Z"
-          style="fill: #263238"></path>
-        <path d="M131.56,200.71a4.82,4.82,0,0,0-2.18,3.79V267l54.37-31.39a4.87,4.87,0,0,0,2.18-3.8V169.32Z"
-          style="fill: #455a64"></path>
-        <g id="freepik--dead-emoji--inject-87">
-          <path
-            d="M149.47,217.14a1.1,1.1,0,0,1-.78-.31l-7.23-7a1.12,1.12,0,1,1,1.56-1.62l7.23,6.95a1.13,1.13,0,0,1-.78,1.94Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M142.24,221.31a1.05,1.05,0,0,1-.48-.11,1.13,1.13,0,0,1-.54-1.5l7.23-15.3a1.12,1.12,0,0,1,1.5-.53,1.13,1.13,0,0,1,.54,1.5l-7.23,15.3A1.13,1.13,0,0,1,142.24,221.31Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M173.07,203.51a1.12,1.12,0,0,1-.78-.31l-7.23-6.95a1.13,1.13,0,0,1,1.57-1.63l7.22,6.95a1.14,1.14,0,0,1,0,1.6A1.1,1.1,0,0,1,173.07,203.51Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M165.84,207.69a1.2,1.2,0,0,1-.48-.11,1.14,1.14,0,0,1-.54-1.5l7.23-15.3a1.13,1.13,0,0,1,2,1L166.86,207A1.13,1.13,0,0,1,165.84,207.69Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M141.92,238.65a1.14,1.14,0,0,1-1-.57,1.13,1.13,0,0,1,.42-1.54l31.47-18.17a1.13,1.13,0,0,1,1.54.41,1.14,1.14,0,0,1-.42,1.55l-31.47,18.16A1,1,0,0,1,141.92,238.65Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M163.85,239.16a3.11,3.11,0,0,1-1.58-.42,4.17,4.17,0,0,1-1.81-3.79v-8.79a1.14,1.14,0,0,1,1.13-1.13h0a1.14,1.14,0,0,1,1.13,1.13V235a2.07,2.07,0,0,0,.68,1.83,1.65,1.65,0,0,0,1.56-.24,7.85,7.85,0,0,0,3.37-6.14v-8.78a1.13,1.13,0,1,1,2.25,0v8.78a10.09,10.09,0,0,1-4.49,8.09A4.46,4.46,0,0,1,163.85,239.16Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M165.52,233.5a1.13,1.13,0,0,1-1.13-1.13v-8.48a1.13,1.13,0,0,1,2.26,0v8.48A1.12,1.12,0,0,1,165.52,233.5Z"
-            style="fill: currentcolor"></path>
-        </g>
-        <g id="freepik--server--inject-87">
-          <path
-            d="M66.16,363.4a2.11,2.11,0,0,1,1,1.67c0,.62-.43.87-1,.56a2.16,2.16,0,0,1-1-1.67C65.19,363.34,65.63,363.09,66.16,363.4Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M74.24,368.07a2.11,2.11,0,0,1,1,1.67c0,.61-.43.86-1,.56a2.13,2.13,0,0,1-1-1.68C73.27,368,73.7,367.76,74.24,368.07Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M82.17,372.65a2.1,2.1,0,0,1,1,1.66c0,.62-.43.87-1,.56a2.13,2.13,0,0,1-1-1.67C81.21,372.59,81.64,372.34,82.17,372.65Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M90.18,377.27a2.13,2.13,0,0,1,1,1.66c0,.61-.43.86-1,.56a2.13,2.13,0,0,1-1-1.66C89.22,377.21,89.65,377,90.18,377.27Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M56.74,315.92,65,320.63a5.17,5.17,0,0,1,2.32,4v4.71c0,1.48-1,2.09-2.32,1.34L56.74,326a5.16,5.16,0,0,1-2.33-4v-4.71C54.41,315.78,55.46,315.18,56.74,315.92Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M59,321.23l1.07-.62h0a1.41,1.41,0,0,1,1.42.14,4.48,4.48,0,0,1,2,3.51,1.4,1.4,0,0,1-.59,1.3h0l-1,.57-.18-.3a1.81,1.81,0,0,1-.58-.22,4.46,4.46,0,0,1-2-3.5,2.06,2.06,0,0,1,.06-.52Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M59,321.23l1.07-.62h0a1.41,1.41,0,0,1,1.42.14,4.48,4.48,0,0,1,2,3.51,1.4,1.4,0,0,1-.59,1.3h0l-1,.57-.18-.3a1.81,1.81,0,0,1-.58-.22,4.46,4.46,0,0,1-2-3.5,2.06,2.06,0,0,1,.06-.52Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M60.42,321.34a4.49,4.49,0,0,1,2,3.51c0,1.28-.91,1.81-2,1.16a4.47,4.47,0,0,1-2-3.5C58.4,321.22,59.31,320.7,60.42,321.34Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M56.74,293.25,65,298a5.14,5.14,0,0,1,2.32,4v4.7c0,1.49-1,2.09-2.32,1.35l-8.21-4.72a5.15,5.15,0,0,1-2.33-4v-4.71C54.41,293.11,55.46,292.51,56.74,293.25Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M59,298.56l1.07-.62h0a1.42,1.42,0,0,1,1.42.15,4.45,4.45,0,0,1,2,3.5,1.43,1.43,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.12,2.12,0,0,1-.58-.23,4.45,4.45,0,0,1-2-3.5,2.12,2.12,0,0,1,.06-.52Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M59,298.56l1.07-.62h0a1.42,1.42,0,0,1,1.42.15,4.45,4.45,0,0,1,2,3.5,1.43,1.43,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.12,2.12,0,0,1-.58-.23,4.45,4.45,0,0,1-2-3.5,2.12,2.12,0,0,1,.06-.52Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M60.42,298.68a4.46,4.46,0,0,1,2,3.5c0,1.29-.91,1.81-2,1.17a4.51,4.51,0,0,1-2-3.51C58.4,298.55,59.31,298,60.42,298.68Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M185.57,276.07l-38,21.95a5.66,5.66,0,0,0-2.55,4.43v5.17c0,1.62,1.14,2.28,2.55,1.47l38-21.95a5.67,5.67,0,0,0,2.56-4.43v-5.16C188.13,275.92,187,275.26,185.57,276.07Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M185.43,280.45V283a1.13,1.13,0,0,1-.51.89l-.57.33c-.29.16-.52,0-.52-.29v-2.51a1.13,1.13,0,0,1,.52-.89l.57-.33C185.2,280,185.43,280.12,185.43,280.45Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M182.85,281.94v2.5a1.13,1.13,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.29v-2.51a1.15,1.15,0,0,1,.51-.89l.58-.33C182.62,281.48,182.85,281.61,182.85,281.94Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M180.27,283.42v2.51a1.15,1.15,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.3v-2.5a1.13,1.13,0,0,1,.51-.89l.58-.33C180,283,180.27,283.1,180.27,283.42Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M177.69,284.91v2.51a1.11,1.11,0,0,1-.51.88l-.58.34c-.28.16-.51,0-.51-.3v-2.51a1.13,1.13,0,0,1,.51-.88l.58-.33C177.46,284.45,177.69,284.59,177.69,284.91Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M175.1,286.4v2.51a1.1,1.1,0,0,1-.51.88l-.57.33c-.28.17-.51,0-.51-.29v-2.51a1.13,1.13,0,0,1,.51-.88l.57-.33C174.88,285.94,175.1,286.08,175.1,286.4Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M172.52,287.89v2.51a1.13,1.13,0,0,1-.51.88l-.57.33c-.29.17-.51,0-.51-.29v-2.51a1.1,1.1,0,0,1,.51-.88l.57-.34C172.29,287.43,172.52,287.56,172.52,287.89Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M169.94,289.38v2.5a1.13,1.13,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.29V290.3a1.15,1.15,0,0,1,.51-.89l.58-.33C169.71,288.92,169.94,289.05,169.94,289.38Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M167.36,290.87v2.5a1.13,1.13,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.3v-2.5a1.15,1.15,0,0,1,.51-.89l.58-.33C167.13,290.41,167.36,290.54,167.36,290.87Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M164.78,292.35v2.51a1.15,1.15,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.3v-2.5a1.13,1.13,0,0,1,.51-.89l.58-.33C164.55,291.9,164.78,292,164.78,292.35Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M162.2,293.84v2.51a1.1,1.1,0,0,1-.52.88l-.57.34c-.28.16-.51,0-.51-.3v-2.51a1.13,1.13,0,0,1,.51-.88l.57-.33C162,293.38,162.2,293.52,162.2,293.84Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M159.61,295.33v2.51a1.13,1.13,0,0,1-.51.88l-.57.33c-.28.17-.51,0-.51-.29v-2.51a1.13,1.13,0,0,1,.51-.88l.57-.33C159.38,294.87,159.61,295,159.61,295.33Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M157,296.82v2.51a1.13,1.13,0,0,1-.51.88l-.57.33c-.29.17-.51,0-.51-.29v-2.51a1.1,1.1,0,0,1,.51-.88l.57-.34C156.8,296.36,157,296.49,157,296.82Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M154.45,298.31v2.5a1.13,1.13,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.29v-2.51a1.15,1.15,0,0,1,.51-.89l.58-.33C154.22,297.85,154.45,298,154.45,298.31Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M151.87,299.8v2.5a1.13,1.13,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.3v-2.5a1.15,1.15,0,0,1,.51-.89l.58-.33C151.64,299.34,151.87,299.47,151.87,299.8Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M149.29,301.28v2.51a1.15,1.15,0,0,1-.51.89l-.58.33c-.28.16-.51,0-.51-.3v-2.5a1.13,1.13,0,0,1,.51-.89l.58-.33C149.06,300.83,149.29,301,149.29,301.28Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M141.15,306.31l-1.06-.62h0a1.41,1.41,0,0,0-1.42.14,4.49,4.49,0,0,0-2,3.51,1.42,1.42,0,0,0,.59,1.3h0l1,.56.18-.3a2,2,0,0,0,.58-.22,4.49,4.49,0,0,0,2-3.5,2.66,2.66,0,0,0-.06-.52Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M139.68,306.42a4.51,4.51,0,0,0-2,3.51c0,1.29.91,1.81,2,1.16a4.45,4.45,0,0,0,2-3.5C141.7,306.3,140.8,305.78,139.68,306.42Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M139.68,306.42a4.51,4.51,0,0,0-2,3.51c0,1.29.91,1.81,2,1.16a4.45,4.45,0,0,0,2-3.5C141.7,306.3,140.8,305.78,139.68,306.42Z"
-            style=" opacity: 0.8;fill: #fff"></path>
-          <path
-            d="M132.38,311.37l-1.07-.61h0a1.44,1.44,0,0,0-1.42.15,4.45,4.45,0,0,0-2,3.5,1.41,1.41,0,0,0,.59,1.31h0l1,.57.18-.3a1.94,1.94,0,0,0,.58-.23,4.45,4.45,0,0,0,2-3.5,2,2,0,0,0-.06-.51Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M130.9,311.49a4.47,4.47,0,0,0-2,3.5c0,1.29.91,1.81,2,1.17a4.47,4.47,0,0,0,2-3.5C132.93,311.37,132,310.84,130.9,311.49Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M130.9,311.49a4.47,4.47,0,0,0-2,3.5c0,1.29.91,1.81,2,1.17a4.47,4.47,0,0,0,2-3.5C132.93,311.37,132,310.84,130.9,311.49Z"
-            style=" opacity: 0.8;fill: #fff"></path>
-          <path
-            d="M73.87,301.3l39.79,23a2.85,2.85,0,0,1,1.29,2.23v11c0,.82-.58,1.15-1.29.74l-39.79-23A2.83,2.83,0,0,1,72.58,313v-11C72.58,301.22,73.15,300.89,73.87,301.3Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M75,306.14a2.74,2.74,0,0,0,1.29,2.14l34.95,20.17c.71.41,1.29.11,1.29-.66a2.77,2.77,0,0,0-1.29-2.14L76.29,305.49C75.57,305.08,75,305.37,75,306.14Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M75,311.73a2.74,2.74,0,0,0,1.29,2.14L111.24,334c.71.41,1.29.12,1.29-.65a2.77,2.77,0,0,0-1.29-2.14L76.29,311.08C75.57,310.67,75,311,75,311.73Z"
-            style="fill: #263238"></path>
-          <path
-            d="M76.29,311.08,95.6,322.21V325L76.29,313.87A2.74,2.74,0,0,1,75,311.73C75,311,75.57,310.67,76.29,311.08Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M56.74,293.25,65,298a5.14,5.14,0,0,1,2.32,4v4.7c0,1.49-1,2.09-2.32,1.35l-8.21-4.72a5.15,5.15,0,0,1-2.33-4v-4.71C54.41,293.11,55.46,292.51,56.74,293.25Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M59,298.56l1.07-.62h0a1.42,1.42,0,0,1,1.42.15,4.45,4.45,0,0,1,2,3.5,1.43,1.43,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.12,2.12,0,0,1-.58-.23,4.45,4.45,0,0,1-2-3.5,2.12,2.12,0,0,1,.06-.52Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M59,298.56l1.07-.62h0a1.42,1.42,0,0,1,1.42.15,4.45,4.45,0,0,1,2,3.5,1.43,1.43,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.12,2.12,0,0,1-.58-.23,4.45,4.45,0,0,1-2-3.5,2.12,2.12,0,0,1,.06-.52Z"
-            style="opacity: 0.2"></path>
-          <path
-            d="M60.42,298.68a4.46,4.46,0,0,1,2,3.5c0,1.29-.91,1.81-2,1.17a4.51,4.51,0,0,1-2-3.51C58.4,298.55,59.31,298,60.42,298.68Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M73.87,301.3l39.79,23a2.85,2.85,0,0,1,1.29,2.23v11c0,.82-.58,1.15-1.29.74l-39.79-23A2.83,2.83,0,0,1,72.58,313v-11C72.58,301.22,73.15,300.89,73.87,301.3Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M75,306.14a2.74,2.74,0,0,0,1.29,2.14l34.95,20.17c.71.41,1.29.11,1.29-.66a2.77,2.77,0,0,0-1.29-2.14L76.29,305.49C75.57,305.08,75,305.37,75,306.14Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M75,311.73a2.74,2.74,0,0,0,1.29,2.14L111.24,334c.71.41,1.29.12,1.29-.65a2.77,2.77,0,0,0-1.29-2.14L76.29,311.08C75.57,310.67,75,311,75,311.73Z"
-            style="fill: #263238"></path>
-          <path
-            d="M76.29,311.08,95.6,322.21V325L76.29,313.87A2.74,2.74,0,0,1,75,311.73C75,311,75.57,310.67,76.29,311.08Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M73.87,324l39.79,23a2.89,2.89,0,0,1,1.29,2.24v11c0,.82-.58,1.15-1.29.74L73.87,338a2.84,2.84,0,0,1-1.29-2.24v-11C72.58,324,73.15,323.62,73.87,324Z"
-            style="fill: #37474f"></path>
-          <path
-            d="M75,328.87A2.74,2.74,0,0,0,76.29,331l34.95,20.16c.71.42,1.29.12,1.29-.65a2.77,2.77,0,0,0-1.29-2.14L76.29,328.22C75.57,327.81,75,328.1,75,328.87Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M75,334.46a2.74,2.74,0,0,0,1.29,2.14l34.95,20.16c.71.41,1.29.12,1.29-.65a2.77,2.77,0,0,0-1.29-2.14L76.29,333.81C75.57,333.4,75,333.69,75,334.46Z"
-            style="fill: #263238"></path>
-          <path
-            d="M76.29,333.81l24.15,13.92v2.79L76.29,336.6A2.74,2.74,0,0,1,75,334.46C75,333.69,75.57,333.4,76.29,333.81Z"
-            style="fill: currentcolor"></path>
-        </g>
-        <path
-          d="M56.74,338.72,65,343.43a5.15,5.15,0,0,1,2.32,4v4.71c0,1.48-1,2.08-2.32,1.34l-8.21-4.71a5.18,5.18,0,0,1-2.33-4v-4.71C54.41,338.58,55.46,338,56.74,338.72Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M59,344l1.07-.62h0a1.41,1.41,0,0,1,1.42.14,4.46,4.46,0,0,1,2,3.5,1.41,1.41,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.08,2.08,0,0,1-.58-.22,4.48,4.48,0,0,1-2-3.51,2,2,0,0,1,.06-.51Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M59,344l1.07-.62h0a1.41,1.41,0,0,1,1.42.14,4.46,4.46,0,0,1,2,3.5,1.41,1.41,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.08,2.08,0,0,1-.58-.22,4.48,4.48,0,0,1-2-3.51,2,2,0,0,1,.06-.51Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M60.42,344.14a4.46,4.46,0,0,1,2,3.5c0,1.29-.91,1.81-2,1.17a4.47,4.47,0,0,1-2-3.5C58.4,344,59.31,343.5,60.42,344.14Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M56.74,338.72,65,343.43a5.15,5.15,0,0,1,2.32,4v4.71c0,1.48-1,2.08-2.32,1.34l-8.21-4.71a5.18,5.18,0,0,1-2.33-4v-4.71C54.41,338.58,55.46,338,56.74,338.72Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M59,344l1.07-.62h0a1.41,1.41,0,0,1,1.42.14,4.46,4.46,0,0,1,2,3.5,1.41,1.41,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.08,2.08,0,0,1-.58-.22,4.48,4.48,0,0,1-2-3.51,2,2,0,0,1,.06-.51Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M59,344l1.07-.62h0a1.41,1.41,0,0,1,1.42.14,4.46,4.46,0,0,1,2,3.5,1.41,1.41,0,0,1-.59,1.31h0l-1,.57-.18-.3a2.08,2.08,0,0,1-.58-.22,4.48,4.48,0,0,1-2-3.51,2,2,0,0,1,.06-.51Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M60.42,344.14a4.46,4.46,0,0,1,2,3.5c0,1.29-.91,1.81-2,1.17a4.47,4.47,0,0,1-2-3.5C58.4,344,59.31,343.5,60.42,344.14Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M73.87,346.77l39.79,23A2.85,2.85,0,0,1,115,372v11c0,.83-.58,1.16-1.29.75l-39.79-23a2.83,2.83,0,0,1-1.29-2.23v-11C72.58,346.69,73.15,346.35,73.87,346.77Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M75,351.61a2.74,2.74,0,0,0,1.29,2.14l34.95,20.16c.71.41,1.29.12,1.29-.65a2.77,2.77,0,0,0-1.29-2.14L76.29,351C75.57,350.54,75,350.84,75,351.61Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M75,357.19a2.76,2.76,0,0,0,1.29,2.15l34.95,20.16c.71.41,1.29.12,1.29-.65a2.79,2.79,0,0,0-1.29-2.15L76.29,356.54C75.57,356.13,75,356.42,75,357.19Z"
-          style="fill: #263238"></path>
-        <path
-          d="M76.29,356.54,95.6,367.67v2.8L76.29,359.34A2.76,2.76,0,0,1,75,357.19C75,356.42,75.57,356.13,76.29,356.54Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M177.29,158.41l-53.07,30.64a3.07,3.07,0,0,1-2.74,0L68.41,158.41a.84.84,0,0,1,0-1.59l53.07-29.58a3.07,3.07,0,0,1,2.74,0l53.07,29.58A.84.84,0,0,1,177.29,158.41Z"
-          style="opacity: 0.1"></path>
-        <path
-          d="M124.16,187.37l50.78-29.32a2.9,2.9,0,0,0,1.32-2.27v-1.71a2.91,2.91,0,0,0-1.32-2.28l-50.78-29.32a2.88,2.88,0,0,0-2.62,0L70.76,151.79a2.91,2.91,0,0,0-1.32,2.28v1.71a2.9,2.9,0,0,0,1.32,2.27l50.78,29.32A2.88,2.88,0,0,0,124.16,187.37Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M124.16,187.37l50.78-29.32a2.9,2.9,0,0,0,1.32-2.27v-1.71a2.91,2.91,0,0,0-1.32-2.28l-50.78-29.32a2.88,2.88,0,0,0-2.62,0L70.76,151.79a2.91,2.91,0,0,0-1.32,2.28v1.71a2.9,2.9,0,0,0,1.32,2.27l50.78,29.32A2.88,2.88,0,0,0,124.16,187.37Z"
-          style=" opacity: 0.5;fill: #fff"></path>
-        <path
-          d="M124.16,187.37l50.78-29.32a2.9,2.9,0,0,0,1.32-2.27v-1.71a2.91,2.91,0,0,0-1.32-2.28l-50.78-29.32a2.88,2.88,0,0,0-2.62,0L70.76,151.79a2.91,2.91,0,0,0-1.32,2.28v1.71a2.9,2.9,0,0,0,1.32,2.27l50.78,29.32A2.88,2.88,0,0,0,124.16,187.37Z"
-          style="opacity: 0.05"></path>
-        <path
-          d="M174.94,153.31l-50.78,29.31a2.88,2.88,0,0,1-2.62,0L70.76,153.31a.8.8,0,0,1,0-1.52l50.78-28.3a2.88,2.88,0,0,1,2.62,0l50.78,28.3A.8.8,0,0,1,174.94,153.31Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M174.94,153.31l-50.78,29.31a2.88,2.88,0,0,1-2.62,0L70.76,153.31a.8.8,0,0,1,0-1.52l50.78-28.3a2.88,2.88,0,0,1,2.62,0l50.78,28.3A.8.8,0,0,1,174.94,153.31Z"
-          style=" opacity: 0.7;fill: #fff"></path>
-        <path
-          d="M122.85,182.94v4.74a2.67,2.67,0,0,0,1.31-.31l50.78-29.32a2.91,2.91,0,0,0,1.32-2.28v-1.71a2.92,2.92,0,0,0-1.07-2.1c.47.41.39,1-.25,1.34l-50.78,29.32A2.57,2.57,0,0,1,122.85,182.94Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M122.85,182.94v4.74a2.67,2.67,0,0,0,1.31-.31l50.78-29.32a2.91,2.91,0,0,0,1.32-2.28v-1.71a2.92,2.92,0,0,0-1.07-2.1c.47.41.39,1-.25,1.34l-50.78,29.32A2.57,2.57,0,0,1,122.85,182.94Z"
-          style=" opacity: 0.6;fill: #fff"></path>
-        <path
-          d="M124.16,173.14l34.35-19.83a2.89,2.89,0,0,0,1.31-2.28v-1.71a2.88,2.88,0,0,0-1.31-2.27l-22-12.72a8.71,8.71,0,0,1-2.22-2l-10.52-14.17a1.74,1.74,0,0,0-2.21-.46L87.19,137.56a2.89,2.89,0,0,0-1.31,2.27V151a2.92,2.92,0,0,0,1.31,2.28l34.35,19.83A2.88,2.88,0,0,0,124.16,173.14Z"
-          style="fill: #263238"></path>
-        <path
-          d="M121.54,168.39l-22-12.71a7.19,7.19,0,0,1-1.15-.85,7.87,7.87,0,0,1-1.07-1.13L86.78,139.53a1.31,1.31,0,0,1,.41-2l34.35-19.83a1.74,1.74,0,0,1,2.21.46l10.52,14.17a8.28,8.28,0,0,0,2,2l22.2,12.64a.79.79,0,0,1,0,1.51l-34.35,19.83A2.88,2.88,0,0,1,121.54,168.39Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M87.19,137.56l34.35-19.83a1.74,1.74,0,0,1,2.21.46l10.52,14.17a8,8,0,0,0,1.08,1.12s-37,21.35-37,21.34a7.84,7.84,0,0,1-1.07-1.12L86.78,139.53A1.31,1.31,0,0,1,87.19,137.56Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M150.18,147.39a3.41,3.41,0,0,0-3.08,0c-.86.5-.86,1.29,0,1.78a3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,150.18,147.39Z"
-          style="fill: currentcolor"></path>
-        <path d="M144,151a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,144,151Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M137.85,154.51a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,137.85,154.51Z"
-          style="fill: #263238"></path>
-        <path
-          d="M131.69,158.07a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,131.69,158.07Z"
-          style="fill: #263238"></path>
-        <path
-          d="M145.56,144.73a3.37,3.37,0,0,0-3.09,0,.93.93,0,0,0,0,1.77,3.37,3.37,0,0,0,3.09,0A.93.93,0,0,0,145.56,144.73Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M139.39,148.28a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,139.39,148.28Z"
-          style="fill: #263238"></path>
-        <ellipse cx="131.69" cy="152.73" rx="2.18" ry="1.26" style="fill: currentcolor"></ellipse>
-        <path
-          d="M127.07,155.4a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,127.07,155.4Z"
-          style="fill: #263238"></path>
-        <path
-          d="M140.93,142.06a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,140.93,142.06Z"
-          style="fill: #263238"></path>
-        <path
-          d="M134.77,145.62a3.35,3.35,0,0,0-3.08,0,.93.93,0,0,0,0,1.77,3.35,3.35,0,0,0,3.08,0A.93.93,0,0,0,134.77,145.62Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M128.61,149.17a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,128.61,149.17Z"
-          style="fill: #263238"></path>
-        <path
-          d="M125.49,161.55a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,125.49,161.55Z"
-          style="fill: currentcolor"></path>
-        <ellipse cx="119.33" cy="159.77" rx="2.18" ry="1.26" style="fill: #263238"></ellipse>
-        <path
-          d="M122.45,152.73a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,122.45,152.73Z"
-          style="fill: #263238"></path>
-        <path
-          d="M136.31,139.39a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,136.31,139.39Z"
-          style="fill: currentcolor"></path>
-        <path d="M130.15,143a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,130.15,143Z"
-          style="fill: #263238"></path>
-        <path d="M124,146.51a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,124,146.51Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M117.83,150.06a3.41,3.41,0,0,0-3.08,0c-.86.5-.86,1.29,0,1.78a3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,117.83,150.06Z"
-          style="fill: #263238"></path>
-        <path
-          d="M116.25,156.22a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,116.25,156.22Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M111.63,153.55a3.41,3.41,0,0,0-3.08,0,.94.94,0,0,0,0,1.78,3.41,3.41,0,0,0,3.08,0A.94.94,0,0,0,111.63,153.55Z"
-          style="fill: #263238"></path>
-        <path
-          d="M122.78,168.71v4.73a2.72,2.72,0,0,0,1.38-.3l34.35-19.84a2.86,2.86,0,0,0,1.31-2.27v-1.71a2.89,2.89,0,0,0-1.07-2.1c.48.41.4,1-.24,1.34l-34.35,19.83A2.63,2.63,0,0,1,122.78,168.71Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M129.73,131.76l0,0a1.17,1.17,0,0,0-1.48-.31L98.33,148.67a.89.89,0,0,0-.27,1.32l0,0a1.18,1.18,0,0,0,1.48.31l29.88-17.26A.88.88,0,0,0,129.73,131.76Z"
-          style="fill: #263238"></path>
-        <path
-          d="M129.73,131.76l0,0a1.17,1.17,0,0,0-1.48-.31L106,144.24l1.24,1.67,22.21-12.83A.88.88,0,0,0,129.73,131.76Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M127.26,128.45l0,0a1.16,1.16,0,0,0-1.48-.31L95.86,145.36a.87.87,0,0,0-.27,1.31l0,0a1.16,1.16,0,0,0,1.48.31L127,129.77A.88.88,0,0,0,127.26,128.45Z"
-          style="fill: #263238"></path>
-        <path d="M127.26,128.45l0,0a1.16,1.16,0,0,0-1.48-.31l-7.43,4.29,1.24,1.66,7.42-4.28A.88.88,0,0,0,127.26,128.45Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M124.79,125.13l0,0a1.16,1.16,0,0,0-1.48-.31L93.39,142a.89.89,0,0,0-.27,1.32l0,0a1.16,1.16,0,0,0,1.48.3l29.88-17.25A.88.88,0,0,0,124.79,125.13Z"
-          style="fill: #263238"></path>
-        <path d="M124.79,125.13l0,0a1.16,1.16,0,0,0-1.48-.31l-15.57,9L109,135.4l15.56-9A.88.88,0,0,0,124.79,125.13Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M122.32,121.81l0,0a1.16,1.16,0,0,0-1.48-.3L90.92,138.72a.88.88,0,0,0-.27,1.32l0,0a1.16,1.16,0,0,0,1.48.31L122,123.13A.88.88,0,0,0,122.32,121.81Z"
-          style="fill: #263238"></path>
-        <path
-          d="M122.32,121.81l0,0a1.16,1.16,0,0,0-1.48-.3L93.68,137.13l1.24,1.66L122,123.13A.88.88,0,0,0,122.32,121.81Z"
-          style="fill: currentcolor"></path>
-      </g>
-    </g>
-    <g id="freepik--Gears--inject-87">
-      <g id="freepik--gears--inject-87">
-        <path
-          d="M132.4,412.71v7.54a.56.56,0,0,0,.51.55l3.93.24v5.54h0a.33.33,0,0,0,.19.28l4.15,2.39a1,1,0,0,0,.52.11h0a.83.83,0,0,0,.39-.08l4.2-1.94a1.58,1.58,0,0,1,1-.06,24.6,24.6,0,0,0,3.26.78.78.78,0,0,1,.61.59l.52,2.76a.69.69,0,0,0,.23.37h0a.62.62,0,0,0,.39.14h6.09a.55.55,0,0,0,.34-.13.19.19,0,0,0,.08-.07.73.73,0,0,0,.09-.08v-.06c0-.06.09-.1.1-.17l.53-2.76a.77.77,0,0,1,.6-.59,24.23,24.23,0,0,0,3.26-.78,1.58,1.58,0,0,1,1,.06l4.2,1.94a.71.71,0,0,0,.26,0v0H169a1,1,0,0,0,.4-.1h0l4.14-2.39a.41.41,0,0,0,.15-.14h0a.35.35,0,0,0,0-.11h0v-2.36h0v-3.18h0l3.86-.25h.07a.93.93,0,0,0,.1-.05.53.53,0,0,0,.26-.13.41.41,0,0,0,.08-.19c0-.06.08-.11.08-.18h0v-3.08h0v-3.95h0v-3.08a.56.56,0,0,0-.52-.55l-3.93-.25v-5.53h0a.34.34,0,0,0-.19-.3l-4.14-2.39a1.14,1.14,0,0,0-.92,0l-4.2,1.94a1.5,1.5,0,0,1-1,.06,24.21,24.21,0,0,0-3.26-.77.79.79,0,0,1-.6-.59L159,399a.65.65,0,0,0-.61-.51h-6.09a.66.66,0,0,0-.62.51l-.52,2.77a.8.8,0,0,1-.61.59,24.58,24.58,0,0,0-3.26.77,1.51,1.51,0,0,1-1-.06l-4.2-1.94a1.11,1.11,0,0,0-.91,0l-4.14,2.39a.35.35,0,0,0-.2.3h0v5.52l-3.93.25a.56.56,0,0,0-.51.55v2.46A.41.41,0,0,0,132.4,412.71Zm15.91,2a15.48,15.48,0,0,1,14,0q.44.25.81.51a8.14,8.14,0,0,1-.81.54,15.46,15.46,0,0,1-14,0,7.58,7.58,0,0,1-.81-.53A8.52,8.52,0,0,1,148.31,414.67Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M132.39,412.71l0,7.54a.55.55,0,0,0,.51.54l3.93.25v5.54a.33.33,0,0,0,.19.28l4.15,2.39a1,1,0,0,0,.52.11h0a.83.83,0,0,0,.39-.08l4.2-1.94a1.46,1.46,0,0,1,.4-.1h0a1.47,1.47,0,0,1,.56,0,24.6,24.6,0,0,0,3.26.78.64.64,0,0,1,.26.1v0a.79.79,0,0,1,.35.46l.52,2.76a.63.63,0,0,0,.23.36h0a.62.62,0,0,0,.39.14h6.2a.69.69,0,0,0,.4-.27v-.06c0-.06.09-.1.1-.17l.53-2.76a.7.7,0,0,1,.24-.4h0a.77.77,0,0,1,.36-.18,24.23,24.23,0,0,0,3.26-.78,1.69,1.69,0,0,1,.64,0v0a1.27,1.27,0,0,1,.32.07l4.2,1.94a.71.71,0,0,0,.26,0v0h0a1.07,1.07,0,0,0,.65-.1h0l4.14-2.39.09-.06.07-.09a.27.27,0,0,0,0-.12h0v-5.54l.72-.05,3.14-.2h.07a.55.55,0,0,0,.52-.54v-7a.55.55,0,0,1-.52.54l-5.52.35a1,1,0,0,0-.74.5,8.28,8.28,0,0,1-1.18,1.63.43.43,0,0,0,.07.67l3.28,2.36a.31.31,0,0,1,0,.56l-4.14,2.39a1.1,1.1,0,0,1-.92,0l-4.2-1.94a1.57,1.57,0,0,0-1-.06,23.87,23.87,0,0,1-3.26.78.79.79,0,0,0-.6.59l-.53,2.76a.65.65,0,0,1-.61.51h-6.09a.66.66,0,0,1-.62-.51l-.52-2.76a.81.81,0,0,0-.61-.59,24.6,24.6,0,0,1-3.26-.78,1.58,1.58,0,0,0-1,.06l-4.2,1.94a1.07,1.07,0,0,1-.91,0L137,419.83a.31.31,0,0,1,0-.56l3.28-2.36a.45.45,0,0,0,.06-.68,7.89,7.89,0,0,1-1.17-1.62,1,1,0,0,0-.75-.5l-5.52-.34a.56.56,0,0,1-.51-.55v-.62A.43.43,0,0,0,132.39,412.71Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M136.85,403.82v5.52l1.59-.1a1,1,0,0,0,.75-.5,8.17,8.17,0,0,1,1.17-1.62.45.45,0,0,0-.06-.68L137,404.08a.37.37,0,0,1-.17-.26Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M147.51,415.19l.35-.25,0,0,.41-.25a15.48,15.48,0,0,1,14,0l.37.22c.15.1.3.19.44.3,3-2.25,2.76-5.49-.81-7.55a15.4,15.4,0,0,0-14,0C144.74,409.7,144.47,413,147.51,415.19Z"
-          style="opacity: 0.4"></path>
-        <path
-          d="M170.26,407.12a8.23,8.23,0,0,1,1.18,1.62,1,1,0,0,0,.74.5l1.59.1v-5.53a.39.39,0,0,1-.17.27l-3.28,2.36A.44.44,0,0,0,170.26,407.12Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M168.52,401.09l-4.2,1.94a1.5,1.5,0,0,1-1,.06,24.21,24.21,0,0,0-3.26-.77.79.79,0,0,1-.6-.59L159,399a.65.65,0,0,0-.61-.51h-6.09a.66.66,0,0,0-.62.51l-.52,2.77a.8.8,0,0,1-.61.59,24.58,24.58,0,0,0-3.26.77,1.51,1.51,0,0,1-1-.06l-4.2-1.94a1.11,1.11,0,0,0-.91,0l-4.14,2.39a.31.31,0,0,0,0,.56l3.28,2.36a.45.45,0,0,1,.06.68,8.17,8.17,0,0,0-1.17,1.62,1,1,0,0,1-.75.5l-5.52.35a.56.56,0,0,0-.51.55v3.08a.56.56,0,0,0,.51.55l5.52.34a1,1,0,0,1,.75.5,8.22,8.22,0,0,0,1.17,1.63.44.44,0,0,1-.06.67L137,419.27a.31.31,0,0,0,0,.56l4.14,2.39a1.07,1.07,0,0,0,.91,0l4.2-1.94a1.58,1.58,0,0,1,1-.06,24.6,24.6,0,0,0,3.26.78.78.78,0,0,1,.61.59l.52,2.76a.66.66,0,0,0,.62.51h6.09a.65.65,0,0,0,.61-.51l.53-2.76a.77.77,0,0,1,.6-.59,24.23,24.23,0,0,0,3.26-.78,1.57,1.57,0,0,1,1,.06l4.2,1.94a1.1,1.1,0,0,0,.92,0l4.14-2.39a.31.31,0,0,0,0-.56l-3.28-2.36a.42.42,0,0,1-.06-.67,8.22,8.22,0,0,0,1.17-1.63,1,1,0,0,1,.74-.5l5.52-.34a.56.56,0,0,0,.52-.55v-3.08a.56.56,0,0,0-.52-.55l-5.52-.35a1,1,0,0,1-.74-.5,8.17,8.17,0,0,0-1.17-1.62.43.43,0,0,1,.06-.68l3.28-2.36a.31.31,0,0,0,0-.56l-4.14-2.39A1.14,1.14,0,0,0,168.52,401.09Zm-6.21,6.55c3.87,2.23,3.87,5.85,0,8.08a15.46,15.46,0,0,1-14,0c-3.87-2.23-3.87-5.85,0-8.08A15.46,15.46,0,0,1,162.31,407.64Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M173.77,419.55a.35.35,0,0,0-.16-.28L172,418.08v-3.91a.9.9,0,0,1,.22-.06l5.52-.35a.55.55,0,0,0,.52-.54v7a.55.55,0,0,1-.52.54h-.07l-3.14.2-.72.05S173.78,419.65,173.77,419.55Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M173.77,419.55a.35.35,0,0,0-.16-.28L172,418.08v-3.91a.9.9,0,0,1,.22-.06l5.52-.35a.55.55,0,0,0,.52-.54v7a.55.55,0,0,1-.52.54h-.07l-3.14.2-.72.05S173.78,419.65,173.77,419.55Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M164,420.23a1.26,1.26,0,0,1,.31.09l4.2,1.94a1.06,1.06,0,0,0,.54.07v7a.88.88,0,0,1-.28,0h0v0a.71.71,0,0,1-.26,0l-4.2-1.94a1.29,1.29,0,0,0-.31-.07Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M164,420.23a1.26,1.26,0,0,1,.31.09l4.2,1.94a1.06,1.06,0,0,0,.54.07v7a.88.88,0,0,1-.28,0h0v0a.71.71,0,0,1-.26,0l-4.2-1.94a1.29,1.29,0,0,0-.31-.07Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M158.89,424.59a.5.5,0,0,0,.08-.2l.53-2.76a.49.49,0,0,1,.08-.21v7a.54.54,0,0,0-.08.21l-.53,2.76c0,.06-.05.09-.08.14Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M158.89,424.59a.5.5,0,0,0,.08-.2l.53-2.76a.49.49,0,0,1,.08-.21v7a.54.54,0,0,0-.08.21l-.53,2.76c0,.06-.05.09-.08.14Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M151.05,421.42a.66.66,0,0,1,.08.21l.52,2.76a1.19,1.19,0,0,0,.08.2v7a1.19,1.19,0,0,1-.08-.2l-.52-2.76a.64.64,0,0,0-.08-.19Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M141.56,422.33a1.06,1.06,0,0,0,.54-.07l4.2-1.94a1.35,1.35,0,0,1,.32-.09v7a1,1,0,0,0-.32.08l-4.2,1.94a.83.83,0,0,1-.39.08h-.15Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M132.92,413.77l5.52.34a1,1,0,0,1,.23.06v3.91L137,419.27a.36.36,0,0,0-.17.28V421l-3.93-.25a.55.55,0,0,1-.51-.54l0-7.54a.43.43,0,0,1,0-.11v.62A.56.56,0,0,0,132.92,413.77Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M213.17,391.05h0l0-.1h0v-5h0a.4.4,0,0,0-.09-.24l-1.55-2.16a.71.71,0,0,0-.63-.3l-4.06.68a1.3,1.3,0,0,1-.77-.22,9.1,9.1,0,0,0-.8-.51V380h0c0-.13-.12-.25-.32-.3l-4.12-1a.79.79,0,0,0-.66.12l-2,2.07a.88.88,0,0,1-.64.2,21.77,21.77,0,0,0-2.68,0,1.1,1.1,0,0,1-.73-.32L192.36,379a.79.79,0,0,0-.68-.25l-4.28,1a.27.27,0,0,0-.22.28v3.21a9.23,9.23,0,0,0-1,.61,1.12,1.12,0,0,1-.7.12l-3.93-.66a.69.69,0,0,0-.62.18l-1.7,2.37a.15.15,0,0,0,0,.11v0c0,.36,0,6.13,0,6.16a.29.29,0,0,0,0,.1v5a.41.41,0,0,0,.09.26l1.55,2.16a.74.74,0,0,0,.63.3l4-.69a1.26,1.26,0,0,1,.78.23c.25.17.52.34.8.5v3.21c0,.14.12.26.32.31l4.11,1a.77.77,0,0,0,.67-.13l2-2.07a.88.88,0,0,1,.64-.2,24,24,0,0,0,2.68,0,1,1,0,0,1,.72.31l1.77,1.85a.82.82,0,0,0,.68.26l4.28-1a.29.29,0,0,0,.22-.23c0-.07,0-3.26,0-3.26a11.2,11.2,0,0,0,1-.6,1,1,0,0,1,.7-.13l3.93.67a.67.67,0,0,0,.62-.19l1.7-2.37a.17.17,0,0,0,0-.11c0-.11,0-6,0-6.17Zm-22.89.13c.19-.13.39-.26.61-.39a11.8,11.8,0,0,1,10.64,0c.21.13.41.25.59.38a5.89,5.89,0,0,1-.64.42,11.82,11.82,0,0,1-8.16.92,9.18,9.18,0,0,1-2.41-.92C190.69,391.46,190.47,391.32,190.28,391.18Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M213.17,391.05h0l0-.1h0v-5h0a.4.4,0,0,0-.09-.24l-1.55-2.16a.71.71,0,0,0-.63-.3l-4.06.68a1.3,1.3,0,0,1-.77-.22,9.1,9.1,0,0,0-.8-.51V380h0c0-.13-.12-.25-.32-.3l-4.12-1a.79.79,0,0,0-.66.12l-2,2.07a.88.88,0,0,1-.64.2,21.77,21.77,0,0,0-2.68,0,1.1,1.1,0,0,1-.73-.32L192.36,379a.79.79,0,0,0-.68-.25l-4.28,1a.27.27,0,0,0-.22.28v3.21a9.23,9.23,0,0,0-1,.61,1.12,1.12,0,0,1-.7.12l-3.93-.66a.69.69,0,0,0-.62.18l-1.7,2.37a.15.15,0,0,0,0,.11v0c0,.36,0,6.13,0,6.16a.29.29,0,0,0,0,.1v5a.41.41,0,0,0,.09.26l1.55,2.16a.74.74,0,0,0,.63.3l4-.69a1.26,1.26,0,0,1,.78.23c.25.17.52.34.8.5v3.21c0,.14.12.26.32.31l4.11,1a.77.77,0,0,0,.67-.13l2-2.07a.88.88,0,0,1,.64-.2,24,24,0,0,0,2.68,0,1,1,0,0,1,.72.31l1.77,1.85a.82.82,0,0,0,.68.26l4.28-1a.29.29,0,0,0,.22-.23c0-.07,0-3.26,0-3.26a11.2,11.2,0,0,0,1-.6,1,1,0,0,1,.7-.13l3.93.67a.67.67,0,0,0,.62-.19l1.7-2.37a.17.17,0,0,0,0-.11c0-.11,0-6,0-6.17Zm-22.89.13c.19-.13.39-.26.61-.39a11.8,11.8,0,0,1,10.64,0c.21.13.41.25.59.38a5.89,5.89,0,0,1-.64.42,11.82,11.82,0,0,1-8.16.92,9.18,9.18,0,0,1-2.41-.92C190.69,391.46,190.47,391.32,190.28,391.18Z"
-          style="opacity: 0.3"></path>
-        <path d="M179.23,386h0v0s0,0,0,0A.09.09,0,0,0,179.23,386Z" style="fill: currentcolor"></path>
-        <path d="M188.12,382.74c-.33.15-.64.31-.94.48V380a.28.28,0,0,0,0,.17l1,2A.38.38,0,0,1,188.12,382.74Z"
-          style="opacity: 0.3"></path>
-        <path
-          d="M183.41,387.81a4,4,0,0,0,0,1.34.42.42,0,0,1-.27.47l-3.7,1.17a.26.26,0,0,0-.18.24c0,.07,0,1.2,0,1.2l0-.09c0-2.1,0-5.61,0-5.92V386c0,.12.12.23.3.28l3.49,1.11A.49.49,0,0,1,183.41,387.81Z"
-          style="opacity: 0.15"></path>
-        <path d="M185.72,393v6.18h-.15l-4,.68a.47.47,0,0,1-.2,0v-6.18a.5.5,0,0,0,.21,0l4.05-.68Z" style="opacity: 0.15">
-        </path>
-        <path
-          d="M187.15,400c-.28-.16-.55-.33-.8-.5a1.51,1.51,0,0,0-.63-.23V393a1.42,1.42,0,0,1,.64.23,12.15,12.15,0,0,0,1.64.94c.24.12.37.33.29.49l-1.11,2.2a.3.3,0,0,0,0,.1C187.16,397.12,187.15,400,187.15,400Z"
-          style="opacity: 0.25"></path>
-        <path
-          d="M194.47,395.94v6.18a.55.55,0,0,0-.25.14l-2,2.07a.54.54,0,0,1-.36.14v-6.18a.55.55,0,0,0,.37-.14l2-2.07A.76.76,0,0,1,194.47,395.94Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M197.8,395.92v6.18a.61.61,0,0,0-.26,0,24,24,0,0,1-2.68,0,1,1,0,0,0-.39.06v-6.18a1.08,1.08,0,0,1,.4-.06,21.78,21.78,0,0,0,2.68,0A.59.59,0,0,1,197.8,395.92Z"
-          style="opacity: 0.25"></path>
-        <path
-          d="M200.42,398.27v6.18a.86.86,0,0,1-.39-.23l-1.76-1.85a1.06,1.06,0,0,0-.47-.27v-6.18a1.16,1.16,0,0,1,.47.27L200,398A.83.83,0,0,0,200.42,398.27Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M205.21,397.05V400h0v3.26a.29.29,0,0,1-.22.23l-4.28,1a.49.49,0,0,1-.29,0v-6.18a.54.54,0,0,0,.3,0l4.28-1A.25.25,0,0,0,205.21,397.05Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M205.21,397.05V400h0v3.26a.29.29,0,0,1-.22.23l-4.28,1a.49.49,0,0,1-.29,0v-6.18a.54.54,0,0,0,.3,0l4.28-1A.25.25,0,0,0,205.21,397.05Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M206.59,393.05v6.18a.91.91,0,0,0-.42.13,11.2,11.2,0,0,1-1,.6s0-2.83,0-3a.41.41,0,0,0-.05-.17l-1-2a.36.36,0,0,1,.12-.51,11.52,11.52,0,0,0,1.9-1.09A.87.87,0,0,1,206.59,393.05Z"
-          style="opacity: 0.15"></path>
-        <path
-          d="M213.17,391.06c0,.21,0,6.06,0,6.17a.17.17,0,0,1,0,.11l-1.7,2.37a.52.52,0,0,1-.29.17v-6.17a.66.66,0,0,0,.3-.17l1.7-2.38A.21.21,0,0,0,213.17,391.06Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M213.17,391.06c0,.21,0,6.06,0,6.17a.17.17,0,0,1,0,.11l-1.7,2.37a.52.52,0,0,1-.29.17v-6.17a.66.66,0,0,0,.3-.17l1.7-2.38A.21.21,0,0,0,213.17,391.06Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M213.17,391.06c0,.21,0,6.06,0,6.17a.17.17,0,0,1,0,.11l-1.7,2.37a.52.52,0,0,1-.29.17v-6.17a.66.66,0,0,0,.3-.17l1.7-2.38A.21.21,0,0,0,213.17,391.06Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M187.18,380v0a.37.37,0,0,0,0,.16l1,2a.37.37,0,0,1-.13.52c-.33.15-.64.31-.94.48a9.23,9.23,0,0,0-1,.61,1.12,1.12,0,0,1-.7.12l-3.93-.66a.69.69,0,0,0-.62.18l-1.7,2.37a.15.15,0,0,0,0,.11v0c0,.11.12.21.3.27l3.49,1.11a.49.49,0,0,1,.39.46,4,4,0,0,0,0,1.34.42.42,0,0,1-.27.47l-3.7,1.17a.25.25,0,0,0-.17.24.49.49,0,0,0,.08.24l1.55,2.16a.76.76,0,0,0,.64.3l4.05-.68a1.2,1.2,0,0,1,.78.22,12.15,12.15,0,0,0,1.64.94c.24.12.37.33.29.49l-1.11,2.2c-.08.16.06.33.3.4l4.11,1a.77.77,0,0,0,.67-.13l2-2.07a1,1,0,0,1,.64-.2,24,24,0,0,0,2.68,0,1,1,0,0,1,.72.31L200,398a.82.82,0,0,0,.68.26l4.28-1a.29.29,0,0,0,.17-.45l-1-2a.35.35,0,0,1,.13-.51,11.84,11.84,0,0,0,1.89-1.09,1,1,0,0,1,.71-.12l3.92.66a.69.69,0,0,0,.63-.19l1.7-2.37a.14.14,0,0,0,0-.1h0l0-.1h0a.47.47,0,0,0-.27-.19l-3.5-1.1c-.24-.08-.41-.29-.38-.47a4.56,4.56,0,0,0,0-1.33.43.43,0,0,1,.27-.48l3.7-1.17a.23.23,0,0,0,.17-.22h0a.4.4,0,0,0-.09-.24l-1.55-2.16a.71.71,0,0,0-.63-.3l-4.06.68a1.3,1.3,0,0,1-.77-.22,9.1,9.1,0,0,0-.8-.51c-.27-.15-.55-.3-.84-.44s-.38-.33-.3-.48l1.12-2.21a.29.29,0,0,0,0-.09c0-.13-.12-.25-.32-.3l-4.12-1a.79.79,0,0,0-.66.12l-2,2.07a.88.88,0,0,1-.64.2,21.77,21.77,0,0,0-2.68,0,1.1,1.1,0,0,1-.73-.32L192.36,379a.79.79,0,0,0-.68-.25l-4.28,1A.27.27,0,0,0,187.18,380Zm15.55,6.35a1.14,1.14,0,0,1,.11.11l.07.07.15.19c.06.07.11.15.16.22l.09.15,0,.06a2.65,2.65,0,0,1-.21,3,4.45,4.45,0,0,1-1,1,5.89,5.89,0,0,1-.64.42,11.82,11.82,0,0,1-8.16.92,9.18,9.18,0,0,1-2.41-.92c-.22-.13-.44-.27-.63-.41a4.26,4.26,0,0,1-1.28-1.43s0,0,0,0a.2.2,0,0,1,0-.08.36.36,0,0,1,0-.09.36.36,0,0,1,0-.09,2.66,2.66,0,0,1,.38-2.63c1.59-2.21,6-3.27,9.82-2.35A7.61,7.61,0,0,1,202.73,386.36Z"
-          style="fill: currentcolor"></path>
-      </g>
-    </g>
-    <g id="freepik--Wrench--inject-87">
-      <g id="freepik--wrench--inject-87">
-        <path
-          d="M236.85,372.18c-.85.49-2.44.47-2.94,1.05v2.08l9.68-1.41,3.66,2.14L245.86,379l-9.78-.65v2.08a6.19,6.19,0,0,0,.66.42,16.48,16.48,0,0,0,14.92.07c2.09-1.19,3.14-2.76,3.14-4.33h0v-2.08l-.58.09-.06-.11,36.63-21.15a16.63,16.63,0,0,0,11-1.38,6.13,6.13,0,0,0,2.94-3.13V346.7l-9.68,3.49-3.66-2.14,1.39-2.91,9.78-1.43v-2.09s-11.43-.76-15.58,1.6a6.89,6.89,0,0,0-2.59,2.39l-.55-.2v2.07h0a4,4,0,0,0,.64,2.17L247.87,370.8A16.6,16.6,0,0,0,236.85,372.18Z"
-          style="fill: #37474f"></path>
-        <polygon points="290.79 353.29 290.8 351.2 254.16 372.35 254.16 374.44 290.79 353.29" style="fill: #37474f">
-        </polygon>
-        <path
-          d="M284.51,347.57l-36.63,21.15a16.57,16.57,0,0,0-11,1.38,6.1,6.1,0,0,0-2.94,3.13l9.68-1.42,3.66,2.15-1.39,2.91-9.78,1.43c.21.14.42.28.66.42a16.48,16.48,0,0,0,14.92.06c3-1.73,3.87-4.26,2.5-6.43l36.63-21.15a16.57,16.57,0,0,0,11-1.38,6.12,6.12,0,0,0,2.94-3.12l-9.68,1.41L291.42,346l1.39-2.9,9.78-1.44-.66-.42a16.51,16.51,0,0,0-14.92-.06C284,342.87,283.14,345.4,284.51,347.57Z"
-          style="fill: #455a64"></path>
-        <polygon
-          points="292.2 346.42 291.42 345.96 292.81 343.06 302.59 341.62 302.59 343.71 292.81 345.14 292.2 346.42"
-          style="fill: #263238"></polygon>
-        <polygon
-          points="246.47 375.59 247.25 373.96 243.59 371.81 233.91 373.23 233.91 375.31 243.59 373.9 246.47 375.59"
-          style="fill: #263238"></polygon>
-      </g>
-    </g>
-    <g id="freepik--Screwdriver--inject-87">
-      <g id="freepik--screwdriver--inject-87">
-        <path
-          d="M259.26,403l7.66,13.26,25.83-14.91c1.06-.53,1.73-1.77,1.73-3.58a12,12,0,0,0-5.42-9.38,3.82,3.82,0,0,0-3.84-.38h0Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M257.72,405.71h0c-.11,2-3,2.45-3,2.45l5.41,9.38s1.81-2.22,3.62-1.34h0c2.67,1.16,4.74-.28,4.74-3.46a12,12,0,0,0-5.42-9.39C260.33,401.75,258.06,402.82,257.72,405.71Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M257.72,405.71h0c-.11,2-3,2.45-3,2.45l5.41,9.38s1.81-2.22,3.62-1.34h0c2.67,1.16,4.74-.28,4.74-3.46a12,12,0,0,0-5.42-9.39C260.33,401.75,258.06,402.82,257.72,405.71Z"
-          style="opacity: 0.05"></path>
-        <path d="M256,407.76a5.79,5.79,0,0,1-1.29.4l5.41,9.38a6,6,0,0,1,1-.91A12.1,12.1,0,0,0,256,407.76Z"
-          style="opacity: 0.05"></path>
-        <path
-          d="M249.11,408.82l.45.79a5.69,5.69,0,0,0-.23,1.68,12,12,0,0,0,5.42,9.38,5.36,5.36,0,0,0,1.57.64l.45.78,1.81-1h0a3.81,3.81,0,0,0,1.58-3.51,12,12,0,0,0-5.41-9.38,3.81,3.81,0,0,0-3.83-.38h0Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M258.36,418.59a12,12,0,0,0-5.42-9.39c-3-1.73-5.42-.32-5.42,3.13a12,12,0,0,0,5.42,9.38C255.93,423.44,258.36,422,258.36,418.59Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M258.36,418.59a12,12,0,0,0-5.42-9.39c-3-1.73-5.42-.32-5.42,3.13a12,12,0,0,0,5.42,9.38C255.93,423.44,258.36,422,258.36,418.59Z"
-          style="opacity: 0.15"></path>
-        <path d="M250.83,420a10.68,10.68,0,0,0,1.34,1.2l1.27-3.61-1.53-1.13Z" style="opacity: 0.15"></path>
-        <path
-          d="M290.07,394h0a1.49,1.49,0,0,1-.55,2l-18.45,10.65a1.49,1.49,0,0,1-2-.55h0a1.49,1.49,0,0,1,.55-2L288,393.47A1.49,1.49,0,0,1,290.07,394Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M286.74,390.05h0a.87.87,0,0,1-.07,1.53l-18.79,10.85a2.06,2.06,0,0,1-2.18-.23h0a.88.88,0,0,1,.07-1.54l18.8-10.85A2,2,0,0,1,286.74,390.05Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M291.84,398.89h0a.87.87,0,0,0-1.36-.71L271.68,409a2.06,2.06,0,0,0-.88,2h0a.87.87,0,0,0,1.36.71L291,400.89A2.05,2.05,0,0,0,291.84,398.89Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M205.43,440.47v3.61l9-2.93s1.81-3.32,3.61-4.37L252.39,417l1.05-3-1.05-.61-34.32,19.81a3.61,3.61,0,0,1-3.61-.19Z"
-          style="fill: #455a64"></path>
-        <path d="M206.49,441.08v3.61l9-2.93s1.81-3.32,3.61-4.36l34.31-19.81V414l-34.31,19.81a3.59,3.59,0,0,1-3.61-.19Z"
-          style="fill: #37474f"></path>
-        <polygon points="206.49 444.69 205.43 444.08 205.43 440.47 206.49 441.08 206.49 444.69" style="fill: #263238">
-        </polygon>
-        <polygon points="205.43 440.47 206.49 441.08 215.52 433.59 214.46 432.98 205.43 440.47" style="fill: #455a64">
-        </polygon>
-      </g>
-    </g>
-    <g id="freepik--Character--inject-87">
-      <g id="freepik--character--inject-87">
-        <path
-          d="M357.56,210c5.84-6,16.41-19.63,16.41-19.63l6-20.71c.15.06-3.05.07-4,0-6.46.43-8.36,1-12.38,5.38-3.19,3.49-15.36,20.12-19.6,25.71l-11.23-14.31c-2.69-4.07-2.25-8.62-3.65-11.94s-3.65-4.79-5.46-7.8-2.24-5-3.72-3.43.23,5.68.45,6.62,2.48,3.75-1.3,2.29-9.62-8.37-11.13-9.79-2.3.78-2,2.51-1.28,5.63-.69,8.49c.62,3,1.07,4.43,4,7.38,2.72,2.75,9.4,6.11,12,9.72s8.18,14.81,11.59,21.56c4.32,8.58,8,11.41,12.88,8.52S355.39,212.23,357.56,210Z"
-          style="fill: #ffa8a7"></path>
-        <path
-          d="M378.05,169.46a21.46,21.46,0,0,0-9.74,1.33c-3.51,1.58-5.89,5-9.31,9.56S347,196,347,196a25.79,25.79,0,0,1,10.42,14.65l20.9-23.1Z"
-          style="fill: #e0e0e0"></path>
-        <path d="M344,200.76A13.6,13.6,0,0,1,348,208.3s1.26-4.15-3.11-8.82Z" style="fill: #f28f8f"></path>
-        <path
-          d="M398.16,169.39c2.27.55,8.37,1.33,12.39,2.48,3,.85,6,4.53,6.58,7.25,2,8.71.22,14.19-.52,21.82s-.79,45.7-.79,45.7c-4.23,8.26-36.28,9.94-51.79-1.39,0,0,1.9-50.68,1.9-58.57s4.38-17.36,16.48-18.07Z"
-          style="fill: #f5f5f5"></path>
-        <path d="M384.46,144.43a1.68,1.68,0,1,0,1.67-1.74A1.71,1.71,0,0,0,384.46,144.43Z" style="fill: #263238"></path>
-        <path d="M386.13,138.77l3.46,1.91a2.07,2.07,0,0,0-.8-2.75A1.93,1.93,0,0,0,386.13,138.77Z" style="fill: #263238">
-        </path>
-        <path d="M384.88,154.65,381,156.1a2,2,0,0,0,2.63,1.29A2.17,2.17,0,0,0,384.88,154.65Z" style="fill: #f28f8f">
-        </path>
-        <path d="M371.1,140.16l3.15-2.43a1.91,1.91,0,0,0-2.74-.42A2.09,2.09,0,0,0,371.1,140.16Z" style="fill: #263238">
-        </path>
-        <path d="M371.81,144.43a1.62,1.62,0,1,0,1.62-1.68A1.65,1.65,0,0,0,371.81,144.43Z" style="fill: #263238"></path>
-        <polygon points="380.58 141.64 380.03 151.82 374.71 150.01 380.58 141.64" style="fill: #f28f8f"></polygon>
-        <path
-          d="M384.48,142.09l23.81-1.76c4.61,3.49,13.17,10.83,13.16,12.86h0v1.41h0a.48.48,0,0,1-.05.18c-.84,1.6-3.88,2.59-8.61,2.67-5.61.09-14.32-.42-16.61-2.39-3.44-3-11.7-11.63-11.7-11.63l1.2-.09Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M384.48,142.09l23.81-1.76c4.61,3.49,13.17,10.83,13.16,12.86h0v1.41h0a.48.48,0,0,1-.05.18c-.84,1.6-3.88,2.59-8.61,2.67-5.61.09-14.32-.42-16.61-2.39-3.44-3-11.7-11.63-11.7-11.63l1.2-.09Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M408.29,141.67c4.81,3.65,14,11.5,13.11,13.11s-3.88,2.59-8.61,2.67c-5.61.09-14.32-.42-16.61-2.39-3.44-3-11.7-11.63-11.7-11.63Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M408.29,141.67c4.81,3.65,14,11.5,13.11,13.11s-3.88,2.59-8.61,2.67c-5.61.09-14.32-.42-16.61-2.39-3.44-3-11.7-11.63-11.7-11.63Z"
-          style="opacity: 0.4"></path>
-        <path d="M408.29,141.67c.08.69-2.35,2.13-2.35,2.13l.68-4.18Z" style="fill: currentcolor"></path>
-        <path d="M408.29,141.67c.08.69-2.35,2.13-2.35,2.13l.68-4.18Z" style="opacity: 0.3"></path>
-        <path
-          d="M402,127.76s3.72.52,5.09,3.32c1.18,2.44.76,8.33-.83,14.75a59.07,59.07,0,0,1-4,12,4.9,4.9,0,0,1-2.84,2.28l.19-7.62.28-5.3s-3.41-4.65-3.78-8.46c-.49-4.91.55-6.91.55-6.91Z"
-          style="fill: #263238"></path>
-        <path
-          d="M396,135.13a14.22,14.22,0,0,1-14.26,14.17c-7.85,0-13.74-6.47-13.71-14.32s5.95-14.14,13.8-14.11A14.22,14.22,0,0,1,396,135.13Z"
-          style="fill: #263238"></path>
-        <path
-          d="M399.71,146.39c1.28,1.11,2.32-1.76,3.4-2.88s4.59-2.64,6.32,1.05-1.53,9-4.23,10.07a3.84,3.84,0,0,1-4.58-1.4V170.1c-4,7.29-11.18,7.07-15,6.65s-4.65-4.37-1.86-7.57l0-5.22a30.05,30.05,0,0,1-6.41.31c-3.49-.55-5.32-3.19-6.36-7-1.69-6.08-2.36-16.3,0-28.11,3.91-3,17.48-2.53,25.69,2.68C396.09,142.34,398.44,145.28,399.71,146.39Z"
-          style="fill: #ffa8a7"></path>
-        <path
-          d="M372.46,124a16.75,16.75,0,0,1,5.77-4,14.62,14.62,0,0,1,5.55-1.18c2.48,0,5-.37,7.43-.29,4.3.14,9.5,1.89,11.44,6.07.89,1.92,1,3.94-.72,5.26a12.14,12.14,0,0,1-5.24,2c-3.19.55-6.35,1.25-9.56,1.68a28.57,28.57,0,0,1-10.35-.15,13.61,13.61,0,0,1-4.5-1.92,12,12,0,0,1-1.94-1.62c-.23-.23-.84-.71-.91-1s.34-1,.51-1.26A15.87,15.87,0,0,1,372.46,124Z"
-          style="fill: #263238"></path>
-        <path
-          d="M383.79,164s7.81-1.54,10.54-3a9,9,0,0,0,3.78-3.72,12.37,12.37,0,0,1-2.15,4.39c-2,2.54-12.18,4.39-12.18,4.39Z"
-          style="fill: #f28f8f"></path>
-        <path d="M385.9,143.76a1.65,1.65,0,1,0,1.65-1.71A1.68,1.68,0,0,0,385.9,143.76Z" style="fill: #263238"></path>
-        <path d="M382.14,156.42a1.65,1.65,0,1,0,1.65-1.71A1.67,1.67,0,0,0,382.14,156.42Z" style="fill: #f28f8f"></path>
-        <path d="M388.15,137.39l3.17,2.48A2.12,2.12,0,0,0,391,137,2,2,0,0,0,388.15,137.39Z" style="fill: #263238">
-        </path>
-        <path d="M371.31,139.92l3.06-2.66a2,2,0,0,0-2.82-.27A2.14,2.14,0,0,0,371.31,139.92Z" style="fill: #263238">
-        </path>
-        <path d="M372.35,143.27a1.65,1.65,0,1,0,1.65-1.71A1.68,1.68,0,0,0,372.35,143.27Z" style="fill: #263238"></path>
-        <polygon points="381.39 140.45 380.77 152.13 375.23 150.67 381.39 140.45" style="fill: #f28f8f"></polygon>
-        <path
-          d="M409.31,135.88a20.63,20.63,0,0,1-1,5.91,7.23,7.23,0,0,0-1.46-1.65A35,35,0,0,0,396.13,134h0c-9-3.48-19.5-4-27.89-1.06a18.87,18.87,0,0,1,1.12-5c3.06-8,9.25-12.15,19.13-11.12C400.06,118,409.62,124.42,409.31,135.88Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M388.1,128.83c-2.69-.91-9.55-1.44-11.55-.81a12.35,12.35,0,0,1-2.41-2.66c-.94-1.49-.62-3.36.26-3.75s.94.78,4.35,2.47a5.68,5.68,0,0,1-.28-3.45c.56-1.38,1.73,1.1,4.27,2.71S387.78,125.75,388.1,128.83Z"
-          style="fill: #263238"></path>
-        <path d="M423.2,162.72c2.24-1.84,15.82,14.25,10.14,18.88s-12.62-7-11.68-12.74S423.2,162.72,423.2,162.72Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M434.12,153.68c-3.4-4.17-12.43-14.19-14.43-16s-3.2-1.57-4.44-2a10.28,10.28,0,0,1-3.71-2.32,22.53,22.53,0,0,1-1.79-2.1A32.4,32.4,0,0,0,403,125c-2.68-1.85-5.62-3.22-8.36-5-1.64-1.05-3.42-2.82-1.56-4.63a4.48,4.48,0,0,1,2-1.07c4.65-1.22,8.81.22,13.45,1.2a39.46,39.46,0,0,1,5.93,1.73,10.13,10.13,0,0,1,2.65,1.38,36.9,36.9,0,0,1,4.35,4.4c3.19,3.91,5.89,5.12,9,7.83,3.67,3.17,20.12,14.8,23.59,18.26,2.88,2.87,2,5.24,1.62,6.06-2.05,4.71-4.49,6.46-7.37,9.44-.95,1-1.91,2-2.87,3-3.74,3.79-7.5,7.36-11.4,11-4.16,3.88-5.86,5.74-9.57,9.48a29.41,29.41,0,0,0-5.6,8.27c-6.71,1.53-11.29-12.67-8.89-20.9a10.64,10.64,0,0,1,3.9-5.13C420.71,164.86,434.12,153.68,434.12,153.68Z"
-          style="fill: #ffa8a7"></path>
-        <path d="M434.12,153.68a17.86,17.86,0,0,0,8.51,5.34s-4.27,1.28-10.4-3.77Z" style="fill: #f28f8f"></path>
-        <path
-          d="M410.55,171.87c1.53-1.2,5.25-3.76,12.65-9.15,0,0-1,2.56,1.21,8.7s6.42,9.88,8.93,10.18c0,0-4.11,3.66-7.85,7.74s-6.85,7-8.88,11.6c0,0-5.77-1.12-7.62-10.66C407.68,183.58,407.75,175.63,410.55,171.87Z"
-          style="fill: #e0e0e0"></path>
-        <path
-          d="M397.62,415.78c-.36.38-.13,3.14.32,3.77s3,2.73,7.64,2.81c4.45.08,8.38-.73,10.9-2.53s3.67-3.68,3.78-6.22-.3-5,.8-7c1-1.85,2.4-3.68,2.74-4.68a12.73,12.73,0,0,0,0-5.43Z"
-          style="fill: #263238"></path>
-        <path
-          d="M408.42,394.36a11.7,11.7,0,0,1-.39,2.84,25.51,25.51,0,0,1-2.42,5.7,23.18,23.18,0,0,1-1.7,2.71c-1.26,1.67-2.86,3.07-4.19,4.67a9.08,9.08,0,0,0-2.45,5.59c0,3.49,3.84,4.47,6.77,4.83a21.34,21.34,0,0,0,9.42-1,8.69,8.69,0,0,0,6-7.27c.11-1,0-2,.06-2.94a13.73,13.73,0,0,1,2.37-6.23,18.23,18.23,0,0,0,1.9-3.42c.79-2.2-.06-4.59-.76-6.7-.6-1.83-1.08-4-1.72-3.82,0,.38,0,1.19,0,1.19-.2.42-.66.72-.77,1.19a8.22,8.22,0,0,1-.45,1.46,3.77,3.77,0,0,1-1.45,1.79c-.12-1.31-.23-2.62-.35-3.93a1.79,1.79,0,0,0-.36-1.14,1.81,1.81,0,0,0-1.14-.42,24.67,24.67,0,0,0-7.47-.22,1.35,1.35,0,0,0-1,.49,1.44,1.44,0,0,0-.11.9A36,36,0,0,1,408.42,394.36Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M408.42,394.36a11.7,11.7,0,0,1-.39,2.84,25.51,25.51,0,0,1-2.42,5.7,23.18,23.18,0,0,1-1.7,2.71c-1.26,1.67-2.86,3.07-4.19,4.67a9.08,9.08,0,0,0-2.45,5.59c0,3.49,3.84,4.47,6.77,4.83a21.34,21.34,0,0,0,9.42-1,8.69,8.69,0,0,0,6-7.27c.11-1,0-2,.06-2.94a13.73,13.73,0,0,1,2.37-6.23,18.23,18.23,0,0,0,1.9-3.42c.79-2.2-.06-4.59-.76-6.7-.6-1.83-1.08-4-1.72-3.82,0,.38,0,1.19,0,1.19-.2.42-.66.72-.77,1.19a8.22,8.22,0,0,1-.45,1.46,3.77,3.77,0,0,1-1.45,1.79c-.12-1.31-.23-2.62-.35-3.93a1.79,1.79,0,0,0-.36-1.14,1.81,1.81,0,0,0-1.14-.42,24.67,24.67,0,0,0-7.47-.22,1.35,1.35,0,0,0-1,.49,1.44,1.44,0,0,0-.11.9A36,36,0,0,1,408.42,394.36Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M405.18,403.66c1.25-1,4.15-1.21,5.74-1.13a9.74,9.74,0,0,1,4.6,1.34,1,1,0,0,0,1.32-.18h0a1,1,0,0,0-.18-1.47,9.77,9.77,0,0,0-5.17-1.61c-3.92-.06-5,.67-5,.67S404.74,402.52,405.18,403.66Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M402.4,407.38c1.57-1.05,4.77-1.08,6.37-1a9.15,9.15,0,0,1,4.48,1.43,1,1,0,0,0,1.32-.17h0a1,1,0,0,0-.18-1.48,10.2,10.2,0,0,0-5.29-1.75c-3.92-.06-4.9.79-4.9.79A3.24,3.24,0,0,0,402.4,407.38Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M412.84,396.79a9.65,9.65,0,0,0-4.88.68c-.67.42-1.07,1.53-.61,1.79a9,9,0,0,1,4.32-.84,13,13,0,0,1,4.28.94,11.77,11.77,0,0,1,1.11.49.93.93,0,0,0,1.26-.47h0a.87.87,0,0,0-.4-1.1A12.54,12.54,0,0,0,412.84,396.79Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M343.7,401.82a4.22,4.22,0,0,0,.34,3.08c.48.88,5.36,3.3,11.71,2.52a26.56,26.56,0,0,0,12.95-5.32c2.35-1.74,4.86-2.18,8-2.53s5.52-1.45,6.13-3-.32-4-.32-4Z"
-          style="fill: #263238"></path>
-        <path
-          d="M368.47,381.6a13.6,13.6,0,0,1-1.69-.48,1.42,1.42,0,0,0-.95-.06,1.4,1.4,0,0,0-.62,1.1,16.25,16.25,0,0,1-.55,2.81,6.92,6.92,0,0,1-1.69,2,28.79,28.79,0,0,1-4.93,3.57c-2,1.23-4,2.21-6.12,3.3s-5,1.86-6.68,3.11c-2.41,1.82-2.51,6.08.43,7.6,2.54,1.32,9.1,2.53,15.79.24,3.65-1.24,7.54-5.42,12.38-6.06,3.07-.41,7.17-.89,9-3.34.67-1.08.08-4.09-.47-7.66-.49-3.2-.94-8.2-2-7.87,0,0-.38,1.18-.45,1.31a9.65,9.65,0,0,1-.85,1.14,11.13,11.13,0,0,1-.87.82,12.79,12.79,0,0,1-1.09,1.12,3.11,3.11,0,0,1-1.78.74,1.71,1.71,0,0,1-.89-.19c-.53-.3-.6-1-1-1.42a5.07,5.07,0,0,0-1.72-1.12,9.48,9.48,0,0,0-2.79-.56Z"
-          style="fill: currentcolor"></path>
-        <path
-          d="M368.47,381.6a13.6,13.6,0,0,1-1.69-.48,1.42,1.42,0,0,0-.95-.06,1.4,1.4,0,0,0-.62,1.1,16.25,16.25,0,0,1-.55,2.81,6.92,6.92,0,0,1-1.69,2,28.79,28.79,0,0,1-4.93,3.57c-2,1.23-4,2.21-6.12,3.3s-5,1.86-6.68,3.11c-2.41,1.82-2.51,6.08.43,7.6,2.54,1.32,9.1,2.53,15.79.24,3.65-1.24,7.54-5.42,12.38-6.06,3.07-.41,7.17-.89,9-3.34.67-1.08.08-4.09-.47-7.66-.49-3.2-.94-8.2-2-7.87,0,0-.38,1.18-.45,1.31a9.65,9.65,0,0,1-.85,1.14,11.13,11.13,0,0,1-.87.82,12.79,12.79,0,0,1-1.09,1.12,3.11,3.11,0,0,1-1.78.74,1.71,1.71,0,0,1-.89-.19c-.53-.3-.6-1-1-1.42a5.07,5.07,0,0,0-1.72-1.12,9.48,9.48,0,0,0-2.79-.56Z"
-          style="opacity: 0.2"></path>
-        <path
-          d="M360.83,388.68A2.87,2.87,0,0,1,363,387c1.39-.34,3.93.56,5.54,1.75a1.15,1.15,0,0,1-.06,1.91h0a1.14,1.14,0,0,1-1.32-.07A8.79,8.79,0,0,0,360.83,388.68Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M356.61,391.35a3.3,3.3,0,0,1,2.63-1.54s3.67-.09,6.06,1.9a1.13,1.13,0,0,1-.06,1.85h0a1.08,1.08,0,0,1-1.27-.08A8.9,8.9,0,0,0,356.61,391.35Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M351.92,393.81a3.69,3.69,0,0,1,2.74-1.41,9.86,9.86,0,0,1,5.81,1.94,1.13,1.13,0,0,1-.06,1.85h0a1.12,1.12,0,0,1-1.27-.08A8.42,8.42,0,0,0,351.92,393.81Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M362.17,243.55c-.17,14.61.77,63.89,1.09,71.24.28,6.44,1.4,69.82,1.4,69.82,7.38,2.29,17.48-.08,17.48-.08S387.28,345,387.61,338a119.81,119.81,0,0,0-1-19.28l3.78-40.33s4.13,30.2,6.12,43.42c2.28,15.15,10.81,73.17,10.81,73.17,6.79,2.64,16.3-1.11,16.3-1.11s-.49-45.14-1.17-60.48c-.48-10.59-3.43-15.74-3.75-18.68,0,0-1.47-55-1.63-68.94-.1-9.34-1.11-19.6-1.11-19.6s-10.2.82-11.1-2.15,0-31.52.38-37.07c0,0-21.44-4.77-40-1.25C365.25,185.66,362.35,228.94,362.17,243.55Z"
-          style="fill: #455a64"></path>
-        <path
-          d="M405.31,232c-.11,9.71,1.6,15.74,4.18,17.84s7.66,1.94,7.66,1.94v-1.45s-4.8.71-6.95-1.54S406.09,243.3,405.31,232Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M372.31,196s11.13,0,21.66.72c0,0,.07,8.13-.84,11.09s-7.92,7.39-10.83,7.38c-2.52,0-9.53-5-10.08-7.62S372.31,196,372.31,196Z"
-          style="fill: #37474f"></path>
-        <path d="M390.37,278.35l-1-6.24c-3-.45-10.73-5.25-15.29-9.45a36.22,36.22,0,0,0,12.79,11.78l.32,39.8Z"
-          style="fill: #37474f"></path>
-        <path
-          d="M410.55,171.87c-2-.51-3.13-.09-4.14,2.44s-2.17,10.75-2.56,18.44c0,0-4.63.84-7.84-.52,0,0,.39-10.1,1.47-15.31a18.61,18.61,0,0,1,1.5-4.44,4.64,4.64,0,0,1,5-2.53l7.32,1.34Z"
-          style="fill: #37474f"></path>
-        <path d="M401.79,189.35a1.82,1.82,0,1,1-1.82-1.82A1.82,1.82,0,0,1,401.79,189.35Z" style="fill: currentcolor">
-        </path>
-        <path
-          d="M383.76,169.18a8.43,8.43,0,0,0-7.44,5.13c-1.51,3.84-1.52,12.36-1.61,16.59a10.1,10.1,0,0,1-7.19,0s0-13.41,2.29-17.85,6.7-4.71,9-4.88a41.71,41.71,0,0,1,4.93,0Z"
-          style="fill: #37474f"></path>
-        <path d="M373.13,187.93a1.82,1.82,0,1,1-1.82-1.82A1.82,1.82,0,0,1,373.13,187.93Z" style="fill: currentcolor">
-        </path>
-      </g>
-    </g>
-    <g id="freepik--error-500--inject-87">
-      <g id="freepik--speech-bubble--inject-87">
-        <g id="freepik--Text--inject-87">
-          <path
-            d="M220.56,123.12c.27.39.58.79.91,1.2a3.65,3.65,0,0,0,1.2,1,3.49,3.49,0,0,0,1.71.33,5.26,5.26,0,0,0,2.35-.81,10.8,10.8,0,0,0,2.34-1.86,13.47,13.47,0,0,0,2-2.64,14.18,14.18,0,0,0,1.38-3.24,13.43,13.43,0,0,0,.5-3.72c0-2-.52-3.42-1.56-4.12s-2.46-.52-4.25.52a6.7,6.7,0,0,0-1.56,1.26c-.49.52-.94,1-1.35,1.54L223.09,114a3.47,3.47,0,0,1-.89.87l-9.15,5.29a.91.91,0,0,1-1.18,0,1.85,1.85,0,0,1-.41-1.48l1.76-33.29a5.72,5.72,0,0,1,.5-2A2.89,2.89,0,0,1,214.81,82l25.12-14.51a.86.86,0,0,1,1.12.08,1.94,1.94,0,0,1,.47,1.45v9.58a4.71,4.71,0,0,1-.47,2,2.91,2.91,0,0,1-1.12,1.36L222.85,91.8l-.41,8.28a21.2,21.2,0,0,1,2.44-2.9,14.35,14.35,0,0,1,3-2.33,15.18,15.18,0,0,1,6.31-2.2,7.62,7.62,0,0,1,5,1.24,9.55,9.55,0,0,1,3.35,4.76,24.94,24.94,0,0,1,1.2,8.43,39.65,39.65,0,0,1-1.32,10.34,40.32,40.32,0,0,1-3.64,9.11,35.8,35.8,0,0,1-5.43,7.43,30.63,30.63,0,0,1-6.69,5.31,17.17,17.17,0,0,1-7.14,2.53,8.28,8.28,0,0,1-5.31-1.18,9,9,0,0,1-3.35-4.21,17.42,17.42,0,0,1-1.23-6.47,3.8,3.8,0,0,1,.38-1.62,2.52,2.52,0,0,1,.91-1.12l7.46-4.3c.62-.36,1.1-.46,1.44-.29A1.84,1.84,0,0,1,220.56,123.12Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M266.23,51.38q4.41-2.54,7.57-2.38a7.59,7.59,0,0,1,5.26,2.3,13.3,13.3,0,0,1,3.11,6,38.92,38.92,0,0,1,1.2,8.66q.12,3.83.12,8.07t-.12,8a60.14,60.14,0,0,1-1.2,10.05,43.56,43.56,0,0,1-3.11,9.61,37.46,37.46,0,0,1-5.26,8.37,27.9,27.9,0,0,1-7.57,6.36c-2.93,1.69-5.46,2.49-7.57,2.38a7.51,7.51,0,0,1-5.25-2.3,13.25,13.25,0,0,1-3.12-6,40,40,0,0,1-1.2-8.66Q249,98.23,249,94t.12-8.21a62.05,62.05,0,0,1,1.2-10,43.67,43.67,0,0,1,3.12-9.62,37.06,37.06,0,0,1,5.25-8.37A28.05,28.05,0,0,1,266.23,51.38Zm6.28,36.51q.24-7.81,0-15.19a27.71,27.71,0,0,0-.44-3.9,6.86,6.86,0,0,0-1-2.71A2.6,2.6,0,0,0,269.17,65a5.06,5.06,0,0,0-2.94.89,10,10,0,0,0-2.93,2.5,12.82,12.82,0,0,0-1.88,3.3,20.17,20.17,0,0,0-1.06,3.91A32.37,32.37,0,0,0,260,80q-.3,7.67,0,15.18a25.69,25.69,0,0,0,.38,3.94,6.45,6.45,0,0,0,1.06,2.68,2.66,2.66,0,0,0,1.91,1.12,5,5,0,0,0,2.93-.88,10.28,10.28,0,0,0,2.94-2.51,13.43,13.43,0,0,0,1.91-3.32,17.28,17.28,0,0,0,1.05-3.91A33.37,33.37,0,0,0,272.51,87.89Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M306.62,28.07c2.93-1.7,5.46-2.49,7.57-2.39a7.66,7.66,0,0,1,5.26,2.3,13.55,13.55,0,0,1,3.11,6,39.51,39.51,0,0,1,1.2,8.66q.12,3.83.12,8.07c0,2.83,0,5.51-.12,8a61.2,61.2,0,0,1-1.2,10,44.64,44.64,0,0,1-3.11,9.61,37.36,37.36,0,0,1-5.26,8.37,27.87,27.87,0,0,1-7.57,6.36c-2.94,1.7-5.46,2.49-7.57,2.39a7.64,7.64,0,0,1-5.26-2.3,13.45,13.45,0,0,1-3.11-6,39.51,39.51,0,0,1-1.2-8.66q-.12-3.64-.12-7.89c0-2.83,0-5.57.12-8.2a61.2,61.2,0,0,1,1.2-10.05,44.35,44.35,0,0,1,3.11-9.62,37.17,37.17,0,0,1,5.26-8.36A27.55,27.55,0,0,1,306.62,28.07Zm6.28,36.5q.24-7.81,0-15.19a29.28,29.28,0,0,0-.44-3.9,6.75,6.75,0,0,0-1-2.7,2.55,2.55,0,0,0-1.88-1.13,5,5,0,0,0-2.93.88A10.12,10.12,0,0,0,303.68,45a13.08,13.08,0,0,0-1.88,3.3,19.88,19.88,0,0,0-1.05,3.9,32.37,32.37,0,0,0-.41,4.4q-.3,7.67,0,15.18a24.49,24.49,0,0,0,.38,3.94,6.36,6.36,0,0,0,1.06,2.69,2.68,2.68,0,0,0,1.9,1.11,5,5,0,0,0,2.94-.88,10.08,10.08,0,0,0,2.93-2.51,13.23,13.23,0,0,0,1.91-3.31A18,18,0,0,0,312.52,69,35.52,35.52,0,0,0,312.9,64.57Z"
-            style="fill: currentcolor"></path>
-          <path
-            d="M243.26,179.32a.29.29,0,0,1,.39,0,.68.68,0,0,1,.17.51v3.4a1.64,1.64,0,0,1-.17.7,1.06,1.06,0,0,1-.39.49l-9.87,5.69a.29.29,0,0,1-.39,0,.68.68,0,0,1-.17-.51V168.9a1.64,1.64,0,0,1,.17-.7,1.06,1.06,0,0,1,.39-.49l9.7-5.6a.32.32,0,0,1,.4,0,.69.69,0,0,1,.16.51v3.4a1.62,1.62,0,0,1-.16.7,1.14,1.14,0,0,1-.4.49l-6.41,3.7v3.46l5.95-3.44a.33.33,0,0,1,.4,0,.7.7,0,0,1,.16.52v3.39a1.66,1.66,0,0,1-.16.71,1,1,0,0,1-.4.48l-5.95,3.44v3.59Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M252.41,156.73a7.56,7.56,0,0,1,2.46-1,2.66,2.66,0,0,1,1.84.29,2.87,2.87,0,0,1,1.17,1.61,9.39,9.39,0,0,1,.4,3,13.87,13.87,0,0,1-.64,4.36,11.55,11.55,0,0,1-1.83,3.48l2.58,6.13a.91.91,0,0,1,.06.32,1.33,1.33,0,0,1-.14.57.84.84,0,0,1-.32.4l-2.83,1.63c-.28.16-.47.18-.59.06a1.62,1.62,0,0,1-.28-.42L252,171.69l-1.92,1.11v6.85a1.54,1.54,0,0,1-.17.71,1.08,1.08,0,0,1-.39.48l-2.73,1.58a.31.31,0,0,1-.39,0,.71.71,0,0,1-.17-.52V161.18a1.68,1.68,0,0,1,.17-.71,1.08,1.08,0,0,1,.39-.48Zm-2.35,11.07,2.35-1.36a4.46,4.46,0,0,0,1.45-1.35,3.83,3.83,0,0,0,.57-2.19c0-.89-.19-1.4-.57-1.52a1.81,1.81,0,0,0-1.45.32l-2.35,1.36Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M266.88,148.38a7.43,7.43,0,0,1,2.45-1,2.65,2.65,0,0,1,1.84.29,2.87,2.87,0,0,1,1.17,1.61,9.36,9.36,0,0,1,.41,3,13.86,13.86,0,0,1-.65,4.36,11.33,11.33,0,0,1-1.83,3.48l2.58,6.13a.91.91,0,0,1,.06.32,1.31,1.31,0,0,1-.13.57.8.8,0,0,1-.33.4l-2.83,1.63c-.27.16-.47.18-.59.06a1.62,1.62,0,0,1-.28-.42l-2.31-5.52-1.92,1.11v6.85a1.66,1.66,0,0,1-.16.71,1,1,0,0,1-.4.48l-2.72,1.57a.31.31,0,0,1-.4,0,.71.71,0,0,1-.17-.52V152.83a1.68,1.68,0,0,1,.17-.71,1,1,0,0,1,.4-.48Zm-2.36,11.07,2.36-1.36a4.42,4.42,0,0,0,1.44-1.35,3.83,3.83,0,0,0,.57-2.19c0-.89-.19-1.4-.57-1.52a1.79,1.79,0,0,0-1.44.32l-2.36,1.36Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M274.66,152.25a17.82,17.82,0,0,1,.51-3.67,16.31,16.31,0,0,1,1.27-3.49,14.33,14.33,0,0,1,2-3,10.27,10.27,0,0,1,2.71-2.26,5.43,5.43,0,0,1,2.71-.87,3,3,0,0,1,2,.69,4.47,4.47,0,0,1,1.28,2,11.08,11.08,0,0,1,.5,3.08c0,.91.05,1.86.05,2.86s0,1.95-.05,2.85a18.61,18.61,0,0,1-.5,3.67,16.62,16.62,0,0,1-1.28,3.5,13.54,13.54,0,0,1-2,3,10.55,10.55,0,0,1-2.71,2.24,5.61,5.61,0,0,1-2.71.89,2.91,2.91,0,0,1-2-.7,4.6,4.6,0,0,1-1.27-2,10.78,10.78,0,0,1-.51-3.09c0-.86,0-1.79,0-2.79S274.63,153.18,274.66,152.25Zm9.14.27c0-.39,0-.83,0-1.31s0-1,0-1.45,0-1,0-1.42,0-.85,0-1.2a5.57,5.57,0,0,0-.23-1.35,2,2,0,0,0-.49-.88,1.16,1.16,0,0,0-.8-.33,2.41,2.41,0,0,0-1.13.36,4.41,4.41,0,0,0-1.12.94,5.43,5.43,0,0,0-.8,1.25,6.79,6.79,0,0,0-.5,1.46,9.21,9.21,0,0,0-.22,1.6c0,.38-.05.8-.05,1.26s0,.94,0,1.43,0,1,0,1.44,0,.88.05,1.25a3.51,3.51,0,0,0,.72,2.25q.63.69,1.92-.06a4.6,4.6,0,0,0,1.92-2.16A9.15,9.15,0,0,0,283.8,152.52Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M296.28,131.4a7.47,7.47,0,0,1,2.46-1,2.66,2.66,0,0,1,1.84.29,2.85,2.85,0,0,1,1.16,1.62,9,9,0,0,1,.41,3,13.87,13.87,0,0,1-.64,4.36,11.35,11.35,0,0,1-1.84,3.48l2.58,6.14a.87.87,0,0,1,.07.31,1.34,1.34,0,0,1-.14.58.86.86,0,0,1-.32.39L299,152.25c-.28.16-.48.17-.6.05a1.53,1.53,0,0,1-.27-.41l-2.32-5.53-1.91,1.11v6.85a1.65,1.65,0,0,1-.17.71,1,1,0,0,1-.39.48l-2.73,1.58a.29.29,0,0,1-.39,0,.66.66,0,0,1-.17-.51v-20.7a1.48,1.48,0,0,1,.17-.7,1.06,1.06,0,0,1,.39-.49Zm-2.35,11.07,2.35-1.36a4.25,4.25,0,0,0,1.45-1.35,3.82,3.82,0,0,0,.57-2.18q0-1.35-.57-1.53a1.85,1.85,0,0,0-1.45.32l-2.35,1.36Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M210.63,172a.17.17,0,0,1-.23,0,.4.4,0,0,1-.09-.29v-12a1,1,0,0,1,.09-.4.7.7,0,0,1,.23-.29l1.58-.9a.16.16,0,0,1,.22,0,.38.38,0,0,1,.1.3v12a.88.88,0,0,1-.1.41.6.6,0,0,1-.22.28Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M220,166.6a.29.29,0,0,1-.33,0,.59.59,0,0,1-.16-.17l-2.75-4.74V168a1,1,0,0,1-.1.41.55.55,0,0,1-.23.28l-1.57.91a.18.18,0,0,1-.23,0,.39.39,0,0,1-.1-.3v-12a.85.85,0,0,1,.1-.4.55.55,0,0,1,.23-.28l1.25-.73a.31.31,0,0,1,.33,0,.49.49,0,0,1,.16.17l2.75,4.74v-6.26a.91.91,0,0,1,.1-.41.6.6,0,0,1,.23-.28l1.57-.91a.18.18,0,0,1,.23,0,.38.38,0,0,1,.1.3v11.95a.88.88,0,0,1-.1.41.6.6,0,0,1-.23.28Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M229.72,148a.18.18,0,0,1,.23,0,.41.41,0,0,1,.09.3v2a1,1,0,0,1-.09.41.67.67,0,0,1-.23.28l-2.12,1.22v9.49a1,1,0,0,1-.09.41.67.67,0,0,1-.23.28l-1.58.91a.18.18,0,0,1-.23,0,.41.41,0,0,1-.09-.3v-9.49l-2.12,1.22a.17.17,0,0,1-.22,0,.39.39,0,0,1-.1-.3v-2a.88.88,0,0,1,.1-.41.59.59,0,0,1,.22-.28Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M237.45,153.56a.17.17,0,0,1,.23,0,.41.41,0,0,1,.09.3v2a1,1,0,0,1-.09.41.67.67,0,0,1-.23.28l-5.7,3.29a.18.18,0,0,1-.23,0,.41.41,0,0,1-.09-.3v-12a1,1,0,0,1,.09-.41.67.67,0,0,1,.23-.28l5.6-3.23a.18.18,0,0,1,.23,0,.38.38,0,0,1,.1.3v2a.88.88,0,0,1-.1.41.6.6,0,0,1-.23.28l-3.7,2.14v2l3.44-2a.17.17,0,0,1,.23,0,.4.4,0,0,1,.09.29v2a1,1,0,0,1-.09.41.61.61,0,0,1-.23.28l-3.44,2v2.07Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M243,140.34a4,4,0,0,1,1.42-.56,1.49,1.49,0,0,1,1.06.16,1.69,1.69,0,0,1,.67.93,5.31,5.31,0,0,1,.24,1.75,8,8,0,0,1-.38,2.52,6.47,6.47,0,0,1-1.05,2l1.49,3.55a.57.57,0,0,1,0,.18.78.78,0,0,1-.07.33.57.57,0,0,1-.19.23l-1.64.94c-.16.1-.27.11-.34,0a1,1,0,0,1-.16-.25L242.79,149l-1.11.63v4a.86.86,0,0,1-.1.41.6.6,0,0,1-.22.28l-1.58.91a.18.18,0,0,1-.23,0,.43.43,0,0,1-.09-.3v-12a1,1,0,0,1,.09-.4.55.55,0,0,1,.23-.28Zm-1.36,6.39,1.36-.79a2.47,2.47,0,0,0,.83-.78,2.18,2.18,0,0,0,.33-1.26c0-.52-.11-.81-.33-.88a1.07,1.07,0,0,0-.83.18l-1.36.79Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M253.58,147.2q-.21.12-.33,0a.41.41,0,0,1-.16-.17l-2.76-4.74v6.26a1,1,0,0,1-.09.41.63.63,0,0,1-.23.27l-1.58.91a.17.17,0,0,1-.22,0,.38.38,0,0,1-.1-.3v-12a.86.86,0,0,1,.1-.41.6.6,0,0,1,.22-.28l1.25-.72a.31.31,0,0,1,.34,0,.78.78,0,0,1,.16.17l2.75,4.74v-6.26a.85.85,0,0,1,.1-.4.6.6,0,0,1,.22-.28l1.58-.91a.18.18,0,0,1,.23,0,.41.41,0,0,1,.09.3v11.95a1,1,0,0,1-.09.41.61.61,0,0,1-.23.28Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M261.59,129.63c.15-.1.28-.1.36,0a.75.75,0,0,1,.18.31l2.62,10.14a1,1,0,0,1,0,.25.78.78,0,0,1-.07.33.57.57,0,0,1-.19.23l-1.52.88c-.16.09-.27.1-.34,0a.39.39,0,0,1-.12-.24l-.34-1.34-3.2,1.85-.33,1.73a1.56,1.56,0,0,1-.13.38.82.82,0,0,1-.34.35l-1.52.88a.14.14,0,0,1-.18,0,.29.29,0,0,1-.08-.24,1.13,1.13,0,0,1,.05-.3l2.62-13.18a2.46,2.46,0,0,1,.17-.5.85.85,0,0,1,.37-.42Zm-1.95,9.21,1.95-1.13-1-3.87Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M272,133.63a.18.18,0,0,1,.23,0,.4.4,0,0,1,.09.29v2a1,1,0,0,1-.09.4.61.61,0,0,1-.23.28l-5.57,3.22a.18.18,0,0,1-.23,0,.41.41,0,0,1-.09-.3v-12a1,1,0,0,1,.09-.41.67.67,0,0,1,.23-.28l1.58-.91a.17.17,0,0,1,.22,0,.37.37,0,0,1,.1.29v9.5Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M279.3,119.21a3.21,3.21,0,0,1,1.41-.47,2,2,0,0,1,1.11.24,1.81,1.81,0,0,1,.74.76,2.34,2.34,0,0,1,.27,1.08.78.78,0,0,1-.07.33c-.06.11-.11.19-.18.22l-1.57.91a.42.42,0,0,1-.27.08.41.41,0,0,1-.21-.1.66.66,0,0,1-.12-.12.64.64,0,0,0-.22-.14,1,1,0,0,0-.36,0,1.54,1.54,0,0,0-.53.2,4.27,4.27,0,0,0-.44.3,3.23,3.23,0,0,0-.37.37,1.39,1.39,0,0,0-.26.44,1.27,1.27,0,0,0-.11.52.52.52,0,0,0,.12.39.54.54,0,0,0,.38.13,3.41,3.41,0,0,0,.72-.11l1.1-.29a3.66,3.66,0,0,1,1.16-.15,1.34,1.34,0,0,1,.82.32,1.59,1.59,0,0,1,.49.82,5,5,0,0,1,.16,1.41,6.42,6.42,0,0,1-.27,1.85,7.33,7.33,0,0,1-.78,1.71,7.69,7.69,0,0,1-1.17,1.49,7.32,7.32,0,0,1-1.49,1.13,3.59,3.59,0,0,1-1.49.53,2,2,0,0,1-1.16-.21A1.82,1.82,0,0,1,276,132a2.65,2.65,0,0,1-.29-1.22.67.67,0,0,1,.08-.33.45.45,0,0,1,.17-.22l1.58-.91a.42.42,0,0,1,.26-.09.52.52,0,0,1,.19.08l.15.16a.76.76,0,0,0,.26.19.72.72,0,0,0,.41.07,1.43,1.43,0,0,0,.6-.22,4.58,4.58,0,0,0,1.07-.82,1.49,1.49,0,0,0,.42-1c0-.19-.05-.31-.16-.37a.69.69,0,0,0-.46-.07,3.75,3.75,0,0,0-.8.15l-1.15.3a1.74,1.74,0,0,1-1.81-.32,3.31,3.31,0,0,1-.57-2.22,6.55,6.55,0,0,1,.23-1.65,8.25,8.25,0,0,1,.68-1.67,7.93,7.93,0,0,1,1.08-1.5A5.89,5.89,0,0,1,279.3,119.21Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M290.6,122.87a.17.17,0,0,1,.23,0,.4.4,0,0,1,.09.29v2a1,1,0,0,1-.09.41.67.67,0,0,1-.23.28l-5.7,3.29a.18.18,0,0,1-.23,0,.4.4,0,0,1-.09-.29v-12a1,1,0,0,1,.09-.41.67.67,0,0,1,.23-.28l5.6-3.23a.17.17,0,0,1,.23,0,.37.37,0,0,1,.1.29v2a.86.86,0,0,1-.1.41.55.55,0,0,1-.23.28L286.8,118v2l3.44-2a.18.18,0,0,1,.23,0,.41.41,0,0,1,.09.3v2a1,1,0,0,1-.09.4.61.61,0,0,1-.23.28l-3.44,2v2.07Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M296.19,109.65a4.24,4.24,0,0,1,1.42-.56,1.54,1.54,0,0,1,1.06.16,1.74,1.74,0,0,1,.68.94,5.51,5.51,0,0,1,.23,1.74,8,8,0,0,1-.38,2.52,6.42,6.42,0,0,1-1.05,2l1.49,3.54a.57.57,0,0,1,0,.18.86.86,0,0,1-.07.34.47.47,0,0,1-.19.22l-1.63,1c-.16.09-.28.1-.35,0a1,1,0,0,1-.16-.24l-1.33-3.19-1.11.64v4a.85.85,0,0,1-.1.4.6.6,0,0,1-.22.28l-1.58.91a.18.18,0,0,1-.23,0,.41.41,0,0,1-.09-.3v-12a1,1,0,0,1,.09-.41.61.61,0,0,1,.23-.28ZM294.83,116l1.36-.78a2.58,2.58,0,0,0,.83-.78,2.16,2.16,0,0,0,.34-1.27c0-.52-.11-.81-.34-.88a1,1,0,0,0-.83.19l-1.36.78Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M303.53,118.36c-.31.18-.52.06-.63-.37l-2.46-10.15a.61.61,0,0,0,0-.15v-.07a.67.67,0,0,1,.08-.33.49.49,0,0,1,.18-.23l1.52-.88c.16-.09.27-.1.34,0a.47.47,0,0,1,.13.24l1.67,7.18,1.67-9.11a1.37,1.37,0,0,1,.12-.38.86.86,0,0,1,.35-.36l1.51-.87a.15.15,0,0,1,.19,0,.33.33,0,0,1,.08.24s0,0,0,.08a1.05,1.05,0,0,1,0,.18l-2.45,13a1.55,1.55,0,0,1-.64,1.11Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M315.67,108.39a.18.18,0,0,1,.23,0,.37.37,0,0,1,.1.29v2a.85.85,0,0,1-.1.4.55.55,0,0,1-.23.28L310,114.64a.18.18,0,0,1-.23,0,.39.39,0,0,1-.1-.3v-12a.85.85,0,0,1,.1-.4.55.55,0,0,1,.23-.28l5.6-3.24a.18.18,0,0,1,.23,0,.41.41,0,0,1,.09.3v2a1,1,0,0,1-.09.4.61.61,0,0,1-.23.28l-3.7,2.14v2l3.43-2a.17.17,0,0,1,.23,0,.38.38,0,0,1,.1.3v2a.88.88,0,0,1-.1.41.6.6,0,0,1-.23.28l-3.43,2v2.07Z"
-            style="fill: #455a64"></path>
-          <path
-            d="M321.26,95.17a4.56,4.56,0,0,1,1.42-.56,1.57,1.57,0,0,1,1.07.16,1.73,1.73,0,0,1,.67.94,5.31,5.31,0,0,1,.23,1.74,7.94,7.94,0,0,1-.37,2.52,6.43,6.43,0,0,1-1.06,2l1.49,3.54a.41.41,0,0,1,0,.19.8.8,0,0,1-.08.33.49.49,0,0,1-.19.23l-1.63.94c-.16.09-.27.1-.34,0a.78.78,0,0,1-.16-.24L321,103.81l-1.1.64v4a1,1,0,0,1-.1.41.67.67,0,0,1-.23.28L318,110a.18.18,0,0,1-.23,0,.38.38,0,0,1-.1-.3v-12a.88.88,0,0,1,.1-.41.6.6,0,0,1,.23-.28Zm-1.35,6.39,1.35-.78a2.51,2.51,0,0,0,.84-.78,2.2,2.2,0,0,0,.33-1.26c0-.52-.11-.82-.33-.89a1.11,1.11,0,0,0-.84.19l-1.35.78Z"
-            style="fill: #455a64"></path>
-        </g>
-        <path
-          d="M252.08,191.4a1.47,1.47,0,0,0-2.18.27c-.67.83-.73,3.39-1,5.12a20.89,20.89,0,0,1-1.69,5.34,27.8,27.8,0,0,1-5.71,7.86,36.13,36.13,0,0,1-10.93,7.29,31.77,31.77,0,0,1-4.24,1.48c-1.43.39-3.35.43-4.58,1.24a.42.42,0,0,0,0,.62c1.5.62,3.34.35,4.9.14a25.91,25.91,0,0,0,5.79-1.6,35.36,35.36,0,0,0,10.44-6.35,30.94,30.94,0,0,0,7.44-9.28,21.71,21.71,0,0,0,2.06-6.06,20.93,20.93,0,0,0,.44-3.34A3.22,3.22,0,0,0,252.08,191.4Z"
-          style="fill: #455a64"></path>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/components/index.ts b/frontend-pc/src/components/index.ts
deleted file mode 100644
index e735932..0000000
--- a/frontend-pc/src/components/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * 组件库出口。
- *
- * ⚠️ 这里的每一行都必须对应 `src/components/` 下的真实目录。
- * 剥离 gi-demo 演示页时删掉过 6 个演示专用组件
- * （GiCodeButton / GiCodeView / GiFooter / GiIconSelector / GiIframe / GiTrend），
- * 但出口文件没同步 —— `export * from './已删除的组件'` 在构建时**不会报错**
- * （Vite 只在使用到该导出时才解析），直到某天有人 import 它才炸。
- * 所以增删组件时务必回来同步这一份清单。
- */
-export * from './GiButton'
-export * from './GiCell'
-export * from './GiDot'
-export * from './GiEditTable'
-export * from './GiFlex'
-export * from './GiForm'
-export * from './GiIconBox'
-export * from './GiInputSearch'
-export * from './GiOption'
-export * from './GiPageLayout'
-export * from './GiTable'
-export * from './GiTableSetting'
-export * from './GiTag'
-export * from './GiThemeBtn'
diff --git a/frontend-pc/src/composables/pagination.ts b/frontend-pc/src/composables/pagination.ts
new file mode 100644
index 0000000..de676d7
--- /dev/null
+++ b/frontend-pc/src/composables/pagination.ts
@@ -0,0 +1,37 @@
+import type { PaginationProps } from 'naive-ui'
+
+/**
+ * 列表页分页器的统一参数。
+ *
+ * ## 为什么要有这个文件
+ * 手写 `pagination` 对象时，`prefix` 的类型最容易写错：
+ * ```ts
+ * // ✗ 这样写 vue-tsc 会报 TS2322：naive 给的 info 里 itemCount 是 `number | undefined`
+ * pagination: { prefix: ({ itemCount }: { itemCount: number }) => `共 ${itemCount} 条` }
+ * ```
+ * 报错信息很长（说的是 `RenderPrefix` 不兼容），而真正的原因只是**少了个 `?`**。
+ * 三个列表页各踩一次不值得，所以收口到这里。
+ *
+ * ## 另一个踩过的坑（与类型无关，但同样只在运行时暴露）
+ * naive 的 `n-data-table` 在 `pagination` 非 false 时会**自己再切一次数据**
+ * （内部 `flattenData`）。所以远程分页必须同时：
+ *   ① `remote` 打开；② `:pagination` 的 `page`/`pageSize` 由**我们**控制；
+ *   ③ 处理 `@update:page` 与 `@update:page-size` **两个**事件并重新取数。
+ * 只改本地每页条数不重新取数，就会出现"分页器说 50 条/页、表里还是 20 条"。
+ */
+export function listPagination(opts: {
+  page: number
+  pageSize: number
+  itemCount: number
+  pageSizes?: number[]
+}): PaginationProps {
+  return {
+    page: opts.page,
+    pageSize: opts.pageSize,
+    itemCount: opts.itemCount,
+    showSizePicker: true,
+    pageSizes: opts.pageSizes ?? [10, 20, 50, 100],
+    // ⚠️ `itemCount?: number` 里的 `?` 是必需的（见上方注释）
+    prefix: (info: { itemCount?: number }) => `共 ${info.itemCount ?? 0} 条`
+  }
+}
diff --git a/frontend-pc/src/config/setting.json b/frontend-pc/src/config/setting.json
deleted file mode 100644
index c8cd449..0000000
--- a/frontend-pc/src/config/setting.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "themeColor": "#0052D9",
-  "layout": "left",
-  "tabStyle": "card",
-  "isTabVisible": true,
-  "transitionName": "zoom-fade",
-  "isTransitionEnabled": true,
-  "isMenuCollapsed": false,
-  "isMenuAccordion": false,
-  "isMenuDark": false
-}
diff --git a/frontend-pc/src/config/xt-routes.ts b/frontend-pc/src/config/xt-routes.ts
index 7f4a72d..c6d21ec 100644
--- a/frontend-pc/src/config/xt-routes.ts
+++ b/frontend-pc/src/config/xt-routes.ts
@@ -1,294 +1,189 @@
 /**
- * 业务菜单与路由表。
+ * 业务菜单表 —— **这一张表同时驱动三件事**：左侧菜单、路由注册、面包屑标题。
  *
- * 设计：**这一张表同时驱动三件事** —— 左侧菜单、路由注册、权限提示。
  * 三者若各写一份，改一处漏一处几乎必然发生（表现是"菜单点进去 404"或"有权限但不显示"）。
  *
- * 菜单可见性由**后端**决定：`/auth/me` 返回 `menus: string[]`（菜单键集合），
+ * 菜单可见性由**后端**决定：`/auth/me` 与登录响应返回 `menus: string[]`（菜单键集合），
  * 这里按菜单键过滤。真正的访问控制也在后端（绕过前端只会拿到 40301），
  * 前端的过滤只是"不显示没权限的入口"。
  *
- * ⚠️ `key` 必须与后端 `BuiltinRole` 里的菜单键逐字一致。
+ * ⚠️ `key` 必须与后端 `BuiltinRole` 里的菜单键**逐字一致** ——
+ *    `scripts/check-wiring.py` 会双向核对，对不上会红。
+ * ⚠️ 2026-10 需求收敛：删掉了 `join`（加入申请）与 `cleanup`（历史整理器）两个菜单键，
+ *    后端 `BuiltinRole` 同步删除；权限码也去掉了 join:audit / cleanup:run。
  */
-import type { UserRouteItem } from '@/apis/user'
 
 /** 单个菜单定义 */
 export interface XtMenu {
   /** 菜单键，与后端一致 */
   key: string
   title: string
-  /** iconify 图标名（icon-park-outline 集） */
+  /** 图标短名（见 @/icons/icon-data.ts） */
   icon: string
   /** 路由路径（完整，以 / 开头） */
   path: string
-  /** 视图路径（相对 src/views，不带扩展名）；分组节点为空 */
-  component?: string
-  /** 分组标题；null 表示不分组 */
-  group: string | null
-  sort: number
-  /** 一期是否已实现。false 的走「待建」页，比直接隐藏更诚实 */
-  ready: boolean
-  /** 待建说明 */
-  note?: string
+  /** 视图路径（相对 src/views，不带扩展名） */
+  component: string
+  /** 所属分组 */
+  group: string
 }
 
-/** 分组顺序（决定左侧菜单顺序） */
-const GROUPS: Array<{ id: string, title: string, icon: string, sort: number }> = [
-  { id: 'collect', title: '收集管理', icon: 'icon-park-outline:application-two', sort: 10 },
-  { id: 'setting', title: '配置', icon: 'icon-park-outline:setting-two', sort: 20 },
-  { id: 'org', title: '组织与账号', icon: 'icon-park-outline:every-user', sort: 30 },
-  { id: 'platform', title: '平台运维', icon: 'icon-park-outline:server', sort: 40 }
+/** 分组（决定左侧菜单顺序） */
+export interface XtMenuGroup {
+  id: string
+  title: string
+  icon: string
+  sort: number
+}
+
+export const GROUPS: XtMenuGroup[] = [
+  { id: 'collect', title: '收集管理', icon: 'collect', sort: 10 },
+  { id: 'setting', title: '配置', icon: 'setting', sort: 20 },
+  { id: 'org', title: '组织与账号', icon: 'org-group', sort: 30 },
+  { id: 'platform', title: '平台运维', icon: 'platform', sort: 40 }
 ]
 
-/** 业务菜单（工作台在 baseRoutes 里，不列这里） */
+/** 工作台不在分组里（所有角色都有，且是落地页） */
+export const DASHBOARD: XtMenu = {
+  key: 'dashboard',
+  title: '工作台',
+  icon: 'dashboard',
+  path: '/dashboard',
+  component: 'dashboard/index',
+  group: ''
+}
+
+/** 业务菜单（按分组顺序排列） */
 export const XT_MENUS: XtMenu[] = [
   // ── 收集管理 ──────────────────────────────────────
   {
     key: 'task',
     title: '收集任务',
-    icon: 'icon-park-outline:list-two',
+    icon: 'task',
     path: '/collect/task',
     component: 'task/index',
-    group: 'collect',
-    sort: 11,
-    ready: true
-  },
-  {
-    key: 'join',
-    title: '加入申请',
-    icon: 'icon-park-outline:user-to-user-transmission',
-    path: '/collect/join',
-    component: 'join/index',
-    group: 'collect',
-    sort: 13,
-    ready: true
+    group: 'collect'
   },
   {
     key: 'audit',
     title: '审核',
-    icon: 'icon-park-outline:check-one',
+    icon: 'audit',
     path: '/collect/audit',
     component: 'audit/index',
-    group: 'collect',
-    sort: 14,
-    ready: true
+    group: 'collect'
   },
   {
     key: 'export',
     title: '导出中心',
-    icon: 'icon-park-outline:download-two',
+    icon: 'export',
     path: '/collect/export',
     component: 'export/index',
-    group: 'collect',
-    sort: 15,
-    ready: true
+    group: 'collect'
   },
   {
-    // 通知记录：把「通知到底发出去没有」变成可回答的（§13.3）。
-    // 刻意**不**并到审核页里 —— 它是运营视角的排查工具，
-    // 而审核页是老师视角的操作台，两者的"该看什么"完全不同
+    // 通知记录：把「通知到底发出去没有」变成可回答的。
+    // 刻意**不**并到审核页里 —— 它是运营视角的排查工具，而审核页是老师视角的操作台。
     key: 'notify',
     title: '通知记录',
-    icon: 'icon-park-outline:remind',
+    icon: 'notify',
     path: '/collect/notify',
     component: 'notify/index',
-    group: 'collect',
-    sort: 17,
-    ready: true
+    group: 'collect'
   },
 
   // ── 配置 ─────────────────────────────────────────
   {
-    key: 'cleanup',
-    title: '历史整理器',
-    icon: 'icon-park-outline:magic-wand',
-    path: '/setting/cleanup',
-    component: 'cleanup/index',
-    group: 'setting',
-    sort: 23,
-    ready: true
-  },
-  {
-    // 字典管理（§13.3）。内置项照抄官方表格、不可改名（只可停用单项），
-    // 所以这一屏的主要用途是"追加客户自己的取值"（例如多了个学历写法）
+    // 字典管理：内置项照抄官方表格、不可改名（只可停用单项），
+    // 所以这一屏的主要用途是"追加客户自己的取值"。
     key: 'dict',
     title: '字典管理',
-    icon: 'icon-park-outline:list-two',
+    icon: 'dict',
     path: '/setting/dict',
     component: 'dict/index',
-    group: 'setting',
-    sort: 24,
-    ready: true
+    group: 'setting'
   },
 
   // ── 组织与账号 ────────────────────────────────────
   {
     key: 'org',
     title: '组织架构',
-    icon: 'icon-park-outline:tree-list',
+    icon: 'org',
     path: '/org/manage',
     component: 'org/index',
-    group: 'org',
-    sort: 31,
-    ready: true
+    group: 'org'
   },
   {
     key: 'user',
     title: '账号管理',
-    icon: 'icon-park-outline:peoples',
+    icon: 'user',
     path: '/org/user',
     component: 'user/index',
-    group: 'org',
-    sort: 32,
-    ready: true
+    group: 'org'
   },
   {
+    // 内置角色只读展示（权限由后端代码决定）+ 自定义角色的权限码/菜单可配。
+    // 改授权立即生效（服务端写授权时清缓存），不需要重新登录。
     key: 'role',
     title: '角色与授权',
-    icon: 'icon-park-outline:permissions',
+    icon: 'role',
     path: '/org/role',
     component: 'role/index',
-    group: 'org',
-    sort: 33,
-    ready: false,
-    note: '内置角色的权限由代码决定、不可改；自定义角色属二期。'
+    group: 'org'
   },
 
   // ── 平台运维 ──────────────────────────────────────
   {
     key: 'tenant',
     title: '租户管理',
-    icon: 'icon-park-outline:school',
+    icon: 'tenant',
     path: '/platform/tenant',
     component: 'tenant/index',
-    group: 'platform',
-    sort: 41,
-    ready: true
+    group: 'platform'
   },
   {
     key: 'log',
     title: '操作日志',
-    icon: 'icon-park-outline:log',
+    icon: 'log',
     path: '/platform/log',
     component: 'log/index',
-    group: 'platform',
-    sort: 42,
-    ready: true,
-    note: '登录、查看明文、下载、导出、代传、删除的审计记录。'
+    group: 'platform'
   }
 ]
 
-/** 构造一个「待建」路由项（组件统一指向 coming-soon） */
-function placeholder(menu: XtMenu): UserRouteItem {
-  return {
-    id: menu.key,
-    parentId: '0',
-    path: menu.path,
-    component: 'coming-soon/index',
-    title: menu.title,
-    icon: menu.icon,
-    sort: menu.sort,
-    type: 2,
-    status: '1',
-    hidden: false,
-    keepAlive: false,
-    affix: false,
-    breadcrumb: true,
-    showInTabs: true,
-    alwaysShow: false,
-    activeMenu: '',
-    permission: '',
-    roles: [],
-    redirect: '',
-    children: []
-  } as UserRouteItem
+/** 按后端下发的菜单键过滤出可见菜单 */
+export function filterMenus(menuKeys: string[]): XtMenu[] {
+  const keys = new Set(menuKeys ?? [])
+  return XT_MENUS.filter((m) => keys.has(m.key))
 }
 
-/**
- * 按后端下发的菜单键，生成异步路由树。
- *
- * @param menuKeys `/auth/me` 返回的菜单键集合
- * @returns 分组 → 页面的两级路由树（`component: 'Layout'` 由上层 formatAsyncRoutes 处理）
- */
-export function buildXtRoutes(menuKeys: string[]): UserRouteItem[] {
-  const keys = new Set(menuKeys)
-  const visible = XT_MENUS.filter((m) => keys.has(m.key))
-  if (!visible.length) {
-    return []
+/** 可见菜单按分组归拢（左侧菜单用；空分组不返回） */
+export function visibleGroups(menuKeys: string[]): Array<XtMenuGroup & { items: XtMenu[] }> {
+  const visible = filterMenus(menuKeys)
+  return GROUPS
+    .map((g) => ({ ...g, items: visible.filter((m) => m.group === g.id) }))
+    .filter((g) => g.items.length > 0)
+}
+
+/** 按路径取菜单（面包屑/标题用；工作台也在内） */
+export function menuByPath(path: string): XtMenu | undefined {
+  if (path === DASHBOARD.path) {
+    return DASHBOARD
   }
-
-  const routes: UserRouteItem[] = []
-  for (const g of GROUPS) {
-    const items = visible.filter((m) => m.group === g.id)
-    if (!items.length) {
-      continue
-    }
-    routes.push({
-      id: g.id,
-      parentId: '0',
-      path: `/${g.id}`,
-      // 'Layout' 是约定的布局组件标识，formatAsyncRoutes 会替换成真实组件
-      component: 'Layout',
-      title: g.title,
-      icon: g.icon,
-      sort: g.sort,
-      type: 1,
-      status: '1',
-      hidden: false,
-      keepAlive: false,
-      affix: false,
-      breadcrumb: true,
-      showInTabs: false,
-      alwaysShow: true,
-      activeMenu: '',
-      permission: '',
-      roles: [],
-      redirect: items[0].path,
-      children: items
-        .sort((a, b) => a.sort - b.sort)
-        .map((m) => (m.ready ? readyItem(m) : placeholder(m)))
-    } as UserRouteItem)
-  }
-  return routes
-}
-
-/** 已实现页面 */
-function readyItem(menu: XtMenu): UserRouteItem {
-  return {
-    id: menu.key,
-    parentId: menu.group ?? '0',
-    path: menu.path,
-    component: menu.component!,
-    title: menu.title,
-    icon: menu.icon,
-    sort: menu.sort,
-    type: 2,
-    status: '1',
-    hidden: false,
-    keepAlive: false,
-    affix: false,
-    breadcrumb: true,
-    showInTabs: true,
-    alwaysShow: false,
-    activeMenu: '',
-    permission: '',
-    roles: [],
-    redirect: '',
-    children: []
-  } as UserRouteItem
-}
-
-/** 按路由路径取菜单定义（「待建」页要显示说明用） */
-export function findMenuByPath(path: string): XtMenu | undefined {
   return XT_MENUS.find((m) => m.path === path)
 }
 
-/** 角色码 → 中文名（与后端 BuiltinRole 对齐） */
+/** 角色码 → 中文名（与后端 `BuiltinRole` 对齐；2026-10 收敛后只剩 4 个） */
 export const ROLE_NAMES: Record<string, string> = {
   PLATFORM_ADMIN: '平台运营',
   SCHOOL_ADMIN: '学校管理员',
   HEAD_TEACHER: '班主任',
-  DEPUTY_TEACHER: '副班主任',
-  AUDITOR: '审核员',
   STUDENT: '学生'
 }
+
+/** 角色码数组 → 中文名（多角色用「、」连接） */
+export function roleLabel(codes?: string[] | null): string {
+  if (!codes || !codes.length) {
+    return '—'
+  }
+  return codes.map((c) => ROLE_NAMES[c] ?? c).join('、')
+}
diff --git a/frontend-pc/src/directives/hasPerm.ts b/frontend-pc/src/directives/hasPerm.ts
deleted file mode 100644
index b615b59..0000000
--- a/frontend-pc/src/directives/hasPerm.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-import { hasPermOr } from '@/utils/permission'
-
-/**
- * 权限检查函数
- * @description 检查元素是否具有指定的权限，如果没有权限则移除该元素
- * @param el - 要检查的 DOM 元素
- * @param binding - 指令绑定对象
- * @throws {Error} 当权限参数格式不正确时抛出错误
- */
-function checkPermission(el: HTMLElement, binding: DirectiveBinding<string[]>) {
-  const { value } = binding
-
-  // 检查权限参数是否有效
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    throw new Error('权限参数格式错误，示例：v-hasPerm="[\'home:btn:edit\',\'home:btn:delete\']"')
-  }
-
-  // 检查是否具有权限
-  const hasPermission = hasPermOr(value)
-  if (!hasPermission) {
-    el.parentNode?.removeChild(el)
-  }
-}
-
-/**
- * 权限指令
- * @description 用于控制元素的显示/隐藏，基于用户权限
- * @example
- * ```vue
- * <button v-hasPerm="['home:btn:add']">添加</button>
- * <button v-hasPerm="['home:btn:edit', 'home:btn:delete']">编辑/删除</button>
- * ```
- */
-const hasPermDirective: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<string[]>) {
-    checkPermission(el, binding)
-  },
-  updated(el: HTMLElement, binding: DirectiveBinding<string[]>) {
-    checkPermission(el, binding)
-  }
-}
-
-export default hasPermDirective
diff --git a/frontend-pc/src/directives/hasRole.ts b/frontend-pc/src/directives/hasRole.ts
deleted file mode 100644
index 0499fd6..0000000
--- a/frontend-pc/src/directives/hasRole.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-import { hasRoleOr } from '@/utils/permission'
-
-/**
- * 角色检查函数
- * @description 检查元素是否具有指定的角色，如果没有角色则移除该元素
- * @param el - 要检查的 DOM 元素
- * @param binding - 指令绑定对象
- * @throws {Error} 当角色参数格式不正确时抛出错误
- */
-function checkRole(el: HTMLElement, binding: DirectiveBinding<string[]>) {
-  const { value } = binding
-
-  // 检查角色参数是否有效
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    throw new Error('角色参数格式错误，示例：v-hasRole="[\'admin\',\'user\']"')
-  }
-
-  // 检查是否具有角色
-  const hasRole = hasRoleOr(value)
-  if (!hasRole) {
-    el.parentNode?.removeChild(el)
-  }
-}
-
-/**
- * 角色权限指令
- * @description 用于控制元素的显示/隐藏，基于用户角色
- * @example
- * ```vue
- * <div v-hasRole="['admin']">管理员可见</div>
- * <div v-hasRole="['admin', 'user']">管理员或用户可见</div>
- * ```
- */
-const hasRoleDirective: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<string[]>) {
-    checkRole(el, binding)
-  },
-  updated(el: HTMLElement, binding: DirectiveBinding<string[]>) {
-    checkRole(el, binding)
-  }
-}
-
-export default hasRoleDirective
diff --git a/frontend-pc/src/directives/index.ts b/frontend-pc/src/directives/index.ts
deleted file mode 100644
index b50238e..0000000
--- a/frontend-pc/src/directives/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { App } from 'vue'
-import hasPerm from './hasPerm'
-import hasRole from './hasRole'
-
-export default {
-  install(Vue: App) {
-    Vue.directive('hasPerm', hasPerm)
-    Vue.directive('hasRole', hasRole)
-  }
-}
diff --git a/frontend-pc/src/hooks/app/index.ts b/frontend-pc/src/hooks/app/index.ts
deleted file mode 100644
index 42d70dd..0000000
--- a/frontend-pc/src/hooks/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './useDept'
-export * from './useRole'
diff --git a/frontend-pc/src/hooks/app/useDept.ts b/frontend-pc/src/hooks/app/useDept.ts
deleted file mode 100644
index 94c7395..0000000
--- a/frontend-pc/src/hooks/app/useDept.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type * as T from '@/apis/system/dept'
-import { ref } from 'vue'
-import { mapTree } from 'xe-utils'
-import { baseAPI } from '@/apis/system/dept'
-
-/** 部门模块 */
-export function useDept(options?: { onSuccess?: () => void }) {
-  const loading = ref(false)
-  const deptList = ref<T.ListItem[]>([])
-
-  const getDeptList = async () => {
-    try {
-      loading.value = true
-      const res = await baseAPI.getList()
-      deptList.value = mapTree(res.data, (i) => {
-        if (i.children?.length) {
-          i.children = i.children.filter((i) => i.status === '1')
-        }
-        return i
-      })
-      options?.onSuccess && options.onSuccess()
-    } finally {
-      loading.value = false
-    }
-  }
-  return { deptList, getDeptList, loading }
-}
diff --git a/frontend-pc/src/hooks/app/useRole.ts b/frontend-pc/src/hooks/app/useRole.ts
deleted file mode 100644
index ce70ad1..0000000
--- a/frontend-pc/src/hooks/app/useRole.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as T from '@/apis/system/role'
-import { ref } from 'vue'
-import { baseAPI } from '@/apis/system/role'
-
-/** 角色模块 */
-export function useRole() {
-  const loading = ref(false)
-  const roleList = ref<T.ListItem[]>([])
-  const total = ref(0)
-  const getRoleList = async () => {
-    try {
-      loading.value = true
-      const res = await baseAPI.getList({ page: 1, size: 99 })
-      roleList.value = res.data.records.filter((i) => i.status === '1')
-      total.value = res.data.total
-    } finally {
-      loading.value = false
-    }
-  }
-  return { roleList, getRoleList, loading, total }
-}
diff --git a/frontend-pc/src/hooks/index.ts b/frontend-pc/src/hooks/index.ts
deleted file mode 100644
index b5656f1..0000000
--- a/frontend-pc/src/hooks/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from './useBreakpoint'
-export * from './useChart'
-export * from './useDevice'
-export * from './useDict'
-export * from './useLoading'
-export * from './usePagination'
-export * from './useRequest'
-export * from './useResetReactive'
-export * from './useRouteListener'
-export * from './useTable'
-export * from './useTheme'
diff --git a/frontend-pc/src/hooks/useBreakpoint.ts b/frontend-pc/src/hooks/useBreakpoint.ts
deleted file mode 100644
index f884de9..0000000
--- a/frontend-pc/src/hooks/useBreakpoint.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ColProps } from '@arco-design/web-vue'
-import type { ComputedRef } from 'vue'
-import { useBreakpoints } from '@vueuse/core'
-import { computed } from 'vue'
-
-type ColBreakpoint = Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
-type Breakpoint = keyof ColBreakpoint
-
-// 定义断点配置
-const BREAKPOINT_CONFIG = {
-  xs: 576, // <576px
-  sm: 576, // ≥576px
-  md: 768, // ≥768px
-  lg: 992, // ≥992px
-  xl: 1200, // ≥1200px
-  xxl: 1600 // ≥1600px
-} as const
-
-/**
- * 响应式断点 Hook
- * @returns {{ breakpoint: ComputedRef<Breakpoint> }} 当前激活的最大断点值
- */
-export function useBreakpoint() {
-  const breakpoints = useBreakpoints(BREAKPOINT_CONFIG)
-
-  const currentBreakpoints = breakpoints.current() as ComputedRef<Breakpoint[]>
-
-  const breakpoint = computed<Breakpoint>(() => {
-    const arr = currentBreakpoints.value
-    // arr.at(-1) 的类型是 Breakpoint | undefined —— 空数组时就是 undefined。
-    // 原来写成 `arr.length ? arr.at(-1) : 'xs'` 是个类型谎：
-    // 长度判断并不能让 TS 窄化 at() 的结果，严格模式下会报 TS2769。
-    return arr.length ? (arr.at(-1) ?? 'xs') : 'xs'
-  })
-
-  return { breakpoint }
-}
diff --git a/frontend-pc/src/hooks/useChart.ts b/frontend-pc/src/hooks/useChart.ts
deleted file mode 100644
index 2222113..0000000
--- a/frontend-pc/src/hooks/useChart.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { EChartsOption } from 'echarts'
-import { computed } from 'vue'
-import { useTheme } from '@/hooks'
-
-interface Options {
-  (isDark?: boolean): EChartsOption
-}
-
-/**
- * 用于集中管理 ECharts 配置，提供完整类型提示
- * @param sourceOption - ECharts 配置项
- * @returns { option: ComputedRef<EChartsOption>, theme: ComputedRef<string> } - 返回 ECharts 配置项和主题
- */
-export function useChart(sourceOption: Options) {
-  const { isDark } = useTheme()
-
-  // echarts support https://echarts.apache.org/zh/theme-builder.html
-  const option = computed<EChartsOption>(() => {
-    return sourceOption(isDark.value)
-  })
-
-  const theme = computed(() => isDark.value ? 'dark' : undefined)
-
-  return {
-    /** ECharts 配置项 */
-    option,
-    /** ECharts 主题 */
-    theme
-  }
-}
diff --git a/frontend-pc/src/hooks/useDevice.ts b/frontend-pc/src/hooks/useDevice.ts
deleted file mode 100644
index 0a8305e..0000000
--- a/frontend-pc/src/hooks/useDevice.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useWindowSize } from '@vueuse/core'
-import { computed } from 'vue'
-
-/**
- * 响应式布局容器固定宽度
- *
- * 大屏（>=1200px）
- * 中屏（>=992px）
- * 小屏（>=768px）
- */
-export function useDevice() {
-  const { width } = useWindowSize()
-  const isDesktop = computed(() => width.value > 768)
-  const isMobile = computed(() => !isDesktop.value)
-
-  return { isMobile, isDesktop }
-}
diff --git a/frontend-pc/src/hooks/useDict.ts b/frontend-pc/src/hooks/useDict.ts
deleted file mode 100644
index c2f0dae..0000000
--- a/frontend-pc/src/hooks/useDict.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { SelectOptionData } from '@arco-design/web-vue'
-import { computed } from 'vue'
-import { useDictStore } from '@/stores'
-
-/**
- * 将字符串数组转换为对象类型
- * @example
- * ArrayToObject<['STATUS', 'GENDER']> // { STATUS: SelectOptionData[], GENDER: SelectOptionData[] }
- */
-type ArrayToObject<T extends readonly string[]> = {
-  [K in T[number]]: SelectOptionData[]
-}
-
-/**
- * 字典数据 Hook
- * @description 根据传入的字典代码数组，返回对应的字典数据对象
- * @param codes - 字典代码数组，会自动推断字面量类型以提供类型提示
- * @returns 返回包含字典数据的响应式对象，对象的键为 codes 中的元素
- * @example
- * const { dictData } = useDict(['STATUS', 'GENDER'] as const)
- * // dictData.value.STATUS ✅ 有类型提示
- * // dictData.value.GENDER ✅ 有类型提示
- * // dictData.value.OTHER ❌ TypeScript 会报错
- */
-export function useDict<const T extends readonly string[]>(codes: T) {
-  const dictStore = useDictStore()
-
-  const dictData = computed<ArrayToObject<T>>(() => {
-    const result = {} as ArrayToObject<T>
-    for (const code of codes) {
-      result[code as T[number]] = dictStore.dictData[code] || []
-    }
-    return result
-  })
-
-  return { dictData }
-}
diff --git a/frontend-pc/src/hooks/useLoading.ts b/frontend-pc/src/hooks/useLoading.ts
deleted file mode 100644
index 3e49152..0000000
--- a/frontend-pc/src/hooks/useLoading.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ref } from 'vue'
-
-/**
- * 加载状态管理 Hook
- * @description 提供加载状态管理的响应式 Hook，包含加载状态的设置、切换等功能
- * @param initValue - 初始加载状态，默认为 false
- * @returns 返回包含加载状态管理和操作方法的对象
- * {{
- *   loading: Ref<boolean>, // 加载状态的响应式引用
- *   setLoading: (value: boolean) => void, // 设置加载状态的函数
- *   toggle: () => void // 切换加载状态的函数
- * }}
- */
-export function useLoading(initValue = false) {
-  const loading = ref(initValue)
-
-  const setLoading = (value: boolean) => {
-    loading.value = value
-  }
-
-  const toggle = () => {
-    loading.value = !loading.value
-  }
-
-  return {
-    loading,
-    setLoading,
-    toggle
-  }
-}
diff --git a/frontend-pc/src/hooks/usePagination.ts b/frontend-pc/src/hooks/usePagination.ts
deleted file mode 100644
index 718506d..0000000
--- a/frontend-pc/src/hooks/usePagination.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { reactive, toRefs, watch } from 'vue'
-import { useBreakpoint } from '@/hooks'
-
-type Callback = () => void
-
-type Options = {
-  defaultPageSize: number
-}
-
-/**
- * 分页管理 Hook
- * @description 提供分页状态管理的响应式 Hook，支持响应式断点，自动适配移动端显示
- * @param callback - 分页变化时的回调函数
- * @param options - 分页配置选项，默认每页显示 10 条
- * @returns  包含分页状态和操作方法的响应式对象
- * {{
- *   current: Ref<number>, // 当前页码
- *   pageSize: Ref<number>, // 每页显示数量
- *   total: Ref<number>, // 总数据量
- *   pagination: Object, // 完整的分页配置对象
- *   changeCurrent: (page: number) => void, // 改变当前页码
- *   changePageSize: (size: number) => void, // 改变每页显示数量
- *   setTotal: (value: number) => void // 设置总数据量
- * }}
- * @example
- * const { pagination, setTotal } = usePagination(() => {
- *   // 分页变化时的回调
- *   fetchData()
- * })
- */
-export function usePagination(callback: Callback, options: Options = { defaultPageSize: 10 }) {
-  // 获取响应式断点
-  const { breakpoint } = useBreakpoint()
-
-  // 创建响应式分页配置对象
-  const pagination = reactive({
-    showPageSize: true,
-    showTotal: true,
-    current: 1,
-    pageSize: options.defaultPageSize,
-    total: 0,
-    simple: false,
-    onChange: (size: number) => {
-      pagination.current = size
-      callback && callback()
-    },
-    onPageSizeChange: (size: number) => {
-      pagination.current = 1
-      pagination.pageSize = size
-      callback && callback()
-    }
-  })
-
-  // 监听断点变化，自动适配移动端显示
-  watch(
-    () => breakpoint.value,
-    () => {
-      // 在 xs（移动端）断点下使用简单模式
-      pagination.simple = ['xs'].includes(breakpoint.value)
-      // 在 xs（移动端）断点下不显示总数据量
-      pagination.showTotal = !['xs'].includes(breakpoint.value)
-    },
-    { immediate: true }
-  )
-
-  // 导出便捷方法
-  const changeCurrent = pagination.onChange
-  const changePageSize = pagination.onPageSizeChange
-
-  /**
-   * 设置总数据量
-   * @param value - 新的总数据量
-   */
-  function setTotal(value: number) {
-    pagination.total = value
-  }
-
-  // 导出响应式引用
-  const { current, pageSize, total } = toRefs(pagination)
-
-  return {
-    current,
-    pageSize,
-    total,
-    pagination,
-    changeCurrent,
-    changePageSize,
-    setTotal
-  }
-}
diff --git a/frontend-pc/src/hooks/useRequest.ts b/frontend-pc/src/hooks/useRequest.ts
deleted file mode 100644
index 96ad4c2..0000000
--- a/frontend-pc/src/hooks/useRequest.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { ref } from 'vue'
-import { useLoading } from '@/hooks'
-
-/**
- * 请求配置选项
- */
-interface UseRequestOptions<T = any> {
-  /** 默认值 */
-  defaultValue?: T
-  /** 是否立即执行请求，默认为 true */
-  immediate?: boolean
-  /** 初始加载状态，默认为 true */
-  isLoading?: boolean
-  /** 请求成功回调 */
-  onSuccess?: (data: T) => void
-  /** 请求失败回调 */
-  onError?: (error: any) => void
-}
-
-/**
- * 请求管理 Hook
- * @description 提供请求状态管理的响应式 Hook，支持自动/手动触发、错误处理、刷新等功能
- * @template T - 响应数据类型
- * @param api - API 请求函数，返回 Promise<ApiRes<T>>
- * @param options - 请求配置选项
- * @returns 返回包含请求状态和操作方法的对象
- * {{
- *   loading: Ref<boolean>, // 加载状态的响应式引用
- *   data: Ref<T>, // 响应数据的响应式引用
- *   error: Ref<any>, // 错误信息的响应式引用
- *   run: () => Promise<void>, // 手动触发请求的函数
- * }}
- * @example
- * // 基础用法 - 立即执行
- * const { loading, data } = useRequest(() => getUserInfo())
- *
- * // 手动触发
- * const { loading, data, run } = useRequest(() => getUserInfo(), { immediate: false })
- * run()
- *
- * // 带默认值和回调
- * const { loading, data } = useRequest(
- *   () => getUserInfo(),
- *   {
- *     defaultValue: {},
- *     onSuccess: (data) => console.log('成功', data),
- *     onError: (error) => console.error('失败', error)
- *   }
- * )
- */
-export function useRequest<T>(
-  api: () => Promise<ApiRes<T>>,
-  options: UseRequestOptions<T> = {}
-) {
-  const { defaultValue, immediate = true, isLoading = true, onSuccess, onError } = options
-  const { loading, setLoading } = useLoading(isLoading)
-  const data = ref<T>(defaultValue as T)
-  const error = ref<any>(null)
-
-  /**
-   * 执行请求
-   * @description 调用 API 并更新响应数据，处理加载状态和错误
-   */
-  async function run() {
-    try {
-      error.value = null
-      setLoading(true)
-      const res = await api()
-      data.value = res.data as T
-      onSuccess?.(res.data)
-    } catch (err) {
-      error.value = err
-      onError?.(err)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  // 立即执行请求
-  if (immediate) {
-    run()
-  }
-
-  return {
-    loading,
-    data,
-    error,
-    run
-  }
-}
diff --git a/frontend-pc/src/hooks/useResetReactive.ts b/frontend-pc/src/hooks/useResetReactive.ts
deleted file mode 100644
index fec7ca2..0000000
--- a/frontend-pc/src/hooks/useResetReactive.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cloneDeep } from 'lodash-es'
-import { reactive } from 'vue'
-
-/**
- * 响应式状态重置 Hook
- * @description 创建一个可重置的响应式对象，支持将状态重置为初始值
- * @template T - 状态对象的类型
- * @param initialValue - 初始状态值
- * @returns [state, reset] - 返回响应式状态和重置函数的元组
- * @example
- * const initialForm = {
- *   name: '',
- *   age: 0
- * }
- *
- * const [form, resetForm] = useResetReactive(initialForm)
- *
- * // 修改表单
- * form.name = 'John'
- * form.age = 25
- *
- * // 重置表单到初始状态
- * resetForm()
- */
-export function useResetReactive<T extends object>(initialValue: T) {
-  /**
-   * 获取初始值的深拷贝
-   * @returns 初始值的深拷贝
-   */
-  const getInitialValue = () => cloneDeep(initialValue)
-
-  // 创建响应式状态
-  const state = reactive<T>(getInitialValue())
-
-  /**
-   * 重置状态到初始值
-   * @description 先清空所有属性，然后用初始值重新赋值，确保引用不变
-   */
-  const reset = () => {
-    // 清空当前状态的所有属性
-    Object.keys(state).forEach((key) => delete (state as any)[key])
-    // 使用初始值重新赋值
-    Object.assign(state, getInitialValue())
-  }
-
-  return [state, reset] as const
-}
diff --git a/frontend-pc/src/hooks/useRouteListener.ts b/frontend-pc/src/hooks/useRouteListener.ts
deleted file mode 100644
index 55c5c97..0000000
--- a/frontend-pc/src/hooks/useRouteListener.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * 路由变化监听 Hook
- * @description 使用发布订阅模式管理路由变化，避免重复监听导致的性能问题
- */
-
-import type { Handler } from 'mitt'
-import type { RouteLocationNormalized } from 'vue-router'
-import mitt from 'mitt'
-import { onUnmounted, ref } from 'vue'
-
-// 事件类型定义
-type RouteChangeEvent = {
-  to: RouteLocationNormalized
-  from?: RouteLocationNormalized
-}
-
-// 事件键定义
-const ROUTE_CHANGE_KEY = Symbol('ROUTE_CHANGE')
-
-// 事件发射器
-const emitter = mitt<{
-  [ROUTE_CHANGE_KEY]: RouteChangeEvent
-}>()
-
-// 最新路由状态
-const latestRoute = ref<RouteLocationNormalized | null>(null)
-
-/**
- * 设置路由变化事件
- * @param to 目标路由
- * @param from 来源路由
- */
-export function setRouteEmitter(to: RouteLocationNormalized, from?: RouteLocationNormalized) {
-  const event: RouteChangeEvent = { to, from }
-  emitter.emit(ROUTE_CHANGE_KEY, event)
-  latestRoute.value = to
-}
-
-/**
- * 路由监听 Hook
- * @returns 路由监听相关方法
- */
-export function useRouteListener() {
-  // 监听器列表
-  const listeners = new Set<Handler<RouteChangeEvent>>()
-
-  /**
-   * 监听路由变化
-   * @param handler 处理函数
-   * @param immediate 是否立即执行
-   */
-  function listenerRouteChange(
-    handler: (event: RouteChangeEvent) => void,
-    immediate = true
-  ) {
-    emitter.on(ROUTE_CHANGE_KEY, handler)
-    listeners.add(handler)
-
-    if (immediate && latestRoute.value) {
-      handler({ to: latestRoute.value })
-    }
-
-    return handler
-  }
-
-  /**
-   * 移除路由监听器
-   * @param handler 要移除的处理函数
-   */
-  function removeRouteListener(handler?: Handler<RouteChangeEvent>) {
-    if (handler) {
-      emitter.off(ROUTE_CHANGE_KEY, handler)
-      listeners.delete(handler)
-    } else {
-      // 移除所有监听器
-      listeners.forEach((listener) => {
-        emitter.off(ROUTE_CHANGE_KEY, listener)
-      })
-      listeners.clear()
-    }
-  }
-
-  // 组件卸载时清理
-  onUnmounted(() => {
-    removeRouteListener()
-  })
-
-  return {
-    listenerRouteChange,
-    removeRouteListener
-  }
-}
diff --git a/frontend-pc/src/hooks/useTable.ts b/frontend-pc/src/hooks/useTable.ts
deleted file mode 100644
index d489743..0000000
--- a/frontend-pc/src/hooks/useTable.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-import type { TableData, TableInstance } from '@arco-design/web-vue'
-import { Message, Modal } from '@arco-design/web-vue'
-import { useBreakpoint, usePagination } from '@/hooks'
-
-interface Options<T, U> {
-  formatResult?: (data: T[]) => U[]
-  onSuccess?: () => void
-  immediate?: boolean
-  rowKey?: keyof T
-  /** 是否开启跨页多选，开启后切换分页会保留已选中的 key */
-  crossPageSelect?: boolean
-  listAPI: (params: { page: number, size: number }) => Promise<ApiRes<PageRes<T[]>>> | Promise<ApiRes<T[]>>
-  deleteAPI?: (ids: string[]) => Promise<ApiRes<unknown>>
-}
-
-/** 删除操作的配置选项 */
-interface DeleteOptions {
-  /** 确认框标题 */
-  title?: string
-  /** 确认框内容 */
-  content?: string
-  /** 成功提示信息 */
-  successTip?: string
-  /** 是否显示确认框 */
-  showModal?: boolean
-}
-
-/**
- * 表格数据管理 Hook
- * @description 提供表格数据管理的响应式 Hook，支持分页、搜索、刷新、删除等功能
- * @template T - 原始数据类型
- * @template U - 格式化后的数据类型
- * @param options - 表格配置选项
- * @returns 表格相关的状态和方法
- * @example
- * const {
- *   loading,
- *   tableData,
- *   pagination,
- *   selectedKeys,
- *   search,
- *   refresh,
- *   handleDelete
- * } = useTable({
- *   listAPI: (p) => getTableApi(p),
- *   formatResult: (data) => data.map(formatData),
- *   immediate: true,
- *   rowKey: 'id'
- * })
- */
-export function useTable<T extends U, U = T>(options: Options<T, U>) {
-  const { formatResult, onSuccess, immediate = true, rowKey = 'id', crossPageSelect = false, listAPI, deleteAPI }
-    = options || {}
-
-  // 分页相关
-  const { pagination, setTotal } = usePagination(() => getTableData())
-  const loading = ref(false)
-  const tableData: Ref<U[]> = ref([])
-
-  /**
-   * 获取表格数据
-   * @description 调用 API 获取数据，处理分页、格式化等逻辑
-   */
-  async function getTableData() {
-    try {
-      loading.value = true
-      const res = await listAPI({ page: pagination.current, size: pagination.pageSize })
-      // 处理返回的数据结构可能是分页或数组的情况
-      const data = !Array.isArray(res.data) ? res.data.records : res.data
-      tableData.value = formatResult ? formatResult(data) : data
-      // 设置总数据量
-      const total = !Array.isArray(res.data) ? res.data.total : data.length
-      setTotal(total)
-      onSuccess?.()
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 首次加载数据
-  immediate && getTableData()
-
-  // 多选
-  const selectedKeys = ref<(string | number)[]>([])
-
-  /** 当前页所有行的 key（用于跨页多选时合并） */
-  function getCurrentPageKeys() {
-    return (tableData.value as TableData[]).map((i) => i[rowKey as string])
-  }
-
-  /**
-   * 行选择回调
-   * @param rowKeys - 表格传入的选中行 key（可能仅为当前页，也可能含跨页；以当前页 key 为准做合并避免重复）
-   */
-  const select: TableInstance['onSelect'] = (rowKeys) => {
-    if (crossPageSelect) {
-      const pageKeys = getCurrentPageKeys()
-      const rest = selectedKeys.value.filter((k) => !pageKeys.includes(k))
-      // 只合并当前页的选中：避免表格传入的 rowKeys 含其它页时造成重复
-      const currentPageSelected = rowKeys.filter((k) => pageKeys.includes(k))
-      selectedKeys.value = [...new Set([...rest, ...currentPageSelected])]
-    } else {
-      selectedKeys.value = rowKeys
-    }
-  }
-
-  /**
-   * 全选回调
-   * @param checked - 是否全选
-   */
-  const selectAll: TableInstance['onSelectAll'] = (checked) => {
-    const arr = (tableData.value as TableData[]).filter((i) => !(i?.disabled ?? false))
-    const pageKeys = arr.map((i) => i[rowKey as string])
-    if (crossPageSelect) {
-      if (checked) {
-        const rest = selectedKeys.value.filter((k) => !pageKeys.includes(k))
-        selectedKeys.value = [...rest, ...pageKeys]
-      } else {
-        selectedKeys.value = selectedKeys.value.filter((k) => !pageKeys.includes(k))
-      }
-    } else {
-      selectedKeys.value = checked ? pageKeys : []
-    }
-  }
-
-  /** 获取选中的数据 */
-  const getSelectedData = () => {
-    return tableData.value.filter((i) => selectedKeys.value.includes(i[rowKey as string]))
-  }
-
-  /**
-   * 搜索
-   * @description 重置页码为1并重新获取数据
-   */
-  const search = () => {
-    selectedKeys.value = []
-    pagination.onChange(1)
-  }
-
-  /**
-   * 刷新表格数据
-   * @description 使用当前的分页参数重新获取数据
-   */
-  const refresh = () => {
-    getTableData()
-  }
-
-  /**
-   * 处理删除操作
-   * @description 支持删除确认框，自动处理删除后的刷新
-   * @param deleteApi - 删除操作的 API 函数
-   * @param options - 删除操作的配置选项
-   * @returns Promise<boolean | undefined> 删除操作的结果
-   */
-  const handleDelete = async <T>(
-    deleteApi: () => Promise<ApiRes<T>>,
-    options?: DeleteOptions
-  ): Promise<boolean | undefined> => {
-    const onDelete = async (isMultiple: boolean) => {
-      try {
-        const res = await deleteApi()
-        if (res.success) {
-          Message.success(options?.successTip || '删除成功！')
-          // 处理当前页码
-          const deleteNum = isMultiple ? selectedKeys.value.length : 1
-          const totalPage = Math.ceil((pagination.total - deleteNum) / pagination.pageSize)
-          if (pagination.current > totalPage) {
-            pagination.current = totalPage > 0 ? totalPage : 1
-          }
-          isMultiple && (selectedKeys.value = [])
-          getTableData()
-        }
-        return res.success
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log('删除失败', error)
-        return false
-      }
-    }
-
-    if (!(options?.showModal ?? true)) {
-      return onDelete(false)
-    }
-
-    Modal.warning({
-      title: options?.title || '提示',
-      content: options?.content || '是否确认删除？',
-      hideCancel: false,
-      maskClosable: false,
-      onBeforeOk: () => onDelete(true)
-    })
-  }
-
-  /**
-   * 删除单条数据
-   * @description 需在 options 中配置 deleteAPI
-   * @param row - 要删除的行数据
-   */
-  const onDelete = (row: U) => {
-    if (!deleteAPI) {
-      Message.error('deleteAPI 没有配置')
-      return
-    }
-    const ids = String(row[rowKey as keyof U])
-    return handleDelete(() => deleteAPI([ids]), { showModal: false })
-  }
-
-  /**
-   * 批量删除数据
-   * @description 需在 options 中配置 deleteAPI
-   */
-  const onBatchDelete = () => {
-    if (!deleteAPI) {
-      Message.error('deleteAPI 没有配置')
-      return
-    }
-    if (!selectedKeys.value.length) {
-      Message.warning('请选择要删除的数据')
-      return
-    }
-    handleDelete(() => deleteAPI(selectedKeys.value as string[]), {
-      title: '批量删除',
-      content: `确定要删除选中的 ${selectedKeys.value.length} 条数据吗？`
-    })
-  }
-
-  // 自定义扩展...
-  // 导入
-  const onImport = () => {
-    Message.warning('点击了导入')
-  }
-  // 导出
-  const onExport = () => {
-    Message.success('点击了导出')
-  }
-  // 下载模板
-  // const onDownloadTemplate = () => {}
-
-  // 响应式处理表格操作列固定状态
-  const { breakpoint } = useBreakpoint()
-  const fixed = computed(() => !['xs', 'sm'].includes(breakpoint.value) ? 'right' : undefined)
-
-  return {
-    /** 表格加载状态 */
-    loading,
-    /** 表格数据 */
-    tableData,
-    /** 获取表格数据 */
-    getTableData,
-    /** 搜索，页码会重置为1 */
-    search,
-    /** 分页的传参 */
-    pagination,
-    /** 选择的行keys */
-    selectedKeys,
-    /** 选择行 */
-    select,
-    /** 全选行 */
-    selectAll,
-    /** 获取选择的数据  */
-    getSelectedData,
-    /** 处理删除、批量删除 */
-    handleDelete,
-    /** 删除单条数据，需配置 deleteAPI */
-    onDelete,
-    /** 批量删除数据，需配置 deleteAPI */
-    onBatchDelete,
-    /** 刷新表格数据，页码会缓存 */
-    refresh,
-    /** 操作列在小屏场景下不固定在右侧 */
-    fixed,
-    /** 导入 */
-    onImport,
-    /** 导出 */
-    onExport
-  }
-}
diff --git a/frontend-pc/src/hooks/useTheme.ts b/frontend-pc/src/hooks/useTheme.ts
deleted file mode 100644
index e198327..0000000
--- a/frontend-pc/src/hooks/useTheme.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { generate, getRgbStr } from '@arco-design/color'
-import { useDark, useToggle } from '@vueuse/core'
-import { computed } from 'vue'
-import { useAppStore } from '@/stores'
-
-/**
- * 主题管理 Hook
- * @description 使用 vueuse 的 useDark 来管理主题状态
- */
-export function useTheme() {
-  const appStore = useAppStore()
-
-  /** 是否为暗色主题 */
-  const isDark = useDark({
-    // 主题切换目标元素
-    selector: 'body',
-    // 主题属性名
-    attribute: 'arco-theme',
-    // 暗色主题值
-    valueDark: 'dark',
-    // 亮色主题值
-    valueLight: 'light',
-    // 本地存储键名
-    storageKey: 'arco-theme',
-    // 初始值
-    initialValue: 'light'
-  })
-
-  /** 当前主题 */
-  const theme = computed(() => isDark.value ? 'dark' : 'light')
-
-  /** 主题切换函数定义 */
-  const onToggle = useToggle(isDark)
-
-  /** 主题切换函数 */
-  function toggleTheme() {
-    onToggle()
-    setThemeColor(appStore.themeColor)
-  }
-
-  /**
-   * 设置主题色
-   * 生成主题色的色阶并应用到 CSS 变量
-   * @param color - 主题色值
-   */
-  function setThemeColor(color: string) {
-    if (!color) return
-    appStore.themeColor = color
-    const themeColors = generate(color, {
-      list: true,
-      dark: isDark.value
-    }) as string[]
-    themeColors.forEach((color, index) => {
-      document.body.style.setProperty(`--primary-${index + 1}`, getRgbStr(color))
-    })
-  }
-
-  /**
-   * 初始化主题设置
-   * 在应用启动时设置初始主题色
-   */
-  function initThemeColor() {
-    if (appStore.themeColor) {
-      setThemeColor(appStore.themeColor)
-    }
-  }
-
-  return {
-    isDark,
-    theme,
-    toggleTheme,
-    setThemeColor,
-    initThemeColor
-  }
-}
diff --git a/frontend-pc/src/icons/AppIcon.vue b/frontend-pc/src/icons/AppIcon.vue
new file mode 100644
index 0000000..338e7b0
--- /dev/null
+++ b/frontend-pc/src/icons/AppIcon.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * 图标组件（离线）。
+ *
+ * 为什么不用 `@iconify/vue`：它默认在**运行时**去 iconify API 拉图标数据 ——
+ * 这套系统要能内网离线部署，那样会白屏。所以图标数据在构建时就抽成
+ * `icon-data.ts`（见 `scripts/extract-pc-icons.py`），这里只负责渲染。
+ */
+import { computed } from 'vue'
+import { ICONS } from './icon-data'
+
+const props = withDefaults(defineProps<{
+  /** 短名，见 icon-data.ts 的键 */
+  name: string
+  /** 像素尺寸 */
+  size?: number
+  /** 颜色，默认跟随 currentColor */
+  color?: string
+}>(), {
+  size: 16,
+  color: 'currentColor'
+})
+
+const icon = computed(() => ICONS[props.name])
+</script>
+
+<template>
+  <svg
+    v-if="icon"
+    class="xt-icon"
+    :width="size"
+    :height="size"
+    :viewBox="`0 0 ${icon.width} ${icon.height}`"
+    :style="{ color }"
+    aria-hidden="true"
+  >
+    <!-- eslint-disable-next-line vue/no-v-html -- 内容是构建期抽出的静态图标数据，不含用户输入 -->
+    <g v-html="icon.body" />
+  </svg>
+  <span v-else class="xt-icon xt-icon--missing" :style="{ width: `${size}px`, height: `${size}px` }" />
+</template>
+
+<style scoped>
+.xt-icon {
+  display: inline-block;
+  flex: none;
+  vertical-align: -0.15em;
+  fill: currentcolor;
+}
+
+.xt-icon--missing {
+  border: 1px dashed currentcolor;
+  border-radius: 2px;
+  opacity: 0.4;
+}
+</style>
diff --git a/frontend-pc/src/icons/custom-icons.json b/frontend-pc/src/icons/custom-icons.json
deleted file mode 100644
index 569b97d..0000000
--- a/frontend-pc/src/icons/custom-icons.json
+++ /dev/null
@@ -1,197 +0,0 @@
-{
-  "prefix": "custom",
-  "icons": {
-    "borders": {
-      "body": "<path d=\"M39.3 6H8.7C7.20883 6 6 7.20883 6 8.7V39.3C6 40.7912 7.20883 42 8.7 42H39.3C40.7912 42 42 40.7912 42 39.3V8.7C42 7.20883 40.7912 6 39.3 6Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"/><path d=\"M24 6L24 42\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"/><path d=\"M6 24H42\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"/>",
-      "width": 48,
-      "height": 48
-    },
-    "table-size": {
-      "body": "<path d=\"M24 12V36M18 17 24 12 30 17M30 31 24 36 18 31\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5H42\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"/><path d=\"M6 43H42\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"/>",
-      "width": 48,
-      "height": 48
-    },
-    "tree-add": {
-      "body": "<rect x=\"6\" y=\"6\" width=\"36\" height=\"36\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linejoin=\"round\"/><path d=\"M24 16V32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M16 24L32 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
-      "width": 48,
-      "height": 48
-    },
-    "tree-reduce": {
-      "body": "<rect x=\"6\" y=\"6\" width=\"36\" height=\"36\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linejoin=\"round\"/><path d=\"M16 24L32 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
-      "width": 48,
-      "height": 48
-    },
-    "alipay": {
-      "body": "<path\r\n    d=\"M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z\"\r\n    fill=\"#06B4FD\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "avatar-man": {
-      "body": "<path d=\"M0 512c0 281.6 230.4 512 512 512s512-230.4 512-512S793.6 0 512 0 0 230.4 0 512z\" fill=\"#D7D1D1\">\r\n  </path>\r\n  <path\r\n    d=\"M512 1024c140.8 0 264.541091-55.458909 358.4-145.058909-8.541091-29.882182-17.058909-55.482182-25.6-68.282182-42.658909-51.2-221.858909-72.517818-221.858909-72.517818L512 768l-106.658909-29.858909s-179.2 25.6-221.882182 72.517818c-8.517818 12.8-17.058909 38.4-25.6 68.282182C247.458909 968.541091 371.2 1024 512 1024z\"\r\n    fill=\"#6B8E9D\"></path>\r\n  <path\r\n    d=\"M281.6 456.541091c0-29.882182 12.8-55.482182 34.141091-55.482182 21.317818 0 42.658909 17.082182 46.917818 46.941091 4.282182 29.858909-12.8 55.458909-34.117818 55.458909-21.341091 0-46.941091-17.058909-46.941091-46.917818z m145.058909 170.658909v149.341091h170.682182V627.2h-170.682182z m273.082182-123.741091c-21.341091 0-38.4-29.858909-34.141091-55.458909 4.258909-29.858909 25.6-51.2 46.941091-46.941091 21.317818 0 38.4 29.882182 34.117818 55.482182-4.258909 29.858909-25.6 51.2-46.917818 46.917818z\"\r\n    fill=\"#FFE5C5\"></path>\r\n  <path\r\n    d=\"M512 213.341091s-183.458909 8.517818-183.458909 106.658909v200.541091c0 38.4 59.717818 149.317818 119.458909 153.6 29.858909 0 64 4.258909 64 4.258909s38.4-4.258909 64-4.258909c55.458909-4.282182 115.2-115.2 115.2-153.6v-196.282182c4.258909-98.117818-179.2-110.917818-179.2-110.917818\"\r\n    fill=\"#FEE1B9\"></path>\r\n  <path\r\n    d=\"M622.941091 243.2C571.741091 217.6 512 213.341091 512 213.341091c-8.541091 0-183.458909 8.517818-183.458909 106.658909v200.541091c0 38.4 59.717818 149.317818 119.458909 153.6H512s38.4-4.282182 64-4.282182c55.458909-4.258909 119.458909-115.2 119.458909-153.6v-192c0-38.4-29.858909-68.258909-72.517818-81.058909\"\r\n    fill=\"#FFF0DA\"></path>\r\n  <path d=\"M401.058909 729.6L499.2 1024h29.858909l98.141091-294.4-115.2 25.6z\" fill=\"#FFFFFF\"></path>\r\n  <path d=\"M524.8 819.2l25.6-25.6L512 755.2l-38.4 38.4 25.6 25.6-29.858909 149.341091L512 1011.2l46.941091-42.658909z\"\r\n    fill=\"#515151\"></path>\r\n  <path\r\n    d=\"M512 755.2l89.6-46.941091 46.941091 25.6-76.8 106.682182L512 755.2z m0 0l-89.6-46.941091-46.941091 25.6 93.882182 106.682182L512 755.2z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M704 439.458909h-17.058909l-21.341091-162.117818s51.2-21.341091 64 42.658909c12.8 64-25.6 119.458909-25.6 119.458909m-392.541091 0h17.082182l21.317818-162.117818s-51.2-21.341091-64 42.658909c-8.517818 64 25.6 119.458909 25.6 119.458909\"\r\n    fill=\"#46382E\"></path>\r\n  <path\r\n    d=\"M512 349.858909c102.4 0 174.941091-12.8 221.858909-102.4 0 0-46.917818-12.8-153.6-55.458909-166.4-68.258909-302.917818 42.658909-256 119.458909 12.8 25.6 85.341091 38.4 187.741091 38.4z\"\r\n    fill=\"#46382E\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "avatar-woman": {
-      "body": "<path\r\n    d=\"M510.002302 510.002302m-510.002302 0a510.002302 510.002302 0 1 0 1020.004604 0 510.002302 510.002302 0 1 0-1020.004604 0Z\"\r\n    fill=\"#F9E9E6\"></path>\r\n  <path\r\n    d=\"M511.532309 1023.999622c126.952795 0.151112 249.608349-44.738535 344.893779-126.216125l-7.09281-43.54853C849.031055 778.934072 786.206327 717.969908 708.676532 717.781018H318.043102c-77.539239 0.245557-140.326189 61.22861-140.571745 136.529505L170.000767 900.465731c94.813206 79.777582 216.08042 123.628336 341.531542 123.533891\"\r\n    fill=\"#FCA183\"></path>\r\n  <path\r\n    d=\"M523.668475 806.200306H511.607865c-46.183542 0-96.050434-38.967954-96.050434-86.577613l12.117277-160.820726c0.160556-47.713549 37.636281-86.369834 83.942601-86.577613h11.966166c46.362987 0.122778 83.933157 38.797953 84.093712 86.577613l11.966166 160.820726c0 47.675771-49.781891 86.577613-95.984323 86.577613\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M523.668475 806.200306H511.607865c-46.183542 0-96.050434-38.967954-96.050434-86.577613l12.117277-160.820726c0.160556-47.713549 37.636281-86.369834 83.942601-86.577613h11.966166c46.362987 0.122778 83.933157 38.797953 84.093712 86.577613l11.966166 160.820726c0 47.675771-49.781891 86.577613-95.984323 86.577613\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M610.236643 651.46183l-5.987804-77.973686c-0.198334-45.437427-37.041278-82.21426-82.516484-82.374816h-11.833942c-45.475205 0.198334-82.280371 37.0035-82.440928 82.440928L415.557431 726.696614a67.490305 67.490305 0 0 0 8.575595 32.432368c5.940582 0.670559 11.918943 1.001116 17.887858 1.001116h17.604524a159.252941 159.252941 0 0 0 150.611235-108.668268\"\r\n    fill=\"#DCE6EA\"></path>\r\n  <path\r\n    d=\"M647.070143 302.223586a45.48465 45.48465 0 0 1 45.522428 45.446872v79.73036A52.643571 52.643571 0 0 1 708.336531 425.001918c31.29903 0 56.666922 27.483457 56.666922 61.389166S739.635561 547.78025 708.336531 547.78025a52.700238 52.700238 0 0 1-19.956202-3.910017 166.383529 166.383529 0 0 1-44.672423 80.646475 167.025754 167.025754 0 0 1-118.027755 48.809109h-18.747307a167.035198 167.035198 0 0 1-118.0372-48.809109 166.383529 166.383529 0 0 1-44.219088-78.644244c-4.514465 1.237228-9.246153 1.907786-14.119508 1.907786-31.29903 0-56.666922-27.483457-56.666923-61.389166s25.367892-61.389166 56.666923-61.389166c3.22057 0 6.375029 0.283335 9.444487 0.850004v-78.181464A45.475205 45.475205 0 0 1 385.523962 302.223586h261.546181z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M703.727621 832.097089l-85.652053-80.202584C672.63637 763.426224 687.369769 848.039384 739.19167 868.892811c1.095561 0.54778 13.099504-2.200565 50.188004-10.993383 1.643341-1.086116-3.815573-49.432445-2.720012-47.222435 7.650035 13.72284 13.637839 28.002904 19.644533 42.292413 22.912326-29.117354 40.375182-51.085231 45.824651-85.689831l-25.641782-32.96126 31.648476 21.977321 20.173425-48.346329s-75.272562-45.040759-95.47432-99.969896c-13.628395-34.62349-19.096753-224.117678-19.096753-224.117678s-3.815573-28.361795-26.727899-80.542586c-1.633896-3.296126-2.729457-6.592252-4.363353-9.888378-62.739728-174.128008-225.874353-139.523408-225.874352-139.523408-108.026043-9.340598-157.675712 38.448507-194.773657 101.074901-8.726706 12.627279-16.905632 27.464568-24.007887 43.397418-26.727898 60.964164-40.365738 129.965587-28.919019 256.323379 0 0 12.003943 173.570783 80.750364 255.964489 22.912326-9.878933 37.097945-47.241324 60.010271-56.024697 46.939101 0.538336 27.832903 2.191121 35.473494-18.681196 10.360602-22.515657 7.631146-58.234707 1.624452-84.59427-15.271736-10.983938-28.90013-23.611218-30.543472-25.273448-9.822267-8.783373-70.389762-65.355851-76.934791-98.31711l-1.633897-3.296126c-0.54778-2.200565-0.54778-3.853351-1.086116-6.044472a29.051242 29.051242 0 0 1-21.278429-3.296126c-11.994499-7.130588-16.905632-21.420097-18.548973-34.614045-1.643341-11.522274-1.095561-25.811783 5.987805-36.247941C522.053468 412.969642 506.224507 266.296758 506.224507 266.296758 517.13289 382.756728 658.99853 426.701926 722.824374 441.529771c13.637839 25.273447 2.738901 74.715337-28.361795 76.349233-1.643341 0-2.738901 0-3.834462-0.538335-1.086116 4.391686-2.172232 8.235593-3.258348 12.636723-13.656728 50.528006-47.477437 78.011463-87.304838 112.60662-8.178926 8.235593-14.18562 8.783373-22.364546 14.827844 1.633896 21.977321-2.729457 58.225263 6.54503 76.897014 10.370047 1.652785 29.4668 7.149477 33.830153 17.585635\"\r\n    fill=\"#3E435C\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "backtop": {
-      "body": "<path d=\"M390 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S250 534.068 250 644.126v35.864h140z\" fill=\"#4988FD\"></path><path d=\"M390 699.988h-140c-11.046 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.108-153.364a20.012 20.012 0 0 1 12.758-0.158c3.434 1.11 84.132 28.598 84.132 153.522v35.864c0.002 11.046-8.952 20-19.998 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z\" fill=\"#4988FD\"></path><path d=\"M776 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S636 534.068 636 644.126v35.864h140z\" fill=\"#4988FD\"></path><path d=\"M776 699.988h-140c-11.044 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.11-153.364a20.026 20.026 0 0 1 12.758-0.158c3.436 1.11 84.132 28.598 84.132 153.522v35.864c0 11.046-8.956 20-20 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z\" fill=\"#4988FD\"></path><path d=\"M693.146 651.988v-92.516c0-288.398-181.292-346.924-181.292-346.924S332 275.57 332 559.476c0.012 56.328 0 92.514 0 92.514l361.146-0.002z\" fill=\"#4988FD\"></path><path d=\"M332 671.99a19.996 19.996 0 0 1-20-20.006c0-0.004 0.012-36.184 0-92.504 0-152.884 51.604-243.788 94.894-293.124 47.876-54.564 96.308-71.968 98.346-72.684a20.012 20.012 0 0 1 12.758-0.158c2.06 0.666 51.034 16.918 99.41 71.014 43.676 48.838 95.738 139.654 95.738 294.944v92.516c0 11.044-8.956 20-20 20L332 671.99z m180.098-437.812c-13.256 6.236-45.196 23.814-76.73 60.39C380.828 357.83 352 449.434 352 559.476c0.006 31.314 0.006 56.404 0.004 72.514l321.142-0.002v-72.516c0-111.762-29.016-203.89-83.91-266.424-31.678-36.086-63.762-52.93-77.138-58.87z\" fill=\"#4988FD\"></path><path d=\"M497.858 864.994l-42.426-42.426c-31.244-31.244-31.244-81.894 0-113.138 31.242-31.242 81.894-31.242 113.136 0 31.242 31.24 31.244 81.894 0 113.138l-42.426 42.426c-7.81 7.81-20.474 7.81-28.284 0z\" fill=\"#DFECFD\"></path><path d=\"M512 870.852a19.868 19.868 0 0 1-14.142-5.86l-42.426-42.424c-15.11-15.11-23.432-35.2-23.432-56.57s8.322-41.46 23.432-56.568S490.632 686 512 685.996c21.37 0.002 41.46 8.324 56.568 23.434S592 744.63 592 766s-8.322 41.46-23.432 56.57l-42.428 42.428a19.864 19.864 0 0 1-14.14 5.856zM512 688c-20.832-0.002-40.42 8.112-55.154 22.844S434 745.164 434 766c0 20.834 8.112 40.422 22.846 55.156l42.426 42.426a17.88 17.88 0 0 0 12.728 5.272 17.88 17.88 0 0 0 12.726-5.27l42.428-42.428c14.732-14.732 22.846-34.32 22.846-55.156 0-20.834-8.114-40.42-22.846-55.154S532.834 688 512 688z\" fill=\"#DFECFD\"></path><path d=\"M312.576 803.972l-22.274-22.274c-16.402-16.402-16.402-42.996 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.404 42.996 0 59.398l-22.272 22.274a10.5 10.5 0 0 1-14.85 0z\" fill=\"#DFECFD\"></path><path d=\"M320 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.374-16.374-16.374-43.02 0-59.396A41.728 41.728 0 0 1 320 710c11.22 0 21.764 4.366 29.7 12.3 16.374 16.376 16.374 43.022 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM320 712a39.744 39.744 0 0 0-28.284 11.714c-15.596 15.596-15.596 40.974 0 56.57l22.02 22.02c1.674 1.674 3.898 2.594 6.264 2.592s4.59-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.596-40.972 0-56.568A39.744 39.744 0 0 0 320 712z\" fill=\"#DFECFD\"></path><path d=\"M698.576 803.972l-22.274-22.274c-16.4-16.4-16.4-42.994 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.4 42.996 0 59.398l-22.274 22.274a10.498 10.498 0 0 1-14.848 0z\" fill=\"#DFECFD\"></path><path d=\"M706 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.37-16.374-16.37-43.02 0-59.396 7.936-7.934 18.482-12.3 29.7-12.3s21.764 4.366 29.7 12.3c16.374 16.376 16.372 43.02 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM706 712a39.736 39.736 0 0 0-28.284 11.714c-15.594 15.596-15.594 40.974 0 56.57l22.02 22.02c1.672 1.672 3.896 2.592 6.264 2.592s4.592-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.594-40.972 0-56.568A39.736 39.736 0 0 0 706 712z\" fill=\"#DFECFD\"></path><path d=\"M512 352c22.092 0 40 17.908 40 40v80c0 22.092-17.908 40-40 40s-40-17.908-40-40v-80c0-22.092 17.908-40 40-40z\" fill=\"#DFECFD\"></path><path d=\"M512 512c-22.056 0-40-17.944-40-40v-80c0-22.056 17.944-40 40-40s40 17.944 40 40v80c0 22.056-17.944 40-40 40z m0-158c-20.954 0-38 17.046-38 38v80c0 20.954 17.046 38 38 38s38-17.046 38-38v-80c0-20.954-17.046-38-38-38z\" fill=\"#DFECFD\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-all": {
-      "body": "<path d=\"M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z\" fill=\"#F7A647\"></path><path d=\"M232.727273 303.872C232.727273 290.327273 243.781818 279.272727 257.326545 279.272727h148.631273c5.620364 0 10.984727 2.292364 14.848 6.283637l50.897455 52.805818c1.186909 1.233455 2.210909 2.594909 3.037091 4.049454h259.874909c31.138909 0 56.657455 25.460364 56.657454 56.610909V688.058182c0 31.150545-25.518545 56.669091-56.657454 56.669091H289.396364C258.245818 744.727273 232.727273 719.208727 232.727273 688.058182V303.872zM726.702545 556.218182h-239.825454a10.216727 10.216727 0 0 0-10.205091 10.205091v25.390545c0 5.620364 4.584727 10.205091 10.205091 10.205091h239.825454a10.216727 10.216727 0 0 0 10.205091-10.205091v-25.390545a10.216727 10.216727 0 0 0-10.205091-10.205091z m-0.058181-87.691637h-239.825455a10.216727 10.216727 0 0 0-10.205091 10.205091h-0.069818v25.390546c0 5.632 4.573091 10.216727 10.205091 10.216727h239.895273a10.216727 10.216727 0 0 0 10.205091-10.216727V478.72a10.216727 10.216727 0 0 0-10.205091-10.205091z\" fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-close": {
-      "body": "<defs><style type=\"text/css\"></style></defs><path d=\"M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z\" fill=\"#FFA000\"></path><path d=\"M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z\" fill=\"#FFCA28\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-css": {
-      "body": "<path d=\"M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z\"\r\n    fill=\"#E9EDED\"></path>\r\n  <path d=\"M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z\" fill=\"#4BBFEB\"\r\n   ></path>\r\n  <path d=\"M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144\" fill=\"#4BBFEB\"></path>\r\n  <path\r\n    d=\"M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-15.936 12.992 16 16 0 0 0 0 0.064 16 16 0 0 0 4.736 14.56 16 16 0 0 0 2.496 1.92 16 16 0 0 0 4.448 1.92 16 16 0 0 0 3.136 0.48 16 16 0 0 0 1.12 0.064c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m157.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0z\"\r\n    fill=\"#4BBFEB\"></path>\r\n  <path\r\n    d=\"M334.496 800.128a16 16 0 0 0-3.36 0.672c-41.664 3.712-75.008 37.44-75.008 79.328 0 42.08 33.696 75.904 75.616 79.296a16 16 0 0 0 4.64 0.704h32a16 16 0 1 0 0-32h-29.824c-28.544 0-50.432-21.44-50.432-48s21.888-48 50.432-48h29.568a16 16 0 1 0 0-32h-32a16 16 0 0 0-1.6 0z m128 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.064 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.296-0.384 48.096 48.096 0 0 0 44.704-47.616c0-25.152-19.84-45.888-44.576-47.68a16 16 0 0 0-3.424-0.32h-32a15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z m159.744 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-32a15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z\"\r\n    fill=\"#E9EDED\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-dir": {
-      "body": "<defs><style type=\"text/css\"></style></defs><path d=\"M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z\" fill=\"#FFA000\"></path><path d=\"M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z\" fill=\"#FFCA28\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-excel": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#62C558\"></path>\r\n  <path d=\"M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889\"\r\n    fill=\"#2A8121\"></path>\r\n  <path\r\n    d=\"M682.666667 724.024889L638.691556 768 341.333333 470.670222 385.308444 426.666667zM454.087111 611.128889l44.088889 44.088889L385.422222 768 341.333333 723.911111zM682.666667 470.755556l-113.066667 113.066666-44.088889-44.088889L638.577778 426.666667z\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-exe": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#BABABA\"></path>\r\n  <path d=\"M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778\"\r\n    fill=\"#979797\"></path>\r\n  <path\r\n    d=\"M586.865778 521.671111a148.650667 148.650667 0 0 1-3.754667 49.265778l44.629333 22.556444a164.664889 164.664889 0 0 1-10.154666 26.254223l-4.266667 8.448a162.986667 162.986667 0 0 1-15.104 23.751111l-44.657778-22.528a149.048889 149.048889 0 0 1-37.404444 32.312889l15.587555 47.388444a192.910222 192.910222 0 0 1-62.179555 20.48l-15.587556-47.416889a148.053333 148.053333 0 0 1-49.322666-3.783111l-22.528 44.657778a163.612444 163.612444 0 0 1-26.254223-10.154667l-8.448-4.266667a158.350222 158.350222 0 0 1-23.751111-15.132444l22.528-44.600889a147.569778 147.569778 0 0 1-32.312889-37.461333l-47.416888 15.644444a195.868444 195.868444 0 0 1-12.856889-30.264889l-7.594667-31.943111 47.416889-15.616a148.650667 148.650667 0 0 1 3.754667-49.294222l-44.600889-22.528c2.190222-7.452444 4.892444-14.904889 8.078222-21.959111l8.533333-16.952889c3.84-6.769778 8.220444-13.368889 12.885334-19.569778l44.629333 22.528c10.353778-12.515556 23.04-23.608889 37.432889-32.284444l-15.587556-47.416889c9.557333-5.034667 19.626667-9.386667 30.236445-12.885333L410.737778 341.333333l15.587555 47.416889a147.370667 147.370667 0 0 1 49.322667 3.754667l22.528-44.629333c7.452444 2.190222 14.876444 4.920889 21.959111 8.106666l4.266667 2.048 8.504889 4.266667 4.181333 2.275555c6.741333 3.754667 13.368889 8.135111 19.569778 12.828445l-22.528 44.657778a147.911111 147.911111 0 0 1 32.284444 37.404444l47.416889-15.587555a195.527111 195.527111 0 0 1 20.451556 62.179555l-47.416889 15.587556z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M520.618667 508.984889a84.707556 84.707556 0 1 1-160.938667 52.963555 84.707556 84.707556 0 0 1 160.938667-52.963555\"\r\n    fill=\"#BABABA\"></path>\r\n  <path\r\n    d=\"M742.371556 771.84c-4.864 6.826667-10.865778 12.743111-17.521778 17.436444l9.557333 23.096889c-3.896889 2.56-8.106667 4.807111-12.401778 6.656l-4.408889 1.792a79.644444 79.644444 0 0 1-13.454222 4.067556l-9.557333-23.096889c-7.992889 1.365333-16.440889 1.422222-24.746667 0l-9.557333 23.04a97.792 97.792 0 0 1-30.208-12.515556l9.557333-23.04a74.524444 74.524444 0 0 1-17.464889-17.521777l-23.096889 9.557333a82.488889 82.488889 0 0 1-6.627555-12.430222l-1.792-4.380445a80.554667 80.554667 0 0 1-4.096-13.454222l23.096889-9.557333a75.264 75.264 0 0 1 0-24.746667l-23.068445-9.557333a98.986667 98.986667 0 0 1 5.006223-15.644445l7.566222-14.592 23.04 9.557334c4.835556-6.826667 10.894222-12.743111 17.521778-17.436445l-9.557334-23.096889c3.271111-2.104889 6.741333-4.039111 10.24-5.688889l8.789334-3.612444c3.640889-1.308444 7.452444-2.389333 11.235555-3.214222l9.557333 23.096889c8.021333-1.365333 16.440889-1.422222 24.718223 0l9.585777-23.068445c5.233778 1.223111 10.496 2.844444 15.644445 5.006222l14.592 7.537778-9.585778 23.04c6.826667 4.892444 12.771556 10.894222 17.436445 17.521778l23.096888-9.528889c2.133333 3.271111 4.067556 6.712889 5.688889 10.24l0.967111 2.161778 1.792 4.380444 0.853334 2.218667c1.336889 3.640889 2.417778 7.480889 3.214222 11.264l-23.096889 9.557333c1.393778 7.964444 1.422222 16.440889 0 24.718223l23.04 9.557333a96 96 0 0 1-12.515555 30.236444l-23.04-9.557333z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M721.408 745.415111a42.382222 42.382222 0 1 1-78.250667-32.455111 42.382222 42.382222 0 0 1 78.222223 32.426667\"\r\n    fill=\"#BABABA\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-html": {
-      "body": "<path d=\"M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z\"\r\n    fill=\"#E9EDED\"></path>\r\n  <path d=\"M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z\" fill=\"#F05542\"\r\n   ></path>\r\n  <path d=\"M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144\" fill=\"#F05542\"></path>\r\n  <path\r\n    d=\"M432.736 384.064a16 16 0 0 0-10.976 4.8l-96.96 95.776a16 16 0 0 0-0.416 0.416 16 16 0 0 0 1.664 23.808l95.68 94.56a16 16 0 1 0 22.528-22.72l-85.568-84.576 85.568-84.48a16 16 0 0 0-11.52-27.584z m157.824 0a16 16 0 0 0-11.008 27.552l85.504 84.48-85.504 84.576a16 16 0 1 0 22.496 22.752l95.648-94.56a16 16 0 0 0 5.44-17.504 16 16 0 0 0-1.28-2.912 16 16 0 0 0-0.608-1.12 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.8-0.992 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.864-0.96 16 16 0 0 0-0.064 0l-0.64-0.544a16 16 0 0 0-0.48-0.512l-95.776-94.688a16 16 0 0 0-11.488-4.8z\"\r\n    fill=\"#F05542\"></path>\r\n  <path\r\n    d=\"M654.88 799.744a16 16 0 0 0-11.84 6.624L608 853.312l-35.136-46.944-0.128 0.064a16 16 0 0 0-13.056-6.368 16 16 0 0 0-15.744 16.192v127.68a16 16 0 1 0 32 0v-80.128l15.936 21.248a16 16 0 0 0 28.864 4.448l19.2-25.6v80.032a16 16 0 1 0 32 0v-126.816a16 16 0 0 0-15.424-17.376 16 16 0 0 0-1.632 0z m-383.136 0.32a16 16 0 0 0-15.744 16.192V943.936a16 16 0 1 0 32 0v-47.808h64v47.808a16 16 0 1 0 32 0v-61.312a16 16 0 0 0 0-5.12v-61.248a16 16 0 0 0-16.256-16.192 16 16 0 0 0-15.744 16.192v47.872H288v-47.872a16 16 0 0 0-16.256-16.192z m192 0a16 16 0 0 0-1.6 0.064H432a16 16 0 1 0 0 32h16v111.808a16 16 0 1 0 32 0v-111.808h16a16 16 0 1 0 0-32h-30.304a16 16 0 0 0-1.92-0.064z m255.936 0a16 16 0 0 0-15.744 16.192v126.496a16 16 0 0 0 0.64 5.824 16 16 0 0 0 0 0.064 16 16 0 0 0 0.096 0.416 16 16 0 0 0 0.448 1.12 16 16 0 0 0 0.864 1.824 16 16 0 0 0 0.64 0.992 16 16 0 0 0 0.192 0.32 16 16 0 0 0 0.736 0.96 16 16 0 0 0 0.832 0.864 16 16 0 0 0 0.352 0.416 16 16 0 0 0 0.832 0.704 16 16 0 0 0 0.448 0.384 16 16 0 0 0 0.352 0.32 16 16 0 0 0 1.12 0.736 16 16 0 0 0 2.464 1.248 16 16 0 0 0 0.864 0.32 16 16 0 0 0 5.376 0.864h63.552a16 16 0 1 0 0-32h-47.808v-111.872a16 16 0 0 0-16.256-16.192z\"\r\n    fill=\"#E9EDED\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-image": {
-      "body": "<path\r\n    d=\"M952.888889 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H156.444444c-62.862222 0-113.777778-50.915556-113.777777-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777777-113.777778h514.844445L952.888889 281.6z\"\r\n    fill=\"#85BCFF\"></path>\r\n  <path d=\"M676.664889 167.822222V0l281.6 281.6h-167.822222c-62.862222 0-113.777778-50.915556-113.777778-113.777778\"\r\n    fill=\"#529EE0\"></path>\r\n  <path\r\n    d=\"M685.824 363.804444a53.76 53.76 0 0 1 53.731556 53.731556v307.029333a53.76 53.76 0 0 1-53.731556 53.731556H309.76a53.731556 53.731556 0 0 1-53.731556-53.76V417.564444c0-29.667556 24.035556-53.731556 53.731556-53.731555H685.795556z m-72.903111 149.674667l-138.183111 146.545778-80.583111-62.805333-92.131556 94.208v31.402666c0 11.548444 10.325333 20.906667 23.04 20.906667h345.400889c12.714667 0 23.04-9.386667 23.04-20.906667v-125.610666l-80.583111-83.740445z m-227.896889-85.532444a32.085333 32.085333 0 1 0 0 64.142222 32.085333 32.085333 0 0 0 0-64.142222z\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-js": {
-      "body": "<path d=\"M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z\"\r\n    fill=\"#E9EDED\"></path>\r\n  <path d=\"M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z\" fill=\"#25B39E\"\r\n   ></path>\r\n  <path d=\"M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144\" fill=\"#25B39E\"></path>\r\n  <path\r\n    d=\"M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-3.2 0.256 16 16 0 0 0-12.384 11.232 16 16 0 0 0-0.352 1.504 16 16 0 0 0 0 0.064 16 16 0 0 0 15.936 18.944c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m157.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0zM512 367.936a32 32 0 0 0-32 32 32 32 0 0 0 32 32 32 32 0 0 0 32-32 32 32 0 0 0-32-32z m0 96a32 32 0 0 0-32 32 32 32 0 0 0 16.256 27.872l-14.4 28.864a16 16 0 1 0 28.64 14.272l24-48.256a32 32 0 0 0 9.44-21.504 16 16 0 0 0 0-0.192 32 32 0 0 0 0.064-1.056 32 32 0 0 0-32-32z\"\r\n    fill=\"#25B39E\"></path>\r\n  <path\r\n    d=\"M335.872 800a16 16 0 0 0-15.744 16.256V912c0 9.152-6.848 16-16 16a15.616 15.616 0 0 1-16-16 16 16 0 0 0-16.256-16.192 16 16 0 0 0-15.744 16.192c0 26.304 21.696 48 48 48 24.768 0 45.12-19.296 47.488-43.52a16 16 0 0 0 0.512-4.224v-96a16 16 0 0 0-16.256-16.256z m94.4 0.128a16 16 0 0 0-2.016 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z\"\r\n    fill=\"#E9EDED\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-json": {
-      "body": "<path d=\"M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z\"\r\n    fill=\"#E9EDED\"></path>\r\n  <path d=\"M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z\" fill=\"#F17F53\"\r\n   ></path>\r\n  <path d=\"M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144\" fill=\"#F17F53\"></path>\r\n  <path\r\n    d=\"M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-15.936 12.992 16 16 0 0 0 0 0.064 16 16 0 0 0 4.736 14.56 16 16 0 0 0 2.496 1.92 16 16 0 0 0 4.448 1.92 16 16 0 0 0 3.136 0.48 16 16 0 0 0 1.12 0.064c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m125.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0zM496 384a16 16 0 0 0-16 16 16 16 0 0 0 16 16 16 16 0 0 0 16-16 16 16 0 0 0-16-16z m-0.256 63.808A16 16 0 0 0 480 464v96a16 16 0 1 0 32 0v-96a16 16 0 0 0-16.256-16.192z\"\r\n    fill=\"#F17F53\"></path>\r\n  <path\r\n    d=\"M720.576 799.616a16 16 0 0 0-1.632 0.064 16 16 0 0 0-15.008 17.312v126.816a16 16 0 1 0 32 0v-80l66.624 88.96a16 16 0 0 0 0.064 0.096l0.448 0.576a16 16 0 0 0 28.864-9.6v-127.68a16 16 0 0 0-16.256-16.224 16 16 0 0 0-15.744 16.256v79.68l-67.136-89.6a16 16 0 0 0-12.224-6.656zM303.744 800a16 16 0 0 0-15.744 16.256V912c0 9.152-6.848 16-16 16a15.616 15.616 0 0 1-16-16 16 16 0 0 0-16.256-16.192A16 16 0 0 0 224 912c0 26.304 21.696 48 48 48 24.768 0 45.152-19.296 47.488-43.52a16 16 0 0 0 0.512-4.224v-96A16 16 0 0 0 303.744 800z m288.256 0a80.256 80.256 0 0 0-80 80c0 44 36 80 80 80s80-36 80-80-36-80-80-80z m-193.888 0.128a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.88-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0zM592 832c26.688 0 48 21.312 48 48s-21.312 48-48 48-48-21.312-48-48 21.312-48 48-48z\"\r\n    fill=\"#E9EDED\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-music": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#A15FDE\"></path>\r\n  <path d=\"M685.511111 196.266667V0L967.111111 281.6H770.844444a85.333333 85.333333 0 0 1-85.333333-85.333333\"\r\n    fill=\"#C386F0\"></path>\r\n  <path\r\n    d=\"M669.980444 426.268444v236.999112c0 26.254222-31.857778 47.587556-71.082666 47.587555-39.253333 0-70.741333-21.333333-70.741334-47.587555 0-26.282667 31.516444-47.587556 70.741334-47.587556 14.848 0 28.728889 3.100444 40.163555 8.334222v-165.916444l-205.767111 48.497778v211.057777c0 26.254222-32.142222 47.559111-71.992889 47.559111-39.850667 0-72.305778-21.333333-72.305777-47.559111 0-26.282667 32.426667-47.587556 72.305777-47.587555a96.711111 96.711111 0 0 1 41.102223 8.647111V474.168889c0-14.222222 9.870222-26.88 23.779555-29.980445l205.795556-47.900444a30.862222 30.862222 0 0 1 38.001777 29.980444\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-open": {
-      "body": "<defs><style type=\"text/css\">@font-face { font-family: feedback-iconfont; src: url(\"//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix\") format(\"embedded-opentype\"), url(\"//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2\") format(\"woff2\"), url(\"//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff\") format(\"woff\"), url(\"//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf\") format(\"truetype\"), url(\"//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont\") format(\"svg\"); }\r\n</style></defs><path d=\"M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z\" fill=\"#FFA000\"></path><path d=\"M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z\" fill=\"#FFFFFF\"></path><path d=\"M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z\" fill=\"#FFCA28\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-other": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#BABABA\"></path>\r\n  <path d=\"M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778\"\r\n    fill=\"#979797\"></path>\r\n  <path\r\n    d=\"M733.667556 632.689778a111.104 111.104 0 0 1-110.819556 110.819555h-221.667556a111.132444 111.132444 0 0 1-110.848-110.819555 111.047111 111.047111 0 0 1 99.754667-110.279111A122.197333 122.197333 0 0 1 512 407.694222a122.197333 122.197333 0 0 1 121.912889 114.716445 111.160889 111.160889 0 0 1 99.754667 110.279111\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-pdf": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#D23B41\"></path>\r\n  <path d=\"M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889\"\r\n    fill=\"#9C171C\"></path>\r\n  <path\r\n    d=\"M680.277333 662.698667c-11.889778-1.194667-23.751111-3.640889-35.640889-9.728 10.666667-2.133333 20.110222-2.133333 30.776889-2.133334 23.751111 0 28.330667 5.774222 28.330667 9.443556-6.997333 2.417778-15.246222 3.356444-23.466667 2.417778z m-120.945777-15.530667c-25.884444 5.802667-54.556444 14.336-80.440889 23.779556v-2.446223l-2.446223 1.223111c13.084444-26.197333 25.002667-53.333333 35.640889-80.753777l0.938667 1.223111 1.194667-2.133334c13.112889 20.110222 29.866667 40.220444 47.530666 57.884445h-3.640889l1.223112 1.223111zM497.777778 417.450667c1.223111-1.223111 3.669333-1.223111 4.551111-1.223111h3.697778a96.739556 96.739556 0 0 1-1.251556 61.553777c-8.220444-18.915556-11.861333-40.220444-6.997333-60.330666zM352.142222 770.275556l-3.669333 1.223111a96.768 96.768 0 0 1 42.666667-34.417778c-9.443556 15.502222-22.556444 27.392-38.997334 33.194667z m324.494222-155.107556c-25.002667 0-49.664 3.669333-74.666666 8.248889a353.365333 353.365333 0 0 1-73.415111-94.776889c20.110222-66.417778 21.333333-111.217778 5.774222-132.551111a39.253333 39.253333 0 0 0-30.748445-15.502222c-15.246222-1.223111-29.582222 6.087111-36.579555 18.887111-21.333333 35.640889 9.443556 105.415111 23.779555 134.058666-16.782222 50.887111-36.864 99.328-63.089777 146.858667-112.412444 48.440889-114.858667 77.994667-114.858667 88.661333 0 13.084444 7.310222 26.197333 20.110222 32 4.864 3.640889 11.889778 4.835556 17.976889 4.835556 29.582222 0 64-33.194667 100.551111-98.389333 46.307556-18.887111 92.615111-34.133333 141.084445-44.8a153.941333 153.941333 0 0 0 87.722666 35.356444c20.110222 0 59.107556 0 59.107556-40.220444 1.223111-15.530667-6.997333-41.443556-62.748445-42.666667z\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-ppt": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#F16C41\"></path>\r\n  <path d=\"M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889\"\r\n    fill=\"#CD4B29\"></path>\r\n  <path\r\n    d=\"M525.880889 648.135111a88.32 88.32 0 0 1-68.750222-32.995555 87.04 87.04 0 0 1-19.626667-55.381334c0-21.048889 7.253333-40.248889 19.626667-55.381333a88.234667 88.234667 0 0 1 68.750222-32.995556 88.490667 88.490667 0 0 1 88.376889 88.376889 88.519111 88.519111 0 0 1-88.376889 88.376889m0-235.690667c-24.945778 0-48.327111 6.087111-68.750222 17.294223a143.075556 143.075556 0 0 0-58.88 56.945777v146.119112a143.132444 143.132444 0 0 0 58.88 56.974222c20.423111 11.178667 43.804444 17.265778 68.750222 17.265778a147.342222 147.342222 0 0 0 147.285333-147.285334 147.342222 147.342222 0 0 0-147.285333-147.342222\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path d=\"M398.222222 824.888889h58.908445V412.444444H398.222222z\" fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-rar": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#FFC63A\"></path>\r\n  <path d=\"M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778\"\r\n    fill=\"#DD9F08\"></path>\r\n  <path\r\n    d=\"M436.565333 68.437333h68.437334V0h-68.437334zM505.002667 136.874667h68.437333V68.437333h-68.437333zM436.565333 205.312h68.437334V136.874667h-68.437334zM505.002667 273.749333h68.437333V205.312h-68.437333z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path d=\"M436.565333 342.158222h68.437334V273.720889h-68.437334zM505.002667 410.624h68.437333V342.186667h-68.437333z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M436.565333 479.032889h68.437334v-68.437333h-68.437334zM505.002667 547.470222h68.437333v-68.437333h-68.437333zM470.784 762.225778h68.437333v-68.437334h-68.437333v68.437334z m-34.218667-136.874667v136.874667c0 18.915556 15.331556 34.218667 34.218667 34.218666h68.437333c18.915556 0 34.218667-15.303111 34.218667-34.218666v-136.874667h-136.874667z\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-txt": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#6D9FE5\"></path>\r\n  <path d=\"M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778\"\r\n    fill=\"#4B80CB\"></path>\r\n  <path\r\n    d=\"M344.177778 485.575111h312.888889V426.666667h-312.888889zM471.153778 770.019556h58.908444v-284.444445h-58.908444z\"\r\n    fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-video": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#C386F0\"></path>\r\n  <path\r\n    d=\"M284.444444 398.222222m42.666667 0l298.666667 0q42.666667 0 42.666666 42.666667l0 234.666667q0 42.666667-42.666666 42.666666l-298.666667 0q-42.666667 0-42.666667-42.666666l0-234.666667q0-42.666667 42.666667-42.666667Z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M738.417778 457.841778a31.971556 31.971556 0 0 1 48.014222 27.676444v154.538667c0 24.632889-26.652444 40.021333-47.985778 27.704889L684.430222 636.586667V488.96z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path d=\"M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778\"\r\n    fill=\"#A15FDE\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-wps": {
-      "body": "<path\r\n    d=\"M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z\"\r\n    fill=\"#4F6BF6\"></path>\r\n  <path d=\"M581.262222 755.626667h59.363556L739.555556 439.04h-59.335112z\" fill=\"#FFFFFF\"></path>\r\n  <path d=\"M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889\"\r\n    fill=\"#243EBB\"></path>\r\n  <path\r\n    d=\"M640.625778 755.626667h-59.363556l-98.929778-277.020445h59.335112zM442.737778 755.626667h-59.363556L284.444444 439.04h59.335112z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path d=\"M383.374222 755.626667h59.363556l98.929778-277.020445h-59.335112z\" fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file-zip": {
-      "body": "<path d=\"M97.9 376h828.4v269.2H97.9z\" fill=\"#F95F5D\"></path><path d=\"M926.3 376V161.5c0-26.6-23.8-50.3-52.1-50.3H149.9c-28.3 0-52.1 23.7-52.1 50.3V376h828.5z m0 0\" fill=\"#55C7F7\"></path><path d=\"M97.9 645.2v214.5c0 26.6 23.6 50.3 51.7 50.3h725c28.1 0 51.7-23.7 51.7-50.3V645.2H97.9z m0 0\" fill=\"#7ECF3B\"></path><path d=\"M421.8 111.2h184.9V910H421.8z\" fill=\"#FDAF42\"></path><path d=\"M606.7 457.4v112.4H413V457.4h193.7m31.1-45.9H381.9c-4.4 0-11.8 4.4-11.8 11.8v179c0 4.4 4.4 11.8 11.8 11.8h255.9c4.4 0 11.8-4.4 11.8-11.8v-179c-2.9-8.8-7.4-11.8-11.8-11.8z m0 0\" fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "file": {
-      "body": "<path\r\n    d=\"M913.29536 941.04064c0.0256 24.82688-16.54784 44.96384-37.0176 44.98432l-708.23936 0.6912c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.83968-859.02848c-0.0256-24.82688 16.54784-44.96384 37.0176-44.98432l521.10848-0.50688 224.39424 210.50368 0.68096 693.25312z\"\r\n    fill=\"#e6e6e6\"></path>\r\n  <path\r\n    d=\"M913.29536 253.26592l-189.11744 0.18432c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.16384-165.77024 226.38592 210.49856z\"\r\n    fill=\"#C4BCB1\"></path>\r\n  <path\r\n    d=\"M720.72192 396.84096a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 565.95456a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 746.33728a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848z\"\r\n    fill=\"#8a8a8a\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "icon-msg": {
-      "body": "<circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#00AA2A\"/><path d=\"M10 5C7.243 5 5 7.02 5 9.501c0 1.381.68 2.652 1.871 3.513-.27.697-.743 1.274-1.343 1.631l-.506.302.575.04a5.975 5.975 0 002.07-.232 5.927 5.927 0 001.685-.79c.215.024.433.038.648.038 2.757 0 5-2.02 5-4.502C15 7.02 12.757 5 10 5z\" fill=\"#fff\"/>",
-      "width": 20,
-      "height": 20
-    },
-    "icon-notice": {
-      "body": "<path d=\"M0 10a10 10 0 1020 0 10 10 0 00-20 0z\" fill=\"#4086FF\"/><path d=\"M13.703 8.349v3.81H6.295v-3.81a3.908 3.908 0 01.255-1.487c.18-.473.451-.904.797-1.268a3.702 3.702 0 011.212-.85 3.615 3.615 0 012.877 0c.456.197.868.486 1.213.85.345.364.616.795.797 1.268.18.473.267.978.255 1.487h.002zm-8.147 5.333v-.763h8.889v.763a.776.776 0 01-.218.538.733.733 0 01-.524.224H6.295a.733.733 0 01-.522-.225.776.776 0 01-.217-.537z\" fill=\"#fff\"/>",
-      "width": 20,
-      "height": 20
-    },
-    "icon-num": {
-      "body": "<circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#0AC8D2\"/><path d=\"M14.77 12.418L12 7.962a1.048 1.048 0 01-.143-.416v-.01a1.148 1.148 0 01-.018-.13V5.15a.863.863 0 00-.86-.863H9.016a.863.863 0 00-.864.865l.005 2.253c0 .197-.055.39-.159.558L5.231 12.42c-.15.186-.231.418-.231.657v.157c0 .581.471 1.053 1.053 1.053h7.894c.582 0 1.053-.472 1.053-1.053v-.157c0-.24-.082-.471-.23-.658z\" fill=\"#fff\"/>",
-      "width": 20,
-      "height": 20
-    },
-    "icon-user": {
-      "body": "<path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#FD846F\"></path><path d=\"M437.563077 588.937846a190.818462 190.818462 0 0 0-0.886154-1.398154 31.113846 31.113846 0 0 0-4.076308-20.40123 192.236308 192.236308 0 0 1-35.190153-69.612308 95.862154 95.862154 0 0 1-33.910154-63.468308c-2.56-39.266462 6.892308-39.266462 6.892307-39.266461-9.452308-28.553846-14.375385-111.084308 16.128-153.777231 39.542154-68.273231 109.883077-72.644923 144.009847-54.902154a108.248615 108.248615 0 0 1 56.477538 19.180308c63.606154 26.190769 68.706462 155.372308 56.989538 190.72 0 0 9.432615 0 6.892308 39.266461a95.862154 95.862154 0 0 1-33.910154 63.488 192.236308 192.236308 0 0 1-35.190154 69.612308 31.113846 31.113846 0 0 0-4.076307 20.401231 190.424615 190.424615 0 0 0-0.256 0.393846c3.800615 8.388923 10.436923 15.478154 19.081846 19.790769 94.838154 19.377231 181.543385 70.616615 181.543385 127.468308v43.342769c0 50.412308-99.072 68.371692-205.469539 73.058462a927.192615 927.192615 0 0 1-64.768 2.638769h0.768c-127.488 0-272.305231-13.508923-272.305231-74.436923V737.673846c0-56.851692 86.685538-108.110769 181.543385-127.488 9.137231-4.548923 16.029538-12.209231 19.692308-21.248z\" fill=\"#FFFFFF\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "icon-wait": {
-      "body": "<circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#4086FF\"/><g clip-path=\"url(#svg_d3d9446802__clip0_896:213998)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10 4.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zm2.475 6.6h-2.47a.707.707 0 01-.688-.688V7.258a.688.688 0 011.375 0v2.465h1.783a.687.687 0 110 1.375v.003z\" fill=\"#fff\"/></g><defs><clipPath id=\"svg_d3d9446802__clip0_896:213998\"><path fill=\"#fff\" transform=\"translate(4.5 4.5)\" d=\"M0 0h11v11H0z\"/></clipPath></defs>",
-      "width": 20,
-      "height": 20
-    },
-    "upload-file": {
-      "body": "<path\r\n    d=\"M1196.987733 212.5824v540.0576c0 39.594667-34.474667 71.3728-76.765866 71.3728H323.242667c-51.780267 0-88.746667-46.762667-73.250134-92.808533l126.737067-375.808H70.417067C31.675733 355.362133 0 326.4512 0 291.089067V98.372267C0 63.044267 31.675733 34.0992 70.417067 34.0992h378.811733c26.7264 0 51.029333 13.9264 63.010133 35.703467l39.048534 71.406933H1120.256c42.257067 0 76.8 32.119467 76.8 71.3728\"\r\n    fill=\"#5398DF\"></path>\r\n  <path\r\n    d=\"M1128.721067 997.853867H68.266667a68.266667 68.266667 0 0 1-68.266667-68.266667V280.3712a68.266667 68.266667 0 0 1 68.266667-68.266667h1060.4544a68.266667 68.266667 0 0 1 68.266666 68.266667V929.5872a68.266667 68.266667 0 0 1-68.266666 68.266667\"\r\n    fill=\"#85BCFF\"></path>",
-      "width": 1228,
-      "height": 1024
-    },
-    "upload-folder": {
-      "body": "<path\r\n    d=\"M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z\"\r\n    fill=\"#FFA000\"></path>\r\n  <path\r\n    d=\"M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z\"\r\n    fill=\"#FFFFFF\"></path>\r\n  <path\r\n    d=\"M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z\"\r\n    fill=\"#FFCA28\"></path>",
-      "width": 1024,
-      "height": 1024
-    },
-    "vue": {
-      "body": "<path fill=\"#42b883\" d=\"M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z\"></path>\r\n  <path fill=\"#35495e\" d=\"M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z\"></path>",
-      "width": 128,
-      "height": 128
-    },
-    "wechat": {
-      "body": "<path\r\n    d=\"M1010.8 628c0-141.2-141.3-256.2-299.9-256.2-168 0-300.3 115.1-300.3 256.2 0 141.4 132.3 256.2 300.3 256.2 35.2 0 70.7-8.9 106-17.7l96.8 53-26.6-88.2c70.9-53.2 123.7-123.7 123.7-203.3zM618 588.8c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40c0 22-17.9 40-40 40z m194.3-0.3c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z\"\r\n    fill=\"#00C800\"></path>\r\n  <path\r\n    d=\"M366.3 106.9c-194.1 0-353.1 132.3-353.1 300.3 0 97 52.9 176.6 141.3 238.4l-35.3 106.2 123.4-61.9c44.2 8.7 79.6 17.7 123.7 17.7 11.1 0 22.1-0.5 33-1.4-6.9-23.6-10.9-48.3-10.9-74 0-154.3 132.5-279.5 300.2-279.5 11.5 0 22.8 0.8 34 2.1C692 212.6 539.9 106.9 366.3 106.9zM247.7 349.2c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z m246.6 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z\"\r\n    fill=\"#00C800\"></path>",
-      "width": 1024,
-      "height": 1024
-    }
-  },
-  "width": 48,
-  "height": 48
-}
diff --git a/frontend-pc/src/icons/icon-data.ts b/frontend-pc/src/icons/icon-data.ts
new file mode 100644
index 0000000..670d559
--- /dev/null
+++ b/frontend-pc/src/icons/icon-data.ts
@@ -0,0 +1,200 @@
+/**
+ * 菜单与通用图标的数据（由 scripts/extract-pc-icons.py 生成，**不要手改**）。
+ *
+ * 来源：@iconify-json/icon-park-outline（?），
+ * 只抽了本项目实际用到的 37 个，避免把 4MB 的整包打进来。
+ */
+
+export interface IconData {
+  body: string
+  width: number
+  height: number
+}
+
+export const ICONS: Record<string, IconData> = {
+  'dashboard': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M24.778 7c-11.046 0-20 8.954-20 20c0 5.23 1.713 10.436 5 14h30c3.286-3.564 5-8.77 5-14c0-11.046-8.954-20-20-20"/><circle cx="24.778" cy="30" r="4"/><path d="M24.778 20v6m0-14v2m-15 14h2m2-10l1.414 1.414M37.778 28h2m-5-8.586L36.192 18"/></g>',
+    width: 49,
+    height: 48
+  },
+  'collect': {
+    body: '<g fill="none" stroke="currentColor" stroke-width="4"><circle cx="34.5" cy="13.5" r="6.5"/><circle cx="34.5" cy="34.5" r="6.5"/><circle cx="13.5" cy="13.5" r="6.5"/><circle cx="13.5" cy="34.5" r="6.5"/></g>',
+    width: 48,
+    height: 48
+  },
+  'setting': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M18.284 43.171a20 20 0 0 1-8.696-5.304a6 6 0 0 0-5.182-9.838A20 20 0 0 1 4 24c0-2.09.32-4.106.916-6H5a6 6 0 0 0 5.385-8.65a20 20 0 0 1 8.267-4.627A6 6 0 0 0 24 8a6 6 0 0 0 5.348-3.277a20 20 0 0 1 8.267 4.627A6 6 0 0 0 43.084 18A20 20 0 0 1 44 24c0 1.38-.14 2.728-.406 4.03a6 6 0 0 0-5.182 9.838a20 20 0 0 1-8.696 5.303a6.003 6.003 0 0 0-11.432 0Z"/><path d="M24 31a7 7 0 1 0 0-14a7 7 0 0 0 0 14Z"/></g>',
+    width: 48,
+    height: 48
+  },
+  'org-group': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><circle cx="14" cy="29" r="5"/><circle cx="34" cy="29" r="5"/><circle cx="24" cy="9" r="5"/><path d="M24 44c0-5.523-4.477-10-10-10S4 38.477 4 44m40 0c0-5.523-4.477-10-10-10s-10 4.477-10 10m10-20c0-5.523-4.477-10-10-10s-10 4.477-10 10"/></g>',
+    width: 48,
+    height: 48
+  },
+  'platform': {
+    body: '<g fill="none"><path stroke="currentColor" stroke-linejoin="round" stroke-width="4" d="M44 4H4v16h40zm0 24H4v16h40z"/><path fill="currentColor" d="M13 10h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1m0 24h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1m8-24h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1m0 24h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/></g>',
+    width: 48,
+    height: 48
+  },
+  'task': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M9 42a4 4 0 1 0 0-8a4 4 0 0 0 0 8Zm0-28a4 4 0 1 0 0-8a4 4 0 0 0 0 8Zm0 14a4 4 0 1 0 0-8a4 4 0 0 0 0 8Z"/><path stroke-linecap="round" d="M21 24h22M21 38h22M21 10h22"/></g>',
+    width: 48,
+    height: 48
+  },
+  'audit': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M24 44a19.94 19.94 0 0 0 14.142-5.858A19.94 19.94 0 0 0 44 24a19.94 19.94 0 0 0-5.858-14.142A19.94 19.94 0 0 0 24 4A19.94 19.94 0 0 0 9.858 9.858A19.94 19.94 0 0 0 4 24a19.94 19.94 0 0 0 5.858 14.142A19.94 19.94 0 0 0 24 44Z"/><path stroke-linecap="round" d="m16 24l6 6l12-12"/></g>',
+    width: 48,
+    height: 48
+  },
+  'export': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40.518 34.316A9.21 9.21 0 0 0 44 24c-1.213-3.83-4.93-5.929-8.947-5.925h-2.321a14.737 14.737 0 1 0-25.31 13.429M24.008 41L24 23m6.364 11.636L24 41l-6.364-6.364"/>',
+    width: 48,
+    height: 48
+  },
+  'notify': {
+    body: '<g fill="none"><path d="M24 4c-7.732 0-14 6.268-14 14v20h28V18c0-7.732-6.268-14-14-14"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M10 38V18c0-7.732 6.268-14 14-14s14 6.268 14 14v20M4 38h40m-20 6a5 5 0 0 0 5-5v-1H19v1a5 5 0 0 0 5 5"/></g>',
+    width: 48,
+    height: 48
+  },
+  'dict': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M9 42a4 4 0 1 0 0-8a4 4 0 0 0 0 8Zm0-28a4 4 0 1 0 0-8a4 4 0 0 0 0 8Zm0 14a4 4 0 1 0 0-8a4 4 0 0 0 0 8Z"/><path stroke-linecap="round" d="M21 24h22M21 38h22M21 10h22"/></g>',
+    width: 48,
+    height: 48
+  },
+  'org': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M38 20H18v8h20zM32 6H18v8h14zm12 28H18v8h26z"/><path stroke-linecap="round" d="M17 10H5m12 14H5m12 14H5m0 6V4"/></g>',
+    width: 48,
+    height: 48
+  },
+  'user': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 20a7 7 0 1 0 0-14a7 7 0 0 0 0 14M32.608 7A7 7 0 0 1 36 13a7 7 0 0 1-3.392 6M4 40.8V42h30v-1.2c0-4.48 0-6.72-.872-8.432a8 8 0 0 0-3.496-3.496C27.92 28 25.68 28 21.2 28h-4.4c-4.48 0-6.72 0-8.432.872a8 8 0 0 0-3.496 3.496C4 34.08 4 36.32 4 40.8M44 42v-1.2c0-4.48 0-6.72-.872-8.432a8 8 0 0 0-3.496-3.496"/>',
+    width: 48,
+    height: 48
+  },
+  'role': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"><path stroke-linejoin="round" d="M20 10H6a2 2 0 0 0-2 2v26a2 2 0 0 0 2 2h36a2 2 0 0 0 2-2v-2.5"/><path d="M10 23h8m-8 8h24"/><circle cx="34" cy="16" r="6" stroke-linejoin="round"/><path stroke-linejoin="round" d="M44 28.419C42.047 24.602 38 22 34 22s-5.993 1.133-8.05 3"/></g>',
+    width: 48,
+    height: 48
+  },
+  'tenant': {
+    body: '<g fill="none" stroke="currentColor" stroke-width="4"><path stroke-linejoin="round" d="M4 33a2 2 0 0 1 2-2h6v-7l12-8l12 8v7h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4z"/><path stroke-linecap="round" d="M24 6v10"/><path stroke-linecap="round" stroke-linejoin="round" d="M36 12V6s-1.5 3-6 0s-6 0-6 0v6s1.5-3 6 0s6 0 6 0m-8 32V31h-8v13m-2 0h12"/></g>',
+    width: 48,
+    height: 48
+  },
+  'log': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M13 10h28v34H13z"/><path stroke-linecap="round" d="M35 10V4H8a1 1 0 0 0-1 1v33h6m8-16h12m-12 8h12"/></g>',
+    width: 48,
+    height: 48
+  },
+  'fold': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path stroke-linecap="round" d="M8 10.5h32m-16 9h16m-16 9h16m-32 9h32"/><path d="m8 19l8 5l-8 5z"/></g>',
+    width: 48,
+    height: 48
+  },
+  'unfold': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path stroke-linecap="round" d="M8 10.5h32m-16 9h16m-16 9h16m-32 9h32"/><path d="m16 19l-8 5l8 5z"/></g>',
+    width: 48,
+    height: 48
+  },
+  'account': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><circle cx="24" cy="12" r="8"/><path d="M42 44c0-9.941-8.059-18-18-18S6 34.059 6 44"/></g>',
+    width: 48,
+    height: 48
+  },
+  'logout': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M23.992 6H6v36h18m9-9l9-9l-9-9m-17 8.992h26"/>',
+    width: 48,
+    height: 48
+  },
+  'refresh': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M42 8v16M6 24v16m36-16c0-9.941-8.059-18-18-18a17.95 17.95 0 0 0-12.952 5.5M6 24c0 9.941 8.059 18 18 18a17.94 17.94 0 0 0 12.5-5.048"/>',
+    width: 48,
+    height: 48
+  },
+  'plus': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m24.06 10l-.036 28M10 24h28"/>',
+    width: 48,
+    height: 48
+  },
+  'search': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M21 38c9.389 0 17-7.611 17-17S30.389 4 21 4S4 11.611 4 21s7.611 17 17 17Z"/><path stroke-linecap="round" d="M26.657 14.343A7.98 7.98 0 0 0 21 12a7.98 7.98 0 0 0-5.657 2.343m17.879 18.879l8.485 8.485"/></g>',
+    width: 48,
+    height: 48
+  },
+  'close': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m8 8l32 32M8 40L40 8"/>',
+    width: 48,
+    height: 48
+  },
+  'check': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M43 11L16.875 37L5 25.182"/>',
+    width: 48,
+    height: 48
+  },
+  'warning': {
+    body: '<g fill="none" stroke="currentColor" stroke-width="4"><path stroke-linejoin="round" d="M24 5L2 43h44z" clip-rule="evenodd"/><path stroke-linecap="round" d="M24 35v1m0-17l.008 10"/></g>',
+    width: 48,
+    height: 48
+  },
+  'info': {
+    body: '<g fill="none"><path stroke="currentColor" stroke-linejoin="round" stroke-width="4" d="M24 44a19.94 19.94 0 0 0 14.142-5.858A19.94 19.94 0 0 0 44 24a19.94 19.94 0 0 0-5.858-14.142A19.94 19.94 0 0 0 24 4A19.94 19.94 0 0 0 9.858 9.858A19.94 19.94 0 0 0 4 24a19.94 19.94 0 0 0 5.858 14.142A19.94 19.94 0 0 0 24 44Z"/><path fill="currentColor" fill-rule="evenodd" d="M24 11a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5" clip-rule="evenodd"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24.5 34V20h-2M21 34h7"/></g>',
+    width: 48,
+    height: 48
+  },
+  'download': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M6 24.008V42h36V24"/><path d="m33 23l-9 9l-9-9m8.992-17v26"/></g>',
+    width: 48,
+    height: 48
+  },
+  'upload': {
+    body: '<mask id="SVGmUZuRdkM" width="48" height="48" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentColor" d="M48 0H0v48h48z"/></mask><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" mask="url(#SVGmUZuRdkM)"><path d="M6 24.008V42h36V24m-9-9l-9-9l-9 9m8.992 17V6"/></g>',
+    width: 48,
+    height: 48
+  },
+  'edit': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path stroke-linecap="round" d="M7 42h36"/><path d="M11 26.72V34h7.317L39 13.308L31.695 6z"/></g>',
+    width: 48,
+    height: 48
+  },
+  'delete': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M9 10v34h30V10z"/><path stroke-linecap="round" d="M20 20v13m8-13v13M4 10h40"/><path d="m16 10l3.289-6h9.488L32 10z"/></g>',
+    width: 48,
+    height: 48
+  },
+  'more': {
+    body: '<circle cx="12" cy="24" r="3" fill="currentColor"/><circle cx="24" cy="24" r="3" fill="currentColor"/><circle cx="36" cy="24" r="3" fill="currentColor"/>',
+    width: 48,
+    height: 48
+  },
+  'arrow-down': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M36 18L24 30L12 18"/>',
+    width: 48,
+    height: 48
+  },
+  'file': {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M10 44h28a2 2 0 0 0 2-2V14H30V4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2M30 4l10 10m-16 8v14m-6-14h12"/>',
+    width: 48,
+    height: 48
+  },
+  'photo': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M39 6H9a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3"/><path d="M18 23a5 5 0 1 0 0-10a5 5 0 0 0 0 10m24 13L31 26l-10 9l-7-6l-8 6"/></g>',
+    width: 48,
+    height: 48
+  },
+  'idcard': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M42 8H6a2 2 0 0 0-2 2v28a2 2 0 0 0 2 2h36a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"/><path d="M36 16h-8v8h8z"/><path stroke-linecap="round" d="M12 32h24M12 16h6m-6 8h6"/></g>',
+    width: 48,
+    height: 48
+  },
+  'school-roll': {
+    body: '<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M7 37V11a6 6 0 0 1 6-6h22v26H13c-3.3 0-6 2.684-6 6Z"/><path stroke-linecap="round" d="M35 31H13a6 6 0 0 0 0 12h28V7M14 37h20"/></g>',
+    width: 48,
+    height: 48
+  },
+  'work-proof': {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M39 4H11a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M17 30h14m-14 6h7"/><path d="M17 12h14v10H17z"/></g>',
+    width: 48,
+    height: 48
+  }
+}
diff --git a/frontend-pc/src/icons/index.ts b/frontend-pc/src/icons/index.ts
deleted file mode 100644
index 94b04a9..0000000
--- a/frontend-pc/src/icons/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import IconParkOutlineIcons from '@iconify-json/icon-park-outline/icons.json'
-import { addCollection } from '@iconify/vue'
-import CustomIcons from '@/icons/custom-icons.json'
-
-addCollection(IconParkOutlineIcons)
-addCollection(CustomIcons)
diff --git a/frontend-pc/src/layout/AppHeader.vue b/frontend-pc/src/layout/AppHeader.vue
new file mode 100644
index 0000000..dba4f9d
--- /dev/null
+++ b/frontend-pc/src/layout/AppHeader.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { DropdownOption } from 'naive-ui'
+import { NButton, NDropdown, NSelect, NSpace, NTag, useDialog } from 'naive-ui'
+import { computed, h, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getTenantList } from '@/apis/xt/tenant'
+import { menuByPath, roleLabel } from '@/config/xt-routes'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useActingTenantStore } from '@/stores/acting-tenant'
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+
+const route = useRoute()
+const router = useRouter()
+const dialog = useDialog()
+const user = useUserStore()
+const app = useAppStore()
+const acting = useActingTenantStore()
+
+const title = computed(() => menuByPath(route.path)?.title ?? (route.meta.title as string) ?? '')
+
+/**
+ * 平台运营的「选择学校」。
+ *
+ * ⚠️ 放在**顶栏**而不是各页面里：服务端对平台的租户过滤是关掉的，
+ * 不指明学校就会把各校数据混在一起返回 —— 而那种错看起来很正常
+ * （列表有数据、分页也对）。放在顶栏即"全局唯一上下文"，
+ * 页面不需要各自实现一遍（也更不可能出现两个页面各看一所学校）。
+ */
+const tenants = ref<Array<{ label: string, value: number }>>([])
+const actingValue = computed({
+  get: () => acting.tenantId,
+  set: (v: number | null) => {
+    const hit = tenants.value.find((t) => t.value === v)
+    acting.set(v, hit?.label ?? '')
+  }
+})
+
+async function loadTenants(): Promise<void> {
+  if (!user.isPlatform) {
+    return
+  }
+  try {
+    const page = await getTenantList({ pageNum: 1, pageSize: 200 })
+    tenants.value = (page.list ?? []).map((t) => ({ label: t.tenantName, value: t.id }))
+  } catch {
+    // 拉不到租户列表不该让整个顶栏崩掉：提示已由 http 层弹过
+    tenants.value = []
+  }
+}
+
+onMounted(loadTenants)
+
+const userOptions: DropdownOption[] = [
+  { key: 'refresh', label: '刷新我的权限', icon: () => h(AppIcon, { name: 'refresh', size: 15 }) },
+  { key: 'logout', label: '退出登录', icon: () => h(AppIcon, { name: 'logout', size: 15 }) }
+]
+
+async function onUserSelect(key: string): Promise<void> {
+  if (key === 'refresh') {
+    await user.fetchMe()
+    return
+  }
+  if (key === 'logout') {
+    dialog.warning({
+      title: '退出登录',
+      content: '确认退出当前账号？',
+      positiveText: '退出',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        await user.logout()
+        await router.replace('/login')
+      }
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="bar">
+    <div class="bar__left">
+      <NButton quaternary size="small" class="bar__fold" @click="app.toggleCollapse()">
+        <AppIcon :name="app.collapsed ? 'unfold' : 'fold'" :size="18" />
+      </NButton>
+      <span class="bar__title">{{ title }}</span>
+    </div>
+
+    <div class="bar__right">
+      <NSelect
+        v-if="user.isPlatform"
+        v-model:value="actingValue"
+        class="bar__tenant"
+        size="small"
+        clearable
+        placeholder="选择学校（平台运营）"
+        :options="tenants"
+      />
+
+      <NTag v-if="user.tenantName" size="small" :bordered="false" type="info">
+        {{ user.tenantName }}
+      </NTag>
+
+      <NSpace align="center" :size="6">
+        <span class="bar__role">{{ roleLabel(user.roles) }}</span>
+        <NDropdown :options="userOptions" trigger="click" @select="onUserSelect">
+          <NButton quaternary size="small">
+            <template #icon>
+              <AppIcon name="account" :size="17" />
+            </template>
+            {{ user.name || '未登录' }}
+          </NButton>
+        </NDropdown>
+      </NSpace>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 14px;
+}
+
+.bar__left,
+.bar__right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bar__title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.bar__tenant {
+  width: 220px;
+}
+
+.bar__role {
+  color: #8a8a8a;
+  font-size: 12px;
+}
+</style>
diff --git a/frontend-pc/src/layout/AppSider.vue b/frontend-pc/src/layout/AppSider.vue
new file mode 100644
index 0000000..2fe6972
--- /dev/null
+++ b/frontend-pc/src/layout/AppSider.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { MenuOption } from 'naive-ui'
+import { NMenu } from 'naive-ui'
+import { computed, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { DASHBOARD, visibleGroups } from '@/config/xt-routes'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+
+const route = useRoute()
+const router = useRouter()
+const user = useUserStore()
+const app = useAppStore()
+
+/**
+ * 左侧菜单。
+ *
+ * ⚠️ 菜单项**完全来自后端下发的 menuKeys**（`/auth/me` 的 `menus`），
+ * 前端只负责排版与图标。自己在前端"顺手加一个入口"会导致
+ * 那个页面点进去必然 40301 —— 这是本仓库专门写进 check-wiring 的一条。
+ */
+const options = computed<MenuOption[]>(() => {
+  const items: MenuOption[] = []
+
+  if (user.menus.includes(DASHBOARD.key)) {
+    items.push({
+      key: DASHBOARD.path,
+      label: DASHBOARD.title,
+      icon: () => h(AppIcon, { name: DASHBOARD.icon, size: 17 })
+    })
+  }
+
+  for (const group of visibleGroups(user.menus)) {
+    items.push({
+      key: `group-${group.id}`,
+      label: group.title,
+      icon: () => h(AppIcon, { name: group.icon, size: 17 }),
+      children: group.items.map((m) => ({
+        key: m.path,
+        label: m.title,
+        icon: () => h(AppIcon, { name: m.icon, size: 16 })
+      }))
+    })
+  }
+
+  return items
+})
+
+/** 折叠时用弹出菜单，展开时用内嵌菜单 */
+const collapsed = computed(() => app.collapsed)
+
+const activeKey = computed(() => route.path)
+
+function onSelect(key: string): void {
+  if (key.startsWith('group-')) {
+    return
+  }
+  if (key !== route.path) {
+    void router.push(key)
+  }
+}
+</script>
+
+<template>
+  <div class="sider">
+    <div class="sider__brand" :class="{ 'sider__brand--mini': collapsed }">
+      <img src="@/assets/images/logo.svg" alt="logo" class="sider__logo">
+      <span v-if="!collapsed" class="sider__title">深学在线</span>
+    </div>
+
+    <NMenu
+      :value="activeKey"
+      :options="options"
+      :collapsed="collapsed"
+      :collapsed-width="64"
+      :collapsed-icon-size="20"
+      :indent="18"
+      :root-indent="16"
+      @update:value="onSelect"
+    />
+  </div>
+</template>
+
+<style scoped>
+.sider {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.sider__brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 56px;
+  padding: 0 18px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.sider__brand--mini {
+  justify-content: center;
+  padding: 0;
+}
+
+.sider__logo {
+  width: 24px;
+  height: 24px;
+}
+
+.sider__title {
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: 0.5px;
+}
+</style>
diff --git a/frontend-pc/src/layout/LayoutColumns.vue b/frontend-pc/src/layout/LayoutColumns.vue
deleted file mode 100644
index fbec7c7..0000000
--- a/frontend-pc/src/layout/LayoutColumns.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="layout-columns">
-    <div v-show="isDesktop" class="layout-columns__left">
-      <!-- 左侧一级菜单区域 -->
-      <OneLevelMenu :data="oneLevelMenus" :active-path="oneActivePath"
-        @menu-click="handleOneMenuItemClick($event.path)"></OneLevelMenu>
-
-      <!-- 左侧二级菜单区域 -->
-      <a-menu v-if="twoLevelMenus.length > 1 || oneActiveRoute?.meta?.alwaysShow === true" :key="twoLevelMenuKey"
-        class="layout-columns__menu" :theme="menuTheme" :selected-keys="[twoActivePath]"
-        :accordion="appStore.isMenuAccordion" auto-open-selected :collapsed="appStore.isMenuCollapsed"
-        :style="{ width: '180px' }" @menu-item-click="handleTwoMenuItemClick">
-        <MenuItem v-for="(item, index) in twoLevelMenus" :key="item.path + index" :item="item" />
-      </a-menu>
-    </div>
-
-    <!-- 右侧内容区域 -->
-    <section class="layout-columns__content">
-      <Header />
-      <Tabs v-if="appStore.isTabVisible" />
-      <Main />
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDevice } from '@/hooks'
-import { useLevelMenu } from '@/layout/hooks/useLevelMenu'
-import { useAppStore } from '@/stores'
-import Header from './components/Header/index.vue'
-import Main from './components/Main.vue'
-import MenuItem from './components/Menu/MenuItem.vue'
-import OneLevelMenu from './components/OneLevelMenu/index.vue'
-import Tabs from './components/Tabs/index.vue'
-
-defineOptions({ name: 'LayoutColumns' })
-
-const appStore = useAppStore()
-const { isDesktop } = useDevice()
-
-const twoLevelMenuKey = ref(false)
-const { menuTheme, oneLevelMenus, twoLevelMenus, oneActiveRoute, oneActivePath, twoActivePath, getOneLevelMenus, handleOneMenuItemClick, handleTwoMenuItemClick } = useLevelMenu({
-  oneActivePathChange: () => {
-    setTimeout(() => {
-      twoLevelMenuKey.value = !twoLevelMenuKey.value
-    }, 300)
-  }
-})
-getOneLevelMenus()
-</script>
-
-<style lang="scss" scoped>
-.layout-columns {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  &__left {
-    display: flex;
-    height: 100%;
-    overflow: hidden;
-    background-color: var(--color-bg-1);
-  }
-
-  &__menu {
-    border-right: 1px solid var(--color-border-2);
-  }
-
-  &__content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/LayoutDefault.vue b/frontend-pc/src/layout/LayoutDefault.vue
deleted file mode 100644
index dc1c439..0000000
--- a/frontend-pc/src/layout/LayoutDefault.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <a-layout class="layout-default">
-    <Asider></Asider>
-    <a-layout class="layout-default__right">
-      <Header></Header>
-      <Tabs v-if="appStore.isTabVisible"></Tabs>
-      <Main></Main>
-    </a-layout>
-  </a-layout>
-</template>
-
-<script setup lang="ts">
-import { useAppStore } from '@/stores'
-import Asider from './components/Asider/index.vue'
-import Header from './components/Header/index.vue'
-import Main from './components/Main.vue'
-import Tabs from './components/Tabs/index.vue'
-
-defineOptions({ name: 'LayoutDefault' })
-
-const appStore = useAppStore()
-</script>
-
-<style lang="scss" scoped>
-.layout-default {
-  flex-direction: row;
-  height: 100%;
-
-  &__right {
-    overflow: hidden;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/LayoutMix.vue b/frontend-pc/src/layout/LayoutMix.vue
deleted file mode 100644
index 725bccd..0000000
--- a/frontend-pc/src/layout/LayoutMix.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<!--
-  @file LayoutMix 组件
-  @description 混合布局组件，支持顶部导航和左侧菜单组合的布局方式
--->
-<template>
-  <div class="layout-mix">
-    <!-- 左侧菜单区域 -->
-    <section v-if="isDesktop" class="layout-mix-left asider" :class="{ 'app-menu-dark': appStore.isMenuDark }"
-      :style="getMenuStyle">
-      <a-layout-sider class="asider__menu" collapsible breakpoint="xl" hide-trigger :width="200"
-        :collapsed="appStore.isMenuCollapsed">
-        <Logo :collapsed="appStore.isMenuCollapsed" />
-        <a-scrollbar outer-class="asider__menu-scroll-view" style="height: 100%; overflow: auto">
-          <a-menu :theme="menuTheme" mode="vertical" auto-open-selected :collapsed="shouldCollapse"
-            :selected-keys="[twoActivePath]" breakpoint="xl" :accordion="appStore.isMenuAccordion"
-            @menu-item-click="handleTwoMenuItemClick">
-            <MenuItem v-for="(item, index) in twoLevelMenus" :key="item.path + index" :item="item" />
-          </a-menu>
-        </a-scrollbar>
-      </a-layout-sider>
-    </section>
-
-    <!-- 右侧内容区域 -->
-    <section class="layout-mix-right">
-      <header class="header" :class="{ 'app-menu-dark': appStore.isMenuDark }" :style="getMenuStyle">
-        <MenuFoldBtn />
-        <a-menu mode="horizontal" :theme="menuTheme" :selected-keys="[oneActivePath]"
-          @menu-item-click="handleOneMenuItemClick">
-          <MenuItem v-for="(item, index) in topMenus" :key="item.path + index" :item="item" />
-        </a-menu>
-        <HeaderRightBar />
-      </header>
-      <Tabs v-if="appStore.isTabVisible" />
-      <Main />
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDevice } from '@/hooks'
-import { useLevelMenu } from '@/layout/hooks/useLevelMenu'
-import { useAppStore } from '@/stores'
-import HeaderRightBar from './components/HeaderRightBar/index.vue'
-import Logo from './components/Logo.vue'
-import Main from './components/Main.vue'
-import MenuItem from './components/Menu/MenuItem.vue'
-import MenuFoldBtn from './components/MenuFoldBtn.vue'
-import Tabs from './components/Tabs/index.vue'
-
-/** 组件名称 */
-defineOptions({ name: 'LayoutMix' })
-
-const appStore = useAppStore()
-const { isDesktop } = useDevice()
-
-const { menuTheme, getMenuStyle, oneLevelMenus, twoLevelMenus, oneActivePath, twoActivePath, getOneLevelMenus, handleOneMenuItemClick, handleTwoMenuItemClick } = useLevelMenu()
-getOneLevelMenus()
-
-const topMenus = computed(() => {
-  const arr = JSON.parse(JSON.stringify(oneLevelMenus.value))
-  arr.forEach((i) => {
-    delete i.children
-  })
-  return arr
-})
-
-// 是否折叠菜单
-const shouldCollapse = computed(() =>
-  !isDesktop.value ? false : appStore.isMenuCollapsed
-)
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-menu-pop) {
-  white-space: nowrap;
-}
-
-:deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {
-
-  // Menu菜单组件修改
-  .arco-menu-icon {
-    padding: 10px 0;
-    margin-right: 0;
-  }
-
-  .arco-menu-has-icon {
-    justify-content: center;
-    padding: 0;
-  }
-
-  .arco-menu-title {
-    display: none;
-  }
-}
-
-:deep(.arco-menu-horizontal) {
-  flex: 1;
-  overflow: hidden;
-
-  .arco-menu-inner {
-    padding-left: 0;
-
-    .arco-menu-overflow-wrap {
-      white-space: nowrap;
-    }
-  }
-}
-
-.layout-mix {
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-  overflow: hidden;
-
-  &-left {
-    overflow: hidden;
-  }
-
-  &-right {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 56px;
-  padding: 0 var(--padding);
-  overflow: hidden;
-  color: var(--color-text-1);
-  background-color: var(--color-bg-1);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.asider {
-  z-index: 1000;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  color: var(--color-text-1);
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-border-2);
-
-  :deep(.arco-layout-sider-children) {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  &__menu {
-    flex: 1;
-    overflow: hidden;
-    background-color: inherit;
-  }
-
-  &__menu-scroll-view {
-    flex: 1;
-    overflow: hidden;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/LayoutTop.vue b/frontend-pc/src/layout/LayoutTop.vue
deleted file mode 100644
index 9fcd390..0000000
--- a/frontend-pc/src/layout/LayoutTop.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="layout-top">
-    <a-row align="center" class="layout-top__header" :class="{ 'app-menu-dark': appStore.isMenuDark }"
-      :style="getMenuStyle">
-      <Logo></Logo>
-      <a-menu class="layout-top__menu" mode="horizontal" :theme="menuTheme" :menu-trigger-props="menuTriggerProps"
-        :selected-keys="selectedKeys" @menu-item-click="handleMenuItemClick">
-        <MenuItem v-for="(item, index) in menuList" :key="item.path + index" :item="item" />
-      </a-menu>
-      <HeaderRightBar></HeaderRightBar>
-    </a-row>
-    <Tabs v-if="appStore.isTabVisible"></Tabs>
-    <Main></Main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMenu } from '@/layout/hooks/useMenu'
-import { useAppStore } from '@/stores'
-import HeaderRightBar from './components/HeaderRightBar/index.vue'
-import Logo from './components/Logo.vue'
-import Main from './components/Main.vue'
-import MenuItem from './components/Menu/MenuItem.vue'
-import Tabs from './components/Tabs/index.vue'
-
-defineOptions({ name: 'LayoutTop' })
-
-const appStore = useAppStore()
-const { menuTheme, menuList, menuTriggerProps, handleMenuItemClick, selectedKeys, getMenuStyle } = useMenu()
-</script>
-
-<style lang="scss" scoped>
-.layout-top {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-
-  &__header {
-    box-sizing: border-box;
-    width: 100%;
-    padding-right: 16px;
-    overflow: hidden;
-    background-color: var(--color-bg-1);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  &__menu {
-    flex: 1;
-    overflow: hidden;
-
-    :deep(.arco-menu-inner) {
-      padding-left: 0;
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Asider/index.vue b/frontend-pc/src/layout/components/Asider/index.vue
deleted file mode 100644
index eaa748e..0000000
--- a/frontend-pc/src/layout/components/Asider/index.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div v-if="isDesktop" class="asider" :class="{ 'app-menu-dark': appStore.isMenuDark }" :style="getMenuStyle">
-    <a-layout-sider class="asider__menu" collapsible breakpoint="xl" hide-trigger :width="220"
-      :collapsed="appStore.isMenuCollapsed" @collapse="handleCollapse">
-      <Logo :collapsed="appStore.isMenuCollapsed"></Logo>
-      <a-scrollbar outer-class="asider__menu-scroll-view" style="height: 100%; overflow: auto">
-        <a-menu :theme="menuTheme" auto-open-selected :menu-trigger-props="menuTriggerProps"
-          :selected-keys="selectedKeys" :collapsed="collapsed" :accordion="appStore.isMenuAccordion"
-          @menu-item-click="handleMenuItemClick">
-          <MenuItem v-for="(item, index) in menuList" :key="item.path + index" :item="item" />
-        </a-menu>
-      </a-scrollbar>
-    </a-layout-sider>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDevice } from '@/hooks'
-import { useMenu } from '@/layout/hooks/useMenu'
-import { useAppStore } from '@/stores'
-import Logo from '../Logo.vue'
-import MenuItem from '../Menu/MenuItem.vue'
-
-defineOptions({ name: 'AppAsider' })
-const appStore = useAppStore()
-const { isDesktop } = useDevice()
-const { menuTheme, menuList, menuTriggerProps, selectedKeys, collapsed, handleMenuItemClick, getMenuStyle } = useMenu()
-
-const handleCollapse = (isCollapsed: boolean) => {
-  appStore.isMenuCollapsed = isCollapsed
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {
-
-  // Menu菜单组件修改
-  .arco-menu-icon {
-    padding: 10px 0;
-    margin-right: 0;
-  }
-
-  .arco-menu-has-icon {
-    justify-content: center;
-    padding: 0;
-  }
-
-  .arco-menu-title {
-    display: none;
-  }
-}
-
-:deep(.arco-layout-sider-children) {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.asider {
-  z-index: 1000;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  color: var(--color-text-1);
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-border-2);
-
-  &__menu-scroll-view {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  &__menu {
-    flex: 1;
-    overflow: hidden;
-    background-color: inherit;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Breadcrumb/index.vue b/frontend-pc/src/layout/components/Breadcrumb/index.vue
deleted file mode 100644
index 9b203b7..0000000
--- a/frontend-pc/src/layout/components/Breadcrumb/index.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<!--
-  @file Breadcrumb 组件
-  @description 面包屑导航组件，支持路由导航、动画效果和自定义样式
--->
-<template>
-  <a-breadcrumb>
-    <transition-group name="breadcrumb">
-      <div v-for="(item, index) in breadcrumbList" :key="item.path + index">
-        <a-breadcrumb-item v-bind="attrs">
-          <template v-if="isLastItem(index) && !hasRedirect(item)">
-            <span class="g-line-1">{{ lastTitle || item.meta.title }}</span>
-          </template>
-          <template v-else>
-            <span class="g-line-1 breadcrumb__item-title" @click="handleLink(item)">
-              {{ item.meta.title }}
-            </span>
-          </template>
-          <icon-right v-if="!isLastItem(index)" />
-        </a-breadcrumb-item>
-      </div>
-    </transition-group>
-  </a-breadcrumb>
-</template>
-
-<script setup lang="ts">
-import type { RouteLocationMatched, RouteLocationNormalized } from 'vue-router'
-import { useRouteListener } from '@/hooks'
-import { useTabsStore } from '@/stores'
-
-/** 组件名称 */
-defineOptions({ name: 'Breadcrumb' })
-
-/** 路由相关 */
-const route = useRoute()
-const router = useRouter()
-const attrs = useAttrs()
-
-const { listenerRouteChange } = useRouteListener()
-const tabsStore = useTabsStore()
-
-/** 首页路由缓存 */
-let homeRoute: RouteLocationMatched | null = null
-
-/** 获取首页路由信息 */
-const getHomeRoute = () => {
-  if (homeRoute) return
-  const allRoutes = router.getRoutes()
-  const obj = allRoutes.find((i) => i.path === '/home')
-  if (obj) {
-    homeRoute = obj
-  }
-}
-
-/** 面包屑列表 */
-const breadcrumbList = ref<RouteLocationMatched[]>([])
-
-/** 获取面包屑列表 */
-const getBreadcrumbList = (to: RouteLocationNormalized) => {
-  getHomeRoute()
-  const arr = to.matched.filter((i) => i.meta.title && i.meta.breadcrumb !== false)
-  if (homeRoute) {
-    breadcrumbList.value = [homeRoute, ...arr]
-  }
-}
-
-/** 判断是否为最后一项 */
-const isLastItem = (index: number) => index === breadcrumbList.value.length - 1
-
-/** 判断是否有重定向 */
-const hasRedirect = (item: RouteLocationMatched) =>
-  item.redirect && item.redirect !== 'noRedirect' && item.redirect !== ''
-
-/** 处理路由跳转 */
-const handleLink = (item: RouteLocationMatched) => {
-  const { redirect, path, children } = item
-  if (redirect === 'noRedirect' && children.length) {
-    const obj = children?.[0]
-    router.push(obj?.meta?.activeMenu || obj.path)
-    return
-  }
-  if (redirect) {
-    router.push(redirect as string)
-    return
-  }
-  router.push(path)
-}
-
-/** 监听路由变化 */
-listenerRouteChange(({ to }) => {
-  if (to.path.startsWith('/redirect/')) return
-  getBreadcrumbList(to)
-}, true)
-
-const lastTitle = computed(() => {
-  return tabsStore.tabList.find((i) => i.path === route.path)?.meta?.title || ''
-})
-</script>
-
-<style lang="scss" scoped>
-/** breadcrumb-transform 面包屑动画 */
-.breadcrumb-enter-active {
-  transition: all 0.2s;
-}
-
-.breadcrumb-enter-from,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(10px);
-}
-
-:deep(.arco-breadcrumb-item) {
-  display: flex;
-  align-items: center;
-  padding: 0;
-
-  .arco-icon-right {
-    margin: 0 4px;
-  }
-}
-
-.breadcrumb__item-title {
-  cursor: pointer;
-  transition: all 0.3s;
-
-  &:hover {
-    font-weight: 600;
-    color: rgb(var(--primary-6));
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Header/index.vue b/frontend-pc/src/layout/components/Header/index.vue
deleted file mode 100644
index b7d31d7..0000000
--- a/frontend-pc/src/layout/components/Header/index.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <a-layout-header class="header">
-    <section class="header__left">
-      <MenuFoldBtn></MenuFoldBtn>
-    </section>
-    <a-row align="center" class="h-full header__right">
-      <a-col :xs="0" :md="10" :lg="10" :xl="12" :xxl="12">
-        <Breadcrumb></Breadcrumb>
-      </a-col>
-      <a-col :xs="24" :md="14" :lg="14" :xl="12" :xxl="12">
-        <a-row justify="end" align="center">
-          <HeaderRightBar></HeaderRightBar>
-        </a-row>
-      </a-col>
-    </a-row>
-  </a-layout-header>
-</template>
-
-<script setup lang="ts">
-import Breadcrumb from '../Breadcrumb/index.vue'
-import HeaderRightBar from '../HeaderRightBar/index.vue'
-import MenuFoldBtn from '../MenuFoldBtn.vue'
-
-defineOptions({ name: 'AppHeader' })
-</script>
-
-<style lang="scss" scoped>
-.arco-dropdown-open .arco-icon-down {
-  transform: rotate(180deg);
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  height: 56px;
-  padding: 0 var(--padding);
-  background: var(--color-bg-1);
-  border-bottom: 1px solid var(--color-neutral-3);
-
-  &__right {
-    flex: 1;
-    margin-left: var(--padding);
-    overflow: hidden;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/HeaderRightBar/ChangePasswordModal.vue b/frontend-pc/src/layout/components/HeaderRightBar/ChangePasswordModal.vue
deleted file mode 100644
index 2ed1a9d..0000000
--- a/frontend-pc/src/layout/components/HeaderRightBar/ChangePasswordModal.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <a-modal v-model:visible="visible" title="修改密码" :width="440" :mask-closable="false"
-    @ok="confirm" @cancel="close">
-    <a-alert type="info" :show-icon="false" class="change-pwd__tip">
-      <template #title>
-        密码用 RSA 加密后传输，不会以明文进入网关或日志。修改成功后请用新密码重新登录。
-      </template>
-    </a-alert>
-
-    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
-      <a-form-item field="oldPassword" label="原密码">
-        <a-input-password v-model="form.oldPassword" placeholder="请输入当前密码" allow-clear />
-      </a-form-item>
-
-      <a-form-item field="newPassword" label="新密码">
-        <a-input-password v-model="form.newPassword" placeholder="8~32 位，需含字母与数字" allow-clear />
-      </a-form-item>
-
-      <a-form-item field="confirmPassword" label="确认新密码">
-        <a-input-password v-model="form.confirmPassword" placeholder="再输入一次" allow-clear />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
-import { Message } from '@arco-design/web-vue'
-import { changePassword } from '@/apis/xt'
-import { encryptPassword } from '@/utils/rsa'
-
-/**
- * 修改自己的密码。
- *
- * 三点与后端一致的口径，界面上要提前说清楚，否则用户会以为是系统坏了：
- *   1. **原密码必填** —— 文档里「强制改密场景可空」需要一个
- *      「必须改密」标记来界定，而库里目前没有这个列。
- *      在没有该标记时放行"不填原密码"，等于任何拿到有效 token 的人
- *      都能改掉密码、把原主永久挤出去，所以现在一律校验。
- *   2. **新旧密码不能相同** —— 服务端会拒。
- *   3. **改密后此前签发的 token 仍然有效**（已知缺口），所以这里提示的是
- *      "请用新密码重新登录"，而不是"已踢出其他设备"——后者现在做不到。
- */
-defineOptions({ name: 'ChangePasswordModal' })
-
-const visible = ref(false)
-const submitting = ref(false)
-const formRef = useTemplateRef('formRef')
-
-const form = reactive({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: ''
-})
-
-const rules: FormInstance['rules'] = {
-  oldPassword: [{ required: true, message: '请输入原密码' }],
-  newPassword: [
-    { required: true, message: '请输入新密码' },
-    { minLength: 8, message: '密码至少 8 位' },
-    { maxLength: 32, message: '密码最多 32 位' }
-  ],
-  confirmPassword: [
-    { required: true, message: '请再输入一次新密码' },
-    {
-      validator: (value: string, callback: (error?: string) => void) => {
-        if (value !== form.newPassword) {
-          callback('两次输入的新密码不一致')
-          return
-        }
-        callback()
-      }
-    }
-  ]
-}
-
-function open() {
-  form.oldPassword = ''
-  form.newPassword = ''
-  form.confirmPassword = ''
-  visible.value = true
-}
-
-function close() {
-  visible.value = false
-}
-
-async function confirm() {
-  const valid = await formRef.value?.validate()
-  if (valid) return false
-
-  submitting.value = true
-  try {
-    // 两个字段都要加密：后端把两个都当密文解，混着传会在解密处失败
-    const [oldCipher, newCipher] = await Promise.all([
-      encryptPassword(form.oldPassword),
-      encryptPassword(form.newPassword)
-    ])
-    await changePassword({ oldPassword: oldCipher, newPassword: newCipher })
-    Message.success('密码已修改，请用新密码重新登录')
-    visible.value = false
-    return true
-  } catch {
-    return false
-  } finally {
-    submitting.value = false
-  }
-}
-
-defineExpose({ open })
-</script>
-
-<style lang="scss" scoped>
-.change-pwd {
-  &__tip {
-    margin-bottom: 16px;
-    line-height: 1.7;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/HeaderRightBar/SettingDrawerPanel.vue b/frontend-pc/src/layout/components/HeaderRightBar/SettingDrawerPanel.vue
deleted file mode 100644
index d7f8d0c..0000000
--- a/frontend-pc/src/layout/components/HeaderRightBar/SettingDrawerPanel.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<!--
-  @file SettingDrawer 组件
-  @description 系统设置抽屉组件，用于配置系统主题、布局、动画等全局设置
--->
-<template>
-  <div>
-    <a-space :size="15" direction="vertical" fill>
-      <section>
-        <a-divider orientation="center">系统布局</a-divider>
-        <a-row :gutter="[8, 8]">
-          <a-col v-for="item in LAYOUT_OPTIONS" :key="item.value" :span="8">
-            <LayoutModeItem :mode="item.value" :name="item.label" @click="toggleLayout(item.value)"></LayoutModeItem>
-          </a-col>
-        </a-row>
-      </section>
-
-      <!-- 系统主题设置 -->
-      <section>
-        <a-divider orientation="center">系统主题</a-divider>
-        <a-row justify="center">
-          <ColorPicker theme="dark" :color="appStore.themeColor" :sucker-hide="true" :colors-default="defaultColorList"
-            @change-color="changeColor"></ColorPicker>
-        </a-row>
-      </section>
-
-      <!-- 界面显示设置 -->
-      <section>
-        <a-divider orientation="center">界面显示</a-divider>
-        <a-descriptions :column="1" :align="{ value: 'right' }" :value-style="{ paddingRight: 0 }">
-          <!-- 页签设置 -->
-          <a-descriptions-item label="页签显示">
-            <a-switch v-model="appStore.isTabVisible" />
-          </a-descriptions-item>
-          <a-descriptions-item label="页签风格">
-            <a-select v-model="appStore.tabStyle" placeholder="请选择" :options="TAB_MODE_OPTIONS"
-              :disabled="!appStore.isTabVisible" :trigger-props="{ autoFitPopupMinWidth: true }"
-              :style="{ width: '120px' }">
-            </a-select>
-          </a-descriptions-item>
-
-          <!-- 动画设置 -->
-          <a-descriptions-item label="动画显示">
-            <a-switch v-model="appStore.isTransitionEnabled" />
-          </a-descriptions-item>
-          <a-descriptions-item label="动画效果">
-            <a-select v-model="appStore.transitionName" placeholder="请选择" :options="ANIMATE_MODE_OPTIONS"
-              :disabled="!appStore.isTransitionEnabled" :style="{ width: '120px' }">
-            </a-select>
-          </a-descriptions-item>
-
-          <!-- 菜单设置 -->
-          <a-descriptions-item label="深色菜单">
-            <a-switch v-model="appStore.isMenuDark" />
-          </a-descriptions-item>
-          <a-descriptions-item label="手风琴效果">
-            <a-switch v-model="appStore.isMenuAccordion" />
-          </a-descriptions-item>
-        </a-descriptions>
-      </section>
-    </a-space>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ColorPicker } from 'vue-color-kit'
-import AppSetting from '@/config/setting.json'
-import { useTheme } from '@/hooks'
-import { useAppStore } from '@/stores'
-import LayoutModeItem from './components/LayoutModeItem.vue'
-import 'vue-color-kit/dist/vue-color-kit.css'
-
-/** 组件名称 */
-defineOptions({ name: 'SettingDrawerPanel' })
-
-/** 状态管理 */
-const appStore = useAppStore()
-const { setThemeColor } = useTheme()
-
-type LayoutItem = { label: string, value: App.SettingConfig['layout'] }
-/** 布局选项 */
-const LAYOUT_OPTIONS: LayoutItem[] = [
-  { label: '默认布局', value: 'left' },
-  { label: '顶部布局', value: 'top' },
-  { label: '混合布局', value: 'mix' },
-  { label: '双列布局', value: 'columns' }
-]
-
-type TabItem = { label: string, value: App.SettingConfig['tabStyle'] }
-/** 页签模式选项 */
-const TAB_MODE_OPTIONS: TabItem[] = [
-  { label: '卡片', value: 'card' },
-  { label: '间隔卡片', value: 'card-gutter' },
-  { label: '圆角', value: 'rounded' },
-  { label: '自定义1', value: 'custom1' },
-  { label: '自定义2', value: 'custom2' }
-]
-
-type AnimateItem = { label: string, value: App.SettingConfig['transitionName'] }
-/** 动画模式选项 */
-const ANIMATE_MODE_OPTIONS: AnimateItem[] = [
-  { label: '默认', value: 'zoom-fade' },
-  { label: '滑动', value: 'fade-slide' },
-  { label: '渐变', value: 'fade' },
-  { label: '底部滑出', value: 'fade-bottom' },
-  { label: '缩放消退', value: 'fade-scale' }
-]
-
-/** 初始化设置 */
-const initSetting = () => {
-  const layouts = LAYOUT_OPTIONS.map((i) => i.value)
-  if (!layouts.includes(appStore.layout)) {
-    appStore.layout = AppSetting.layout as App.SettingConfig['layout']
-  }
-  const tabs = TAB_MODE_OPTIONS.map((i) => i.value)
-  if (!tabs.includes(appStore.tabStyle)) {
-    appStore.tabStyle = AppSetting.tabStyle as App.SettingConfig['tabStyle']
-  }
-  const animates = ANIMATE_MODE_OPTIONS.map((i) => i.value)
-  if (!animates.includes(appStore.transitionName)) {
-    appStore.transitionName = AppSetting.transitionName as App.SettingConfig['transitionName']
-  }
-}
-initSetting()
-
-/** 默认主题色列表 */
-const defaultColorList = [
-  '#165DFF',
-  '#409EFF',
-  '#18A058',
-  '#2d8cf0',
-  '#007AFF',
-  '#5ac8fa',
-  '#5856D6',
-  '#536dfe',
-  '#9c27b0',
-  '#AF52DE',
-  '#0096c7',
-  '#00C1D4',
-  '#43a047',
-  '#e53935',
-  '#f4511e',
-  '#6d4c41'
-]
-
-/** 颜色选择器返回值类型 */
-interface ColorObj {
-  hex: string
-  hsv: { h: number, s: number, v: number }
-  rgba: { r: number, g: number, b: number, a: number }
-}
-
-/** 更改主题色 */
-const changeColor = (colorObj: ColorObj) => {
-  if (!/^#[0-9A-Z]{6}/i.test(colorObj.hex)) return
-  setThemeColor(colorObj.hex)
-}
-
-/** 切换布局 */
-const toggleLayout = (layout: App.SettingConfig['layout']) => {
-  appStore.layout = layout
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-descriptions-item-label-block) {
-  color: var(--color-text-1);
-}
-</style>
diff --git a/frontend-pc/src/layout/components/HeaderRightBar/components/LayoutModeItem.vue b/frontend-pc/src/layout/components/HeaderRightBar/components/LayoutModeItem.vue
deleted file mode 100644
index 306dd52..0000000
--- a/frontend-pc/src/layout/components/HeaderRightBar/components/LayoutModeItem.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<!--
-  @file LayoutItem 组件
-  @description 布局切换选项组件，支持左侧布局、顶部布局和混合布局三种模式
--->
-<template>
-  <div class="layout-mode-item-wrapper w-full">
-    <!-- 布局预览 -->
-    <div class="layout-mode-item"
-      :class="[{ 'is-active': appStore.layout === props.mode }, `layout-mode-item__${props.mode}`]"
-      @click="emit('click')">
-      <!-- 默认布局 -->
-      <template v-if="props.mode === 'left'">
-        <div class="preview-side preview-side--main">
-          <span class="preview-line"></span>
-          <span class="preview-line"></span>
-          <span class="preview-line"></span>
-          <span class="preview-line"></span>
-        </div>
-        <div class="preview-main">
-          <div class="preview-header"></div>
-          <div class="preview-content">
-            <span class="preview-line"></span>
-            <span class="preview-line is-short"></span>
-            <span class="preview-line is-short"></span>
-          </div>
-        </div>
-      </template>
-
-      <!-- 顶部布局 -->
-      <template v-if="props.mode === 'top'">
-        <div class="preview-topbar">
-          <span class="preview-pill"></span>
-          <span class="preview-pill"></span>
-          <span class="preview-pill"></span>
-          <span class="preview-pill"></span>
-        </div>
-        <div class="preview-content">
-          <span class="preview-line"></span>
-          <span class="preview-line is-short"></span>
-          <span class="preview-line is-short"></span>
-        </div>
-      </template>
-
-      <!-- 混合布局 -->
-      <template v-if="props.mode === 'mix'">
-        <div class="preview-topbar">
-          <span class="preview-pill"></span>
-          <span class="preview-pill"></span>
-          <span class="preview-pill"></span>
-          <span class="preview-pill"></span>
-        </div>
-        <div class="preview-main preview-main--row">
-          <div class="preview-side preview-side--main">
-            <span class="preview-line"></span>
-            <span class="preview-line"></span>
-            <span class="preview-line"></span>
-          </div>
-          <div class="preview-content">
-            <span class="preview-line"></span>
-            <span class="preview-line is-short"></span>
-            <span class="preview-line is-short"></span>
-          </div>
-        </div>
-      </template>
-
-      <!-- 双列布局 -->
-      <template v-if="props.mode === 'columns'">
-        <div class="preview-side preview-side--ghost"></div>
-        <div class="preview-side preview-side--main">
-          <span class="preview-line"></span>
-          <span class="preview-line"></span>
-          <span class="preview-line"></span>
-          <span class="preview-line"></span>
-        </div>
-        <div class="preview-main">
-          <div class="preview-content">
-            <span class="preview-line"></span>
-            <span class="preview-line is-short"></span>
-            <span class="preview-line is-short"></span>
-            <span class="preview-line is-short"></span>
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <!-- 布局名称 -->
-    <p class="layout-mode-item__text">{{ props.name }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useAppStore } from '@/stores'
-
-defineOptions({
-  name: 'LayoutModeItem'
-})
-
-/** Props 默认值 */
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'left'
-})
-
-/** Emits 定义 */
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-
-/** 布局模式类型 */
-type LayoutMode = 'left' | 'top' | 'mix' | 'columns'
-
-/** Props 类型定义 */
-interface Props {
-  /** 布局模式 */
-  mode?: LayoutMode
-  /** 布局名称 */
-  name: string
-}
-
-/** 应用状态 */
-const appStore = useAppStore()
-</script>
-
-<style lang="scss" scoped>
-.layout-mode-item-wrapper {
-  width: 100%;
-}
-
-.layout-mode-item {
-  box-sizing: border-box;
-  display: flex;
-  gap: 4px;
-  width: 100%;
-  height: 58px;
-  padding: 6px;
-  overflow: hidden;
-  cursor: pointer;
-  background-color: var(--color-bg-1);
-  border: 2px solid var(--color-border-2);
-  border-radius: 6px;
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
-
-  &.is-active {
-    border-color: rgb(var(--primary-6));
-    box-shadow: 0 0 5px 3px rgb(var(--primary-2));
-  }
-
-  &__text {
-    margin-top: 5px;
-    font-size: 12px;
-    color: var(--color-text-2);
-    text-align: center;
-  }
-}
-
-.preview-main {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-
-.preview-side {
-  box-sizing: border-box;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  gap: 3px;
-  width: 12px;
-  padding: 3px 2px;
-  background-color: var(--color-fill-3);
-  border-radius: 2px;
-}
-
-.preview-side--main {
-  background-color: var(--color-fill-4);
-}
-
-.preview-side--ghost {
-  width: 11px;
-  background-color: var(--color-fill-2);
-}
-
-.preview-header {
-  width: 100%;
-  height: 8px;
-  background-color: var(--color-fill-3);
-  border-radius: 2px;
-}
-
-.preview-topbar {
-  box-sizing: border-box;
-  display: flex;
-  gap: 3px;
-  width: 100%;
-  height: 10px;
-  padding: 2px 3px;
-  background-color: var(--color-fill-3);
-  border-radius: 2px;
-}
-
-.preview-pill {
-  flex: 1;
-  background-color: var(--color-bg-1);
-  border-radius: 1px;
-}
-
-.preview-content {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-  justify-content: flex-start;
-  min-width: 0;
-  padding-right: 1px;
-
-  .preview-line {
-    height: 6px;
-  }
-}
-
-.preview-line {
-  display: block;
-  width: 100%;
-  height: 5px;
-  background-color: var(--color-fill-2);
-  border-radius: 1px;
-
-  &.is-short {
-    width: 70%;
-  }
-}
-
-.layout-mode-item__top {
-  flex-direction: column;
-
-  .preview-content {
-    padding-top: 2px;
-  }
-}
-
-.layout-mode-item__mix {
-  flex-direction: column;
-
-  .preview-topbar {
-    flex-shrink: 0;
-  }
-
-  .preview-main {
-    flex: 1;
-  }
-
-  .preview-side {
-    width: 12px;
-  }
-}
-
-.preview-main--row {
-  flex-direction: row;
-  gap: 4px;
-}
-
-.layout-mode-item__columns {
-  .preview-main .preview-content {
-    justify-content: center;
-    padding-top: 0;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/HeaderRightBar/index.vue b/frontend-pc/src/layout/components/HeaderRightBar/index.vue
deleted file mode 100644
index cb2aa41..0000000
--- a/frontend-pc/src/layout/components/HeaderRightBar/index.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<!--
-  @file HeaderRightBar 组件
-  @description 头部右侧工具栏组件，包含项目配置、消息通知、全屏切换、主题切换和用户菜单等功能
--->
-<template>
-  <a-row justify="end" align="center" class="header-right-bar">
-    <a-space size="medium">
-      <!-- 项目配置按钮 -->
-      <a-tooltip content="项目配置" position="bl">
-        <a-button size="mini" class="g-hover-btn" @click="handleOpenSettings">
-          <template #icon>
-            <icon-settings :size="18" />
-          </template>
-        </a-button>
-      </a-tooltip>
-
-      <!--
-        消息通知（铃铛）**暂时去掉**（2026-10-09 客户要求）：
-        原来的铃铛是一个写死 9 条假数据的下拉框，站内信还没接到这个入口上。
-        真要做的时候，数据源是「通知记录」（`/collect/notify`，接口已实现），
-        不要恢复成写死的假列表。
-      -->
-
-      <!-- 全屏切换按钮 -->
-      <a-tooltip v-if="!['xs', 'sm'].includes(breakpoint)" content="全屏切换" position="bottom">
-        <a-button size="mini" class="g-hover-btn" @click="toggle">
-          <template #icon>
-            <icon-fullscreen v-if="!isFullscreen" :size="18" />
-            <icon-fullscreen-exit v-else :size="18" />
-          </template>
-        </a-button>
-      </a-tooltip>
-
-      <!-- 暗黑模式切换 -->
-      <a-tooltip content="主题切换" position="bottom">
-        <GiThemeBtn></GiThemeBtn>
-      </a-tooltip>
-
-      <!-- 管理员账户 -->
-      <a-dropdown trigger="hover">
-        <a-row align="center" :wrap="false" class="header-right-bar__user">
-          <!-- 头像：后端未下发 avatarUrl（本项目用姓名首字兜底，避免渲染成裂图） -->
-          <a-avatar :size="32" :style="{ backgroundColor: 'rgb(var(--primary-6))' }">
-            <img v-if="userStore.avatar" :src="userStore.avatar" alt="" />
-            <template v-else>{{ avatarText }}</template>
-          </a-avatar>
-          <span class="header-right-bar__username">{{ userStore.name }}</span>
-          <icon-down />
-        </a-row>
-
-        <template #content>
-          <a-doption v-for="item in USER_MENUS" :key="item.key" @click="item.onClick">
-            <template #icon>
-              <GiIconBox :color="item.iconColor">
-                <component :is="item.icon" />
-              </GiIconBox>
-            </template>
-            <span>{{ item.label }}</span>
-          </a-doption>
-          <a-divider :margin="0" />
-          <a-doption @click="handleLogout">
-            <template #icon>
-              <GiIconBox color="warning">
-                <icon-export />
-              </GiIconBox>
-            </template>
-            <span>退出登录</span>
-          </a-doption>
-        </template>
-      </a-dropdown>
-    </a-space>
-  </a-row>
-
-  <ChangePasswordModal ref="changePwdRef" />
-</template>
-
-<script setup lang="ts">
-import { Button, Drawer, Message, Modal } from '@arco-design/web-vue'
-import { useFullscreen } from '@vueuse/core'
-import { useBreakpoint, useTheme } from '@/hooks'
-import { useAppStore, useUserStore } from '@/stores'
-import ChangePasswordModal from './ChangePasswordModal.vue'
-import SettingDrawerPanel from './SettingDrawerPanel.vue'
-
-/** 组件名称 */
-defineOptions({ name: 'HeaderRight' })
-
-/** 路由实例 */
-const router = useRouter()
-
-/** 状态管理 */
-const userStore = useUserStore()
-const appStore = useAppStore()
-const { setThemeColor } = useTheme()
-
-/** 响应式断点 */
-const { breakpoint } = useBreakpoint()
-
-/** 全屏控制 */
-const { isFullscreen, toggle } = useFullscreen()
-
-/** 头像兜底文案：取姓名首字 */
-const avatarText = computed(() => (userStore.name || '—').slice(0, 1))
-
-/** 修改密码弹窗 */
-const changePwdRef = useTemplateRef('changePwdRef')
-
-/** 用户菜单配置 */
-const USER_MENUS = [
-  {
-    key: 'password',
-    label: '修改密码',
-    icon: 'icon-unlock',
-    iconColor: 'primary',
-    onClick: () => changePwdRef.value?.open()
-  }
-]
-
-/** 恢复默认项目配置 */
-const handleResetSettings = () => {
-  appStore.resetSettings()
-  setThemeColor(appStore.themeColor)
-  Message.success('已恢复默认配置')
-}
-
-/** 打开设置抽屉 */
-const handleOpenSettings = () => {
-  Drawer.open({
-    title: '项目配置',
-    width: 300,
-    content: () => h(SettingDrawerPanel),
-    footer: () => h(Button, { type: 'primary', long: true, style: { margin: 0 }, onClick: handleResetSettings }, { default: () => '恢复默认配置' })
-  })
-}
-
-/** 处理退出登录 */
-const handleLogout = () => {
-  Modal.warning({
-    title: '提示',
-    content: '确认退出登录？',
-    hideCancel: false,
-    closable: true,
-    onBeforeOk: async () => {
-      try {
-        await userStore.logout()
-        router.replace('/login')
-        return true
-      } catch {
-        Message.error('退出登录失败')
-        return false
-      }
-    }
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-.arco-dropdown-open .arco-icon-down {
-  transform: rotate(180deg);
-}
-
-.header-right-bar {
-  &__user {
-    color: var(--color-text-1);
-    cursor: pointer;
-  }
-
-  &__username {
-    margin-left: 10px;
-    white-space: nowrap;
-
-    .arco-icon-down {
-      margin-left: 2px;
-      transition: all 0.3s;
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Logo.vue b/frontend-pc/src/layout/components/Logo.vue
deleted file mode 100644
index d6afe62..0000000
--- a/frontend-pc/src/layout/components/Logo.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
-  @file Logo 组件
-  @description 系统 Logo 组件，支持折叠状态和首页导航功能
--->
-<template>
-  <section class="system-logo" :class="{ collapsed: props.collapsed }" @click="handleHomeNavigation">
-    <img class="logo" src="@/assets/images/logo.svg" alt="填报通" />
-    <span v-if="!props.hideName" class="system-name g-line-1">填报通</span>
-  </section>
-</template>
-
-<script setup lang="ts">
-/** 组件名称 */
-defineOptions({ name: 'Logo' })
-
-/** Props 默认值 */
-const props = withDefaults(defineProps<Props>(), {
-  collapsed: false,
-  hideName: false
-})
-
-/** Props 类型定义 */
-interface Props {
-  /** 是否折叠状态 */
-  collapsed?: boolean
-  /** 是否隐藏名称 */
-  hideName?: boolean
-}
-
-/** 路由实例 */
-const router = useRouter()
-
-/** 处理首页导航 */
-const handleHomeNavigation = () => {
-  router.push('/')
-}
-</script>
-
-<style lang="scss" scoped>
-.system-logo {
-  box-sizing: border-box;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  height: 56px;
-  padding: 0 12px;
-  font-size: 20px;
-  line-height: 1;
-  color: var(--color-text-1);
-  cursor: pointer;
-  user-select: none;
-  transition: padding 0.2s;
-
-  // 折叠状态样式
-  &.collapsed {
-    justify-content: center;
-    padding: 0;
-
-    .system-name {
-      display: none;
-    }
-  }
-
-  // Logo 图片样式
-  .logo {
-    flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    overflow: hidden;
-    border-radius: 6px;
-    transition: all 0.2s;
-  }
-
-  // 系统名称样式
-  .system-name {
-    padding-left: 10px;
-    white-space: nowrap;
-    transition: color 0.3s;
-
-    &:hover {
-      color: rgb(var(--primary-6));
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Main.vue b/frontend-pc/src/layout/components/Main.vue
deleted file mode 100644
index ebcd78f..0000000
--- a/frontend-pc/src/layout/components/Main.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-  @file Main 组件
-  @description 主内容区组件，支持路由切换动画、页面缓存和组件重载功能
--->
-<template>
-  <a-layout class="main">
-    <router-view v-slot="{ Component, route }">
-      <!--
-        ⚠️ 这里**不能加 `appear`**。
-        加了的后果是：首次渲染也被当成一次过渡，元素被加上
-        `zoom-fade-enter-from` + `zoom-fade-enter-active`（即 opacity:0 / scale(0.92)）
-        之后**再也不会被清理** —— 因为进入动画的收尾依赖 transitionend 与
-        下一帧的补帧，而 `mode="out-in"` + `appear` + `keep-alive` 的组合下
-        没有"离场"元素时这条链路不成立。
-        表现极具迷惑性：**DOM 里内容齐全、接口数据也对、文字能选中，
-        就是人眼看不到**（计算样式 opacity 恒为 0），
-        看起来像"页面没渲染"，实际是"渲染了但透明"。
-        2026-09-28 实测复现：整块内容区 opacity=0、transform=scale(0.92) 长时间不变。
-        首次加载本来也不需要入场动画，去掉 `appear` 即可。
-      -->
-      <transition :name="appStore.pageTransitionName" mode="out-in">
-        <keep-alive :include="(tabsStore.cacheList as string[])">
-          <component :is="Component" v-if="tabsStore.reloadFlag" :key="route.path" />
-        </keep-alive>
-      </transition>
-    </router-view>
-  </a-layout>
-</template>
-
-<script setup lang="ts">
-import { useAppStore, useTabsStore } from '@/stores'
-
-/** 组件名称 */
-defineOptions({ name: 'AppMain' })
-
-/** 状态管理 */
-const appStore = useAppStore()
-const tabsStore = useTabsStore()
-</script>
-
-<style lang="scss" scoped>
-.main {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Menu/MenuIcon.vue b/frontend-pc/src/layout/components/Menu/MenuIcon.vue
deleted file mode 100644
index f243a09..0000000
--- a/frontend-pc/src/layout/components/Menu/MenuIcon.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <Icon v-if="props?.icon && (props.icon.startsWith('icon-park') || props.icon.startsWith('custom:'))"
-    :icon="props.icon" :width="16" :height="16" />
-  <component :is="props?.icon" v-else-if="props?.icon && props?.icon?.startsWith('icon')" :size="24">
-  </component>
-  <Icon v-else-if="props?.icon" :icon="props.icon" :width="24" :height="24" />
-</template>
-
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue'
-
-interface Props {
-  icon?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: ''
-})
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/layout/components/Menu/MenuItem.vue b/frontend-pc/src/layout/components/Menu/MenuItem.vue
deleted file mode 100644
index 7eb491d..0000000
--- a/frontend-pc/src/layout/components/Menu/MenuItem.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <a-menu-item v-if="!item.children?.length" :key="item?.path">
-    <template #icon>
-      <MenuIcon :icon="item?.meta?.icon"></MenuIcon>
-    </template>
-    <a-row v-if="menuBadgeStore.badgeMap[item.path] !== undefined" justify="space-between" align="center"
-      style="flex-wrap: nowrap;">
-      <div class="g-line-1">{{ item?.meta?.title }}</div>
-      <a-badge class="g-ml" :count="menuBadgeStore.badgeMap[item.path]"
-        v-bind="menuBadgeStore.BadgePropsMap[item.path]" />
-    </a-row>
-    <template v-else>{{ item?.meta?.title }}</template>
-  </a-menu-item>
-
-  <a-sub-menu v-else :key="item.path" :title="item?.meta?.title">
-    <template #icon>
-      <MenuIcon :icon="item?.meta?.icon"></MenuIcon>
-    </template>
-    <MenuItem v-for="child in item.children" :key="child.path" :item="child">
-    </MenuItem>
-  </a-sub-menu>
-</template>
-
-<script lang="ts" setup>
-import type { RouteRecordRaw } from 'vue-router'
-import { useMenuBadgeStore } from '@/stores'
-import MenuIcon from './MenuIcon.vue'
-
-defineOptions({ name: 'MenuItem' })
-
-withDefaults(defineProps<Props>(), {})
-
-interface Props {
-  item: RouteRecordRaw
-}
-
-const menuBadgeStore = useMenuBadgeStore()
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-badge) {
-  display: inline-flex;
-}
-</style>
diff --git a/frontend-pc/src/layout/components/MenuFoldBtn.vue b/frontend-pc/src/layout/components/MenuFoldBtn.vue
deleted file mode 100644
index ca8faad..0000000
--- a/frontend-pc/src/layout/components/MenuFoldBtn.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<!--
-  @file MenuFoldBtn 组件
-  @description 菜单折叠按钮组件，支持响应式布局和抽屉模式
--->
-<template>
-  <!-- 折叠按钮 -->
-  <a-button size="mini" class="g-hover-btn menu-fold-btn" @click="handleFoldClick">
-    <template #icon>
-      <icon-menu-fold v-if="!appStore.isMenuCollapsed" :size="18" :stroke-width="3" />
-      <icon-menu-unfold v-else :size="18" :stroke-width="3" />
-    </template>
-  </a-button>
-
-  <!-- 移动端抽屉菜单 -->
-  <div class="drawer" :class="{ 'app-menu-dark': appStore.isMenuDark }">
-    <a-drawer v-model:visible="visible" placement="left" :header="false" :footer="false" :render-to-body="false"
-      :drawer-style="drawerStyle">
-      <Logo :collapsed="false" />
-      <a-menu class="menu w-full" :menu-trigger-props="menuTriggerProps" :selected-keys="selectedKeys"
-        @menu-item-click="onMenuItemClick">
-        <MenuItem v-for="item in menuList" :key="item.path" :item="item">
-        </MenuItem>
-      </a-menu>
-    </a-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDevice } from '@/hooks'
-import { useMenu } from '@/layout/hooks/useMenu'
-import { useAppStore } from '@/stores'
-
-/** 组件名称 */
-defineOptions({ name: 'MenuFoldBtn' })
-const Logo = defineAsyncComponent(() => import('@/layout/components/Logo.vue'))
-const MenuItem = defineAsyncComponent(() => import('@/layout/components/Menu/MenuItem.vue'))
-
-/** 状态管理 */
-const appStore = useAppStore()
-const { isDesktop } = useDevice()
-const { menuList, menuTriggerProps, handleMenuItemClick, selectedKeys } = useMenu()
-
-/** 抽屉可见性状态 */
-const visible = ref(false)
-
-/** 抽屉样式配置 */
-const drawerStyle = {
-  borderRight: '1px solid var(--color-border-2)',
-  boxSizing: 'border-box',
-  backgroundColor: 'var(--color-bg-2)'
-} as const
-
-/** 处理折叠按钮点击 */
-const handleFoldClick = () => {
-  if (isDesktop.value) {
-    appStore.setMenuCollapse(!appStore.isMenuCollapsed)
-  } else {
-    visible.value = !visible.value
-  }
-}
-
-/** 处理菜单项点击 */
-const onMenuItemClick = (key: string) => {
-  handleMenuItemClick(key)
-  visible.value = false
-}
-</script>
-
-<style lang="scss" scoped>
-.menu-fold-btn {
-  flex-shrink: 0;
-  background-color: var(--color-secondary-hover) !important;
-}
-
-.drawer {
-
-  // 菜单样式
-  .menu {
-    flex: 1;
-    overflow: hidden;
-    background-color: inherit;
-  }
-
-  // 抽屉内容样式
-  :deep(.arco-drawer-body) {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    overflow: hidden;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/OneLevelMenu/index.vue b/frontend-pc/src/layout/components/OneLevelMenu/index.vue
deleted file mode 100644
index f6fe9b3..0000000
--- a/frontend-pc/src/layout/components/OneLevelMenu/index.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="one-level-menu" :class="{ 'app-menu-dark': appStore.isMenuDark }">
-    <Logo class="one-level-menu__logo" hide-name></Logo>
-    <div class="one-level-menu__wrap">
-      <a-scrollbar style="height:100%;overflow: auto;" :outer-style="{ width: '100%' }">
-        <ul class="one-level-menu__list">
-          <li v-for="(item) in props.data" :key="item.path" class="one-level-menu__item"
-            :class="{ 'one-level-menu__item--active': props.activePath === item.path }"
-            @click="emits('menu-click', item)">
-            <MenuIcon :icon="item?.meta?.icon"></MenuIcon>
-            <p class="one-level-menu__item__title g-line-1" :title="item?.meta?.title">{{ item?.meta?.title }}</p>
-          </li>
-        </ul>
-      </a-scrollbar>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { RouteRecordRaw } from 'vue-router'
-import { useAppStore } from '@/stores'
-import Logo from '../Logo.vue'
-import MenuIcon from '../Menu/MenuIcon.vue'
-
-interface Props {
-  activePath?: string
-  data?: RouteRecordRaw[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  activePath: '',
-  data: () => []
-})
-
-const emits = defineEmits<{
-  (e: 'menu-click', item: RouteRecordRaw): void
-}>()
-
-const appStore = useAppStore()
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-scrollbar-track) {
-  display: none;
-}
-
-.one-level-menu {
-  box-sizing: border-box;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  width: 68px;
-  height: 100%;
-  overflow: hidden;
-  color: var(--color-text-2);
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-border-2);
-
-  &__logo {
-    justify-content: center;
-    border-bottom: 1px solid var(--color-border-2);
-
-    :deep(.logo) {
-      width: 40px;
-      height: 40px;
-    }
-  }
-
-  &__wrap {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  &__list {
-    box-sizing: border-box;
-    padding: 4px 4px 0;
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 0;
-    margin-bottom: 4px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &--active {
-      color: rgb(var(--primary-6));
-      background-color: var(--color-primary-light-2)
-    }
-
-    &:not(.one-level-menu__item--active):hover {
-      background-color: var(--color-fill-2);
-    }
-
-    &__title {
-      box-sizing: border-box;
-      padding: 0 8px;
-      margin-top: 8px;
-      font-size: 12px;
-      line-height: 1;
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Tabs/MagicIcon.vue b/frontend-pc/src/layout/components/Tabs/MagicIcon.vue
deleted file mode 100644
index 65c2361..0000000
--- a/frontend-pc/src/layout/components/Tabs/MagicIcon.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<!--
-  @file MagicIcon 组件
-  @description 可旋转的魔法图标组件，用于展示更多操作的下拉菜单触发器
--->
-<template>
-  <span class="magic-icon-wrapper">
-    <span class="magic-icon">
-      <i class="magic-dot magic-dot-top"></i>
-      <i class="magic-dot magic-dot-bottom"></i>
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'MagicIcon' })
-</script>
-
-<style lang="scss" scoped>
-.magic-icon-wrapper {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  // 点击区域扩展
-  &::before {
-    position: absolute;
-    top: -6px;
-    left: -6px;
-    width: 26px;
-    height: 26px;
-    cursor: pointer;
-    content: '';
-  }
-}
-
-.magic-icon {
-  display: inline-block;
-  color: var(--color-text-2);
-  cursor: pointer;
-  transition: transform 0.3s ease-out;
-
-  // 魔法点样式
-  .magic-dot {
-    position: relative;
-    display: block;
-    width: 14px;
-    height: 6px;
-
-    &-bottom {
-      margin-top: 2px;
-    }
-
-    // 左侧点
-    &::before {
-      position: absolute;
-      left: 0;
-      width: 6px;
-      height: 6px;
-      content: '';
-      background: var(--color-text-2);
-      transition: transform 0.3s ease-out;
-    }
-
-    // 右侧点
-    &::after {
-      position: absolute;
-      left: 8px;
-      width: 6px;
-      height: 6px;
-      content: '';
-      background: var(--color-text-2);
-      transition: background-color 0.3s ease-out;
-    }
-  }
-}
-
-// 悬浮和打开状态样式
-.magic-icon-wrapper:hover,
-.arco-dropdown-open {
-  .magic-icon {
-    transform: rotate(90deg);
-
-    .magic-dot {
-      &::before,
-      &::after {
-        background: rgb(var(--primary-6));
-      }
-
-      &-top::before {
-        background: rgb(var(--primary-3));
-        transform: rotate(45deg);
-      }
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Tabs/ReloadIcon.vue b/frontend-pc/src/layout/components/Tabs/ReloadIcon.vue
deleted file mode 100644
index 23b237f..0000000
--- a/frontend-pc/src/layout/components/Tabs/ReloadIcon.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
-  @file ReloadIcon 组件
-  @description 页面重载图标组件，支持加载动画效果
--->
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
-    width="18" height="18" viewBox="0 0 24 24" class="reload-icon" @click="handleReload">
-    <path fill="currentColor"
-      d="M5.463 4.433A9.96 9.96 0 0 1 12 2c5.523 0 10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3A8 8 0 0 0 6.46 6.228zm13.074 15.134A9.96 9.96 0 0 1 12 22C6.477 22 2 17.523 2 12c0-2.136.67-4.116 1.81-5.74L7 12H4a8 8 0 0 0 13.54 5.772z">
-    </path>
-  </svg>
-  <!-- <svg width="17" height="17" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="reload-icon"
-    @click="handleReload">
-    <path d="M42 8V24" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="round" />
-    <path d="M6 24L6 40" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="round" />
-    <path
-      d="M42 24C42 14.0589 33.9411 6 24 6C18.9145 6 14.3216 8.10896 11.0481 11.5M6 24C6 33.9411 14.0589 42 24 42C28.8556 42 33.2622 40.0774 36.5 36.9519"
-      stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="round" />
-  </svg> -->
-</template>
-
-<script setup lang="ts">
-import { useTabsStore } from '@/stores'
-
-/** 组件名称 */
-defineOptions({ name: 'ReloadIcon' })
-
-/** 状态管理 */
-const tabsStore = useTabsStore()
-
-/** 处理重载操作 */
-const handleReload = () => {
-  tabsStore.reloadPage()
-}
-</script>
-
-<style lang="scss" scoped>
-.reload-icon {
-  cursor: pointer;
-
-  &:hover {
-    transform: rotate(180deg);
-    transition: transform 0.5s ease-in-out;
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/components/Tabs/index.vue b/frontend-pc/src/layout/components/Tabs/index.vue
deleted file mode 100644
index 88e8194..0000000
--- a/frontend-pc/src/layout/components/Tabs/index.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<!--
-  @file Tabs 组件
-  @description 系统标签页组件，支持多种标签样式、右键菜单和快捷操作
--->
-<template>
-  <a-tabs :key="appStore.tabStyle" :class="`tabs--${appStore.tabStyle}`" :type="tabsType" :active-key="route.path"
-    editable hide-content size="medium" scroll-position="center" @tab-click="handleTabClick"
-    @delete="tabsStore.close('current', $event as string)">
-    <a-tab-pane v-for="item of tabsStore.tabList" :key="item.path" :title="(item.meta?.title as string)"
-      :closable="!item.meta?.affix">
-      <template v-if="appStore.tabStyle === 'custom2'" #title>
-        <a-dropdown trigger="contextMenu">
-          <a-tag class="tabs-pane__tag" :closable="!item.meta?.affix"
-            :color="route.path === item.path ? 'rgb(var(--primary-6))' : undefined"
-            :bordered="route.path === item.path ? false : true" @close="tabsStore.close('current', item.path)">
-            {{ item.meta?.title }}
-          </a-tag>
-          <template #content>
-            <a-doption @click="tabsStore.close('left', item.path)">
-              <template #icon><icon-left /></template>
-              <template #default>关闭左侧</template>
-            </a-doption>
-            <a-doption @click="tabsStore.close('right', item.path)">
-              <template #icon><icon-right /></template>
-              <template #default>关闭右侧</template>
-            </a-doption>
-            <a-doption @click="tabsStore.close('other', item.path)">
-              <template #icon><icon-close /></template>
-              <template #default>关闭其他</template>
-            </a-doption>
-          </template>
-        </a-dropdown>
-      </template>
-    </a-tab-pane>
-
-    <template #extra>
-      <a-space size="medium">
-        <ReloadIcon></ReloadIcon>
-        <a-dropdown trigger="hover">
-          <MagicIcon></MagicIcon>
-          <template #content>
-            <a-doption @click="tabsStore.close('left', route.path)">
-              <template #icon><icon-left /></template>
-              <template #default>关闭左侧</template>
-            </a-doption>
-            <a-doption @click="tabsStore.close('right', route.path)">
-              <template #icon><icon-right /></template>
-              <template #default>关闭右侧</template>
-            </a-doption>
-            <a-doption @click="tabsStore.close('other', route.path)">
-              <template #icon><icon-close /></template>
-              <template #default>关闭其他</template>
-            </a-doption>
-            <a-doption @click="tabsStore.close('all')">
-              <template #icon><icon-delete /></template>
-              <template #default>关闭全部</template>
-            </a-doption>
-          </template>
-        </a-dropdown>
-      </a-space>
-    </template>
-  </a-tabs>
-</template>
-
-<script setup lang="ts">
-import type { TabsInstance } from '@arco-design/web-vue'
-import Sortable from 'sortablejs'
-import { useRouteListener } from '@/hooks'
-import { useAppStore, useTabsStore } from '@/stores'
-import MagicIcon from './MagicIcon.vue'
-import ReloadIcon from './ReloadIcon.vue'
-
-/** 组件名称 */
-defineOptions({ name: 'Tabs' })
-const route = useRoute()
-const router = useRouter()
-const appStore = useAppStore()
-const tabsStore = useTabsStore()
-const { listenerRouteChange } = useRouteListener()
-const tabsType = computed(() => {
-  return (['custom1', 'custom2'].includes(appStore.tabStyle) ? 'card' : appStore.tabStyle) as unknown as TabsInstance['type']
-})
-
-/** 初始化标签页 */
-tabsStore.init()
-
-/** 监听路由变化 */
-listenerRouteChange(({ to }) => {
-  if (to.name) {
-    const rawTo = toRaw(to)
-    tabsStore.addTabItem(rawTo)
-  }
-})
-
-/** 处理标签页点击 */
-const handleTabClick: TabsInstance['onTabClick'] = (key) => {
-  const targetTab = tabsStore.tabList.find((tab) => tab.path === key)
-  router.push(targetTab?.fullPath || targetTab?.path || (key as string))
-}
-
-onMounted(() => {
-  Sortable.create(document.querySelector('.arco-tabs-nav-tab-list') as HTMLElement, {
-    draggable: '.arco-tabs-tab-closable',
-    animation: 300,
-    onEnd({ newIndex, oldIndex }) {
-      const tabsList = [...tabsStore.tabList]
-      const currRow = tabsList.splice(oldIndex as number, 1)[0]
-      tabsList.splice(newIndex as number, 0, currRow)
-      tabsStore.tabList = tabsList
-    }
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-tabs) {
-  background-color: var(--color-bg-1);
-}
-
-:deep(.arco-tabs-nav-tab) {
-  .arco-tabs-tab {
-    border-bottom-color: transparent !important;
-
-    svg {
-      width: 0;
-      transition: all 0.15s;
-    }
-
-    &:hover svg {
-      width: 1em;
-    }
-  }
-}
-
-.tabs--card {
-  :deep(.arco-tabs-nav-type-card) {
-    &::before {
-      z-index: 9;
-    }
-
-    .arco-tabs-tab {
-      border-top: none;
-    }
-
-    &:not(.arco-tabs-nav-tab-scroll) .arco-tabs-tab:first-child {
-      border-left: 0;
-    }
-  }
-}
-
-.tabs--card-gutter {
-  padding-top: 4px;
-  padding-left: 4px;
-}
-
-.tabs--rounded {
-  &::after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 1px;
-    content: '';
-    background-color: var(--color-border-2);
-  }
-
-  :deep(.arco-tabs-nav-type-rounded .arco-tabs-tab) {
-    padding: 2px 12px;
-    margin: 5px;
-  }
-}
-
-// 自定义样式1
-.tabs--custom1 {
-  padding-top: 4px;
-
-  :deep(.arco-tabs-nav-tab) {
-    .arco-tabs-tab {
-      padding: 5px 20px;
-      border: none;
-      mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==");
-      mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==");
-      mask-size: 100% 100%;
-      mask-size: 100% 100%;
-    }
-  }
-
-  :deep(.arco-tabs-nav-tab-list) {
-    .arco-tabs-tab-active {
-      padding: 5px 20px;
-      background-color: rgb(var(--primary-6), 0.1);
-      mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==");
-      mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==");
-      mask-size: 100% 100%;
-      mask-size: 100% 100%;
-
-      &:hover {
-        padding: 5px 20px;
-        background-color: rgb(var(--primary-6), 0.1);
-      }
-    }
-  }
-}
-
-// 自定义样式2
-.tabs--custom2 {
-  :deep(.arco-tabs-nav) {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 6px;
-
-    .arco-tabs-nav-tab-list {
-      display: flex;
-      gap: 0 8px;
-    }
-
-    .arco-tabs-tab {
-      padding: 0;
-      border: 0;
-
-      .arco-tabs-tab-close-btn {
-        display: none;
-      }
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-
-    .tabs-pane__tag {
-      height: 26px;
-      border-radius: 3px;
-    }
-  }
-}
-</style>
diff --git a/frontend-pc/src/layout/hooks/useLevelMenu.ts b/frontend-pc/src/layout/hooks/useLevelMenu.ts
deleted file mode 100644
index b604a66..0000000
--- a/frontend-pc/src/layout/hooks/useLevelMenu.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import type { CSSProperties } from 'vue'
-import type { RouteLocationNormalizedGeneric, RouteRecordRaw } from 'vue-router'
-import { eachTree, searchTree } from 'xe-utils'
-import { useRouteListener } from '@/hooks'
-import { useAppStore, useRouteStore } from '@/stores'
-import { filterTree } from '@/utils'
-import { isExternal } from '@/utils/validate'
-
-type Options = {
-  oneActivePathChange?: (path: string) => void
-}
-
-/** 获取一级菜单，二级菜单的hooks */
-export function useLevelMenu(options?: Options) {
-  const route = useRoute()
-  const router = useRouter()
-  const appStore = useAppStore()
-  const routeStore = useRouteStore()
-  const { listenerRouteChange } = useRouteListener()
-
-  const menuTheme = computed(() => appStore.isMenuDark ? 'dark' : 'light')
-
-  // 获取菜单样式
-  const getMenuStyle = computed(() => {
-    return { backgroundColor: menuTheme.value === 'dark' ? 'var(--color-menu-dark-bg)' : 'var(--color-menu-light-bg)' } as CSSProperties
-  })
-
-  // 克隆一份路由，避免直接操作原始路由
-  const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
-  const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
-
-  // 一级菜单
-  const oneLevelMenus = ref<RouteRecordRaw[]>([])
-
-  // 二级菜单
-  const twoLevelMenus = computed(() => {
-    const path = route.matched[0].path
-    return showMenuList.find((i) => i.path === path)?.children || []
-  })
-
-  // 一级菜单选中的路由
-  const oneActiveRoute = ref<RouteRecordRaw | null>(null)
-  const oneActivePath = ref('')
-  const getOneActiveRoute = (to: RouteLocationNormalizedGeneric) => {
-    let path = to.path
-    if (to?.meta?.activeMenu) {
-      path = to.meta.activeMenu
-    }
-    const arr = searchTree(showMenuList, (i) => i.path === path)
-    oneActivePath.value = arr?.[0]?.path
-    return arr?.[0]
-  }
-
-  // 二级菜单选中的路由
-  const twoActivePath = ref<string>('')
-  const getTwoActivePath = (to: RouteLocationNormalizedGeneric) => {
-    let path = to.path
-    if (to?.meta?.activeMenu) {
-      path = to.meta.activeMenu
-    }
-    return path
-  }
-
-  listenerRouteChange(({ to }) => {
-    oneActiveRoute.value = getOneActiveRoute(to)
-    twoActivePath.value = getTwoActivePath(to)
-  })
-
-  // 获取一级菜单
-  function getOneLevelMenus() {
-    const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
-    const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
-    eachTree(showMenuList, (i) => {
-      if (i?.children?.length === 1 && i?.meta?.alwaysShow !== true) {
-        if (i.meta) {
-          i.meta.title = i.meta?.title || i.children?.[0]?.meta?.title
-          i.meta.icon = i.meta?.icon || i.children?.[0]?.meta?.icon
-        }
-        delete i.children
-      }
-    })
-    oneLevelMenus.value = showMenuList
-  }
-
-  // 一级菜单点击事件
-  function handleOneMenuItemClick(path: string) {
-    if (isExternal(path)) {
-      window.open(path)
-      return
-    }
-    options?.oneActivePathChange?.(path)
-    oneActivePath.value = path
-    const obj = oneLevelMenus.value.find((i) => i.path === path)
-    if (obj?.redirect === 'noRedirect' || !obj?.redirect) {
-      router.push({ path: obj?.children?.[0]?.path })
-      return
-    }
-    router.push({ path: (obj?.redirect as string) || path })
-  }
-
-  // 二级菜单点击事件
-  function handleTwoMenuItemClick(path: string) {
-    if (isExternal(path)) {
-      window.open(path)
-      return
-    }
-    twoActivePath.value = path
-    router.push({ path })
-  }
-
-  return {
-    menuTheme,
-    getMenuStyle,
-    oneLevelMenus,
-    twoLevelMenus,
-    oneActiveRoute,
-    oneActivePath,
-    twoActivePath,
-    getOneLevelMenus,
-    handleOneMenuItemClick,
-    handleTwoMenuItemClick
-  }
-}
diff --git a/frontend-pc/src/layout/hooks/useMenu.ts b/frontend-pc/src/layout/hooks/useMenu.ts
deleted file mode 100644
index 1d9bdc1..0000000
--- a/frontend-pc/src/layout/hooks/useMenu.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { CSSProperties } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import { computed } from 'vue'
-import { eachTree } from 'xe-utils'
-import { useDevice, useRouteListener } from '@/hooks'
-import { useAppStore, useRouteStore } from '@/stores'
-import { filterTree } from '@/utils'
-import { isExternal } from '@/utils/validate'
-
-/**
- * 菜单管理 Hooks
- * 用于获取和处理应用程序的菜单列表
- * 提供菜单的过滤、展平处理等功能
- * @returns {object} 包含处理后菜单列表的响应式对象
- */
-export function useMenu() {
-  const router = useRouter()
-  // 路由存储实例，用于获取原始路由配置
-  const routeStore = useRouteStore()
-  const appStore = useAppStore()
-  const { listenerRouteChange } = useRouteListener()
-  const { isDesktop } = useDevice()
-
-  // 是否折叠菜单
-  const collapsed = computed(() =>
-    !isDesktop.value ? false : appStore.isMenuCollapsed
-  )
-
-  // 菜单触发器配置
-  const menuTriggerProps = {
-    animationName: 'slide-dynamic-origin'
-  }
-
-  // 菜单主题
-  const menuTheme = computed(() => appStore.isMenuDark ? 'dark' : 'light')
-
-  // 获取菜单样式
-  const getMenuStyle = computed(() => {
-    return { backgroundColor: menuTheme.value === 'dark' ? 'var(--color-menu-dark-bg)' : 'var(--color-menu-light-bg)' } as CSSProperties
-  })
-
-  /**
-   * 处理后的菜单列表
-   * 响应式计算属性，当路由配置变化时自动更新，
-   * > hidden:false那么代表这个路由项显示在左侧菜单栏中
-   * > 子项chidren只有一个hidden:false的子元素时, 且alwaysShow为false, 那么这个子项会被展平到父项中
-   * 包含以下处理逻辑：
-   * 1. 深拷贝原始路由配置避免直接修改
-   * 2. 过滤掉设置为隐藏的菜单项
-   * 3. 展平只有一个子项的菜单项（提升用户体验）
-   */
-  const menuList = computed(() => {
-    // 深拷贝路由配置，防止修改原始数据
-    const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
-
-    // 过滤出非隐藏的菜单（meta.hidden !== false）
-    const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
-
-    // 遍历处理菜单树，展平只有一个子项的菜单项
-    eachTree(showMenuList, (i) => {
-      if (i?.children?.length === 1 && i?.meta?.alwaysShow !== true) {
-        if (i.meta) {
-          i.meta.title = i.meta?.title || i.children?.[0]?.meta?.title
-          i.meta.icon = i.meta?.icon || i.children?.[0]?.meta?.icon
-        }
-        i.path = i.children?.[0]?.path
-        delete i.children
-      }
-    })
-    return showMenuList
-  })
-
-  const selectedKeys = ref<string[]>([])
-
-  function handleMenuItemClick(key: string) {
-    if (isExternal(key)) {
-      window.open(key)
-      return
-    }
-    selectedKeys.value = [key]
-    router.push({ path: key })
-  }
-
-  listenerRouteChange(({ to }) => {
-    if (to?.meta?.activeMenu) {
-      selectedKeys.value = [to.meta.activeMenu]
-      return
-    }
-    selectedKeys.value = [to.path]
-  })
-
-  return {
-    menuTheme,
-    getMenuStyle,
-    menuList,
-    menuTriggerProps,
-    selectedKeys,
-    collapsed,
-    handleMenuItemClick
-  }
-}
diff --git a/frontend-pc/src/layout/index.vue b/frontend-pc/src/layout/index.vue
index 24525fb..5d362d6 100644
--- a/frontend-pc/src/layout/index.vue
+++ b/frontend-pc/src/layout/index.vue
@@ -1,45 +1,66 @@
-<!--
-  @file Layout 组件
-  @description 布局根组件，支持默认布局、混合布局和顶部布局三种模式
--->
-<template>
-  <!-- 使用静态组件避免不必要的动态组件切换开销 -->
-  <LayoutMix v-if="appStore.layout === 'mix'" />
-  <LayoutTop v-else-if="appStore.layout === 'top'" />
-  <LayoutColumns v-else-if="appStore.layout === 'columns'" />
-  <LayoutDefault v-else />
-</template>
-
 <script setup lang="ts">
-import { useAppStore } from '@/stores'
+import { NLayout, NLayoutContent, NLayoutHeader, NLayoutSider } from 'naive-ui'
+import { useAppStore } from '@/stores/app'
+import AppHeader from './AppHeader.vue'
+import AppSider from './AppSider.vue'
 
-/** 组件名称 */
-defineOptions({ name: 'Layout' })
-
-// 优化异步组件加载：添加预加载注释，设置合理的加载策略
-const LayoutDefault = defineAsyncComponent({
-  loader: () => import('./LayoutDefault.vue'),
-  delay: 0, // 立即显示加载状态
-  timeout: 10000 // 避免加载超时
-})
-
-// 对于非默认布局，添加预加载
-const LayoutColumns = defineAsyncComponent({
-  loader: () => import('./LayoutColumns.vue'),
-  delay: 0
-})
-
-const LayoutMix = defineAsyncComponent({
-  loader: () => import('./LayoutMix.vue'),
-  delay: 0
-})
-
-const LayoutTop = defineAsyncComponent({
-  loader: () => import('./LayoutTop.vue'),
-  delay: 0
-})
-
-const appStore = useAppStore()
+const app = useAppStore()
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <NLayout class="app-shell" has-sider>
+    <NLayoutSider
+      bordered
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="220"
+      :collapsed="app.collapsed"
+      :native-scrollbar="false"
+      class="app-shell__sider"
+    >
+      <AppSider />
+    </NLayoutSider>
+
+    <NLayout class="app-shell__main">
+      <NLayoutHeader bordered class="app-shell__header">
+        <AppHeader />
+      </NLayoutHeader>
+      <NLayoutContent class="app-shell__content" :native-scrollbar="false">
+        <router-view />
+      </NLayoutContent>
+    </NLayout>
+  </NLayout>
+</template>
+
+<style scoped>
+.app-shell {
+  height: 100vh;
+}
+
+/* 外壳保持纯白（客户 2026-10-09 明确要求还原配色，不要再改成深色/深蓝） */
+.app-shell__sider,
+.app-shell__header {
+  background: #fff;
+}
+
+.app-shell__main {
+  background: var(--xt-bg);
+}
+
+.app-shell__header {
+  height: var(--xt-header-h);
+}
+
+/**
+ * ⚠️ `NLayoutContent` 自带白底（`--n-color`），会把外层 `.app-shell__main` 的灰底盖掉。
+ *    上一版就是这样：**白卡片浮在白底上**，整页看不到任何边界
+ *    （用户原话"每个区域的间隔都不明显"）。这里显式改回灰底。
+ *
+ *    内边距与 `.page-card` 的高度算式共用 `--xt-content-pad`，
+ *    不要在任一侧写死数值 —— 改一处漏一处会让列表页分页器又被裁出可视区。
+ */
+.app-shell__content {
+  padding: var(--xt-content-pad);
+  background: var(--xt-bg);
+}
+</style>
diff --git a/frontend-pc/src/main.ts b/frontend-pc/src/main.ts
index a545a06..be44590 100644
--- a/frontend-pc/src/main.ts
+++ b/frontend-pc/src/main.ts
@@ -1,39 +1,27 @@
-import { Card, Drawer, Modal } from '@arco-design/web-vue'
-// 额外引入 Arco Design Icon图标库
-import ArcoVueIcon from '@arco-design/web-vue/es/icon'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createApp } from 'vue'
-// 状态管理
-import pinia from '@/stores'
 import App from './App.vue'
-// 自定义指令
-import directives from './directives'
 import router from './router'
-// ⚠️ Arco 组件样式必须显式引入：
-//    vite.config.ts 里 ArcoResolver 配了 sideEffect:false（样式不随组件自动引入），
-//    原本靠 @arco-themes/vue-gi-demo 主题包带入；我们换成自己的主题后就没人带了。
-//    不引的后果是「组件能用但完全没样式」，页面直接散架，且构建不报错。
-import '@arco-design/web-vue/dist/arco.css'
-// 导入本项目主题（内部会覆盖 Arco 默认变量）
-import '@/styles/arco-ui/index.less'
-// 使用动画库
-import 'animate.css/animate.min.css'
-// 自定义过渡动画
-import '@/styles/css/transition.css'
-// 导入全局scss主文件
-import '@/styles/index.scss'
-// 注册离线图标集
-import '@/icons/index'
-
-// 对特定组件进行默认配置
-Card.props.bordered = false
+import { useActingTenantStore } from './stores/acting-tenant'
+import { clearToken } from './utils/auth'
+import { setActingTenantHeader, setUnauthorizedHandler } from './utils/http'
+import './styles/index.scss'
 
 const app = createApp(App)
-Modal._context = app._context
-Drawer._context = app._context
-
-app.use(router)
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 app.use(pinia)
-app.use(ArcoVueIcon)
-app.use(directives)
+app.use(router)
+
+// ① 401 的处理交给路由（http 层不 import router，避免循环引用）
+setUnauthorizedHandler(() => {
+  clearToken()
+  const back = encodeURIComponent(router.currentRoute.value.fullPath)
+  void router.replace({ path: '/login', query: { redirect: back } })
+})
+
+// ② 把持久化的"当前学校"推给 http 层（刷新后第一屏请求就要带上它）
+setActingTenantHeader(useActingTenantStore().tenantId)
 
 app.mount('#app')
diff --git a/frontend-pc/src/router/guard/index.ts b/frontend-pc/src/router/guard/index.ts
deleted file mode 100644
index 903d133..0000000
--- a/frontend-pc/src/router/guard/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/** @file 路由守卫配置模块 - 处理路由导航守卫和权限控制 */
-
-import type { Router } from 'vue-router'
-import { setRouteEmitter } from '@/hooks'
-import { setupPermissionGuard } from './setupPermissionGuard'
-
-/**
- * 设置页面路由守卫
- * @description 处理路由变化时的页面级操作，如路由变化事件通知
- * @param router - Vue Router 实例
- */
-export const setupPageGuard = (router: Router) => {
-  router.beforeEach((to, from) => {
-    // 触发路由变化事件，通知所有监听器
-    setRouteEmitter(to, from)
-  })
-}
-
-/**
- * 创建路由守卫
- * @description 统一配置所有路由守卫，包括：
- * 1. 页面路由守卫 - 处理路由变化事件
- * 2. 权限路由守卫 - 处理路由访问权限
- * @param router - Vue Router 实例
- */
-export default function createRouteGuard(router: Router) {
-  // 设置页面路由守卫
-  setupPageGuard(router)
-  // 设置权限路由守卫
-  setupPermissionGuard(router)
-}
diff --git a/frontend-pc/src/router/guard/setupPermissionGuard.ts b/frontend-pc/src/router/guard/setupPermissionGuard.ts
deleted file mode 100644
index 3cafe56..0000000
--- a/frontend-pc/src/router/guard/setupPermissionGuard.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/** @file 路由权限守卫模块 - 处理路由访问权限和动态路由加载 */
-
-import type { RouteLocationNormalized, Router } from 'vue-router'
-import { Message } from '@arco-design/web-vue'
-import { useUserStore } from '@/stores'
-import { getToken } from '@/utils/auth'
-
-/** 免登录白名单路径 */
-const WHITE_LIST = ['/login', '/404']
-
-/** 是否已生成动态路由 */
-let isDynamicRoutesGenerated = false
-
-/**
- * 处理动态路由加载
- * @param router - 路由实例
- * @param to - 目标路由
- */
-async function handleDynamicRoutes(
-  router: Router,
-  to: RouteLocationNormalized
-): Promise<{ path: string, query?: any, replace: boolean }> {
-  const userStore = useUserStore()
-
-  try {
-    await userStore.generateRoutes()
-    // 标记动态路由已生成
-    isDynamicRoutesGenerated = true
-    // 确保路由添加完成后返回目标路由
-    return { ...to, replace: true }
-  } catch (error) {
-    // 发生错误时重置用户状态并跳转登录页
-    userStore.resetToken()
-    const errorMessage = error instanceof Error ? error.message : '路由守卫过程发生错误'
-    Message.error(errorMessage)
-    return { path: `/login`, query: { redirect: to.path }, replace: true }
-  }
-}
-
-/**
- * 初始化路由守卫
- * @param router - 路由实例
- */
-export const setupPermissionGuard = (router: Router): void => {
-  router.beforeEach(async (to, _from, next) => {
-    const token = getToken()
-    const userStore = useUserStore()
-
-    // 已登录状态
-    if (token) {
-      if (to.path === '/login') {
-        // 已登录时访问登录页，直接放行（通常会被重定向到首页）
-        next()
-        return
-      }
-
-      // 只在首次访问或路由未生成时处理动态路由
-      if (!isDynamicRoutesGenerated) {
-        try {
-          const redirectRoute = await handleDynamicRoutes(router, to)
-          next(redirectRoute)
-        } catch {
-          // 如果出错，清空角色信息并重定向到登录页
-          userStore.resetToken()
-          // 重置路由生成标志
-          isDynamicRoutesGenerated = false
-          next(`/login?redirect=${to.path}`)
-        }
-        return
-      }
-
-      // 正常访问
-      next()
-      return
-    }
-
-    // 未登录状态时重置路由生成标志
-    isDynamicRoutesGenerated = false
-
-    if (WHITE_LIST.includes(to.path)) {
-      // 白名单路径直接访问
-      next()
-      return
-    }
-
-    // 其他路径重定向到登录页
-    next('/login')
-  })
-}
diff --git a/frontend-pc/src/router/index.ts b/frontend-pc/src/router/index.ts
index 4a864b9..630f360 100644
--- a/frontend-pc/src/router/index.ts
+++ b/frontend-pc/src/router/index.ts
@@ -1,99 +1,183 @@
-/** @file 路由配置模块 - 处理路由的创建、守卫和重置 */
-
 import type { RouteRecordRaw } from 'vue-router'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import createRouteGuard from '@/router/guard'
-import { useRouteStore } from '@/stores'
+import type { XtMenu } from '@/config/xt-routes'
+import { defineComponent, h } from 'vue'
+import { createRouter, createWebHistory, useRoute } from 'vue-router'
+import { DASHBOARD, XT_MENUS } from '@/config/xt-routes'
+import Layout from '@/layout/index.vue'
+import { useUserStore } from '@/stores/user'
 
-/** 默认布局组件 */
-const Layout = () => import('@/layout/index.vue')
+/**
+ * 路由。
+ *
+ * 两条规则决定了这里的形状：
+ *   1. **"有哪些页面"由前端代码决定，"谁能看"由后端决定**（`/auth/me` 的 menus）。
+ *      所以路由不是后端下发的树，而是本地菜单表按菜单键过滤后注册。
+ *   2. 业务路径都是**绝对路径**（`/collect/task`），统一挂在 `/` 这个 Layout 路由下 ——
+ *      分组只影响左侧菜单的排版，不影响 URL。这样"点菜单 404"这类问题不会出现。
+ */
+
+/** 视图懒加载表：把 component 字符串映射成真正的组件 */
+const viewModules = import.meta.glob('../views/**/*.vue')
+
+/**
+ * 菜单指向了不存在的视图时用的兜底组件。
+ *
+ * ⚠️ 这里**不能抛异常**：注册路由是"登录后一次性把所有可见菜单都注册一遍"，
+ *    抛出去会让**整次登录后的导航全挂**（表现是"登录成功但页面白屏"），
+ *    而真正的原因只是某一个菜单的 `component` 拼错了 —— 一个页面拖垮整个应用，
+ *    排查方向还完全不在这上面。
+ *
+ * 也不能静默显示空白页：那样看起来像"这个页面没数据"。
+ * 所以显示一句明确的话，并在控制台打出正确路径的拼法。
+ */
+const MissingView = defineComponent({
+  name: 'MissingView',
+  setup() {
+    const route = useRoute()
+    return () => h('div', {
+      style: 'margin:24px;padding:20px;border:1px solid #e5e5e5;border-radius:6px;'
+        + 'background:#fff;color:#c0392b;line-height:1.8'
+    }, [
+      h('div', { style: 'font-weight:600' }, '这个菜单指向的页面不存在（开发错误，不是权限问题）'),
+      h('div', { style: 'color:#666;margin-top:8px' }, `当前路径：${route.path}`),
+      h('div', { style: 'color:#666' }, '请检查 src/config/xt-routes.ts 里该菜单的 component 是否与 src/views 下的文件一一对应。')
+    ])
+  }
+})
+
+function loadView(component: string) {
+  const path = `../views/${component}.vue`
+  const loader = viewModules[path]
+  if (!loader) {
+    console.error(`[router] 菜单指向的视图不存在：src/views/${component}.vue`)
+    return MissingView
+  }
+  return loader
+}
 
-/** 基础路由配置 */
 const baseRoutes: RouteRecordRaw[] = [
   {
-    path: '/redirect',
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', anonymous: true }
+  },
+  {
+    path: '/',
+    name: 'Root',
     component: Layout,
-    meta: { hidden: true },
+    redirect: DASHBOARD.path,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index.vue')
+        path: DASHBOARD.path.slice(1),
+        name: DASHBOARD.key,
+        component: loadView(DASHBOARD.component),
+        meta: { title: DASHBOARD.title, icon: DASHBOARD.icon }
       }
     ]
   },
   {
-    path: '/login',
-    component: () => import('@/views/login/index.vue'),
-    meta: { hidden: true }
-  }
-]
-
-/** 错误页面路由配置 */
-const errorRoutes: RouteRecordRaw[] = [
-  {
-    path: '/:pathMatch(.*)*',
-    component: () => import('@/views/error/404.vue'),
-    meta: { hidden: true }
+    path: '/403',
+    name: 'Forbidden',
+    component: () => import('@/views/error/403.vue'),
+    meta: { title: '无权限' }
   },
   {
-    path: '/403',
-    component: () => import('@/views/error/403.vue'),
-    meta: { hidden: true }
+    // ⚠️ **兜底路由绝对不能标 `anonymous: true`**，这里踩过一次：
+    //    "首次进入一个还没注册的动态路由（菜单页）"时，匹配到的**正是这条兜底路由**。
+    //    如果它被当成匿名页放行，守卫就**不会**去 fetchMe + registerMenus ——
+    //    于是动态路由永远建不起来，表现是"直接打开/刷新任何菜单地址都是 404"，
+    //    而在应用内点菜单却一切正常（那时路由已经注册好了）。
+    //    只有"从外部链接进来 / 按 F5"才会暴露，很容易被判成"部署问题"。
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/error/404.vue'),
+    meta: { title: '页面不存在' }
   }
 ]
 
-/** 主页路由配置 */
-const homeRoute: RouteRecordRaw = {
-  path: '/',
-  name: 'Home',
-  component: Layout,
-  redirect: '/dashboard',
-  meta: { hidden: false },
-  children: [
-    {
-      path: '/dashboard',
-      component: () => import('@/views/dashboard/index.vue'),
-      name: 'Dashboard',
-      meta: {
-        title: '工作台',
-        icon: 'icon-park-outline:workbench',
-        affix: true,
-        hidden: false,
-        breadcrumb: false
-      }
-    }
-  ]
-}
-
-/** 静态路由配置 */
-export const constantRoutes: RouteRecordRaw[] = [...baseRoutes, ...errorRoutes, homeRoute]
-
-/** 创建路由实例 */
 const router = createRouter({
-  history: createWebHashHistory(import.meta.env.BASE_URL),
-  routes: constantRoutes,
-  scrollBehavior: () => ({ left: 0, top: 0 })
+  history: createWebHistory(import.meta.env.VITE_BASE || '/'),
+  routes: baseRoutes,
+  scrollBehavior: () => ({ top: 0 })
 })
 
-// 创建路由守卫
-createRouteGuard(router)
+/** 已注册的动态路由（退出登录时要摘掉，否则换个人登录会看到上一个人的菜单） */
+let registered: string[] = []
 
-/** 重置路由配置 - 清除所有动态添加的路由 */
-export function resetRouter(): void {
-  try {
-    const routeStore = useRouteStore()
-    // 移除所有动态路由
-    routeStore.asyncRoutes.forEach((route) => {
-      const { name } = route
-      if (name && router.hasRoute(name)) {
-        router.removeRoute(name)
-      }
-    })
-  } catch (error) {
-    console.error('重置路由失败:', error)
-    // 降级处理：刷新页面以重置路由状态
-    window.location.reload()
+/** 把某个菜单注册成 Layout 的子路由 */
+function registerMenu(menu: XtMenu): void {
+  if (router.hasRoute(menu.key)) {
+    return
+  }
+  router.addRoute('Root', {
+    path: menu.path.slice(1),
+    name: menu.key,
+    component: loadView(menu.component),
+    meta: { title: menu.title, icon: menu.icon, group: menu.group }
+  })
+  registered.push(menu.key)
+}
+
+/** 按菜单键注册动态路由（登录后调用；重复调用是幂等的） */
+export function registerMenus(menuKeys: string[]): void {
+  const keys = new Set(menuKeys ?? [])
+  for (const menu of XT_MENUS) {
+    if (keys.has(menu.key)) {
+      registerMenu(menu)
+    }
   }
 }
 
+/** 摘掉全部动态路由（退出登录时调用） */
+export function resetMenus(): void {
+  for (const name of registered) {
+    if (router.hasRoute(name)) {
+      router.removeRoute(name)
+    }
+  }
+  registered = []
+}
+
+// ── 守卫 ────────────────────────────────────────────
+
+router.beforeEach(async (to) => {
+  const user = useUserStore()
+
+  if (to.meta.anonymous) {
+    return true
+  }
+
+  if (!user.token) {
+    return { path: '/login', query: { redirect: to.fullPath } }
+  }
+
+  // 刷新页面后 pinia 里没有档案，先补回来（同时拿到菜单键）
+  if (!user.loaded) {
+    try {
+      await user.fetchMe()
+      registerMenus(user.menus)
+      // 动态路由刚注册完，当前这次导航还匹配在 404 兜底上 → 用**路径**重新走一遍。
+      //
+      // ⚠️ 不能写 `return { ...to, replace: true }`：`to` 里带着 `name: 'NotFound'`
+      //    （因为首次匹配时动态路由还不存在，命中的就是兜底路由），
+      //    而 Vue Router 在同时有 name 与 path 时**按 name 匹配** ——
+      //    于是"重试"又落到 404，表现为**刷新页面或从外部链接进来时菜单页全是 404**，
+      //    而在应用内点击菜单却正常（那时路由已经注册好了）。
+      //    这个 bug 只有"直接打开一个菜单地址"才会暴露。
+      return { path: to.fullPath, replace: true }
+    } catch {
+      await user.logout()
+      return { path: '/login', query: { redirect: to.fullPath } }
+    }
+  }
+
+  return true
+})
+
+router.afterEach((to) => {
+  const title = (to.meta.title as string | undefined) ?? ''
+  document.title = title ? `${title} · 深学在线` : '深学在线'
+})
+
 export default router
diff --git a/frontend-pc/src/stores/acting-tenant.ts b/frontend-pc/src/stores/acting-tenant.ts
new file mode 100644
index 0000000..86dce49
--- /dev/null
+++ b/frontend-pc/src/stores/acting-tenant.ts
@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { setActingTenantHeader } from '@/utils/http'
+
+/**
+ * 平台运营的「当前学校」。
+ *
+ * ## 为什么需要它
+ * 平台运营（`tenantId = 0`）是唯一跨租户的身份，服务端的租户拦截器因此对它
+ * **整个关掉了租户过滤**。于是「组织架构」「账号管理」这类**本来就是租户内**的页面，
+ * 在平台账号下拿到的是**所有租户混在一起**的数据 —— 而且看不出错：
+ * 只有一所学校有数据时，它和学校管理员看到的完全一样。
+ *
+ * 所以平台要代管某所学校时必须**显式指明是哪一所**：带上 `X-Tenant-Id`
+ * （见 `@/utils/http` 的 `setActingTenantHeader`），服务端会把本次请求的租户上下文
+ * 换成目标租户，之后过滤、归属、权限判定都按"我就是那所学校"走。
+ *
+ * ## 三条约定
+ * 1. **只有平台运营选它**（学校管理员的租户由 token 决定，服务端会忽略这个头）。
+ * 2. **放在 store 而不是各页面 `ref`**：否则切页面要重选，
+ *    更糟的是两个页面各看一所学校，看起来像数据不一致。
+ * 3. 退出登录时清掉（属于上一次身份的上下文）。
+ */
+export const useActingTenantStore = defineStore('acting-tenant', () => {
+  const tenantId = ref<number | null>(null)
+  const tenantName = ref<string>('')
+
+  function set(id: number | null, name = ''): void {
+    tenantId.value = id
+    tenantName.value = name
+    // 推给 http 层（方向固定：store → http，避免循环引用）
+    setActingTenantHeader(id)
+  }
+
+  function clear(): void {
+    set(null, '')
+  }
+
+  return { tenantId, tenantName, set, clear }
+}, {
+  persist: {
+    key: 'xt-acting-tenant',
+    storage: localStorage
+  }
+})
diff --git a/frontend-pc/src/stores/app.ts b/frontend-pc/src/stores/app.ts
new file mode 100644
index 0000000..1c8ed4c
--- /dev/null
+++ b/frontend-pc/src/stores/app.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/** 界面状态（与业务无关的那些） */
+export const useAppStore = defineStore('app', () => {
+  /** 左侧菜单是否折叠 */
+  const collapsed = ref(false)
+
+  function toggleCollapse(): void {
+    collapsed.value = !collapsed.value
+  }
+
+  return { collapsed, toggleCollapse }
+}, {
+  persist: {
+    key: 'xt-app',
+    storage: localStorage
+  }
+})
diff --git a/frontend-pc/src/stores/index.ts b/frontend-pc/src/stores/index.ts
deleted file mode 100644
index e05e0e5..0000000
--- a/frontend-pc/src/stores/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-
-export * from './useActingTenantStore'
-export * from './useAppStore'
-export * from './useDictStore'
-export * from './useMenuBadgeStore'
-export * from './useRouteStore'
-export * from './useTabsStore'
-export * from './useUserStore'
-
-const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate)
-
-export default pinia
diff --git a/frontend-pc/src/stores/useActingTenantStore.ts b/frontend-pc/src/stores/useActingTenantStore.ts
deleted file mode 100644
index fed823e..0000000
--- a/frontend-pc/src/stores/useActingTenantStore.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-/**
- * 平台运营的「当前学校」。
- *
- * ## 为什么要有这个状态
- *
- * 平台运营（`tenantId = 0`）是唯一跨租户的身份，服务端的租户过滤对它整体关闭。
- * 所以「组织架构」「账号管理」这类**本身就是租户内**的页面，平台必须先指明看哪所学校 ——
- * 否则拿到的是所有租户混在一起的数据，而且看不出错。
- *
- * 这个值是**跟着请求走的**（`X-Tenant-Id` 请求头，见 `@/apis/xt/acting-tenant`），
- * 不是登录态的一部分：token 里的 tenantId 始终是 0。
- *
- * ## 为什么放在 store 而不是各页面自己 `ref`
- *
- * 两个页面都要用同一个选择。各写一份的话，用户在「组织架构」选了学校、
- * 切到「账号管理」又得重选一次 —— 而更糟的是**看起来像是两所学校的数据不一致**。
- *
- * ⚠️ `persist: false`：刷新页面就忘掉。这是刻意的 ——
- * 一个跨越登录会话的"当前学校"会在下次登录时静默生效，
- * 而那时候用户心里想的可能是另一所学校。
- */
-const storeSetup = () => {
-  /** 当前代管的租户 id；`undefined` = 未选择（此时不应请求租户内数据） */
-  const tenantId = ref<number | undefined>(undefined)
-
-  const setTenant = (id?: number) => {
-    tenantId.value = id
-  }
-
-  const clear = () => {
-    tenantId.value = undefined
-  }
-
-  return { tenantId, setTenant, clear }
-}
-
-export const useActingTenantStore = defineStore('actingTenant', storeSetup, { persist: false })
diff --git a/frontend-pc/src/stores/useAppStore.ts b/frontend-pc/src/stores/useAppStore.ts
deleted file mode 100644
index 3fb6e8f..0000000
--- a/frontend-pc/src/stores/useAppStore.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, reactive, toRefs } from 'vue'
-import defaultSettings from '@/config/setting.json'
-
-/**
- * App Store 的核心设置逻辑
- */
-const storeSetup = () => {
-  // 初始化 App 配置
-  const settingConfig = reactive({ ...defaultSettings }) as App.SettingConfig
-
-  /**
-   * 计算页面切换动画类名
-   * 根据配置决定是否启用动画以及使用哪种动画模式
-   */
-  const pageTransitionName = computed(() =>
-    settingConfig.isTransitionEnabled ? settingConfig.transitionName : ''
-  )
-
-  /**
-   * 设置菜单折叠状态
-   * @param collapsed - 是否折叠
-   */
-  const setMenuCollapse = (collapsed: boolean) => {
-    settingConfig.isMenuCollapsed = collapsed
-  }
-
-  /** 恢复为 setting.json 中的默认配置 */
-  const resetSettings = () => {
-    Object.assign(settingConfig, defaultSettings)
-  }
-
-  return {
-    ...toRefs(settingConfig),
-    pageTransitionName,
-    setMenuCollapse,
-    resetSettings
-  }
-}
-
-// 创建并导出 App Store，启用持久化存储
-export const useAppStore = defineStore('app', storeSetup, { persist: true })
diff --git a/frontend-pc/src/stores/useDictStore.ts b/frontend-pc/src/stores/useDictStore.ts
deleted file mode 100644
index da72542..0000000
--- a/frontend-pc/src/stores/useDictStore.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { SelectOptionData } from '@arco-design/web-vue'
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { getDictData as getDictDataApi } from '@/apis/system/dict'
-
-/**
- * 字典数据类型定义
- */
-type DictDataMap = Record<string, SelectOptionData[]>
-
-/**
- * 字典 Store 的核心设置逻辑
- * 用于管理系统字典数据的状态
- */
-const storeSetup = () => {
-  /**
-   * 存储字典数据的响应式对象
-   * key: 字典类型
-   * value: 字典选项数组
-   */
-  const dictData = ref<DictDataMap>({})
-
-  /**
-   * 获取字典数据
-   * 从后端 API 获取字典数据并更新到 store 中
-   * @throws 当 API 请求失败时抛出错误
-   */
-  const getDictData = async () => {
-    try {
-      const res = await getDictDataApi()
-      if (res?.data) {
-        dictData.value = res.data
-      }
-    } catch (error) {
-      console.error('获取字典数据失败:', error)
-      throw error
-    }
-  }
-
-  /**
-   * 获取指定类型的字典数据
-   * @param dictType - 字典类型
-   * @returns 对应类型的字典选项数组，如果不存在则返回空数组
-   */
-  const getDictOptions = (dictType: string): SelectOptionData[] => {
-    return dictData.value[dictType] || []
-  }
-
-  /**
-   * 重置字典数据
-   * 清空所有已加载的字典数据
-   */
-  const resetDict = () => {
-    dictData.value = {}
-  }
-
-  return {
-    dictData,
-    getDictData,
-    getDictOptions,
-    resetDict
-  }
-}
-
-// 创建并导出字典 Store，不启用持久化存储
-export const useDictStore = defineStore('dict', storeSetup, { persist: false })
diff --git a/frontend-pc/src/stores/useMenuBadgeStore.ts b/frontend-pc/src/stores/useMenuBadgeStore.ts
deleted file mode 100644
index dfddea5..0000000
--- a/frontend-pc/src/stores/useMenuBadgeStore.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { BadgeInstance } from '@arco-design/web-vue'
-import { defineStore } from 'pinia'
-
-const storeSetup = () => {
-  // 菜单角标
-  const badgeMap: Record<string, number> = reactive({
-    '/crud/index': 6,
-    '/form/base': 3,
-    '/form/step': 5,
-    '/table/dialog': 8
-  })
-
-  // 菜单角标属性
-  const BadgePropsMap: Record<string, BadgeInstance['$props']> = {
-    '/crud/index': {
-      status: 'success'
-    },
-    '/form/base': {
-      style: 'transform: scale(0.8);'
-    },
-    '/form/step': {
-      style: { transform: 'scale(0.8)' },
-      class: 'g-badge-primary'
-    },
-    '/table/dialog': {
-      style: { transform: 'scale(0.8)' },
-      class: 'g-badge-success'
-    }
-  }
-
-  return { badgeMap, BadgePropsMap }
-}
-
-export const useMenuBadgeStore = defineStore('menu-badge', storeSetup)
diff --git a/frontend-pc/src/stores/useRouteStore.ts b/frontend-pc/src/stores/useRouteStore.ts
deleted file mode 100644
index 1c19d82..0000000
--- a/frontend-pc/src/stores/useRouteStore.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * @file 路由状态管理模块
- * @description 处理动态路由的加载、格式化和状态管理
- */
-
-import type { RouteRecordRaw } from 'vue-router'
-import type { UserRouteItem } from '@/apis/user'
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { mapTree } from 'xe-utils'
-import { constantRoutes } from '@/router'
-import { transformPathToName } from '@/utils'
-
-/**
- * 布局组件
- * 用于页面整体布局结构
- */
-const Layout = () => import('@/layout/index.vue')
-
-/**
- * 视图模块映射
- * 自动导入 views 目录下的所有 .vue 文件
- * 用于动态加载路由组件
- */
-const modules = import.meta.glob('@/views/**/*.vue')
-
-/**
- * 组件路径映射缓存
- * 将视图路径映射到对应的模块加载函数，避免每次遍历查找
- * key: 视图路径（如 'system/user/index'）
- * value: 模块加载函数
- */
-const viewPathMap = new Map<string, () => Promise<any>>()
-
-/**
- * 初始化组件路径映射
- * @description 在模块加载时构建路径映射表，提升查找效率
- */
-function initViewPathMap() {
-  if (viewPathMap.size > 0) return // 已初始化则跳过
-
-  for (const path in modules) {
-    // 提取视图路径：从 'src/views/system/user/index.vue' 提取 'system/user/index'
-    const dir = path.split('views/')[1]?.split('.vue')[0]
-    if (dir) {
-      viewPathMap.set(dir, () => modules[path]())
-    }
-  }
-}
-
-// 初始化路径映射
-initViewPathMap()
-
-/**
- * 加载视图组件
- * @description 根据路径加载对应的视图组件，使用 Map 缓存提升查找效率
- * @param {string} view - 组件路径（相对于 views 目录）
- * @returns {Function|undefined} 返回组件的加载函数或 undefined
- * @example
- * loadView('system/user/index')
- */
-export const loadView = (view: string) => {
-  return viewPathMap.get(view)
-}
-
-/**
- * 转换组件标识为实际组件
- * @description 将字符串类型的组件标识转换为实际的组件
- * @param {string} component - 组件标识
- * @returns {Function} 返回组件的加载函数
- * @example
- * transformComponentView('Layout')
- * transformComponentView('system/user/index')
- */
-const transformComponentView = (component: string) => {
-  if (component === 'Layout') {
-    return Layout as never
-  } else {
-    return loadView(component) as never
-  }
-}
-
-/**
- * 格式化异步路由配置
- * @description 处理后端返回的菜单数据，转换为路由配置
- * @param {MenuItem[]} menus - 后端返回的菜单数据（已经过权限过滤）
- * @returns {RouteRecordRaw[]} 返回格式化后的路由配置数组
- *
- * @remarks
- * 1. 对菜单数据进行排序（根据 sort 字段）
- * 2. 将字符串类型的组件标识转换为实际组件
- * 3. 处理路由元数据（meta）
- *
- * @example
- * const routes = formatAsyncRoutes([
- *   {
- *     path: '/system',
- *     component: 'Layout',
- *     children: [...]
- *   }
- * ])
- */
-const formatAsyncRoutes = (menus: UserRouteItem[]) => {
-  if (!menus.length) return []
-
-  // 对顶层菜单进行排序
-  menus.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0))
-
-  // 使用 mapTree 递归处理菜单树
-  const routes = mapTree(menus, (item) => {
-    // 对子菜单进行排序
-    if (item.children && item.children.length) {
-      item.children.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0))
-    }
-
-    // 转换为路由配置
-    return {
-      path: item.path,
-      name: transformPathToName(item.path),
-      component: item.component ? transformComponentView(item.component) : undefined,
-      redirect: item.redirect,
-      meta: {
-        hidden: item.hidden, // 是否在菜单中隐藏
-        keepAlive: item.keepAlive, // 是否缓存该路由
-        title: item.title, // 路由标题，用于显示在菜单和标签页
-        icon: item.icon, // 图标
-        affix: item.affix, // 是否固定在标签页
-        breadcrumb: item.breadcrumb, // 是否显示在面包屑
-        showInTabs: item.showInTabs, // 是否显示在标签页
-        activeMenu: item.activeMenu, // 激活的菜单项
-        alwaysShow: item.alwaysShow // 是否总是显示
-      }
-    }
-  })
-  return routes as RouteRecordRaw[]
-}
-
-/**
- * 路由状态管理的核心逻辑
- * @description 管理路由相关的状态和操作
- */
-const storeSetup = () => {
-  /**
-   * 所有路由配置
-   * 包含常驻路由和动态路由
-   */
-  const routes = ref<RouteRecordRaw[]>([])
-
-  /**
-   * 动态路由配置
-   * 根据用户权限动态生成的路由
-   */
-  const asyncRoutes = ref<RouteRecordRaw[]>([])
-
-  /**
-   * 合并路由配置
-   * @description 将动态路由与常驻路由合并
-   * @param {RouteRecordRaw[]} data - 动态路由配置
-   */
-  const setRoutes = (data: UserRouteItem[]) => {
-    const formattedRoutes = formatAsyncRoutes(data)
-    routes.value = constantRoutes.concat(formattedRoutes)
-    asyncRoutes.value = formattedRoutes
-  }
-
-  return {
-    routes,
-    asyncRoutes,
-    setRoutes
-  }
-}
-
-/**
- * 路由状态管理 Store
- * @description 创建路由相关的状态管理 store，启用持久化存储
- */
-export const useRouteStore = defineStore('route', storeSetup, { persist: true })
diff --git a/frontend-pc/src/stores/useTabsStore.ts b/frontend-pc/src/stores/useTabsStore.ts
deleted file mode 100644
index b4e9767..0000000
--- a/frontend-pc/src/stores/useTabsStore.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-/**
- * @file 标签页状态管理模块
- * @description 处理标签页（Tabs）的状态管理，包括页签的增删改查和缓存控制
- */
-
-import type { RouteLocationNormalized, RouteRecordName } from 'vue-router'
-import { defineStore } from 'pinia'
-import { nextTick, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-/**
- * 标签页 Store 的核心设置逻辑
- * @description 管理标签页相关的状态和操作
- */
-const storeSetup = () => {
-  const router = useRouter()
-
-  /**
-   * 标签页列表
-   * 存储当前打开的所有标签页
-   */
-  const tabList = ref<RouteLocationNormalized[]>([])
-
-  /**
-   * 缓存组件列表
-   * 存储需要被 keep-alive 缓存的组件名称
-   */
-  const cacheList = ref<RouteRecordName[]>([])
-
-  /**
-   * 页面重载标志
-   * 用于控制页面的重新加载
-   */
-  const reloadFlag = ref(true)
-
-  /**
-   * 判断是否为首页
-   */
-  const isHomePath = (path: string) => path === '/' || path === '/home'
-
-  /**
-   * 获取所有固定标签页
-   * @description 从路由中筛选出所有 affix: true 的固定标签页，首页排在最前面
-   */
-  const getAffixTabs = (): RouteLocationNormalized[] => {
-    const tabs = router
-      .getRoutes()
-      .filter((route) => route.meta?.affix)
-      .map((route) => route as unknown as RouteLocationNormalized)
-    // 首页排在最前面
-    tabs.sort((a, b) => Number(isHomePath(b.path)) - Number(isHomePath(a.path)))
-    return tabs
-  }
-
-  /**
-   * 更新缓存列表
-   */
-  const updateCache = (name: RouteRecordName | null | undefined, keepAlive: boolean | undefined) => {
-    if (!name) return
-    const hasCache = cacheList.value.includes(name)
-    if (keepAlive && !hasCache) {
-      cacheList.value.push(name)
-    } else if (!keepAlive && hasCache) {
-      const index = cacheList.value.findIndex((n) => n === name)
-      if (index >= 0) cacheList.value.splice(index, 1)
-    }
-  }
-
-  /**
-   * 添加标签页
-   * @description 添加新的标签页，如果已存在则更新，同时处理缓存
-   */
-  const addTabItem = (item: RouteLocationNormalized) => {
-    const index = tabList.value.findIndex((i) => i.path === item.path)
-
-    if (index >= 0) {
-      // 更新已存在的标签页
-      if (tabList.value[index].fullPath !== item.fullPath) {
-        tabList.value[index] = item
-      }
-      updateCache(item.name, item.meta?.keepAlive)
-    } else if (item.meta?.showInTabs ?? true) {
-      // 添加新标签页
-      tabList.value.push(item)
-      updateCache(item.name, item.meta?.keepAlive)
-    }
-  }
-
-  /**
-   * 设置标签页标题
-   */
-  const setTabTitle = (title: string): boolean => {
-    if (!title) return false
-    const route = router.currentRoute.value
-    const path = route?.fullPath || route.path
-    const tab = tabList.value.find((i) => i.fullPath === path)
-    if (tab) {
-      tab.meta.title = title
-      return true
-    }
-    return false
-  }
-
-  /**
-   * 删除标签页并清理缓存
-   */
-  const removeTabByIndex = (index: number) => {
-    if (index < 0 || index >= tabList.value.length) return
-    const item = tabList.value[index]
-    updateCache(item.name, false) // 删除缓存
-    tabList.value.splice(index, 1)
-  }
-
-  /**
-   * 跳转到指定标签页
-   */
-  const jumpToTab = (path: string) => {
-    const tab = tabList.value.find((t) => t.path === path) ?? tabList.value[0]
-    if (tab) router.push(tab.fullPath || tab.path)
-  }
-
-  /**
-   * 获取固定标签页的缓存列表
-   */
-  const getAffixCacheList = (tabs: RouteLocationNormalized[]) => {
-    return tabs.filter((tab) => tab.name && tab.meta?.keepAlive).map((tab) => tab.name!)
-  }
-
-  /**
-   * 统一关闭标签页方法
-   * @description 根据类型关闭标签页：left(左侧)、right(右侧)、other(其他)、all(全部)、current(当前)
-   */
-  const close = (type: string, path?: string) => {
-    const currentPath = router.currentRoute.value.path
-    const targetPath = path || currentPath
-    const targetIndex = tabList.value.findIndex((i) => i.path === targetPath)
-
-    // 关闭所有
-    if (type === 'all') {
-      const affixTabs = getAffixTabs()
-      tabList.value = affixTabs
-      cacheList.value = getAffixCacheList(affixTabs)
-      router.push('/')
-      return
-    }
-
-    // 关闭当前
-    if (type === 'current') {
-      if (targetIndex < 0 || tabList.value[targetIndex].meta?.affix) return
-      removeTabByIndex(targetIndex)
-      // at(-1) 可能是 undefined —— 上面的 length 判断在类型层面窄化不了它，
-      // 所以这里要真的接住 undefined 再取 path（严格模式下是 TS2532）
-      const last = tabList.value.at(-1)
-      if (currentPath === targetPath && last) {
-        jumpToTab(last.path)
-      }
-      return
-    }
-
-    if (targetIndex < 0) return
-
-    // 关闭左侧
-    if (type === 'left') {
-      for (let i = targetIndex - 1; i >= 0; i--) {
-        if (!tabList.value[i].meta?.affix) removeTabByIndex(i)
-      }
-      return
-    }
-
-    // 关闭右侧
-    if (type === 'right') {
-      const currentIndex = tabList.value.findIndex((t) => t.path === currentPath)
-      const willDeleteCurrent = currentIndex > targetIndex && !tabList.value[currentIndex]?.meta?.affix
-
-      for (let i = tabList.value.length - 1; i > targetIndex; i--) {
-        if (!tabList.value[i].meta?.affix) removeTabByIndex(i)
-      }
-
-      if (willDeleteCurrent && tabList.value.length) {
-        jumpToTab(tabList.value[targetIndex].path)
-      }
-      return
-    }
-
-    // 关闭其他
-    if (type === 'other') {
-      for (let i = tabList.value.length - 1; i >= 0; i--) {
-        const item = tabList.value[i]
-        if (item.path !== targetPath && !item.meta?.affix) {
-          removeTabByIndex(i)
-        }
-      }
-      const currentExists = tabList.value.some((t) => t.path === currentPath)
-      if (!currentExists && tabList.value.length) {
-        jumpToTab(targetPath)
-      }
-    }
-  }
-
-  /**
-   * 重置标签页状态
-   * @description 清空标签页和缓存列表，保留固定标签页及其缓存
-   */
-  const reset = () => {
-    const affixTabs = getAffixTabs()
-    tabList.value = affixTabs
-    cacheList.value = getAffixCacheList(affixTabs)
-  }
-
-  /**
-   * 初始化标签页
-   * @description 初始化标签页状态，如果没有非固定标签页则重置
-   */
-  const init = () => {
-    if (tabList.value.some((i) => !i?.meta?.affix)) return
-    reset()
-  }
-
-  /**
-   * 重新加载当前页面
-   * @description 清除当前页面的缓存并重新加载
-   */
-  const reloadPage = () => {
-    const route = router.currentRoute.value
-    if (!route.name) return
-
-    updateCache(route.name, false) // 删除缓存
-    reloadFlag.value = false
-
-    nextTick(() => {
-      reloadFlag.value = true
-      updateCache(route.name, route.meta?.keepAlive) // 重新添加缓存
-    })
-  }
-
-  return {
-    tabList,
-    cacheList,
-    reloadFlag,
-    addTabItem,
-    setTabTitle,
-    close,
-    reset,
-    init,
-    reloadPage
-  }
-}
-
-/**
- * 标签页状态管理 Store
- * @description 创建标签页相关的状态管理 store，使用 sessionStorage 进行持久化存储
- */
-export const useTabsStore = defineStore('tabs', storeSetup, { persist: true })
diff --git a/frontend-pc/src/stores/useUserStore.ts b/frontend-pc/src/stores/useUserStore.ts
deleted file mode 100644
index b0bc34d..0000000
--- a/frontend-pc/src/stores/useUserStore.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-/** @file 用户状态管理模块 - 处理用户登录、权限和信息管理 */
-
-import type { UserInfo } from '@/apis/user'
-import type { LoginVO } from '@/apis/xt'
-import { defineStore } from 'pinia'
-import { computed, reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { getMe, login as loginApi, logout as logoutApi } from '@/apis/xt'
-import { buildXtRoutes } from '@/config/xt-routes'
-import { resetRouter } from '@/router'
-import { clearToken, getToken, setToken } from '@/utils/auth'
-import { isHttp } from '@/utils/validate'
-import { useActingTenantStore } from './useActingTenantStore'
-import { useRouteStore } from './useRouteStore'
-
-/** 登录参数：password 必须是 RSA 加密后的密文（见 @/utils/rsa） */
-type LoginParams = Parameters<typeof loginApi>[0]
-
-/**
- * 用户 Store 的核心设置逻辑
- *
- * 与模板原版的差别只有数据来源：模板调 `/user/login` 等 mock 接口，
- * 这里改调本项目的 `/auth/login`（《03-接口设计》§5）。
- * 内部状态形状保持不变，`v-hasPerm` 指令、布局、标签页都不用改。
- */
-const storeSetup = () => {
-  const routeStore = useRouteStore()
-  const router = useRouter()
-
-  /** 用户基本信息（形状对齐模板的 UserInfo） */
-  const userInfo: UserInfo = reactive({
-    id: '',
-    nickname: '',
-    avatar: '',
-    roles: [],
-    permissions: []
-  })
-
-  /** 后端返回的原始档案，用于展示租户名等模板没有的字段 */
-  const profile = ref<LoginVO | null>(null)
-
-  /** 菜单键集合（决定左侧导航） */
-  const menuKeys = ref<string[]>([])
-
-  /** 用户昵称 */
-  const name = computed(() => userInfo.nickname)
-  /** 用户头像 */
-  const avatar = computed(() => userInfo.avatar)
-  /** 用户角色列表 */
-  const roles = computed(() => userInfo.roles)
-  /** 用户权限列表 */
-  const permissions = computed(() => userInfo.permissions)
-  /** 用户令牌 */
-  const token = ref(getToken() || '')
-  /** 所属租户名（侧栏/顶栏展示用） */
-  const tenantName = computed(() => profile.value?.tenant?.tenantName ?? '')
-  /** 主角色中文名 */
-  const roleLabel = computed(() => profile.value?.roleCodes?.[0] ?? '')
-
-  /** 重置用户令牌 - 清除令牌并重置路由权限标志 */
-  const resetToken = () => {
-    token.value = ''
-    clearToken()
-  }
-
-  /** 把后端返回的 LoginVO 落到模板内部的状态上 */
-  const applyProfile = (vo: LoginVO) => {
-    profile.value = vo
-    userInfo.id = String(vo.user?.id ?? '')
-    userInfo.nickname = vo.user?.realName ?? ''
-    userInfo.avatar = vo.user?.avatarUrl ?? ''
-    userInfo.roles = vo.roleCodes ?? []
-    userInfo.permissions = vo.permissions ?? []
-    menuKeys.value = vo.menus ?? []
-  }
-
-  /**
-   * 用户登录
-   * @param params 含 RSA 加密后的密码
-   */
-  const login = async (params: LoginParams): Promise<void> => {
-    const res = await loginApi(params)
-    const vo = res.data
-    if (!vo?.token) {
-      throw new Error('服务端未返回 token')
-    }
-    setToken(vo.token)
-    token.value = vo.token
-    // 登录响应已带 user/tenant/roleCodes/menus/permissions，直接落库，省一次 /auth/me 往返
-    applyProfile(vo)
-  }
-
-  /** 用户退出 */
-  const logout = async (): Promise<boolean> => {
-    try {
-      await logoutApi()
-    } catch {
-      // 登出失败也要清本地状态：否则用户会卡在"点了登出但还是登录着"
-    } finally {
-      token.value = ''
-      resetToken()
-      resetRouter()
-      profile.value = null
-      menuKeys.value = []
-      // 平台运营的"当前学校"属于**上一次身份**的上下文，退出时一起清掉：
-      // 留着它，下一个登录的人（可能是学校管理员）会继承一个自己没选过的租户
-      useActingTenantStore().clear()
-    }
-    return true
-  }
-
-  /** 获取用户信息（刷新页面后靠它恢复状态） */
-  const fetchUserInfo = async (): Promise<boolean> => {
-    const res = await getMe()
-    applyProfile(res.data)
-    return true
-  }
-
-  /**
-   * 生成动态路由
-   *
-   * 模板原版是直接取后端下发的路由树；本项目后端只下发**菜单键**，
-   * 所以这里在本地路由表（@/config/xt-routes）上做一次过滤。
-   * 这样"有哪些页面"由前端代码掌控，"谁能看"由后端掌控，两边职责清晰。
-   */
-  const generateRoutes = async (): Promise<boolean> => {
-    // 已登录但刷新过页面时，profile 是空的，先补回来
-    if (!menuKeys.value.length) {
-      await fetchUserInfo()
-    }
-    routeStore.setRoutes(buildXtRoutes(menuKeys.value))
-    routeStore.asyncRoutes.forEach((item) => {
-      if (!isHttp(item.path)) {
-        router.addRoute(item)
-      }
-    })
-    return true
-  }
-
-  return {
-    userInfo,
-    profile,
-    menuKeys,
-    name,
-    avatar,
-    roles,
-    permissions,
-    token,
-    tenantName,
-    roleLabel,
-    login,
-    logout,
-    fetchUserInfo,
-    resetToken,
-    generateRoutes
-  }
-}
-
-/**
- * 用户状态管理 Store
- * @description 创建用户相关的状态管理 store，使用 localStorage 进行持久化存储
- */
-export const useUserStore = defineStore('user', storeSetup, {
-  persist: {
-    pick: ['token'],
-    storage: localStorage
-  }
-})
diff --git a/frontend-pc/src/stores/user.ts b/frontend-pc/src/stores/user.ts
new file mode 100644
index 0000000..933fb23
--- /dev/null
+++ b/frontend-pc/src/stores/user.ts
@@ -0,0 +1,121 @@
+import type { LoginReq, LoginVO } from '@/apis/xt'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { getMe, login as loginApi, logout as logoutApi } from '@/apis/xt'
+import { clearToken, getToken, setToken } from '@/utils/auth'
+import { useActingTenantStore } from './acting-tenant'
+
+/**
+ * 当前登录用户。
+ *
+ * 数据全部来自后端：`/auth/login` 与 `/auth/me` 返回的 `LoginVO`
+ * （user / tenant / roleCodes / menus / permissions）。前端**不自己推断**
+ * 菜单与权限 —— 那样会与后端漂移，而不一致的表现是"按钮显示出来了、点了报 40301"。
+ */
+export const useUserStore = defineStore('user', () => {
+  const token = ref(getToken())
+  const profile = ref<LoginVO | null>(null)
+  /** 是否已经从后端拿到过档案（路由守卫据此决定要不要补） */
+  const loaded = ref(false)
+
+  const name = computed(() => profile.value?.user?.realName ?? '')
+  const username = computed(() => profile.value?.user?.username ?? '')
+  const avatar = computed(() => profile.value?.user?.avatarUrl ?? '')
+  const tenantName = computed(() => profile.value?.tenant?.tenantName ?? '')
+  const tenantId = computed(() => profile.value?.tenant?.id ?? profile.value?.user?.orgId ?? null)
+  const userType = computed(() => profile.value?.user?.userType ?? null)
+  const roles = computed(() => profile.value?.roleCodes ?? [])
+  const menus = computed(() => profile.value?.menus ?? [])
+  const permissions = computed(() => profile.value?.permissions ?? [])
+
+  /** 平台运营身份（决定"先选学校"这类交互） */
+  const isPlatform = computed(() => roles.value.includes('PLATFORM_ADMIN'))
+  /** 是否租户级管理员（user_type = 2，与后端 LoginUser.isTenantAdmin 同一口径） */
+  const isTenantAdmin = computed(() => userType.value === 2)
+
+  /** 有某个权限码？ */
+  function has(code: string): boolean {
+    return permissions.value.includes(code)
+  }
+
+  /** 有其中任意一个权限码？ */
+  function hasAny(...codes: string[]): boolean {
+    return codes.some((c) => permissions.value.includes(c))
+  }
+
+  function apply(vo: LoginVO): void {
+    profile.value = vo
+    loaded.value = true
+  }
+
+  /**
+   * 登录。
+   *
+   * ⚠️ 入参类型直接用接口契约里的 {@link LoginReq}（而不是手写一份字段）：
+   *    登录页要传 `tenantCode`（账号在多个单位下重名时）以及**连续失败 2 次后的图形验证码**
+   *    `captchaKey` / `captchaCode`。手写一份子集会让登录页在传验证码时 typecheck 报错，
+   *    而"少一个字段"在运行期只是"验证码没用上"，很难查。
+   */
+  async function login(payload: LoginReq): Promise<void> {
+    const vo = await loginApi(payload)
+    if (!vo?.token) {
+      throw new Error('服务端未返回 token')
+    }
+    setToken(vo.token)
+    token.value = vo.token
+    // 登录响应已带 user/tenant/roleCodes/menus/permissions，直接落库，省一次 /auth/me 往返
+    apply(vo)
+  }
+
+  async function fetchMe(): Promise<void> {
+    apply(await getMe())
+  }
+
+  async function logout(): Promise<void> {
+    try {
+      await logoutApi()
+    } catch {
+      // 登出失败也要清本地：否则用户会卡在"点了登出但还是登录着"
+    } finally {
+      clearToken()
+      token.value = ''
+      profile.value = null
+      loaded.value = false
+      // 动态 import：静态引 `@/router` 会形成 router → layout → stores → router 的环。
+      // 退出登录只发生一次，这点动态开销换来的是"依赖方向单向"。
+      const { resetMenus } = await import('@/router')
+      resetMenus()
+      // 平台运营的"当前学校"属于**上一次身份**的上下文，退出时一起清掉：
+      // 留着它，下一个登录的人（可能是学校管理员）会继承一个自己没选过的租户
+      useActingTenantStore().clear()
+    }
+  }
+
+  return {
+    token,
+    profile,
+    loaded,
+    name,
+    username,
+    avatar,
+    tenantName,
+    tenantId,
+    userType,
+    roles,
+    menus,
+    permissions,
+    isPlatform,
+    isTenantAdmin,
+    has,
+    hasAny,
+    login,
+    fetchMe,
+    logout
+  }
+}, {
+  persist: {
+    key: 'xt-user',
+    pick: ['token'],
+    storage: localStorage
+  }
+})
diff --git a/frontend-pc/src/styles/animated.scss b/frontend-pc/src/styles/animated.scss
deleted file mode 100644
index 168cfd0..0000000
--- a/frontend-pc/src/styles/animated.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@keyframes fade-up {
-	0% {
-		opacity: 0;
-		transform: translateY(60px);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@for $i from 0 through 12 {
-  .animated-fade-up-#{$i}
-
- {
-    opacity: 0;
-    animation-name: fade-up;
-    animation-duration: 0.5s;
-    animation-delay: calc($i/10) + s;
-    animation-fill-mode: forwards;
-  }
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-alert.less b/frontend-pc/src/styles/arco-ui/a-alert.less
deleted file mode 100644
index c77887d..0000000
--- a/frontend-pc/src/styles/arco-ui/a-alert.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.arco-alert {
-  flex-shrink: 0;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-card.less b/frontend-pc/src/styles/arco-ui/a-card.less
deleted file mode 100644
index 8b13789..0000000
--- a/frontend-pc/src/styles/arco-ui/a-card.less
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/frontend-pc/src/styles/arco-ui/a-color-picker.less b/frontend-pc/src/styles/arco-ui/a-color-picker.less
deleted file mode 100644
index e363ca7..0000000
--- a/frontend-pc/src/styles/arco-ui/a-color-picker.less
+++ /dev/null
@@ -1,19 +0,0 @@
-.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-select-view,
-.arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-input-wrapper {
-  padding-right: 0;
-}
-
-.arco-color-picker-panel .arco-color-picker-input-alpha {
-  flex: none;
-  width: 70px;
-
-  .arco-input-number-step {
-    width: 20px;
-    margin-left: 4px;
-  }
-}
-
-.arco-color-picker-panel .arco-color-picker-input-alpha:not(.arco-input-disabled):not(.arco-input-outer-disabled):hover .arco-input-number-suffix,
-.arco-color-picker-panel .arco-color-picker-input-alpha:not(.arco-input-disabled):not(.arco-input-outer-disabled):focus-within .arco-input-number-suffix {
-  opacity: 1;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-descriptions.less b/frontend-pc/src/styles/arco-ui/a-descriptions.less
deleted file mode 100644
index 060f7d4..0000000
--- a/frontend-pc/src/styles/arco-ui/a-descriptions.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.arco-descriptions-layout-inline-horizontal {
-  &.arco-descriptions-size-medium {
-    .arco-descriptions-item {
-      padding-bottom: 8px;
-    }
-  }
-}
-
-.arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label-inline {
-  margin-right: 10px;
-}
diff --git a/frontend-pc/src/styles/arco-ui/a-form.less b/frontend-pc/src/styles/arco-ui/a-form.less
deleted file mode 100644
index ad79db4..0000000
--- a/frontend-pc/src/styles/arco-ui/a-form.less
+++ /dev/null
@@ -1,28 +0,0 @@
-// 清除默认过渡动画
-.form-blink-enter-from,
-.form-blink-appear-from {
-  opacity: inherit;
-}
-.form-blink-enter-to,
-.form-blink-appear-to {
-  opacity: inherit;
-}
-.form-blink-enter-active,
-.form-blink-appear-active {
-  transition: none;
-  animation: none;
-}
-
-// 重设过渡动画
-.form-blink-enter-active,
-.form-blink-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: transform 0.3s cubic-bezier(.23, 1, .32, 1), opacity 0.1s cubic-bezier(.23, 1, .32, 1);
-  transform-origin: center top;
-}
-.form-blink-enter-from,
-.form-blink-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-input-number.less b/frontend-pc/src/styles/arco-ui/a-input-number.less
deleted file mode 100644
index c16265a..0000000
--- a/frontend-pc/src/styles/arco-ui/a-input-number.less
+++ /dev/null
@@ -1,70 +0,0 @@
-// 线性主题优化
-.arco-input-number.arco-input-number-mode-button {
-  .arco-input-prepend {
-    .arco-btn {
-      border-right: 0;
-    }
-  }
-
-  .arco-input-append {
-    .arco-btn {
-      border-left: 0;
-    }
-  }
-}
-
-.arco-input-number-mode-embed {
-  padding-right: 0;
-  overflow: hidden;
-
-  &.arco-input-wrapper:not(.arco-input-focus) .arco-input-number-step-button:not(.arco-input-number-step-button-disabled):hover {
-    background-color: var(--color-fill-2);
-  }
-
-  .arco-input-number-step {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    position: static;
-    display: flex;
-    flex-direction: column;
-    width: 34px;
-    height: 100%;
-    opacity: 1;
-    visibility: visible;
-    transform: none;
-    border-left: 1px solid var(--color-border-2);
-  }
-
-  .arco-input-number-step-button {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: auto;
-    min-height: 0;
-    border-left: 1px solid var(--color-border-2);
-
-    &:not(.arco-input-number-step-button-disabled) {
-      &:hover {
-        .arco-icon {
-          color: rgb(var(--primary-6));
-        }
-      }
-    }
-
-    &:hover,
-    &:active {
-      background-color: var(--color-fill-2);
-    }
-  }
-
-  .arco-input-number-step-button+.arco-input-number-step-button {
-    border-top: 1px solid var(--color-border-2);
-  }
-
-  .arco-input-number-input {
-    padding-right: 34px;
-  }
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-input.less b/frontend-pc/src/styles/arco-ui/a-input.less
deleted file mode 100644
index 9d75d17..0000000
--- a/frontend-pc/src/styles/arco-ui/a-input.less
+++ /dev/null
@@ -1,7 +0,0 @@
-// 线性主题优化
-.arco-input-prepend {
-  border-right: none;
-}
-.arco-input-append {
-  border-left: none;
-}
diff --git a/frontend-pc/src/styles/arco-ui/a-menu.less b/frontend-pc/src/styles/arco-ui/a-menu.less
deleted file mode 100644
index 911c5c4..0000000
--- a/frontend-pc/src/styles/arco-ui/a-menu.less
+++ /dev/null
@@ -1,18 +0,0 @@
-.arco-trigger-menu-item.arco-trigger-menu-selected,
-.arco-trigger-menu-pop-header.arco-trigger-menu-selected {
-  color: rgb(var(--primary-6));
-}
-
-.arco-menu-icon-suffix {
-  transition: all 0.2s;
-}
-
-.arco-menu-horizontal .arco-menu-pop {
-  display: inline-flex;
-}
-
-.arco-menu-icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-message.less b/frontend-pc/src/styles/arco-ui/a-message.less
deleted file mode 100644
index a8a04f7..0000000
--- a/frontend-pc/src/styles/arco-ui/a-message.less
+++ /dev/null
@@ -1,28 +0,0 @@
-.fade-message-enter-from {
-  opacity: 0;
-  transform: translate3d(0, -100%, 0);
-}
-
-.fade-message-enter-to {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-}
-
-.fade-message-enter-active,
-.fade-message-appear-active {
-  transition: opacity @transition-duration-3, transform @transition-duration-4;
-}
-
-.fade-message-leave-from {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-}
-
-.fade-message-leave-to {
-  opacity: 0;
-  transform: translate3d(0, -100%, 0);
-}
-
-.fade-message-leave-active {
-  position: absolute;
-}
diff --git a/frontend-pc/src/styles/arco-ui/a-modal.less b/frontend-pc/src/styles/arco-ui/a-modal.less
deleted file mode 100644
index 448cc68..0000000
--- a/frontend-pc/src/styles/arco-ui/a-modal.less
+++ /dev/null
@@ -1,44 +0,0 @@
-.arco-modal-title .arco-icon-exclamation-circle-fill {
-  font-size: 24px;
-}
-
-.arco-modal-title-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 4px;
-}
-
-.arco-modal-simple {
-  width: 90%;
-  max-width: 320px;
-  padding: 20px;
-  box-sizing: border-box;
-  border-radius: 20px;
-
-  .arco-modal-header {
-    margin-bottom: 0;
-
-    .arco-modal-title {
-      font-size: 18px;
-    }
-  }
-
-  .arco-modal-body {
-    padding: 20px 0;
-    font-size: 16px;
-    text-align: center;
-  }
-
-  .arco-modal-footer {
-    margin-top: 0;
-    display: flex;
-
-    >.arco-btn {
-      flex: 1;
-      height: 38px;
-      border-radius: 100px;
-      font-weight: bold;
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-page-header.less b/frontend-pc/src/styles/arco-ui/a-page-header.less
deleted file mode 100644
index 70c8da0..0000000
--- a/frontend-pc/src/styles/arco-ui/a-page-header.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.arco-page-header {
-  padding: 8px 0;
-  background: var(--color-bg-1);
-  border-bottom: 1px solid var(--color-border-2);
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-pagination.less b/frontend-pc/src/styles/arco-ui/a-pagination.less
deleted file mode 100644
index 25661fd..0000000
--- a/frontend-pc/src/styles/arco-ui/a-pagination.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// 分页组件
-.arco-pagination-item {
-  padding: 0 6px;
-  border: 1px solid var(--color-border-3);
-  background-color: var(--color-bg-2);
-  border-radius: var(--border-radius-small);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  transition: none;
-  box-sizing: border-box;
-  &:hover {
-    color: rgb(var(--primary-6));
-    border: 1px solid rgb(var(--primary-6));
-    background-color: rgba(var(--primary-6), 0.1);
-  }
-  &:active {
-    color: #fff;
-    background-color: rgb(var(--primary-6));
-    border: 1px solid rgb(var(--primary-6));
-  }
-}
-
-.arco-pagination-item-active {
-  color: #fff;
-  background-color: rgb(var(--primary-6));
-  border: 1px solid rgb(var(--primary-6));
-  &:hover {
-    color: #fff;
-    background-color: rgb(var(--primary-6));
-    border: 1px solid rgb(var(--primary-6));
-  }
-}
-
-.arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled,
-.arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled {
-  border-color: var(--color-border-2);
-  &:hover {
-    border-color: var(--color-border-2);
-  }
-}
diff --git a/frontend-pc/src/styles/arco-ui/a-picker.less b/frontend-pc/src/styles/arco-ui/a-picker.less
deleted file mode 100644
index 5c5aaed..0000000
--- a/frontend-pc/src/styles/arco-ui/a-picker.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.arco-picker {
-  width: 100%;
-}
diff --git a/frontend-pc/src/styles/arco-ui/a-radio.less b/frontend-pc/src/styles/arco-ui/a-radio.less
deleted file mode 100644
index 430e2a0..0000000
--- a/frontend-pc/src/styles/arco-ui/a-radio.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.arco-radio-button-content {
-  white-space: nowrap;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-scrollbar.less b/frontend-pc/src/styles/arco-ui/a-scrollbar.less
deleted file mode 100644
index ba3a990..0000000
--- a/frontend-pc/src/styles/arco-ui/a-scrollbar.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.arco-scrollbar-track-direction-vertical {
-  width: 8px;
-}
-
-.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
-  width: 6px;
-  margin: 0 1px;
-}
-
-.arco-scrollbar-track-direction-horizontal {
-  height: 8px;
-}
-
-.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
-  height: 6px;
-  margin: 1px 0;
-}
-
-.arco-scrollbar-thumb-bar {
-  background-color: var(--color-fill-3);
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-space.less b/frontend-pc/src/styles/arco-ui/a-space.less
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend-pc/src/styles/arco-ui/a-steps.less b/frontend-pc/src/styles/arco-ui/a-steps.less
deleted file mode 100644
index 2b22702..0000000
--- a/frontend-pc/src/styles/arco-ui/a-steps.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.arco-steps-item-process .arco-steps-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-switch.less b/frontend-pc/src/styles/arco-ui/a-switch.less
deleted file mode 100644
index 1dbaa77..0000000
--- a/frontend-pc/src/styles/arco-ui/a-switch.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.arco-switch-type-round.arco-switch-small {
-  border-radius: 3px;
-}
-
-.arco-switch-type-round.arco-switch-small .arco-switch-handle {
-  border-radius: 2px;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-table.less b/frontend-pc/src/styles/arco-ui/a-table.less
deleted file mode 100644
index 6a38f3b..0000000
--- a/frontend-pc/src/styles/arco-ui/a-table.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.arco-table-th-title {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.arco-table-container {
-  border-radius: var(--border-radius-small);
-  overflow: hidden;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-tabs.less b/frontend-pc/src/styles/arco-ui/a-tabs.less
deleted file mode 100644
index 895b36a..0000000
--- a/frontend-pc/src/styles/arco-ui/a-tabs.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.arco-tabs-nav-extra:not(:empty) {
-  margin-right: var(--padding);
-}
-
-.arco-tabs {
-  background: var(--color-bg-1);
-}
-
-.arco-tabs-nav-type-rounded .arco-tabs-tab {
-  margin: 4px;
-  padding: 2px 12px;
-}
-
-.arco-tabs-nav-type-card .arco-tabs-tab:first-child,
-.arco-tabs-nav-type-card .arco-tabs-tab:last-child {
-  border-radius: 0;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/a-tree.less b/frontend-pc/src/styles/arco-ui/a-tree.less
deleted file mode 100644
index ef420f7..0000000
--- a/frontend-pc/src/styles/arco-ui/a-tree.less
+++ /dev/null
@@ -1,23 +0,0 @@
-.arco-tree-show-line .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::after,
-.arco-tree-show-line .arco-tree-node-indent-block::before {
-  transform: translateX(0);
-  border-color: var(--color-border-3);
-  flex-shrink: 0;
-}
-
-.arco-tree-node-minus-icon,
-.arco-tree-node-plus-icon {
-  border: 1px solid var(--color-border-3);
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-
-.arco-tree-node-switcher-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.arco-tree-node-title {
-  white-space: nowrap;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/index.less b/frontend-pc/src/styles/arco-ui/index.less
deleted file mode 100644
index bcea62e..0000000
--- a/frontend-pc/src/styles/arco-ui/index.less
+++ /dev/null
@@ -1,46 +0,0 @@
-// Arco 的 LESS 变量（供本项目组件覆写时引用，如 @transition-duration-3）。
-// 这是纯变量文件，不输出任何 CSS —— 原本由被移除的 @arco-themes/vue-gi-demo 带入。
-@import '@arco-design/web-vue/es/style/theme/index.less';
-
-// 本项目主题：腾讯云 / TDesign 色板（覆盖 Arco 底层色板，上层自动跟随）
-@import './xt-theme.less';
-
-@import './a-alert.less';
-@import './a-card.less';
-@import './a-color-picker.less';
-@import './a-descriptions.less';
-@import './a-form.less';
-@import './a-input-number.less';
-@import './a-input.less';
-@import './a-menu.less';
-@import './a-message.less';
-@import './a-modal.less';
-@import './a-page-header.less';
-@import './a-pagination.less';
-@import './a-picker.less';
-@import './a-radio.less';
-@import './a-scrollbar.less';
-@import './a-space.less';
-@import './a-steps.less';
-@import './a-switch.less';
-@import './a-table.less';
-@import './a-tabs.less';
-@import './a-tree.less';
-
-.app-menu-dark:extend(body[arco-theme='dark']) {
-  --color-menu-dark-bg: #222222;
-}
-
-// 禁止文本复制
-.arco-link,
-.arco-menu-title,
-.arco-menu-item-inner,
-.arco-tabs-tab-title,
-.arco-breadcrumb-item,
-.arco-checkbox-label {
-  user-select: none;
-}
-
-.arco-menu .arco-menu-item {
-  display: inline-flex;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/arco-ui/xt-theme.less b/frontend-pc/src/styles/arco-ui/xt-theme.less
deleted file mode 100644
index 280d644..0000000
--- a/frontend-pc/src/styles/arco-ui/xt-theme.less
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * 腾讯云（TDesign）主题
- * ================================================================
- * 色值来源：TDesign 官方 light 主题 token
- *   https://github.com/Tencent/tdesign-common  style/web/theme/_light.less
- *   主色 = 腾讯蓝 #0052D9
- *
- * ⚠️ 格式坑（写错整个主题不生效，且不报错）：
- *   Arco 的颜色变量是 **逗号分隔的 RGB 三元组**，不是 #RRGGBB。
- *   定义：--arcoblue-6: 22,93,255;
- *   消费：rgb(var(--primary-6))
- *   写成 `--arcoblue-6: #0052d9;` 的话，`rgb(#0052d9)` 是非法值，
- *   浏览器会静默丢弃该声明 —— 表现是"主题完全不生效"，但控制台没有报错。
- *
- * 为什么只覆写底层色板就够了：
- *   Arco 的 --primary-N / --success-N / --warning-N / --danger-N / --link-N
- *   分别是 --arcoblue-N / --green-N / --orange-N / --red-N 的别名，
- *   而 --color-text-* / --color-border-* / --color-fill-* 又派生自 gray 色板。
- *   所以换底层色板 = 整套主题跟着换，不用逐个组件去改。
- *
- * 索引对应关系（两套色板的「主色」下标不同，必须按角色映射，不能按下标硬对）：
- *   Arco : -1 最浅底 · -5 hover · -6 主色 · -7 active · -8~-10 更深
- *   TD   : -1 最浅底 · -7 hover · -8 主色 · -9 active · -10 最深
- */
-
-/**
- * ⚠️ 必须同时写 `:root, body`，只写 `:root` 是不生效的。
- *
- * Arco 把自己的色板定义在 **body** 选择器上（不是 :root）。
- * CSS 自定义属性是**按元素解析**的：body 上的 `--arcoblue-6` 会盖掉
- * 从 html（:root）继承下来的同名变量，哪怕我们的样式加载在后面。
- * 所以覆盖必须落在同一层级（body）才能赢。
- *
- * 排查特征：`getComputedStyle(document.documentElement).getPropertyValue('--arcoblue-6')`
- * 已经是新值，但按钮颜色没变 —— 就是这个原因。
- */
-:root,
-body {
-  /* ── 品牌色：腾讯蓝 #0052D9 ──────────────────────────
-     TD brand: 1 #ecf2fe · 2 #d4e3fc · 3 #bbd3fb · 4 #96bbf8
-               5 #699ef5 · 6 #4787f0 · 7 #266fe8 · 8 #0052d9(主)
-               9 #0034b5 · 10 #001f97
-     Arco 9/10 由 TD 10 继续压暗推导（TD 官方只到 10 阶） */
-  --arcoblue-1: 236, 242, 254;   /* TD brand-1  #ecf2fe */
-  --arcoblue-2: 212, 227, 252;   /* TD brand-2  #d4e3fc */
-  --arcoblue-3: 187, 211, 251;   /* TD brand-3  #bbd3fb */
-  --arcoblue-4: 150, 187, 248;   /* TD brand-4  #96bbf8 */
-  --arcoblue-5: 71, 135, 240;    /* TD brand-6  #4787f0 — Arco 的 -5 是 hover */
-  --arcoblue-6: 0, 82, 217;      /* TD brand-8  #0052d9 ★ 主色 */
-  --arcoblue-7: 0, 52, 181;      /* TD brand-9  #0034b5 — Arco 的 -7 是 active */
-  --arcoblue-8: 0, 31, 151;      /* TD brand-10 #001f97 */
-  --arcoblue-9: 0, 22, 122;      /* 推导：由 #001f97 再压暗 */
-  --arcoblue-10: 0, 18, 95;      /* 推导 */
-
-  /* ── 成功色：TD success，主色 -5 #00a870 ───────────── */
-  --green-1: 232, 248, 242;      /* TD success-1  #e8f8f2 */
-  --green-2: 188, 235, 220;      /* TD success-2  #bcebdc */
-  --green-3: 133, 219, 190;      /* TD success-3  #85dbbe */
-  --green-4: 103, 209, 173;      /* 推导：TD 3↔4 之间，给 Arco -4 留一档 */
-  --green-5: 72, 199, 156;       /* TD success-4  #48c79c — hover */
-  --green-6: 0, 168, 112;        /* TD success-5  #00a870 ★ 主色 */
-  --green-7: 7, 141, 92;         /* TD success-6  #078d5c — active */
-  --green-8: 6, 121, 69;         /* TD success-7  #067945 */
-  --green-9: 5, 99, 52;          /* TD success-8  #056334 */
-  --green-10: 4, 79, 42;         /* TD success-9  #044f2a */
-
-  /* ── 警告色：TD warning，主色 -5 #ed7b2f ───────────── */
-  --orange-1: 254, 243, 230;     /* TD warning-1  #fef3e6 */
-  --orange-2: 249, 224, 199;     /* TD warning-2  #f9e0c7 */
-  --orange-3: 247, 199, 151;     /* TD warning-3  #f7c797 */
-  --orange-4: 244, 182, 122;     /* 推导：TD 3↔4 之间 */
-  --orange-5: 242, 153, 95;      /* TD warning-4  #f2995f — hover */
-  --orange-6: 237, 123, 47;      /* TD warning-5  #ed7b2f ★ 主色 */
-  --orange-7: 211, 90, 33;       /* TD warning-6  #d35a21 — active */
-  --orange-8: 186, 67, 27;       /* TD warning-7  #ba431b */
-  --orange-9: 158, 54, 16;       /* TD warning-8  #9e3610 */
-  --orange-10: 132, 43, 11;      /* TD warning-9  #842b0b */
-
-  /* ── 危险色：TD error，主色 -6 #e34d59（这一族与 Arco 下标一一对应）── */
-  --red-1: 253, 236, 238;        /* TD error-1  #fdecee */
-  --red-2: 249, 215, 217;        /* TD error-2  #f9d7d9 */
-  --red-3: 248, 185, 190;        /* TD error-3  #f8b9be */
-  --red-4: 247, 141, 148;        /* TD error-4  #f78d94 */
-  --red-5: 243, 109, 120;        /* TD error-5  #f36d78 — hover */
-  --red-6: 227, 77, 89;          /* TD error-6  #e34d59 ★ 主色 */
-  --red-7: 201, 53, 63;          /* TD error-7  #c9353f — active */
-  --red-8: 177, 31, 38;          /* TD error-8  #b11f26 */
-  --red-9: 149, 17, 20;          /* TD error-9  #951114 */
-  --red-10: 104, 5, 6;           /* TD error-10 #680506 */
-
-  /* ── 中性灰：TD gray（TD 有 14 阶，Arco 需要 10 阶，按明度对齐）── */
-  --gray-1: 243, 243, 243;       /* TD gray-1  #f3f3f3 */
-  --gray-2: 231, 231, 231;       /* TD gray-3  #e7e7e7 */
-  --gray-3: 220, 220, 220;       /* TD gray-4  #dcdcdc */
-  --gray-4: 197, 197, 197;       /* TD gray-5  #c5c5c5 */
-  --gray-5: 166, 166, 166;       /* TD gray-6  #a6a6a6 */
-  --gray-6: 139, 139, 139;       /* TD gray-7  #8b8b8b */
-  --gray-7: 119, 119, 119;       /* TD gray-8  #777777 */
-  --gray-8: 94, 94, 94;          /* TD gray-9  #5e5e5e */
-  --gray-9: 56, 56, 56;          /* TD gray-11 #383838 */
-  --gray-10: 44, 44, 44;         /* TD gray-12 #2c2c2c */
-
-  /* ── 文字：直接用 TD 的 rgba 写法，不经过 gray 色板 ──
-     （文字是最高频的视觉元素，不绕一层间接引用更可控） */
-  --color-text-1: rgba(0, 0, 0, 90%);
-  --color-text-2: rgba(0, 0, 0, 60%);
-  --color-text-3: rgba(0, 0, 0, 40%);
-  --color-text-4: rgba(0, 0, 0, 26%);
-
-  /* ── 描边：TD border-level-1 #e7e7e7 / level-2 #dcdcdc ── */
-  --color-border-1: #f3f3f3;
-  --color-border-2: #e7e7e7;
-  --color-border-3: #dcdcdc;
-  --color-border-4: #c5c5c5;
-
-  /* ── 填充 ─────────────────────────────────────────── */
-  --color-fill-1: #f3f3f3;
-  --color-fill-2: #eee;
-  --color-fill-3: #e7e7e7;
-  --color-fill-4: #dcdcdc;
-
-  /* ── 背景：页面 #f3f3f3、容器 #fff（TD 的 page / container）── */
-  --color-bg-1: #fff;
-  --color-bg-2: #fff;
-  --color-bg-3: #fff;
-  --color-bg-4: #fff;
-  --color-bg-5: #f3f3f3;
-  --color-bg-white: #fff;
-
-  /* ── 圆角：Arco 默认 2/4/8，调成更接近 TD 的 4/6/8 ── */
-  --border-radius-small: 4px;
-  --border-radius-medium: 6px;
-  --border-radius-large: 8px;
-
-  /* ── 主色 RGB 明文，供 rgb(var(--xt-primary)) 这类自定义场景用 ── */
-  --xt-primary: 0, 82, 217;
-  --xt-primary-hover: 71, 135, 240;
-  --xt-primary-active: 0, 52, 181;
-  --xt-success: 0, 168, 112;
-  --xt-warning: 237, 123, 47;
-  --xt-danger: 227, 77, 89;
-  --xt-page-bg: #f3f3f3;
-  --xt-container-bg: #fff;
-  --xt-text-1: rgba(0, 0, 0, 90%);
-  --xt-text-2: rgba(0, 0, 0, 60%);
-  --xt-text-3: rgba(0, 0, 0, 40%);
-
-  /* ────────────────────────────────────────────────────────────────
-     语义别名：显式覆盖，不走 Arco 的 --xxx-N: var(--palette-N) 间接层。
-     实测那一层在 body 上算出来的仍是 Arco 默认色，所以这里直接给值。
-     ──────────────────────────────────────────────────────────────── */
-
-  /* 品牌（腾讯蓝） */
-  --primary-1: 236, 242, 254;
-  --primary-2: 212, 227, 252;
-  --primary-3: 187, 211, 251;
-  --primary-4: 150, 187, 248;
-  --primary-5: 71, 135, 240;
-  --primary-6: 22,93,255;
-  --primary-7: 0, 52, 181;
-  --primary-8: 0, 31, 151;
-  --primary-9: 0, 22, 122;
-  --primary-10: 0, 18, 95;
-
-  /* 成功 */
-  --success-1: 232, 248, 242;
-  --success-2: 188, 235, 220;
-  --success-3: 133, 219, 190;
-  --success-4: 103, 209, 173;
-  --success-5: 72, 199, 156;
-  --success-6: 0, 168, 112;
-  --success-7: 7, 141, 92;
-  --success-8: 6, 121, 69;
-  --success-9: 5, 99, 52;
-  --success-10: 4, 79, 42;
-
-  /* 警告 */
-  --warning-1: 254, 243, 230;
-  --warning-2: 249, 224, 199;
-  --warning-3: 247, 199, 151;
-  --warning-4: 244, 182, 122;
-  --warning-5: 242, 153, 95;
-  --warning-6: 237, 123, 47;
-  --warning-7: 211, 90, 33;
-  --warning-8: 186, 67, 27;
-  --warning-9: 158, 54, 16;
-  --warning-10: 132, 43, 11;
-
-  /* 危险 */
-  --danger-1: 253, 236, 238;
-  --danger-2: 249, 215, 217;
-  --danger-3: 248, 185, 190;
-  --danger-4: 247, 141, 148;
-  --danger-5: 243, 109, 120;
-  --danger-6: 227, 77, 89;
-  --danger-7: 201, 53, 63;
-  --danger-8: 177, 31, 38;
-  --danger-9: 149, 17, 20;
-  --danger-10: 104, 5, 6;
-
-  /* 链接色跟随品牌 */
-  --link-1: 236, 242, 254;
-  --link-2: 212, 227, 252;
-  --link-3: 187, 211, 251;
-  --link-4: 150, 187, 248;
-  --link-5: 71, 135, 240;
-  --link-6: 22,93,255;
-  --link-7: 0, 52, 181;
-  --link-8: 0, 31, 151;
-  --link-9: 0, 22, 122;
-  --link-10: 0, 18, 95;
-
-  /* 中性色（--color-neutral-N 由它派生，文字/描边/填充都跟着走） */
-  --color-neutral-1: 243, 243, 243;
-  --color-neutral-2: 231, 231, 231;
-  --color-neutral-3: 220, 220, 220;
-  --color-neutral-4: 197, 197, 197;
-  --color-neutral-5: 166, 166, 166;
-  --color-neutral-6: 139, 139, 139;
-  --color-neutral-7: 119, 119, 119;
-  --color-neutral-8: 94, 94, 94;
-  --color-neutral-9: 56, 56, 56;
-  --color-neutral-10: 44, 44, 44;
-}
-
-/**
- * 暗色模式下保持同一主色体系。
- * Arco 通过 body[arco-theme='dark'] 切换，这里只覆盖品牌色与页面底色，
- * 其余（文字/背景/描边）沿用 Arco 自己的暗色派生，避免手写一套不完整的暗色。
- */
-body[arco-theme='dark'] {
-  --arcoblue-6: 64, 128, 255;    /* 暗色下主色提亮，保证对比度 */
-  --arcoblue-5: 106, 161, 255;
-  --arcoblue-7: 22, 93, 255;
-  --xt-page-bg: #17171a;
-  --xt-container-bg: #232324;
-}
diff --git a/frontend-pc/src/styles/base.scss b/frontend-pc/src/styles/base.scss
deleted file mode 100644
index 179d0c1..0000000
--- a/frontend-pc/src/styles/base.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-html {
-  font-size: 14px;
-}
-
-body {
-  --margin: 14px;
-  --padding: 16px;
-  overflow: hidden;
-  // font-family: "helvetica neue", helvetica, "pingfang sc", "hiragino sans gb", "microsoft yahei", "\5fae\8f6f\96c5\9ed1", "arial/sans-serif";
-  color: var(--color-text-2);
-  // 页面底色：腾讯云 / TDesign 的 bg-color-page（--td-gray-color-1）
-  // 用变量而不是写死色值，暗色模式与后续换色都不用改这里
-  background-color: var(--xt-page-bg, #f3f3f3);
-  text-rendering: optimizelegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body[arco-theme='dark'] {
-  background-color: #17171a; // body背景颜色-深色模式（Arco 暗色底）
-}
-
-#app {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-ul {
-  margin-bottom: 0;
-  list-style: none !important;
-}
-
-a,
-a:focus,
-a:hover {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/css/transition.css b/frontend-pc/src/styles/css/transition.css
deleted file mode 100644
index faa4a50..0000000
--- a/frontend-pc/src/styles/css/transition.css
+++ /dev/null
@@ -1,163 +0,0 @@
-/* fade */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* fade-bottom */
-.fade-bottom-enter-active,
-.fade-bottom-leave-active {
-  transition: opacity 0.25s, transform 0.3s;
-}
-
-.fade-bottom-enter-from {
-  opacity: 0;
-  transform: translateY(-10%);
-}
-
-.fade-bottom-leave-to {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-/* fade-scale */
-.fade-scale-leave-active,
-.fade-scale-enter-active {
-  transition: all 0.28s;
-}
-
-.fade-scale-enter-from {
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.fade-scale-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-/* zoom-fade */
-.zoom-fade-enter-active,
-.zoom-fade-leave-active {
-  transition: transform 0.2s, opacity 0.3s ease-out;
-}
-
-.zoom-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.92);
-}
-
-.zoom-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.06);
-}
-
-/* zoom-out */
-.zoom-out-enter-active,
-.zoom-out-leave-active {
-  transition: opacity 0.1s ease-in-out, transform 0.15s ease-out;
-}
-
-.zoom-out-enter-from,
-.zoom-out-leave-to {
-  opacity: 0;
-  transform: scale(0);
-}
-
-/* elementUI 的 Dialog 动画 */
-@keyframes dialog-fade-in {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes dialog-fade-out {
-  0% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
-  }
-}
-
-@keyframes modal-fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes modal-fade-out {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.el-dialog-enter-active {
-  animation: dialog-fade-in 0.3s;
-}
-
-.el-dialog-leave-active {
-  animation: dialog-fade-out 0.3s;
-}
-
-.el-mask-enter-active {
-  animation: modal-fade-in 0.3s;
-}
-
-.el-mask-leave-active {
-  animation: modal-fade-out 0.3s;
-}
-
-/* el-fade-bottom */
-.el-fade-enter-active,
-.el-fade-leave-active {
-  transition: all 0.3s;
-}
-
-.el-fade-enter-from {
-  opacity: 0;
-  transform: scale(1.1, 0.2);
-}
-
-.el-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.1, 0.2);
-}
diff --git a/frontend-pc/src/styles/editor.scss b/frontend-pc/src/styles/editor.scss
deleted file mode 100644
index ce5b384..0000000
--- a/frontend-pc/src/styles/editor.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-body {
-  --w-e-textarea-bg-color: #fff;
-  --w-e-textarea-color: #333;
-  --w-e-textarea-border-color: #ccc;
-  --w-e-textarea-slight-border-color: #e8e8e8;
-  --w-e-textarea-slight-color: #d4d4d4;
-  --w-e-textarea-slight-bg-color: #f5f2f0;
-  --w-e-textarea-selected-border-color: #b4d5ff;
-  --w-e-textarea-handler-bg-color: #4290f7;
-  --w-e-toolbar-color: #595959;
-  --w-e-toolbar-bg-color: #fff;
-  --w-e-toolbar-active-color: #333;
-  --w-e-toolbar-active-bg-color: #f1f1f1;
-  --w-e-toolbar-disabled-color: #999;
-  --w-e-toolbar-border-color: #e8e8e8;
-  --w-e-modal-button-bg-color: #fafafa;
-  --w-e-modal-button-border-color: #d9d9d9;
-}
-
-body[arco-theme='dark'] {
-  --w-e-textarea-bg-color: var(--color-bg-2);
-  --w-e-textarea-color: var(--color-text-1);
-  --w-e-textarea-border-color: var(--color-border);
-  --w-e-textarea-slight-border-color: var(--color-border-2);
-  --w-e-textarea-slight-color: var(--color-text-4);
-  --w-e-textarea-slight-bg-color: var(--color-bg-2);
-  --w-e-textarea-selected-border-color: var(--color-primary-light-1);
-  --w-e-textarea-handler-bg-color: var(--color-primary-light-4);
-  --w-e-toolbar-color: #ccc;
-  --w-e-toolbar-bg-color: var(--color-bg-2);
-  --w-e-toolbar-active-color: #fff;
-  --w-e-toolbar-active-bg-color: var(--color-secondary-active);
-  --w-e-toolbar-disabled-color: var(--color-text-4);
-  --w-e-toolbar-border-color: var(--color-border);
-  --w-e-modal-button-bg-color: var(--color-fill-2);
-  --w-e-modal-button-border-color: var(--color-border);
-}
diff --git a/frontend-pc/src/styles/global.scss b/frontend-pc/src/styles/global.scss
deleted file mode 100644
index 5314720..0000000
--- a/frontend-pc/src/styles/global.scss
+++ /dev/null
@@ -1,382 +0,0 @@
-/* 全局样式 */
-@use './var.scss' as *;
-
-// hover按钮
-.g-hover-btn {
-  background-color: transparent;
-  border: 0 !important;
-
-  &:hover {
-    background: var(--color-secondary-hover) !important;
-  }
-
-  &:active {
-    background: var(--color-secondary-active) !important;
-  }
-}
-
-// 卡片组件，使body的高度自动撑满
-.g-card {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .arco-card-body {
-    box-sizing: border-box;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}
-
-// 页面卡片，右侧有返回按钮
-.g-page-card {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  margin: var(--margin);
-  overflow: hidden;
-
-  .arco-card-body {
-    box-sizing: border-box;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}
-
-.g-gradient-bg {
-  background-image: linear-gradient(to right top, transparent, transparent,
-  color-mix(in oklab, rgb(var(--primary-6)) 12%, transparent),
-  color-mix(in oklab, rgb(var(--primary-6)) 12%, transparent));
-}
-
-// 卡片标题，标题左侧的伪类样式
-.g-card-title {
-  .arco-card-header-title::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 4px;
-    height: 50%;
-    content: '';
-    background-color: rgb(var(--warning-5));
-    border-radius: 0 4px 4px 0;
-    transform: translateY(-50%);
-  }
-}
-
-// 使用场景，页面内容超出高度会自动滚动
-.g-page {
-  box-sizing: border-box;
-  flex: 1;
-  padding: var(--margin);
-  overflow-y: auto;
-}
-
-// 表格类名 高度自适应
-.g-table {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-
-  >.arco-spin {
-    height: auto;
-    max-height: 100%;
-    overflow: hidden;
-  }
-}
-
-// 表格类名，高度自适应，分页始终固定在最底部
-.g-full-table {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-
-  .arco-table-container {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .arco-table-scroll-y {
-    border-right: 1px solid var(--color-border-1);
-  }
-
-  .arco-table-tr .arco-table-td:last-child,
-  .arco-table-tr .arco-table-th:last-child {
-    border-right: none;
-  }
-
-  .arco-table-content {
-    .arco-scrollbar {
-      &:last-child {
-        flex: 1;
-
-        &:not(.arco-scrollbar-both) {
-          .arco-table-element {
-            border-bottom: 1px solid var(--color-border-1);
-          }
-        }
-      }
-    }
-  }
-}
-
-.g-full-tabs {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  .arco-tabs-content {
-    flex: 1;
-    padding-top: 0;
-
-    .arco-tabs-content-list {
-      height: 100%;
-    }
-
-    .arco-tabs-pane {
-      height: 100%;
-      overflow-y: auto;
-    }
-  }
-}
-
-// 编辑表格，表头的必填红色星号
-.g-column-require {
-  .arco-table-th-title {
-    &::before {
-      padding-right: 2px;
-      color: red;
-      content: '*';
-    }
-  }
-}
-
-.g-full-column {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.g-badge-primary {
-  .arco-badge-number {
-    background-color: rgb(var(--primary-5));
-  }
-}
-
-.g-badge-success {
-  .arco-badge-number {
-    background-color: rgb(var(--success-5));
-  }
-}
-
-.g-badge-warning {
-  .arco-badge-number {
-    background-color: rgb(var(--warning-5));
-  }
-}
-
-.g-row-tool {
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-/**
- * 列表页卡片（卡片里装着「工具栏 + 表格 + 分页器」）。
- *
- * 为什么必须有它：`GiPageLayout` 的内容区是 `overflow: hidden`（页面本身不滚），
- * 而一页 10~20 条比屏幕高 —— 不加这层高度链路，**分页器会被裁到可视区之外**：
- * DOM 里明明有（`共 1245 条 … 20 条/页`），人却看不见，看着就像"分页器没做/坏了"。
- * 操作日志页（20 条/页）与收集任务页（加了状态 tab 之后）都踩过这一脚。
- *
- * 用法：`<a-card class="g-list-card">`，表格必须给 `:scroll="{ x: 宽度, y: '100%' }"`——
- * `y` 是字符串时 Arco 会把表头与表体**拆开**（内部 `splitTable`），表体自己滚、表头钉住；
- * 不写 y 的话 `.arco-table-content` 的 `overflow-y` 是 hidden（那是横向滚动条专用的），
- * 多出来的行会被直接裁掉且无法滚动。
- */
-.g-list-card {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-
-  .arco-card-body {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  // ⚠️ `.arco-spin` 必须在链路里：Arco 用 Spin 包住「表体 + 分页器」
-  .arco-table,
-  .arco-spin {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .arco-table-container {
-    flex: 1;
-    min-height: 0;
-  }
-
-  // 分页器不参与伸缩，永远留在卡片底部
-  .arco-table-pagination {
-    flex: none;
-  }
-}
-
-// 以下这些类名要放到下面，涉及到css权重优先级问题
-.g-mt {
-  margin-top: var(--margin);
-}
-
-.g-mb {
-  margin-bottom: var(--margin);
-}
-
-.g-ml {
-  margin-left: var(--margin);
-}
-
-.g-mr {
-  margin-right: var(--margin);
-}
-
-.g-mx {
-  margin-right: var(--margin);
-  margin-left: var(--margin);
-}
-
-.g-my {
-  margin-top: var(--margin);
-  margin-bottom: var(--margin);
-}
-
-.g-m0 {
-  margin: 0;
-}
-
-.g-pt {
-  padding-top: var(--margin);
-}
-
-.g-pb {
-  padding-bottom: var(--margin);
-}
-
-.g-pl {
-  padding-left: var(--margin);
-}
-
-.g-pr {
-  padding-right: var(--margin);
-}
-
-.g-px {
-  padding-right: var(--padding);
-  padding-left: var(--padding);
-}
-
-.g-py {
-  padding-top: var(--padding);
-  padding-bottom: var(--padding);
-}
-
-.g-p0 {
-  padding: 0;
-}
-
-.g-round {
-  border-radius: 100px;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-// 一般结合<a-row class="flex-column"></a-row>使用
-.flex-column {
-  flex-direction: column;
-  overflow: hidden;
-}
-
-// 通用外边距
-.g-margin {
-  margin: var(--margin);
-}
-
-// 通用内边距
-.g-padding {
-  padding: var(--padding);
-}
-
-.g-select-input {
-  flex-shrink: 0;
-  width: 100px;
-}
-
-.g-search-input {
-  flex-shrink: 0;
-  width: 250px;
-}
-
-.g-line-1 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.g-line-2 {
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
-
-.g-line-3 {
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-}
-
-.g-line-4 {
-  -webkit-line-clamp: 4;
-  line-clamp: 4;
-}
-
-.g-line-5 {
-  -webkit-line-clamp: 5;
-  line-clamp: 5;
-}
-
-.g-line-2,
-.g-line-3,
-.g-line-4,
-.g-line-5 {
-  display: -webkit-box; /* 弹性伸缩盒 */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  -webkit-box-orient: vertical; /* 设置伸缩盒子元素排列方式 */
-}
\ No newline at end of file
diff --git a/frontend-pc/src/styles/index.scss b/frontend-pc/src/styles/index.scss
index 8e0471c..2969a5b 100644
--- a/frontend-pc/src/styles/index.scss
+++ b/frontend-pc/src/styles/index.scss
@@ -1,17 +1,249 @@
-// 基础样式
-@use './base.scss';
+/**
+ * 全局样式（只放**跨页面**的东西）。
+ *
+ * 组件的具体样式写在各自 SFC 的 <style scoped> 里；
+ * 这里解决三类问题：
+ *   ① 设计变量：底色 / 卡片外观 / 间距 —— 页面只引用变量，不再各写一套；
+ *   ② 卡片式版面：白卡片浮在灰底上，卡片头是浅灰条（"区域感"的来源）；
+ *   ③ 「列表页分页器被裁掉」这个**踩过的坑**（见 .page-card）。
+ *
+ * ⚠️ 为什么用 `.n-card.n-card` 这种重复类名：Naive 的组件样式是运行时由
+ *    css-render 注入 <head> 的，与本文件的先后顺序**不保证**；
+ *    靠"后写覆盖"会时灵时不灵，所以显式把选择器权重提到 (0,2,0) 稳压它一头。
+ */
 
-// 全局类名样式
-@use './global.scss';
+/* ── 设计变量：改这里就等于改全站 ───────────────────── */
 
-// 自定义原生滚动条样式
-@use './scrollbar-reset.scss';
+:root {
+  /* 版面（layout/index.vue 与 .page-card 共用，避免两处各写一个魔法数而漂移） */
+  --xt-header-h: 56px;
+  --xt-content-pad: 16px;
+  --xt-gap: 16px;
 
-// 自定义 nprogress 插件进度条颜色
-@use './nprogress.scss';
+  /* 配色 */
+  --xt-bg: #f2f4f7;
+  --xt-card-bg: #fff;
+  --xt-card-border: #e5e8ee;
+  --xt-card-border-weak: #eef1f5;
+  --xt-card-radius: 10px;
+  --xt-card-pad-x: 18px;
+  --xt-card-pad-y: 16px;
+  --xt-card-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 6%);
 
-// 富文本的css主题颜色变量
-@use './editor.scss';
+  /* 浅灰"色带"：卡片头 / 表头 / 工具条，用来切分同一张卡片里的不同区域 */
+  --xt-band-bg: #f7f8fa;
 
-// 动画类名
-@use './animated.scss';
\ No newline at end of file
+  --xt-text: #1f2229;
+  --xt-text-2: #667085;
+  --xt-text-3: #98a2b3;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  color: var(--xt-text);
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--xt-bg);
+}
+
+/* ── 卡片式版面 ─────────────────────────────────────── */
+
+/**
+ * 卡片本体：白底 + 描边 + 轻阴影。
+ *
+ * ⚠️ 上一版把卡片写成 `:bordered="false"` 且内容区白底 —— 结果「白卡片浮在白底上」，
+ *    整页没有任何边界，用户的原话是"每个区域的间隔都不明显"。
+ *    所以这里**统一**给描边与阴影，页面不再各自决定卡片长什么样。
+ */
+.n-card.n-card {
+  background: var(--xt-card-bg);
+  border: 1px solid var(--xt-card-border);
+  border-radius: var(--xt-card-radius);
+  box-shadow: var(--xt-card-shadow);
+}
+
+/**
+ * 卡片头：浅灰条 + 下分隔线。
+ * 区域之间的"间隔感"主要来自这条色带，而不是靠加大 margin。
+ */
+.n-card.n-card > .n-card-header {
+  padding: 12px var(--xt-card-pad-x);
+  background: var(--xt-band-bg);
+  border-bottom: 1px solid var(--xt-card-border);
+  border-radius: var(--xt-card-radius) var(--xt-card-radius) 0 0;
+}
+
+/**
+ * 卡片内容区的内边距统一。
+ *
+ * ⚠️ **有卡片头的卡片，Naive 是不给上内边距的** —— 它的规则是
+ *    `cB("card-content", "padding: 0 var(--n-padding-left) var(--n-padding-bottom) ...")`
+ *    外加 `c("&:first-child", "padding-top: var(--n-padding-top)")`：
+ *    也就是说 `padding-top` **只给"内容区是长子"（即没有卡片头）的卡片**。
+ *    结果就是**凡是有标题的卡片，第一行内容直接贴着标题下面那条灰条**
+ *    （实测 `padding-top` = 0px，而同一张卡片的 `padding-bottom` 是 16px）。
+ *    这里显式给足上下内边距，不再依赖"内容区是不是长子"。
+ *
+ * ⚠️ 类名是 **`.n-card-content`（单短横）**，不是 `.n-card__content` ——
+ *    Naive 的卡片头/内容区用的是 `n-card-header` / `n-card-content` 这套命名，
+ *    写成 BEM 双下划线会**静默失效**（选择器匹配不到任何元素，也不报错）。
+ */
+.n-card.n-card > .n-card-content {
+  padding: var(--xt-card-pad-y) var(--xt-card-pad-x);
+}
+
+/**
+ * 卡里套卡（导出中心的"导出记录"、租户详情的子卡片等）：
+ * 去掉阴影、弱化描边与色带，否则两层"浮起 + 灰条"叠在一起比不写还乱。
+ */
+.n-card .n-card {
+  border-color: var(--xt-card-border-weak);
+  box-shadow: none;
+}
+
+.n-card .n-card > .n-card-header {
+  background: transparent;
+  border-bottom-color: var(--xt-card-border-weak);
+}
+
+/* ── 列表页卡片 ─────────────────────────────────────── */
+
+/**
+ * 列表页卡片：撑满内容区高度，让**表格自己滚、分页器钉在底部**。
+ *
+ * ⚠️ 上一版（Arco）在这里踩过坑：内容区不滚，而"一页 20 条 + 工具栏"比屏幕高
+ *    → 分页器被裁在可视区之外，怎么滚都看不到，而 DOM 里它一直是好的。
+ *
+ * ⚠️ **Naive UI 的写法与 Arco 不同**（照抄 Arco 的 `:scroll="{ x, y }"` 会直接被忽略）：
+ *    · 横向：`:scroll-x="900"`（**没有** `y`）；
+ *    · 纵向：靠卡片高度链 + `flex-height`（表格撑满 `.page-card__body`，自己出滚动条），
+ *      或抽屉里的小表用 `:max-height="240"`。
+ *    也就是说：**高度链必须由 `.page-card` → `.page-card__body` → `n-data-table`
+ *    一路 flex 传下去**，中间任何一层少了 `min-height: 0` 都会把底部顶出可视区。
+ */
+.page-card {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--xt-header-h) - var(--xt-content-pad) * 2);
+  overflow: hidden;
+}
+
+/**
+ * ⚠️ 高度链的**第一环**：卡片的内容区必须是"能撑满的 flex 列"。
+ *
+ *    这件事原来靠每个列表页自己传 `:content-style="contentStyle"` 实现 ——
+ *    结果「操作日志」只写了 `class="page-card"` 而漏了这一环，症状是：
+ *    表格体高度算成 **0**，行**在 DOM 里、数据也查得到**，但屏幕上一行都看不见
+ *    （分页器紧贴在表头下面，下面一大片空白）。这跟分页器被裁是同一个坑的另一半。
+ *
+ *    与 `.page-card__body > .n-data-table` 同理：**放全局才不会漏**。
+ *    页面继续传 `contentStyle` 也无妨（值一样，内联优先）。
+ */
+.page-card > .n-card-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.page-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/**
+ * ⚠️ 高度链的**最后一环**：`flex-height` 只让表格内部的 wrapper/base-table 变高，
+ *    `.n-data-table` 这个根节点自己**没有** height —— 少了这一条，表格不会撑满，
+ *    分页器就被顶出卡片底部（"DOM 里有、屏幕上看不到"）。
+ *    放在全局而不是各页面 `:deep()` 里：4 个列表页各写一遍必然漏一个。
+ */
+.page-card__body > .n-data-table {
+  flex: 1;
+  min-height: 0;
+}
+
+/* ── 工具条 / 区块 ──────────────────────────────────── */
+
+/**
+ * 工具条：筛选与动作的所在行。
+ *
+ * 底部加一条分隔线 + 一点内边距，把它与下面的表格**切分成两个区域** ——
+ * 否则一排白底按钮直接贴在白底表格上，"按钮不明显"就是这么来的。
+ */
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--xt-card-border-weak);
+}
+
+.toolbar--plain {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.toolbar__hint {
+  color: var(--xt-text-3);
+  font-size: 12px;
+}
+
+/* 普通（非列表）页面：内容自然增长，页面整体滚动；卡片之间留出明显间隔 */
+.page-plain {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xt-gap);
+  padding-bottom: var(--xt-gap);
+}
+
+/**
+ * 页面内的次级区块标题（"导出记录"、"分班进度"这种）。
+ * 统一成"左侧色条 + 加粗"的小标题，让一张卡片里的多块内容也数得清。
+ */
+.section-title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--xt-text);
+}
+
+.section-title::before {
+  width: 3px;
+  height: 14px;
+  content: '';
+  background: var(--xt-primary, #0052d9);
+  border-radius: 2px;
+}
+
+.section-title__note {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--xt-text-3);
+}
+
+/* 表头加深一档：表格与卡片内容区分开 */
+.n-data-table .n-data-table-th {
+  background-color: var(--xt-band-bg);
+}
diff --git a/frontend-pc/src/styles/mixin.scss b/frontend-pc/src/styles/mixin.scss
deleted file mode 100644
index 0485c99..0000000
--- a/frontend-pc/src/styles/mixin.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@mixin scrollbar($size: 6px, $color: #d9d9d9) {
-  &::-webkit-scrollbar-thumb {
-    background-color: $color;
-    border-radius: $size;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: $color;
-    border-radius: $size;
-  }
-
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-  }
-
-  &::-webkit-scrollbar-track-piece {
-    background-color: rgb(0 0 0 / 0%);
-    border-radius: 0;
-  }
-}
diff --git a/frontend-pc/src/styles/nprogress.scss b/frontend-pc/src/styles/nprogress.scss
deleted file mode 100644
index 000dc90..0000000
--- a/frontend-pc/src/styles/nprogress.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// nprogress插件进度条颜色
-#nprogress .bar {
-  background: rgb(var(--primary-6), 0.5) !important; //自定义颜色
-}
diff --git a/frontend-pc/src/styles/scrollbar-reset.scss b/frontend-pc/src/styles/scrollbar-reset.scss
deleted file mode 100644
index 87909f9..0000000
--- a/frontend-pc/src/styles/scrollbar-reset.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/* 美化滚动条 */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 6px;
-  background-color: var(--color-neutral-3);
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  width: 6px;
-  background-color: var(--color-neutral-4);
-}
-
-::-ms-scrollbar-thumb {
-  width: 6px;
-  background-color: var(--color-neutral-3);
-  border-radius: 6px;
-}
diff --git a/frontend-pc/src/styles/var.scss b/frontend-pc/src/styles/var.scss
deleted file mode 100644
index 5cc6e17..0000000
--- a/frontend-pc/src/styles/var.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// 自定义全局scss变量
-// 建议优先使用arco内置的全局css变量来开发，可以有效提高效率和团队协作
-// $color-theme: rgb(var(--primary-6));
\ No newline at end of file
diff --git a/frontend-pc/src/types/api.d.ts b/frontend-pc/src/types/api.d.ts
deleted file mode 100644
index fc0a469..0000000
--- a/frontend-pc/src/types/api.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/** 接口返回数据格式 */
-interface ApiRes<T> {
-  code: number
-  data: T
-  message: string
-  success: boolean
-}
-
-/** 分页返回的数据格式 */
-interface PageRes<T> {
-  records: T
-  total: number
-}
diff --git a/frontend-pc/src/types/app.d.ts b/frontend-pc/src/types/app.d.ts
deleted file mode 100644
index 860af56..0000000
--- a/frontend-pc/src/types/app.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-declare namespace App {
-  /** 系统配置 */
-  interface SettingConfig {
-    themeColor: string // 主题色
-    layout: 'left' | 'mix' | 'top' | 'columns'
-    tabStyle: 'card' | 'card-gutter' | 'rounded' | 'custom1' | 'custom2' // 页签风格
-    isTabVisible: boolean // 是否显示页签
-    transitionName: 'zoom-fade' | 'slide-dynamic-origin' | 'fade-slide' | 'fade' | 'fade-bottom' | 'fade-scale' // 动画类名
-    isTransitionEnabled: boolean // 是否启用页面切换动画
-    isMenuCollapsed: boolean // 左侧菜单折叠状态
-    isMenuAccordion: boolean // 左侧菜单手风琴效果
-    isMenuDark: boolean // 菜单深色模式
-  }
-}
diff --git a/frontend-pc/src/types/env.d.ts b/frontend-pc/src/types/env.d.ts
deleted file mode 100644
index 72a6327..0000000
--- a/frontend-pc/src/types/env.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/// <reference types="vite/client" />
-
-/** 声明环境变量的类型 */
-interface ImportMetaEnv {
-  readonly VITE_API_PREFIX: string
-  readonly VITE_API_BASE_URL: string
-  readonly VITE_BASE: string
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
-}
diff --git a/frontend-pc/src/types/global.d.ts b/frontend-pc/src/types/global.d.ts
deleted file mode 100644
index 99432f0..0000000
--- a/frontend-pc/src/types/global.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-interface AnyObject {
-  [key: string]: unknown
-}
-
-interface Options {
-  value: unknown
-  label: string
-}
-
-interface NodeOptions extends Options {
-  children?: NodeOptions[]
-}
-
-type TimeRanger = [string, string]
-
-/** 系统管理通用状态 与字典 STATUS 一致，'0' 禁用 '1' 启用 */
-type Status = '0' | '1'
-
-/** 性别 与字典 GENDER 一致，'1' 男 '2' 女 '3' 保密 */
-type Gender = '1' | '2' | '3'
-
-/** 接口需要的分页参数 */
-type Pagination = { page: number, size: number }
diff --git a/frontend-pc/src/types/module.d.ts b/frontend-pc/src/types/module.d.ts
deleted file mode 100644
index 07078c0..0000000
--- a/frontend-pc/src/types/module.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module 'nprogress'
-declare module '@arco-design/color'
-declare module 'qs'
diff --git a/frontend-pc/src/types/router.d.ts b/frontend-pc/src/types/router.d.ts
deleted file mode 100644
index 4423b27..0000000
--- a/frontend-pc/src/types/router.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import 'vue-router'
-
-declare module 'vue-router' {
-  interface RouteMeta {
-    /** 设置该路由在侧边栏和面包屑中展示的名字 */
-    title?: string
-    /** 设置该路由的图标 */
-    icon?: string
-    /**  默认false, 设置true的时候该路由不会在侧边栏出现 */
-    hidden?: boolean
-    /** 默认true, 如果设置为false, 则不会在面包屑中显示 */
-    breadcrumb?: boolean
-    /** 默认true, 如果设置为false, 它则不会显示在Tab栏中 */
-    showInTabs?: boolean
-    /** 默认false, 如果设置为true, 它则会固定在Tab栏中, 例如首页 */
-    affix?: boolean
-    /**
-     * 当一个路由下面的children声明的路由大于1个时, 自动会变成嵌套的模式
-     * 只有一个时, 会将那个子路由当做根路由显示在侧边栏
-     * 若想不管路由下面的children声明的个数都显示你的根路由
-     * 可以设置alwaysShow: true, 这样就会忽略之前定义的规则, 一直显示根路由
-     */
-    alwaysShow?: boolean
-    /**
-     * 示例: activeMenu: "/xxx/xxx"
-     * 当设置了该属性进入路由时, 则会高亮activeMenu属性对应的侧边栏
-     * 该属性适合使用在有hidden: true属性的路由上
-     */
-    activeMenu?: string
-    /**
-     * 是否缓存该路由页面
-     * 默认为false, 为true时代表需要缓存, 此时该路由和该页面都需要设置一致的name
-     */
-    keepAlive?: boolean
-    /** 默认路由参数 */
-    query?: string
-    noShowingChildren?: boolean
-    /** 设置该路由进入的权限, 支持多个权限叠加 */
-    roles?: string[]
-    /** 排序 */
-    sort?: number
-  }
-}
diff --git a/frontend-pc/src/types/shims-vue.d.ts b/frontend-pc/src/types/shims-vue.d.ts
deleted file mode 100644
index aafef95..0000000
--- a/frontend-pc/src/types/shims-vue.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/frontend-pc/src/types/tool.d.ts b/frontend-pc/src/types/tool.d.ts
deleted file mode 100644
index 2ba9215..0000000
--- a/frontend-pc/src/types/tool.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// 辅助类型：获取所有类型的键的联合
-type AllKeys<T> = T extends any ? keyof T : never
-
-// 辅助类型：获取属性在所有类型中的联合类型
-type UnionType<T, K extends PropertyKey> = T extends any
-  ? K extends keyof T
-    ? T[K]
-    : never
-  : never
-
-// 合并多个类型，同名属性转为联合类型
-export type MergeMultiple<T extends any[]> = {
-  [K in AllKeys<T[number]>]?: UnionType<T[number], K>
-}
diff --git a/frontend-pc/src/utils/auth.ts b/frontend-pc/src/utils/auth.ts
index 6dee588..988a9ba 100644
--- a/frontend-pc/src/utils/auth.ts
+++ b/frontend-pc/src/utils/auth.ts
@@ -1,39 +1,31 @@
-/** Token 存储键名 */
-const TOKEN_KEY = 'token'
-
 /**
- * 检查用户是否已登录
- * @description 通过检查 localStorage 中是否存在 token 来判断用户登录状态
- * @returns {boolean} 是否已登录
+ * token 的本地存取。
+ *
+ * 只用 localStorage 一个来源：以前那份实现把 token 同时放在 pinia 与 localStorage 里，
+ * 两处不一致时表现为"刷新就掉登录"，排查成本远大于省下的那点读写。
  */
-const isLogin = () => {
-  return !!localStorage.getItem(TOKEN_KEY)
+const TOKEN_KEY = 'xt-token'
+
+export function getToken(): string {
+  try {
+    return localStorage.getItem(TOKEN_KEY) || ''
+  } catch {
+    return ''
+  }
 }
 
-/**
- * 获取用户 Token
- * @description 从 localStorage 中获取存储的 token
- * @returns {string | null} 用户 token，未登录时返回 null
- */
-const getToken = () => {
-  return localStorage.getItem(TOKEN_KEY)
+export function setToken(token: string): void {
+  try {
+    localStorage.setItem(TOKEN_KEY, token)
+  } catch {
+    // 隐私模式下 localStorage 可能不可写 —— 不抛，只是这次会话留不住登录态
+  }
 }
 
-/**
- * 设置用户 Token
- * @description 将用户 token 存储到 localStorage 中
- * @param token - 用户 token
- */
-const setToken = (token: string) => {
-  localStorage.setItem(TOKEN_KEY, token)
+export function clearToken(): void {
+  try {
+    localStorage.removeItem(TOKEN_KEY)
+  } catch {
+    // 同上
+  }
 }
-
-/**
- * 清除用户 Token
- * @description 从 localStorage 中移除用户 token
- */
-const clearToken = () => {
-  localStorage.removeItem(TOKEN_KEY)
-}
-
-export { clearToken, getToken, isLogin, setToken }
diff --git a/frontend-pc/src/utils/createSelectDialog.ts b/frontend-pc/src/utils/createSelectDialog.ts
deleted file mode 100644
index 9e5cece..0000000
--- a/frontend-pc/src/utils/createSelectDialog.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Component } from 'vue'
-import { Message, Modal } from '@arco-design/web-vue'
-import { h, ref } from 'vue'
-
-interface CreateSelectDialogParams {
-  title: string
-  component: Component
-  componentProps?: Record<string, any>
-  tip?: string
-}
-
-/**
- * 选择弹窗配置选项接口
- * @template T 选中数据的类型
- */
-interface SelectDialogOptions<T> {
-  /** 弹窗标题（会覆盖创建参数中的title） */
-  title?: string
-  /** 是否允许多选 */
-  multiple?: boolean
-  /** 查询参数，通常用于初始化数据 */
-  queryParams?: Record<string, any>
-  /** 传递给组件的额外属性 */
-  componentProps?: Record<string, any>
-  /** 点击确定按钮后的回调函数 */
-  onOk?: (data: T) => void
-  /** 点击确定前的校验函数，返回Promise<boolean>决定是否允许确定 */
-  onBeforeOk?: (data: T) => Promise<boolean>
-}
-
-/**
- * 创建一个选择类型的弹窗工厂函数
- *
- * 该函数返回一个创建特定类型选择弹窗的方法，适用于需要从列表中选择数据的场景。
- * 内部使用Vue的createVNode动态渲染组件，并通过ref获取组件实例的方法。
- *
- * @template T 选中数据的类型
- * @param {CreateSelectDialogParams} params 创建弹窗所需的基本参数
- * @returns {(options: SelectDialogOptions<T>) => void} 可配置的弹窗创建函数
- *
- * @example
- * // 创建一个用户选择弹窗
- * const selectUserDialog = createSelectDialog({
- *   title: '选择用户',
- *   component: UserSelectComponent,
- *   tip: '请至少选择一个用户'
- * })
- *
- * // 打开弹窗并处理选择结果
- * selectUserDialog({
- *   multiple: true,
- *   queryParams: { status: 'active' },
- *   onOk: (selectedUsers) => {
- *     console.log('已选择用户:', selectedUsers)
- *   }
- * })
- */
-export const createSelectDialog = <T = any>(params: CreateSelectDialogParams) => {
-  return (options: SelectDialogOptions<T>) => {
-    const TableRef = ref<any>()
-    Modal.open({
-      // 优先使用options中的title，否则使用params中的title
-      title: options.title || params.title,
-      // 动态渲染传入的组件，设置ref引用并合并属性
-      content: () => h(params.component, {
-        ref: (e: any) => (TableRef.value = e),
-        multiple: options.multiple,
-        queryParams: options.queryParams,
-        ...params.componentProps,
-        ...options.componentProps
-      }),
-      // 设置弹窗宽度自适应
-      width: 'calc(100% - 20px)',
-      modalStyle: { maxWidth: '1000px' },
-      bodyStyle: { overflow: 'hidden', height: '500px', padding: 0 },
-      onBeforeOk: async () => {
-        // 检查组件是否暴露了必要的getSelectedData方法
-        if (!TableRef.value?.getSelectedData) {
-          Message.warning('组件必须暴露getSelectedData方法')
-          return false
-        }
-
-        // 获取选中的数据
-        const data = TableRef.value?.getSelectedData?.() || []
-
-        // 验证是否选择了数据
-        if (!data.length) {
-          Message.warning(params.tip || '请选择数据')
-          return false
-        }
-
-        // 如果提供了前置校验函数，则调用并根据结果决定是否继续
-        if (options?.onBeforeOk) {
-          return await options.onBeforeOk(data)
-        }
-
-        // 调用确定回调函数，传递选中的数据
-        options.onOk?.(data)
-        return true
-      }
-    })
-  }
-}
diff --git a/frontend-pc/src/utils/downloadFile.ts b/frontend-pc/src/utils/downloadFile.ts
deleted file mode 100644
index bc3baa7..0000000
--- a/frontend-pc/src/utils/downloadFile.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * 根据文件url获取文件名
- * @param url 文件url
- */
-function getFileName(url: string) {
-  const num = url.lastIndexOf('/') + 1
-  let fileName = url.substring(num)
-  // 把参数和文件名分割开
-  fileName = decodeURI(fileName.split('?')[0])
-  return fileName
-}
-
-/**
- * 根据文件地址下载文件
- * @param {*} sUrl
- */
-export function downloadByUrl({
-  url,
-  target = '_blank',
-  fileName
-}: {
-  url: string
-  target?: '_self' | '_blank'
-  fileName?: string
-}): Promise<boolean> {
-  // 是否同源
-  const isSameHost = new URL(url).host === location.host
-  return new Promise<boolean>((resolve, reject) => {
-    if (isSameHost) {
-      const link = document.createElement('a')
-      link.href = url
-      link.target = target
-
-      if (link.download !== undefined) {
-        link.download = fileName || getFileName(url)
-      }
-
-      if (document.createEvent) {
-        const e = document.createEvent('MouseEvents')
-        e.initEvent('click', true, true)
-        link.dispatchEvent(e)
-        return resolve(true)
-      }
-
-      if (!url.includes('?')) {
-        url += '?download'
-      }
-
-      window.open(url, target)
-      return resolve(true)
-    } else {
-      const canvas = document.createElement('canvas')
-      const img = document.createElement('img')
-      img.setAttribute('crossOrigin', 'Anonymous')
-      img.src = url
-      img.onload = () => {
-        canvas.width = img.width
-        canvas.height = img.height
-        const context = canvas.getContext('2d')!
-        context.drawImage(img, 0, 0, img.width, img.height)
-        // window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
-        // saveAs(imageDataUrl, '附件');
-        canvas.toBlob((blob) => {
-          const link = document.createElement('a')
-          if (!blob) return
-          link.href = window.URL.createObjectURL(blob)
-          link.download = getFileName(url)
-          link.click()
-          URL.revokeObjectURL(link.href)
-          resolve(true)
-        }, 'image/jpeg')
-      }
-      img.onerror = (e) => reject(e)
-    }
-  })
-}
diff --git a/frontend-pc/src/utils/file.ts b/frontend-pc/src/utils/file.ts
deleted file mode 100644
index 8848413..0000000
--- a/frontend-pc/src/utils/file.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/** 文件类型列表项接口 */
-export interface FileTypeListItem {
-  /** 显示名称 */
-  name: string
-  /** 类型值 */
-  value: string
-  /** 菜单图标 */
-  menuIcon: string
-  /** 文件图标 */
-  icon: string
-}
-
-/**
- * 文件类型列表
- * @description 定义系统中支持的文件类型分类
- */
-export const FILE_TYPE_LIST: FileTypeListItem[] = [
-  { name: '全部', value: '0', menuIcon: 'file-all', icon: 'icon-stamp' },
-  { name: '图片', value: '1', menuIcon: 'file-image', icon: 'icon-file-image' },
-  { name: '文档', value: '2', menuIcon: 'file-txt', icon: 'icon-file' },
-  { name: '视频', value: '3', menuIcon: 'file-video', icon: 'icon-video-camera' },
-  { name: '音频', value: '4', menuIcon: 'file-music', icon: 'icon-file-audio' },
-  { name: '其他', value: '5', menuIcon: 'file-other', icon: 'icon-bulb' }
-]
-
-/** 文件扩展名与图标映射接口 */
-export interface FileExtendNameIconMap {
-  [key: string]: string
-}
-
-/**
- * 文件类型图标映射
- * @description 定义文件扩展名与对应图标的映射关系
- */
-export const FILE_ICON_MAP: FileExtendNameIconMap = {
-  // 音频文件
-  mp3: 'file-music',
-  // 视频文件
-  mp4: 'file-video',
-  // 文件夹
-  dir: 'file-dir',
-  // Office 文件
-  ppt: 'file-ppt',
-  doc: 'file-wps',
-  docx: 'file-wps',
-  xls: 'file-excel',
-  xlsx: 'file-excel',
-  // 文本文件
-  txt: 'file-txt',
-  // 压缩文件
-  rar: 'file-rar',
-  zip: 'file-zip',
-  // 网页文件
-  html: 'file-html',
-  css: 'file-css',
-  js: 'file-js',
-  // 未知文件
-  other: 'file-other'
-}
-
-/**
- * 图片文件类型列表
- * @description 系统支持的图片文件扩展名
- */
-export const IMAGE_TYPES = ['jpg', 'png', 'gif', 'jpeg']
-
-/**
- * Office 文件类型列表
- * @description 系统支持的 Office 文件扩展名
- */
-export const OFFICE_TYPES = ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx']
diff --git a/frontend-pc/src/utils/format.ts b/frontend-pc/src/utils/format.ts
new file mode 100644
index 0000000..22aeb98
--- /dev/null
+++ b/frontend-pc/src/utils/format.ts
@@ -0,0 +1,45 @@
+import dayjs from 'dayjs'
+
+/** 时间格式化（后端返回 ISO 串；空值显示成 `—`，不要显示 "Invalid Date"） */
+export function fmtTime(value?: string | null, pattern = 'YYYY-MM-DD HH:mm'): string {
+  if (!value) {
+    return '—'
+  }
+  const d = dayjs(value)
+  return d.isValid() ? d.format(pattern) : String(value)
+}
+
+/** 只要日期 */
+export function fmtDate(value?: string | null): string {
+  return fmtTime(value, 'YYYY-MM-DD')
+}
+
+/** 体积（人类可读） */
+export function fmtSize(bytes?: number | null): string {
+  if (bytes === null || bytes === undefined) {
+    return '—'
+  }
+  if (bytes < 1024) {
+    return `${bytes} B`
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`
+  }
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+/** 百分比（后端给 0~100 的数或 0~1 的小数都能用；null 表示"没有样本"） */
+export function fmtPercent(value?: number | null, digits = 0): string {
+  if (value === null || value === undefined) {
+    return '—'
+  }
+  return `${value.toFixed(digits)}%`
+}
+
+/** 空值显示 */
+export function dash(value?: string | number | null): string {
+  if (value === null || value === undefined || value === '') {
+    return '—'
+  }
+  return String(value)
+}
diff --git a/frontend-pc/src/utils/http.ts b/frontend-pc/src/utils/http.ts
index fc68180..ffe0d7e 100644
--- a/frontend-pc/src/utils/http.ts
+++ b/frontend-pc/src/utils/http.ts
@@ -1,220 +1,171 @@
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
-import { Message, Notification } from '@arco-design/web-vue'
+import type { BizError } from '@/apis/types'
 import axios from 'axios'
-import NProgress from 'nprogress'
-import router from '@/router'
 import { getToken } from '@/utils/auth'
-import 'nprogress/nprogress.css'
-
-// 配置 NProgress
-NProgress.configure({ showSpinner: false })
+import { message } from '@/utils/naive'
 
 /**
- * 本项目后端响应契约（《03-接口设计》§1.3）：
+ * 后端响应契约（《03-接口设计》§1.3）：`{ code, msg, data }`。
  *
- *   { code: 0 | 4xxxx | 5xxxx, msg: string, data: T }
+ * 这一层做三件事，做完之后业务代码里几乎不再出现 `code`：
+ *   1. 成功（`code === 0`）时**直接 resolve `data`**（`await` 拿到的就是数据）；
+ *   2. 失败时**弹一次提示**并 reject 一个带 `bizCode` 的错误（想按码分支也能拿）；
+ *   3. 带上 `Authorization: Bearer` 与平台代管头 `X-Tenant-Id`。
  *
- * 与模板内部的 ApiRes 契约不同，差别有三处，都在下面这层适配里统一处理：
- *
- *   | 维度     | 本项目后端          | 模板内部约定        |
- *   |----------|--------------------|--------------------|
- *   | 成功判定 | code === 0         | success: boolean   |
- *   | 提示文案 | msg                | message            |
- *   | 分页列表 | { list, total }    | { records, total } |
- *
- * ⚠️ 适配放在这里而不是逐个改 api 文件：这三条是全后端统一的契约，
- *    分散到每个 listAPI 去转换，漏一个就是一个"列表永远空着"的 bug。
+ * ⚠️ 401/403/429 **不走业务码**：后端对它们用真实 HTTP 状态码 ——
+ *    所以下面的错误分支才是它们的归属地。别在业务码里找 40301。
  */
 
-/** 本项目后端的成功码 */
-const CODE_SUCCESS = 0
-/**
- * 未登录 / token 失效。
- *
- * 只有这一个业务码需要在这里特殊处理（清 token + 跳登录）。
- * 40301 无权限与 42901 限流<b>不在这里判</b> —— 后端对这两个用的是**真实 HTTP 状态码**
- * （403 / 429，见《03-接口设计》§1.3），由下面的传输层错误分支统一处理。
- * 所以这里不要再补 40301 / 42901 的常量：加了也不会被走到，
- * 反而会让人以为"业务码里也会出现 40301"，从而在错的地方排查问题。
- */
+/** 未登录 / token 失效（唯一需要在业务码里特殊处理的一个） */
 const CODE_UNAUTHORIZED = 40101
 
-/** 传输层 HTTP 状态码文案（业务错误不走这里，见下方响应拦截器） */
-const StatusCodeMessage: Record<number, string> = {
-  400: '请求错误(400)',
-  401: '未授权，请重新登录(401)',
-  403: '拒绝访问(403)',
-  404: '请求出错(404)',
-  408: '请求超时(408)',
-  500: '服务器错误(500)',
-  501: '服务未实现(501)',
-  502: '网络错误(502)',
-  503: '服务不可用(503)',
-  504: '网络超时(504)'
+const STATUS_TEXT: Record<number, string> = {
+  400: '请求参数有误（400）',
+  401: '登录已失效，请重新登录',
+  403: '无权限访问（403）',
+  404: '接口不存在（404）',
+  408: '请求超时（408）',
+  429: '操作过于频繁，请稍后再试',
+  500: '服务器错误（500）',
+  502: '网关错误（502）',
+  503: '服务不可用（503）',
+  504: '网关超时（504）'
 }
 
-/** 创建 axios 实例 */
 const http: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_PREFIX,
-  timeout: 30 * 1000
+  timeout: 60 * 1000
 })
 
 /**
- * 把分页字段补一份 records。
- * 后端返回 { list, total }，模板的 useTable / PageRes 读 records。
- * 补而不替：list 原样保留，两边都能取到，避免破坏原有调用。
+ * 平台运营的「当前学校」——请求头 `X-Tenant-Id`。
+ *
+ * 放在模块级变量而不是从 store 读：store 引 http 会成环。由 store 在变更时调 setter
+ * 推过来，方向永远是 store → http，环就断了。
  */
-function normalizePageShape(payload: unknown): unknown {
-  if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
-    const obj = payload as Record<string, unknown>
-    if (Array.isArray(obj.list) && typeof obj.total === 'number' && obj.records === undefined) {
-      return { ...obj, records: obj.list }
-    }
-  }
-  return payload
+let actingTenantId: number | null = null
+
+export function setActingTenantHeader(tenantId: number | null): void {
+  actingTenantId = tenantId
+}
+
+/** 未登录时的处理（由 router 注册，避免 http → router → views → http 的循环引用） */
+type UnauthorizedHandler = () => void
+let onUnauthorized: UnauthorizedHandler | null = null
+
+export function setUnauthorizedHandler(handler: UnauthorizedHandler): void {
+  onUnauthorized = handler
 }
 
-/** 跳登录页（只跳一次，避免一个页面多个请求同时失效时反复跳） */
 let redirecting = false
-function toLogin() {
-  if (redirecting) return
+function handleUnauthorized(): void {
+  if (redirecting) {
+    return
+  }
   redirecting = true
-  const back = encodeURIComponent(router.currentRoute.value.fullPath)
-  router.replace(`/login?redirect=${back}`).finally(() => {
+  try {
+    onUnauthorized?.()
+  } finally {
     setTimeout(() => {
       redirecting = false
-    }, 800)
-  })
+    }, 1000)
+  }
 }
 
-// 请求拦截器
-http.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
-    NProgress.start()
-    const token = getToken()
-    if (token) {
-      if (!config.headers) {
-        config.headers = {}
-      }
-      // 本项目后端用标准的 Authorization: Bearer（《03-接口设计》§1.2），
-      // 不是模板默认的 token 自定义头
-      config.headers.Authorization = `Bearer ${token}`
-    }
-    return config
-  },
-  (error) => {
-    NProgress.done()
-    return Promise.reject(error)
-  }
-)
+function makeError(text: string, bizCode?: number, bizData?: unknown, status?: number): BizError {
+  const err = new Error(text) as BizError
+  err.bizCode = bizCode
+  err.bizData = bizData
+  err.status = status
+  return err
+}
+
+http.interceptors.request.use((config) => {
+  const token = getToken()
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  if (actingTenantId) {
+    config.headers['X-Tenant-Id'] = String(actingTenantId)
+  }
+  return config
+})
 
-// 响应拦截器
 http.interceptors.response.use(
   (response: AxiosResponse) => {
-    NProgress.done()
-    const raw = response.data
+    const envelope = response.data
 
-    // 非信封响应（文件流等）直接放行
-    if (!raw || typeof raw.code !== 'number') {
+    // 非信封响应（文件流 / 第三方回调）原样放行
+    if (!envelope || typeof envelope.code !== 'number') {
       return response
     }
 
-    // 未登录：清 token 并跳登录
-    if (raw.code === CODE_UNAUTHORIZED) {
-      toLogin()
-      return Promise.reject(new Error(raw.msg || '登录已失效，请重新登录'))
-    }
-
-    // 业务成功：适配成模板的 ApiRes 形状
-    if (raw.code === CODE_SUCCESS) {
-      response.data = {
-        code: 200,
-        success: true,
-        message: raw.msg || 'success',
-        data: normalizePageShape(raw.data)
-      }
+    if (envelope.code === 0) {
+      response.data = envelope.data
       return response
     }
 
-    // 业务失败：按文案长度选择 Message（短）或 Notification（长），与原实现一致
-    const message = raw.msg || '服务器端错误'
-    if (message.length <= 15) {
-      Message.error(message)
-    } else {
-      Notification.error(message)
+    if (envelope.code === CODE_UNAUTHORIZED) {
+      handleUnauthorized()
+      return Promise.reject(makeError(envelope.msg || '登录已失效，请重新登录', envelope.code, envelope.data))
     }
-    // 把后端业务码附在错误上，便于调用方按码分支（如租户重名）
-    const err = new Error(message) as Error & { bizCode?: number, bizData?: unknown }
-    err.bizCode = raw.code
-    err.bizData = raw.data
-    return Promise.reject(err)
+
+    const text = envelope.msg || '操作失败'
+    message.error(text)
+    return Promise.reject(makeError(text, envelope.code, envelope.data))
   },
   (error) => {
-    NProgress.done()
-    Message.clear()
-    const response = Object.assign({}, error.response)
-
-    // 401/403/429 这三个后端用真实 HTTP 状态码（《03-接口设计》§1.3）
-    if (response?.status === 401) {
-      toLogin()
-    } else {
-      const msg = StatusCodeMessage[response?.status] || '系统异常, 请检查网络或联系管理员！'
-      Message.error(msg)
+    const status: number | undefined = error?.response?.status
+    if (status === 401) {
+      handleUnauthorized()
+      return Promise.reject(makeError('登录已失效，请重新登录', undefined, undefined, 401))
     }
-
-    const err = new Error(error.message) as Error & { status?: number }
-    err.status = response?.status
-    return Promise.reject(err)
+    const text = STATUS_TEXT[status ?? 0] || '网络异常，请检查网络后重试'
+    message.error(text)
+    return Promise.reject(makeError(text, undefined, undefined, status))
   }
 )
 
-/** 封装请求方法 */
-const request = <T = unknown>(config: AxiosRequestConfig): Promise<ApiRes<T>> => {
-  return new Promise((resolve, reject) => {
-    http
-      .request<T>(config)
-      .then((res: AxiosResponse) => resolve(res.data))
-      .catch((err: { message: string }) => reject(err))
-  })
-}
+/**
+ * 把 axios 的响应**在运行时**取出 `data`。
+ *
+ * ⚠️ 这一句是整个请求层最容易写错的地方，这里踩过一次：
+ *    上面的响应拦截器是按 axios 的约定写的 —— 它**只能返回一个"响应对象"**，
+ *    于是 `response.data = envelope.data` 只是把信封里的 `data` 换成了业务数据，
+ *    **promise 本身仍然 resolve 成那个响应对象**。
+ *    如果这里只做类型断言（`as unknown as Promise<T>`）而不真的取 `.data`，
+ *    那么所有 `await getXxx()` 拿到的都是 AxiosResponse ——
+ *    表现是"接口明明返回了数据，页面却什么也没有"（`page.list` 是 undefined），
+ *    而且**不报任何错**。登录页是第一个撞上的：它拿公钥去加密，拿到的是个对象。
+ *
+ *    所以：拦截器负责"拆信封并弹提示"，这里负责"把 data 交出去"，
+ *    两件事都必须做，缺一不可。
+ */
+const unwrap = <T>(promise: Promise<AxiosResponse>): Promise<T> =>
+  promise.then((response) => response.data as T)
 
-/** GET 请求 */
-const get = <T = any>(url: string, params?: object, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
-  return request({
-    method: 'get',
-    url,
-    params,
-    ...config
-  })
-}
+const get = <T = unknown>(url: string, params?: object, config?: AxiosRequestConfig): Promise<T> =>
+  unwrap<T>(http.get(url, { params, ...config }))
 
-/** POST 请求 */
-const post = <T = any>(url: string, params?: object, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
-  return request({
-    method: 'post',
-    url,
-    data: params,
-    ...config
-  })
-}
+const post = <T = unknown>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> =>
+  unwrap<T>(http.post(url, data, config))
 
-/** PUT 请求（本项目后端大量使用 PUT，模板原来只有 get/post） */
-const put = <T = any>(url: string, params?: object, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
-  return request({
-    method: 'put',
-    url,
-    data: params,
-    ...config
-  })
-}
+const put = <T = unknown>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> =>
+  unwrap<T>(http.put(url, data, config))
 
-/** DELETE 请求 */
-const del = <T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
-  return request({
-    method: 'delete',
-    url,
-    ...config
-  })
-}
+const del = <T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> =>
+  unwrap<T>(http.delete(url, config))
+
+/**
+ * 任意方法的原样请求（上传 FormData、要自定义 timeout 时用）。
+ *
+ * ⚠️ 与上面四个一样，返回的是**拆过信封的 data** —— 调用方不要再写 `res.data`。
+ *    要拿原始响应（文件流）请用下面导出的 `raw`。
+ */
+const request = <T = unknown>(config: AxiosRequestConfig): Promise<T> =>
+  unwrap<T>(http.request(config))
+
+/** 需要拿原始响应（文件流）时用它，例如导出包下载 */
+export const raw = http
 
 export default { get, post, put, delete: del, request }
diff --git a/frontend-pc/src/utils/index.ts b/frontend-pc/src/utils/index.ts
deleted file mode 100644
index 7383c54..0000000
--- a/frontend-pc/src/utils/index.ts
+++ /dev/null
@@ -1,297 +0,0 @@
-import { camelCase, upperFirst } from 'lodash-es'
-import { browse, mapTree } from 'xe-utils'
-import { isExternal } from '@/utils/validate'
-
-export * from './modules/getFieldToRangTimeForm'
-export * from './modules/getRangeTimeToFieldForm'
-
-/**
- * @description 工具函数库
- * @recommend 优先使用 lodash-es、xe-utils、dayjs 等成熟库的方法
- */
-
-// =============== 类型定义 ===============
-
-/** 字符串去除空格的位置 */
-type TrimPosition = 'both' | 'left' | 'right' | 'all'
-
-/** 树形结构基础接口 */
-interface TreeNode {
-  children?: TreeNode[]
-  [key: string]: any
-}
-
-/** 可排序的树节点 */
-interface SortableTreeNode extends TreeNode {
-  sort: number
-  children?: SortableTreeNode[]
-}
-
-// =============== 对象操作 ===============
-
-/**
- * 获取对象属性值（类型安全）
- * @param obj - 目标对象
- * @param key - 属性键名
- * @returns 属性值
- */
-export function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
-  return obj[key]
-}
-
-/**
- * 深拷贝
- * @param data - 要拷贝的数据
- * @returns 深拷贝后的数据
- */
-export function deepClone<T>(data: T): T {
-  if (typeof data !== 'object' || data === null) return data
-  const newData: any = Array.isArray(data) ? [] : {}
-  for (const key in data) {
-    newData[key] = typeof data[key] === 'object' ? deepClone(data[key]) : data[key]
-  }
-  return newData
-}
-
-// =============== 字符串操作 ===============
-
-/**
- * 去除字符串空格
- * @param str - 目标字符串
- * @param pos - 去除位置，默认两端
- * @returns 处理后的字符串
- */
-export function trim(str: string, pos: TrimPosition = 'both'): string {
-  const trimMap = {
-    both: /^\s+|\s+$/g,
-    left: /^\s*/,
-    right: /(\s*$)/g,
-    all: /\s+/g
-  }
-  return str.replace(trimMap[pos] || trimMap.both, '')
-}
-
-/**
- * 字符串大小写转换
- * @param str - 目标字符串
- * @param type - 转换类型：1-全大写 2-全小写 3-首字母大写
- * @returns 转换后的字符串
- */
-export function toCase(str: string, type: 1 | 2 | 3): string {
-  const caseMap = {
-    1: () => str.toUpperCase(),
-    2: () => str.toLowerCase(),
-    3: () => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
-  }
-  return caseMap[type]?.() || str
-}
-
-/**
- * 格式化电话号码
- * @param mobile - 手机号
- * @param separator - 分隔符
- * @returns 格式化后的电话号码，如：183-7983-6654
- */
-export function formatPhone(mobile: string, separator = '-'): string {
-  return mobile.replace(/(?=(\d{4})+$)/g, separator)
-}
-
-/**
- * 手机号脱敏处理
- * @param phone - 手机号
- * @returns 脱敏后的手机号，如：155****8810
- */
-export function hidePhone(phone: string): string {
-  return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
-}
-
-// =============== 数字操作 ===============
-
-/**
- * 获取指定范围内的随机整数
- * @param min - 最小值
- * @param max - 最大值
- * @returns 随机整数
- */
-export function getRandomInteger(min = 0, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-/**
- * 数组计算工具
- */
-export const arrayMath = {
-  /** 获取数组最大值 */
-  max: (arr: number[]): number => Math.max(...arr),
-  /** 获取数组最小值 */
-  min: (arr: number[]): number => Math.min(...arr),
-  /** 计算数组总和 */
-  sum: (arr: number[]): number => arr.reduce((a, b) => a + b, 0),
-  /** 计算数组平均值 */
-  average: (arr: number[]): number => arrayMath.sum(arr) / arr.length
-}
-
-// =============== 数据验证 ===============
-
-/**
- * 检测数据是否为空
- * @param data - 要检测的数据
- * @returns 是否为空
- */
-export function isEmpty(data: unknown): boolean {
-  if (data === '' || data == null || data === 'undefined' || data === 'null') return true
-  if (typeof data === 'object') {
-    return JSON.stringify(data) === '{}'
-      || JSON.stringify(data) === '[]'
-      || JSON.stringify(data) === '[{}]'
-  }
-  return false
-}
-
-/**
- * 获取数据类型
- * @param value - 要检测的值
- * @returns 数据类型字符串
- */
-export function getTypeOf(value: unknown): string {
-  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
-}
-
-// =============== 日期时间 ===============
-
-/**
- * 判断是否为闰年
- * @param year - 年份
- * @returns 是否闰年
- */
-export function isLeapYear(year: number): boolean {
-  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
-}
-
-/**
- * 获取问候语
- * @returns 根据当前时间返回问候语
- */
-export function goodTimeText(): string {
-  const hour = new Date().getHours()
-  if (hour < 9) return '早上好'
-  if (hour <= 11) return '上午好'
-  if (hour <= 13) return '中午好'
-  if (hour < 20) return '下午好'
-  return '晚上好'
-}
-
-// =============== 文件处理 ===============
-
-/**
- * 格式化文件大小
- * @param size - 文件大小（字节）
- * @returns 格式化后的文件大小
- */
-export function formatFileSize(size: number): string {
-  const units = ['B', 'KB', 'MB', 'GB']
-  let index = 0
-  while (size > 1024 && index < units.length - 1) {
-    size /= 1024
-    index++
-  }
-  return `${Math.round(size * 100) / 100}${units[index]}`
-}
-
-// =============== 颜色处理 ===============
-
-/**
- * RGB转十六进制
- * @param r - 红色值(0-255)
- * @param g - 绿色值(0-255)
- * @param b - 蓝色值(0-255)
- * @returns 十六进制颜色值
- */
-export function rgbToHex(r: number, g: number, b: number): string {
-  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
-}
-
-/**
- * 十六进制颜色转 RGB
- * @param {string} hex - 十六进制颜色，如 #377DFF、377DFF、#FFF
- * @returns {string} rgb(r, g, b) 格式字符串
- */
-export function hexToRgb(hex: string): string {
-  hex = hex.replace(/^#/, '')
-  if (hex.length === 3) {
-    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
-  }
-  const r = Number.parseInt(hex.substring(0, 2), 16)
-  const g = Number.parseInt(hex.substring(2, 4), 16)
-  const b = Number.parseInt(hex.substring(4, 6), 16)
-
-  return `${r}, ${g}, ${b}`
-}
-
-/**
- * 获取随机十六进制颜色
- * @returns 随机颜色值
- */
-export function randomHex(): string {
-  return `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padEnd(6, '0')}`
-}
-
-// =============== 路由工具 ===============
-
-/**
- * 转换路由路径为名称
- * @param path - 路由路径
- * @returns 转换后的名称
- * @example
- * /system => System
- * /system/menu => SystemMenu
- * /crud/detail => CrudDetail
- */
-export function transformPathToName(path: string): string {
-  if (!path || isExternal(path)) return ''
-  return upperFirst(camelCase(path))
-}
-
-// =============== 树形结构处理 ===============
-
-/**
- * 过滤树形结构
- * @param array - 树形数组
- * @param predicate - 过滤函数
- * @returns 过滤后的树形数组
- */
-export function filterTree(array: TreeNode[], predicate: (node: TreeNode) => boolean): TreeNode[] {
-  const filtered = array.filter(predicate)
-  return mapTree(filtered, (item) => {
-    if (item.children?.length) {
-      item.children = item.children.filter(predicate)
-    }
-    return item
-  })
-}
-
-/**
- * 排序树形结构
- * @param array - 可排序的树形数组
- * @returns 排序后的树形数组
- */
-export function sortTree(array: SortableTreeNode[]): SortableTreeNode[] {
-  const sort = (a: SortableTreeNode, b: SortableTreeNode) => (a.sort ?? 0) - (b.sort ?? 0)
-  array.sort(sort)
-  return mapTree(array, (item) => {
-    if (item.children?.length) {
-      item.children.sort(sort)
-    }
-    return item
-  })
-}
-
-// =============== 环境检测 ===============
-
-/**
- * 检测是否为移动端环境
- * @returns 是否为移动端
- */
-export function isMobile(): boolean {
-  return browse().isMobile
-}
diff --git a/frontend-pc/src/utils/mitt.ts b/frontend-pc/src/utils/mitt.ts
deleted file mode 100644
index 2b0d8d7..0000000
--- a/frontend-pc/src/utils/mitt.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import mitt from 'mitt'
-
-type Events = {
-  // 自定义事件名称
-  changeText: string
-}
-
-const mittBus = mitt<Events>()
-
-export default mittBus
diff --git a/frontend-pc/src/utils/modules/getFieldToRangTimeForm.ts b/frontend-pc/src/utils/modules/getFieldToRangTimeForm.ts
deleted file mode 100644
index cc9cc40..0000000
--- a/frontend-pc/src/utils/modules/getFieldToRangTimeForm.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/** F: 表单数据 T: 表单数据排除的属性 V: 表单数据里-时间范围属性拆分成的新属性 */
-type FormatItem<F, T, V> = {
-  field: keyof T | keyof F
-  start: keyof V
-  end: keyof V
-}
-
-/**
- * 合并有时间范围的表单
- * @param form 表单数据
- * @param formatList 需要合并的时间范围属性
- * @returns 合并后的表单数据
- * @example
- * const form = {
-     name: '李四',
-     startTime1: '2024-01-01',
-     endTime1: '2024-01-30',
-     startTime2: '2025-01-01',
-     endTime2: '2025-01-30'
-   }
- *
- * const data = getFieldToRangTimeForm(form, [
-     { field: 'rangTime1', start: 'startTime1', end: 'endTime1' },
-     { field: 'rangTime2', start: 'startTime2', end: 'endTime2' }
-   ])
- *
- * // data的结果为：
- * // {
-   //   name: '李四',
-   //   rangTime1: ['2024-01-01', '2024-01-30'],
-   //   rangTime2: ['2025-01-01', '2025-01-30']
-   // }
- */
-export const getFieldToRangTimeForm = <F, T, V>(form: F, formatList: FormatItem<F, T, V>[]) => {
-  const obj = { ...form } as Omit<F, keyof V> & T
-  for (const i of formatList) {
-    const startTime = obj[i.start as never] as string
-    const endTime = obj[i.end as never] as string
-    if (startTime && endTime) {
-      (obj[i.field as never] as [string, string]) = [startTime, endTime]
-    }
-    delete obj[i.start as never]
-    delete obj[i.end as never]
-  }
-  return obj
-}
diff --git a/frontend-pc/src/utils/modules/getRangeTimeToFieldForm.ts b/frontend-pc/src/utils/modules/getRangeTimeToFieldForm.ts
deleted file mode 100644
index 7a3d29e..0000000
--- a/frontend-pc/src/utils/modules/getRangeTimeToFieldForm.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/** F: 表单数据 T: 表单数据排除的属性 V: 表单数据里-时间范围属性拆分成的新属性 */
-type FormatItem<F, T, V> = {
-  field: keyof T | keyof F
-  start: keyof V
-  end: keyof V
-}
-
-/**
- * 拆分有时间范围的表单
- * @param form 表单数据
- * @param formatList 需要拆分的时间范围属性
- * @returns 时间范围转成指定字段的表单
- * @example
- * const form = {
-     name: '张三',
-     rangTime1: ['2024-01-01', '2024-01-30'] as [string, string],
-     rangTime2: ['2025-01-01', '2025-01-30'] as [string, string]
-   }
- *
- * const data = getRangeTimeToFieldForm(form, [
-    { field: 'rangTime1', start: 'startTime1', end: 'endTime1' },
-    { field: 'rangTime2', start: 'startTime2', end: 'endTime2' }
-   ])
- *
- * // data的结果为：
-   // {
-   //   name: '张三',
-   //   startTime1: '2024-01-01',
-   //   endTime1: '2024-01-30',
-   //   startTime2: '2025-01-01',
-   //   endTime2: '2025-01-30'
-   // }
- */
-export const getRangeTimeToFieldForm = <F, T, V>(form: F, formatList: FormatItem<F, T, V>[]) => {
-  const obj = { ...form } as Omit<F, keyof T> & V
-  for (const i of formatList) {
-    const value = obj[i.field as never] as [string, string]
-    if (Array.isArray(value)) {
-      delete obj[i.field as never];
-      (obj[i.start] as string) = value[0] || '';
-      (obj[i.end] as string) = value[1] || ''
-    }
-  }
-  return obj
-}
diff --git a/frontend-pc/src/utils/naive.ts b/frontend-pc/src/utils/naive.ts
new file mode 100644
index 0000000..8b5201a
--- /dev/null
+++ b/frontend-pc/src/utils/naive.ts
@@ -0,0 +1,17 @@
+/**
+ * 组件树之外的提示能力（`useMessage` 只能在组件里用）。
+ *
+ * http 拦截器、路由守卫这些地方都要弹提示，用 `createDiscreteApi` 建一套离屏实例，
+ * 全应用共用一份 —— 每次调用新建实例会导致"弹出一堆重复提示"且不消失。
+ */
+import { createDiscreteApi } from 'naive-ui'
+
+const { message, dialog, notification, loadingBar } = createDiscreteApi(
+  ['message', 'dialog', 'notification', 'loadingBar'],
+  {
+    messageProviderProps: { max: 3, duration: 3000 },
+    notificationProviderProps: { max: 3 }
+  }
+)
+
+export { dialog, loadingBar, message, notification }
diff --git a/frontend-pc/src/utils/permission.ts b/frontend-pc/src/utils/permission.ts
deleted file mode 100644
index 32108f6..0000000
--- a/frontend-pc/src/utils/permission.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useUserStore } from '@/stores'
-
-/** 超级管理员权限标识 */
-const SUPER_ADMIN_PERMISSION = '*:*:*'
-/** 超级管理员角色标识 */
-const SUPER_ADMIN_ROLE = 'role_admin'
-
-/**
- * 判断是否拥有指定权限
- * @description 检查用户是否拥有指定的权限标识，超级管理员拥有所有权限
- * @param permission - 权限标识
- * @returns {boolean} 是否拥有权限
- */
-export function hasPerm(permission: string): boolean {
-  if (!permission) return false
-  const permissions = useUserStore().permissions
-  return permissions.some((v) => v === SUPER_ADMIN_PERMISSION || v === permission)
-}
-
-/**
- * 判断是否拥有多个权限中的任意一个
- * @description 检查用户是否拥有指定权限列表中的任意一个权限
- * @param permissions - 权限标识数组
- * @returns {boolean} 是否拥有任意一个权限
- */
-export function hasPermOr(permissions: string[]): boolean {
-  return permissions.some((permission) => hasPerm(permission))
-}
-
-/**
- * 判断是否拥有所有指定权限
- * @description 检查用户是否同时拥有指定权限列表中的所有权限
- * @param permissions - 权限标识数组
- * @returns {boolean} 是否拥有所有权限
- */
-export function hasPermAnd(permissions: string[]): boolean {
-  return permissions.every((permission) => hasPerm(permission))
-}
-
-/**
- * 判断是否拥有指定角色
- * @description 检查用户是否拥有指定的角色标识，超级管理员拥有所有角色
- * @param role - 角色标识
- * @returns {boolean} 是否拥有角色
- */
-export function hasRole(role: string): boolean {
-  if (!role) return false
-  const roles = useUserStore().roles
-  return roles.some((v) => v === SUPER_ADMIN_ROLE || v === role)
-}
-
-/**
- * 判断是否拥有多个角色中的任意一个
- * @description 检查用户是否拥有指定角色列表中的任意一个角色
- * @param roles - 角色标识数组
- * @returns {boolean} 是否拥有任意一个角色
- */
-export function hasRoleOr(roles: string[]): boolean {
-  return roles.some((role) => hasRole(role))
-}
-
-/**
- * 判断是否拥有所有指定角色
- * @description 检查用户是否同时拥有指定角色列表中的所有角色
- * @param roles - 角色标识数组
- * @returns {boolean} 是否拥有所有角色
- */
-export function hasRoleAnd(roles: string[]): boolean {
-  return roles.every((role) => hasRole(role))
-}
-
-/** 权限判断工具对象 */
-export default {
-  hasPerm,
-  hasPermOr,
-  hasPermAnd,
-  hasRole,
-  hasRoleOr,
-  hasRoleAnd
-}
diff --git a/frontend-pc/src/utils/regexp.ts b/frontend-pc/src/utils/regexp.ts
deleted file mode 100644
index 0a4335b..0000000
--- a/frontend-pc/src/utils/regexp.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * @description 常用正则表达式集合
- */
-
-/**
- * 手机号码正则
- * @description 匹配中国大陆手机号码（13-19号段）
- * @example
- * Phone.test('13812345678') // true
- * Phone.test('12345678') // false
- */
-export const Phone = /^1[3-9]\d{9}$/
-
-/**
- * 邮箱地址正则
- * @description 匹配标准邮箱地址格式
- * @example
- * Email.test('user@example.com') // true
- * Email.test('invalid.email') // false
- */
-export const Email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
-
-/**
- * 密码强度正则（6位数字）
- * @description 匹配6位纯数字密码
- * @example
- * Password.test('123456') // true
- * Password.test('12345') // false
- */
-export const Password = /^\d{6}$/
-
-/**
- * 6位数字验证码正则
- * @description 匹配6位纯数字验证码
- * @example
- * Code_6.test('123456') // true
- * Code_6.test('12345') // false
- */
-export const Code_6 = /^\d{6}$/
-
-/**
- * 4位数字验证码正则
- * @description 匹配4位纯数字验证码
- * @example
- * Code_4.test('1234') // true
- * Code_4.test('123') // false
- */
-export const Code_4 = /^\d{4}$/
-
-/**
- * URL链接正则
- * @description 匹配标准URL格式，支持http(s)和www开头的链接
- * @example
- * Url.test('https://www.example.com') // true
- * Url.test('http://localhost:3000') // true
- * Url.test('invalid-url') // false
- */
-export const Url = /^(https?:\/\/)?([a-z\d]([a-z\d-]*[a-z\d])?\.)*[a-z\d]([a-z\d-]*[a-z\d])?\.[a-z]{2,6}(\/[\w .-]*)?$/i
-
-/**
- * 十六进制颜色值正则
- * @description 匹配3位或6位十六进制颜色值，支持可选的#前缀
- * @example
- * ColorRegex.test('#333') // true
- * ColorRegex.test('#8c8c8c') // true
- * ColorRegex.test('invalid') // false
- */
-export const ColorRegex = /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
-
-/**
- * 中文字符正则
- * @description 匹配中文字符（不包含标点符号）
- * @example
- * OnlyCh.test('中文') // true
- * OnlyCh.test('Chinese') // false
- */
-export const OnlyCh = /^[\u4E00-\u9FA5]+$/
-
-/**
- * 英文字符正则
- * @description 匹配英文字母（不区分大小写）
- * @example
- * OnlyEn.test('English') // true
- * OnlyEn.test('英文') // false
- */
-export const OnlyEn = /^[a-z]+$/i
-
-/**
- * 强密码正则（已注释，供参考）
- * @description 密码为8-18位数字/字符/符号的组合
- * - 不能是纯数字
- * - 不能是纯小写字母
- * - 不能是纯大写字母
- * - 不能是纯符号
- * - 不能包含中文
- * @example
- * StrongPassword.test('Abc123!@#') // true
- * StrongPassword.test('12345678') // false
- */
-// export const StrongPassword = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/
-
-/**
- * 身份证号码正则
- * @description 匹配18位身份证号码
- * @example
- * IdCard.test('110101199003077758') // true
- * IdCard.test('invalid') // false
- */
-export const IdCard = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/i
-
-/**
- * 金额正则
- * @description 匹配金额格式，支持两位小数
- * @example
- * Money.test('123.45') // true
- * Money.test('123.456') // false
- */
-export const Money = /^[1-9]\d*(\.\d{1,2})?$|^0(\.\d{1,2})?$/
-
-/**
- * 中国大陆座机号码正则
- * @description 匹配座机号码，支持区号和分机号
- * @example
- * TelPhone.test('010-12345678') // true
- * TelPhone.test('010-1234-5678') // true
- */
-export const TelPhone = /^(0\d{2,3}-)?\d{7,8}(-\d{1,4})?$/
diff --git a/frontend-pc/src/utils/rsa.ts b/frontend-pc/src/utils/rsa.ts
index 32ac5fc..2a515bd 100644
--- a/frontend-pc/src/utils/rsa.ts
+++ b/frontend-pc/src/utils/rsa.ts
@@ -1,20 +1,22 @@
 /**
- * 登录密码加密（RSA）
+ * 登录密码加密（RSA）。
  *
- * 公钥从后端 `GET /auth/public-key` 拉取并缓存——这样**轮换密钥不需要重新构建前端**。
- * 否则"后端换了密钥、前端还是旧的"会表现为"所有人密码都错"，而且极难定位。
+ * 公钥从后端 `GET /auth/public-key` 拉取并缓存 —— 这样**轮换密钥不需要重新构建前端**。
+ * 否则"后端换了密钥、前端还是旧的"会表现为"所有人密码都错"，且极难定位。
  *
- * ⚠️ 算法必须与服务端 RsaCipher 一致：**RSA/ECB/PKCS1Padding**，
- *    与 jsencrypt 的默认行为相同。换成 OAEP 会表现为"密码永远错"，两边都改才能换。
+ * ⚠️ 算法必须与服务端 `RsaCipher` 一致：**RSA/ECB/PKCS1Padding**（jsencrypt 的默认行为）。
+ *    换成 OAEP 会表现为"密码永远错"。
  *
- * ⚠️ 这不是用来替代 HTTPS 的。它的唯一目的是**防止明文密码进日志**——
- *    网关、Nginx、APM、链路追踪都会记录请求体，明文密码一旦落进日志就是永久泄露。
+ * ⚠️ 它不是用来替代 HTTPS 的：唯一目的是**防止明文密码进日志** ——
+ *    网关、Nginx、APM 都会记录请求体，明文一旦落进日志就是永久泄露。
  */
 import JSEncrypt from 'jsencrypt'
-// 直接用 http 实例，不经 @/apis/xt —— 否则会形成
-// xt/index → http → router → stores → xt/index 的循环引用
+// 直接用 http，不经 @/apis/xt —— 否则形成 xt → http → … → xt 的环
 import http from '@/utils/http'
 
+/** 折叠空白用（提到模块级：每次调用都新建正则纯属浪费，lint 也会拦） */
+const WHITESPACE_RE = /\s+/g
+
 let cachedKey: string | null = null
 let inflight: Promise<string> | null = null
 
@@ -28,9 +30,9 @@ export async function fetchPublicKey(): Promise<string> {
   }
   inflight = http
     .get<string>('/auth/public-key')
-    .then((res) => {
-      cachedKey = res.data
-      return res.data
+    .then((pem) => {
+      cachedKey = pem
+      return pem
     })
     .finally(() => {
       inflight = null
@@ -41,6 +43,16 @@ export async function fetchPublicKey(): Promise<string> {
 /** 加密密码，返回 Base64 密文 */
 export async function encryptPassword(plain: string): Promise<string> {
   const pem = await fetchPublicKey()
+  if (typeof pem !== 'string' || !pem.includes('BEGIN PUBLIC KEY')) {
+    // ⚠️ 这一条是**踩过的坑**：`/auth/public-key` 若没走到后端（例如 baseURL 少了
+    //    `/api/v1`，请求落到 SPA 兜底上），拿到的是 **index.html** 而不是公钥。
+    //    此时 jsencrypt 只会返回 false，界面显示"密码加密失败" —— 排查方向会完全跑偏
+    //    （去查 jsencrypt、去查密钥轮换，而真正的原因是请求 URL）。
+    //    所以这里把"到底拿到了什么"直接说出来。
+    throw new Error(`公钥格式不对（拿到 ${typeof pem === 'string' ? `${pem.length} 字节` : typeof pem}：`
+      + `${String(pem).slice(0, 30).replace(WHITESPACE_RE, ' ')}…）`)
+  }
+
   const engine = new JSEncrypt()
   engine.setPublicKey(pem)
   const cipher = engine.encrypt(plain)
diff --git a/frontend-pc/src/utils/tag.ts b/frontend-pc/src/utils/tag.ts
new file mode 100644
index 0000000..25592da
--- /dev/null
+++ b/frontend-pc/src/utils/tag.ts
@@ -0,0 +1,55 @@
+/**
+ * 状态色词 → Naive UI 标签色。
+ *
+ * 为什么需要这一层：`apis/xt/*.ts` 里的展示映射（`TASK_STATUS` / `AUDIT_*` /
+ * `EXPORT_STATUS` / `NOTIFY_STATUS` …）是从上一版（Arco）带过来的，
+ * 它们的 `color` 值是 **Arco 的色词**（`green` / `arcoblue` / `gold` / `gray`），
+ * 而 Naive UI 的 `n-tag` 要的是 `type`（`success` / `info` / `warning` / `error` / `default`）。
+ * 直接把它们透传给 `n-tag` 会**静默变成默认灰色**——状态色全丢，且不报错。
+ *
+ * ⚠️ 不要把这些映射的 color 值改成 naive 的 type：那份映射同时被别处
+ *    （例如导出、日志页的文案）引用，改它会牵动一片。只在这里做一次转换。
+ */
+
+export type TagType = 'default' | 'info' | 'success' | 'warning' | 'error'
+
+const COLOR_MAP: Record<string, TagType> = {
+  green: 'success',
+  success: 'success',
+  red: 'error',
+  danger: 'error',
+  error: 'error',
+  orange: 'warning',
+  gold: 'warning',
+  warning: 'warning',
+  yellow: 'warning',
+  blue: 'info',
+  arcoblue: 'info',
+  cyan: 'info',
+  info: 'info',
+  purple: 'info',
+  gray: 'default',
+  grey: 'default',
+  default: 'default'
+}
+
+/** 把色词转成 `n-tag` 的 type（不认识的色词按 default，不猜） */
+export function tagType(color?: string | null): TagType {
+  if (!color) {
+    return 'default'
+  }
+  return COLOR_MAP[color.toLowerCase()] ?? 'default'
+}
+
+/** 从一个 `{ text, color }` 映射里取 type 与文案，省掉每页各写一遍 */
+export function tagOf(
+  map: Record<string | number, { text: string, color: string } | undefined>,
+  key: string | number | null | undefined,
+  fallback = '—'
+): { text: string, type: TagType } {
+  const hit = key === null || key === undefined ? undefined : map[key]
+  if (!hit) {
+    return { text: fallback, type: 'default' }
+  }
+  return { text: hit.text, type: tagType(hit.color) }
+}
diff --git a/frontend-pc/src/utils/typeof.ts b/frontend-pc/src/utils/typeof.ts
deleted file mode 100644
index e493a59..0000000
--- a/frontend-pc/src/utils/typeof.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * @description 类型判断工具函数集合
- * 提供比 typeof 更准确的类型判断方法
- */
-
-/** 获取值的具体类型 */
-const getType = (value: unknown): string => Object.prototype.toString.call(value)
-
-/**
- * 判断是否为数字类型
- * @param value - 要判断的值
- * @example
- * isNumber(123) // true
- * isNumber('123') // false
- * isNumber(NaN) // true
- * isNumber(Infinity) // true
- */
-export function isNumber(value: unknown): value is number {
-  return getType(value) === '[object Number]'
-}
-
-/**
- * 判断是否为字符串类型
- * @param value - 要判断的值
- * @example
- * isString('abc') // true
- * isString(123) // false
- */
-export function isString(value: unknown): value is string {
-  return getType(value) === '[object String]'
-}
-
-/**
- * 判断是否为布尔类型
- * @param value - 要判断的值
- * @example
- * isBoolean(true) // true
- * isBoolean(0) // false
- */
-export function isBoolean(value: unknown): value is boolean {
-  return getType(value) === '[object Boolean]'
-}
-
-/**
- * 判断是否为 null
- * @param value - 要判断的值
- * @example
- * isNull(null) // true
- * isNull(undefined) // false
- */
-export function isNull(value: unknown): value is null {
-  return getType(value) === '[object Null]'
-}
-
-/**
- * 判断是否为 undefined
- * @param value - 要判断的值
- * @example
- * isUndefined(undefined) // true
- * isUndefined(null) // false
- */
-export function isUndefined(value: unknown): value is undefined {
-  return getType(value) === '[object Undefined]'
-}
-
-/**
- * 判断是否为普通对象
- * @param value - 要判断的值
- * @example
- * isObject({}) // true
- * isObject([]) // false
- * isObject(null) // false
- */
-export function isObject(value: unknown): value is Record<string, any> {
-  return getType(value) === '[object Object]'
-}
-
-/**
- * 判断是否为数组
- * @param value - 要判断的值
- * @example
- * isArray([]) // true
- * isArray({}) // false
- * @recommend 推荐使用 Array.isArray() 代替
- */
-export function isArray(value: unknown): value is any[] {
-  return getType(value) === '[object Array]'
-}
-
-/**
- * 判断是否为日期对象
- * @param value - 要判断的值
- * @example
- * isDate(new Date()) // true
- * isDate('2024-01-01') // false
- */
-export function isDate(value: unknown): value is Date {
-  return getType(value) === '[object Date]'
-}
-
-/**
- * 判断是否为正则表达式
- * @param value - 要判断的值
- * @example
- * isRegExp(/abc/) // true
- * isRegExp('/abc/') // false
- */
-export function isRegExp(value: unknown): value is RegExp {
-  return getType(value) === '[object RegExp]'
-}
-
-/**
- * 判断是否为 Set 对象
- * @param value - 要判断的值
- * @example
- * isSet(new Set()) // true
- * isSet([]) // false
- */
-export function isSet(value: unknown): value is Set<any> {
-  return getType(value) === '[object Set]'
-}
-
-/**
- * 判断是否为 Map 对象
- * @param value - 要判断的值
- * @example
- * isMap(new Map()) // true
- * isMap({}) // false
- */
-export function isMap(value: unknown): value is Map<any, any> {
-  return getType(value) === '[object Map]'
-}
-
-/**
- * 判断是否为 Promise 对象
- * @param value - 要判断的值
- * @example
- * isPromise(Promise.resolve()) // true
- * isPromise({ then: () => {} }) // false
- */
-export function isPromise(value: unknown): value is Promise<any> {
-  return getType(value) === '[object Promise]'
-}
-
-/**
- * 判断是否为函数
- * @param value - 要判断的值
- * @example
- * isFunction(() => {}) // true
- * isFunction(class {}) // true
- * isFunction({}) // false
- */
-export function isFunction(value: unknown): value is (...args: any[]) => any {
-  return typeof value === 'function'
-}
-
-/**
- * 判断是否为有效数字（排除 NaN 和 Infinity）
- * @param value - 要判断的值
- * @example
- * isValidNumber(123) // true
- * isValidNumber(NaN) // false
- * isValidNumber(Infinity) // false
- */
-export function isValidNumber(value: unknown): value is number {
-  return isNumber(value) && !Number.isNaN(value) && Number.isFinite(value)
-}
-
-/**
- * 判断是否为空值（null 或 undefined）
- * @param value - 要判断的值
- * @example
- * isNil(null) // true
- * isNil(undefined) // true
- * isNil('') // false
- */
-export function isNil(value: unknown): value is null | undefined {
-  return isNull(value) || isUndefined(value)
-}
diff --git a/frontend-pc/src/utils/validate.ts b/frontend-pc/src/utils/validate.ts
deleted file mode 100644
index f6afd01..0000000
--- a/frontend-pc/src/utils/validate.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/** 判断 path 是否为外链 */
-export const isExternal = (path: string) => {
-  const reg = /^(?:https?:|mailto:|tel:)/
-  return reg.test(path)
-}
-
-/** 判断 url 是否是 http 或 https */
-export function isHttp(url: string) {
-  return url.includes('http://') || url.includes('https://')
-}
diff --git a/frontend-pc/src/views/audit/AuditDetailDrawer.vue b/frontend-pc/src/views/audit/AuditDetailDrawer.vue
index 34534fc..a113afc 100644
--- a/frontend-pc/src/views/audit/AuditDetailDrawer.vue
+++ b/frontend-pc/src/views/audit/AuditDetailDrawer.vue
@@ -1,208 +1,25 @@
-<template>
-  <a-drawer v-model:visible="visible" :width="1000" :mask-closable="false" :footer="false"
-    unmount-on-close @cancel="close">
-    <template #title>
-      <span>{{ detail?.realName || '填报单' }}</span>
-      <a-tag v-if="detail" class="detail__head-tag" :color="submitTag.color">
-        {{ detail.statusText || submitTag.text }}
-      </a-tag>
-      <span v-if="detail" class="detail__head-sub">
-        {{ detail.taskName }} · {{ detail.orgName || '未分班' }} · {{ fmtTime(detail.submitTime) }} 提交
-      </span>
-    </template>
-
-    <a-spin :loading="loading" class="detail__spin">
-      <template v-if="detail">
-        <!--
-          操作区放在**最上面**：审核是"看完就点"的动作，按钮在最下面意味着
-          每次都要滚过整页材料 —— 而审核员一天要看几十份。
-        -->
-        <div class="detail__bar">
-          <a-space wrap>
-            <a-button v-if="canApprove" type="primary" size="small" :loading="acting"
-              @click="onApprove">
-              <template #icon><IconCheck /></template>
-              {{ nodeText }}通过
-            </a-button>
-            <a-tooltip v-else :content="detail.approvePolicy?.reason || '当前不能通过'">
-              <a-button type="primary" size="small" disabled>
-                {{ nodeText }}通过
-              </a-button>
-            </a-tooltip>
-
-            <a-button v-if="canReject" status="danger" size="small" @click="onReject">
-              <template #icon><IconClose /></template>
-              驳回
-            </a-button>
-
-            <a-popconfirm v-if="canRevoke" content="撤回这次审核结论？撤回是再写一条记录，历史不会被删掉。"
-              @ok="onRevoke">
-              <a-button size="small" status="warning">撤回审核结论</a-button>
-            </a-popconfirm>
-
-            <a-button size="small" @click="reload">刷新校验结果</a-button>
-          </a-space>
-
-          <a-space>
-            <span class="detail__muted">证件号 {{ detail.idCardMask || '—' }}</span>
-            <a-tag v-if="detail.redCount" color="red">红 {{ detail.redCount }}</a-tag>
-            <a-tag v-if="detail.yellowCount" color="orange">黄 {{ detail.yellowCount }}</a-tag>
-            <a-tag v-if="detail.rejectCount" color="gray">已驳 {{ detail.rejectCount }} 次</a-tag>
-          </a-space>
-        </div>
-
-        <!-- 有红问题时把"为什么不能通过"写在最显眼处，而不是等用户点了才知道 -->
-        <a-alert v-if="redTitles.length" type="error" class="detail__alert">
-          <template #title>
-            有 {{ redTitles.length }} 项阻断级问题，<strong>不能通过</strong>：
-            {{ redTitles.join('；') }}
-          </template>
-        </a-alert>
-
-        <a-alert v-if="lastReject" type="warning" :show-icon="false" class="detail__alert">
-          <template #title>
-            上次驳回：{{ lastReject.reasonText || lastReject.reasonCode }}
-          </template>
-        </a-alert>
-
-        <!-- ── 材料 ─────────────────────────────── -->
-        <div class="detail__section">材料（{{ doneCount }} / {{ materialGroups.length }} 已交）</div>
-        <a-empty v-if="!materialGroups.length" description="这个任务没有配置材料项" />
-        <div v-for="g in materialGroups" :key="g.materialCode" class="detail__group">
-          <div class="detail__group-head">
-            <span class="detail__group-name">{{ g.materialName }}</span>
-            <a-tag v-if="g.required" color="red" size="small">必传</a-tag>
-            <!-- 条件材料对学生不可见时不该要求他交，审核页上要说清 -->
-            <a-tag v-if="!g.visible" color="gray" size="small">本次不适用</a-tag>
-            <a-tag :color="g.done ? 'green' : 'orange'" size="small">
-              {{ g.done ? '已交' : '未交' }}
-            </a-tag>
-            <span class="detail__code">{{ g.materialCode }}</span>
-          </div>
-
-          <div v-if="g.files?.length" class="detail__files">
-            <div v-for="f in g.files" :key="f.id" class="detail__file">
-              <FilePreviewImage :file="f" />
-              <div class="detail__file-meta">
-                <div v-if="f.source !== 1" class="detail__file-src">
-                  {{ FILE_SOURCE[f.source ?? 0] || '其他来源' }}
-                </div>
-                <div class="detail__muted">
-                  {{ f.finalSizeKb ? `${f.finalSizeKb} KB` : '—' }}
-                  <template v-if="f.width && f.height"> · {{ f.width }}×{{ f.height }}</template>
-                  <template v-if="f.dpi"> · {{ f.dpi }}dpi</template>
-                </div>
-                <a-tag v-if="f.validateStatus !== null"
-                  :color="FILE_VALIDATE[f.validateStatus]?.color ?? 'gray'" size="small">
-                  {{ FILE_VALIDATE[f.validateStatus]?.text ?? '未知' }}
-                </a-tag>
-                <!-- 识别结果 M4 未做时为 null：不显示"识别中"，那是在说谎 -->
-                <div v-if="f.detect" class="detail__muted">
-                  识别：{{ f.detect.sourceText || f.detect.source || '—' }}
-                  <template v-if="f.detect.confidence !== null && f.detect.confidence !== undefined">
-                    （置信度 {{ f.detect.confidence }}）
-                  </template>
-                  <a-tag v-if="f.detect.conflict" color="red" size="small">疑似串档</a-tag>
-                </div>
-                <div v-for="(i, idx) in f.issues ?? []" :key="idx" class="detail__issue-line"
-                  :class="`detail__issue-line--${i.severity}`">
-                  {{ i.title }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-else class="detail__muted detail__empty-file">没有文件</div>
-        </div>
-
-        <!-- ── 问题清单 ─────────────────────────── -->
-        <div class="detail__section">
-          校验问题（{{ issues.length }}）
-          <span class="detail__muted">现场重算，不是提交时的快照</span>
-        </div>
-        <a-empty v-if="!issues.length" description="没有校验问题" />
-        <a-table v-else :data="issues" :pagination="false" size="small" row-key="ruleCode"
-          :bordered="{ cell: true }">
-          <template #columns>
-            <a-table-column title="级别" :width="80" align="center">
-              <template #cell="{ record }">
-                <a-tag :color="ISSUE_SEVERITY[record.severity]?.color ?? 'gray'" size="small">
-                  {{ ISSUE_SEVERITY[record.severity]?.text ?? '—' }}
-                </a-tag>
-              </template>
-            </a-table-column>
-            <a-table-column title="规则" :width="110">
-              <template #cell="{ record }">
-                <span class="detail__code">{{ record.ruleCode }}</span>
-              </template>
-            </a-table-column>
-            <a-table-column title="问题">
-              <template #cell="{ record }">
-                <div>{{ record.title }}</div>
-                <div class="detail__muted">{{ record.detail }}</div>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
-
-        <!-- ── 学生改过什么 ─────────────────────── -->
-        <template v-if="changedDetail.length">
-          <div class="detail__section">
-            学生改动（{{ changedDetail.length }} 项）
-            <span class="detail__muted">预填来自名册，下面是"老师填的 vs 学生交的"</span>
-          </div>
-          <a-table :data="changedDetail" :pagination="false" size="small" row-key="field"
-            :bordered="{ cell: true }">
-            <template #columns>
-              <a-table-column title="字段" :width="160">
-                <template #cell="{ record }">{{ record.label || record.field }}</template>
-              </a-table-column>
-              <a-table-column title="名册（老师填的）">
-                <template #cell="{ record }">
-                  <span class="detail__muted">{{ display(record.rosterValue) }}</span>
-                </template>
-              </a-table-column>
-              <a-table-column title="学生提交的">
-                <template #cell="{ record }">
-                  <span class="detail__changed">{{ display(record.studentValue) }}</span>
-                </template>
-              </a-table-column>
-            </template>
-          </a-table>
-        </template>
-
-        <!-- ── 填报表单 ─────────────────────────── -->
-        <div class="detail__section">填报内容</div>
-        <a-descriptions :column="2" size="small" bordered>
-          <a-descriptions-item v-for="row in formRows" :key="row.key" :label="row.label">
-            <span :class="{ detail__changed: row.changed }">{{ display(row.value) }}</span>
-          </a-descriptions-item>
-        </a-descriptions>
-
-        <!-- ── 时间轴 ───────────────────────────── -->
-        <div class="detail__section">审核时间轴（最近的在上）</div>
-        <a-empty v-if="!timeline.length" description="暂无记录" />
-        <div v-for="(t, idx) in timeline" :key="`${t.id}-${idx}`" class="detail__tl">
-          <a-tag :color="TIMELINE_NODE[t.node]?.color ?? 'gray'" size="small">
-            {{ t.nodeText || TIMELINE_NODE[t.node]?.text || '—' }}
-          </a-tag>
-          <span class="detail__tl-text">
-            {{ t.actionText || '—' }}
-            <template v-if="t.auditorName"> · {{ t.auditorName }}</template>
-            <template v-if="t.reasonText"> · {{ t.reasonText }}</template>
-          </span>
-          <span class="detail__muted">{{ fmtTime(t.time) }}</span>
-        </div>
-      </template>
-    </a-spin>
-
-    <AuditRejectModal ref="rejectRef" :materials="materialGroups" @rejected="afterAction" />
-  </a-drawer>
-</template>
-
 <script setup lang="ts">
-import type { AuditDetail, AuditIssue } from '@/apis/xt/audit'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconCheck, IconClose } from '@arco-design/web-vue/es/icon'
+import type { DataTableColumns } from 'naive-ui'
+import type { AuditChangedItem, AuditDetail, AuditIssue } from '@/apis/xt/audit'
+import {
+  NAlert,
+  NButton,
+  NDataTable,
+  NDescriptions,
+  NDescriptionsItem,
+  NDivider,
+  NDrawer,
+  NDrawerContent,
+  NEmpty,
+  NPopconfirm,
+  NSpace,
+  NSpin,
+  NTag,
+  NTooltip,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, ref, useTemplateRef } from 'vue'
 import {
   approveSubmission,
   AUDIT_ERROR_HINT,
@@ -212,30 +29,34 @@ import {
   getAuditDetail,
   ISSUE_SEVERITY,
   revokeSubmission,
+  SUBMISSION_STATUS,
   TIMELINE_NODE
 } from '@/apis/xt/audit'
 import { getFormSchema } from '@/apis/xt/form-schema'
-import { useUserStore } from '@/stores'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useUserStore } from '@/stores/user'
+import { tagOf, tagType } from '@/utils/tag'
 import AuditRejectModal from './AuditRejectModal.vue'
-import FilePreviewImage from './FilePreviewImage.vue'
+import FilePreview from './FilePreview.vue'
 
 /**
  * 审核详情（原型 ③ / ⑥，契约 §11.2）。
  *
- * ## 四个"必须这么显示"的地方
+ * ## 五个"必须这么显示"的地方
  *
- * 1. **红问题要挡在按钮上**。不能通过的真正原因（红问题）写在按钮旁边的提示里，
+ * 1. **红问题要挡在按钮上**。不能通过的真正原因（红问题）写在按钮旁边，
  *    而不是等用户点了再弹一个 40032 —— 那会让人以为是系统故障。
  *    判定仍以**服务端** `approvePolicy.canApprove` 为准，前端不自己算。
- *
  * 2. **问题清单是现场重算的**。所以标题里写明"不是提交时的快照"，
  *    否则审核员会拿它去和手机上的红黄计数对，然后怀疑哪边坏了。
- *
- * 3. **识别结果可能为 null**（M4 未做）。这时**不显示"识别中"**，
+ * 3. **识别结果可能为 null**（材料识别模块未做）。这时**不显示"识别中"**，
  *    那是在说谎；直接不显示这一行。
- *
  * 4. **撤回是"再写一条记录"**，不是删掉上一条 —— 所以二次确认里要说清，
  *    免得有人以为点错了会把历史抹掉。
+ * 5. **红问题清单的兜底分支口径是 `severity === 3`（阻断），不是 1**。
+ *    上一版这里写的是 `=== 1`，而按 `ISSUE_SEVERITY` 的口径 1 是"提示" ——
+ *    结果是把提示级的文字摆进"不能通过"的红色告警里。以服务端的
+ *    `Issue.ERROR = 3` 为准（`SubmitDtos.Issue`）。
  */
 defineOptions({ name: 'AuditDetailDrawer' })
 
@@ -248,6 +69,8 @@ const emit = defineEmits<{
   (e: 'changed'): void
 }>()
 
+const message = useMessage()
+const dialog = useDialog()
 const userStore = useUserStore()
 
 const visible = ref(false)
@@ -263,28 +86,30 @@ const nodeText = computed(() => (node.value === 2 ? '终审' : '初审'))
 
 const materialGroups = computed(() => detail.value?.materials ?? [])
 const issues = computed<AuditIssue[]>(() => detail.value?.issues ?? [])
-const changedDetail = computed(() => detail.value?.changedDetail ?? [])
+const changedDetail = computed<AuditChangedItem[]>(() => detail.value?.changedDetail ?? [])
 const timeline = computed(() => detail.value?.timeline ?? [])
 
 const doneCount = computed(() => materialGroups.value.filter((g) => g.done).length)
 
+/** 服务端 policy 优先；没有 policy 时按"阻断级问题"兜底（severity 3 = ERROR） */
 const redTitles = computed(() => {
   const fromPolicy = detail.value?.approvePolicy?.redTitles
   if (fromPolicy?.length) {
     return fromPolicy
   }
-  return issues.value.filter((i) => i.severity === 1).map((i) => i.title)
+  return issues.value.filter((i) => i.severity === 3).map((i) => i.title)
 })
 
 /** 判定一律以服务端 policy 为准（前端只负责把原因显示出来） */
 const canApprove = computed(() => detail.value?.approvePolicy?.canApprove === true)
+const blockReason = computed(() => detail.value?.approvePolicy?.reason || '当前不能通过')
 const canReject = computed(() => {
   const s = detail.value?.status
   return s === 2 || s === 3
 })
+/** 撤回既要服务端允许（已导出/已归档时不允许），也要有 `audit:withdraw` */
 const canRevoke = computed(
-  () => detail.value?.revokePolicy?.canRevoke === true
-    && userStore.permissions.includes('audit:withdraw')
+  () => detail.value?.revokePolicy?.canRevoke === true && userStore.has('audit:withdraw')
 )
 
 const lastReject = computed(() => {
@@ -295,17 +120,16 @@ const lastReject = computed(() => {
   return { reasonCode: d.lastRejectCode, reasonText: d.lastRejectText }
 })
 
-const submitTag = computed(() => {
-  const s = detail.value?.status
-  const map: Record<number, { text: string, color: string }> = {
-    1: { text: '草稿', color: 'gray' },
-    2: { text: '待初审', color: 'orange' },
-    3: { text: '待终审', color: 'arcoblue' },
-    4: { text: '已驳回', color: 'red' },
-    5: { text: '已通过', color: 'green' }
-  }
-  return map[s ?? 0] ?? { text: '未知', color: 'gray' }
-})
+/**
+ * 状态标签。
+ *
+ * ⚠️ 这里原来写的是 `1 草稿 / 2 待初审 / 3 待终审 / 4 已驳回 / 5 已通过` —— 那是**名册行**的口径，
+ *    套到**填报单**上整体错位一格：文案被服务端的 `statusText` 兜住了看不出来，
+ *    但 tag 的**颜色**只取自本地表，于是"已通过"一直是待终审的蓝。
+ *    正确口径（`0 草稿 / 1 待初审 / 2 待终审 / 3 已通过 / 4 已驳回 / 5 已归档`）现放在
+ *    `apis/xt/audit.ts` 的 `SUBMISSION_STATUS`，与接口同处，避免再各写一份。
+ */
+const submitTag = computed(() => tagOf(SUBMISSION_STATUS, detail.value?.status, '未知'))
 
 /** 表单值 → 可读文本 */
 function display(v: unknown): string {
@@ -346,6 +170,47 @@ const formRows = computed(() => {
   return rows
 })
 
+const issueColumns: DataTableColumns<AuditIssue> = [
+  {
+    title: '级别',
+    key: 'severity',
+    width: 80,
+    align: 'center',
+    render: (row) => {
+      const meta = tagOf(ISSUE_SEVERITY, row.severity, '—')
+      return h(NTag, { size: 'small', bordered: false, type: meta.type }, { default: () => meta.text })
+    }
+  },
+  {
+    title: '规则',
+    key: 'ruleCode',
+    width: 110,
+    render: (row) => h('span', { class: 'detail__code' }, row.ruleCode)
+  },
+  {
+    title: '问题',
+    key: 'title',
+    render: (row) => h('div', [
+      h('div', row.title),
+      h('div', { class: 'detail__muted' }, row.detail)
+    ])
+  }
+]
+
+const changedColumns: DataTableColumns<AuditChangedItem> = [
+  { title: '字段', key: 'label', width: 160, render: (row) => row.label || row.field },
+  {
+    title: '名册（老师填的）',
+    key: 'rosterValue',
+    render: (row) => h('span', { class: 'detail__muted' }, display(row.rosterValue))
+  },
+  {
+    title: '学生提交的',
+    key: 'studentValue',
+    render: (row) => h('span', { class: 'detail__changed' }, display(row.studentValue))
+  }
+]
+
 function fmtTime(v: string | null | undefined) {
   return v ? v.replace('T', ' ').slice(0, 16) : '—'
 }
@@ -353,15 +218,14 @@ function fmtTime(v: string | null | undefined) {
 async function load() {
   loading.value = true
   try {
-    const res = await getAuditDetail(submissionId.value)
-    detail.value = res.data ?? null
+    detail.value = await getAuditDetail(submissionId.value)
     const taskId = detail.value?.taskId
     if (taskId && !Object.keys(labelMap.value).length) {
       // 字段中文名从**当前**表单定义取。历史提交若用了已删除的扩展字段，就退回显示 key ——
       // 显示 key 虽然不漂亮，但不会把两个字段的标签张冠李戴。
       const fs = await getFormSchema(taskId)
       const map: Record<string, string> = {}
-      for (const f of [...(fs.data?.fields ?? []), ...(fs.data?.extras ?? [])]) {
+      for (const f of [...(fs?.fields ?? []), ...(fs?.extras ?? [])]) {
         map[f.key] = f.label || f.key
       }
       labelMap.value = map
@@ -373,7 +237,7 @@ async function load() {
 
 async function reload() {
   await load()
-  Message.success('已重新校验')
+  message.success('已重新校验')
 }
 
 async function open(id: number) {
@@ -399,11 +263,10 @@ async function onApprove() {
       actionSource: 'BUTTON',
       finalOpinion: node.value === 2 ? '终审通过' : undefined
     })
-    const r = res.data
-    if (r?.replayed) {
-      Message.info('这一单刚才已经审过了（重复请求已幂等处理）')
+    if (res?.replayed) {
+      message.info('这一单刚才已经审过了（重复请求已幂等处理）')
     } else {
-      Message.success(`${nodeText.value}通过`)
+      message.success(`${nodeText.value}通过`)
     }
     afterAction()
   } catch (e) {
@@ -411,14 +274,16 @@ async function onApprove() {
     const hint = code ? AUDIT_ERROR_HINT[code] : ''
     if (code === 40032) {
       // 红问题：把服务端的话原样展示 + 提示，并刷新详情（现场重算，计数可能变了）
-      Modal.warning({
+      dialog.warning({
         title: '不能通过',
         content: `${(e as Error).message}\n\n${hint}\n\n点「确定」后本页会重新校验一次。`,
-        hideCancel: true,
-        onOk: () => load()
+        positiveText: '确定',
+        onPositiveClick: () => {
+          void load()
+        }
       })
     } else if (hint) {
-      Message.error(`${(e as Error).message}（${hint}）`)
+      message.error(`${(e as Error).message}（${hint}）`)
     }
   } finally {
     acting.value = false
@@ -435,155 +300,338 @@ async function onRevoke() {
       auditRecordId: detail.value?.revokePolicy?.auditRecordId ?? undefined,
       reason: 'PC 端撤回'
     })
-    Message.success(res.data?.statusText || '已撤回')
+    message.success(res?.statusText || '已撤回')
     afterAction()
   } catch (e) {
     const code = bizCodeOf(e)
     const hint = code ? AUDIT_ERROR_HINT[code] : ''
-    Message.error(hint ? `${(e as Error).message}（${hint}）` : (e as Error).message)
+    message.error(hint ? `${(e as Error).message}（${hint}）` : (e as Error).message)
   }
 }
 
 defineExpose({ open })
 </script>
 
-<style lang="scss" scoped>
-.detail {
-  &__head-tag {
-    margin-left: 8px;
-  }
+<template>
+  <NDrawer v-model:show="visible" :width="1000" placement="right" :mask-closable="false">
+    <NDrawerContent :native-scrollbar="false" closable>
+      <template #header>
+        <span>{{ detail?.realName || '填报单' }}</span>
+        <NTag v-if="detail" class="detail__head-tag" size="small" :bordered="false" :type="submitTag.type">
+          {{ detail.statusText || submitTag.text }}
+        </NTag>
+        <span v-if="detail" class="detail__head-sub">
+          {{ detail.taskName }} · {{ detail.orgName || '未分班' }} · {{ fmtTime(detail.submitTime) }} 提交
+        </span>
+      </template>
 
-  &__head-sub {
-    margin-left: 12px;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--color-text-3);
-  }
+      <NSpin :show="loading">
+        <template v-if="detail">
+          <!--
+            操作区放在**最上面**：审核是"看完就点"的动作，按钮在最下面意味着
+            每次都要滚过整页材料 —— 而审核员一天要看几十份。
+          -->
+          <div class="detail__bar">
+            <NSpace align="center" :size="8">
+              <!-- 不能通过的原因写在按钮上（而不是等点了再弹 40032） -->
+              <NTooltip :disabled="canApprove" trigger="hover">
+                <template #trigger>
+                  <span class="detail__tt">
+                    <NButton type="primary" :disabled="!canApprove" :loading="acting" @click="onApprove">
+                      <template #icon>
+                        <AppIcon name="check" :size="16" />
+                      </template>
+                      {{ nodeText }}通过
+                    </NButton>
+                  </span>
+                </template>
+                {{ blockReason }}
+              </NTooltip>
 
-  &__spin {
-    display: block;
-  }
+              <NButton v-if="canReject" type="error" secondary @click="onReject">
+                <template #icon>
+                  <AppIcon name="close" :size="16" />
+                </template>
+                驳回
+              </NButton>
 
-  &__bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid var(--color-border-1);
-  }
+              <NPopconfirm v-if="canRevoke" @positive-click="onRevoke">
+                <template #trigger>
+                  <NButton type="warning" secondary>撤回审核结论</NButton>
+                </template>
+                撤回这次审核结论？撤回是<strong>再写一条记录</strong>，历史不会被删掉。
+              </NPopconfirm>
 
-  &__alert {
-    margin-bottom: 8px;
-  }
+              <NButton @click="reload">
+                <template #icon>
+                  <AppIcon name="refresh" :size="16" />
+                </template>
+                刷新校验结果
+              </NButton>
+            </NSpace>
 
-  &__section {
-    margin: 18px 0 8px;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text-1);
+            <NSpace align="center" :size="6">
+              <span class="detail__muted">证件号 {{ detail.idCardMask || '—' }}</span>
+              <NTag v-if="detail.redCount" size="small" :bordered="false" type="error">红 {{ detail.redCount }}</NTag>
+              <NTag v-if="detail.yellowCount" size="small" :bordered="false" type="warning">黄 {{ detail.yellowCount }}</NTag>
+              <NTag v-if="detail.rejectCount" size="small" :bordered="false">已驳 {{ detail.rejectCount }} 次</NTag>
+            </NSpace>
+          </div>
 
-    .detail__muted {
-      margin-left: 8px;
-      font-weight: 400;
-    }
-  }
+          <!-- 有阻断级问题时把"为什么不能通过"写在最显眼处 -->
+          <NAlert v-if="redTitles.length" type="error" class="detail__alert" title="有阻断级问题，不能通过">
+            {{ redTitles.join('；') }}
+          </NAlert>
 
-  &__group {
-    padding: 10px 12px;
-    margin-bottom: 8px;
-    background: var(--color-fill-1);
-    border-radius: 4px;
-  }
+          <NAlert v-if="lastReject" type="warning" :show-icon="false" class="detail__alert">
+            上次驳回：{{ lastReject.reasonText || lastReject.reasonCode }}
+          </NAlert>
 
-  &__group-head {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
+          <!-- ── 材料 ─────────────────────────────── -->
+          <div class="section-title">
+            材料（{{ doneCount }} / {{ materialGroups.length }} 已交）
+          </div>
+          <NEmpty v-if="!materialGroups.length" description="这个任务没有配置材料项" />
+          <div v-for="g in materialGroups" :key="g.materialCode" class="detail__group">
+            <div class="detail__group-head">
+              <span class="detail__group-name">{{ g.materialName }}</span>
+              <NTag v-if="g.required" size="small" :bordered="false" type="error">必传</NTag>
+              <!-- 条件材料对学生不可见时不该要求他交，审核页上要说清 -->
+              <NTag v-if="!g.visible" size="small" :bordered="false">本次不适用</NTag>
+              <NTag size="small" :bordered="false" :type="g.done ? 'success' : 'warning'">
+                {{ g.done ? '已交' : '未交' }}
+              </NTag>
+              <span class="detail__code">{{ g.materialCode }}</span>
+            </div>
 
-  &__group-name {
-    font-weight: 500;
-  }
+            <div v-if="g.files?.length" class="detail__files">
+              <div v-for="f in g.files" :key="f.id" class="detail__file">
+                <FilePreview :file="f" />
+                <div class="detail__file-meta">
+                  <div v-if="f.source !== 1" class="detail__file-src">
+                    {{ FILE_SOURCE[f.source ?? 0] || '其他来源' }}
+                  </div>
+                  <div class="detail__muted">
+                    {{ f.finalSizeKb ? `${f.finalSizeKb} KB` : '—' }}
+                    <template v-if="f.width && f.height"> · {{ f.width }}×{{ f.height }}</template>
+                    <template v-if="f.dpi"> · {{ f.dpi }}dpi</template>
+                  </div>
+                  <NTag v-if="f.validateStatus !== null" size="small" :bordered="false"
+                    :type="tagType(FILE_VALIDATE[f.validateStatus ?? 0]?.color)">
+                    {{ FILE_VALIDATE[f.validateStatus ?? 0]?.text ?? '未知' }}
+                  </NTag>
+                  <!-- 识别结果未做时为 null：不显示"识别中"，那是在说谎 -->
+                  <div v-if="f.detect" class="detail__muted">
+                    识别：{{ f.detect.sourceText || f.detect.source || '—' }}
+                    <template v-if="f.detect.confidence !== null && f.detect.confidence !== undefined">
+                      （置信度 {{ f.detect.confidence }}）
+                    </template>
+                    <NTag v-if="f.detect.conflict" size="small" :bordered="false" type="error" style="margin-left: 4px">
+                      疑似串档
+                    </NTag>
+                  </div>
+                  <div v-for="(i, idx) in f.issues ?? []" :key="idx" class="detail__issue-line" :class="`detail__issue-line--${i.severity}`">
+                    {{ i.title }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="detail__muted detail__empty-file">没有文件</div>
+          </div>
 
-  &__files {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-top: 10px;
-  }
+          <!-- ── 问题清单 ─────────────────────────── -->
+          <div class="section-title">
+            校验问题（{{ issues.length }}）
+            <span class="section-title__note">现场重算，不是提交时的快照</span>
+          </div>
+          <NEmpty v-if="!issues.length" description="没有校验问题" />
+          <!-- 抽屉里的小表用 `:max-height`（这里没有"撑满"的高度链，flex-height 会失效） -->
+          <NDataTable v-else size="small" :columns="issueColumns" :data="issues" :bordered="true"
+            :row-key="(row: AuditIssue) => row.ruleCode" :pagination="false"
+            :max-height="240" :scroll-x="560" />
 
-  &__file {
-    display: flex;
-    gap: 10px;
-    width: 340px;
-    padding: 8px;
-    background: #fff;
-    border: 1px solid var(--color-border-1);
-    border-radius: 4px;
-  }
+          <!-- ── 学生改过什么 ─────────────────────── -->
+          <template v-if="changedDetail.length">
+            <div class="section-title">
+              学生改动（{{ changedDetail.length }} 项）
+              <span class="section-title__note">预填来自名册，下面是"老师填的 vs 学生交的"</span>
+            </div>
+            <NDataTable size="small" :columns="changedColumns" :data="changedDetail" :bordered="true"
+              :row-key="(row: AuditChangedItem) => row.field" :pagination="false"
+              :max-height="240" :scroll-x="600" />
+          </template>
 
-  &__file-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
+          <!-- ── 填报表单 ─────────────────────────── -->
+          <div class="section-title">填报内容</div>
+          <NDescriptions :column="2" size="small" bordered>
+            <NDescriptionsItem v-for="row in formRows" :key="row.key" :label="row.label">
+              <span :class="{ detail__changed: row.changed }">{{ display(row.value) }}</span>
+            </NDescriptionsItem>
+          </NDescriptions>
 
-  &__file-src {
-    font-size: 12px;
-    color: var(--color-text-1);
-  }
+          <!-- ── 时间轴 ───────────────────────────── -->
+          <div class="section-title">审核时间轴（最近的在上）</div>
+          <NEmpty v-if="!timeline.length" description="暂无记录" />
+          <div v-for="(t, idx) in timeline" :key="`${t.id}-${idx}`" class="detail__tl">
+            <NTag size="small" :bordered="false" :type="tagType(TIMELINE_NODE[t.node]?.color)">
+              {{ t.nodeText || TIMELINE_NODE[t.node]?.text || '—' }}
+            </NTag>
+            <span class="detail__tl-text">
+              {{ t.actionText || '—' }}
+              <template v-if="t.auditorName"> · {{ t.auditorName }}</template>
+              <template v-if="t.reasonText"> · {{ t.reasonText }}</template>
+            </span>
+            <span class="detail__muted">{{ fmtTime(t.time) }}</span>
+          </div>
 
-  &__empty-file {
-    margin-top: 6px;
-  }
+          <NDivider />
+        </template>
+      </NSpin>
 
-  &__issue-line {
-    font-size: 12px;
+      <AuditRejectModal ref="rejectRef" :materials="materialGroups" @rejected="afterAction" />
+    </NDrawerContent>
+  </NDrawer>
+</template>
 
-    // ⚠️ 1 提示（蓝）/ 2 警告（黄）/ 3 阻断（红）—— 与服务端 Issue 常量同口径。
-    //    写反的后果是把"提示"染成红色，所有人都会去追一个不存在的问题。
-    &--3 {
-      color: rgb(var(--red-6));
-    }
+<style scoped>
+.detail__head-tag {
+  margin-left: 8px;
+}
 
-    &--2 {
-      color: rgb(var(--orange-6));
-    }
+.detail__head-sub {
+  margin-left: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--xt-text-3);
+}
 
-    &--1 {
-      color: var(--color-text-3);
-    }
-  }
+/* 操作条：审核是"看完就点"的动作，所以它必须一眼看到（按钮统一默认尺寸，主操作 primary） */
+.detail__bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--xt-card-border-weak);
+}
 
-  &__code {
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+/* 禁用状态的按钮不触发鼠标事件，用 span 兜住才能显示 tooltip */
+.detail__tt {
+  display: inline-flex;
+}
 
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.detail__alert {
+  margin-bottom: 12px;
+}
 
-  &__changed {
-    font-weight: 600;
-    color: rgb(var(--orange-6));
-  }
+/**
+ * 材料分组：抽屉内部的**小格子**（浅灰底 + 弱描边），不是第二层白卡片。
+ * 每一份文件才是白底小格（`.detail__file`），这样"组 → 文件"两层分得开。
+ */
+.detail__group {
+  padding: 12px 14px;
+  margin-bottom: 12px;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
 
-  &__tl {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    padding: 6px 0;
-    border-bottom: 1px dashed var(--color-border-1);
-  }
+.detail__group-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
 
-  &__tl-text {
-    flex: 1;
-    font-size: 13px;
-  }
+.detail__group-name {
+  font-weight: 500;
+}
+
+.detail__files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.detail__file {
+  display: flex;
+  gap: 10px;
+  width: 340px;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 6px;
+}
+
+.detail__file-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.detail__file-src {
+  font-size: 12px;
+  color: var(--xt-text);
+}
+
+.detail__empty-file {
+  margin-top: 6px;
+}
+
+.detail__issue-line {
+  font-size: 12px;
+}
+
+/* 1 提示（蓝）/ 2 警告（黄）/ 3 阻断（红）—— 与服务端 Issue 常量同口径。
+   写反的后果是把"提示"染成红色，所有人都会去追一个不存在的问题。 */
+.detail__issue-line--3 {
+  color: #d54941;
+}
+
+.detail__issue-line--2 {
+  color: #ed7b2f;
+}
+
+.detail__issue-line--1 {
+  color: var(--xt-text-3);
+}
+
+/**
+ * ⚠️ 下面这几个类**同时**出现在渲染函数里（表格列、表单行）。
+ *    渲染函数生成的元素不带 `data-v-*`，写成普通 scoped 选择器匹配不到
+ *    （不报错，只是样式静默失效），所以统一用 `:deep()`。
+ */
+:deep(.detail__code) {
+  font-family: ui-monospace, sfmono-regular, menlo, monospace;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+:deep(.detail__muted) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+:deep(.detail__changed) {
+  font-weight: 600;
+  color: #ed7b2f;
+}
+
+.detail__tl {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--xt-card-border-weak);
+}
+
+.detail__tl-text {
+  flex: 1;
+  font-size: 13px;
 }
 </style>
diff --git a/frontend-pc/src/views/audit/AuditRejectModal.vue b/frontend-pc/src/views/audit/AuditRejectModal.vue
index 0bb09c0..6893727 100644
--- a/frontend-pc/src/views/audit/AuditRejectModal.vue
+++ b/frontend-pc/src/views/audit/AuditRejectModal.vue
@@ -1,65 +1,32 @@
-<template>
-  <a-modal v-model:visible="visible" title="驳回填报单" :width="560" :mask-closable="false"
-    :ok-loading="saving" ok-text="确认驳回" @before-ok="onOk" @close="close">
-    <a-alert type="warning" :show-icon="false" class="reject__tip">
-      <template #title>
-        驳回后学生会看到原因，<strong>可以改完重交</strong>。
-        一期还没有通知渠道，所以还需要<strong>口头告知学生</strong>。
-      </template>
-    </a-alert>
-
-    <a-form :model="form" layout="vertical">
-      <a-form-item label="驳回原因" required>
-        <a-radio-group v-model="form.reasonCode" direction="vertical" @change="onCodeChange">
-          <a-radio v-for="r in reasonCodes" :key="r.code" :value="r.code" class="reject__radio">
-            {{ r.text }}
-            <span v-if="r.requiresText" class="reject__req">（必须补充说明）</span>
-          </a-radio>
-        </a-radio-group>
-      </a-form-item>
-
-      <!--
-        R999「其他原因」必须填说明：不填的话学生只看到"其他原因"四个字，
-        等于什么也没告诉他就让他重做一份。
-      -->
-      <a-form-item :label="requiresText ? '补充说明（必填）' : '补充说明（可选）'"
-        :validate-status="textError ? 'error' : undefined" :help="textError">
-        <a-textarea v-model="form.reasonText" :rows="3" :max-length="200" show-word-limit
-          placeholder="例如：身份证反面缺角看不清，请重新拍一张完整的" />
-      </a-form-item>
-
-      <a-form-item v-if="materials.length" label="是哪几项材料的问题（可选）">
-        <a-checkbox-group v-model="form.materialCodes">
-          <a-checkbox v-for="m in materials" :key="m.materialCode" :value="m.materialCode">
-            {{ m.materialName }}
-          </a-checkbox>
-        </a-checkbox-group>
-      </a-form-item>
-
-      <a-form-item label="是否需要学生重新上传">
-        <a-switch v-model="form.suggestReupload" />
-        <span class="reject__hint">
-          关掉 = 只是信息填错，改文字即可；开着 = 材料本身有问题，必须重传。
-        </span>
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
 import type { AuditMaterialGroup, RejectReasonCode } from '@/apis/xt/audit'
-import { Message } from '@arco-design/web-vue'
+import {
+  NAlert,
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NRadio,
+  NRadioGroup,
+  NSpace,
+  NSwitch,
+  useMessage
+} from 'naive-ui'
+import { computed, reactive, ref } from 'vue'
 import { getReasonCodes, rejectSubmission } from '@/apis/xt/audit'
 
 /**
  * 驳回弹窗（原型 STEP ⑤）。
  *
- * 三条设计理由：
- * 1. **必须点按钮**（原型铁律：班主任端通过可以右滑，驳回不行）——
+ * 三条设计理由（沿用上一版，只换了 UI 库）：
+ * 1. **必须点按钮**（原型铁律：班主任端"通过"可以右滑，驳回不行）——
  *    误触通过的后果是"再撤一次"，误触驳回的后果是学生白改一份材料，两者不对称。
- * 2. **原因快选**：附录 C 的 10 条写在代码里（`RejectReasonCatalog`），
+ * 2. **原因快选**：附录 C 的 10 条写在服务端代码里（`RejectReasonCatalog`），
  *    字典从服务端取，不在前端硬编 —— 否则加一条原因要发一次前端。
- * 3. **R999 必须填说明**：只有"其他原因"四个字，学生无从下手。
+ * 3. **R999 必须填说明**：只给学生"其他原因"四个字，他无从下手。
  */
 defineOptions({ name: 'AuditRejectModal' })
 
@@ -71,6 +38,8 @@ const emit = defineEmits<{
   (e: 'rejected'): void
 }>()
 
+const message = useMessage()
+
 const visible = ref(false)
 const saving = ref(false)
 const submissionId = ref<number>(0)
@@ -106,11 +75,10 @@ async function open(id: number) {
   visible.value = true
   if (!reasonCodes.value.length) {
     try {
-      const res = await getReasonCodes()
-      reasonCodes.value = res.data ?? []
+      reasonCodes.value = await getReasonCodes()
     } catch {
       // 字典取不到时不静默：让用户知道"现在没法选原因"，而不是看到一个空列表乱猜
-      Message.warning('驳回原因字典没取到，请刷新页面重试')
+      message.warning('驳回原因字典没取到，请刷新页面重试')
     }
   }
 }
@@ -121,12 +89,12 @@ function close() {
 
 async function onOk() {
   if (!form.reasonCode) {
-    Message.warning('请选择驳回原因')
-    return false
+    message.warning('请选择驳回原因')
+    return
   }
   if (requiresText.value && !form.reasonText.trim()) {
     textError.value = '选择「其他原因」时必须写清是什么问题'
-    return false
+    return
   }
   saving.value = true
   try {
@@ -136,23 +104,18 @@ async function onOk() {
       materialCodes: form.materialCodes.length ? form.materialCodes : undefined,
       suggestReupload: form.suggestReupload
     })
-    const r = res.data
-    if (r?.needManualNotice) {
-      Message.warning({
-        content: '已驳回。通知没发出去（一期没有通知渠道），请口头告知学生',
-        duration: 5000
-      })
+    if (res?.needManualNotice) {
+      // 服务端明说"通知没发出去"时，必须让老师知道要去口头告知 ——
+      // 否则学生一直等，而老师以为系统已经通知过了
+      message.warning('已驳回。通知没发出去，请口头告知学生', { duration: 5000 })
     } else {
-      Message.success(r?.statusText || '已驳回')
+      message.success(res?.statusText || '已驳回')
     }
-    if (r?.escalated) {
-      Message.info('该单驳回次数已达上限，管理员会收到提醒')
+    if (res?.escalated) {
+      message.info('该单驳回次数已达上限，管理员会收到提醒')
     }
     visible.value = false
     emit('rejected')
-    return true
-  } catch {
-    return false
   } finally {
     saving.value = false
   }
@@ -161,26 +124,108 @@ async function onOk() {
 defineExpose({ open })
 </script>
 
-<style lang="scss" scoped>
-.reject {
-  &__tip {
-    margin-bottom: 12px;
-  }
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="card"
+    title="驳回填报单"
+    :style="{ width: '560px' }"
+    :mask-closable="false"
+    :bordered="false"
+  >
+    <NAlert type="warning" :show-icon="false" class="reject__tip">
+      驳回后学生会看到原因，<strong>可以改完重交</strong>。
+      如果提交后提示「通知没发出去」，还需要<strong>口头告知学生</strong>。
+    </NAlert>
 
-  &__radio {
-    display: block;
-    margin-bottom: 2px;
-  }
+    <NForm label-placement="top">
+      <NFormItem label="驳回原因" required>
+        <!--
+          十条原因是**单选清单**，给一块浅灰小格子把它与上下两栏分开；
+          限高 + 滚动是因为十条全展开会把弹窗顶得很高（底部按钮被推出可视区）。
+        -->
+        <div class="reject__box">
+          <NRadioGroup v-model:value="form.reasonCode" @update:value="onCodeChange">
+            <NSpace vertical :size="6">
+              <NRadio v-for="r in reasonCodes" :key="r.code" :value="r.code">
+                {{ r.text }}
+                <span v-if="r.requiresText" class="reject__req">（必须补充说明）</span>
+              </NRadio>
+            </NSpace>
+          </NRadioGroup>
+        </div>
+      </NFormItem>
 
-  &__req {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+      <!--
+        R999「其他原因」必须填说明：不填的话学生只看到"其他原因"四个字，
+        等于什么也没告诉他就让他重做一份。
+      -->
+      <NFormItem
+        :label="requiresText ? '补充说明（必填）' : '补充说明（可选）'"
+        :validation-status="textError ? 'error' : undefined"
+        :feedback="textError || undefined"
+      >
+        <NInput
+          v-model:value="form.reasonText"
+          type="textarea"
+          :rows="3"
+          :maxlength="200"
+          show-count
+          placeholder="例如：身份证反面缺角看不清，请重新拍一张完整的"
+        />
+      </NFormItem>
 
-  &__hint {
-    margin-left: 8px;
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+      <NFormItem v-if="materials.length" label="是哪几项材料的问题（可选）">
+        <NCheckboxGroup v-model:value="form.materialCodes">
+          <NSpace :size="12">
+            <NCheckbox v-for="m in materials" :key="m.materialCode" :value="m.materialCode" :label="m.materialName" />
+          </NSpace>
+        </NCheckboxGroup>
+      </NFormItem>
+
+      <NFormItem label="是否需要学生重新上传">
+        <NSpace align="center" :size="8">
+          <NSwitch v-model:value="form.suggestReupload" />
+          <span class="reject__hint">
+            关掉 = 只是信息填错，改文字即可；开着 = 材料本身有问题，必须重传。
+          </span>
+        </NSpace>
+      </NFormItem>
+    </NForm>
+
+    <template #footer>
+      <NSpace justify="end" :size="8">
+        <NButton @click="close">取消</NButton>
+        <NButton type="error" :loading="saving" @click="onOk">确认驳回</NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+<style scoped>
+.reject__tip {
+  margin-bottom: 14px;
+}
+
+/* 弹窗内部的小格子：浅灰底 + 弱描边（不要在这里再套 NCard，弹窗本身就是卡片） */
+.reject__box {
+  width: 100%;
+  max-height: 236px;
+  padding: 10px 12px;
+  overflow: auto;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.reject__req {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.reject__hint {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--xt-text-3);
 }
 </style>
diff --git a/frontend-pc/src/views/audit/FilePreview.vue b/frontend-pc/src/views/audit/FilePreview.vue
new file mode 100644
index 0000000..4f3ee13
--- /dev/null
+++ b/frontend-pc/src/views/audit/FilePreview.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import type { AuditFileItem } from '@/apis/xt/audit'
+import { NButton, NModal, NRadioButton, NRadioGroup, NSpace, NSpin, NTag } from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { FILE_VALIDATE, getAuditFileUrl } from '@/apis/xt/audit'
+import { tagType } from '@/utils/tag'
+
+/**
+ * 材料预览（审核端）。
+ *
+ * ## 为什么单独封一个组件
+ *
+ * 待办卡片、审核详情、班主任端都要显示材料，而"取签名链接"这件事**不能各写一份**：
+ * 一处忘了走审核端通道（`/audit/files/*`）就会去调学生端的接口，
+ * 而那条通道校验的是"这份是不是你传的"，审核人必然拿不到。
+ *
+ * ## 三条硬规则
+ *
+ * 1. **链接是现取的，不缓存、不入库、不落 localStorage**。七牛空间是私有的，
+ *    下载走签名链接且有有效期（默认 30 分钟）；把链接存起来，明天打开就是坏的。
+ * 2. **原始件（`original=true`）要单独再取一次**，而且只在用户真的切到"原始件/并排"
+ *    时才取 —— 审核大多数时候看的是规范件，没必要每次都多打一个接口。
+ * 3. **原始件取不到不是错误**：`cleanExpiredRawFiles` 定时任务默认只保留 30 天，
+ *    过期后原始件已被清理。这种情况给一句说明，而不是弹一个红色报错 ——
+ *    "压缩前后对比"本来就是一个抽查动作，不是审核的必经步骤。
+ */
+defineOptions({ name: 'FilePreview' })
+
+const props = defineProps<{
+  file: AuditFileItem
+  /** 已经拿到的链接（待办卡片里的 `materialThumbs` 就是现成的签名链接） */
+  url?: string
+}>()
+
+type Mode = 'normal' | 'raw' | 'compare'
+
+const loading = ref(false)
+const rawLoading = ref(false)
+
+const src = ref('')
+const rawSrc = ref('')
+const showModal = ref(false)
+const mode = ref<Mode>('normal')
+
+const fileName = computed(() => props.file.standardName || props.file.originalName || '（无文件名）')
+
+const sizeText = computed(() => {
+  const f = props.file
+  return f.finalSizeKb ? `${f.finalSizeKb} KB` : '—'
+})
+
+const pixelText = computed(() => {
+  const f = props.file
+  if (!f.width || !f.height) {
+    return '—'
+  }
+  return `${f.width}×${f.height}${f.dpi ? ` · ${f.dpi}dpi` : ''}`
+})
+
+const validateMeta = computed(() => {
+  const s = props.file.validateStatus
+  if (s === null || s === undefined) {
+    return null
+  }
+  return FILE_VALIDATE[s] ?? null
+})
+
+async function loadNormal() {
+  if (props.url) {
+    src.value = props.url
+    return
+  }
+  if (props.file.previewUrl) {
+    // 详情接口已经带了现取的链接，直接用，省一次往返
+    src.value = props.file.previewUrl
+    return
+  }
+  loading.value = true
+  try {
+    const res = await getAuditFileUrl(props.file.id)
+    src.value = res?.url ?? ''
+  } catch {
+    // 取不到链接不是致命错误：材料本身还在，只是这次看不了。
+    // 所以只留一个"预览取不到"的占位，不弹错误 —— 审核几十份材料时弹窗会淹没页面。
+    src.value = ''
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 原始件：每次需要时现取（签名链接会过期，不能复用上一次的） */
+async function loadRaw() {
+  if (rawLoading.value) {
+    return
+  }
+  rawLoading.value = true
+  try {
+    const res = await getAuditFileUrl(props.file.id, true)
+    rawSrc.value = res?.url ?? ''
+  } catch {
+    // 原始件已被清理（默认保留 30 天）或链接取不到：留空，由界面给说明
+    rawSrc.value = ''
+  } finally {
+    rawLoading.value = false
+  }
+}
+
+watch(mode, (m) => {
+  if ((m === 'raw' || m === 'compare') && !rawSrc.value) {
+    void loadRaw()
+  }
+})
+
+async function open() {
+  if (!src.value) {
+    return
+  }
+  showModal.value = true
+  mode.value = 'normal'
+  // 重新打开时把上一次的原始件链接丢掉：它随时可能过期，留着会显示成"坏图"
+  rawSrc.value = ''
+}
+
+function openInNewTab() {
+  const target = mode.value === 'raw' ? rawSrc.value : src.value
+  if (target) {
+    window.open(target, '_blank')
+  }
+}
+
+onMounted(loadNormal)
+</script>
+
+<template>
+  <div class="fp">
+    <div class="fp__box" :class="{ 'fp__box--empty': !src && !loading }" @click="open">
+      <NSpin v-if="loading" :size="16" />
+      <img v-else-if="src" :src="src" class="fp__img" alt="材料预览" />
+      <div v-else class="fp__fail">
+        预览取不到<br>（链接过期或已删除）
+      </div>
+    </div>
+    <div class="fp__name" :title="fileName">{{ fileName }}</div>
+
+    <NModal
+      v-model:show="showModal"
+      preset="card"
+      :style="{ width: '920px' }"
+      :title="fileName"
+      :bordered="false"
+    >
+      <!-- 弹窗顶栏：切换器与动作按钮统一默认尺寸（同一行不要大小混用） -->
+      <div class="fp__bar">
+        <NRadioGroup v-model:value="mode">
+          <NRadioButton value="normal">规范件</NRadioButton>
+          <NRadioButton value="raw">原始件</NRadioButton>
+          <NRadioButton value="compare">并排对比</NRadioButton>
+        </NRadioGroup>
+        <NSpace align="center" :size="6">
+          <NTag size="small" :bordered="false">{{ sizeText }}</NTag>
+          <NTag size="small" :bordered="false">{{ pixelText }}</NTag>
+          <NTag v-if="validateMeta" size="small" :bordered="false" :type="tagType(validateMeta.color)">
+            {{ validateMeta.text }}
+          </NTag>
+          <NButton quaternary @click="openInNewTab">在新标签打开</NButton>
+        </NSpace>
+      </div>
+
+      <div v-if="mode === 'compare'" class="fp__compare">
+        <div class="fp__pane">
+          <div class="fp__pane-head">规范件（交给机构的那一份）</div>
+          <img v-if="src" :src="src" class="fp__big" alt="规范件" />
+        </div>
+        <div class="fp__pane">
+          <div class="fp__pane-head">原始件（学生传上来的那一份）</div>
+          <NSpin v-if="rawLoading" class="fp__spin" :size="20" />
+          <img v-else-if="rawSrc" :src="rawSrc" class="fp__big" alt="原始件" />
+          <div v-else class="fp__missing">
+            原始件没取到。<br>
+            原始件默认只保留 30 天（用于复核与重出），过期后已被清理 ——
+            规范件不受影响，审核按规范件判断即可。
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="fp__single">
+        <NSpin v-if="mode === 'raw' && rawLoading" :size="20" />
+        <template v-else-if="mode === 'raw'">
+          <img v-if="rawSrc" :src="rawSrc" class="fp__big" alt="原始件" />
+          <div v-else class="fp__missing">
+            原始件没取到（默认只保留 30 天，过期已清理）。规范件不受影响。
+          </div>
+        </template>
+        <img v-else :src="src" class="fp__big" alt="规范件" />
+      </div>
+    </NModal>
+  </div>
+</template>
+
+<style scoped>
+.fp {
+  width: 108px;
+}
+
+/* 缩略图格子：浅灰底 + 弱描边，与外层白格区分开 */
+.fp__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 108px;
+  height: 108px;
+  overflow: hidden;
+  cursor: zoom-in;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 6px;
+}
+
+.fp__box--empty {
+  cursor: default;
+}
+
+.fp__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.fp__fail {
+  font-size: 12px;
+  color: var(--xt-text-3);
+  text-align: center;
+}
+
+.fp__name {
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--xt-text-2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fp__bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--xt-card-border-weak);
+}
+
+.fp__single {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 320px;
+}
+
+.fp__compare {
+  display: flex;
+  gap: 16px;
+}
+
+.fp__pane {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.fp__pane-head {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.fp__big {
+  width: 100%;
+  max-height: 62vh;
+  object-fit: contain;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 6px;
+}
+
+.fp__missing {
+  padding: 16px;
+  font-size: 12px;
+  line-height: 1.9;
+  color: var(--xt-text-3);
+  background: var(--xt-band-bg);
+  border: 1px dashed var(--xt-card-border);
+  border-radius: 8px;
+}
+
+.fp__spin {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/frontend-pc/src/views/audit/FilePreviewImage.vue b/frontend-pc/src/views/audit/FilePreviewImage.vue
deleted file mode 100644
index 378b5a4..0000000
--- a/frontend-pc/src/views/audit/FilePreviewImage.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div class="fp">
-    <!--
-      七牛空间是**私有**的 → 预览必须用签名链接，而签名链接有有效期（默认 30 分钟），
-      所以这里**每次挂载现取**，不缓存、不入库、不落 localStorage。
-    -->
-    <div class="fp__box" :class="{ 'fp__box--empty': !src && !loading }" @click="open">
-      <a-spin v-if="loading" :size="16" />
-      <img v-else-if="src" :src="src" class="fp__img" alt="材料预览" />
-      <div v-else class="fp__fail">预览取不到<br>（链接过期或已删除）</div>
-    </div>
-    <div class="fp__name" :title="file.standardName || file.originalName || ''">
-      {{ file.standardName || file.originalName || '（无文件名）' }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { AuditFileItem } from '@/apis/xt/audit'
-import { getAuditFileUrl } from '@/apis/xt/audit'
-
-/**
- * 材料缩略图（审核端）。
- *
- * 为什么单独封一个组件：审核页与待办卡片都要显示缩略图，而"取签名链接"这件事
- * **不能各写一份** —— 一处忘了换审核端通道（`/audit/files/*`）就会去调学生端的接口，
- * 那条通道校验的是"这份是不是你传的"，审核人必然拿不到。
- */
-defineOptions({ name: 'FilePreviewImage' })
-
-const props = defineProps<{
-  file: AuditFileItem
-  /** 用一个已经拿到的链接（待办卡片里的 materialThumbs 就是现成的签名链接） */
-  url?: string
-}>()
-
-const loading = ref(false)
-const src = ref<string>(props.url ?? '')
-
-async function load() {
-  if (props.url) {
-    src.value = props.url
-    return
-  }
-  loading.value = true
-  try {
-    const res = await getAuditFileUrl(props.file.id)
-    src.value = res.data?.url ?? ''
-  } catch {
-    // 取不到链接不是致命错误：材料本身还在，只是这次看不了。
-    // 所以只留一个"预览取不到"的占位，不弹错误 —— 审核几十份材料时弹窗会淹没页面。
-    src.value = ''
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 点开看原图（新标签页）。链接是现场的，所以点了才取。 */
-async function open() {
-  if (!src.value) {
-    return
-  }
-  window.open(src.value, '_blank')
-}
-
-onMounted(load)
-</script>
-
-<style lang="scss" scoped>
-.fp {
-  width: 108px;
-
-  &__box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 108px;
-    height: 108px;
-    overflow: hidden;
-    cursor: zoom-in;
-    background: var(--color-fill-2);
-    border: 1px solid var(--color-border-2);
-    border-radius: 4px;
-
-    &--empty {
-      cursor: default;
-    }
-  }
-
-  &__img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  &__fail {
-    font-size: 12px;
-    color: var(--color-text-3);
-    text-align: center;
-  }
-
-  &__name {
-    margin-top: 4px;
-    overflow: hidden;
-    font-size: 12px;
-    color: var(--color-text-2);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-:deep(.arco-spin) {
-  display: flex;
-}
-</style>
diff --git a/frontend-pc/src/views/audit/index.vue b/frontend-pc/src/views/audit/index.vue
index 578a0df..ee67f34 100644
--- a/frontend-pc/src/views/audit/index.vue
+++ b/frontend-pc/src/views/audit/index.vue
@@ -1,170 +1,21 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>审核</template>
-      <template #extra>
-        <span class="audit__hint">
-          初审由班主任做（只看得到自己带的班），终审由管理员做
-        </span>
-      </template>
-
-      <!--
-        节点切换用 tab：初审与终审是**同一份数据的两个阶段**，
-        而不是两个功能。做成两个页面的话，用户会以为自己进错了地方。
-      -->
-      <a-tabs v-model:active-key="node" type="rounded" size="small" @change="onNodeChange">
-        <a-tab-pane :key="1" title="初审（班主任 / 审核员）" />
-        <a-tab-pane v-if="canFinal" :key="2" title="终审（管理员）" />
-      </a-tabs>
-
-      <!--
-        四个计数**不受下方的 level 过滤影响**（服务端算的），
-        否则点一下「有异常」就再也回不到「全部」。
-      -->
-      <div class="audit__stats">
-        <div v-for="c in countCards" :key="c.key" class="audit__stat"
-          :class="[`audit__stat--${c.tone}`, levelFilter === c.level && c.level !== undefined ? 'audit__stat--on' : '']"
-          @click="setLevel(c.level)">
-          <div class="audit__stat-num">{{ c.value }}</div>
-          <div class="audit__stat-label">{{ c.label }}</div>
-        </div>
-      </div>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-button type="primary" size="small" :disabled="!selectedKeys.length" :loading="batching"
-            @click="onBatchApprove">
-            <template #icon><IconCheck /></template>
-            批量通过（{{ selectedKeys.length }}）
-          </a-button>
-          <span class="audit__hint">
-            只能带<strong>无问题</strong>的单；红黄一律自动跳过并说明原因
-          </span>
-        </a-space>
-
-        <a-space wrap>
-          <a-select v-model="query.taskId" placeholder="全部任务" allow-clear size="small"
-            class="audit__task" :loading="taskLoading" @change="search">
-            <a-option v-for="t in taskOptions" :key="t.id" :value="t.id">{{ t.taskName }}</a-option>
-          </a-select>
-          <a-select v-model="query.waitingOverHours" placeholder="等待时长" allow-clear size="small"
-            class="audit__wait" @change="search">
-            <a-option :value="24">超过 24 小时</a-option>
-            <a-option :value="48">超过 48 小时</a-option>
-            <a-option :value="72">超过 72 小时</a-option>
-          </a-select>
-          <a-input-search v-model="query.keyword" placeholder="搜索姓名 / 班级" allow-clear
-            class="audit__search" @search="search" @clear="search" />
-          <a-button size="small" @click="reload">
-            <template #icon><IconRefresh /></template>
-            刷新
-          </a-button>
-        </a-space>
-      </div>
-
-      <!--
-        列宽按可用宽度算过：1366 宽的屏幕减 200 侧栏 ≈ 1140，本页在卡片里再减内边距，
-        约 1060 可用。下面 8 列合计 1020，不出现横向滚动（钉住的操作列不会盖住「状态」）。
-      -->
-      <a-table :data="list" :loading="loading" row-key="submissionId" :pagination="pagination"
-        :scroll="{ x: 1020 }" :row-selection="{ type: 'checkbox', showCheckedAll: true }"
-        :selected-keys="selectedKeys" @select="onSelect" @select-all="onSelectAll"
-        @page-change="onPageChange">
-        <template #columns>
-          <a-table-column title="学生" :width="170">
-            <template #cell="{ record }">
-              <div class="audit__name">
-                {{ record.realName }}
-                <a-tag v-if="record.rejectCount" color="gray" size="small">
-                  驳回 {{ record.rejectCount }} 次
-                </a-tag>
-              </div>
-              <div class="audit__muted">{{ record.orgName || '未分班' }}</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="任务" :width="170" ellipsis tooltip>
-            <template #cell="{ record }">
-              <div>{{ record.taskName }}</div>
-              <div class="audit__muted">{{ fmtTime(record.submitTime) }} 提交</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="材料" :width="150">
-            <template #cell="{ record }">
-              <div class="audit__thumbs">
-                <img v-for="(u, i) in (record.materialThumbs ?? []).slice(0, 3)" :key="i" :src="u"
-                  class="audit__thumb" alt="材料缩略图" @click.stop="openDetail(record)">
-                <span v-if="!(record.materialThumbs ?? []).length" class="audit__muted">
-                  {{ record.materialCount }} 项
-                </span>
-              </div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="校验" :width="130">
-            <template #cell="{ record }">
-              <a-tag :color="LEVEL_TAG[record.level]?.color ?? 'gray'" size="small">
-                {{ LEVEL_TAG[record.level]?.text ?? '未知' }}
-              </a-tag>
-              <div v-if="record.redSummary" class="audit__red" :title="record.redSummary">
-                {{ record.redSummary }}
-              </div>
-              <div v-else-if="record.redCount || record.yellowCount" class="audit__muted">
-                红 {{ record.redCount }} · 黄 {{ record.yellowCount }}
-              </div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="学生改过" :width="120" align="center">
-            <template #cell="{ record }">
-              <span v-if="record.changedFields?.length" class="audit__changed">
-                {{ record.changedFields.length }} 项
-              </span>
-              <span v-else class="audit__muted">—</span>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="状态" :width="100" align="center">
-            <template #cell="{ record }">
-              <a-tag size="small">{{ record.statusText }}</a-tag>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="已等待" :width="90" align="center">
-            <template #cell="{ record }">
-              <span :class="waitTone(record.waitHours)">{{ fmtWait(record.waitHours) }}</span>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="操作" :width="200" align="center" fixed="right">
-            <template #cell="{ record }">
-              <a-space size="mini" wrap>
-                <a-link @click="openDetail(record)">审核</a-link>
-                <!--
-                  能批量通过的才给「通过」快捷键（服务端算好的 batchApprovable）：
-                  有红黄的单必须进去看，给了快捷键就等于鼓励手快全选。
-                -->
-                <a-link v-if="record.batchApprovable" status="success" @click="quickApprove(record)">
-                  通过
-                </a-link>
-                <a-link status="danger" @click="openReject(record)">驳回</a-link>
-              </a-space>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-
-    <AuditDetailDrawer ref="detailRef" :node="node" @changed="load" />
-    <AuditRejectModal ref="rejectRef" :materials="[]" @rejected="load" />
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
+import type { CSSProperties } from 'vue'
 import type { AuditTodo } from '@/apis/xt/audit'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconCheck, IconRefresh } from '@arco-design/web-vue/es/icon'
+import {
+  NButton,
+  NCard,
+  NDataTable,
+  NInput,
+  NSelect,
+  NSpace,
+  NTabPane,
+  NTabs,
+  NTag,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref, useTemplateRef } from 'vue'
 import {
   approveSubmission,
   AUDIT_ERROR_HINT,
@@ -174,26 +25,34 @@ import {
   LEVEL_TAG
 } from '@/apis/xt/audit'
 import { getTaskList } from '@/apis/xt/task'
-import { useUserStore } from '@/stores'
+import { listPagination } from '@/composables/pagination'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useUserStore } from '@/stores/user'
+import { tagOf } from '@/utils/tag'
 import AuditDetailDrawer from './AuditDetailDrawer.vue'
 import AuditRejectModal from './AuditRejectModal.vue'
 
 /**
  * 审核台（原型 ② / ⑥，契约 §11.1）。
  *
- * ## 这一屏最容易做错的三件事
+ * ## 这一屏最容易做错的三件事（照抄上一版，只换了 UI 库）
  *
  * 1. **不要在前端按班级过滤**。"权限 ≠ 范围"由服务端保证（SQL 里显式 `1 = 0`），
  *    前端再过滤一次只会在口径不一致时制造假象 —— 而且前端过滤不了越权。
+ *    所以下面的筛选项里**没有班级**，只有任务 / 等待时长 / 关键字。
  * 2. **四个计数不能跟着 level 过滤变**。否则点一下「有异常」，其它计数变成 0，
- *    用户就回不到「全部」了。服务端已经这么算，前端照显示即可。
+ *    用户就回不到「全部」了。愿望是服务端算好的（`counts`），前端照显示即可 ——
+ *    所以 `load()` 里把 `counts` 与 `list` 一起接，**不要**在本地改它。
  * 3. **批量通过必须逐条说清谁被跳过**。只说"过了 3 个"会让用户反复点那个大按钮。
  */
 defineOptions({ name: 'Audit' })
 
+const message = useMessage()
+const dialog = useDialog()
 const userStore = useUserStore()
 
-const canFinal = computed(() => userStore.permissions.includes('audit:final'))
+/** 终审是管理员的动作；没有 `audit:final` 就连 tab 都不给（点了必然 40301） */
+const canFinal = computed(() => userStore.has('audit:final'))
 
 const node = ref<number>(1)
 const loading = ref(false)
@@ -201,9 +60,10 @@ const batching = ref(false)
 const list = ref<AuditTodo[]>([])
 const total = ref(0)
 const counts = ref({ all: 0, clean: 0, abnormal: 0, overTime: 0 })
-const selectedKeys = ref<number[]>([])
+/** 勾选的填报单 id（naive 的 row-key 是数字，勾选键集合也是数字） */
+const checkedKeys = ref<number[]>([])
 const levelFilter = ref<number | undefined>(undefined)
-const taskOptions = ref<Array<{ id: number, taskName: string }>>([])
+const taskOptions = ref<Array<{ label: string, value: number }>>([])
 const taskLoading = ref(false)
 
 const query = reactive({
@@ -214,9 +74,38 @@ const query = reactive({
   waitingOverHours: undefined as number | undefined
 })
 
+/** 等待时长的三个档位（写在这里而不是模板里：模板里的多行字面量会被 vue/comma-dangle 要求补尾逗号） */
+const WAIT_OPTIONS = [
+  { label: '超过 24 小时', value: 24 },
+  { label: '超过 48 小时', value: 48 },
+  { label: '超过 72 小时', value: 72 }
+]
+
 const detailRef = useTemplateRef('detailRef')
 const rejectRef = useTemplateRef('rejectRef')
 
+/**
+ * `n-card` 的内容区要变成"能撑满的 flex 列"（高度链的中间一环）。
+ *
+ * ⚠️ 曾经用 `:deep(.n-card__content)` 写这条，**但那是个不存在的类名**：
+ *    naive-ui 2.45.3 的内容区是 `.n-card-content`（`Card.mjs` 用 `cB("card-content")`）。
+ *    选择器匹配不到 → 内容区仍是 `display: block` → `.page-card__body` 的 `flex: 1` 无处可长
+ *    → 表格只有 81px 高、分页器浮在卡片中间（**不报错**，只是"看起来没贴底"）。
+ *    所以这里改用 `content-style` 直接写在元素上，不依赖类名。
+ */
+const contentStyle: CSSProperties = {
+  flex: '1 1 auto',
+  minHeight: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+}
+
+/**
+ * 状态色词由 `@/utils/tag` 统一转换（接口里的 `color` 是 Arco 色词，
+ * 直接给 `n-tag` 会静默变灰 —— 见那个文件的注释）。
+ */
+
 const countCards = computed(() => [
   { key: 'all', label: '全部待办', value: counts.value.all, tone: 'blue', level: undefined as number | undefined },
   { key: 'clean', label: '无问题', value: counts.value.clean, tone: 'green', level: 0 },
@@ -224,46 +113,153 @@ const countCards = computed(() => [
   { key: 'overTime', label: '已超时', value: counts.value.overTime, tone: 'red', level: undefined }
 ])
 
-const pagination = computed(() => ({
-  current: query.pageNum,
+/** 分页器：`remote` 模式下 naive 不会自己切数据，"每页条数"必须重新取数（见 composables/pagination） */
+const pagination = computed(() => listPagination({
+  page: query.pageNum,
   pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
+  itemCount: total.value
 }))
 
 function fmtTime(v: string | null) {
   return v ? v.replace('T', ' ').slice(0, 16) : '—'
 }
 
-function fmtWait(h: number | null) {
-  if (h === null || h === undefined) {
+function fmtWait(hours: number | null) {
+  if (hours === null || hours === undefined) {
     return '—'
   }
-  if (h < 24) {
-    return `${h} 小时`
+  if (hours < 24) {
+    return `${hours} 小时`
   }
-  return `${Math.floor(h / 24)} 天`
+  return `${Math.floor(hours / 24)} 天`
 }
 
 /** 等得越久越显眼：超过 48 小时变红 —— 超时是这一屏唯一要主动推的事 */
-function waitTone(h: number | null) {
-  if (h === null || h === undefined) {
+function waitClass(hours: number | null) {
+  if (hours === null || hours === undefined) {
     return 'audit__muted'
   }
-  if (h >= 48) {
+  if (hours >= 48) {
     return 'audit__wait--bad'
   }
-  if (h >= 24) {
+  if (hours >= 24) {
     return 'audit__wait--warn'
   }
   return ''
 }
 
+const columns = computed<DataTableColumns<AuditTodo>>(() => [
+  // `multiple: true` 显式写出来：naive 的默认值是 undefined（渲染成复选框），
+  // 但写成 `false` 会变成单选 —— 批量通过就没法用了，所以不靠默认值。
+  { type: 'selection', multiple: true },
+  {
+    title: '学生',
+    key: 'realName',
+    width: 170,
+    render: (row) => h('div', [
+      h('div', { class: 'audit__name' }, [
+        row.realName,
+        row.rejectCount
+          ? h(NTag, { size: 'small', bordered: false, style: 'margin-left:6px' }, { default: () => `驳回 ${row.rejectCount} 次` })
+          : null
+      ]),
+      h('div', { class: 'audit__muted' }, row.orgName || '未分班')
+    ])
+  },
+  {
+    title: '任务',
+    key: 'taskName',
+    width: 170,
+    ellipsis: { tooltip: true },
+    render: (row) => h('div', [
+      h('div', row.taskName),
+      h('div', { class: 'audit__muted' }, `${fmtTime(row.submitTime)} 提交`)
+    ])
+  },
+  {
+    title: '材料',
+    key: 'materialThumbs',
+    width: 150,
+    render: (row) => {
+      const thumbs = (row.materialThumbs ?? []).slice(0, 3)
+      if (!thumbs.length) {
+        return h('span', { class: 'audit__muted' }, `${row.materialCount} 项`)
+      }
+      return h('div', { class: 'audit__thumbs' }, thumbs.map((u, i) => h('img', {
+        key: i,
+        src: u,
+        class: 'audit__thumb',
+        alt: '材料缩略图',
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation()
+          openDetail(row)
+        }
+      })))
+    }
+  },
+  {
+    title: '校验',
+    key: 'level',
+    width: 130,
+    render: (row) => {
+      const meta = tagOf(LEVEL_TAG, row.level, '未知')
+      return h('div', [
+        h(NTag, { size: 'small', bordered: false, type: meta.type }, { default: () => meta.text }),
+        row.redSummary
+          ? h('div', { class: 'audit__red', title: row.redSummary }, row.redSummary)
+          : (row.redCount || row.yellowCount
+              ? h('div', { class: 'audit__muted' }, `红 ${row.redCount} · 黄 ${row.yellowCount}`)
+              : null)
+      ])
+    }
+  },
+  {
+    title: '学生改过',
+    key: 'changedFields',
+    width: 100,
+    align: 'center',
+    render: (row) => (row.changedFields?.length
+      ? h('span', { class: 'audit__changed' }, `${row.changedFields.length} 项`)
+      : h('span', { class: 'audit__muted' }, '—'))
+  },
+  {
+    title: '状态',
+    key: 'statusText',
+    width: 100,
+    align: 'center',
+    render: (row) => h(NTag, { size: 'small', bordered: false }, { default: () => row.statusText })
+  },
+  {
+    title: '已等待',
+    key: 'waitHours',
+    width: 90,
+    align: 'center',
+    render: (row) => h('span', { class: waitClass(row.waitHours) }, fmtWait(row.waitHours))
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 190,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => h(NSpace, { size: 12, wrap: true, justify: 'center' }, {
+      default: () => [
+        h(NButton, { text: true, size: 'small', onClick: () => openDetail(row) }, { default: () => '审核' }),
+        // 能批量通过的才给「通过」快捷键（服务端算好的 `batchApprovable`）：
+        // 有红黄的单必须进去看，给了快捷键就等于鼓励手快全选。
+        row.batchApprovable
+          ? h(NButton, { text: true, size: 'small', type: 'primary', onClick: () => quickApprove(row) }, { default: () => '通过' })
+          : null,
+        h(NButton, { text: true, size: 'small', type: 'error', onClick: () => openReject(row) }, { default: () => '驳回' })
+      ]
+    })
+  }
+])
+
 async function load() {
   loading.value = true
   try {
-    const res = await getAuditTodos({
+    const page = await getAuditTodos({
       node: node.value,
       taskId: query.taskId,
       level: levelFilter.value,
@@ -272,9 +268,9 @@ async function load() {
       pageNum: query.pageNum,
       pageSize: query.pageSize
     })
-    list.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
-    counts.value = res.data?.counts ?? { all: 0, clean: 0, abnormal: 0, overTime: 0 }
+    list.value = page?.list ?? []
+    total.value = page?.total ?? 0
+    counts.value = page?.counts ?? { all: 0, clean: 0, abnormal: 0, overTime: 0 }
   } finally {
     loading.value = false
   }
@@ -283,8 +279,8 @@ async function load() {
 async function loadTasks() {
   taskLoading.value = true
   try {
-    const res = await getTaskList({ pageNum: 1, pageSize: 200 })
-    taskOptions.value = (res.data?.list ?? []).map((t) => ({ id: t.id, taskName: t.taskName }))
+    const page = await getTaskList({ pageNum: 1, pageSize: 200 })
+    taskOptions.value = (page?.list ?? []).map((t) => ({ label: t.taskName, value: t.id }))
   } finally {
     taskLoading.value = false
   }
@@ -292,13 +288,14 @@ async function loadTasks() {
 
 function search() {
   query.pageNum = 1
-  selectedKeys.value = []
+  checkedKeys.value = []
   load()
 }
 
 function onNodeChange() {
+  // 换节点等于换一份待办：分级过滤与勾选都要清掉（否则会把初审的勾选带到终审）
   levelFilter.value = undefined
-  selectedKeys.value = []
+  checkedKeys.value = []
   search()
 }
 
@@ -317,12 +314,21 @@ function onPageChange(page: number) {
   load()
 }
 
-function onSelect(keys: (string | number)[]) {
-  selectedKeys.value = keys as number[]
+/** 勾选变化（用命名函数而不是模板内联赋值：内联写 `checkedKeys = keys` 依赖 ref 解包，读起来也绕） */
+function onCheckedChange(keys: Array<string | number>) {
+  checkedKeys.value = keys as number[]
 }
 
-function onSelectAll(checked: boolean) {
-  selectedKeys.value = checked ? list.value.map((r) => r.submissionId) : []
+/**
+ * 改「每页条数」必须重新取数。
+ *
+ * ⚠️ 上一版踩过：只改本地的 pageSize 而不重新请求，于是分页器说 50 条/页、
+ *    表里还是 20 条 —— 看起来像表格坏了。`remote` 模式下这也是唯一正确的做法。
+ */
+function onPageSizeChange(size: number) {
+  query.pageSize = size
+  query.pageNum = 1
+  load()
 }
 
 function openDetail(row: AuditTodo) {
@@ -333,49 +339,49 @@ function openReject(row: AuditTodo) {
   rejectRef.value?.open(row.submissionId)
 }
 
-/** 列表里的快捷通过：进详情再点的动作这里省掉，但只对"无问题"的单开放 */
+/** 列表里的快捷通过：只对"无问题"的单开放（红黄项服务端也会拒，见 40032） */
 async function quickApprove(row: AuditTodo) {
   try {
     const res = await approveSubmission(row.submissionId, { actionSource: 'BUTTON' })
-    Message.success(res.data?.replayed ? '这一单刚才已经审过了' : '已通过')
+    message.success(res?.replayed ? '这一单刚才已经审过了' : '已通过')
     search()
   } catch (e) {
     const code = bizCodeOf(e)
     const hint = code ? AUDIT_ERROR_HINT[code] : ''
-    Message.error(hint ? `${(e as Error).message}（${hint}）` : (e as Error).message)
+    message.error(hint ? `${(e as Error).message}（${hint}）` : (e as Error).message)
   }
 }
 
 async function onBatchApprove() {
-  const ids = selectedKeys.value
+  const ids = checkedKeys.value
   if (!ids.length) {
-    Message.warning('请先勾选要通过的单子')
+    message.warning('请先勾选要通过的单子')
     return
   }
   batching.value = true
   try {
     const res = await batchApprove(ids)
-    const r = res.data
-    const skipped = r?.details?.filter((d) => d.skipped) ?? []
+    const skipped = (res?.details ?? []).filter((d) => d.skipped)
     if (!skipped.length) {
-      Message.success(`已通过 ${r?.approved ?? 0} 份`)
+      message.success(`已通过 ${res?.approved ?? 0} 份`)
     } else {
       // 逐条列出被跳过的原因 —— 这是"用户下次能不能自己判断"的关键。
-      // ⚠️ 这里用 &lt;pre&gt; 纯文本而不是富文本：本页是 `lang="ts"` 的 SFC，
-      //    在里面写 JSX 会直接编译失败（历史上踩过），而为了一个弹窗改成 tsx 不值得。
+      // 用 `pre-wrap` 的纯文本而不是富文本：一个弹窗不值得引入 JSX
+      // （本仓库的 SFC 是 `lang="ts"`，写 JSX 会直接编译失败，历史上踩过）。
       const lines = skipped.map((d) => `· ${d.realName || `#${d.submissionId}`}：${d.reason || '不符合批量通过条件'}`)
-      Modal.info({
-        title: `通过 ${r?.approved ?? 0} 份，跳过 ${skipped.length} 份`,
-        content: `下面这些没有被通过：\n\n${lines.join('\n')}`,
-        hideCancel: true
+      const skippedText = `下面这些没有被通过：\n\n${lines.join('\n')}`
+      dialog.warning({
+        title: `通过 ${res?.approved ?? 0} 份，跳过 ${skipped.length} 份`,
+        content: () => h('div', { style: 'white-space: pre-wrap; line-height: 1.8' }, skippedText),
+        positiveText: '知道了'
       })
     }
-    selectedKeys.value = []
+    checkedKeys.value = []
     await load()
   } catch (e) {
     const code = bizCodeOf(e)
     const hint = code ? AUDIT_ERROR_HINT[code] : ''
-    Message.error(hint ? `${(e as Error).message}（${hint}）` : (e as Error).message)
+    message.error(hint ? `${(e as Error).message}（${hint}）` : (e as Error).message)
   } finally {
     batching.value = false
   }
@@ -392,124 +398,256 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.audit {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+<template>
+  <NCard class="page-card audit" :bordered="false" title="审核" :content-style="contentStyle">
+    <template #header-extra>
+      <span class="toolbar__hint">
+        初审由班主任做（只看得到自己带的班），终审由学校管理员做
+      </span>
+    </template>
 
-  &__stats {
-    display: flex;
-    gap: 12px;
-    margin: 4px 0 14px;
-  }
+    <!--
+      节点切换用 tab：初审与终审是**同一份数据的两个阶段**，
+      而不是两个功能。做成两个页面的话，用户会以为自己进错了地方。
+    -->
+    <NTabs v-model:value="node" type="segment" class="audit__tabs" @update:value="onNodeChange">
+      <!-- ⚠️ 用 `#tab` 插槽而不是 `tab` 属性，否则标签一个字都不显示（原因见 task/index.vue 同处注释） -->
+      <NTabPane :name="1">
+        <template #tab>
+          初审（班主任）
+        </template>
+      </NTabPane>
+      <NTabPane v-if="canFinal" :name="2">
+        <template #tab>
+          终审（学校管理员）
+        </template>
+      </NTabPane>
+    </NTabs>
 
-  &__stat {
-    flex: 1;
-    padding: 10px 14px;
-    cursor: pointer;
-    background: var(--color-fill-1);
-    border: 1px solid transparent;
-    border-radius: 4px;
-    transition: all 0.15s;
+    <!-- 四个计数由服务端算，**不随下面的 level 过滤变化**（否则点一下「有异常」就回不到「全部」） -->
+    <div class="audit__stats">
+      <div
+        v-for="c in countCards"
+        :key="c.key"
+        class="audit__stat"
+        :class="{ 'audit__stat--on': c.level !== undefined && levelFilter === c.level }"
+        @click="setLevel(c.level)"
+      >
+        <div class="audit__stat-num" :class="`audit__num--${c.tone}`">{{ c.value }}</div>
+        <div class="audit__stat-label">{{ c.label }}</div>
+      </div>
+    </div>
 
-    &:hover {
-      border-color: var(--color-border-2);
-    }
+    <!--
+      工具条：主操作在左、筛选在右。**同一行所有控件统一默认尺寸** ——
+      之前全排 `size="small"`，28px 的白底小按钮贴在白底表格上几乎看不出是按钮。
+    -->
+    <div class="toolbar">
+      <NSpace align="center" :size="8">
+        <NButton type="primary" :disabled="!checkedKeys.length" :loading="batching" @click="onBatchApprove">
+          <template #icon>
+            <AppIcon name="check" :size="16" />
+          </template>
+          批量通过（{{ checkedKeys.length }}）
+        </NButton>
+        <span class="toolbar__hint">
+          只能带<strong>无问题</strong>的单；红黄一律自动跳过并说明原因
+        </span>
+      </NSpace>
 
-    &--on {
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 2px rgb(var(--primary-1));
-    }
+      <NSpace align="center" :size="8">
+        <NSelect
+          v-model:value="query.taskId"
+          class="audit__task"
+          clearable
+          placeholder="全部任务"
+          :loading="taskLoading"
+          :options="taskOptions"
+          @update:value="search"
+        />
+        <NSelect
+          v-model:value="query.waitingOverHours"
+          class="audit__wait"
+          clearable
+          placeholder="等待时长"
+          :options="WAIT_OPTIONS"
+          @update:value="search"
+        />
+        <NInput
+          v-model:value="query.keyword"
+          class="audit__search"
+          clearable
+          placeholder="搜索姓名 / 班级"
+          @keyup.enter="search"
+          @clear="search"
+        />
+        <NButton @click="search">
+          <template #icon>
+            <AppIcon name="search" :size="16" />
+          </template>
+          搜索
+        </NButton>
+        <NButton @click="reload">
+          <template #icon>
+            <AppIcon name="refresh" :size="16" />
+          </template>
+          刷新
+        </NButton>
+      </NSpace>
+    </div>
 
-    &--blue .audit__stat-num {
-      color: rgb(var(--blue-6));
-    }
+    <div class="page-card__body audit__body">
+      <!--
+        尺寸口径（Naive 与 Arco 不同，照抄 Arco 的 `:scroll="{ x, y }"` 会**被静默忽略**）：
+          · 横向：`:scroll-x="1140"`（数值，8 列合计宽 + 勾选列）；
+          · 纵向：`flex-height` 撑满 `.page-card__body`（高度链见 styles/index.scss 的 .page-card 注释），
+            这样表体自己滚、分页器钉在卡片底部 —— 上一版在 Arco 上踩过"分页器被裁在可视区外"。
+      -->
+      <NDataTable
+        remote
+        flex-height
+        size="small"
+        :columns="columns"
+        :data="list"
+        :loading="loading"
+        :row-key="(row: AuditTodo) => row.submissionId"
+        :checked-row-keys="checkedKeys"
+        :pagination="pagination"
+        :scroll-x="1140"
+        @update:checked-row-keys="onCheckedChange"
+        @update:page="onPageChange"
+        @update:page-size="onPageSizeChange"
+      />
+    </div>
+  </NCard>
 
-    &--green .audit__stat-num {
-      color: rgb(var(--green-6));
-    }
+  <AuditDetailDrawer ref="detailRef" :node="node" @changed="load" />
+  <AuditRejectModal ref="rejectRef" :materials="[]" @rejected="load" />
+</template>
 
-    &--orange .audit__stat-num {
-      color: rgb(var(--orange-6));
-    }
+<style scoped>
+/**
+ * 高度链的中间一环由 `contentStyle` 写在卡片内容元素上（原因见 script 里那段说明）。
+ * 这里只负责"内容区里的固定区块不被挤压"：tabs / 计数格 / 工具条都是 `flex: none`，
+ * 剩下的空间全给表格 —— 分页器才钉得住卡片底部。
+ */
+.audit__tabs {
+  flex: none;
+  margin-bottom: 12px;
+}
 
-    &--red .audit__stat-num {
-      color: rgb(var(--red-6));
-    }
-  }
+/* 四个计数格：卡片**内部**的小格子，用浅灰底 + 弱描边，而不是第二层白卡片 */
+.audit__stats {
+  display: flex;
+  flex: none;
+  gap: 12px;
+  margin-bottom: 16px;
+}
 
-  &__stat-num {
-    font-size: 22px;
-    font-weight: 600;
-    line-height: 1.2;
-  }
+.audit__stat {
+  flex: 1;
+  padding: 12px 14px;
+  cursor: pointer;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
 
-  &__stat-label {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.audit__stat:hover {
+  border-color: #d0d5dd;
+}
 
-  &__task {
-    width: 180px;
-  }
+.audit__stat--on {
+  border-color: #0052d9;
+  box-shadow: 0 0 0 2px rgb(0 82 217 / 12%);
+}
 
-  &__wait {
-    width: 130px;
-  }
+.audit__stat-num {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+}
 
-  &__search {
-    width: 200px;
-  }
+.audit__num--blue {
+  color: #0052d9;
+}
 
-  &__name {
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
+.audit__num--green {
+  color: #00a870;
+}
 
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.audit__num--orange {
+  color: #ed7b2f;
+}
 
-  &__thumbs {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-  }
+.audit__num--red {
+  color: #d54941;
+}
 
-  &__thumb {
-    width: 32px;
-    height: 32px;
-    cursor: zoom-in;
-    object-fit: cover;
-    border: 1px solid var(--color-border-2);
-    border-radius: 3px;
-  }
+.audit__stat-label {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
 
-  &__red {
-    overflow: hidden;
-    font-size: 12px;
-    color: rgb(var(--red-6));
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.audit__task {
+  width: 180px;
+}
 
-  &__changed {
-    font-weight: 600;
-    color: rgb(var(--orange-6));
-  }
+.audit__wait {
+  width: 130px;
+}
 
-  &__wait {
-    &--warn {
-      color: rgb(var(--orange-6));
-    }
+.audit__search {
+  width: 190px;
+}
 
-    &--bad {
-      font-weight: 600;
-      color: rgb(var(--red-6));
-    }
-  }
+/* ⚠️ 下面的类都出现在**渲染函数**里（表格列），渲染函数生成的元素不带 `data-v-*`，
+   写成 `.audit__muted` 这种普通 scoped 选择器**匹配不到**（不报错，只是样式全丢） */
+:deep(.audit__name) {
+  font-weight: 500;
+}
+
+:deep(.audit__muted) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+:deep(.audit__thumbs) {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+:deep(.audit__thumb) {
+  width: 32px;
+  height: 32px;
+  cursor: zoom-in;
+  object-fit: cover;
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 4px;
+}
+
+:deep(.audit__red) {
+  overflow: hidden;
+  font-size: 12px;
+  color: #d54941;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.audit__changed) {
+  font-weight: 600;
+  color: #ed7b2f;
+}
+
+:deep(.audit__wait--warn) {
+  color: #ed7b2f;
+}
+
+:deep(.audit__wait--bad) {
+  font-weight: 600;
+  color: #d54941;
 }
 </style>
diff --git a/frontend-pc/src/views/cleanup/index.vue b/frontend-pc/src/views/cleanup/index.vue
deleted file mode 100644
index 4f1f37a..0000000
--- a/frontend-pc/src/views/cleanup/index.vue
+++ /dev/null
@@ -1,693 +0,0 @@
-<template>
-  <GiPageLayout margin collapsed>
-    <a-row justify="space-between" class="g-row-tool">
-      <a-space wrap>
-        <!-- ⚠️ GiButton **没有 `text` prop**：文案要么用 type 的预设（新增/编辑/…），
-             要么用**默认插槽**。写成 `text="..."` 不会报错，但页面上显示的是预设文案 -->
-        <GiButton type="upload" @click="openCreate">上传压缩包整理</GiButton>
-        <a-button @click="loadRecords">刷新</a-button>
-      </a-space>
-      <a-space wrap>
-        <a-input-search
-          v-model="query.keyword"
-          placeholder="按整理任务名称搜索"
-          allow-clear
-          style="width: 240px"
-          @search="onSearch"
-        />
-        <a-select
-          v-model="query.status"
-          placeholder="全部状态"
-          allow-clear
-          style="width: 140px"
-          :options="STATUS_OPTIONS"
-          @change="onSearch"
-        />
-        <a-button @click="onReset">重置</a-button>
-      </a-space>
-    </a-row>
-
-    <a-table
-      :data="records"
-      :loading="listLoading"
-      row-key="id"
-      :pagination="pagination"
-      :bordered="{ cell: true }"
-      :scroll="{ x: 1100 }"
-      @page-change="onPageChange"
-    >
-      <template #columns>
-        <a-table-column title="序号" :width="68" align="center">
-          <template #cell="{ rowIndex }">{{ rowIndex + 1 }}</template>
-        </a-table-column>
-        <a-table-column title="整理任务" data-index="jobName" :width="240" ellipsis tooltip />
-        <a-table-column title="状态" :width="110" align="center">
-          <template #cell="{ record }">
-            <a-tag :color="statusColor(record.status)">{{ record.statusText }}</a-tag>
-          </template>
-        </a-table-column>
-        <a-table-column title="进度" :width="150">
-          <template #cell="{ record }">
-            <span v-if="record.status === 3">{{ record.totalFiles ?? 0 }} 个文件</span>
-            <span v-else-if="record.status === 4" class="cl-dim">—</span>
-            <a-progress v-else :percent="(record.progress || 0) / 100" size="small" />
-          </template>
-        </a-table-column>
-        <a-table-column title="压缩率" :width="100" align="center">
-          <!--
-            ⚠️ `—` 有**两个**含义，都不要替换成 0%：
-              ① 还没算出来（任务在跑）；
-              ② 这个包**本来就不适用压缩** —— 里面的文件已经是压过的（jpg），
-                 或总量太小，重新打 zip 的包头开销比省下来的还多。
-                 实测 3 个 40 字节的小文件：raw=120B、final=802B，
-                 按公式算是 `-568.3%` —— **负数压缩率是没有意义的**，
-                 所以服务端也回 `—`（同一个符号，都是"这个数说明不了什么"）。
-          -->
-          <template #cell="{ record }">{{ record.compressRatio || '—' }}</template>
-        </a-table-column>
-        <a-table-column title="结果" :width="110" align="center">
-          <template #cell="{ record }">
-            <a-tag v-if="record.status === 3 && record.targetTaskId" color="success">已导入</a-tag>
-            <a-tag v-else-if="record.status === 3" color="arcoblue">待导入</a-tag>
-            <a-tag v-else-if="record.status === 4" color="danger">失败</a-tag>
-            <span v-else class="cl-dim">—</span>
-          </template>
-        </a-table-column>
-        <a-table-column title="创建时间" data-index="createTime" :width="170" />
-        <a-table-column title="操作" :width="90" align="center" fixed="right">
-          <template #cell="{ record }">
-            <a-button type="text" size="mini" @click="openDetail(record)">详情</a-button>
-          </template>
-        </a-table-column>
-      </template>
-    </a-table>
-
-    <!--
-      上传弹窗。**刻意先选文件、再填名字**：用户的动作顺序是"我有个包要整理"，
-      而"整理任务名叫什么"是他看到包之后才想的事。
-    -->
-    <a-modal
-      v-model:visible="createVisible"
-      title="上传压缩包整理"
-      :mask-closable="false"
-      :ok-loading="creating"
-      ok-text="开始整理"
-      @before-ok="submitCreate"
-      @close="resetCreate"
-    >
-      <a-form :model="createForm" layout="vertical">
-        <a-form-item field="file" label="压缩包（zip）" required>
-          <a-upload :auto-upload="false" :limit="1" accept=".zip" @change="onFileChange" />
-          <template #extra>
-            <div class="cl-tip">
-              包里单个文件不超过 50MB、总量不超过 2GB；macOS 的
-              <code>__MACOSX</code> 会被自动忽略（否则报告里的文件数会虚高）。
-            </div>
-          </template>
-        </a-form-item>
-
-        <a-form-item field="jobName" label="整理任务名称" required>
-          <a-input v-model="createForm.jobName" placeholder="如 24中技数控1班-历史整理" />
-        </a-form-item>
-
-        <a-form-item field="rosterTaskId" label="关联到已有任务的名册">
-          <a-select
-            v-model="createForm.rosterTaskId"
-            placeholder="不关联也能跑，但会少两项关键检查"
-            allow-clear
-            allow-search
-            :loading="taskLoading"
-            :options="taskOptions"
-          />
-          <!--
-            ⚠️ 这句是这一屏最该说清的话（契约 §13.2 的原话）：
-            没有名册就只能做文件名规范化；**有名单才能做证件号校验、疑似串档检测** ——
-            而"疑似串档 1 例"正是报告里最有价值的一条。
-            不说清的话，用户会在报告里看到那两项是 0，然后以为功能没做。
-          -->
-          <template #extra>
-            <div class="cl-tip">
-              <strong>有关联才有证件号校验与串档检测</strong> ——
-              「疑似串档 1 例」是体检报告里最有价值的一条，而没有名册就无从比对。
-            </div>
-          </template>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- 详情：进度 / 报告 / 导入 -->
-    <a-drawer
-      v-model:visible="detailVisible"
-      :width="760"
-      :title="detail?.jobName || '整理详情'"
-      :footer="false"
-      unmount-on-close
-      @close="stopPolling"
-    >
-      <a-spin :loading="detailLoading" style="display: block">
-        <template v-if="detail">
-          <a-descriptions :column="2" bordered size="medium">
-            <a-descriptions-item label="状态">
-              <a-tag :color="statusColor(detail.status)">{{ detail.statusText }}</a-tag>
-            </a-descriptions-item>
-            <a-descriptions-item label="进度">{{ detail.progress }}%</a-descriptions-item>
-            <a-descriptions-item label="文件数">{{ detail.totalFiles ?? '—' }}</a-descriptions-item>
-            <a-descriptions-item label="压缩率">
-              {{ detail.compressRatio || '—' }}
-            </a-descriptions-item>
-            <a-descriptions-item label="解析出学员">
-              {{ detail.parsedStudents ?? '—' }}
-            </a-descriptions-item>
-            <a-descriptions-item label="材料种类">
-              {{ detail.parsedMaterials ?? '—' }}
-            </a-descriptions-item>
-          </a-descriptions>
-
-          <!--
-            失败时**必须把 errorMsg 原样显示**：它是唯一能让用户知道"为什么"的东西。
-            常见原因（不是 zip、单文件超 50MB）服务端都有明确文案，
-            换成笼统的"整理失败"等于把已经写好的解释扔掉。
-          -->
-          <a-alert v-if="detail.status === 4" type="error" class="cl-alert" title="整理失败">
-            {{ detail.errorMsg || '服务端没有返回原因，请联系管理员查日志' }}
-          </a-alert>
-
-          <a-progress
-            v-else-if="detail.status !== 3"
-            :percent="(detail.progress || 0) / 100"
-            class="cl-alert"
-            animation
-          />
-
-          <template v-else>
-            <div v-if="report" class="cl-headline">
-              <div class="cl-headline__main">{{ headlineOf(report) }}</div>
-              <div class="cl-headline__sub">
-                这一句是报告的全部意义：<strong>系统做了什么</strong>，以及
-                <strong>还剩多少要人判断</strong>。
-              </div>
-            </div>
-
-            <a-row v-if="report" :gutter="12" class="cl-stats">
-              <a-col v-for="s in reportStats" :key="s.label" :span="6">
-                <div class="cl-stat" :class="{ 'cl-stat--warn': s.warn }">
-                  <div class="cl-stat__num">{{ s.value }}</div>
-                  <div class="cl-stat__label">{{ s.label }}</div>
-                </div>
-              </a-col>
-            </a-row>
-
-            <a-divider>重点（{{ (report?.highlights || []).length }}）</a-divider>
-            <a-empty v-if="!(report?.highlights || []).length" description="没有需要人工处理的" />
-            <div v-for="(h, i) in report?.highlights || []" :key="i" class="cl-hl">
-              <a-space>
-                <a-tag :color="levelColor(h.level)">
-                  {{ h.level >= 3 ? '必须人工' : h.level === 2 ? '警告' : '提示' }}
-                </a-tag>
-                <strong>{{ h.title }}</strong>
-                <span v-if="h.realName" class="cl-hl__who">{{ h.realName }}</span>
-              </a-space>
-              <div class="cl-hl__detail">{{ h.detail }}</div>
-              <div v-if="h.suggestion" class="cl-hl__suggest">建议：{{ h.suggestion }}</div>
-            </div>
-
-            <a-divider>系统改过的文件名（样例）</a-divider>
-            <a-empty v-if="!(report?.nameFixedSamples || []).length" description="没有需要改名的" />
-            <a-table
-              v-else
-              :data="report?.nameFixedSamples || []"
-              :pagination="false"
-              size="small"
-              :bordered="{ cell: true }"
-            >
-              <template #columns>
-                <a-table-column title="原名" data-index="original" ellipsis tooltip />
-                <a-table-column title="改成" data-index="fixed" ellipsis tooltip />
-              </template>
-            </a-table>
-
-            <a-divider>证件号冲突</a-divider>
-            <a-empty v-if="!(report?.idcardConflicts || []).length" description="没有证件号冲突" />
-            <a-table
-              v-else
-              :data="report?.idcardConflicts || []"
-              :pagination="false"
-              size="small"
-              :bordered="{ cell: true }"
-            >
-              <template #columns>
-                <a-table-column title="姓名" data-index="realName" :width="100" />
-                <a-table-column title="名册上的" data-index="rosterValue" :width="160" />
-                <a-table-column title="文件名里的" data-index="fileNameValue" :width="160" />
-                <a-table-column title="判定" data-index="verdictText" ellipsis tooltip />
-              </template>
-            </a-table>
-          </template>
-        </template>
-      </a-spin>
-
-      <div v-if="detail" class="cl-footer">
-        <a-space>
-          <a-button v-if="detail.status === 3" type="primary" @click="openImport">
-            导入为正式任务
-          </a-button>
-          <a-button v-if="detail.status === 3" :loading="downloading" @click="downloadResult">
-            下载整理结果
-          </a-button>
-          <a-button @click="refresh">刷新</a-button>
-        </a-space>
-      </div>
-    </a-drawer>
-
-    <!-- 导入为正式任务 -->
-    <a-modal
-      v-model:visible="importVisible"
-      title="导入为正式任务"
-      :mask-closable="false"
-      :ok-loading="importing"
-      ok-text="导入"
-      @before-ok="submitImport"
-    >
-      <a-alert type="normal" class="cl-alert">
-        导入会建一个<strong>草稿</strong>任务，并把解析出的学员建成名册。
-        <br />
-        <strong>不会导入文件</strong>：整理结果里的材料要让学生/老师重新传上来
-        —— 一期还没有「把外部文件挂到指定填报单」的入口。
-      </a-alert>
-      <a-form :model="importForm" layout="vertical">
-        <a-form-item field="taskName" label="新任务名称" required>
-          <a-input v-model="importForm.taskName" />
-        </a-form-item>
-        <a-form-item field="batchNo" label="批次号" required>
-          <a-input v-model="importForm.batchNo" placeholder="如 202609" />
-        </a-form-item>
-        <a-form-item field="majorName" label="专业名称">
-          <a-input v-model="importForm.majorName" placeholder="留空则从关联名册继承" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </GiPageLayout>
-</template>
-
-<script setup lang="ts">
-import type { CleanupJobVO, CleanupReportVO } from '@/apis/xt/cleanup'
-import { Message } from '@arco-design/web-vue'
-import { computed, onUnmounted, reactive, ref } from 'vue'
-import {
-
-  createCleanupJob,
-  downloadCleanupResult,
-  getCleanupJob,
-  getCleanupJobs,
-  getCleanupReport,
-  headlineOf,
-  importCleanupJob,
-  levelColor,
-  statusColor
-} from '@/apis/xt/cleanup'
-import { getTaskList } from '@/apis/xt/task'
-import { GiButton, GiPageLayout } from '@/components/index'
-
-defineOptions({ name: 'SettingCleanup' })
-
-// ⚠️ 这里用 `a-table + records + 手写分页`，**不用 Gi 模板的 `useTable`**：
-//    `useTable` 认的是 Gi 的 `{ records, total }`，而我们的契约为 `{ list, total }`。
-//    项目里其它 XT 页面（导出中心、审核台…）都是这个写法 —— 保持一致，
-//    免得同一个项目里出现两套列表加载方式。
-//
-// ⚠️ 分页对象**自己 computed**，不用 Gi 的 `usePagination()`：那个 hook 的第一个参数是
-//    "翻页时重新加载"的回调，而我们已经用 `@page-change` 在重新加载 ——
-//    两处都触发会让一次翻页打两次接口（同一个页码打两次）。
-//    这个 computed 的写法与 `views/export/index.vue` 一致。
-
-const records = ref<CleanupJobVO[]>([])
-const total = ref(0)
-const listLoading = ref(false)
-const query = reactive<{ pageNum: number, pageSize: number, keyword: string, status?: number }>({
-  pageNum: 1,
-  pageSize: 10,
-  keyword: '',
-  status: undefined
-})
-
-const STATUS_OPTIONS = [
-  { label: '排队中', value: 0 },
-  { label: '解析中', value: 1 },
-  { label: '处理中', value: 2 },
-  { label: '已完成', value: 3 },
-  { label: '失败', value: 4 }
-]
-
-async function loadRecords() {
-  listLoading.value = true
-  try {
-    const res = await getCleanupJobs({
-      pageNum: query.pageNum,
-      pageSize: query.pageSize,
-      keyword: query.keyword || undefined,
-      status: query.status
-    })
-    records.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
-  } finally {
-    listLoading.value = false
-  }
-}
-
-const pagination = computed(() => ({
-  current: query.pageNum,
-  pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
-}))
-
-function onSearch() {
-  query.pageNum = 1
-  loadRecords()
-}
-
-function onReset() {
-  query.keyword = ''
-  query.status = undefined
-  onSearch()
-}
-
-function onPageChange(page: number) {
-  query.pageNum = page
-  loadRecords()
-}
-
-loadRecords()
-
-// ── 上传 ────────────────────────────────────────
-
-const createVisible = ref(false)
-const creating = ref(false)
-const createForm = reactive<{
-  file: File | null
-  jobName: string
-  rosterTaskId?: number
-}>({ file: null, jobName: '', rosterTaskId: undefined })
-
-const taskLoading = ref(false)
-const taskOptions = ref<{ label: string, value: number }[]>([])
-
-function openCreate() {
-  createVisible.value = true
-  if (!taskOptions.value.length) {
-    taskLoading.value = true
-    getTaskList({ pageNum: 1, pageSize: 200 })
-      .then((res) => {
-        taskOptions.value = (res.data?.list || []).map((t) => ({
-          label: t.taskName,
-          value: t.id
-        }))
-      })
-      .finally(() => {
-        taskLoading.value = false
-      })
-  }
-}
-
-function resetCreate() {
-  createForm.file = null
-  createForm.jobName = ''
-  createForm.rosterTaskId = undefined
-}
-
-/** `auto-upload=false` 时 a-upload 给的是 fileList，里面 `file` 才是真正的 File。 */
-function onFileChange(_: unknown, currentFile: { file?: File }) {
-  createForm.file = currentFile?.file || null
-}
-
-async function submitCreate() {
-  if (!createForm.file) {
-    Message.warning('请先选择一个 zip 压缩包')
-    return false
-  }
-  if (!createForm.jobName.trim()) {
-    Message.warning('请填写整理任务名称')
-    return false
-  }
-  creating.value = true
-  try {
-    const res = await createCleanupJob(createForm.file, {
-      jobName: createForm.jobName.trim(),
-      rosterTaskId: createForm.rosterTaskId
-    })
-    Message.success(`已开始整理（任务 ${res.data.jobId}），可以关掉这个窗口等它跑完`)
-    createVisible.value = false
-    resetCreate()
-    onSearch()
-    return true
-  } catch {
-    // http 封装已经提示过了；这里只保证弹窗不关掉
-    return false
-  } finally {
-    creating.value = false
-  }
-}
-
-// ── 详情与轮询 ──────────────────────────────────
-
-const detailVisible = ref(false)
-const detailLoading = ref(false)
-const detail = ref<CleanupJobVO | null>(null)
-const report = ref<CleanupReportVO | null>(null)
-let timer: number | undefined
-
-async function openDetail(row: CleanupJobVO) {
-  detailVisible.value = true
-  detail.value = row
-  report.value = null
-  await loadDetail(row.id)
-  // 还在跑就轮询：整理是异步的，而用户会盯着这一屏等结果
-  if (!detail.value || detail.value.status === 0 || detail.value.status === 1
-    || detail.value.status === 2) {
-    startPolling(row.id)
-  }
-}
-
-async function loadDetail(id: number) {
-  detailLoading.value = true
-  try {
-    const res = await getCleanupJob(id)
-    detail.value = res.data
-    if (res.data?.status === 3) {
-      stopPolling()
-      await loadReport(id)
-    } else if (res.data?.status === 4) {
-      stopPolling()
-    }
-  } finally {
-    detailLoading.value = false
-  }
-}
-
-async function loadReport(id: number) {
-  try {
-    const res = await getCleanupReport(id)
-    report.value = res.data
-  } catch {
-    // 报告拿不到不影响下载结果包，所以不打断；用户会看到"重点"那块是空的
-    report.value = null
-  }
-}
-
-function startPolling(id: number) {
-  stopPolling()
-  timer = window.setInterval(() => {
-    loadDetail(id)
-  }, 3000)
-}
-
-/** 抽屉关掉就停 —— 否则关了还在后台每 3 秒打一次接口。 */
-function stopPolling() {
-  if (timer) {
-    window.clearInterval(timer)
-    timer = undefined
-  }
-}
-
-onUnmounted(stopPolling)
-
-async function refresh() {
-  if (detail.value) {
-    await loadDetail(detail.value.id)
-    loadRecords()
-  }
-}
-
-// ── 报告里的数字 ────────────────────────────────
-
-const reportStats = computed(() => {
-  const s = report.value?.summary
-  if (!s) return []
-  return [
-    { label: '不规范文件名', value: s.nameInvalid, warn: false },
-    { label: '已自动修复证件号', value: s.idcardAutoFixed, warn: false },
-    { label: '疑似串档', value: s.crossFileSuspected, warn: s.crossFileSuspected > 0 },
-    { label: '无法归位', value: s.orphanImages, warn: s.orphanImages > 0 }
-  ]
-})
-
-// ── 下载结果包 ──────────────────────────────────
-
-const downloading = ref(false)
-
-/**
- * ⚠️ 走 `fetch` + Blob 而不是 `<a href>`：结果接口要带 Authorization 头，
- * 而 `<a href>` 带不了 —— 直接导航过去会 401，用户看到的是"下载没反应"。
- */
-async function downloadResult() {
-  if (!detail.value) return
-  downloading.value = true
-  try {
-    // 下载放 api 层（与导出中心的 downloadExportFile 同一写法）：它要带
-    // Authorization 头取 blob，`<a href>` 带不了 —— 直接导航过去会 401
-    await downloadCleanupResult(detail.value.id, detail.value.jobName)
-  } catch (e) {
-    Message.error((e as Error).message)
-  } finally {
-    downloading.value = false
-  }
-}
-
-// ── 导入为正式任务 ──────────────────────────────
-
-const importVisible = ref(false)
-const importing = ref(false)
-const importForm = reactive({ taskName: '', batchNo: '', majorName: '' })
-
-function openImport() {
-  if (!detail.value) return
-  if (detail.value.targetTaskId) {
-    // 服务端是幂等的（再导一次返回原来那个任务），但先说清更好：
-    // 否则用户以为点了会建第二个任务
-    Message.info(
-      `这份整理已经导入过了（任务 ${detail.value.targetTaskId}），再点会返回同一个任务`
-    )
-  }
-  importForm.taskName = `${detail.value.jobName}-导入`
-  importForm.batchNo = new Date().toISOString().slice(0, 7).replace('-', '')
-  importForm.majorName = ''
-  importVisible.value = true
-}
-
-async function submitImport() {
-  if (!detail.value) return false
-  if (!importForm.taskName.trim() || !importForm.batchNo.trim()) {
-    Message.warning('任务名称与批次号都要填')
-    return false
-  }
-  importing.value = true
-  try {
-    const res = await importCleanupJob(detail.value.id, {
-      taskName: importForm.taskName.trim(),
-      batchNo: importForm.batchNo.trim(),
-      majorName: importForm.majorName.trim() || undefined
-    })
-    Message.success(`已建任务 ${res.data.taskId}，名册 ${res.data.rosterCount} 人`)
-    importVisible.value = false
-    await refresh()
-    return true
-  } catch {
-    return false
-  } finally {
-    importing.value = false
-  }
-}
-</script>
-
-<style scoped lang="less">
-.cl-tip {
-  margin-top: 4px;
-  color: var(--color-text-3);
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-.cl-dim {
-  color: var(--color-text-3);
-}
-
-.cl-alert {
-  margin: 12px 0;
-}
-
-.cl-footer {
-  margin-top: 20px;
-  padding-top: 12px;
-  border-top: 1px solid var(--color-border-1);
-  text-align: right;
-}
-
-.cl-headline {
-  margin: 16px 0;
-  padding: 16px;
-  background: var(--color-fill-1);
-  border-left: 3px solid rgb(var(--arcoblue-6));
-  border-radius: 4px;
-
-  &__main {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.5;
-  }
-
-  &__sub {
-    margin-top: 6px;
-    color: var(--color-text-3);
-    font-size: 12px;
-  }
-}
-
-.cl-stats {
-  margin-bottom: 8px;
-}
-
-.cl-stat {
-  padding: 12px;
-  background: var(--color-fill-1);
-  border-radius: 4px;
-  text-align: center;
-
-  &--warn .cl-stat__num {
-    color: rgb(var(--red-6));
-  }
-
-  &__num {
-    font-size: 22px;
-    font-weight: 600;
-    line-height: 1.2;
-  }
-
-  &__label {
-    margin-top: 4px;
-    color: var(--color-text-3);
-    font-size: 12px;
-  }
-}
-
-.cl-hl {
-  padding: 10px 0;
-  border-bottom: 1px solid var(--color-border-1);
-
-  &__who {
-    color: var(--color-text-2);
-  }
-
-  &__detail {
-    margin-top: 4px;
-    color: var(--color-text-2);
-    font-size: 13px;
-  }
-
-  &__suggest {
-    margin-top: 2px;
-    color: var(--color-text-3);
-    font-size: 12px;
-  }
-}
-</style>
diff --git a/frontend-pc/src/views/coming-soon/index.vue b/frontend-pc/src/views/coming-soon/index.vue
deleted file mode 100644
index e5de047..0000000
--- a/frontend-pc/src/views/coming-soon/index.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>
-        <a-space>
-          <IconClockCircle />
-          <span>{{ menu?.title ?? route.meta.title ?? '功能' }}</span>
-        </a-space>
-      </template>
-      <template #extra>
-        <a-tag color="orange">{{ milestone }}</a-tag>
-      </template>
-
-      <a-alert type="info" :show-icon="false">
-        <template #title>
-          <strong>这个页面还没做。</strong>
-          {{ menu?.note ?? '该功能尚未实现。' }}
-        </template>
-      </a-alert>
-
-      <p class="coming-soon__why">
-        左侧菜单是按 <strong>服务端返回的角色权限</strong> 渲染的，所以你能看到它，
-        说明你的角色确实有这个权限 —— 只是界面还没排到。
-      </p>
-    </a-card>
-  </GiPageLayout>
-</template>
-
-<script setup lang="ts">
-import { IconClockCircle } from '@arco-design/web-vue/es/icon'
-import { findMenuByPath } from '@/config/xt-routes'
-
-/**
- * 「待建」页。
- *
- * 为什么不直接隐藏未实现的菜单：
- *   1. 菜单本身就是要展示的东西（权限驱动的导航）；
- *   2. 隐藏会让人以为"没这个功能"，而显示"排队中 + 属于哪个里程碑"是更准确的信息；
- *   3. 一个页面服务所有占位路由，成本极低。
- *
- * ⚠️ 这一页**只服务"确实还没做"的菜单**（现在只剩「角色与授权」）。
- *    曾经它还要区分另一种情况 —— "功能已经有了、只是入口在别处"（名单管理 / 表单设计 /
- *    材料规则，都在「收集任务」行内的链接里）。那三条菜单已按客户要求**直接去掉**：
- *    导航里挂着一条点进去只有指路的条目，既占位置又让人以为这里应该有事可做。
- *    所以 `entryAt` 那套分支（"功能已就绪"标签 + 跳转按钮）也一并删了 ——
- *    留着就是一段永远不会被走到的代码。
- *
- * ⚠️ 按**路径**找，不要按 `route.meta.menu`。
- *
- * 原来写的是 `findMenu(route.meta.menu ?? '')`，而 `formatAsyncRoutes` 构造的 meta 里
- * **没有 `menu` 这个键**（只有 hidden/keepAlive/title/icon/... ）——
- * 于是这里永远拿到 `undefined`，页面永远显示兜底文案
- * 「功能 / 规划中 / 该功能尚未实现」，**每个菜单项自己的 note 从来没显示出来过**。
- * 而 note 恰恰是这一页最有用的东西。
- */
-defineOptions({ name: 'ComingSoon' })
-
-const route = useRoute()
-
-const menu = computed(() => findMenuByPath(route.path))
-
-/** 各菜单对应的里程碑（与《05-开发任务拆解》对齐） */
-const MILESTONES: Record<string, string> = {
-  role: '二期'
-}
-
-const milestone = computed(() => MILESTONES[menu.value?.key ?? ''] ?? '规划中')
-</script>
-
-<style lang="scss" scoped>
-.coming-soon__why {
-  margin: 16px 0 0;
-  font-size: 13px;
-  line-height: 1.9;
-  color: var(--color-text-2);
-
-  strong {
-    color: var(--color-text-1);
-  }
-}
-</style>
diff --git a/frontend-pc/src/views/dashboard/index.vue b/frontend-pc/src/views/dashboard/index.vue
index 31208ac..b16e7d0 100644
--- a/frontend-pc/src/views/dashboard/index.vue
+++ b/frontend-pc/src/views/dashboard/index.vue
@@ -1,333 +1,155 @@
-<template>
-  <GiPageLayout>
-    <!-- 欢迎条 -->
-    <a-card :bordered="false" class="dash__welcome">
-      <div class="dash__hello">
-        <a-avatar :size="46" class="dash__avatar">{{ avatarText }}</a-avatar>
-        <div>
-          <h3 class="dash__name">{{ userStore.name || '—' }}，欢迎回来</h3>
-          <p class="dash__meta">
-            {{ userStore.tenantName || '平台运营' }} ·
-            {{ roleLabel || '—' }}
-          </p>
-        </div>
-        <a-tag class="dash__scope" color="arcoblue">一期范围：学校收集 + 自主认定</a-tag>
-      </div>
-    </a-card>
-
-    <!-- 统计 -->
-    <a-row :gutter="14" class="dash__stats">
-      <a-col v-for="s in stats" :key="s.label" :xs="12" :sm="12" :md="6">
-        <a-card :bordered="false" class="dash__stat">
-          <div class="dash__stat-label">
-            <component :is="s.icon" />
-            <span>{{ s.label }}</span>
-          </div>
-          <div class="dash__stat-num" :class="s.tone">
-            {{ s.value }}<small v-if="s.unit">{{ s.unit }}</small>
-          </div>
-          <div class="dash__stat-foot">{{ s.foot }}</div>
-        </a-card>
-      </a-col>
-    </a-row>
-
-    <!-- 快捷入口 -->
-    <a-card :bordered="false">
-      <template #title>快捷入口</template>
-      <template #extra>
-        <span class="dash__hint">当前角色可访问的页面</span>
-      </template>
-      <a-space wrap>
-        <a-button v-for="m in shortcuts" :key="m.key" @click="router.push(m.path)">
-          <template #icon>
-            <component :is="m.icon" />
-          </template>
-          {{ m.title }}
-        </a-button>
-      </a-space>
-    </a-card>
-
-    <!--
-      数据看板（M7-01/02）。
-      ⚠️ 这里原来是一张「开发进度」卡，写着「M0 后端已完成，界面建设中」——
-      而项目早已是 120/121 个接口可用。**首页上说一件不真的事**比空着更糟，
-      所以换成了真实的统计数据（两个接口都是现成的，见 §7.11 与 §11.6）。
-    -->
-    <a-card :bordered="false">
-      <template #title>数据看板</template>
-      <template #extra>
-        <a-space>
-          <!--
-            平台运营必须先选学校：任务、统计、审核数都是**租户内**的数据，
-            而服务端对平台的租户过滤是关掉的 —— 不选就会把各学校的任务混在一起。
-          -->
-          <GiTenantPicker
-            v-if="isPlatform"
-            v-model="actingStore.tenantId"
-            width="200px"
-            placeholder="选择学校（平台运营）"
-          />
-          <a-select
-            v-model="boardTaskId"
-            placeholder="选择一个任务"
-            allow-search
-            style="width: 260px"
-            :loading="taskLoading"
-            :disabled="needPickTenant"
-            :options="taskOptions"
-            @change="loadBoard"
-          />
-          <a-button :loading="boardLoading" :disabled="needPickTenant" @click="loadBoard">刷新</a-button>
-        </a-space>
-      </template>
-
-      <a-empty v-if="needPickTenant" description="平台运营看的是某一所学校的进度：请先选择学校" />
-
-      <a-empty v-else-if="!boardTaskId" description="选一个任务，看它的填报进度与审核情况" />
-
-      <a-spin v-else :loading="boardLoading" style="display: block">
-        <!-- 进度四格：应填 / 已提交 / 已通过 / 待审 -->
-        <a-row :gutter="12">
-          <a-col v-for="c in boardCards" :key="c.label" :xs="12" :md="6">
-            <div class="dash__board-card">
-              <div class="dash__board-label">{{ c.label }}</div>
-              <div class="dash__board-num" :class="c.tone">{{ c.value }}</div>
-              <div class="dash__board-foot">{{ c.foot }}</div>
-            </div>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16" class="dash__board-tables">
-          <a-col :xs="24" :lg="12">
-            <div class="dash__board-title">分班进度</div>
-            <!--
-              ⚠️ 提交率与通过率**分两列**，不合并成一列"完成率"：
-              已提交 ≠ 已通过，合并会让「快完成了」与「快通过了」混为一谈。
-            -->
-            <a-table
-              :data="stat?.byOrg ?? []"
-              :pagination="false"
-              size="small"
-              :bordered="{ cell: true }"
-              :scroll="{ y: 240 }"
-            >
-              <template #columns>
-                <a-table-column title="班级" data-index="orgName" ellipsis tooltip />
-                <a-table-column title="应填" data-index="rosterTotal" :width="70" align="center" />
-                <a-table-column title="已提交" data-index="submittedCount" :width="80" align="center" />
-                <a-table-column title="已通过" data-index="approvedCount" :width="80" align="center" />
-                <a-table-column title="提交率" data-index="submitRate" :width="86" align="center" />
-              </template>
-            </a-table>
-          </a-col>
-          <a-col :xs="24" :lg="12">
-            <div class="dash__board-title">
-              审核情况
-              <span class="dash__board-note">
-                时效口径：班级 {{ audit?.classTimeoutHours ?? '—' }} 小时 /
-                后台 {{ audit?.adminTimeoutHours ?? '—' }} 小时
-              </span>
-            </div>
-            <a-table
-              v-if="canViewAllProgress"
-              :data="auditRows"
-              :pagination="false"
-              size="small"
-              :bordered="{ cell: true }"
-            >
-              <template #columns>
-                <a-table-column title="指标" data-index="label" :width="150" />
-                <a-table-column title="值" data-index="value" />
-                <a-table-column title="说明" data-index="foot" ellipsis tooltip />
-              </template>
-            </a-table>
-            <!--
-              班主任（只有 progress:viewOwn）在这里看到的是**空表**，而空表不解释任何事。
-              如实说明"这里为什么不给你看"，比留一张空表更清楚。
-            -->
-            <a-empty v-else description="审核统计按全租户口径，需要「全租户进度」权限" />
-          </a-col>
-        </a-row>
-
-        <template v-if="(audit?.byReason ?? []).length">
-          <div class="dash__board-title">驳回原因分布（前几名）</div>
-          <a-space wrap>
-            <a-tag v-for="r in audit?.byReason ?? []" :key="r.reasonCode" color="orange">
-              {{ r.reasonText }} × {{ r.count }}
-            </a-tag>
-          </a-space>
-        </template>
-      </a-spin>
-    </a-card>
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import type { OrgTreeVO } from '@/apis/xt/org'
-import { IconFolder, IconIdcard, IconSafe, IconStamp } from '@arco-design/web-vue/es/icon'
+import { NAvatar, NButton, NCard, NDataTable, NEmpty, NGrid, NGridItem, NSelect, NSpin, NTag } from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import * as auditApi from '@/apis/xt/audit'
 import * as orgApi from '@/apis/xt/org'
 import * as taskApi from '@/apis/xt/task'
 import * as tenantApi from '@/apis/xt/tenant'
-import { ROLE_NAMES, XT_MENUS } from '@/config/xt-routes'
-import { useActingTenantStore, useUserStore } from '@/stores'
+import { roleLabel, XT_MENUS } from '@/config/xt-routes'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useActingTenantStore } from '@/stores/acting-tenant'
+import { useUserStore } from '@/stores/user'
+import { dash } from '@/utils/format'
 
 /**
  * 工作台。
  *
- * 取舍：**只显示真实能查到的数字**。
- * 原型里的「异常待处理」这类统计需要 M1/M2 的任务与校验数据，
- * 现在没有对应接口，所以不做假数据充数 —— 空着比编数字诚实。
+ * 三条取舍：
+ *  1. **只显示真实能查到的数字**。没有对应接口的统计不做假数据 —— 空着比编数字诚实。
+ *  2. **按权限决定发不发请求**。`/orgs/tree` 要 `org:view`、`/audit/statistics` 要
+ *     `progress:viewAll`，班主任两个都没有；而 403 是 HTTP 状态码，`http.ts` 会先弹一个
+ *     「无权限访问(403)」，`try/catch` 拦不住那个提示 —— 唯一正确的做法是**不去调它**，
+ *     并把那一格如实显示成「—」。
+ *  3. **平台没选学校时不发租户内数据的请求**（选学校的入口在顶栏）：不选就请求，
+ *     拿到的是各学校混在一起的数据，而界面上看不出这件事。
  */
 defineOptions({ name: 'Dashboard' })
 
 const router = useRouter()
-const userStore = useUserStore()
+const user = useUserStore()
+const acting = useActingTenantStore()
 
+const loading = ref(true)
 const orgCount = ref<number | null>(null)
 const tenantCount = ref<number | null>(null)
-const loading = ref(true)
 
-const avatarText = computed(() => (userStore.name || '—').slice(0, 1))
-const roleLabel = computed(() =>
-  userStore.roles.map((c) => ROLE_NAMES[c] ?? c).join(' / ')
-)
-// 注意是 menuKeys 而不是 menus —— 写错不会报错，
-// 只会让这个判断恒为 false（之前就是这样：平台管理员也看到"仅平台运营可见"）
-const isPlatform = computed(() => userStore.menuKeys?.includes('tenant') ?? false)
+const isPlatform = computed(() => user.isPlatform)
+const needPickTenant = computed(() => isPlatform.value && !acting.tenantId)
 
-/**
- * ⚠️ 两个"能不能调"的判断，缺一个就会在页面上弹 403。
- *
- * 工作台是所有角色共用的落地页，但它里面有两个接口是**按角色开放的**：
- *   · `GET /orgs/tree` 要 `org:view` —— 班主任/副班主任/审核员都没有；
- *   · `GET /audit/statistics` 要 `progress:viewAll` —— 班主任只有 `progress:viewOwn`。
- *
- * 以前这两个是无条件调的，于是**班主任一进工作台就弹「拒绝访问(403)」**（实测）。
- * 而 403 来自 HTTP 状态码，`try/catch` 拦不住它的 toast —— 前端唯一正确的做法是
- * **不去调它**，并把那一格如实显示成"—"（本页的取舍就是"只显示真实能查到的数字"）。
- */
-const canViewOrg = computed(() => userStore.permissions.includes('org:view'))
-/**
- * ⚠️ 权限码是 **`progress:viewAll`**（驼峰），不是 `progress:view:all` ——
- * 权威来源是后端 `security/PermissionDef`（`PROGRESS_VIEW_ALL("progress:viewAll", ...)`）。
- * 我第一版就写成了带冒号的，结果这个判断**恒为 false**：「审核情况」对**所有人**都不显示，
- * 而 typecheck / lint / 后端全都不报错（字符串对不上是纯运行期的事）。
- * 现在 `scripts/check-wiring.py` 会做这层对齐检查。
- */
-const canViewAllProgress = computed(() => userStore.permissions.includes('progress:viewAll'))
+/** 权限码的权威来源是后端 `security/PermissionDef`，写错只会"恒为 false"而不报错 */
+const canViewOrg = computed(() => user.has('org:view'))
+const canViewAllProgress = computed(() => user.has('progress:viewAll'))
 
-/**
- * 平台运营的「当前学校」（请求头 `X-Tenant-Id`，见 `@/apis/xt/acting-tenant`）。
- *
- * ⚠️ 工作台也必须有这个选择：这里的**任务、统计、审核数**全是租户内的数据，
- * 而服务端对平台的租户过滤是关掉的 —— 不给选择就会把各学校的任务混在一个下拉里，
- * 选中之后看到的进度是"另一所学校的"，而界面上没有任何地方会提示这件事。
- *
- * 选择与「组织架构 / 账号管理」共用同一个 store（见 `useActingTenantStore`）。
- */
-const actingStore = useActingTenantStore()
-const needPickTenant = computed(() => isPlatform.value && !actingStore.tenantId)
+const avatarText = computed(() => (user.name || '—').slice(0, 1))
+const roles = computed(() => roleLabel(user.roles))
 
-/**
- * 「组织节点」这一格能不能显示真实数字。
- *
- * 平台运营要先选定学校（选定后就是那所学校的节点数）；没选时显示"—"，
- * 而不是让 `/orgs/tree` 返回一个"0 个"（那会让人以为全平台没有组织）。
- */
+/** 当前角色能进的页面（菜单键由后端下发，这里只做过滤） */
+const shortcuts = computed(() => XT_MENUS.filter((m) => user.menus.includes(m.key)))
+
+/** 「组织节点」这一格能不能显示真实数字：要有权限，且平台要先选定学校 */
 const orgCardShowable = computed(() => canViewOrg.value && !needPickTenant.value)
 
-/** 已实现且当前角色可访问的页面 */
-const shortcuts = computed(() =>
-  XT_MENUS.filter((m) => m.ready && userStore.menuKeys.includes(m.key))
-)
-
 const stats = computed(() => [
   {
     label: '组织节点',
-    icon: IconFolder,
+    icon: 'org-group',
     value: orgCardShowable.value && !loading.value ? (orgCount.value ?? '—') : '—',
     unit: orgCardShowable.value ? '个' : '',
     foot: isPlatform.value
       ? (needPickTenant.value ? '选定学校后展示该校的组织' : '所选学校的节点数')
-      : (canViewOrg.value ? '学校 / 院系 / 班级' : '需要「组织查看」权限'),
-    tone: ''
+      : (canViewOrg.value ? '学校 / 院系 / 班级' : '需要「组织查看」权限')
   },
   {
     label: '租户',
-    icon: IconStamp,
+    icon: 'tenant',
     value: isPlatform.value ? (loading.value ? '—' : (tenantCount.value ?? '—')) : '—',
     unit: isPlatform.value ? '个' : '',
-    foot: isPlatform.value ? '平台可见' : '仅平台运营可见',
-    tone: 'is-success'
+    foot: isPlatform.value ? '平台可见' : '仅平台运营可见'
   },
   {
     label: '我的角色',
-    icon: IconSafe,
-    value: userStore.roles.length,
+    icon: 'role',
+    value: user.roles.length,
     unit: '个',
-    foot: roleLabel.value || '—',
-    tone: ''
+    foot: roles.value
   },
   {
     label: '可用权限',
-    icon: IconIdcard,
-    value: userStore.permissions.length,
+    icon: 'check',
+    value: user.permissions.length,
     unit: '项',
-    foot: '按角色由服务端下发',
-    tone: ''
+    foot: '按角色由服务端下发'
   }
 ])
 
-// ── 数据看板（M7-01/02）─────────────────────────
+// ── 数据看板 ────────────────────────────────────────
 
-const boardTaskId = ref<number | undefined>(undefined)
+const boardTaskId = ref<number | null>(null)
 const taskOptions = ref<Array<{ label: string, value: number }>>([])
 const taskLoading = ref(false)
 const boardLoading = ref(false)
 const stat = ref<taskApi.TaskStatisticsVO | null>(null)
 const audit = ref<auditApi.AuditStatisticsVO | null>(null)
 
-/** 进度四格。比率直接用服务端给的字符串（`—` 也是它给的，不要在前端算）。 */
+/** 进度四格。比率直接用服务端给的字符串（`—` 也是它给的，前端不要自己算） */
 const boardCards = computed(() => {
   const s = stat.value?.stat
   return [
-    {
-      label: '应填',
-      value: s?.rosterTotal ?? '—',
-      foot: '名册人数',
-      tone: ''
-    },
-    {
-      label: '已提交',
-      value: s?.submittedCount ?? '—',
-      foot: `提交率 ${s?.submitRate ?? '—'}`,
-      tone: ''
-    },
-    {
-      label: '已通过',
-      value: s?.approvedCount ?? '—',
-      foot: `通过率 ${s?.passRate ?? '—'}`,
-      tone: 'is-success'
-    },
+    { label: '应填', value: s?.rosterTotal ?? '—', foot: '名册人数' },
+    { label: '已提交', value: s?.submittedCount ?? '—', foot: `提交率 ${s?.submitRate ?? '—'}` },
+    { label: '已通过', value: s?.approvedCount ?? '—', foot: `通过率 ${s?.passRate ?? '—'}` },
     {
       label: '待审',
       value: canViewAllProgress.value ? (audit.value?.pendingCount ?? '—') : '—',
       foot: canViewAllProgress.value
         ? (audit.value?.timeoutCount ? `其中超时 ${audit.value.timeoutCount} 件` : '没有超时的')
-        : '需要「全租户进度」权限',
-      tone: audit.value?.timeoutCount ? 'is-warn' : ''
+        : '需要「全租户进度」权限'
     }
   ]
 })
 
+const orgColumns: DataTableColumns<taskApi.TaskStatOrgRow> = [
+  { title: '班级', key: 'orgName', ellipsis: { tooltip: true } },
+  { title: '应填', key: 'rosterTotal', width: 70, align: 'center' },
+  { title: '已提交', key: 'submittedCount', width: 80, align: 'center' },
+  { title: '已通过', key: 'approvedCount', width: 80, align: 'center' },
+  { title: '提交率', key: 'submitRate', width: 86, align: 'center' }
+]
+
+/**
+ * 把"小时"按量级换单位显示。
+ *
+ * ⚠️ 三种值必须分开，别用同一个 `0` 表达：
+ *   · `null` = **还没有样本**（不是"审核很快"）；
+ *   · `0`    = 有样本，但不足 1 分钟；
+ *   · 其它   = 分钟 / 小时。
+ * 直接显示「0 小时」会让人读成"零小时通过"，而那是另一个结论。
+ */
+function fmtHours(h: number | null | undefined): string {
+  if (h === null || h === undefined) {
+    return '—'
+  }
+  if (h <= 0) {
+    return '不到 1 分钟'
+  }
+  if (h < 1) {
+    return `${Math.max(1, Math.round(h * 60))} 分钟`
+  }
+  return h >= 10 ? `${Math.round(h)} 小时` : `${h} 小时`
+}
+
 const auditRows = computed(() => {
   const a = audit.value
-  if (!a) return []
+  if (!a) {
+    return []
+  }
   return [
-    { label: '待审', value: a.pendingCount, foot: '还在队列里' },
-    { label: '已通过', value: a.approvedCount, foot: '' },
-    { label: '已驳回', value: a.rejectedCount, foot: '' },
+    { label: '待审', value: dash(a.pendingCount), foot: '还在队列里' },
+    { label: '已通过', value: dash(a.approvedCount), foot: '' },
+    { label: '已驳回', value: dash(a.rejectedCount), foot: '' },
     {
       label: '平均审核时长',
       value: fmtHours(a.avgAuditHours),
@@ -335,66 +157,50 @@ const auditRows = computed(() => {
         ? '还没有已审的记录'
         : '从提交到审完的平均间隔'
     },
-    { label: '超时未审', value: a.timeoutCount, foot: '超过时效口径的件数' }
+    { label: '超时未审', value: dash(a.timeoutCount), foot: '超过时效口径的件数' }
   ]
 })
 
-/**
- * 把"小时"这个数字**按量级换单位**显示。
- *
- * ⚠️ 三种值必须分开，别用同一个 `0` 表达：
- *  - `null` = **还没有样本**（不是"审核很快"）；
- *  - `0` = 有样本，但不足 1 分钟（E2E 的演示数据就是这样：提交与审核差几秒）；
- *  - 其它按分钟/小时显示。
- *
- * 直接显示 `0.0 小时` 会让人读成"零小时"，而那是另一个结论。
- */
-function fmtHours(h: number | null | undefined): string {
-  if (h === null || h === undefined) return '—'
-  if (h <= 0) return '不到 1 分钟'
-  if (h < 1) return `${Math.max(1, Math.round(h * 60))} 分钟`
-  return h >= 10 ? `${Math.round(h)} 小时` : `${h} 小时`
+function countNodes(nodes: OrgTreeVO[]): number {
+  return nodes.reduce((sum, n) => sum + 1 + countNodes(n.children ?? []), 0)
 }
 
-/** 组织节点数（平台运营按所选学校；其它角色就是自己租户的） */
-async function loadOrgCount() {
-  // 组织树要 `org:view`（班主任/副班主任/审核员都没有）；平台没选学校时也不该问
+async function loadOrgCount(): Promise<void> {
   if (!orgCardShowable.value) {
     orgCount.value = null
     return
   }
   try {
-    const res = await orgApi.getOrgTree({ tenantId: actingStore.tenantId })
-    orgCount.value = countNodes(res.data ?? [])
+    const tree = await orgApi.getOrgTree({ tenantId: acting.tenantId })
+    orgCount.value = countNodes(tree ?? [])
   } catch {
+    // 提示已由 http 层弹过，这里只把数字留空
     orgCount.value = null
   }
 }
 
-async function loadTasks() {
-  // 平台没选学校时不发请求：拿到的是空列表，界面上会显示成"这所学校没有任务"
+async function loadTasks(): Promise<void> {
   if (needPickTenant.value) {
     taskOptions.value = []
-    boardTaskId.value = undefined
+    boardTaskId.value = null
     stat.value = null
     audit.value = null
     return
   }
   taskLoading.value = true
   try {
-    const res = await taskApi.getTaskList({ pageNum: 1, pageSize: 100 }, actingStore.tenantId)
-    const list = res.data?.list ?? []
+    const page = await taskApi.getTaskList({ pageNum: 1, pageSize: 100 }, acting.tenantId)
+    const list = page.list ?? []
     taskOptions.value = list.map((x) => ({
       label: `${x.taskName}（${taskApi.TASK_STATUS_TEXT[x.status] ?? ''}）`,
       value: x.id
     }))
-    // 默认选第一个还在收集中的任务 —— 那才是看板要回答的问题
+    // 默认选第一个「收集中」的任务 —— 那才是看板要回答的问题
     const collecting = list.find((x) => x.status === taskApi.TASK_STATUS_COLLECTING)
+    boardTaskId.value = collecting?.id ?? null
     if (collecting) {
-      boardTaskId.value = collecting.id
-      loadBoard()
+      await loadBoard()
     } else {
-      boardTaskId.value = undefined
       stat.value = null
       audit.value = null
     }
@@ -403,186 +209,367 @@ async function loadTasks() {
   }
 }
 
-async function loadBoard() {
-  if (!boardTaskId.value) return
+async function loadBoard(): Promise<void> {
+  if (!boardTaskId.value) {
+    return
+  }
   boardLoading.value = true
   try {
-    // ⚠️ 审核统计要 `progress:viewAll`，班主任没有 —— 不能"调了再 catch"：
-    //    403 是 HTTP 状态码，`http.ts` 的传输层分支会**先弹一个「拒绝访问(403)」**，
-    //    catch 只能拦住异常，拦不住那个提示。所以按权限**决定发不发这个请求**。
     const [s, a] = await Promise.allSettled([
-      taskApi.getTaskStatistics(boardTaskId.value, actingStore.tenantId),
+      taskApi.getTaskStatistics(boardTaskId.value, acting.tenantId),
+      // ⚠️ 没有 progress:viewAll 就不发这个请求（见文件头第 2 条）
       canViewAllProgress.value
-        ? auditApi.getAuditStatistics({ taskId: boardTaskId.value }, actingStore.tenantId)
+        ? auditApi.getAuditStatistics({ taskId: boardTaskId.value }, acting.tenantId)
         : Promise.resolve(null)
     ])
-    stat.value = s.status === 'fulfilled' ? s.value.data : null
-    audit.value = a.status === 'fulfilled' ? (a.value?.data ?? null) : null
+    stat.value = s.status === 'fulfilled' ? s.value : null
+    audit.value = a.status === 'fulfilled' ? a.value : null
   } finally {
     boardLoading.value = false
   }
 }
 
-function countNodes(nodes: OrgTreeVO[]): number {
-  return nodes.reduce((sum, n) => sum + 1 + countNodes(n.children ?? []), 0)
-}
-
-// 换学校 = 换一整套数字（组织节点、任务下拉、看板）。不清空的话，
-// 上一所学校的任务还留在下拉里，选中它看到的是**另一所学校**的进度
-watch(() => actingStore.tenantId, () => {
-  loadOrgCount()
-  loadTasks()
+// 换学校 = 换一整套数字（组织节点、任务下拉、看板）。
+// 不清空的话，上一所学校的任务还留在下拉里，而选中它看到的是**另一所学校**的进度
+watch(() => acting.tenantId, () => {
+  void loadOrgCount()
+  void loadTasks()
 })
 
 onMounted(async () => {
-  await loadOrgCount()
   if (isPlatform.value) {
     try {
-      const res = await tenantApi.getTenantList({ pageNum: 1, pageSize: 1 })
-      tenantCount.value = res.data?.total ?? null
+      const page = await tenantApi.getTenantList({ pageNum: 1, pageSize: 1 })
+      tenantCount.value = page.total ?? null
     } catch {
       tenantCount.value = null
     }
   }
+  await loadOrgCount()
   loading.value = false
-  // 看板要任务列表；没有 task:view 权限的角色会拿到空列表，界面显示空态即可
-  loadTasks()
+  // 没有 task:view 的角色会拿到空列表，界面显示空态即可
+  await loadTasks()
 })
 </script>
 
-<style lang="scss" scoped>
-.dash {
-  &__welcome {
-    margin-bottom: 14px;
-  }
+<template>
+  <div class="page-plain">
+    <!-- 欢迎条 -->
+    <NCard :bordered="false" size="small">
+      <div class="dash__hello">
+        <NAvatar round :size="44" class="dash__avatar">{{ avatarText }}</NAvatar>
+        <div class="dash__hello-text">
+          <h3 class="dash__name">{{ user.name || '—' }}，欢迎回来</h3>
+          <p class="dash__meta">{{ user.tenantName || '平台运营' }} · {{ roles }}</p>
+        </div>
+        <NTag type="info" :bordered="false" size="small">一期范围：学校收集 + 自主认定</NTag>
+      </div>
+    </NCard>
 
-  &__hello {
-    display: flex;
-    gap: 14px;
-    align-items: center;
-  }
+    <!-- 统计 -->
+    <!--
+      ⚠️ `cols` 的键必须是 **断点名**（defaultBreakpoints = xs/s/m/l/xl/xxl），
+         **不是像素值**。之前写的 `cols="1 640:2 1100:4"` 里 "640" / "1100" 查不到，
+         seemly 的 parseResponsivePropValue 会一路回退到 `classObj['']` = 1
+         → 四张卡永远挤成一列（工作台"错乱"的真正原因，且不报错）。
+         断点：xs<640 / s≥640 / m≥1024 / l≥1280。
+    -->
+    <NGrid cols="1 s:2 m:4" :x-gap="16" :y-gap="16" responsive="screen">
+      <NGridItem v-for="s in stats" :key="s.label">
+        <NCard :bordered="false" size="small" class="dash__stat">
+          <div class="dash__stat-label">
+            <span class="dash__stat-icon"><AppIcon :name="s.icon" :size="15" /></span>
+            <span>{{ s.label }}</span>
+          </div>
+          <div class="dash__stat-num">
+            {{ s.value }}<small v-if="s.unit">{{ s.unit }}</small>
+          </div>
+          <div class="dash__stat-foot">{{ s.foot }}</div>
+        </NCard>
+      </NGridItem>
+    </NGrid>
 
-  &__avatar {
-    flex: none;
-    font-size: 18px;
-    background: rgb(var(--primary-6));
-  }
+    <!-- 快捷入口 -->
+    <NCard :bordered="false" size="small">
+      <template #header>
+        快捷入口
+      </template>
+      <template #header-extra>
+        <span class="dash__hint">当前角色可访问的页面</span>
+      </template>
+      <div class="dash__shortcuts">
+        <NButton
+          v-for="m in shortcuts"
+          :key="m.key"
+          class="dash__shortcut"
+          size="small"
+          @click="router.push(m.path)"
+        >
+          <template #icon>
+            <AppIcon :name="m.icon" :size="16" />
+          </template>
+          {{ m.title }}
+        </NButton>
+        <span v-if="!shortcuts.length" class="dash__hint">
+          当前账号还没有可见的业务菜单（可点右上角头像 → 刷新我的权限）
+        </span>
+      </div>
+    </NCard>
 
-  &__name {
-    margin: 0;
-    font-size: 17px;
-    font-weight: 600;
-  }
+    <!-- 数据看板 -->
+    <NCard :bordered="false" size="small">
+      <template #header>
+        数据看板
+      </template>
+      <template #header-extra>
+        <div class="dash__board-tools">
+          <NSelect
+            v-model:value="boardTaskId"
+            class="dash__task-select"
+            size="small"
+            filterable
+            placeholder="选择一个任务"
+            :options="taskOptions"
+            :loading="taskLoading"
+            :disabled="needPickTenant"
+            @update:value="loadBoard"
+          />
+          <NButton size="small" :loading="boardLoading" :disabled="needPickTenant" @click="loadBoard">
+            刷新
+          </NButton>
+        </div>
+      </template>
 
-  &__meta {
-    margin: 5px 0 0;
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+      <NEmpty
+        v-if="needPickTenant"
+        description="平台运营看的是某一所学校的进度：请先在右上角选择学校"
+      />
+      <NEmpty
+        v-else-if="!boardTaskId"
+        description="选一个任务，看它的填报进度与审核情况"
+      />
 
-  &__scope {
-    margin-left: auto;
-  }
+      <NSpin v-else :show="boardLoading">
+        <!-- 进度四格 -->
+        <NGrid cols="1 s:2 m:4" :x-gap="16" :y-gap="16" responsive="screen">
+          <NGridItem v-for="c in boardCards" :key="c.label">
+            <div class="dash__board-card">
+              <div class="dash__board-label">{{ c.label }}</div>
+              <div class="dash__board-num">{{ c.value }}</div>
+              <div class="dash__board-foot">{{ c.foot }}</div>
+            </div>
+          </NGridItem>
+        </NGrid>
 
-  &__stats {
-    margin-bottom: 14px;
-  }
+        <div class="dash__board-tables">
+          <div class="dash__board-block">
+            <div class="section-title">
+              分班进度
+              <!-- 提交率与通过率分两列：已提交 ≠ 已通过，合并会让"快完成了"与"快通过了"混为一谈 -->
+            </div>
+            <NDataTable
+              :columns="orgColumns"
+              :data="stat?.byOrg ?? []"
+              :pagination="false"
+              :bordered="false"
+              size="small"
+              :max-height="260"
+            />
+          </div>
 
-  &__stat {
-    height: 100%;
-  }
+          <div class="dash__board-block">
+            <div class="section-title">
+              审核情况
+              <span class="section-title__note">
+                时效口径：班级 {{ audit?.classTimeoutHours ?? '—' }} 小时 /
+                后台 {{ audit?.adminTimeoutHours ?? '—' }} 小时
+              </span>
+            </div>
+            <!--
+              班主任（只有 progress:viewOwn）在这里看到的是空表，而空表不解释任何事。
+              如实说明"为什么不给你看"比留一张空表更清楚。
+            -->
+            <NDataTable
+              v-if="canViewAllProgress"
+              :columns="[
+                { title: '指标', key: 'label', width: 140 },
+                { title: '值', key: 'value', width: 120 },
+                { title: '说明', key: 'foot', ellipsis: { tooltip: true } },
+              ]"
+              :data="auditRows"
+              :pagination="false"
+              :bordered="false"
+              size="small"
+            />
+            <NEmpty v-else description="审核统计按全租户口径，需要「全租户进度」权限" />
+          </div>
+        </div>
 
-  &__stat-label {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+        <template v-if="(audit?.byReason ?? []).length">
+          <div class="section-title">
+            驳回原因分布（前几名）
+          </div>
+          <div class="dash__by-reason">
+            <NTag v-for="r in audit?.byReason ?? []" :key="r.reasonCode" type="warning" size="small">
+              {{ r.reasonText }} × {{ r.count }}
+            </NTag>
+          </div>
+        </template>
+      </NSpin>
+    </NCard>
+  </div>
+</template>
 
-  &__stat-num {
-    margin-top: 8px;
-    font-size: 27px;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--color-text-1);
+<style scoped>
+.dash__hello {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
 
-    small {
-      margin-left: 3px;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--color-text-3);
-    }
+.dash__avatar {
+  font-size: 18px;
+  background: #0052d9;
+}
 
-    &.is-success {
-      color: rgb(var(--success-6));
-    }
-  }
+.dash__hello-text {
+  flex: 1;
+  min-width: 0;
+}
 
-  &__stat-foot {
-    margin-top: 7px;
-    font-size: 11px;
-    color: var(--color-text-3);
-  }
+.dash__name {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+}
 
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.dash__meta {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: #98a2b3;
+}
 
-  &__board-card {
-    padding: 12px 14px;
-    margin-bottom: 12px;
-    background: var(--color-fill-1);
-    border-radius: 4px;
-  }
+.dash__stat {
+  /* 四张卡等高：格子被 grid 拉伸，卡片跟着撑满，否则数字位数不同就会参差不齐 */
+  height: 100%;
+}
 
-  &__board-label {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.dash__stat-label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  color: #667085;
+}
 
-  &__board-num {
-    margin-top: 6px;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--color-text-1);
+/* 图标给一块浅蓝底，卡片才有"标识—内容"的层次，而不是一行灰字 */
+.dash__stat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  color: #0052d9;
+  background: #eef4ff;
+  border-radius: 7px;
+}
 
-    &.is-success {
-      color: rgb(var(--success-6));
-    }
+.dash__stat-num {
+  margin-top: 10px;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #1f2229;
+}
 
-    &.is-warn {
-      color: rgb(var(--warning-6));
-    }
-  }
+.dash__stat-num small {
+  margin-left: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #98a2b3;
+}
 
-  &__board-foot {
-    margin-top: 6px;
-    font-size: 11px;
-    color: var(--color-text-3);
-  }
+.dash__stat-foot {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #98a2b3;
+}
 
-  &__board-tables {
-    margin-top: 6px;
-  }
+.dash__hint {
+  font-size: 12px;
+  color: #98a2b3;
+}
 
-  &__board-title {
-    margin: 12px 0 8px;
-    font-size: 13px;
-    font-weight: 600;
-  }
+/* 快捷入口：自适应网格的"入口砖"，比一排白底小按钮更像卡片区的成员 */
+.dash__shortcuts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 10px;
+}
 
-  &__board-note {
-    margin-left: 8px;
-    font-size: 11px;
-    font-weight: 400;
-    color: var(--color-text-3);
-  }
+.dash__shortcut {
+  height: 40px;
+  font-weight: 500;
+  justify-content: flex-start;
+  padding: 0 12px;
+}
 
-  &__note:not(:last-child) {
-    margin-bottom: 10px;
-  }
+.dash__board-tools {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.dash__task-select {
+  width: 260px;
+}
+
+/**
+ * 看板四格：卡片**内部**的小格子，所以用浅灰底 + 描边，而不是第二层白卡片
+ * （白色卡片套白色卡片会糊成一片，见 styles/index.scss 里"卡里套卡"那段）。
+ */
+.dash__board-card {
+  height: 100%;
+  padding: 12px 14px;
+  background: #f7f8fa;
+  border: 1px solid #eef1f5;
+  border-radius: 8px;
+}
+
+.dash__board-label {
+  font-size: 13px;
+  color: #667085;
+}
+
+.dash__board-num {
+  margin-top: 6px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2229;
+}
+
+.dash__board-foot {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #98a2b3;
+}
+
+/* 两张表并排；窄屏自动落成上下两行（原来用 flex + min-width 320，撞到换行时高度会突然跳） */
+.dash__board-tables {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.dash__board-block {
+  min-width: 0;
+}
+
+.dash__by-reason {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
 }
 </style>
diff --git a/frontend-pc/src/views/dict/index.vue b/frontend-pc/src/views/dict/index.vue
index 34d8c1f..6b6e490 100644
--- a/frontend-pc/src/views/dict/index.vue
+++ b/frontend-pc/src/views/dict/index.vue
@@ -1,445 +1,628 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>字典管理</template>
-      <template #extra>
-        <span class="dict__hint">
-          内置项照抄官方表格，**不可改名**（改名会让导出汇总表与官方模板对不上）；
-          要加值请用「新增项」追加
-        </span>
-      </template>
-
-      <div class="dict__layout">
-        <!-- 左：字典列表 -->
-        <div class="dict__side">
-          <a-spin :loading="loadingDicts" class="dict__spin">
-            <div v-for="d in dicts" :key="d.dictCode" class="dict__row"
-              :class="{ 'dict__row--on': current?.dictCode === d.dictCode }"
-              @click="pick(d)">
-              <span class="dict__name">{{ d.dictName }}</span>
-              <a-tag v-if="d.builtin" size="small" color="arcoblue">内置</a-tag>
-              <span class="dict__count">{{ d.itemCount }}</span>
-            </div>
-          </a-spin>
-        </div>
-
-        <!-- 右：字典项 -->
-        <div class="dict__main">
-          <div v-if="!current" class="dict__empty">从左边选一个字典</div>
-          <template v-else>
-            <div class="dict__bar">
-              <span class="dict__title">
-                {{ current.dictName }}
-                <span class="dict__code">{{ current.dictCode }}</span>
-              </span>
-              <a-space>
-                <a-button size="small" @click="reload">
-                  <template #icon><IconRefresh /></template>
-                  刷新
-                </a-button>
-                <a-button type="primary" size="small" @click="openCreate">
-                  新增项
-                </a-button>
-              </a-space>
-            </div>
-
-            <!-- ⚠️ 三种来源的说明必须摆在界面上：不说清的话，
-                 管理员会以为"内置项改不了"是权限不够 -->
-            <a-alert v-if="current.builtin" type="normal" class="dict__note">
-              <template #title>
-                <template v-if="current.dictCode === 'OCCUPATION'">
-                  这一项来自**国标职业库**（`sys_occupation_ref`），只读。
-                  一期这张表是空的 —— 需要客户提供或采购国标职业数据后导入。
-                </template>
-                <template v-else>
-                  这是内置字典：项名不可改、不可删，只能**停用**（可一键恢复默认）。
-                  要加值请用「新增项」—— 追加的项可以随时改名或删除。
-                </template>
-              </template>
-            </a-alert>
-
-            <a-table :data="items" :loading="loadingItems" row-key="itemCode" :pagination="false"
-              :scroll="{ x: 800 }">
-              <template #columns>
-                <a-table-column title="项码" :width="140">
-                  <template #cell="{ record }">
-                    <span :class="record.builtin ? 'dict__muted' : ''">{{ record.itemCode }}</span>
-                  </template>
-                </a-table-column>
-                <a-table-column title="项名" :width="260">
-                  <template #cell="{ record }">
-                    <span :class="record.status === 0 ? 'dict__off' : ''">{{ record.itemName }}</span>
-                    <a-tag v-if="record.builtin === true" size="small" class="dict__tag">内置</a-tag>
-                  </template>
-                </a-table-column>
-                <a-table-column v-if="hierarchical" title="上级项" :width="140">
-                  <template #cell="{ record }">
-                    <span class="dict__muted">{{ record.parentItemCode || '—' }}</span>
-                  </template>
-                </a-table-column>
-                <a-table-column title="排序" :width="80">
-                  <template #cell="{ record }">
-                    <span class="dict__muted">{{ record.sortNo ?? '—' }}</span>
-                  </template>
-                </a-table-column>
-                <a-table-column title="状态" :width="90">
-                  <template #cell="{ record }">
-                    <a-tag size="small" :color="record.status === 0 ? 'gray' : 'green'">
-                      {{ record.status === 0 ? '已停用' : '启用' }}
-                    </a-tag>
-                  </template>
-                </a-table-column>
-                <a-table-column title="操作" :width="200">
-                  <template #cell="{ record }">
-                    <!--
-                      内置项与自定义项的可用动作**不同**，这是刻意的：
-                        · 内置项（没有 id）→ 只能停用/恢复（走 toggle）
-                        · 自定义项 → 可改名、可删
-                      把两套按钮混在一起，用户一定会点到"改名内置项"然后收到 40001。
-                    -->
-                    <a-space v-if="record.builtin === true">
-                      <a-link v-if="current.dictCode === 'OCCUPATION'" disabled>只读</a-link>
-                      <a-link v-else @click="toggle(record)">
-                        {{ record.status === 0 ? '恢复默认' : '停用' }}
-                      </a-link>
-                    </a-space>
-                    <a-space v-else>
-                      <a-link @click="openEdit(record)">编辑</a-link>
-                      <a-link :status="record.status === 0 ? 'success' : 'warning'"
-                        @click="toggleCustom(record)">
-                        {{ record.status === 0 ? '启用' : '停用' }}
-                      </a-link>
-                      <a-popconfirm content="删除这一项？已经用过它的历史数据不会变，但以后选不到了"
-                        @ok="remove(record)">
-                        <a-link status="danger">删除</a-link>
-                      </a-popconfirm>
-                    </a-space>
-                  </template>
-                </a-table-column>
-              </template>
-            </a-table>
-          </template>
-        </div>
-      </div>
-    </a-card>
-
-    <!-- 新增 / 编辑 -->
-    <a-modal v-model:visible="modalVisible" :title="editing ? '编辑字典项' : '新增字典项'"
-      :ok-loading="saving" @ok="save" @cancel="modalVisible = false">
-      <a-form :model="form" layout="vertical">
-        <a-form-item label="项码" required>
-          <!-- 项码建后不可改是**结构性**的：编辑时直接禁用输入，
-               并且后端接口的请求体里也没有这个字段。
-               `editing !== null` 必须写全 —— 直接写 `editing` 会因为它可能是 null
-               而被 vue-tsc 拦下（:disabled 只要 boolean） -->
-          <a-input v-model="form.itemCode" :disabled="editing !== null"
-            placeholder="如 大学本科 / TECH_SCHOOL（建后不可改）" />
-          <template #extra>
-            项码是历史数据里真正存的值，**建后不可改** ——
-            改了它，过去填过的值会指向不存在的项，而查询不报错、只显示空白。
-          </template>
-        </a-form-item>
-        <a-form-item label="项名" required>
-          <a-input v-model="form.itemName" placeholder="界面上给用户看的文字" />
-        </a-form-item>
-        <a-form-item v-if="hierarchical" label="上级项码">
-          <a-input v-model="form.parentItemCode" placeholder="留空 = 顶层项" />
-        </a-form-item>
-        <a-form-item label="排序">
-          <a-input-number v-model="form.sortNo" :min="0" :step="10" placeholder="数字越小越靠前" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import type { DictItemVO, DictVO } from '@/apis/xt/dict'
-import { Message } from '@arco-design/web-vue'
-import { IconRefresh } from '@arco-design/web-vue/es/icon'
-import { ref } from 'vue'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NDataTable,
+  NEmpty,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputNumber,
+  NModal,
+  NPopconfirm,
+  NSpace,
+  NSpin,
+  NTag,
+  useMessage
+} from 'naive-ui'
+import { computed, h, ref } from 'vue'
 import {
   createDictItem,
   deleteDictItem,
-  DICT_ERROR_HINT,
   getDictItems,
   getDicts,
   toggleBuiltinItem,
   updateDictItem
 } from '@/apis/xt/dict'
+import AppIcon from '@/icons/AppIcon.vue'
 
 /**
- * 字典管理（《03-接口设计》§13.3）。
+ * 字典管理。
  *
  * ## 界面上的核心分叉：内置项 vs 自定义项
  *
  * 内置项**没有 id**（它们在代码里，没有数据库行），所以：
- *   · 操作只能按 `itemCode` 走 `toggle`（停用/恢复）；
+ *   · 操作只能按 `itemCode` 走 `toggle`（停用 / 恢复默认）；
  *   · 没有"编辑名称"与"删除"。
  * 自定义项才有 id，可以改名、停用、删除。
  *
  * 把两套按钮混在一起，用户一定会点到"改名内置项"然后收到 40001 ——
  * 而那时他会以为"是权限不够"，实际是设计如此。
+ *
+ * ## 为什么内置项不能改名（这条必须写在界面上）
+ *
+ * 因为内置选项**照抄官方表格**。有人把「四级/中级工」改成「中级」之后，
+ * 导出的汇总表就与官方模板对不上了 —— 而那时**没有任何地方会报错**。
+ *
+ * ⚠️ 业务错误不再自己弹 toast：`@/utils/http` 已经把服务端 msg 弹过一次，
+ *    这里再弹一次就是两条重复提示。
  */
 defineOptions({ name: 'DictManage' })
 
+const message = useMessage()
+
 const loadingDicts = ref(false)
 const loadingItems = ref(false)
 const saving = ref(false)
 const dicts = ref<DictVO[]>([])
 const current = ref<DictVO | null>(null)
 const items = ref<DictItemVO[]>([])
-// 层级支持来自**字典项接口**（不在字典列表的 VO 上），所以单独记一个
+/** 层级支持来自**字典项接口**（不在字典列表的 VO 上），所以单独记一个标记 */
 const hierarchical = ref(false)
+
 const modalVisible = ref(false)
 const editing = ref<DictItemVO | null>(null)
-
+/**
+ * 表单模型：可空字段一律声明成 `| null`。
+ *
+ * 因为 `n-input` / `n-input-number` 被清空时回传的是 `null`，
+ * 声明成可选（`?: string`）会在 v-model 上类型打架（运行期没事，vue-tsc 会红）。
+ */
 const form = ref<{
   itemCode: string
   itemName: string
-  parentItemCode?: string
-  sortNo?: number
-}>({ itemCode: '', itemName: '', parentItemCode: undefined, sortNo: undefined })
+  parentItemCode: string | null
+  sortNo: number | null
+}>({
+  itemCode: '',
+  itemName: '',
+  parentItemCode: null,
+  sortNo: null
+})
 
-/** 错误码 → 人话。界面直接显示后端 msg 也可以，但那句话对"我该做什么"帮助有限。 */
-function hint(e: unknown) {
-  const err = e as { code?: number, message?: string }
-  if (err?.code && DICT_ERROR_HINT[err.code]) {
-    return DICT_ERROR_HINT[err.code]
+/** 内置字典里「职业」来自国标职业库，整列只读（连停用都不给） */
+const readOnlyDict = computed(() => current.value?.dictCode === 'OCCUPATION')
+
+const columns = computed<DataTableColumns<DictItemVO>>(() => {
+  const cols: DataTableColumns<DictItemVO> = [
+    {
+      title: '项码',
+      key: 'itemCode',
+      width: 150,
+      render: (row) => h('span', { class: row.builtin ? 'dict__muted' : '' }, row.itemCode)
+    },
+    {
+      title: '项名',
+      key: 'itemName',
+      width: 260,
+      render: (row) => h('span', { class: row.status === 0 ? 'dict__off' : '' }, [
+        row.itemName,
+        row.builtin === true
+          ? h(NTag, { size: 'tiny', bordered: false, style: 'margin-left:6px' }, { default: () => '内置' })
+          : null
+      ])
+    }
+  ]
+
+  if (hierarchical.value) {
+    cols.push({
+      title: '上级项',
+      key: 'parentItemCode',
+      width: 150,
+      render: (row) => h('span', { class: 'dict__muted' }, row.parentItemCode || '—')
+    })
   }
-  return err?.message || '操作失败'
-}
 
-async function loadDicts() {
+  cols.push(
+    {
+      title: '排序',
+      key: 'sortNo',
+      width: 80,
+      render: (row) => h('span', { class: 'dict__muted' }, row.sortNo ?? '—')
+    },
+    {
+      title: '状态',
+      key: 'status',
+      width: 90,
+      render: (row) => h(
+        NTag,
+        { size: 'small', bordered: false, type: row.status === 0 ? 'default' : 'success' },
+        { default: () => (row.status === 0 ? '已停用' : '启用') }
+      )
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 200,
+      render: (row) => {
+        // 内置项：只能停用 / 恢复默认（没有 id，所以按 itemCode 走 toggle）
+        if (row.builtin === true) {
+          if (readOnlyDict.value) {
+            return h('span', { class: 'dict__muted' }, '只读（国标）')
+          }
+          return h(
+            NButton,
+            { text: true, type: row.status === 0 ? 'primary' : 'warning', size: 'tiny', onClick: () => toggle(row) },
+            { default: () => (row.status === 0 ? '恢复默认' : '停用') }
+          )
+        }
+        // 自定义项：可改名、可启停、可删
+        return h(NSpace, { size: 10, wrap: false }, {
+          default: () => [
+            h(NButton, { text: true, type: 'primary', size: 'tiny', onClick: () => openEdit(row) }, { default: () => '编辑' }),
+            h(
+              NButton,
+              { text: true, type: row.status === 0 ? 'primary' : 'warning', size: 'tiny', onClick: () => toggleCustom(row) },
+              { default: () => (row.status === 0 ? '启用' : '停用') }
+            ),
+            h(
+              NPopconfirm,
+              { onPositiveClick: () => remove(row) },
+              {
+                trigger: () => h(NButton, { text: true, type: 'error', size: 'tiny' }, { default: () => '删除' }),
+                default: () => '删除这一项？已经用过它的历史数据不会变，但以后选不到了'
+              }
+            )
+          ]
+        })
+      }
+    }
+  )
+
+  return cols
+})
+
+async function loadDicts(): Promise<void> {
   loadingDicts.value = true
   try {
-    const res = await getDicts()
-    dicts.value = res.data ?? []
+    dicts.value = await getDicts() ?? []
   } finally {
     loadingDicts.value = false
   }
 }
 
-async function loadItems() {
+async function loadItems(): Promise<void> {
   if (!current.value) {
     return
   }
   loadingItems.value = true
   try {
-    const res = await getDictItems(current.value.dictCode)
-    items.value = res.data?.list ?? []
-    hierarchical.value = res.data?.hierarchical === true
+    const vo = await getDictItems(current.value.dictCode)
+    items.value = vo.list ?? []
+    hierarchical.value = vo.hierarchical === true
   } finally {
     loadingItems.value = false
   }
 }
 
-function pick(d: DictVO) {
+function pick(d: DictVO): void {
   current.value = d
   // 先清掉上一次的层级标记：否则从一个有层级的字典切到没有的字典时，
   // 「上级项」这一列会继续显示（而它对新字典毫无意义）
   hierarchical.value = false
-  loadItems()
+  void loadItems()
 }
 
-function reload() {
-  loadDicts()
-  loadItems()
+function reload(): void {
+  void loadDicts()
+  void loadItems()
 }
 
-function openCreate() {
+function openCreate(): void {
   editing.value = null
-  form.value = { itemCode: '', itemName: '', parentItemCode: undefined, sortNo: undefined }
+  form.value = { itemCode: '', itemName: '', parentItemCode: null, sortNo: null }
   modalVisible.value = true
 }
 
-function openEdit(row: DictItemVO) {
+function openEdit(row: DictItemVO): void {
   editing.value = row
   form.value = {
     itemCode: row.itemCode,
     itemName: row.itemName,
-    parentItemCode: row.parentItemCode ?? undefined,
-    sortNo: row.sortNo
+    parentItemCode: row.parentItemCode ?? null,
+    sortNo: row.sortNo ?? null
   }
   modalVisible.value = true
 }
 
-async function save() {
+async function save(): Promise<void> {
   if (!current.value) {
     return
   }
   if (!form.value.itemCode.trim() || !form.value.itemName.trim()) {
-    Message.warning('项码与项名都必填')
+    message.warning('项码与项名都必填')
     return
   }
   saving.value = true
   try {
     if (editing.value?.id) {
-      // ⚠️ 只传项名与排序：项码不在接口契约里（结构性保证）
+      // ⚠️ 只传项名与排序：项码不在修改接口的契约里（结构性保证，不是界面藏起来）
       await updateDictItem(editing.value.id, {
         itemName: form.value.itemName.trim(),
-        sortNo: form.value.sortNo
+        sortNo: form.value.sortNo ?? undefined
       })
-      Message.success('已保存')
+      message.success('已保存')
     } else {
       await createDictItem(current.value.dictCode, {
         itemCode: form.value.itemCode.trim(),
         itemName: form.value.itemName.trim(),
         parentItemCode: form.value.parentItemCode?.trim() || undefined,
-        sortNo: form.value.sortNo
+        sortNo: form.value.sortNo ?? undefined
       })
-      Message.success('已新增')
+      message.success('已新增')
     }
     modalVisible.value = false
     reload()
-  } catch (e) {
-    Message.error(hint(e))
+  } catch {
+    // 服务端 msg 已由 http 层提示过（如 40036「下面还有子项」、40001「内置项不能改名」）
   } finally {
     saving.value = false
   }
 }
 
-/** 内置项：停用 / 恢复默认。 */
-async function toggle(row: DictItemVO) {
+/** 内置项：停用 / 恢复默认 */
+async function toggle(row: DictItemVO): Promise<void> {
   if (!current.value) {
     return
   }
   const enable = row.status === 0
   try {
     await toggleBuiltinItem(current.value.dictCode, row.itemCode, enable)
-    Message.success(enable ? '已恢复默认' : '已停用')
+    message.success(enable ? '已恢复默认' : '已停用')
     reload()
-  } catch (e) {
-    Message.error(hint(e))
+  } catch {
+    // 同上：提示已由 http 层给出
   }
 }
 
-/** 自定义项：改状态。 */
-async function toggleCustom(row: DictItemVO) {
+/** 自定义项：改状态 */
+async function toggleCustom(row: DictItemVO): Promise<void> {
   if (!row.id) {
     return
   }
   try {
     await updateDictItem(row.id, { status: row.status === 0 ? 1 : 0 })
-    Message.success(row.status === 0 ? '已启用' : '已停用')
+    message.success(row.status === 0 ? '已启用' : '已停用')
     reload()
-  } catch (e) {
-    Message.error(hint(e))
+  } catch {
+    // 同上
   }
 }
 
-async function remove(row: DictItemVO) {
+async function remove(row: DictItemVO): Promise<void> {
   if (!row.id) {
     return
   }
   try {
     await deleteDictItem(row.id)
-    Message.success('已删除')
+    message.success('已删除')
     reload()
-  } catch (e) {
-    Message.error(hint(e))
+  } catch {
+    // 同上
   }
 }
 
-loadDicts()
+void loadDicts()
 </script>
 
-<style lang="scss" scoped>
-.dict {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+<template>
+  <div class="md">
+    <!-- 左：字典列表（独立卡片，与右栏之间留 16px） -->
+    <NCard class="md__side" :bordered="false" size="small">
+      <template #header>
+        <div class="md__side-head">
+          <AppIcon name="dict" :size="15" />
+          <span>字典</span>
+        </div>
+      </template>
+      <template #header-extra>
+        <span class="md__hint">{{ dicts.length }} 个</span>
+      </template>
 
-  &__layout {
-    display: flex;
-    gap: 16px;
-  }
+      <NSpin :show="loadingDicts" class="md__list-wrap">
+        <NEmpty v-if="!dicts.length" class="md__empty" description="没有可维护的字典" />
+        <div
+          v-for="d in dicts"
+          :key="d.dictCode"
+          class="md__row"
+          :class="{ 'md__row--on': current?.dictCode === d.dictCode }"
+          @click="pick(d)"
+        >
+          <span class="md__row-name">{{ d.dictName }}</span>
+          <NTag v-if="d.builtin" size="small" :bordered="false" type="info">
+            内置
+          </NTag>
+          <span class="md__hint">{{ d.itemCount }}</span>
+        </div>
+      </NSpin>
+    </NCard>
 
-  &__side {
-    flex: none;
-    width: 220px;
-    border-right: 1px solid var(--color-border-1);
-  }
+    <!-- 右：字典项（卡片本体就是列表页高度链的第一环） -->
+    <div class="md__main">
+      <NCard v-if="!current" class="md__blank" :bordered="false" size="small">
+        <NEmpty description="从左边选一个字典" />
+      </NCard>
 
-  &__spin {
-    display: block;
-    width: 100%;
-  }
+      <NCard v-else class="md__main-card page-card" :bordered="false" size="small">
+        <template #header>
+          <div class="dict__head">
+            <span class="dict__title">{{ current.dictName }}</span>
+            <span class="dict__code">{{ current.dictCode }}</span>
+          </div>
+        </template>
+        <template #header-extra>
+          <NSpace :size="8">
+            <NButton @click="reload">
+              <template #icon>
+                <AppIcon name="refresh" :size="16" />
+              </template>
+              刷新
+            </NButton>
+            <NButton type="primary" :disabled="readOnlyDict" @click="openCreate">
+              新增项
+            </NButton>
+          </NSpace>
+        </template>
 
-  &__row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    padding: 8px 12px;
-    cursor: pointer;
-    border-radius: 4px;
+        <!-- ⚠️ 三种来源的说明必须摆在界面上：不说清的话，管理员会以为"内置项改不了"是权限不够 -->
+        <NAlert v-if="current.builtin" class="dict__note" type="default" :show-icon="false">
+          <template v-if="readOnlyDict">
+            这一项来自<strong>国标职业库</strong>，整列只读（那是国家标准，不是本系统的取值）。
+          </template>
+          <template v-else>
+            这是内置字典：项名<strong>不可改、不可删</strong>，只能<strong>停用</strong>（可一键恢复默认）。
+            要加值请用「新增项」—— 追加的项可以随时改名或删除。
+            内置项照抄官方表格，改名会让导出汇总表与官方模板对不上。
+          </template>
+        </NAlert>
 
-    &:hover {
-      background: var(--color-fill-1);
-    }
+        <div class="page-card__body">
+          <!--
+            ⚠️ Naive 的表格**没有** `scroll` prop（那是 Arco 的 API）：
+               横向用 `:scroll-x`（数值 = 列宽合计；有「上级项」列时多 150），
+               纵向靠 `flex-height` + 高度链
+          -->
+          <NDataTable
+            flex-height
+            style="height: 100%"
+            :columns="columns"
+            :data="items"
+            :loading="loadingItems"
+            :row-key="row => String(row.itemCode)"
+            :scroll-x="hierarchical ? 930 : 780"
+            :pagination="false"
+            size="small"
+          />
+        </div>
+      </NCard>
+    </div>
 
-    &--on {
-      background: var(--color-fill-2);
-    }
-  }
+    <!-- 新增 / 编辑 -->
+    <NModal
+      v-model:show="modalVisible"
+      preset="card"
+      :title="editing ? '编辑字典项' : '新增字典项'"
+      :style="{ width: 'min(520px, calc(100vw - 32px))' }"
+      :mask-closable="false"
+    >
+      <!--
+        ⚠️ `NForm` / `NFormItem` 必须显式 import（本仓库没有 auto-import）：
+           少了它们，`<NForm>` 会被当成未知元素原样渲染，label 与 feedback 样式全丢，
+           而且**不报错**（这是这一页踩过的坑）。
+      -->
+      <NForm label-placement="top">
+        <NFormItem label="项码" required>
+          <!-- 项码建后不可改是**结构性**的：编辑时禁用输入，后端接口的请求体里也没有这个字段 -->
+          <NInput
+            v-model:value="form.itemCode"
+            :disabled="editing !== null"
+            placeholder="如 大学本科 / TECH_SCHOOL（建后不可改）"
+          />
+          <template #feedback>
+            <span class="dict__hint">
+              项码是历史数据里真正存的值，<strong>建后不可改</strong> ——
+              改了它，过去填过的值会指向不存在的项，而查询不报错、只显示空白。
+            </span>
+          </template>
+        </NFormItem>
 
-  &__name {
-    flex: 1;
-    font-size: 13px;
-  }
+        <NFormItem label="项名" required>
+          <NInput v-model:value="form.itemName" placeholder="界面上给用户看的文字" />
+        </NFormItem>
 
-  &__count {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+        <NFormItem v-if="hierarchical" label="上级项码">
+          <NInput v-model:value="form.parentItemCode" placeholder="留空 = 顶层项" />
+        </NFormItem>
 
-  &__main {
-    flex: 1;
-    min-width: 0;
-  }
+        <NFormItem label="排序">
+          <NInputNumber v-model:value="form.sortNo" :min="0" :step="10" placeholder="数字越小越靠前" class="dict__num" />
+        </NFormItem>
+      </NForm>
 
-  &__bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-  }
+      <template #footer>
+        <NSpace justify="end">
+          <NButton @click="modalVisible = false">
+            取消
+          </NButton>
+          <NButton type="primary" :loading="saving" @click="save">
+            保存
+          </NButton>
+        </NSpace>
+      </template>
+    </NModal>
+  </div>
+</template>
 
-  &__title {
-    font-size: 15px;
-    font-weight: 500;
-  }
+<style scoped>
+/**
+ * 主从版面：左右各一张独立卡片，间隔 16px（`--xt-gap`）。
+ *
+ * ⚠️ 高度算式与全局 `.page-card` **同源**（`--xt-header-h` / `--xt-content-pad`）：
+ *    写死 `calc(100vh - 56px - 28px)` 会比内容区实际高度多 4px，多出一条无意义的滚动条。
+ */
+.md {
+  display: flex;
+  gap: var(--xt-gap);
+  height: calc(100vh - var(--xt-header-h) - var(--xt-content-pad) * 2);
+}
 
-  &__code {
-    margin-left: 8px;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--color-text-3);
-  }
+/* 左栏：卡片自己就是 flex 列（Naive 的 .n-card 已是 column），宽度固定、不参与伸缩 */
+.md__side {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: 240px;
+  min-height: 0;
+  overflow: hidden;
+}
 
-  &__note {
-    margin-bottom: 12px;
-  }
+/**
+ * 卡片内容区变成"能撑满的 flex 列"，列表才有确定高度、自己滚（高度链的第一环）。
+ *
+ * ⚠️ 类名是 `.n-card-content`（naive 的 `cB("card-content")`），**不是** `.n-card__content`：
+ *    后者不匹配任何元素，写错了整条规则静默失效。
+ */
+.md__side :deep(.n-card-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
 
-  &__empty {
-    padding: 40px;
-    color: var(--color-text-3);
-    text-align: center;
-  }
+.md__side-head {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 14px;
+}
 
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.md__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
 
-  &__off {
-    color: var(--color-text-3);
-    text-decoration: line-through;
-  }
+.md__list-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
 
-  &__tag {
-    margin-left: 6px;
+.md__empty {
+  padding: 24px 0;
+}
+
+.md__row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 7px 10px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+
+.md__row:hover {
+  background: var(--xt-band-bg);
+}
+
+.md__row--on {
+  background: #eef4ff;
+  border-color: #cfe0ff;
+}
+
+.md__row-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 右栏：卡片就是列表页高度链的第一环，所以它要撑满左栏高度、且能被压缩到 0 以下不溢出 */
+.md__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.md__main-card {
+  flex: 1;
+  min-height: 0;
+}
+
+/* 高度链第二环：卡片内容区变成"能撑满的 flex 列"，下面的表格才拿得到确定高度 */
+.md__main-card :deep(.n-card-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* 空态也占一张卡片：右侧留一块灰底会让人以为"页面没加载完" */
+.md__blank {
+  flex: 1;
+  min-height: 240px;
+}
+
+.md__blank :deep(.n-card-content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dict__head {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.dict__title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.dict__code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.dict__note {
+  margin-bottom: 12px;
+}
+
+.dict__hint {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--xt-text-3);
+}
+
+.dict__num {
+  width: 100%;
+}
+
+.dict__muted,
+:deep(.dict__muted) {
+  color: var(--xt-text-3);
+}
+
+.dict__off,
+:deep(.dict__off) {
+  color: #c2c2c2;
+  text-decoration: line-through;
+}
+
+/* ≤1100px：左栏收窄一档，别把右栏挤到撑破容器 */
+@media (max-width: 1100px) {
+  .md__side {
+    width: 200px;
   }
 }
 </style>
diff --git a/frontend-pc/src/views/error/403.vue b/frontend-pc/src/views/error/403.vue
index ef06b46..3bc5f83 100644
--- a/frontend-pc/src/views/error/403.vue
+++ b/frontend-pc/src/views/error/403.vue
@@ -1,11 +1,10 @@
-<template>
-  <ErrorPage :code="403"></ErrorPage>
-</template>
-
 <script setup lang="ts">
 import ErrorPage from './components/ErrorPage.vue'
 
+/** 403：已登录但**没有这个权限**（后端用真实 HTTP 403 返回，不是业务码） */
 defineOptions({ name: 'Error403' })
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <ErrorPage :code="403" />
+</template>
diff --git a/frontend-pc/src/views/error/404.vue b/frontend-pc/src/views/error/404.vue
index 3233907..db68d2b 100644
--- a/frontend-pc/src/views/error/404.vue
+++ b/frontend-pc/src/views/error/404.vue
@@ -1,11 +1,10 @@
-<template>
-  <ErrorPage :code="404"></ErrorPage>
-</template>
-
 <script setup lang="ts">
 import ErrorPage from './components/ErrorPage.vue'
 
+/** 404：路由没匹配上（也叫"菜单指向了不存在的页面"） */
 defineOptions({ name: 'Error404' })
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <ErrorPage :code="404" />
+</template>
diff --git a/frontend-pc/src/views/error/500.vue b/frontend-pc/src/views/error/500.vue
deleted file mode 100644
index 53ca351..0000000
--- a/frontend-pc/src/views/error/500.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <ErrorPage :code="500"></ErrorPage>
-</template>
-
-<script setup lang="ts">
-import ErrorPage from './components/ErrorPage.vue'
-
-defineOptions({ name: 'Error500' })
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend-pc/src/views/error/components/ErrorPage.vue b/frontend-pc/src/views/error/components/ErrorPage.vue
index 1556e9d..40feafb 100644
--- a/frontend-pc/src/views/error/components/ErrorPage.vue
+++ b/frontend-pc/src/views/error/components/ErrorPage.vue
@@ -1,48 +1,52 @@
-<template>
-  <div class="error-page">
-    <section class="error__container">
-      <div class="error__img">
-        <component :is="IconMap[props.code]" class="error__icon"></component>
-      </div>
-
-      <div class="error__tip">
-        <div class="error__tip--a">抱歉!</div>
-        <div class="error__tip--b">当前页面不存在...</div>
-        <div class="error__tip--c">请检查您输入的网址是否正确，或点击下面的按钮返回首页</div>
-        <a-button type="primary" shape="round" size="large" @click="back">{{ countDownTime || '' }} 返回首页</a-button>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script setup lang="ts">
-import type { Component } from 'vue'
-import Icon403 from '@/components/icons/Icon403.vue'
-import Icon404 from '@/components/icons/Icon404.vue'
-import Icon500 from '@/components/icons/Icon500.vue'
+import { NButton } from 'naive-ui'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-interface Props {
-  code?: number
-}
+/**
+ * 错误页（403 / 404 共用）。
+ *
+ * 两种码的**文案必须不同**：403 是"你没有这个权限"，404 是"地址不对"。
+ * 上一版把两者都写成"当前页面不存在"，于是被权限拦下来的人会去反复检查网址 ——
+ * 而问题根本不在网址上。
+ *
+ * 倒计时只用来提示"还有几秒回到首页"，**到 0 不自动跳**：
+ * 自动跳转会把原因文案一起带走，用户还没看清就被送到别处。
+ */
 defineOptions({ name: 'ErrorPage' })
 
-const props = withDefaults(defineProps<Props>(), {
-  code: 403
-})
+const props = withDefaults(defineProps<{ code?: number }>(), { code: 403 })
 
 const router = useRouter()
 
-const IconMap: Record<number, Component> = {
-  403: Icon403,
-  404: Icon404,
-  500: Icon500
-}
-
-const countDownTime = ref(5)
+const seconds = ref(5)
 let timer: ReturnType<typeof setInterval> | undefined
 
+const content = computed(() => props.code === 403
+  ? {
+      title: '没有访问权限',
+      desc: '这个页面需要更高的权限。如果你认为自己应该能看到它，请联系本单位管理员调整角色后再试。'
+    }
+  : {
+      title: '页面不存在',
+      desc: '请检查网址是否正确，或从左侧菜单重新进入。'
+    })
+
+function back(): void {
+  void router.replace('/')
+}
+
 onMounted(() => {
-  onCountDownTime()
+  timer = setInterval(() => {
+    if (seconds.value > 0) {
+      seconds.value -= 1
+      return
+    }
+    if (timer) {
+      clearInterval(timer)
+      timer = undefined
+    }
+  }, 1000)
 })
 
 onBeforeUnmount(() => {
@@ -50,114 +54,50 @@ onBeforeUnmount(() => {
     clearInterval(timer)
   }
 })
-
-// 返回页面
-const back = () => {
-  router.replace({ path: '/' })
-}
-
-// 倒计时
-function onCountDownTime() {
-  timer = setInterval(() => {
-    if (countDownTime.value) {
-      countDownTime.value--
-    } else {
-      // back()
-      if (timer) {
-        clearInterval(timer)
-        timer = undefined
-      }
-    }
-  }, 1000)
-}
 </script>
 
-<style lang="scss" scoped>
-.error-page {
+<template>
+  <div class="err">
+    <div class="err__code">{{ code }}</div>
+    <div class="err__title">{{ content.title }}</div>
+    <p class="err__desc">{{ content.desc }}</p>
+    <NButton type="primary" size="medium" @click="back">
+      返回首页{{ seconds > 0 ? `（${seconds}s）` : '' }}
+    </NButton>
+  </div>
+</template>
+
+<style scoped>
+.err {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: var(--color-bg-1);
+  height: 100vh;
+  padding: 0 24px;
+  text-align: center;
+  background: #fff;
 }
 
-.error {
-  &__container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &__img {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  &__icon {
-    max-width: 90%;
-    height: 50vh;
-  }
-
-  &__tip {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    &--a {
-      margin-bottom: 20px;
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: rgb(var(--primary-6));
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-
-    &--b {
-      margin-bottom: 10px;
-      font-size: 20px;
-      font-weight: bold;
-      line-height: 24px;
-      color: var(--color-text-1);
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-
-    &--c {
-      padding: 0 30px;
-      margin-bottom: 20px;
-      font-size: 13px;
-      line-height: 20px;
-      color: var(--color-text-2);
-      text-align: center;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-  }
+.err__code {
+  font-size: 96px;
+  font-weight: 700;
+  line-height: 1;
+  color: #0052d9;
+  letter-spacing: 0.04em;
 }
 
-@keyframes slideUp {
-  0% {
-    opacity: 0;
-    transform: translateY(60px);
-  }
+.err__title {
+  margin-top: 18px;
+  font-size: 20px;
+  font-weight: 600;
+}
 
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.err__desc {
+  max-width: 520px;
+  margin: 10px 0 24px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--xt-text-2);
 }
 </style>
diff --git a/frontend-pc/src/views/export/ExportDetailDrawer.vue b/frontend-pc/src/views/export/ExportDetailDrawer.vue
index 7c3bced..779e029 100644
--- a/frontend-pc/src/views/export/ExportDetailDrawer.vue
+++ b/frontend-pc/src/views/export/ExportDetailDrawer.vue
@@ -1,83 +1,23 @@
-<template>
-  <a-drawer v-model:visible="visible" :width="900" :mask-closable="false" :footer="false"
-    unmount-on-close @cancel="close">
-    <template #title>
-      <span>导出详情</span>
-      <a-tag v-if="detail" class="ed__head-tag" :color="EXPORT_STATUS[detail.status]?.color ?? 'gray'">
-        {{ detail.statusText || EXPORT_STATUS[detail.status]?.text }}
-      </a-tag>
-      <span v-if="detail" class="ed__head-sub">{{ detail.exportName }}</span>
-    </template>
-
-    <a-spin :loading="loading" class="ed__spin">
-      <template v-if="detail">
-        <a-alert v-if="detail.status === 3" type="error" class="ed__alert">
-          <template #title>打包失败：{{ detail.errorMsg || '未知原因' }}</template>
-          <template #default>
-            失败不会产生任何交付物，重新导出即可（**不会**因此产生重复计费或脏数据）。
-          </template>
-        </a-alert>
-
-        <!-- 进度：处理中每 2 秒自动刷新一次，完成后自动停 -->
-        <div class="ed__bar">
-          <a-progress :percent="(detail.progress ?? 0) / 100" :status="progressStatus"
-            :animation="detail.status === 1" />
-          <div class="ed__muted">
-            {{ detail.stepText || EXPORT_STATUS[detail.status]?.text }}
-            <template v-if="detail.fileCount"> · 共 {{ detail.fileCount }} 人</template>
-          </div>
-        </div>
-
-        <a-descriptions :column="2" size="small" bordered class="ed__desc">
-          <a-descriptions-item label="任务">{{ detail.taskName || '—' }}</a-descriptions-item>
-          <a-descriptions-item label="创建时间">{{ fmt(detail.createTime) }}</a-descriptions-item>
-          <a-descriptions-item label="完成时间">{{ fmt(detail.finishTime) }}</a-descriptions-item>
-          <a-descriptions-item label="保留到">{{ fmt(detail.expireTime) }}（到期后需重新导出）</a-descriptions-item>
-          <a-descriptions-item label="原始体积">
-            {{ detail.stats?.rawSizeMb ?? '—' }} MB
-          </a-descriptions-item>
-          <a-descriptions-item label="包体 / 压缩率">
-            {{ detail.stats?.finalSizeMb ?? '—' }} MB
-            <span class="ed__muted">（{{ detail.stats?.compressRatio || '—' }}）</span>
-          </a-descriptions-item>
-        </a-descriptions>
-
-        <!-- 产物 -->
-        <div class="ed__section">产物</div>
-        <a-empty v-if="!(detail.resultFiles ?? []).length" description="还没有产物（未完成或失败）" />
-        <a-table v-else :data="detail.resultFiles ?? []" :pagination="false" size="small"
-          row-key="name" :bordered="{ cell: true }">
-          <template #columns>
-            <a-table-column title="文件名" data-index="name" />
-            <a-table-column title="体积" :width="100" align="center">
-              <template #cell="{ record }">{{ record.sizeMb }} MB</template>
-            </a-table-column>
-            <a-table-column title="校验值（sha256）" :width="240">
-              <template #cell="{ record }">
-                <span class="ed__code" :title="record.checksum">{{ shortHash(record.checksum) }}</span>
-              </template>
-            </a-table-column>
-            <a-table-column title="操作" :width="110" align="center">
-              <template #cell="{ record }">
-                <a-link :loading="downloading" @click="onDownload(record.part ?? 0)">下载</a-link>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
-
-        <div class="ed__muted ed__tip">
-          下载的是 ZIP 包，解压后目录结构为「{批次号}-{任务名称}/班级/材料类型/文件」+ 根目录的汇总表。
-          校验值用于核对传输是否完整（本机核对：<span class="ed__code">certutil -hashfile 包名 SHA256</span>）。
-        </div>
-      </template>
-    </a-spin>
-  </a-drawer>
-</template>
-
 <script setup lang="ts">
-import type { ExportTaskVO } from '@/apis/xt/export-task'
-import { Message } from '@arco-design/web-vue'
+import type { DataTableColumns } from 'naive-ui'
+import type { ExportResultFile, ExportTaskVO } from '@/apis/xt/export-task'
+import {
+  NAlert,
+  NButton,
+  NDataTable,
+  NDescriptions,
+  NDescriptionsItem,
+  NDrawer,
+  NDrawerContent,
+  NEmpty,
+  NProgress,
+  NSpin,
+  NTag,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onBeforeUnmount, ref } from 'vue'
 import { downloadExportFile, EXPORT_STATUS, getExportDetail } from '@/apis/xt/export-task'
+import { tagOf } from '@/utils/tag'
 
 /**
  * 导出详情（进度 + 产物 + 下载）。
@@ -86,11 +26,12 @@ import { downloadExportFile, EXPORT_STATUS, getExportDetail } from '@/apis/xt/ex
  *
  * 打包是后台任务，进度只能轮询。**完成后必须停**：不停的话用户开着这个抽屉
  * 就等于一直在打接口；而"忘了停"在演示时看不出来，只在监控里变成莫名其妙的 QPS。
+ * 所以 `load()` 每次拿到状态后自己决定继续还是停（并且关闭抽屉、组件卸载时都清一次）。
  *
- * ## 下载为什么要走 axios/fetch 而不是直接给个链接
+ * ## 下载为什么要取 blob 而不是直接给个链接
  *
  * `/exports/{id}/file` 是要登录的（带 `Authorization` 头），
- * 直接 `window.open` 会 401。所以走 `downloadExportFile`（取 blob 再本地触发下载）。
+ * 直接 `window.open` 会 401。所以统一走 `downloadExportFile`（取 blob 再本地触发下载）。
  */
 defineOptions({ name: 'ExportDetailDrawer' })
 
@@ -98,25 +39,63 @@ const emit = defineEmits<{
   (e: 'changed'): void
 }>()
 
+const message = useMessage()
+
 const visible = ref(false)
 const loading = ref(false)
-const downloading = ref(false)
+const downloadingPart = ref<number | null>(null)
 const detail = ref<ExportTaskVO | null>(null)
 const exportId = ref<number>(0)
 let timer: number | null = null
+/** 完成/失败只通知列表刷新一次（轮询每 2 秒会反复拿到同一个终态） */
+let finishedNotified = false
 
-const progressStatus = computed(() => {
+const progressStatus = computed<'success' | 'error' | undefined>(() => {
   const s = detail.value?.status
   if (s === 3) {
-    // Arco 的 Progress 状态里"失败"叫 danger（不是 error）
-    return 'danger'
+    return 'error'
   }
   if (s === 2) {
     return 'success'
   }
-  return 'normal'
+  return undefined
 })
 
+const running = computed(() => {
+  const s = detail.value?.status
+  return s === 0 || s === 1
+})
+
+const columns: DataTableColumns<ExportResultFile> = [
+  { title: '文件名', key: 'name', ellipsis: { tooltip: true } },
+  {
+    title: '体积',
+    key: 'sizeMb',
+    width: 100,
+    align: 'center',
+    render: (row) => `${row.sizeMb} MB`
+  },
+  {
+    title: '校验值（sha256）',
+    key: 'checksum',
+    width: 220,
+    render: (row) => h('span', { class: 'ed__code', title: row.checksum }, shortHash(row.checksum))
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 100,
+    align: 'center',
+    render: (row) => h(NButton, {
+      text: true,
+      size: 'small',
+      type: 'primary',
+      loading: downloadingPart.value === (row.part ?? 0),
+      onClick: () => onDownload(row.part ?? 0)
+    }, { default: () => '下载' })
+  }
+]
+
 function fmt(v: string | null) {
   return v ? v.replace('T', ' ').slice(0, 16) : '—'
 }
@@ -129,13 +108,16 @@ function shortHash(v: string | null) {
 }
 
 async function load() {
-  const res = await getExportDetail(exportId.value)
-  detail.value = res.data ?? null
-  // 只在"还在跑"的时候继续轮询；完成/失败各刷一次就停
-  if (detail.value && (detail.value.status === 0 || detail.value.status === 1)) {
+  detail.value = await getExportDetail(exportId.value) ?? null
+  if (running.value) {
     startTimer()
   } else {
+    // 完成 / 失败：各刷一次就停
     stopTimer()
+    if (detail.value && !finishedNotified) {
+      finishedNotified = true
+      emit('changed')
+    }
   }
 }
 
@@ -157,6 +139,7 @@ async function open(id: number) {
   exportId.value = id
   visible.value = true
   loading.value = true
+  finishedNotified = false
   try {
     await load()
   } finally {
@@ -164,21 +147,29 @@ async function open(id: number) {
   }
 }
 
-function close() {
-  stopTimer()
-  visible.value = false
-  emit('changed')
+/**
+ * 抽屉收起时：停轮询 + 通知列表刷新。
+ *
+ * ⚠️ 关抽屉这条路径必须**自己**收尾：`closable` 的 × 是直接改 `show`，
+ * 不会走任何"关闭回调"—— 不在 `update:show` 里停轮询，用户关掉抽屉后
+ * 请求还会一直打下去（演示时看不出来，只在监控里变成莫名其妙的 QPS）。
+ */
+function onShowChange(v: boolean) {
+  if (!v) {
+    stopTimer()
+    emit('changed')
+  }
 }
 
 async function onDownload(fileIndex: number) {
-  downloading.value = true
+  downloadingPart.value = fileIndex
   try {
     await downloadExportFile(exportId.value, fileIndex)
-    Message.success('已开始下载')
+    message.success('已开始下载')
   } catch (e) {
-    Message.error((e as Error).message || '下载失败')
+    message.error((e as Error).message || '下载失败')
   } finally {
-    downloading.value = false
+    downloadingPart.value = null
   }
 }
 
@@ -187,50 +178,126 @@ onBeforeUnmount(stopTimer)
 defineExpose({ open })
 </script>
 
-<style lang="scss" scoped>
-.ed {
-  &__head-tag {
-    margin-left: 8px;
-  }
+<template>
+  <NDrawer v-model:show="visible" :width="900" placement="right" :mask-closable="false" @update:show="onShowChange">
+    <NDrawerContent :native-scrollbar="false" closable>
+      <template #header>
+        <span>导出详情</span>
+        <NTag v-if="detail" class="ed__head-tag" size="small" :bordered="false" :type="tagOf(EXPORT_STATUS, detail.status).type">
+          {{ detail.statusText || tagOf(EXPORT_STATUS, detail.status).text }}
+        </NTag>
+        <span v-if="detail" class="ed__head-sub">{{ detail.exportName }}</span>
+      </template>
 
-  &__head-sub {
-    margin-left: 12px;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--color-text-3);
-  }
+      <NSpin :show="loading">
+        <template v-if="detail">
+          <NAlert v-if="detail.status === 3" type="error" class="ed__alert" title="打包失败">
+            {{ detail.errorMsg || '未知原因' }}
+            <div class="ed__muted">失败不会产生任何交付物，重新导出即可（不会因此产生重复计费或脏数据）。</div>
+          </NAlert>
 
-  &__spin {
-    display: block;
-  }
+          <!-- 进度：处理中每 2 秒自动刷新一次，完成后自动停 -->
+          <div class="ed__bar">
+            <NProgress
+              type="line"
+              :percentage="Math.max(0, Math.min(100, detail.progress ?? 0))"
+              :status="progressStatus"
+              :processing="running"
+            />
+            <div class="ed__muted">
+              {{ detail.stepText || tagOf(EXPORT_STATUS, detail.status).text }}
+              <template v-if="detail.fileCount"> · 共 {{ detail.fileCount }} 人</template>
+            </div>
+          </div>
 
-  &__alert {
-    margin-bottom: 12px;
-  }
+          <NDescriptions :column="2" size="small" bordered>
+            <NDescriptionsItem label="任务">{{ detail.taskName || '—' }}</NDescriptionsItem>
+            <NDescriptionsItem label="创建时间">{{ fmt(detail.createTime) }}</NDescriptionsItem>
+            <NDescriptionsItem label="完成时间">{{ fmt(detail.finishTime) }}</NDescriptionsItem>
+            <NDescriptionsItem label="保留到">
+              {{ fmt(detail.expireTime) }}（到期后需重新导出）
+            </NDescriptionsItem>
+            <NDescriptionsItem label="原始体积">{{ detail.stats?.rawSizeMb ?? '—' }} MB</NDescriptionsItem>
+            <NDescriptionsItem label="包体 / 压缩率">
+              {{ detail.stats?.finalSizeMb ?? '—' }} MB
+              <span class="ed__muted">（{{ detail.stats?.compressRatio || '—' }}）</span>
+            </NDescriptionsItem>
+          </NDescriptions>
 
-  &__bar {
-    margin-bottom: 14px;
-  }
+          <!-- 产物：文件名 / 体积 / sha256 / 下载 -->
+          <div class="section-title">
+            产物
+          </div>
+          <NEmpty v-if="!(detail.resultFiles ?? []).length" description="还没有产物（未完成或失败）" />
+          <NDataTable
+            v-else
+            size="small"
+            :columns="columns"
+            :data="detail.resultFiles ?? []"
+            :bordered="true"
+            :row-key="(row: ExportResultFile) => `${row.part}-${row.name}`"
+            :pagination="false"
+            :max-height="240"
+            :scroll-x="700"
+          />
 
-  &__section {
-    margin: 18px 0 8px;
-    font-size: 14px;
-    font-weight: 600;
-  }
+          <div class="ed__muted ed__tip">
+            下载的是 ZIP 包，解压后目录结构为「{批次号}-{任务名称}/班级/材料类型/文件」+ 根目录的汇总表。
+            校验值用于核对传输是否完整（本机核对：<span class="ed__code">certutil -hashfile 包名 SHA256</span>）。
+          </div>
 
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+          <div v-if="running" class="ed__muted ed__tip">
+            打包进行中，本页每 2 秒自动刷新；完成或失败后会自动停止。
+          </div>
+        </template>
+      </NSpin>
+    </NDrawerContent>
+  </NDrawer>
+</template>
 
-  &__code {
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 12px;
-  }
+<style scoped>
+.ed__head-tag {
+  margin-left: 8px;
+}
 
-  &__tip {
-    margin-top: 10px;
-    line-height: 1.8;
-  }
+.ed__head-sub {
+  margin-left: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--xt-text-3);
+}
+
+.ed__alert {
+  margin-bottom: 14px;
+}
+
+/* 进度块：抽屉内部的浅灰小格子（不再套一层白卡片） */
+.ed__bar {
+  padding: 12px 14px;
+  margin-bottom: 16px;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.ed__muted {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.ed__bar .ed__muted {
+  margin-top: 6px;
+}
+
+/* ⚠️ `.ed__code` 出现在**渲染函数**里（产物表的 sha256 列）。
+   渲染函数生成的元素不带 `data-v-*`，普通 scoped 选择器匹配不到（不报错、样式静默失效）。 */
+:deep(.ed__code) {
+  font-family: ui-monospace, sfmono-regular, menlo, monospace;
+  font-size: 12px;
+}
+
+.ed__tip {
+  margin-top: 12px;
+  line-height: 1.8;
 }
 </style>
diff --git a/frontend-pc/src/views/export/index.vue b/frontend-pc/src/views/export/index.vue
index 2f78bcd..d853686 100644
--- a/frontend-pc/src/views/export/index.vue
+++ b/frontend-pc/src/views/export/index.vue
@@ -1,244 +1,26 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>导出中心</template>
-      <template #extra>
-        <span class="exp__hint">交付物：ZIP 包 + 根目录汇总表，目录结构按机构规范生成</span>
-      </template>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-select v-model="taskId" placeholder="选择要导出的任务" size="small" class="exp__task"
-            :loading="taskLoading" @change="onTaskChange">
-            <a-option v-for="t in taskOptions" :key="t.id" :value="t.id">
-              {{ t.taskName }}
-            </a-option>
-          </a-select>
-          <a-radio-group v-model="onlyApproved" type="button" size="small" :disabled="!taskId"
-            @change="reload">
-            <a-radio :value="false">全部已提交</a-radio>
-            <a-radio :value="true">仅终审通过</a-radio>
-          </a-radio-group>
-          <a-button size="small" :disabled="!taskId" @click="reload">
-            <template #icon><IconRefresh /></template>
-            重新检查
-          </a-button>
-        </a-space>
-        <a-space>
-          <span class="exp__hint">{{ checkedAt ? `上次检查：${checkedAt}` : '选择任务后自动检查' }}</span>
-        </a-space>
-      </div>
-
-      <a-empty v-if="!taskId" description="先选一个任务 —— 导出是按任务进行的" />
-
-      <a-spin v-else :loading="checking">
-        <!--
-          ⚠️ 这里是**铁律**的落点：canExport=false 时按钮直接禁用，**不弹警告放行**。
-          清单要具体到"谁 + 哪一项 + 怎么办"，否则管理员只能去几百份材料里逐个翻。
-        -->
-        <a-alert v-if="precheck && !precheck.canExport" type="error" class="exp__alert">
-          <template #title>
-            前置检查未通过：{{ precheck.blocking.length }} 项不合格，<strong>无法导出</strong>。
-            这是铁律 —— 不合格的文件不允许进入汇总包。
-          </template>
-          <template #default>
-            <div v-for="(a, i) in quickActions" :key="i" class="exp__action">
-              · {{ a }}
-            </div>
-          </template>
-        </a-alert>
-        <a-alert v-else-if="precheck" type="success" :show-icon="false" class="exp__alert">
-          <template #title>
-            检查通过：<strong>{{ precheck.candidateCount }}</strong> 人、
-            <strong>{{ precheck.fileCount }}</strong> 个文件（原始
-            {{ mb(precheck.rawSizeBytes) }} MB）可以打包。
-          </template>
-        </a-alert>
-
-        <a-alert v-for="(w, i) in precheck?.warnings ?? []" :key="`w${i}`" type="warning"
-          :show-icon="false" class="exp__alert">
-{{ w }}
-</a-alert>
-
-        <a-row :gutter="12">
-          <a-col :span="11">
-            <div class="exp__card">
-              <div class="exp__card-head">导出设置</div>
-              <!-- 不引 a-form：这些是"输入即生效"的设置项，没有校验，加一层 form
-                   只会多要一个 model 绑定（Arco 的 a-form 要求 model 必填） -->
-              <div class="exp__field">
-                <div class="exp__label">包名（会写进 ZIP 文件名）</div>
-                <a-input v-model="exportName" placeholder="如 202609机电认定-24中技数控1班"
-                  :max-length="60" show-word-limit />
-              </div>
-              <div class="exp__field">
-                <div class="exp__label">分卷大小</div>
-                <a-select v-model="splitSizeMb">
-                  <a-option :value="0">不分卷（一期只支持这一项）</a-option>
-                </a-select>
-                <div class="exp__hint">分卷还没做：几百人的批次超过 1GB 时会需要它</div>
-              </div>
-              <div class="exp__field">
-                <a-checkbox v-model="desensitize">证件号脱敏导出</a-checkbox>
-                <div class="exp__hint">
-                  名册里存的本来就是脱敏值，这个开关留给二期（明文导出需二次确认）
-                </div>
-              </div>
-            </div>
-
-            <!-- 阻断清单：逐条说清"谁 + 哪一项 + 怎么办" -->
-            <div v-if="precheck && precheck.blocking.length" class="exp__card">
-              <div class="exp__card-head">
-                卡住的地方（{{ precheck.blocking.length }}）
-                <span class="exp__hint">
-                  还没审完 {{ precheck.summary.unapproved }} · 缺材料 {{ precheck.summary.missing }} ·
-                  体积超标 {{ precheck.summary.sizeExceeded }} · 名字未规范 {{ precheck.summary.nameInvalid }}
-                </span>
-              </div>
-              <a-table :data="precheck.blocking" :pagination="{ pageSize: 8, size: 'mini' }"
-                size="mini" row-key="title" :bordered="{ cell: true }">
-                <template #columns>
-                  <a-table-column title="类型" :width="100" align="center">
-                    <template #cell="{ record }">
-                      <a-tag :color="BLOCKING_TYPE[record.type]?.color ?? 'gray'" size="small">
-                        {{ BLOCKING_TYPE[record.type]?.text ?? record.type }}
-                      </a-tag>
-                    </template>
-                  </a-table-column>
-                  <a-table-column title="问题">
-                    <template #cell="{ record }">
-                      <div>{{ record.title }}</div>
-                      <div class="exp__hint">{{ record.action }}</div>
-                    </template>
-                  </a-table-column>
-                </template>
-              </a-table>
-            </div>
-          </a-col>
-
-          <a-col :span="13">
-            <div class="exp__card">
-              <div class="exp__card-head">
-                目录结构预览
-                <span class="exp__hint">
-                  {{ tree ? `${tree.personCount} 人 × 各类材料 = ${tree.fileCount} 个文件` : '' }}
-                </span>
-              </div>
-              <!--
-                目录树用「半角制表符 + CSS 缩进」，**不用全角空格**：
-                全角空格（U+3000）会被 eslint 的 no-irregular-whitespace 拦下，
-                而靠空白对齐的写法在 `--fix` 之后必然被重排 —— 那样每次改这个文件
-                都要打一次仗。缩进交给 `.exp__tree-*` 的 padding-left。
-              -->
-              <div v-if="tree" class="exp__tree">
-                <div class="exp__tree-root">{{ tree.root }}/</div>
-                <div v-for="c in tree.children" :key="c.path" class="exp__tree-org">
-                  <div class="exp__tree-dir">
-                    <span class="exp__br">|-- </span>{{ c.name }}/
-                    <span class="exp__hint">{{ c.studentCount }} 人</span>
-                  </div>
-                  <div v-for="m in c.children" :key="m.path" class="exp__tree-mat">
-                    <div class="exp__tree-dir2">
-                      <span class="exp__br">|-- </span>{{ m.name }}/
-                      <span class="exp__hint">{{ m.children.length }} 个</span>
-                    </div>
-                    <div v-for="f in m.children.slice(0, 2)" :key="f.path" class="exp__tree-file">
-                      <span class="exp__br">`-- </span>{{ f.name }}
-                      <span class="exp__hint">{{ f.sizeKb }}KB</span>
-                    </div>
-                    <div v-if="m.children.length > 2" class="exp__tree-file exp__hint">
-                      <span class="exp__br">`-- </span>…（其余 {{ m.children.length - 2 }} 个）
-                    </div>
-                  </div>
-                </div>
-                <div class="exp__tree-file">
-                  <span class="exp__br">`-- </span>考生线下报名信息导入模板（汇总）.xlsx
-                </div>
-              </div>
-              <a-empty v-else description="没有可预览的内容" />
-              <div class="exp__hint exp__tree-note">
-                预览与真正打包**共用同一份构建代码**，所以这里看到的就是解压后的样子
-                （每个材料目录最多列 2 个文件，避免几百人时刷屏）。
-              </div>
-            </div>
-          </a-col>
-        </a-row>
-
-        <!-- 底部动作条：按钮的可用性就是铁律的落点 -->
-        <div class="exp__footer">
-          <span class="exp__hint">
-            导出是后台任务，完成后在这里下载；产物保留 7 天
-          </span>
-          <a-space>
-            <a-tooltip :disabled="canExport" :content="blockReason">
-              <a-button type="primary" size="small" :disabled="!canExport" :loading="creating"
-                @click="onCreate">
-                <template #icon><IconDownload /></template>
-                开始导出
-              </a-button>
-            </a-tooltip>
-          </a-space>
-        </div>
-      </a-spin>
-
-      <a-divider />
-
-      <div class="exp__card-head">导出记录</div>
-      <a-table :data="records" :loading="listLoading" row-key="id" size="small"
-        :pagination="pagination" :scroll="{ x: 900 }" @page-change="onPageChange">
-        <template #columns>
-          <a-table-column title="包名 / 任务" :width="240" ellipsis tooltip>
-            <template #cell="{ record }">
-              <div class="exp__name">{{ record.exportName }}</div>
-              <div class="exp__hint">{{ record.taskName || '—' }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="状态" :width="100" align="center">
-            <template #cell="{ record }">
-              <a-tag :color="EXPORT_STATUS[record.status]?.color ?? 'gray'" size="small">
-                {{ record.statusText || EXPORT_STATUS[record.status]?.text }}
-              </a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="进度" :width="150">
-            <template #cell="{ record }">
-              <a-progress :percent="(record.progress ?? 0) / 100" size="small"
-                :status="record.status === 3 ? 'danger' : (record.status === 2 ? 'success' : 'normal')" />
-            </template>
-          </a-table-column>
-          <a-table-column title="人数 / 包体" :width="120">
-            <template #cell="{ record }">
-              <div>{{ record.fileCount ?? '—' }} 人</div>
-              <div class="exp__hint">{{ record.stats?.finalSizeMb ?? '—' }} MB</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="创建时间" :width="150">
-            <template #cell="{ record }">{{ fmt(record.createTime) }}</template>
-          </a-table-column>
-          <a-table-column title="操作" :width="160" align="center" fixed="right">
-            <template #cell="{ record }">
-              <a-space size="mini">
-                <a-link @click="onOpen(record)">详情</a-link>
-                <a-link v-if="record.status === 2 && record.resultFiles?.length"
-                  @click="onQuickDownload(record)">
-下载
-</a-link>
-                <a-link v-if="record.status === 3" status="warning" @click="onOpen(record)">看原因</a-link>
-              </a-space>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-
-    <ExportDetailDrawer ref="detailRef" @changed="loadRecords" />
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
-import type { ExportPrecheck, ExportTaskVO, ExportTree } from '@/apis/xt/export-task'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconDownload, IconRefresh } from '@arco-design/web-vue/es/icon'
+import type { DataTableColumns } from 'naive-ui'
+import type { BizError } from '@/apis/types'
+import type { ExportBlocking, ExportPrecheck, ExportTaskVO, ExportTree } from '@/apis/xt/export-task'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NCheckbox,
+  NDataTable,
+  NEmpty,
+  NInput,
+  NRadioButton,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTag,
+  NTooltip,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref, useTemplateRef } from 'vue'
 import {
   BLOCKING_TYPE,
   createExport,
@@ -250,33 +32,43 @@ import {
   QUICK_ACTION_TEXT
 } from '@/apis/xt/export-task'
 import { getTaskList } from '@/apis/xt/task'
+import { listPagination } from '@/composables/pagination'
+import AppIcon from '@/icons/AppIcon.vue'
+import { tagOf } from '@/utils/tag'
 import ExportDetailDrawer from './ExportDetailDrawer.vue'
 
 /**
- * 导出中心（原型 STEP 07，契约 §12.4~§12.6）。
+ * 导出中心（原型 STEP 07，契约 §12.4 ~ §12.6）。
  *
  * ## 一屏只做一件事：让"不允许带问题打包"变成按钮禁用
  *
- * 所以这一页的**主逻辑就是前置检查**：进页面先检查、改范围再检查、
+ * 所以这一页的**主逻辑就是前置检查**：进页面先检查、改范围再检查，
  * `canExport=false` 就把「开始导出」禁用并把清单列出来。
- * 没有"点一下试试看"的分支 —— 也不该有。
+ * **没有"点一下试试看"的分支** —— 服务端在 40035 里也**不带 force**，
+ * 所以前端连"警告后放行"的按钮都不该有。
  *
  * ## 目录树预览不是装饰
  *
  * 客户拿到包才会发现问题（名字不对、少一个人、体积没压下去），
  * 而那时已经交出去了。预览把这些提前到"点导出之前"，
- * 并且它与打包**共用同一份构建代码**，所以不会说谎。
+ * 并且它与真正打包**共用同一份构建代码**，所以不会说谎。
  */
 defineOptions({ name: 'Export' })
 
+const message = useMessage()
+const dialog = useDialog()
+
 const taskLoading = ref(false)
 const checking = ref(false)
 const listLoading = ref(false)
 const creating = ref(false)
-const taskOptions = ref<Array<{ id: number, taskName: string }>>([])
+/** 正在下载的导出行 id（只用于那一个按钮的 loading） */
+const downloading = ref<number | null>(null)
+const taskOptions = ref<Array<{ label: string, value: number }>>([])
 const taskId = ref<number | undefined>(undefined)
 const onlyApproved = ref(false)
 const exportName = ref('')
+/** 服务端支持分卷（`splitSizeMb`），界面暂时只开放"不分卷" */
 const splitSizeMb = ref(0)
 const desensitize = ref(false)
 const precheck = ref<ExportPrecheck | null>(null)
@@ -297,12 +89,11 @@ const quickActions = computed(
   () => (precheck.value?.quickActions ?? []).map((k) => QUICK_ACTION_TEXT[k] ?? k)
 )
 
-const pagination = computed(() => ({
-  current: query.pageNum,
+/** `remote` 模式：每页条数改了必须重新取数，否则"分页器说 50、表里 20" */
+const pagination = computed(() => listPagination({
+  page: query.pageNum,
   pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
+  itemCount: total.value
 }))
 
 function fmt(v: string | null) {
@@ -313,11 +104,109 @@ function mb(bytes: number | null) {
   return bytes ? Math.round(bytes / 1024 / 1024 * 10) / 10 : 0
 }
 
+const blockingColumns: DataTableColumns<ExportBlocking> = [
+  {
+    title: '类型',
+    key: 'type',
+    width: 110,
+    align: 'center',
+    render: (row) => {
+      const meta = tagOf(BLOCKING_TYPE, row.type, row.type)
+      return h(NTag, { size: 'small', bordered: false, type: meta.type }, { default: () => meta.text })
+    }
+  },
+  {
+    title: '问题',
+    key: 'title',
+    render: (row) => h('div', [
+      h('div', row.title),
+      row.action ? h('div', { class: 'exp__hint' }, row.action) : null
+    ])
+  }
+]
+
+const recordColumns = computed<DataTableColumns<ExportTaskVO>>(() => [
+  {
+    title: '包名 / 任务',
+    key: 'exportName',
+    width: 260,
+    ellipsis: { tooltip: true },
+    render: (row) => h('div', [
+      h('div', { class: 'exp__name' }, row.exportName),
+      h('div', { class: 'exp__hint' }, row.taskName || '—')
+    ])
+  },
+  {
+    title: '状态',
+    key: 'statusText',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const meta = tagOf(EXPORT_STATUS, row.status)
+      return h(NTag, { size: 'small', bordered: false, type: meta.type }, { default: () => row.statusText || meta.text })
+    }
+  },
+  {
+    title: '进度',
+    key: 'progress',
+    width: 130,
+    render: (row) => h('div', { class: 'exp__progress' }, [
+      h('div', { class: 'exp__progress-bar' }, [
+        h('div', {
+          class: 'exp__progress-inner',
+          style: `width:${Math.max(0, Math.min(100, row.progress ?? 0))}%;background:${row.status === 3 ? '#d54941' : (row.status === 2 ? '#00a870' : '#0052d9')}`
+        })
+      ]),
+      h('span', { class: 'exp__hint' }, `${row.progress ?? 0}%`)
+    ])
+  },
+  {
+    title: '人数 / 包体',
+    key: 'fileCount',
+    width: 120,
+    render: (row) => h('div', [
+      h('div', `${row.fileCount ?? '—'} 人`),
+      h('div', { class: 'exp__hint' }, `${row.stats?.finalSizeMb ?? '—'} MB`)
+    ])
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 150,
+    render: (row) => fmt(row.createTime)
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 150,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => h(NSpace, { size: 12, justify: 'center' }, {
+      default: () => [
+        h(NButton, { text: true, size: 'small', onClick: () => onOpen(row) }, { default: () => '详情' }),
+        row.status === 2 && row.resultFiles?.length
+          ? h(NButton, {
+              text: true,
+              size: 'small',
+              type: 'primary',
+              // 下载是"取 blob 再触发保存"，期间给按钮一个 loading，避免被连点
+              loading: downloading.value === row.id,
+              onClick: () => onQuickDownload(row)
+            }, { default: () => '下载' })
+          : null,
+        row.status === 3
+          ? h(NButton, { text: true, size: 'small', type: 'warning', onClick: () => onOpen(row) }, { default: () => '看原因' })
+          : null
+      ]
+    })
+  }
+])
+
 async function loadTasks() {
   taskLoading.value = true
   try {
-    const res = await getTaskList({ pageNum: 1, pageSize: 200 })
-    taskOptions.value = (res.data?.list ?? []).map((t) => ({ id: t.id, taskName: t.taskName }))
+    const page = await getTaskList({ pageNum: 1, pageSize: 200 })
+    taskOptions.value = (page?.list ?? []).map((t) => ({ label: t.taskName, value: t.id }))
   } finally {
     taskLoading.value = false
   }
@@ -335,13 +224,13 @@ async function reload() {
       precheckExport(taskId.value, scope),
       previewExportTree(taskId.value, scope)
     ])
-    precheck.value = pre.data ?? null
-    tree.value = tr.data ?? null
+    precheck.value = pre ?? null
+    tree.value = tr ?? null
     checkedAt.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
     if (!exportName.value) {
-      const t = taskOptions.value.find((x) => x.id === taskId.value)
+      const t = taskOptions.value.find((x) => x.value === taskId.value)
       if (t) {
-        exportName.value = t.taskName.slice(0, 60)
+        exportName.value = t.label.slice(0, 60)
       }
     }
   } finally {
@@ -354,20 +243,20 @@ function onTaskChange() {
   precheck.value = null
   tree.value = null
   query.pageNum = 1
-  reload()
-  loadRecords()
+  void reload()
+  void loadRecords()
 }
 
 async function loadRecords() {
   listLoading.value = true
   try {
-    const res = await getExportList({
+    const page = await getExportList({
       taskId: taskId.value,
       pageNum: query.pageNum,
       pageSize: query.pageSize
     })
-    records.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
+    records.value = page?.list ?? []
+    total.value = page?.total ?? 0
   } finally {
     listLoading.value = false
   }
@@ -375,12 +264,18 @@ async function loadRecords() {
 
 function onPageChange(page: number) {
   query.pageNum = page
-  loadRecords()
+  void loadRecords()
+}
+
+function onPageSizeChange(size: number) {
+  query.pageSize = size
+  query.pageNum = 1
+  void loadRecords()
 }
 
 async function onCreate() {
   if (!taskId.value || !exportName.value.trim()) {
-    Message.warning('请填写包名')
+    message.warning('请填写包名')
     return
   }
   creating.value = true
@@ -394,20 +289,20 @@ async function onCreate() {
       format: 'ZIP',
       generateSummaryExcel: true
     })
-    Message.success('已开始打包，完成后在这里下载')
+    message.success('已开始打包，完成后在这里下载')
     await loadRecords()
-    if (res.data?.exportId) {
-      detailRef.value?.open(res.data.exportId)
+    if (res?.exportId) {
+      detailRef.value?.open(res.exportId)
     }
   } catch (e) {
-    // 40035：前置检查不过。**不带 force**，所以这里只能把清单摊开
-    const err = e as Error & { bizCode?: number, bizData?: unknown }
+    // 40035：前置检查不过。**不带 force**，所以这里只能把清单摊开，没有"仍然导出"。
+    const err = e as BizError
     if (err.bizCode === 40035 && err.bizData) {
       precheck.value = err.bizData as ExportPrecheck
-      Modal.warning({
+      dialog.warning({
         title: '还不能导出',
         content: `${err.message}\n\n左侧清单列出了卡住的人与项，处理完再点「重新检查」。`,
-        hideCancel: true
+        positiveText: '知道了'
       })
     }
   } finally {
@@ -419,12 +314,16 @@ function onOpen(row: ExportTaskVO) {
   detailRef.value?.open(row.id)
 }
 
+/** 下载走 `downloadExportFile`（带 token 取 blob）—— `window.open` 会 401 */
 async function onQuickDownload(row: ExportTaskVO) {
+  downloading.value = row.id
   try {
     await downloadExportFile(row.id, 0)
-    Message.success('已开始下载')
+    message.success('已开始下载')
   } catch (e) {
-    Message.error((e as Error).message || '下载失败')
+    message.error((e as Error).message || '下载失败')
+  } finally {
+    downloading.value = null
   }
 }
 
@@ -434,103 +333,367 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss" scoped>
-.exp {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+<template>
+  <div class="page-plain">
+    <NCard :bordered="false" title="导出中心">
+      <template #header-extra>
+        <span class="toolbar__hint">
+          交付物：ZIP 包 + 根目录汇总表，目录结构按机构规范生成
+        </span>
+      </template>
 
-  &__task {
-    width: 220px;
-  }
+      <!--
+        工具条：所有控件**统一默认尺寸**，别混 `size="small"` ——
+        28px 的白底小控件贴在白底卡片上几乎看不出是控件（客户反馈过"按钮不明显"）。
+      -->
+      <div class="toolbar">
+        <NSpace align="center" :size="8">
+          <NSelect
+            v-model:value="taskId"
+            class="exp__task"
+            placeholder="选择要导出的任务"
+            :loading="taskLoading"
+            :options="taskOptions"
+            @update:value="onTaskChange"
+          />
+          <NRadioGroup v-model:value="onlyApproved" :disabled="!taskId" @update:value="reload">
+            <NRadioButton :value="false">全部已提交</NRadioButton>
+            <NRadioButton :value="true">仅终审通过</NRadioButton>
+          </NRadioGroup>
+          <NButton :disabled="!taskId" @click="reload">
+            <template #icon>
+              <AppIcon name="refresh" :size="16" />
+            </template>
+            重新检查
+          </NButton>
+        </NSpace>
+        <span class="toolbar__hint">
+          {{ checkedAt ? `上次检查：${checkedAt}` : '选择任务后自动检查' }}
+        </span>
+      </div>
 
-  &__alert {
-    margin-bottom: 10px;
-  }
+      <NEmpty v-if="!taskId" description="先选一个任务 —— 导出是按任务进行的" />
 
-  &__action {
-    font-size: 12px;
-  }
+      <NSpin v-else :show="checking">
+        <!--
+          ⚠️ 这里是**铁律**的落点：canExport=false 时按钮直接禁用，**不弹警告放行**。
+          清单要具体到"谁 + 哪一项 + 怎么办"，否则管理员只能去几百份材料里逐个翻。
+        -->
+        <NAlert v-if="precheck && !precheck.canExport" type="error" class="exp__alert" title="前置检查未通过，无法导出">
+          {{ precheck.blocking.length }} 项不合格。这是铁律 —— 不合格的文件不允许进入汇总包。
+          <div v-for="(a, i) in quickActions" :key="i" class="exp__action">· {{ a }}</div>
+        </NAlert>
+        <NAlert v-else-if="precheck" type="success" :show-icon="false" class="exp__alert">
+          检查通过：<strong>{{ precheck.candidateCount }}</strong> 人、
+          <strong>{{ precheck.fileCount }}</strong> 个文件（原始 {{ mb(precheck.rawSizeBytes) }} MB）可以打包。
+        </NAlert>
 
-  &__card {
-    padding: 12px;
-    margin-bottom: 12px;
-    background: var(--color-fill-1);
-    border-radius: 4px;
-  }
+        <NAlert v-for="(w, i) in precheck?.warnings ?? []" :key="`w${i}`" type="warning" :show-icon="false" class="exp__alert">
+          {{ w }}
+        </NAlert>
 
-  &__card-head {
-    display: flex;
-    gap: 8px;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-size: 13px;
-    font-weight: 600;
-  }
+        <!--
+          左右两栏：左 = 导出设置 + 卡住的地方，右 = 目录结构预览。
+          ⚠️ 卡片内部**不再套卡片**：设置项与目录树用浅灰底 + 弱描边的小格子（`.exp__block`），
+             表格直接落在卡片白底上（表头自带浅灰色带，套进灰格子会与表头糊在一起）。
+        -->
+        <div class="exp__row">
+          <div class="exp__col">
+            <div class="exp__sec">
+              <div class="section-title">
+                导出设置
+              </div>
+              <div class="exp__block">
+                <!-- 不套 n-form：这些是"输入即生效"的设置项，没有校验，加一层 form 只是多一层绑定 -->
+                <div class="exp__field">
+                  <div class="exp__label">包名（会写进 ZIP 文件名）</div>
+                  <NInput v-model:value="exportName" placeholder="如 202609机电认定-24中技数控1班" :maxlength="60" show-count />
+                </div>
+                <div class="exp__field">
+                  <div class="exp__label">分卷大小</div>
+                  <NSelect v-model:value="splitSizeMb" :options="[{ label: '不分卷', value: 0 }]" />
+                  <div class="toolbar__hint exp__field-hint">服务端支持分卷（超过阈值会切成 part1/part2…，每卷都能单独解压），界面暂未开放选择</div>
+                </div>
+                <div class="exp__field">
+                  <NCheckbox v-model:checked="desensitize">证件号脱敏导出</NCheckbox>
+                  <div class="toolbar__hint exp__field-hint">
+                    名册里存的本来就是脱敏值，这个开关暂时不改变导出内容（明文导出需二次确认，未开放）
+                  </div>
+                </div>
+              </div>
+            </div>
 
-  &__tree {
-    max-height: 320px;
-    overflow: auto;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 12px;
-    line-height: 1.9;
-  }
+            <!-- 阻断清单：逐条说清"谁 + 哪一项 + 怎么办" -->
+            <div v-if="precheck && precheck.blocking.length" class="exp__sec">
+              <div class="section-title">
+                卡住的地方（{{ precheck.blocking.length }}）
+                <span class="section-title__note">
+                  还没审完 {{ precheck.summary.unapproved }} · 缺材料 {{ precheck.summary.missing }} ·
+                  体积超标 {{ precheck.summary.sizeExceeded }} · 名字未规范 {{ precheck.summary.nameInvalid }}
+                </span>
+              </div>
+              <NDataTable
+                size="small"
+                :columns="blockingColumns"
+                :data="precheck.blocking"
+                :bordered="true"
+                :row-key="(row: ExportBlocking) => `${row.type}-${row.rosterId}-${row.fileId}-${row.title}`"
+                :pagination="{ pageSize: 8 }"
+                :max-height="240"
+                :scroll-x="520"
+              />
+            </div>
+          </div>
 
-  &__tree-root {
-    font-weight: 600;
-    color: var(--color-text-1);
-  }
+          <div class="exp__col">
+            <div class="exp__sec">
+              <div class="section-title">
+                目录结构预览
+                <span class="section-title__note">
+                  {{ tree ? `${tree.personCount} 人 × 各类材料 = ${tree.fileCount} 个文件` : '' }}
+                </span>
+              </div>
+              <div class="exp__block exp__block--tree">
+                <!--
+                  目录树用「半角制表符 + CSS 缩进」，**不用全角空格**：
+                  全角空格（U+3000）会被 eslint 的 no-irregular-whitespace 拦下，
+                  而靠空白对齐的写法在 `--fix` 之后必然被重排。缩进交给 padding-left。
+                -->
+                <div v-if="tree" class="exp__tree">
+                  <div class="exp__tree-root">{{ tree.root }}/</div>
+                  <div v-for="c in tree.children" :key="c.path" class="exp__tree-org">
+                    <div class="exp__tree-dir">
+                      <span class="exp__br">|-- </span>{{ c.name }}/
+                      <span class="toolbar__hint">{{ c.studentCount }} 人</span>
+                    </div>
+                    <div v-for="m in c.children" :key="m.path" class="exp__tree-mat">
+                      <div class="exp__tree-dir2">
+                        <span class="exp__br">|-- </span>{{ m.name }}/
+                        <span class="toolbar__hint">{{ m.children.length }} 个</span>
+                      </div>
+                      <div v-for="f in m.children.slice(0, 2)" :key="f.path" class="exp__tree-file">
+                        <span class="exp__br">`-- </span>{{ f.name }}
+                        <span class="toolbar__hint">{{ f.sizeKb }}KB</span>
+                      </div>
+                      <div v-if="m.children.length > 2" class="exp__tree-file toolbar__hint">
+                        <span class="exp__br">`-- </span>…（其余 {{ m.children.length - 2 }} 个）
+                      </div>
+                    </div>
+                  </div>
+                  <div class="exp__tree-file">
+                    <span class="exp__br">`-- </span>考生线下报名信息导入模板（汇总）.xlsx
+                  </div>
+                </div>
+                <NEmpty v-else description="没有可预览的内容" />
+              </div>
+              <div class="toolbar__hint exp__tree-note">
+                预览与真正打包<strong>共用同一份构建代码</strong>，所以这里看到的就是解压后的样子
+                （每个材料目录最多列 2 个文件，避免几百人时刷屏）。
+              </div>
+            </div>
+          </div>
+        </div>
 
-  &__tree-dir {
-    padding-left: 0;
-    color: rgb(var(--arcoblue-6));
-  }
+        <!-- 底部动作条：按钮的可用性就是铁律的落点（主操作默认尺寸、type=primary） -->
+        <div class="exp__footer">
+          <span class="toolbar__hint">
+            导出是后台任务，完成后在这里下载；产物保留 7 天
+          </span>
+          <NTooltip :disabled="canExport" trigger="hover">
+            <template #trigger>
+              <span class="exp__tt">
+                <NButton type="primary" :disabled="!canExport" :loading="creating" @click="onCreate">
+                  <template #icon>
+                    <AppIcon name="download" :size="16" />
+                  </template>
+                  开始导出
+                </NButton>
+              </span>
+            </template>
+            {{ blockReason }}
+          </NTooltip>
+        </div>
+      </NSpin>
+    </NCard>
 
-  &__tree-dir2 {
-    padding-left: 20px;
-    color: rgb(var(--arcoblue-5));
-  }
+    <!--
+      导出记录：标题交给**卡片头**（浅灰色带），不要再在卡片体里摆一个"像卡片头的 div"——
+      那样看起来就是"外层卡片里又套了一张卡片"。下载说明并进卡片头的灰色小字。
+    -->
+    <NCard :bordered="false" title="导出记录">
+      <template #header-extra>
+        <span class="toolbar__hint">
+          共 {{ total }} 个包 · 下载需要登录态（页面走"带 token 取文件流"，直接打开链接会 401）
+        </span>
+      </template>
+      <!--
+        导出记录表：这页是"内容自然增长"的普通页（page-plain），父级没有确定高度，
+        所以纵向用 `:max-height="320"` 而不是 `flex-height`（后者要求父级高度确定）。
+      -->
+      <NDataTable
+        remote
+        size="small"
+        :columns="recordColumns"
+        :data="records"
+        :loading="listLoading"
+        :row-key="(row: ExportTaskVO) => row.id"
+        :pagination="pagination"
+        :max-height="320"
+        :scroll-x="900"
+        @update:page="onPageChange"
+        @update:page-size="onPageSizeChange"
+      />
+    </NCard>
 
-  &__tree-file {
-    padding-left: 40px;
-    color: var(--color-text-2);
-  }
+    <ExportDetailDrawer ref="detailRef" @changed="loadRecords" />
+  </div>
+</template>
 
-  /** 制表符（├─ └─）：缩进靠父级的 padding，这里只管样式 */
-  &__br {
-    color: var(--color-text-3);
-    user-select: none;
-  }
+<style scoped>
+/**
+ * ⚠️ `.exp__hint` / `.exp__name` / `.exp__progress*` 都出现在**渲染函数**里（表格列）；
+ *    渲染函数生成的元素不带 `data-v-*`，写成普通 scoped 选择器**匹配不到**
+ *    （不报错，只是这几处 12px 灰字一直没生效）。所以统一用 `:deep()`。
+ */
+:deep(.exp__hint) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
 
-  &__tree-note {
-    margin-top: 8px;
-    line-height: 1.7;
-  }
+.exp__task {
+  width: 220px;
+}
 
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 12px;
-    margin-top: 6px;
-    border-top: 1px solid var(--color-border-1);
-  }
+.exp__alert {
+  margin-bottom: 12px;
+}
 
-  &__name {
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
+.exp__action {
+  font-size: 12px;
+}
 
-  &__field {
-    margin-bottom: 12px;
-  }
+/* 左右两栏：窄屏（<760px 可用宽）自动落成上下两行 */
+.exp__row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 20px;
+  align-items: start;
+}
 
-  &__label {
-    margin-bottom: 4px;
-    font-size: 13px;
-    color: var(--color-text-2);
-  }
+.exp__col {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+
+.exp__sec {
+  min-width: 0;
+}
+
+/**
+ * 卡片**内部**的小格子：浅灰底 + 弱描边。
+ * 不要在这里再套一个 `NCard` —— 白卡片套白卡片会糊成一片（外层卡片底部那条"灰带"就是这么来的）。
+ */
+.exp__block {
+  padding: 14px;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.exp__block--tree {
+  padding: 12px 14px;
+}
+
+.exp__tree {
+  max-height: 320px;
+  overflow: auto;
+  font-family: ui-monospace, sfmono-regular, menlo, monospace;
+  font-size: 12px;
+  line-height: 1.9;
+}
+
+.exp__tree-root {
+  font-weight: 600;
+  color: var(--xt-text);
+}
+
+.exp__tree-dir {
+  color: #0052d9;
+}
+
+.exp__tree-dir2 {
+  padding-left: 20px;
+  color: #366ef4;
+}
+
+.exp__tree-file {
+  padding-left: 40px;
+  color: #4b4b56;
+}
+
+/* 制表符（|-- `--）：缩进靠父级的 padding，这里只管样式 */
+.exp__br {
+  color: var(--xt-text-3);
+  user-select: none;
+}
+
+.exp__tree-note {
+  margin-top: 12px;
+  line-height: 1.7;
+}
+
+.exp__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  margin-top: 20px;
+  border-top: 1px solid var(--xt-card-border-weak);
+}
+
+/* 禁用状态的按钮不触发鼠标事件，用 span 兜住才能显示 tooltip */
+.exp__tt {
+  display: inline-flex;
+}
+
+:deep(.exp__name) {
+  font-weight: 500;
+  color: var(--xt-text);
+}
+
+.exp__field:not(:last-child) {
+  margin-bottom: 14px;
+}
+
+.exp__label {
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: var(--xt-text-2);
+}
+
+.exp__field-hint {
+  margin-top: 6px;
+  line-height: 1.7;
+}
+
+:deep(.exp__progress) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:deep(.exp__progress-bar) {
+  flex: 1;
+  height: 6px;
+  overflow: hidden;
+  background: #eef1f5;
+  border-radius: 3px;
+}
+
+:deep(.exp__progress-inner) {
+  height: 100%;
+  transition: width 0.2s;
 }
 </style>
diff --git a/frontend-pc/src/views/join/JoinAuditModal.vue b/frontend-pc/src/views/join/JoinAuditModal.vue
deleted file mode 100644
index 7a731c3..0000000
--- a/frontend-pc/src/views/join/JoinAuditModal.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <a-modal v-model:visible="visible" :title="mode === 'approve' ? '通过加入申请' : '驳回加入申请'"
-    :width="560" :mask-closable="false" :ok-loading="saving"
-    :ok-text="mode === 'approve' ? '确认通过' : '确认驳回'" @before-ok="onOk" @close="close">
-    <a-alert v-if="row" type="normal" :show-icon="false" class="jd__info">
-      <template #title>
-        <strong>{{ row.realName }}</strong> · {{ row.idCardMask }}
-        <template v-if="row.orgHint"> · 自述班级「{{ row.orgHint }}」</template>
-      </template>
-      <template #default>
-        <div v-if="row.reason" class="jd__muted">申请说明：{{ row.reason }}</div>
-        <div v-if="row.duplicateHint" class="jd__dup">
-          提示：该证件号在「{{ row.duplicateHint.taskName }}」的名册里出现过
-          （登记姓名 {{ row.duplicateHint.realName }}）—— 建议核对是不是同一个人。
-        </div>
-      </template>
-    </a-alert>
-
-    <!-- ── 通过 ── -->
-    <template v-if="mode === 'approve'">
-      <a-form layout="vertical" size="small" :model="approveForm">
-        <a-form-item label="加入哪个班级" required>
-          <a-select v-model="approveForm.orgId" placeholder="选择班级">
-            <a-option v-for="c in classOptions" :key="c.id" :value="c.id">
-              {{ c.label }}
-            </a-option>
-          </a-select>
-          <template #extra>
-            <span class="jd__muted">
-              学生的自述班级只作参考 —— 班级写错会让他的材料挂到别的班，
-              将来导出时目录也会分错
-            </span>
-          </template>
-        </a-form-item>
-        <a-form-item label="姓名（如与证件不符可修正）">
-          <a-input v-model="approveForm.realName" />
-        </a-form-item>
-      </a-form>
-
-      <a-alert type="info" :show-icon="false" class="jd__tip">
-        <template #title>
-          通过后：系统会把他<strong>直接加入名单并绑定</strong>，
-          他返回重新核验即可开始填报，不用再输一遍姓名与证件号。
-        </template>
-        <template #default>
-          <!-- 通知没做：如实说，不假装 -->
-          <span class="jd__muted">
-            ⚠️ 通知渠道还没做，<strong>通过之后要人工告知学生</strong>（群里说一声）。
-          </span>
-        </template>
-      </a-alert>
-    </template>
-
-    <!-- ── 驳回 ── -->
-    <template v-else>
-      <a-form layout="vertical" size="small" :model="rejectForm">
-        <a-form-item label="快捷原因">
-          <a-select v-model="rejectForm.reasonCode" placeholder="选择或直接在下面写" allow-clear>
-            <a-option v-for="r in REJECT_REASON_CODES" :key="r.code" :value="r.code">
-              {{ r.label }}
-            </a-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="textLabel" :validate-status="textError ? 'error' : undefined"
-          :help="textError">
-          <a-textarea v-model="rejectForm.reason" :rows="3" :max-length="200" show-word-limit
-            placeholder="如：名单里没有你的报名记录，请联系班主任核对报名信息" />
-        </a-form-item>
-      </a-form>
-      <a-alert type="warning" :show-icon="false" class="jd__tip">
-        <template #title>
-          这段说明会<strong>原样显示给学生</strong>，所以要说清"哪里不对、该怎么办"，
-          不要只写"审核不通过"。
-        </template>
-      </a-alert>
-    </template>
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import type { JoinAdminItem } from '@/apis/xt/join-request'
-import { Message } from '@arco-design/web-vue'
-import {
-  approveJoinRequest,
-  JOIN_ERROR_HINT,
-  REJECT_REASON_CODES,
-  rejectJoinRequest
-} from '@/apis/xt/join-request'
-import { getOrgTree } from '@/apis/xt/org'
-
-/**
- * 加入申请审批弹窗（通过 / 驳回两种模式）。
- *
- * ## 为什么通过时要**手选班级**
- *
- * 学生的"自述班级"只是他自己打的字（可能写成"数控2班"、"24数控二班"…），
- * 而班级决定了：他的材料归谁审、导出时落在哪个目录。**让它自动猜**，
- * 猜错的表现是"材料挂到了别的班"，而导出包打开时才会发现。
- * 服务端在"自述班级匹配到唯一组织"时会自动选上，匹配不上或撞名时必须手选。
- *
- * ## 驳回必须填原因
- *
- * 原因会原样给学生看 —— 这也是学生唯一能知道"哪里不对"的来源。
- * 只写"审核不通过"等于让他反复提交。
- */
-defineOptions({ name: 'JoinAuditModal' })
-
-const emit = defineEmits<{
-  (e: 'done'): void
-}>()
-
-const visible = ref(false)
-const saving = ref(false)
-const mode = ref<'approve' | 'reject'>('approve')
-const row = ref<JoinAdminItem | null>(null)
-const classOptions = ref<Array<{ id: number, label: string }>>([])
-const textError = ref('')
-
-const approveForm = reactive({ orgId: undefined as number | undefined, realName: '' })
-const rejectForm = reactive({ reasonCode: '', reason: '' })
-
-const textLabel = computed(() =>
-  rejectForm.reasonCode && rejectForm.reasonCode !== 'OTHER'
-    ? '补充说明（可选）'
-    : '驳回原因（必填）')
-
-async function loadClasses() {
-  if (classOptions.value.length) {
-    return
-  }
-  const res = await getOrgTree()
-  const out: Array<{ id: number, label: string }> = []
-  const walk = (nodes: Array<Record<string, unknown>>) => {
-    for (const n of nodes || []) {
-      if (n.orgType === 3) {
-        out.push({ id: Number(n.id), label: String(n.orgName) })
-      }
-      walk((n.children as Array<Record<string, unknown>>) || [])
-    }
-  }
-  walk((res.data as unknown as Array<Record<string, unknown>>) || [])
-  classOptions.value = out
-}
-
-async function openApprove(r: JoinAdminItem) {
-  mode.value = 'approve'
-  row.value = r
-  approveForm.orgId = undefined
-  approveForm.realName = r.realName
-  textError.value = ''
-  visible.value = true
-  try {
-    await loadClasses()
-    // 自述班级能唯一匹配上就预选（服务端也会做同样的匹配，这里只是少一次点击）
-    const hit = classOptions.value.filter((c) => r.orgHint && c.label === r.orgHint)
-    if (hit.length === 1) {
-      approveForm.orgId = hit[0].id
-    }
-  } catch {
-    // 组织树取不到不阻断：他可以不选，服务端会按自述班级再试一次
-  }
-}
-
-function openReject(r: JoinAdminItem) {
-  mode.value = 'reject'
-  row.value = r
-  rejectForm.reasonCode = ''
-  rejectForm.reason = ''
-  textError.value = ''
-  visible.value = true
-}
-
-function close() {
-  visible.value = false
-}
-
-async function onOk() {
-  if (!row.value) {
-    return false
-  }
-  saving.value = true
-  try {
-    if (mode.value === 'approve') {
-      if (!approveForm.orgId) {
-        Message.warning('请选择要加入的班级')
-        return false
-      }
-      const res = await approveJoinRequest(row.value.requestId, {
-        orgId: approveForm.orgId,
-        realName: approveForm.realName.trim() || undefined
-      })
-      const d = res.data
-      // 通知没发出去是**事实**，要说出来（不能让人以为学生已经收到通知了）
-      Message.success({
-        content: `已通过并加入名单。${d?.canFillNow ? '该学生重新核验即可填报。' : ''}${
-          d?.notifySent === false ? '（通知未发出，请人工告知学生）' : ''}`,
-        duration: 5000
-      })
-    } else {
-      const needsText = !rejectForm.reasonCode || rejectForm.reasonCode === 'OTHER'
-      if (needsText && !rejectForm.reason.trim()) {
-        textError.value = '请写清驳回原因 —— 学生只能从这句话知道哪里不对'
-        return false
-      }
-      await rejectJoinRequest(row.value.requestId, {
-        reason: rejectForm.reason.trim() || '信息与报名资料不符',
-        reasonCode: rejectForm.reasonCode || undefined
-      })
-      Message.success({
-        content: '已驳回。（通知未发出，请人工告知学生原因）',
-        duration: 5000
-      })
-    }
-    visible.value = false
-    emit('done')
-    return true
-  } catch (e) {
-    const err = e as Error & { bizCode?: number }
-    const hint = err.bizCode ? JOIN_ERROR_HINT[err.bizCode] : ''
-    Message.error(hint ? `${err.message}（${hint}）` : err.message)
-    return false
-  } finally {
-    saving.value = false
-  }
-}
-
-defineExpose({ openApprove, openReject })
-</script>
-
-<style lang="scss" scoped>
-.jd {
-  &__info {
-    margin-bottom: 12px;
-  }
-
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-    line-height: 1.7;
-  }
-
-  &__dup {
-    margin-top: 6px;
-    font-size: 12px;
-    color: rgb(var(--orange-6));
-    line-height: 1.7;
-  }
-
-  &__tip {
-    margin-top: 4px;
-  }
-}
-</style>
diff --git a/frontend-pc/src/views/join/index.vue b/frontend-pc/src/views/join/index.vue
deleted file mode 100644
index 42b2eb3..0000000
--- a/frontend-pc/src/views/join/index.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>加入申请</template>
-      <template #extra>
-        <span class="join__hint">
-          门禁没匹配上的人在这里申请加入；通过后他重新核验即可填报
-        </span>
-      </template>
-
-      <a-alert v-if="alert" type="warning" class="join__alert">
-        <template #title>{{ alert.text }}</template>
-      </a-alert>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-button v-for="t in statusTabs" :key="String(t.value)"
-            :type="statusFilter === t.value ? 'primary' : 'outline'" size="small"
-            @click="setStatus(t.value)">
-            {{ t.label }}
-            <span v-if="t.count !== undefined" class="join__count">{{ t.count }}</span>
-          </a-button>
-        </a-space>
-
-        <a-space wrap>
-          <a-select v-model="query.taskId" placeholder="全部任务" allow-clear size="small"
-            class="join__task" :loading="taskLoading" @change="search">
-            <a-option v-for="t in taskOptions" :key="t.id" :value="t.id">{{ t.taskName }}</a-option>
-          </a-select>
-          <a-input-search v-model="query.keyword" placeholder="搜索姓名" allow-clear
-            class="join__search" @search="search" @clear="search" />
-          <a-button size="small" @click="load">
-            <template #icon><IconRefresh /></template>
-            刷新
-          </a-button>
-        </a-space>
-      </div>
-
-      <!--
-        ⚠️ 这一屏**没有批量通过、没有全选**（契约 §8.7.5 的取舍）：
-        放错一个人进名单 = 让一个不属于这批的人拿到认定资格，代价极高。
-        所以只有逐条的通过/驳回，且驳回必须填原因。
-      -->
-      <a-table :data="list" :loading="loading" row-key="requestId" :pagination="pagination"
-        :scroll="{ x: 1000 }" @page-change="onPageChange">
-        <template #columns>
-          <a-table-column title="申请人" :width="170">
-            <template #cell="{ record }">
-              <div class="join__name">{{ record.realName }}</div>
-              <div class="join__muted">{{ record.idCardMask }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="手机号" :width="130">
-            <template #cell="{ record }">
-              <span class="join__muted">{{ record.phoneMask || '—' }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="自述班级 / 申请说明" :width="220">
-            <template #cell="{ record }">
-              <div>{{ record.orgHint || '—' }}</div>
-              <div class="join__muted">{{ record.reason || '（未填写说明）' }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="任务" :width="170" ellipsis tooltip>
-            <template #cell="{ record }">
-              <div>{{ record.taskName || '—' }}</div>
-              <div v-if="record.duplicateHint" class="join__dup">
-                该证件号在「{{ record.duplicateHint.taskName }}」出现过
-              </div>
-            </template>
-          </a-table-column>
-          <a-table-column title="状态 / 等待" :width="120" align="center">
-            <template #cell="{ record }">
-              <a-tag :color="JOIN_STATUS[record.status]?.color ?? 'gray'" size="small">
-                {{ record.statusText || JOIN_STATUS[record.status]?.text }}
-              </a-tag>
-              <div class="join__muted">{{ fmtWait(record.waitHours) }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="提交时间" :width="140">
-            <template #cell="{ record }">
-              <span class="join__muted">{{ fmt(record.createTime) }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="操作" :width="150" align="center" fixed="right">
-            <template #cell="{ record }">
-              <a-space v-if="record.status === 0" size="mini">
-                <a-link @click="onApprove(record)">通过</a-link>
-                <a-link status="danger" @click="onReject(record)">驳回</a-link>
-              </a-space>
-              <span v-else class="join__muted">
-                {{ record.rosterId ? `已入册 #${record.rosterId}` : '—' }}
-              </span>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-
-    <JoinAuditModal ref="modalRef" @done="load" />
-  </GiPageLayout>
-</template>
-
-<script setup lang="ts">
-import type { JoinAdminItem } from '@/apis/xt/join-request'
-import { IconRefresh } from '@arco-design/web-vue/es/icon'
-import { getJoinRequests, JOIN_STATUS } from '@/apis/xt/join-request'
-import { getTaskList } from '@/apis/xt/task'
-import JoinAuditModal from './JoinAuditModal.vue'
-
-/**
- * 加入申请审批（FR-509，原型 STEP 11）。
- *
- * ## 为什么没有批量通过
- *
- * 契约 §8.7.5 明确取舍：批量**通过**要求管理员先逐条看过，
- * 而**驳回必须逐条填原因**；且批量通过**不提供"全选"快捷键**。
- * 理由与"批量通过只带绿色项"同源 —— **身份认定环节的误操作代价极高**：
- * 放错一个人进名单，等于让一个不属于这批的人拿到认定资格，而撤销只能删名册项。
- * 所以这一屏干脆不做批量，只留逐条动作。
- *
- * ## 两个信息是用来"帮他判断"的
- *
- * - `waitHours`：等最久的排最前（列表本来就按提交时间正序）
- * - `duplicateHint`：这个证件号在**别的任务**的名册里出现过 ——
- *   这是判断"是不是本校学生"的唯一线索，比对着姓名猜可靠
- */
-defineOptions({ name: 'Join' })
-
-const loading = ref(false)
-const taskLoading = ref(false)
-const list = ref<JoinAdminItem[]>([])
-const total = ref(0)
-const counts = reactive({ pending: 0, approved: 0, rejected: 0 })
-const alert = ref<{ level: number, text: string } | null>(null)
-const statusFilter = ref<number>(0)
-const taskOptions = ref<Array<{ id: number, taskName: string }>>([])
-
-const query = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  keyword: '',
-  taskId: undefined as number | undefined
-})
-
-const modalRef = useTemplateRef('modalRef')
-
-const statusTabs = computed(() => [
-  { label: '待审核', value: 0, count: counts.pending },
-  { label: '已通过', value: 1, count: counts.approved },
-  { label: '已驳回', value: 2, count: counts.rejected }
-])
-
-const pagination = computed(() => ({
-  current: query.pageNum,
-  pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
-}))
-
-function fmt(v: string | null) {
-  return v ? v.replace('T', ' ').slice(0, 16) : '—'
-}
-
-function fmtWait(h: number | null) {
-  if (h === null || h === undefined) {
-    return '—'
-  }
-  return h < 24 ? `已等 ${h} 小时` : `已等 ${Math.floor(h / 24)} 天`
-}
-
-async function load() {
-  loading.value = true
-  try {
-    const res = await getJoinRequests({
-      taskId: query.taskId,
-      status: statusFilter.value,
-      keyword: query.keyword.trim() || undefined,
-      pageNum: query.pageNum,
-      pageSize: query.pageSize
-    })
-    const d = res.data
-    list.value = d?.list ?? []
-    total.value = d?.total ?? 0
-    Object.assign(counts, d?.counts ?? { pending: 0, approved: 0, rejected: 0 })
-    alert.value = d?.alert ?? null
-  } finally {
-    loading.value = false
-  }
-}
-
-async function loadTasks() {
-  taskLoading.value = true
-  try {
-    const res = await getTaskList({ pageNum: 1, pageSize: 200 })
-    taskOptions.value = (res.data?.list ?? []).map((t) => ({ id: t.id, taskName: t.taskName }))
-  } finally {
-    taskLoading.value = false
-  }
-}
-
-function search() {
-  query.pageNum = 1
-  load()
-}
-
-function setStatus(v: number) {
-  statusFilter.value = v
-  search()
-}
-
-function onPageChange(page: number) {
-  query.pageNum = page
-  load()
-}
-
-function onApprove(row: JoinAdminItem) {
-  modalRef.value?.openApprove(row)
-}
-
-function onReject(row: JoinAdminItem) {
-  modalRef.value?.openReject(row)
-}
-
-onMounted(() => {
-  load()
-  loadTasks()
-})
-</script>
-
-<style lang="scss" scoped>
-.join {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
-
-  &__alert {
-    margin-bottom: 12px;
-  }
-
-  &__count {
-    margin-left: 4px;
-    font-size: 12px;
-    opacity: 0.75;
-  }
-
-  &__task {
-    width: 180px;
-  }
-
-  &__search {
-    width: 180px;
-  }
-
-  &__name {
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
-
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
-
-  &__dup {
-    font-size: 12px;
-    color: rgb(var(--orange-6));
-  }
-}
-</style>
diff --git a/frontend-pc/src/views/log/index.vue b/frontend-pc/src/views/log/index.vue
index 6a3d285..19e0bbd 100644
--- a/frontend-pc/src/views/log/index.vue
+++ b/frontend-pc/src/views/log/index.vue
@@ -1,132 +1,17 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false" class="g-list-card">
-      <template #title>操作日志</template>
-      <template #extra>
-        <span class="log__hint">
-          按「对象」查是这个页面最重要的用法：填对象类型 + ID，就能看到它被谁改过
-        </span>
-      </template>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-input-number v-model="query.targetId" placeholder="对象 ID" size="small"
-            class="log__num" :min="1" hide-button @change="search" />
-          <a-select v-model="query.targetType" placeholder="对象类型" allow-clear size="small"
-            class="log__sel" @change="search">
-            <a-option value="ROSTER">名册项</a-option>
-            <a-option value="TASK">任务</a-option>
-            <a-option value="SUBMISSION">填报单</a-option>
-            <a-option value="EXPORT">导出</a-option>
-            <a-option value="USER">账号</a-option>
-          </a-select>
-          <a-select v-model="query.action" placeholder="动作" allow-clear size="small"
-            class="log__sel2" @change="search">
-            <a-option v-for="a in OPERATION_ACTIONS" :key="a.value" :value="a.value">
-              {{ a.label }}
-            </a-option>
-          </a-select>
-          <a-select v-model="query.module" placeholder="模块" allow-clear size="small"
-            class="log__sel3" @change="search">
-            <a-option value="ROSTER">名册</a-option>
-            <a-option value="TASK">任务</a-option>
-            <a-option value="AUDIT">审核</a-option>
-            <a-option value="EXPORT">导出</a-option>
-            <a-option value="JOIN">加入申请</a-option>
-          </a-select>
-          <!-- 起止日期用两个独立日期框，**不用 range 模式**：
-               Arco 的 range 模式实际值是数组、但类型声明只写了单值，
-               改哪边都要么 as any（掩盖问题）、要么被类型挡住。
-               而且两个框各自能单独清空，核查时更好用 -->
-          <a-date-picker v-model="fromDate" size="small" mode="date"
-            placeholder="开始日期" class="log__date" @change="search" />
-          <a-date-picker v-model="toDate" size="small" mode="date"
-            placeholder="结束日期" class="log__date" @change="search" />
-          <a-button size="small" @click="reset">重置</a-button>
-          <a-button size="small" @click="load">
-            <template #icon><IconRefresh /></template>
-            刷新
-          </a-button>
-        </a-space>
-      </div>
-
-      <!--
-        `y: '100%'` 不是装饰：它让 Arco 把表头与表体**拆开**
-        （内部 `splitTable`），表体自己滚、表头钉住、分页器留在卡片底部。
-        没有它的话，`.arco-table-content` 的 `overflow-y` 是 hidden（横向滚动条专用），
-        多出来的行会被**直接裁掉**，而且没有任何滚动条能救回来。
-      -->
-      <a-table :data="list" :loading="loading" row-key="id" :pagination="pagination"
-        :scroll="{ x: isPlatform ? 1340 : 1200, y: '100%' }" @page-change="onPageChange"
-        @page-size-change="onPageSizeChange">
-        <template #columns>
-          <!--
-            「租户」列**只给平台运营看**：它看的是全量日志（跨租户），
-            不显示单位就分不清"这条是哪个学校做的"；学校管理员永远是本租户，列没有意义。
-          -->
-          <a-table-column v-if="isPlatform" title="租户" :width="140">
-            <template #cell="{ record }">
-              <span class="log__muted">
-                {{ tenantNames[record.tenantId] ?? (record.tenantId != null ? `#${record.tenantId}` : '—') }}
-              </span>
-            </template>
-          </a-table-column>
-          <a-table-column title="时间" :width="150">
-            <template #cell="{ record }">
-              <span class="log__muted">{{ fmt(record.createTime) }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="操作人" :width="120">
-            <template #cell="{ record }">
-              <!--
-                ⚠️ 只显示**账号/姓名**，不显示用户 ID（2026-10-09 客户要求）。
-                数字 ID 对看日志的人没有意义 —— 他要知道的是"哪个账号做的"，
-                ID 只在排查时要，而那种时候查库比看这一列快。
-              -->
-              <span>{{ record.operatorName || '—' }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="动作" :width="150">
-            <template #cell="{ record }">
-              <a-tag size="small" :color="isSensitive(record.action) ? 'red' : 'arcoblue'">
-                {{ actionText(record.action) }}
-              </a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="对象" :width="130">
-            <template #cell="{ record }">
-              <span v-if="record.targetType" class="log__muted">
-                {{ record.targetType }} #{{ record.targetId }}
-              </span>
-              <span v-else class="log__muted">—</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="变更前 → 变更后" :width="280">
-            <template #cell="{ record }">
-              <div v-if="record.beforeVal || record.afterVal" class="log__diff">
-                <span class="log__before">{{ record.beforeVal || '（空）' }}</span>
-                <span class="log__arrow">→</span>
-                <span class="log__after">{{ record.afterVal || '（空）' }}</span>
-              </div>
-              <span v-else class="log__muted">—</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="来源" :width="200">
-            <template #cell="{ record }">
-              <div class="log__muted">{{ record.ip || '—' }}</div>
-              <div class="log__ua" :title="record.userAgent || ''">{{ record.userAgent || '' }}</div>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import type { OperationLog } from '@/apis/xt/log'
-import { IconRefresh } from '@arco-design/web-vue/es/icon'
-import { computed, reactive, ref } from 'vue'
+import {
+  NButton,
+  NCard,
+  NDataTable,
+  NDatePicker,
+  NInputNumber,
+  NSelect,
+  NTag,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref } from 'vue'
 import {
   actionText,
   getOperationLogs,
@@ -134,211 +19,423 @@ import {
   SENSITIVE_ACTIONS
 } from '@/apis/xt/log'
 import { getTenantList } from '@/apis/xt/tenant'
-import { useUserStore } from '@/stores'
+import { listPagination } from '@/composables/pagination'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useUserStore } from '@/stores/user'
 
 /**
- * 操作日志（《03-接口设计》§13.4）。
+ * 操作日志。
  *
  * ## 为什么把「对象 ID」放在筛选栏最左边
  *
  * 因为这是这一屏**唯一不可替代**的查询方式。合规问题问的是
- * 「这张名册项的证件号被谁从什么改成了什么」，答案只能靠
- * `target_type + target_id` 定位；而"搜关键字"会把
- * 「改了它」和「顺带提到它」混在一起 —— 那种匹配撑不起合规结论。
+ * 「这张名册项的证件号被谁从什么改成了什么」，答案只能靠 `target_type + target_id` 定位；
+ * 而"搜关键字"会把「改了它」和「顺带提到它」混在一起 —— 那种匹配撑不起合规结论。
  *
  * ## 「变更前 → 变更后」单独一列
  *
- * 看这一屏的人 90% 就是为了看这两列。塞进"详情"弹窗里等于让每次查看多一次点击，
+ * 看这一屏的人 90% 就是为了看这两列。塞进"详情"弹窗里等于每次查看多一次点击，
  * 而合规核查往往是几十条连着看的。
  *
  * ## 范围：平台运营看**全量**，学校管理员看**本租户**
  *
- * 由服务端按 `log:viewAll` / `log:viewTenant` 决定（`LogController.logScopeTenantId`）。
- * ⚠️ 平台运营看到的每条日志属于哪个单位，靠这一列「租户」——它**只对平台显示**。
- * 以前平台的 tenantId 是 0 而日志挂在各租户下，于是这一屏对平台**永远是空的**，
- * 且不报任何错（PRD 要求的却是「全量操作日志 ✅」）。
+ * 由服务端按 `log:viewAll` / `log:viewTenant` 决定。⚠️ 平台看到的每条日志属于哪个单位，
+ * 靠「租户」这一列 —— 它**只对平台显示**（学校管理员永远是本租户，列没有意义）。
  */
 defineOptions({ name: 'OperationLogs' })
 
-const userStore = useUserStore()
+const message = useMessage()
+const user = useUserStore()
 
 /** 平台运营：看全量日志，因此要显示「租户」列并把 id 翻成单位名 */
-const isPlatform = computed(() => userStore.roles.includes('PLATFORM_ADMIN'))
+const isPlatform = computed(() => user.isPlatform)
 const tenantNames = ref<Record<number, string>>({})
 
 const loading = ref(false)
 const list = ref<OperationLog[]>([])
 const total = ref(0)
-const fromDate = ref<string | undefined>(undefined)
-const toDate = ref<string | undefined>(undefined)
+
+const fromDate = ref<string | null>(null)
+const toDate = ref<string | null>(null)
 
 const query = reactive<{
-  targetId?: number
-  targetType?: string
-  action?: string
-  module?: string
-  from?: string
-  to?: string
+  targetId: number | null
+  targetType: string | null
+  action: string | null
+  module: string | null
   pageNum: number
   pageSize: number
 }>({
-  targetId: undefined,
-  targetType: undefined,
-  action: undefined,
-  module: undefined,
-  from: undefined,
-  to: undefined,
+  targetId: null,
+  targetType: null,
+  action: null,
+  module: null,
   pageNum: 1,
   pageSize: 20
 })
 
-const pagination = computed(() => ({
-  current: query.pageNum,
-  pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
-}))
+const targetTypeOptions = [
+  { label: '名册项', value: 'ROSTER' },
+  { label: '任务', value: 'TASK' },
+  { label: '填报单', value: 'SUBMISSION' },
+  { label: '导出', value: 'EXPORT' },
+  { label: '账号', value: 'USER' }
+]
 
-function fmt(v?: string) {
+const actionOptions = OPERATION_ACTIONS.map((a) => ({ label: a.label, value: a.value }))
+
+/** 加入申请（JOIN）已随需求收敛下线，这里不再列它 */
+const moduleOptions = [
+  { label: '名册', value: 'ROSTER' },
+  { label: '任务', value: 'TASK' },
+  { label: '审核', value: 'AUDIT' },
+  { label: '导出', value: 'EXPORT' }
+]
+
+function fmt(v?: string): string {
   return v ? v.replace('T', ' ').slice(0, 19) : '—'
 }
 
-function isSensitive(action?: string) {
+function isSensitive(action?: string): boolean {
   return !!action && SENSITIVE_ACTIONS.includes(action)
 }
 
-async function load() {
+const columns = computed<DataTableColumns<OperationLog>>(() => {
+  const cols: DataTableColumns<OperationLog> = []
+
+  // 「租户」列只给平台运营看
+  if (isPlatform.value) {
+    cols.push({
+      title: '租户',
+      key: 'tenantId',
+      width: 150,
+      render: (row) => h('span', { class: 'log__muted' }, tenantNames.value[row.tenantId ?? 0] ?? (row.tenantId != null ? `#${row.tenantId}` : '—'))
+    })
+  }
+
+  cols.push(
+    {
+      title: '时间',
+      key: 'createTime',
+      width: 160,
+      render: (row) => h('span', { class: 'log__muted' }, fmt(row.createTime))
+    },
+    {
+      title: '操作人',
+      key: 'operatorName',
+      width: 130,
+      // ⚠️ 只显示账号/姓名，不显示用户 ID（客户走查要求）：
+      // 数字 ID 对看日志的人没有意义，他要知道的是"哪个账号做的"
+      render: (row) => row.operatorName || '—'
+    },
+    {
+      title: '动作',
+      key: 'action',
+      width: 160,
+      render: (row) => h(
+        NTag,
+        { size: 'small', bordered: false, type: isSensitive(row.action) ? 'error' : 'info' },
+        { default: () => actionText(row.action) }
+      )
+    },
+    {
+      title: '对象',
+      key: 'targetType',
+      width: 140,
+      render: (row) => h('span', { class: 'log__muted' }, row.targetType ? `${row.targetType} #${row.targetId}` : '—')
+    },
+    {
+      title: '变更前 → 变更后',
+      key: 'diff',
+      width: 300,
+      render: (row) => {
+        if (!row.beforeVal && !row.afterVal) {
+          return h('span', { class: 'log__muted' }, '—')
+        }
+        return h('div', { class: 'log__diff' }, [
+          h('span', { class: 'log__before' }, row.beforeVal || '（空）'),
+          h('span', { class: 'log__arrow' }, '→'),
+          h('span', { class: 'log__after' }, row.afterVal || '（空）')
+        ])
+      }
+    },
+    {
+      title: '来源',
+      key: 'ip',
+      width: 200,
+      render: (row) => h('div', null, [
+        h('div', { class: 'log__muted' }, row.ip || '—'),
+        h('div', { class: 'log__ua', title: row.userAgent || '' }, row.userAgent || '')
+      ])
+    }
+  )
+
+  return cols
+})
+
+/**
+ * 分页器统一走 `listPagination`（见 `@/composables/pagination`）。
+ *
+ * ⚠️ 远程分页三件事缺一不可：`remote` + 自己控制 page/pageSize +
+ *    同时处理 `@update:page` 与 `@update:page-size`（改每页条数一律回到第 1 页重新取数，
+ *    否则会出现"分页器说 50 条/页、表里还是上一次那 20 条"）。
+ */
+const pagination = computed(() => listPagination({
+  page: query.pageNum,
+  pageSize: query.pageSize,
+  itemCount: total.value,
+  pageSizes: [20, 50, 100]
+}))
+
+function onPage(page: number): void {
+  query.pageNum = page
+  void load()
+}
+
+function onPageSize(size: number): void {
+  query.pageSize = size
+  query.pageNum = 1
+  void load()
+}
+
+async function load(): Promise<void> {
   loading.value = true
   try {
-    const res = await getOperationLogs({
-      targetId: query.targetId,
-      targetType: query.targetType,
-      action: query.action,
-      module: query.module,
+    const page = await getOperationLogs({
+      targetId: query.targetId ?? undefined,
+      targetType: query.targetType ?? undefined,
+      action: query.action ?? undefined,
+      module: query.module ?? undefined,
       // 后端 `to` 会补到当天 23:59:59，所以这里只给日期就够
       from: fromDate.value || undefined,
       to: toDate.value || undefined,
       pageNum: query.pageNum,
       pageSize: query.pageSize
     })
-    list.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
+    list.value = page.list ?? []
+    total.value = page.total ?? 0
   } finally {
     loading.value = false
   }
 }
 
-function search() {
+function search(): void {
   query.pageNum = 1
-  load()
+  void load()
 }
 
-function reset() {
-  query.targetId = undefined
-  query.targetType = undefined
-  query.action = undefined
-  query.module = undefined
-  fromDate.value = undefined
-  toDate.value = undefined
+function reset(): void {
+  query.targetId = null
+  query.targetType = null
+  query.action = null
+  query.module = null
+  fromDate.value = null
+  toDate.value = null
   search()
 }
 
-function onPageChange(page: number) {
-  query.pageNum = page
-  load()
-}
-
-/**
- * 改每页条数。
- *
- * ⚠️ **必须处理这个事件**，不能只处理 `page-change`：
- * Arco 的表格在 `pagination` 非 false 时会**自己再切一次数据**
- * （`flattenData`：`data.length > pageSize` 就 slice）。
- * 只在本地改每页条数、不重新取数的话，会出现
- * 「分页器显示 50 条/页、表里还是上一次那 20 条」这种自相矛盾的画面 ——
- * 看起来就是"分页器坏了"。所以这里一律回到第 1 页重新取。
- */
-function onPageSizeChange(size: number) {
-  query.pageSize = size
-  query.pageNum = 1
-  load()
-}
-
-// 平台运营才需要"租户 id → 单位名"。取不到也不影响看日志：列里退回显示 #id
 onMounted(async () => {
-  if (!isPlatform.value) return
-  try {
-    const res = await getTenantList({ pageNum: 1, pageSize: 200 })
-    tenantNames.value = Object.fromEntries((res.data?.list ?? []).map((t) => [t.id, t.tenantName]))
-  } catch {
-    tenantNames.value = {}
+  // 平台运营才需要"租户 id → 单位名"。取不到也不影响看日志：列里退回显示 #id
+  if (isPlatform.value) {
+    try {
+      const page = await getTenantList({ pageNum: 1, pageSize: 200 })
+      tenantNames.value = Object.fromEntries((page.list ?? []).map((t) => [t.id, t.tenantName]))
+    } catch {
+      tenantNames.value = {}
+      message.warning('单位名称没取到，租户列先显示编号')
+    }
   }
+  await load()
 })
-
-load()
 </script>
 
-<style lang="scss" scoped>
-/* 卡片/表格的高度链路（分页器为什么必须钉在底部）见 `styles/global.scss` 的 `.g-list-card` */
-.log {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+<template>
+  <NCard class="page-card log" :bordered="false" size="small">
+    <template #header>
+      操作日志
+    </template>
+    <template #header-extra>
+      <span class="log__hint">
+        按「对象」查是这个页面最重要的用法：填对象类型 + ID，就能看到它被谁改过
+      </span>
+    </template>
 
-  &__num {
-    width: 110px;
-  }
+    <!--
+      筛选行：控件多，所以**统一默认尺寸**（34px）并允许换行
+      （`.toolbar` 自带 `flex-wrap`）。这里刻意不用 `NSpace`：
+      它自己是一个 flex 项，换行时机由外层挤压决定，行与行之间容易参差不齐；
+      直接用 `flex-wrap: wrap` + `gap`，换行后每一行都从左边对齐。
+      同时把 `.toolbar` 的 `space-between` 改回 `flex-start` ——
+      否则换行后每行会被"两端对齐"抻开，看起来像随机的空档。
+    -->
+    <div class="toolbar log__filters">
+      <!-- 对象 ID 放最左：合规问题只能靠 target_type + target_id 定位 -->
+      <NInputNumber
+        v-model:value="query.targetId"
+        class="log__num"
+        :min="1"
+        clearable
+        placeholder="对象 ID"
+        @update:value="search"
+      />
+      <NSelect
+        v-model:value="query.targetType"
+        class="log__sel"
+        clearable
+        placeholder="对象类型"
+        :options="targetTypeOptions"
+        @update:value="search"
+      />
+      <NSelect
+        v-model:value="query.action"
+        class="log__sel2"
+        clearable
+        placeholder="动作"
+        :options="actionOptions"
+        @update:value="search"
+      />
+      <NSelect
+        v-model:value="query.module"
+        class="log__sel"
+        clearable
+        placeholder="模块"
+        :options="moduleOptions"
+        @update:value="search"
+      />
+      <!-- 起止日期用两个独立日期框，不用 range：两个框各自能单独清空，核查时更好用 -->
+      <NDatePicker
+        v-model:formatted-value="fromDate"
+        type="date"
+        value-format="yyyy-MM-dd"
+        clearable
+        placeholder="开始日期"
+        class="log__date"
+        @update:formatted-value="search"
+      />
+      <NDatePicker
+        v-model:formatted-value="toDate"
+        type="date"
+        value-format="yyyy-MM-dd"
+        clearable
+        placeholder="结束日期"
+        class="log__date"
+        @update:formatted-value="search"
+      />
+      <NButton @click="reset">
+        重置
+      </NButton>
+      <NButton @click="load">
+        <template #icon>
+          <AppIcon name="refresh" :size="16" />
+        </template>
+        刷新
+      </NButton>
+    </div>
 
-  &__sel {
-    width: 120px;
-  }
+    <div class="page-card__body">
+      <NDataTable
+        flex-height
+        style="height: 100%"
+        remote
+        :columns="columns"
+        :data="list"
+        :loading="loading"
+        :row-key="row => row.id"
+        :scroll-x="isPlatform ? 1240 : 1090"
+        :pagination="pagination"
+        size="small"
+        @update:page="onPage"
+        @update:page-size="onPageSize"
+      />
+    </div>
+  </NCard>
+</template>
 
-  &__sel2 {
-    width: 150px;
-  }
+<style scoped>
+/**
+ * 页面就是一张卡片（`.page-card` 提供撑满内容区的高度链）。
+ *
+ * ⚠️ 内容区类名是 `.n-card-content`（naive 的 `cB("card-content")`），
+ *    **不是** `.n-card__content` —— 后者不匹配任何元素，写错整条规则会静默失效
+ *    （症状：表格体高度算成 0，行在 DOM 里却一行都看不见）。
+ *    高度链：卡片内容区 → `.page-card__body` → `n-data-table[flex-height]`，
+ *    中间每层都要 `min-height: 0`（见 styles/index.scss 的 `.page-card` 注释）。
+ */
+.log :deep(.n-card-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
 
-  &__sel3 {
-    width: 100px;
-  }
+/* 卡片头右侧的说明文字：长句，窄屏时截断而不是把标题挤掉 */
+.log__hint {
+  display: block;
+  max-width: 520px;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--xt-text-3);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  &__date {
-    width: 240px;
-  }
+/* 筛选行：换行后每行左对齐、行距一致（覆盖 .toolbar 的 space-between） */
+.log__filters {
+  justify-content: flex-start;
+}
 
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.log__num {
+  width: 130px;
+}
 
-  &__diff {
-    font-size: 13px;
-    line-height: 1.5;
-    word-break: break-all;
-  }
+.log__sel {
+  width: 140px;
+}
 
-  &__before {
-    color: var(--color-text-3);
-    text-decoration: line-through;
-  }
+.log__sel2 {
+  width: 160px;
+}
 
-  &__arrow {
-    margin: 0 6px;
-    color: var(--color-text-3);
-  }
+.log__date {
+  width: 150px;
+}
 
-  &__after {
-    color: rgb(var(--red-6));
-    font-weight: 500;
-  }
+.log__muted,
+:deep(.log__muted) {
+  color: var(--xt-text-3);
+}
 
-  &__ua {
-    overflow: hidden;
-    font-size: 12px;
-    color: var(--color-text-3);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.log__ua,
+:deep(.log__ua) {
+  overflow: hidden;
+  font-size: 12px;
+  color: #b5b5b5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log__diff,
+:deep(.log__diff) {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  font-size: 13px;
+}
+
+.log__before,
+:deep(.log__before) {
+  color: #8a8a8a;
+  text-decoration: line-through;
+}
+
+.log__arrow,
+:deep(.log__arrow) {
+  color: #b5b5b5;
+}
+
+.log__after,
+:deep(.log__after) {
+  font-weight: 500;
+  word-break: break-all;
 }
 </style>
diff --git a/frontend-pc/src/views/login/LoginLeft.vue b/frontend-pc/src/views/login/LoginLeft.vue
deleted file mode 100644
index 3d73acf..0000000
--- a/frontend-pc/src/views/login/LoginLeft.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-  <div class="login-left">
-    <div class="login-left__inner">
-      <header class="login-left__header">
-        <div class="login-left__brand">
-          <div class="login-left__logo">
-            <img src="@/assets/images/logo.svg" alt="填报通" />
-          </div>
-          <div class="login-left__brand-text">
-            <span class="login-left__title">填报通</span>
-          </div>
-        </div>
-      </header>
-
-      <section class="login-left__hero">
-        <h1 class="login-left__heading">
-          报名材料 · 一站收集
-          <span class="login-left__heading-sub">职业技能等级认定材料收集中台</span>
-        </h1>
-        <p class="login-left__desc">
-          学生三分钟填完，老师一键过审 —— 系统按名册自动改名、把扫描件压到 1M 内，并生成可直接上报的汇总包。
-        </p>
-      </section>
-
-      <div class="login-left__illustration" aria-hidden="true">
-        <img class="login-left__illustration-img" src="@/assets/images/login-hero.svg"
-          alt="散乱的材料自动归集为规范包" />
-      </div>
-
-      <ul class="login-left__features">
-        <li v-for="item in features" :key="item.title" class="login-left__feature">
-          <span class="login-left__feature-icon">
-            <Icon :icon="item.icon" :width="20" :height="20" />
-          </span>
-          <span class="login-left__feature-text">
-            <strong>{{ item.title }}</strong>
-            <em>{{ item.subtitle }}</em>
-          </span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-
-defineOptions({ name: 'LoginLeft' })
-
-/**
- * 三条卖点对应产品最硬的三个能力（数字都来自实测）：
- *   · 规范文件名由名册生成，不靠学生手打 —— 归属判定靠证件号反查名册
- *   · 扫描件强制压到 1M 内 —— 实测整班 444MB → 22MB，压缩率 95%
- *   · 证件号加密存储 + 名单不下发前端 —— 门禁在服务端完成
- * 图标名已核对 icon-park-outline 图标集确实存在（写错会渲染成空白且不报错）。
- */
-const features = [
-  { title: '自动改名', subtitle: '规范名由名册生成', icon: 'icon-park-outline:file-editing' },
-  { title: '强制压缩', subtitle: '扫描件压到 1M 内', icon: 'icon-park-outline:compression' },
-  { title: '隐私保护', subtitle: '证件号加密存储', icon: 'icon-park-outline:shield' }
-] as const
-</script>
-
-<style lang="scss" scoped>
-.login-left {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  // 两层叠加：
-  //   ① 极淡的点阵网格 —— 给大片留白一点"纸张"的质感，同时暗示"表单/表格"
-  //   ② 主色浅阶到白的斜向渐变 —— 承接渲染出来的头图
-  // 点阵用主色很低的不透明度，换成别的主题色时自动跟随，不需要改图。
-  background:
-    radial-gradient(circle at 1px 1px, rgb(var(--primary-6), 0.06) 1px, transparent 0) 0 0 / 22px 22px,
-    linear-gradient(165deg,
-      rgb(var(--primary-1)) 0%,
-      var(--color-bg-2) 42%,
-      var(--color-bg-1) 100%);
-
-  &::before {
-    position: absolute;
-    top: -120px;
-    right: -80px;
-    width: 360px;
-    height: 360px;
-    content: '';
-    background: radial-gradient(circle, rgb(var(--primary-6), 0.12) 0%, transparent 68%);
-    border-radius: 50%;
-  }
-
-  &::after {
-    position: absolute;
-    bottom: 8%;
-    left: -60px;
-    width: 240px;
-    height: 240px;
-    content: '';
-    background: radial-gradient(circle, rgb(var(--primary-6), 0.08) 0%, transparent 70%);
-    border-radius: 50%;
-  }
-
-  &__inner {
-    position: relative;
-    z-index: 1;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    padding: clamp(24px, 4vh, 48px) clamp(20px, 4vw, 56px) clamp(20px, 3vh, 40px);
-    overflow: auto;
-  }
-
-  &__header {
-    flex-shrink: 0;
-    margin-bottom: clamp(20px, 3vh, 36px);
-  }
-
-  &__brand {
-    display: flex;
-    gap: 14px;
-    align-items: center;
-  }
-
-  &__logo {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 6px;
-    background: var(--color-bg-1);
-    border: 1px solid var(--color-border-2);
-    border-radius: 12px;
-    box-shadow: 0 4px 16px rgb(var(--primary-6), 0.08);
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  &__brand-text {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  &__title {
-    font-size: clamp(18px, 2.5vw, 26px);
-    font-weight: 700;
-    line-height: 1.2;
-    color: var(--color-text-1);
-    letter-spacing: -0.02em;
-  }
-
-  &__hero {
-    flex-shrink: 0;
-    margin-bottom: clamp(12px, 2vh, 24px);
-  }
-
-  &__heading {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin: 0 0 12px;
-    font-size: clamp(24px, 3vw, 38px);
-    font-weight: 700;
-    line-height: 1.2;
-    color: var(--color-text-1);
-    letter-spacing: -0.02em;
-  }
-
-  &__heading-sub {
-    font-size: clamp(16px, 2vw, 22px);
-    font-weight: 600;
-    color: rgb(var(--primary-6));
-  }
-
-  &__desc {
-    max-width: 480px;
-    margin: 0;
-    font-size: clamp(13px, 1.4vw, 15px);
-    line-height: 1.65;
-    color: var(--color-text-3);
-  }
-
-  &__illustration {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    min-height: 160px;
-    margin: clamp(8px, 2vh, 24px) 0;
-  }
-
-  &__illustration-img {
-    width: min(100%, 520px);
-    max-height: min(42vh, 320px);
-    object-fit: contain;
-    filter: drop-shadow(0 12px 32px rgb(var(--primary-6), 0.1));
-    animation: login-float 6s ease-in-out infinite;
-  }
-
-  &__features {
-    display: grid;
-    flex-shrink: 0;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  &__feature {
-    display: flex;
-    gap: 10px;
-    align-items: flex-start;
-    padding: 14px 12px;
-    background: color-mix(in srgb, var(--color-bg-1) 72%, transparent);
-    border: 1px solid var(--color-border-2);
-    border-radius: 12px;
-    box-shadow: 0 2px 12px rgb(var(--primary-6), 0.05);
-  }
-
-  &__feature-icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: rgb(var(--primary-6));
-    background: rgb(var(--primary-1));
-    border-radius: 10px;
-  }
-
-  &__feature-text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-
-    strong {
-      font-size: 13px;
-      font-weight: 600;
-      line-height: 1.3;
-      color: var(--color-text-1);
-    }
-
-    em {
-      font-size: 11px;
-      font-style: normal;
-      line-height: 1.4;
-      color: var(--color-text-3);
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .login-left__illustration-img {
-    animation: none;
-  }
-}
-
-@keyframes login-float {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-8px);
-  }
-}
-
-@media (width <=1200px) {
-  .login-left__features {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/frontend-pc/src/views/login/LoginPalette.vue b/frontend-pc/src/views/login/LoginPalette.vue
deleted file mode 100644
index 4677b80..0000000
--- a/frontend-pc/src/views/login/LoginPalette.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div class="login-palette">
-    <div class="login-palette__dots">
-      <div
-        v-for="(color, index) in COLORS"
-        :key="color"
-        class="login-palette__dot"
-        :style="{ 'background': color, '--index': index }"
-        @click="handleClick(color)"
-      />
-    </div>
-    <div class="login-palette__btn">
-      <icon-palette :size="18" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTheme } from '@/hooks'
-
-defineOptions({ name: 'LoginPalette' })
-
-const COLORS = ['#165DFF', '#18A058', '#007AFF', '#5856D6', '#536dfe', '#AF52DE', '#f4511e', '#6d4c41']
-const { setThemeColor } = useTheme()
-
-const handleClick = (color: string) => {
-  setThemeColor(color)
-}
-</script>
-
-<style scoped lang="scss">
-.login-palette {
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  &:hover &__dots {
-    pointer-events: auto;
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  &:hover &__dot {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-
-  &:hover &__btn :deep(.arco-icon) {
-    color: rgb(var(--primary-6));
-  }
-
-  &__dots {
-    position: absolute;
-    right: 0;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    padding: 8px 36px 8px 10px;
-    pointer-events: none;
-    border-radius: 100px;
-    opacity: 0;
-    backdrop-filter: blur(10px);
-    transform: translateX(10px);
-    transition: all 0.3s ease;
-  }
-
-  &__dot {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
-    opacity: 0;
-    transform: translateX(20px) scale(0.8);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    transition-delay: calc(var(--index) * 0.05s);
-
-    &:hover {
-      box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
-      transform: translateX(0) scale(1.1);
-    }
-  }
-
-  &__btn {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    transition: all 0.3s;
-  }
-}
-</style>
diff --git a/frontend-pc/src/views/login/index.vue b/frontend-pc/src/views/login/index.vue
index 9e2970e..007940f 100644
--- a/frontend-pc/src/views/login/index.vue
+++ b/frontend-pc/src/views/login/index.vue
@@ -1,133 +1,41 @@
-<template>
-  <div class="login">
-    <a-row align="stretch" class="login__row">
-      <a-col :xs="0" :sm="0" :md="14" :lg="14" :xl="15" class="login__col login__col--brand">
-        <LoginLeft />
-      </a-col>
-      <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="9" class="login__col">
-        <div class="login__panel">
-          <div class="login__toolbar">
-            <LoginPalette />
-            <GiThemeBtn />
-          </div>
-
-          <div class="login__body">
-            <div class="login__content">
-              <header class="login__mobile-brand">
-                <div class="login__mobile-logo">
-                  <img src="@/assets/images/logo.svg" alt="填报通" />
-                </div>
-                <div>
-                  <h2 class="login__mobile-title">填报通</h2>
-                  <p class="login__mobile-desc">报名材料收集系统</p>
-                </div>
-              </header>
-
-              <h3 class="login__title">欢迎回来</h3>
-              <p class="login__subtitle">请使用管理员分配的账号登录</p>
-
-              <a-form ref="formRef" class="login__form" size="large" :model="form" :rules="rules" layout="vertical"
-                :label-col-props="{ style: { marginBottom: '0' } }" @submit="onSubmit">
-                <a-form-item field="username" label="账号">
-                  <a-input v-model="form.username" placeholder="请输入账号" allow-clear autocomplete="username"
-                    :disabled="loading">
-                    <template #prefix>
-                      <icon-user :stroke-width="3" class="login__input-icon" />
-                    </template>
-                  </a-input>
-                </a-form-item>
-
-                <a-form-item field="password" label="密码">
-                  <a-input-password v-model="form.password" placeholder="请输入密码" allow-clear
-                    autocomplete="current-password" :disabled="loading" @press-enter="login">
-                    <template #prefix>
-                      <icon-lock :stroke-width="3" class="login__input-icon" />
-                    </template>
-                  </a-input-password>
-                </a-form-item>
-
-                <!-- 账号在多个租户下重名时才出现（服务端返回 40012 + "多个单位"） -->
-                <a-form-item v-if="needTenant" field="tenantCode" label="租户码">
-                  <a-input v-model="form.tenantCode" placeholder="如 demo" allow-clear :disabled="loading"
-                    @press-enter="login">
-                    <template #prefix>
-                      <icon-home :stroke-width="3" class="login__input-icon" />
-                    </template>
-                  </a-input>
-                  <template #extra>
-                    <span class="login__hint">该账号在多个单位下存在，请指明单位</span>
-                  </template>
-                </a-form-item>
-
-                <!-- 连续失败 2 次后服务端才要求（返回 40001） -->
-                <a-form-item v-if="needCaptcha" field="captchaCode" label="图形验证码">
-                  <div class="login__captcha">
-                    <a-input v-model="form.captchaCode" placeholder="请输入图中字符" allow-clear :max-length="6"
-                      :disabled="loading" @press-enter="login">
-                      <template #prefix>
-                        <icon-safe :stroke-width="3" class="login__input-icon" />
-                      </template>
-                    </a-input>
-                    <button class="login__captcha-img" type="button" title="点击刷新" @click="refreshCaptcha">
-                      <img v-if="captchaImage" :src="captchaImage" alt="验证码" />
-                      <span v-else>加载中</span>
-                    </button>
-                  </div>
-                </a-form-item>
-
-                <!-- 服务端返回的错误统一显示在这里，而不是只用 toast（toast 会消失，用户看不到原因） -->
-                <a-alert v-if="errText" class="login__alert" type="error">
-                  {{ errText }}
-                </a-alert>
-
-                <a-form-item hide-label>
-                  <a-space direction="vertical" fill class="w-full">
-                    <a-button class="login__btn" type="primary" size="large" long html-type="submit" :loading="loading"
-                      :disabled="loading">
-                      登 录
-                    </a-button>
-                  </a-space>
-                </a-form-item>
-              </a-form>
-            </div>
-          </div>
-
-          <footer class="login__footer">
-            <span>忘记密码请联系本单位管理员重置</span>
-          </footer>
-        </div>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
 <script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
-import { Message } from '@arco-design/web-vue'
+import type { FormInst, FormRules } from 'naive-ui'
+import { NAlert, NButton, NForm, NFormItem, NInput } from 'naive-ui'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { getCaptcha } from '@/apis/xt'
-import { useLoading } from '@/hooks'
-import { useTabsStore, useUserStore } from '@/stores'
+import AppIcon from '@/icons/AppIcon.vue'
+import { registerMenus } from '@/router'
+import { useUserStore } from '@/stores/user'
 import { encryptPassword, fetchPublicKey, resetPublicKey } from '@/utils/rsa'
-import LoginLeft from './LoginLeft.vue'
-import LoginPalette from './LoginPalette.vue'
-
-defineOptions({ name: 'Login' })
 
 /**
  * 登录页。
  *
- * 三个「按需出现」的机制，都是**服务端提示驱动**的，不靠前端猜：
- *   1. 图形验证码 —— 连续失败 2 次后服务端开始要求（返回 40001）
- *   2. 租户码     —— 账号在多个租户下重名时服务端要求（返回 40012 + "多个单位"）
- *   3. 锁定倒计时 —— 连错 5 次后返回 40013
+ * 三个「按需出现」的输入项都是**服务端提示驱动**的，前端不猜：
+ *   1. 图形验证码 —— 连续失败若干次后服务端开始要求（返回 40001）
+ *   2. 租户码     —— 账号在多个单位下同名时服务端拒绝猜测（返回 40012 + "多个单位"）
+ *   3. 错误原文   —— 服务端的 msg 直接落在页面上，而不是只弹一个会消失的 toast
  *
- * 密码用 RSA 公钥加密后传输，目的不是替代 HTTPS，
- * 而是防止网关/APM/链路追踪把明文密码记进日志。
+ * 密码走 RSA 加密后传输：目的不是替代 HTTPS，而是**防止明文密码进网关/APM 日志**
+ * （见 `@/utils/rsa`）。
  */
+defineOptions({ name: 'Login' })
 
+const route = useRoute()
 const router = useRouter()
-const userStore = useUserStore()
-const tabsStore = useTabsStore()
+const user = useUserStore()
+
+const formRef = ref<FormInst | null>(null)
+const loading = ref(false)
+const errText = ref('')
+
+/** 服务端要求时才显示 */
+const needTenant = ref(false)
+const needCaptcha = ref(false)
+
+const captchaKey = ref('')
+const captchaImage = ref('')
 
 const form = reactive({
   username: '',
@@ -136,94 +44,65 @@ const form = reactive({
   captchaCode: ''
 })
 
-const rules: FormInstance['rules'] = {
+const rules = computed<FormRules>(() => ({
   username: [
-    { required: true, message: '请输入账号' },
-    { minLength: 2, message: '账号至少 2 个字符' }
+    { required: true, message: '请输入账号', trigger: ['blur', 'input'] },
+    { min: 2, message: '账号至少 2 个字符', trigger: ['blur'] }
   ],
   password: [
-    { required: true, message: '请输入密码' },
-    { minLength: 6, message: '密码至少 6 位' }
-  ]
-}
+    { required: true, message: '请输入密码', trigger: ['blur', 'input'] },
+    { min: 6, message: '密码至少 6 位', trigger: ['blur'] }
+  ],
+  tenantCode: needTenant.value
+    ? [{ required: true, message: '请填写租户码（单位编码）', trigger: ['blur', 'input'] }]
+    : [],
+  captchaCode: needCaptcha.value
+    ? [{ required: true, message: '请输入图形验证码', trigger: ['blur', 'input'] }]
+    : []
+}))
 
-const formRef = useTemplateRef('formRef')
-const { loading, setLoading } = useLoading()
-
-const needCaptcha = ref(false)
-const needTenant = ref(false)
-const errText = ref('')
-const captchaKey = ref('')
-const captchaImage = ref('')
-
-/** 拉验证码：key 必须与提交时一起回传，服务端校验一次即失效 */
-async function refreshCaptcha() {
+/**
+ * 拉验证码。
+ *
+ * key 必须与提交时一起回传，且服务端校验一次即失效 —— 所以每次失败后都要重新拉，
+ * 而不是复用上一次那张图（复用会得到"验证码不正确"，而用户填的是他刚看到的那张）。
+ */
+async function refreshCaptcha(): Promise<void> {
   try {
-    const res = await getCaptcha()
-    captchaKey.value = res.data.captchaKey
-    captchaImage.value = res.data.image
+    const vo = await getCaptcha()
+    captchaKey.value = vo.captchaKey
+    captchaImage.value = vo.image
     form.captchaCode = ''
   } catch {
     errText.value = '验证码加载失败，请点击图片重试'
   }
 }
 
-function showCaptcha() {
+function showCaptcha(): void {
   if (!needCaptcha.value) {
     needCaptcha.value = true
-    refreshCaptcha()
   }
+  void refreshCaptcha()
 }
 
-async function login() {
-  const valid = await formRef.value?.validate()
-  if (valid) return
+/** 把业务码翻译成「下一步该做什么」，而不是只把服务端那句话显示出来 */
+function handleFailure(e: unknown): void {
+  const err = e as { message?: string, bizCode?: number }
+  errText.value = err?.message || '登录失败，请重试'
 
-  errText.value = ''
-  setLoading(true)
-  try {
-    const cipher = await encryptPassword(form.password)
-    await userStore.login({
-      username: form.username.trim(),
-      password: cipher,
-      tenantCode: needTenant.value ? (form.tenantCode.trim() || undefined) : undefined,
-      captchaKey: needCaptcha.value ? captchaKey.value : undefined,
-      captchaCode: needCaptcha.value ? (form.captchaCode.trim() || undefined) : undefined
-    })
-
-    tabsStore.reset()
-    const { redirect, ...othersQuery } = router.currentRoute.value.query
-    await router.push({
-      path: (redirect as string) || '/',
-      query: { ...othersQuery }
-    })
-    Message.success('登录成功')
-  } catch (error) {
-    handleFailure(error as Error & { bizCode?: number })
-  } finally {
-    setLoading(false)
-  }
-}
-
-/** 把错误码翻译成「下一步该做什么」，而不是只显示一句话 */
-function handleFailure(e: Error & { bizCode?: number }) {
-  errText.value = e.message || '登录失败，请重试'
-
-  switch (e.bizCode) {
-    // 40001：本场景下就是「需要验证码」
+  switch (err?.bizCode) {
+    // 40001：登录场景下就是「验证码不正确或已过期」→ 确保验证码框在，并换一张
     case 40001:
       showCaptcha()
-      refreshCaptcha()
       break
-    // 40012：账号在多个租户下重名时，服务端拒绝猜测并要求指明单位
+    // 40012：普通情况是「账号或密码错误」；只有"多个单位"那一条才需要租户码
     case 40012:
-      if (e.message.includes('多个单位')) {
+      if ((err.message ?? '').includes('多个单位')) {
         needTenant.value = true
-      } else {
-        showCaptcha()
+        errText.value = '该账号在多个单位下存在，请填写租户码（单位编码）后重试'
       }
       break
-    // 40101：token 失效（这里的场景是登录会话过期）
+    // 40101：登录会话过期，缓存的公钥可能也轮换了，清掉让它下次重新取
     case 40101:
       resetPublicKey()
       break
@@ -232,182 +111,390 @@ function handleFailure(e: Error & { bizCode?: number }) {
   }
 }
 
-function onSubmit(data: { values: Record<string, unknown>, errors: Record<string, unknown> | undefined }) {
-  if (data.errors) return
-  login()
+async function onSubmit(): Promise<void> {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    // 校验失败时 Naive 会把每条错误显示在对应字段下，这里不需要再弹一次
+    return
+  }
+
+  errText.value = ''
+  loading.value = true
+  try {
+    const cipher = await encryptPassword(form.password)
+    await user.login({
+      username: form.username.trim(),
+      password: cipher,
+      tenantCode: needTenant.value ? (form.tenantCode.trim() || undefined) : undefined,
+      captchaKey: needCaptcha.value ? captchaKey.value : undefined,
+      captchaCode: needCaptcha.value ? (form.captchaCode.trim() || undefined) : undefined
+    })
+
+    // ⚠️ 顺序不能反：先按菜单键注册动态路由，再跳转。
+    // 反过来的话，目标路径此刻还没注册 → 直接落到 404，用户要刷新一次才能进
+    registerMenus(user.menus)
+
+    const redirect = route.query.redirect
+    await router.replace(typeof redirect === 'string' && redirect ? redirect : '/')
+  } catch (e) {
+    handleFailure(e)
+  } finally {
+    loading.value = false
+  }
 }
 
-// 预取公钥：让点击登录时少一次往返，失败也无所谓（真正加密时会再取）
+/** 三条卖点对应产品最硬的三个能力，图标名都取自 icon-data.ts（写错会渲染成虚线占位） */
+const features = [
+  { icon: 'edit', title: '自动改名', desc: '规范文件名由名册生成，不靠学生手打' },
+  { icon: 'download', title: '强制压缩', desc: '扫描件统一压到 1M 内，清晰度零损失' },
+  { icon: 'idcard', title: '隐私保护', desc: '证件号加密存储，名单不下发前端' }
+]
+
 onMounted(() => {
-  fetchPublicKey().catch(() => undefined)
+  // 预取公钥：让点「登录」时少一次往返。失败也无妨 —— 真正加密时会再取一次
+  void fetchPublicKey().catch(() => undefined)
 })
 </script>
 
-<style lang="scss" scoped>
+<template>
+  <div class="login">
+    <!-- 左：品牌区（窄屏隐藏，登录框才是必需的） -->
+    <section class="login__brand">
+      <header class="login__brand-head">
+        <img class="login__logo" src="@/assets/images/logo.svg" alt="深学在线">
+        <span class="login__brand-name">深学在线</span>
+      </header>
+
+      <div class="login__hero">
+        <h1 class="login__hero-title">
+          报名材料 · 一站收集
+          <em>职业技能等级认定材料收集中台</em>
+        </h1>
+        <p class="login__hero-desc">
+          学生三分钟填完，老师一键过审 —— 系统按名册自动改名、把扫描件压到 1M 内，
+          并生成可直接上报的汇总包。
+        </p>
+      </div>
+
+      <div class="login__hero-img">
+        <img src="@/assets/images/login-hero.svg" alt="散乱的材料自动归集为规范包">
+      </div>
+
+      <ul class="login__features">
+        <li v-for="f in features" :key="f.title" class="login__feature">
+          <span class="login__feature-icon">
+            <AppIcon :name="f.icon" :size="18" />
+          </span>
+          <span class="login__feature-text">
+            <strong>{{ f.title }}</strong>
+            <em>{{ f.desc }}</em>
+          </span>
+        </li>
+      </ul>
+    </section>
+
+    <!-- 右：登录表单 -->
+    <section class="login__panel">
+      <div class="login__form-wrap">
+        <h2 class="login__title">欢迎回来</h2>
+        <p class="login__subtitle">请使用管理员分配的账号登录</p>
+
+        <NForm ref="formRef" :model="form" :rules="rules" label-placement="top" size="large">
+          <NFormItem label="账号" path="username">
+            <NInput
+              v-model:value="form.username"
+              placeholder="请输入账号"
+              clearable
+              :disabled="loading"
+              @keyup.enter="onSubmit"
+            />
+          </NFormItem>
+
+          <NFormItem label="密码" path="password">
+            <NInput
+              v-model:value="form.password"
+              type="password"
+              show-password-on="click"
+              placeholder="请输入密码"
+              :disabled="loading"
+              @keyup.enter="onSubmit"
+            />
+          </NFormItem>
+
+          <!-- 账号在多个单位下同名时才出现（服务端 40012 + "多个单位"） -->
+          <NFormItem v-if="needTenant" label="租户码" path="tenantCode">
+            <NInput
+              v-model:value="form.tenantCode"
+              placeholder="单位编码，如 demo"
+              clearable
+              :disabled="loading"
+              @keyup.enter="onSubmit"
+            />
+            <template #feedback>
+              <span class="login__hint">该账号在多个单位下存在，请指明是哪一个单位</span>
+            </template>
+          </NFormItem>
+
+          <!-- 连续失败后服务端开始要求（40001） -->
+          <NFormItem v-if="needCaptcha" label="图形验证码" path="captchaCode">
+            <div class="login__captcha">
+              <NInput
+                v-model:value="form.captchaCode"
+                placeholder="请输入图中字符"
+                :maxlength="6"
+                :disabled="loading"
+                @keyup.enter="onSubmit"
+              />
+              <button class="login__captcha-img" type="button" title="点击刷新" @click="refreshCaptcha">
+                <img v-if="captchaImage" :src="captchaImage" alt="验证码">
+                <span v-else>加载中</span>
+              </button>
+            </div>
+          </NFormItem>
+
+          <!-- 服务端的失败原因留在页面上：toast 会消失，用户回头就看不到为什么失败了 -->
+          <NAlert v-if="errText" class="login__alert" type="error" :show-icon="false">
+            {{ errText }}
+          </NAlert>
+
+          <NButton
+            class="login__btn"
+            type="primary"
+            size="large"
+            block
+            :loading="loading"
+            :disabled="loading"
+            @click="onSubmit"
+          >
+            登 录
+          </NButton>
+        </NForm>
+
+        <footer class="login__footer">
+          忘记密码请联系本单位管理员重置
+        </footer>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
 .login {
+  display: flex;
+  height: 100vh;
+}
+
+/* ── 品牌区：极淡的点阵 + 主色浅阶渐变，给大片留白一点"纸张"质感 ── */
+.login__brand {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 56px);
+  overflow: auto;
+  background:
+    radial-gradient(circle at 1px 1px, rgb(0 82 217 / 6%) 1px, transparent 0) 0 0 / 22px 22px,
+    linear-gradient(165deg, #eaf2ff 0%, #f7f9fc 42%, #fff 100%);
+}
+
+.login__brand-head {
+  display: flex;
+  flex: none;
+  gap: 12px;
+  align-items: center;
+}
+
+.login__logo {
+  width: 34px;
+  height: 34px;
+  object-fit: contain;
+}
+
+.login__brand-name {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.login__hero {
+  flex: none;
+  margin-top: clamp(20px, 4vh, 40px);
+}
+
+.login__hero-title {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0 0 12px;
+  font-size: clamp(24px, 2.6vw, 36px);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.login__hero-title em {
+  font-size: clamp(15px, 1.6vw, 20px);
+  font-style: normal;
+  font-weight: 600;
+  color: #0052d9;
+}
+
+.login__hero-desc {
+  max-width: 520px;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #6b7280;
+}
+
+.login__hero-img {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 150px;
+  margin: clamp(8px, 2vh, 20px) 0;
+}
+
+.login__hero-img img {
+  max-width: min(88%, 520px);
+  max-height: 100%;
+}
+
+.login__features {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: 14px 28px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.login__feature {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.login__feature-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  color: #0052d9;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgb(0 82 217 / 10%);
+}
+
+.login__feature-text {
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+}
+
+.login__feature-text em {
+  font-size: 12px;
+  font-style: normal;
+  color: #8a8a8a;
+}
+
+/* ── 表单区 ── */
+.login__panel {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: min(46%, 520px);
+  padding: 24px clamp(20px, 4vw, 56px);
+  background: #fff;
+  border-left: 1px solid #f0f0f0;
+}
+
+.login__form-wrap {
+  width: 100%;
+  max-width: 360px;
+}
+
+.login__title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.login__subtitle {
+  margin: 6px 0 24px;
+  font-size: 13px;
+  color: #8a8a8a;
+}
+
+.login__hint {
+  font-size: 12px;
+  color: #f0a020;
+}
+
+.login__alert {
+  margin-bottom: 16px;
+}
+
+.login__captcha {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+}
+
+.login__captcha-img {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 116px;
+  height: 34px;
+  padding: 0;
+  overflow: hidden;
+  font-size: 12px;
+  color: #8a8a8a;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+}
+
+.login__captcha-img img {
+  display: block;
+  width: 100%;
   height: 100%;
-  background-color: var(--color-bg-5);
+  object-fit: cover;
+}
 
-  &__row {
-    width: 100%;
-    height: 100%;
-  }
+.login__btn {
+  height: 42px;
+  letter-spacing: 0.12em;
+}
 
-  &__col {
-    height: 100%;
+.login__footer {
+  padding-top: 16px;
+  margin-top: 22px;
+  font-size: 12px;
+  color: #8a8a8a;
+  text-align: center;
+  border-top: 1px solid #f0f0f0;
+}
 
-    &--brand {
-      min-height: 0;
-    }
-  }
-
-  &__panel {
-    position: relative;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 100%;
-    padding: 24px 20px 16px;
-    background: var(--color-bg-1);
-  }
-
-  &__body {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 0;
-  }
-
-  &__toolbar {
-    position: absolute;
-    top: 20px;
-    right: clamp(16px, 3vw, 30px);
-    z-index: 10;
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-
-  &__content {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 400px;
-  }
-
-  &__mobile-brand {
+/* 窄屏：品牌区让位，登录框独占 */
+@media (width <= 900px) {
+  .login__brand {
     display: none;
-    gap: 12px;
-    align-items: center;
-    margin-bottom: 28px;
   }
 
-  &__mobile-logo {
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-    border-radius: var(--border-radius-medium);
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &__mobile-title {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-  }
-
-  &__mobile-desc {
-    margin: 4px 0 0;
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
-
-  &__title {
-    margin: 0;
-    font-size: 26px;
-    font-weight: 600;
-  }
-
-  &__subtitle {
-    margin: 8px 0 28px;
-    font-size: 13px;
-    color: var(--color-text-3);
-  }
-
-  &__form {
-    :deep(.arco-form-item) {
-      margin-bottom: 18px;
-    }
-  }
-
-  &__input-icon {
-    color: var(--color-text-3);
-  }
-
-  &__hint {
-    font-size: 12px;
-    color: rgb(var(--warning-6));
-  }
-
-  &__alert {
-    margin-bottom: 16px;
-  }
-
-  &__captcha {
-    display: flex;
-    gap: 10px;
-    align-items: center;
+  .login__panel {
     width: 100%;
-  }
-
-  &__captcha-img {
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    width: 116px;
-    height: 40px;
-    padding: 0;
-    overflow: hidden;
-    font-size: 12px;
-    color: var(--color-text-3);
-    cursor: pointer;
-    background: #fff;
-    border: 1px solid var(--color-border-3);
-    border-radius: var(--border-radius-medium);
-
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &__btn {
-    height: 44px;
-    letter-spacing: 0.12em;
-  }
-
-  &__footer {
-    padding-top: 16px;
-    font-size: 12px;
-    color: var(--color-text-3);
-    text-align: center;
-    border-top: 1px solid var(--color-border-2);
-  }
-
-  @media (width <= 768px) {
-    &__mobile-brand {
-      display: flex;
-    }
+    border-left: none;
   }
 }
 </style>
diff --git a/frontend-pc/src/views/notify/index.vue b/frontend-pc/src/views/notify/index.vue
index a1481a6..ef96ee5 100644
--- a/frontend-pc/src/views/notify/index.vue
+++ b/frontend-pc/src/views/notify/index.vue
@@ -1,98 +1,17 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>通知记录</template>
-      <template #extra>
-        <span class="notify__hint">
-          「已发出」= 站内信已写进他的消息中心；微信推送要看学生有没有授权
-        </span>
-      </template>
-
-      <!--
-        ⚠️ 这一行是刻意留的：一期的推送渠道只有微信订阅消息（一次性授权），
-        拿不到授权时消息**只落站内信**。不写清这一点，
-        运营会把「额度不足跳过」当成系统故障去查通道。
-      -->
-      <a-alert v-if="rate" type="normal" class="notify__rate">
-        <template #title>
-          送达率 <b>{{ rate }}</b>
-          —— 分母含「额度不足跳过」。
-          跳过**不是失败**：内容已经进了学生的消息中心，只是没有推送。
-          要提升这个数字，该做的是引导学生授权，而不是查通道。
-        </template>
-      </a-alert>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-select v-model="query.taskId" placeholder="全部任务" allow-clear size="small"
-            class="notify__task" :loading="taskLoading" @change="search">
-            <a-option v-for="t in taskOptions" :key="t.id" :value="t.id">{{ t.taskName }}</a-option>
-          </a-select>
-          <a-select v-model="query.bizType" placeholder="全部类型" allow-clear size="small"
-            class="notify__biz" @change="search">
-            <a-option v-for="b in BIZ_TYPES" :key="b.value" :value="b.value">{{ b.label }}</a-option>
-          </a-select>
-          <a-select v-model="query.status" placeholder="全部状态" allow-clear size="small"
-            class="notify__status" @change="search">
-            <a-option v-for="(v, k) in NOTIFY_STATUS" :key="k" :value="Number(k)">{{ v.text }}</a-option>
-          </a-select>
-          <a-button size="small" @click="load">
-            <template #icon><IconRefresh /></template>
-            刷新
-          </a-button>
-        </a-space>
-      </div>
-
-      <a-table :data="list" :loading="loading" row-key="id" :pagination="pagination"
-        :scroll="{ x: 1100 }" @page-change="onPageChange">
-        <template #columns>
-          <a-table-column title="时间" :width="150">
-            <template #cell="{ record }">
-              <span class="notify__muted">{{ fmt(record.sendTime) }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="收件人" :width="140">
-            <template #cell="{ record }">
-              <div>{{ record.receiverName || '—' }}</div>
-              <div class="notify__muted">ID {{ record.receiverId }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="类型" :width="110">
-            <template #cell="{ record }">
-              <a-tag size="small">{{ bizTypeText(record.bizType) }}</a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="内容" :width="300">
-            <template #cell="{ record }">
-              <div class="notify__content">{{ record.content || '—' }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="渠道" :width="130">
-            <template #cell="{ record }">
-              <span class="notify__muted">{{ channelText(record.channel) }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="状态" :width="150">
-            <template #cell="{ record }">
-              <a-tag size="small" :color="notifyStatus(record.status).color">
-                {{ record.statusText || notifyStatus(record.status).text }}
-              </a-tag>
-              <!-- 失败原因要露出来：不然「发送失败」这四个字没法排查 -->
-              <div v-if="record.failReason" class="notify__fail" :title="record.failReason">
-                {{ record.failReason }}
-              </div>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
+import type { CSSProperties } from 'vue'
 import type { NotifyRecord } from '@/apis/xt/notify'
-import { IconRefresh } from '@arco-design/web-vue/es/icon'
-import { computed, reactive, ref } from 'vue'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NDataTable,
+  NSelect,
+  NSpace,
+  NTag
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref } from 'vue'
 import {
   BIZ_TYPES,
   bizTypeText,
@@ -102,21 +21,23 @@ import {
   notifyStatus
 } from '@/apis/xt/notify'
 import { getTaskList } from '@/apis/xt/task'
+import { listPagination } from '@/composables/pagination'
+import AppIcon from '@/icons/AppIcon.vue'
+import { tagType } from '@/utils/tag'
 
 /**
  * 通知记录（《03-接口设计》§13.3）。
  *
  * ## 这一屏存在的意义：把「通知到底发出去没有」变成可回答的
  *
- * 在此之前，驳回与审批只能回 `notifySent=false` 并让老师口头告知。
- * 现在每次通知都会写一条发送记录，所以运营能看到：
- *   · **已送达**：站内信写进去了；
- *   · **额度不足跳过**（3）：内容进了站内信，但没推送 —— **这不是故障**，
+ * 每次通知都会写一条发送记录，所以运营能看到三种结果：
+ *   · **已送达**（1）：站内信写进去了；
+ *   · **额度不足跳过**（3）：内容进了站内信，但**没有推送** —— 这**不是故障**，
  *     该做的是引导学生授权；
  *   · **发送失败**（2）：真的出了问题（微信接口异常等），要查通道。
  *
  * 把 2 和 3 混在一起显示成"失败"，会让运营一直去查通道故障，
- * 而真正的原因（学生没授权）永远没人管。
+ * 而真正的原因（学生没授权）永远没人管 —— 所以标签颜色与文案都分开。
  */
 defineOptions({ name: 'NotifyRecords' })
 
@@ -125,7 +46,24 @@ const taskLoading = ref(false)
 const list = ref<NotifyRecord[]>([])
 const total = ref(0)
 const rate = ref('')
-const taskOptions = ref<Array<{ id: number, taskName: string }>>([])
+const taskOptions = ref<Array<{ label: string, value: number }>>([])
+
+/**
+ * `n-card` 的内容区要变成"能撑满的 flex 列"（列表页高度链的中间一环）。
+ *
+ * ⚠️ 曾经用 `:deep(.n-card__content)` 写这条，**但那是个不存在的类名**：
+ *    naive-ui 2.45.3 的内容区是 `.n-card-content`（`Card.mjs` 里 `cB("card-content")`）。
+ *    匹配不到 → 内容区还是 `display: block` → `.page-card__body` 的 `flex: 1` 无处可长
+ *    → 表格只有 81px 高、分页器浮在卡片中间（不报错，只是"看起来没贴底"）。
+ *    所以这里用 `content-style` 直接写在元素上，不依赖类名。
+ */
+const contentStyle: CSSProperties = {
+  flex: '1 1 auto',
+  minHeight: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+}
 
 const query = reactive<{
   taskId?: number
@@ -141,31 +79,98 @@ const query = reactive<{
   pageSize: 20
 })
 
-const pagination = computed(() => ({
-  current: query.pageNum,
+/**
+ * 送达率的分母含「额度不足跳过」。
+ *
+ * ⚠️ 这句解释必须留在界面上：不写清，运营看到 80% 就会去查通道，
+ *    而实际该做的是引导学生授权（一次性订阅消息，发几次耗几次）。
+ */
+const rateText = computed(() => rate.value || '—')
+
+const statusOptions = computed(() =>
+  Object.keys(NOTIFY_STATUS)
+    .map(Number)
+    .sort((a, b) => a - b)
+    .map((k) => ({ label: NOTIFY_STATUS[k].text, value: k }))
+)
+
+/** `remote` 模式：每页条数改了必须重新取数，否则"分页器说 50、表里 20" */
+const pagination = computed(() => listPagination({
+  page: query.pageNum,
   pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
+  itemCount: total.value,
+  pageSizes: [20, 50, 100]
 }))
 
 function fmt(v?: string) {
   return v ? v.replace('T', ' ').slice(0, 16) : '—'
 }
 
+const columns = computed<DataTableColumns<NotifyRecord>>(() => [
+  {
+    title: '时间',
+    key: 'sendTime',
+    width: 150,
+    render: (row) => h('span', { class: 'notify__muted' }, fmt(row.sendTime))
+  },
+  {
+    title: '收件人',
+    key: 'receiverName',
+    width: 140,
+    render: (row) => h('div', [
+      h('div', row.receiverName || '—'),
+      h('div', { class: 'notify__muted' }, `ID ${row.receiverId ?? '—'}`)
+    ])
+  },
+  {
+    title: '类型',
+    key: 'bizType',
+    width: 110,
+    render: (row) => h(NTag, { size: 'small', bordered: false }, { default: () => bizTypeText(row.bizType) })
+  },
+  {
+    title: '内容',
+    key: 'content',
+    width: 300,
+    // 关键词只用于本页过滤（接口没有内容搜索参数），所以不做服务端查询
+    render: (row) => h('div', { class: 'notify__content' }, row.content || '—')
+  },
+  {
+    title: '渠道',
+    key: 'channel',
+    width: 130,
+    render: (row) => h('span', { class: 'notify__muted' }, channelText(row.channel))
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 170,
+    render: (row) => {
+      const meta = notifyStatus(row.status)
+      return h('div', [
+        h(NTag, { size: 'small', bordered: false, type: tagType(meta.color) }, { default: () => row.statusText || meta.text }),
+        // 失败原因要露出来：不然「发送失败」这四个字没法排查
+        row.failReason
+          ? h('div', { class: 'notify__fail', title: row.failReason }, row.failReason)
+          : null
+      ])
+    }
+  }
+])
+
 async function load() {
   loading.value = true
   try {
-    const res = await getNotifyRecords({
+    const page = await getNotifyRecords({
       taskId: query.taskId,
       bizType: query.bizType,
       status: query.status,
       pageNum: query.pageNum,
       pageSize: query.pageSize
     })
-    list.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
-    rate.value = res.data?.deliveryRate ?? ''
+    list.value = page?.list ?? []
+    total.value = page?.total ?? 0
+    rate.value = page?.deliveryRate ?? ''
   } finally {
     loading.value = false
   }
@@ -174,8 +179,8 @@ async function load() {
 async function loadTasks() {
   taskLoading.value = true
   try {
-    const res = await getTaskList({ pageNum: 1, pageSize: 200 })
-    taskOptions.value = (res.data?.list ?? []).map((t) => ({ id: t.id, taskName: t.taskName }))
+    const page = await getTaskList({ pageNum: 1, pageSize: 200 })
+    taskOptions.value = (page?.list ?? []).map((t) => ({ label: t.taskName, value: t.id }))
   } finally {
     taskLoading.value = false
   }
@@ -191,54 +196,144 @@ function onPageChange(page: number) {
   load()
 }
 
-load()
-loadTasks()
+function onPageSizeChange(size: number) {
+  query.pageSize = size
+  query.pageNum = 1
+  load()
+}
+
+onMounted(() => {
+  load()
+  loadTasks()
+})
 </script>
 
-<style lang="scss" scoped>
-.notify {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+<template>
+  <NCard class="page-card notify" :bordered="false" title="通知记录" :content-style="contentStyle">
+    <template #header-extra>
+      <span class="toolbar__hint">
+        「已送达」= 站内信已写进他的消息中心；微信推送要看学生有没有授权
+      </span>
+    </template>
 
-  &__rate {
-    margin-bottom: 12px;
-  }
+    <!--
+      ⚠️ 这一段是刻意留的：推送渠道只有微信订阅消息（一次性授权），
+      拿不到授权时消息**只落站内信**。不写清这一点，
+      运营会把「额度不足跳过」当成系统故障去查通道。
+    -->
+    <NAlert type="info" class="notify__rate">
+      <template #header>送达率 {{ rateText }}</template>
+      分母含「额度不足跳过」。跳过<strong>不是失败</strong>：内容已经进了学生的消息中心，
+      只是没有推送。要提升这个数字，该做的是引导学生授权，而不是查通道。
+    </NAlert>
 
-  &__task {
-    width: 200px;
-  }
+    <!--
+      工具条：筛选控件**统一默认尺寸**（同一行不要大小混用）。
+      之前全是 `size="small"`，28px 的白底控件贴在白底表格上几乎看不出边界。
+    -->
+    <div class="toolbar">
+      <NSpace align="center" :size="8">
+        <NSelect
+          v-model:value="query.taskId"
+          class="notify__task"
+          clearable
+          placeholder="全部任务"
+          :loading="taskLoading"
+          :options="taskOptions"
+          @update:value="search"
+        />
+        <NSelect
+          v-model:value="query.bizType"
+          class="notify__biz"
+          clearable
+          placeholder="全部类型"
+          :options="BIZ_TYPES"
+          @update:value="search"
+        />
+        <NSelect
+          v-model:value="query.status"
+          class="notify__status"
+          clearable
+          placeholder="全部状态"
+          :options="statusOptions"
+          @update:value="search"
+        />
+        <NButton @click="load">
+          <template #icon>
+            <AppIcon name="refresh" :size="16" />
+          </template>
+          刷新
+        </NButton>
+      </NSpace>
+    </div>
 
-  &__biz {
-    width: 140px;
-  }
+    <div class="page-card__body notify__body">
+      <!--
+        尺寸口径：横向 `:scroll-x="1000"`（6 列合计），纵向 `flex-height` 撑满 `.page-card__body`
+        —— Naive **没有** Arco 的 `:scroll="{ x, y }"`，照抄会被静默忽略（见 styles/index.scss）。
+      -->
+      <NDataTable
+        remote
+        flex-height
+        size="small"
+        :columns="columns"
+        :data="list"
+        :loading="loading"
+        :row-key="(row: NotifyRecord) => row.id"
+        :pagination="pagination"
+        :scroll-x="1000"
+        @update:page="onPageChange"
+        @update:page-size="onPageSizeChange"
+      />
+    </div>
+  </NCard>
+</template>
 
-  &__status {
-    width: 180px;
-  }
+<style scoped>
+/**
+ * 高度链的中间一环由 `contentStyle` 写在卡片内容元素上（原因见 script 里那段说明）。
+ * 这里只保证"卡片内容区里的固定区块不被挤压"，剩下的空间全给表格。
+ */
+.notify__rate {
+  flex: none;
+  margin-bottom: 16px;
+}
 
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.notify__task {
+  width: 200px;
+}
 
-  &__content {
-    display: -webkit-box;
-    overflow: hidden;
-    font-size: 13px;
-    line-height: 1.5;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
+.notify__biz {
+  width: 140px;
+}
 
-  &__fail {
-    margin-top: 4px;
-    overflow: hidden;
-    font-size: 12px;
-    color: rgb(var(--red-6));
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.notify__status {
+  width: 180px;
+}
+
+/* ⚠️ 下面这些类都出现在**渲染函数**里（表格列）。渲染函数生成的元素不带 `data-v-*`，
+   写成 `.notify__muted` 这种普通 scoped 选择器**匹配不到**（不报错，只是样式全丢），
+   所以统一用 `:deep()`。 */
+:deep(.notify__muted) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+:deep(.notify__content) {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.5;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+:deep(.notify__fail) {
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 12px;
+  color: #d54941;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
diff --git a/frontend-pc/src/views/org/OrgFormModal.vue b/frontend-pc/src/views/org/OrgFormModal.vue
index 8e58161..2e9fbaf 100644
--- a/frontend-pc/src/views/org/OrgFormModal.vue
+++ b/frontend-pc/src/views/org/OrgFormModal.vue
@@ -1,60 +1,21 @@
-<template>
-  <a-modal v-model:visible="visible" :title="title" :width="480" :mask-closable="false" @ok="confirm" @cancel="close">
-    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
-      <a-form-item v-if="!isEdit" label="上级组织">
-        <a-input :model-value="parentName" disabled />
-        <template #extra>
-          <span class="org-form__hint">
-            新增后不支持直接拖拽调整层级，请在建的时候就选对上级。
-          </span>
-        </template>
-      </a-form-item>
-
-      <a-form-item field="orgName" label="组织名称">
-        <a-input v-model="form.orgName" placeholder="如 24中技数控1班" :max-length="128" allow-clear />
-      </a-form-item>
-
-      <a-form-item field="orgType" label="组织类型">
-        <a-select v-model="form.orgType" placeholder="请选择">
-          <a-option v-for="(name, code) in ORG_TYPE_NAMES" :key="code" :value="Number(code)">
-            {{ name }}
-          </a-option>
-        </a-select>
-        <template #extra>
-          <span class="org-form__hint">
-            类型必须比上级更低一级：学校 &gt; 院系/专业 &gt; 班级。
-          </span>
-        </template>
-      </a-form-item>
-
-      <a-form-item field="orgCode" label="组织编码">
-        <a-input v-model="form.orgCode" placeholder="班号或简称，租户内唯一" :max-length="64" allow-clear />
-      </a-form-item>
-
-      <a-form-item field="sortNo" label="排序号">
-        <a-input-number v-model="form.sortNo" :min="0" :max="9999" />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
-import type { OrgTreeVO, OrgUpsertReq } from '@/apis/xt/org'
-import { Message } from '@arco-design/web-vue'
+import type { FormInst, FormRules } from 'naive-ui'
+import type { OrgTreeVO } from '@/apis/xt/org'
+import { NButton, NForm, NFormItem, NInput, NInputNumber, NModal, NSelect, NSpace, useMessage } from 'naive-ui'
+import { computed, reactive, ref } from 'vue'
 import * as orgApi from '@/apis/xt/org'
 import { ORG_TYPE_NAMES } from '@/apis/xt/org'
 
 /**
  * 组织新增 / 编辑弹窗。
  *
- * 三条服务端规则在界面上提前提示，减少"提交了才知道不行"：
- *   1. 组织编码租户内唯一
- *   2. 组织类型必须比上级更低一级
- *   3. 修改时不提供改上级（避免误操作把整棵子树搬走）
+ * 三条服务端规则在界面上提前说明，减少"提交了才知道不行"：
+ *   1. 组织编码租户内唯一；
+ *   2. 组织类型必须比上级低一级（学校 > 院系/专业 > 班级）；
+ *   3. **修改时不提供改上级** —— 改层级会连带搬走整棵子树，风险高，不开放。
  *
- * `tenantId` 由父页面传入，**只有平台运营的页面会给值**：它决定这个组织建到哪所学校下
- * （服务端按请求头 `X-Tenant-Id` 摆租户上下文）。学校管理员传 null，行为与以前一致。
+ * `tenantId` 由父页面传入，**只有平台运营会传值**：它决定这个组织建到哪所学校下。
+ * 学校管理员的租户由 token 决定，传了也会被服务端忽略。
  */
 defineOptions({ name: 'OrgFormModal' })
 
@@ -65,56 +26,78 @@ const props = withDefaults(defineProps<{ tenantId?: number | null }>(), {
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
+
+const message = useMessage()
+
 const visible = ref(false)
 const submitting = ref(false)
 const detailId = ref<number | null>(null)
 const parentId = ref<number | null>(null)
 const parentName = ref('（顶级）')
-
-const formRef = useTemplateRef('formRef')
+const formRef = ref<FormInst | null>(null)
 
 const isEdit = computed(() => !!detailId.value)
 const title = computed(() => (isEdit.value ? '修改组织' : '新增组织'))
 
-const getInitForm = (): OrgUpsertReq => ({
-  parentId: null,
-  orgName: '',
-  orgType: 1,
-  orgCode: '',
-  sortNo: 0
-})
+const typeOptions = Object.entries(ORG_TYPE_NAMES).map(([code, name]) => ({
+  label: name,
+  value: Number(code)
+}))
 
-const form = reactive<OrgUpsertReq>(getInitForm())
-
-const rules: FormInstance['rules'] = {
-  orgName: [{ required: true, message: '请填写组织名称' }],
-  orgType: [{ required: true, message: '请选择组织类型' }],
-  orgCode: [{ required: true, message: '请填写组织编码' }]
+/**
+ * 表单模型。
+ *
+ * `sortNo` 用 `number | null` 而不是可选：`n-input-number` 被清空时回传 `null`，
+ * 声明成 `number | undefined` 会在 v-model 上产生类型打架（运行期没事，但 vue-tsc 会红）。
+ * 提交时再收敛成接口要的形状。
+ */
+interface OrgForm {
+  parentId: number | null
+  orgName: string
+  orgType: number
+  orgCode: string
+  sortNo: number | null
 }
 
-/** 由父节点推断下一级类型，减少用户选错 */
+function emptyForm(): OrgForm {
+  return { parentId: null, orgName: '', orgType: 1, orgCode: '', sortNo: 0 }
+}
+
+// 顺序要紧：下面的 computed 读的是 form，所以 form 必须先建好
+// （接口请求体在提交时手写组装：接口的 `sortNo?: number` 与表单的 `number | null` 不是一回事）
+const form = reactive<OrgForm>(emptyForm())
+
+const rules: FormRules = {
+  orgName: [{ required: true, message: '请填写组织名称', trigger: ['blur', 'input'] }],
+  orgType: [{ required: true, message: '请选择组织类型', trigger: ['change'] }],
+  orgCode: [{ required: true, message: '请填写组织编码', trigger: ['blur', 'input'] }]
+}
+
+/** 由上级推断下一级类型，减少选错 */
 function nextTypeOf(parent: OrgTreeVO | null): number {
-  if (!parent) return 1
+  if (!parent) {
+    return 1
+  }
   return Math.min((parent.orgType ?? 1) + 1, 4)
 }
 
-/** 新增 */
-function add(parent: OrgTreeVO | null) {
+/** 新增（parent 为 null 表示建顶级组织） */
+function add(parent: OrgTreeVO | null): void {
   detailId.value = null
   parentId.value = parent?.id ?? null
   parentName.value = parent?.orgName ?? '（顶级）'
-  Object.assign(form, getInitForm())
+  Object.assign(form, emptyForm())
   form.parentId = parent?.id ?? null
   form.orgType = nextTypeOf(parent)
   visible.value = true
 }
 
 /** 编辑 */
-function edit(row: OrgTreeVO) {
+function edit(row: OrgTreeVO): void {
   detailId.value = row.id
   parentId.value = null
   parentName.value = '（不修改）'
-  Object.assign(form, getInitForm())
+  Object.assign(form, emptyForm())
   form.orgName = row.orgName
   form.orgType = row.orgType
   form.orgCode = row.orgCode ?? ''
@@ -122,34 +105,33 @@ function edit(row: OrgTreeVO) {
   visible.value = true
 }
 
-function close() {
-  visible.value = false
-}
-
-async function confirm() {
-  const valid = await formRef.value?.validate()
-  if (valid) return
+async function confirm(): Promise<void> {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
 
   submitting.value = true
   try {
-    if (isEdit.value) {
-      // 修改时不传 parentId：改层级由服务端重算子树路径，风险高，这里不开放
-      await orgApi.updateOrg(detailId.value!, {
+    if (isEdit.value && detailId.value) {
+      // 修改时不传 parentId：改层级由服务端重算子树路径，这里不开放
+      await orgApi.updateOrg(detailId.value, {
         orgName: form.orgName.trim(),
         orgType: form.orgType,
         orgCode: form.orgCode.trim(),
         sortNo: form.sortNo ?? 0
       }, props.tenantId)
-      Message.success('已保存')
+      message.success('已保存')
     } else {
       await orgApi.addOrg({
-        parentId: form.parentId ?? null,
+        parentId: parentId.value,
         orgName: form.orgName.trim(),
         orgType: form.orgType,
         orgCode: form.orgCode.trim(),
         sortNo: form.sortNo ?? 0
       }, props.tenantId)
-      Message.success('已新增')
+      message.success('已新增')
     }
     visible.value = false
     emit('save-success')
@@ -161,10 +143,64 @@ async function confirm() {
 defineExpose({ add, edit })
 </script>
 
-<style lang="scss" scoped>
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="card"
+    :title="title"
+    style="width: 480px"
+    :mask-closable="false"
+  >
+    <NForm ref="formRef" :model="form" :rules="rules" label-placement="top">
+      <NFormItem v-if="!isEdit" label="上级组织">
+        <NInput :value="parentName" disabled />
+        <template #feedback>
+          <span class="org-form__hint">新增后不支持调整层级，请在建的时候就选对上级</span>
+        </template>
+      </NFormItem>
+
+      <NFormItem label="组织名称" path="orgName">
+        <NInput v-model:value="form.orgName" placeholder="如 24中技数控1班" :maxlength="128" clearable />
+      </NFormItem>
+
+      <NFormItem label="组织类型" path="orgType">
+        <NSelect v-model:value="form.orgType" :options="typeOptions" placeholder="请选择" />
+        <template #feedback>
+          <span class="org-form__hint">类型必须比上级更低一级：学校 &gt; 院系/专业 &gt; 班级</span>
+        </template>
+      </NFormItem>
+
+      <NFormItem label="组织编码" path="orgCode">
+        <NInput v-model:value="form.orgCode" placeholder="班号或简称，租户内唯一" :maxlength="64" clearable />
+      </NFormItem>
+
+      <NFormItem label="排序号">
+        <NInputNumber v-model:value="form.sortNo" :min="0" :max="9999" class="org-form__num" />
+      </NFormItem>
+    </NForm>
+
+    <template #footer>
+      <NSpace justify="end">
+        <NButton @click="visible = false">
+          取消
+        </NButton>
+        <NButton type="primary" :loading="submitting" @click="confirm">
+          {{ isEdit ? '保存' : '新增' }}
+        </NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+<style scoped>
+/* 表单里的说明文字统一用"第三级灰"，与页面/其它弹窗一致（原来是各写一个 #8a8a8a） */
 .org-form__hint {
   font-size: 12px;
-  line-height: 1.7;
-  color: var(--color-text-3);
+  color: var(--xt-text-3);
+}
+
+/* 排序号：占满弹窗的一列宽度（`n-input-number` 默认是内容宽，在一排里会缩成一小截） */
+.org-form__num {
+  width: 100%;
 }
 </style>
diff --git a/frontend-pc/src/views/org/index.vue b/frontend-pc/src/views/org/index.vue
index ba0005c..37398b6 100644
--- a/frontend-pc/src/views/org/index.vue
+++ b/frontend-pc/src/views/org/index.vue
@@ -1,215 +1,169 @@
-<template>
-  <GiPageLayout>
-    <!-- 左：组织树 -->
-    <template #left>
-      <a-card :bordered="false" class="org__tree-card">
-        <template #title>
-          <a-space>
-            <IconFolder />
-            <span>组织架构</span>
-          </a-space>
-        </template>
-        <template #extra>
-          <span class="org__hint">{{ totalNodes }} 个节点</span>
-        </template>
-
-        <!--
-          平台运营必须先选学校：组织树本来就是租户内的东西，而平台的租户过滤是关掉的。
-          不选就请求，拿到的是"所有租户的组织混在一棵树里"—— 只有一所学校有数据时，
-          它和学校管理员看到的完全一样，看不出错。
-        -->
-        <GiTenantPicker
-          v-if="isPlatform"
-          v-model="actingStore.tenantId"
-          class="org__tenant"
-          placeholder="选择学校（平台运营）"
-        />
-
-        <a-input-search v-model="keyword" placeholder="搜索名称或编码" allow-clear class="org__search" />
-
-        <!--
-          ⚠️ Arco 的 `a-empty` 里一旦给了默认插槽，`description` 就**不再渲染**
-             （它的实现是 `<slot>{{ description }}</slot>`）—— 所以文案要写在插槽里，
-             否则页面上只剩半句话。
-        -->
-        <a-empty v-if="needPickTenant">
-          <div class="org__empty-title">请先选择学校</div>
-          <span class="org__hint">组织架构按学校隔离，选定学校后即可查看与维护</span>
-        </a-empty>
-
-        <a-spin v-else-if="loading" class="org__loading" />
-
-        <a-empty v-else-if="!tree.length">
-          <div class="org__empty-title">还没有组织</div>
-          <a-button v-if="canManage" type="primary" size="small" @click="onAdd(null)">
-            新增顶级组织
-          </a-button>
-        </a-empty>
-
-        <a-tree v-else v-model:selected-keys="selectedKeys" :data="treeData" :field-names="{ key: 'id', title: 'orgName', children: 'children' }"
-          block-node :default-expand-all="true" @select="onSelect">
-          <template #title="node">
-            <span class="org__node">
-              <span class="org__node-name">{{ node.orgName }}</span>
-              <a-tag size="small" class="org__node-type">{{ ORG_TYPE_NAMES[node.orgType] ?? '—' }}</a-tag>
-              <span v-if="node.studentCount" class="org__node-count">{{ node.studentCount }} 人</span>
-            </span>
-          </template>
-        </a-tree>
-
-        <template #footer>
-          <a-button v-if="canManage && !needPickTenant" long size="small" @click="onAdd(null)">
-            <template #icon><IconPlus /></template>
-            新增顶级组织
-          </a-button>
-        </template>
-      </a-card>
-    </template>
-
-    <!-- 右：详情 -->
-    <a-card v-if="!selected" :bordered="false">
-      <a-empty description="从左侧选择一个组织" />
-    </a-card>
-
-    <template v-else>
-      <a-card :bordered="false">
-        <template #title>{{ selected.orgName }}</template>
-        <template #extra>
-          <a-tag>{{ ORG_TYPE_NAMES[selected.orgType] ?? '未知' }}</a-tag>
-        </template>
-
-        <a-descriptions :column="2" size="large">
-          <a-descriptions-item label="组织编码">{{ selected.orgCode ?? '—' }}</a-descriptions-item>
-          <a-descriptions-item label="负责人">{{ selected.leaderName ?? '未指定' }}</a-descriptions-item>
-          <a-descriptions-item label="排序号">{{ selected.sortNo }}</a-descriptions-item>
-          <a-descriptions-item label="学生数">{{ selected.studentCount ?? 0 }} 人</a-descriptions-item>
-          <a-descriptions-item label="下级组织">{{ (selected.children ?? []).length }} 个</a-descriptions-item>
-          <a-descriptions-item label="状态">
-            <a-tag :color="selected.status === 1 ? 'green' : 'gray'">
-              {{ selected.status === 1 ? '正常' : '停用' }}
-            </a-tag>
-          </a-descriptions-item>
-        </a-descriptions>
-
-        <a-space v-if="canManage" class="org__acts">
-          <a-button type="primary" size="small" @click="onAdd(selected)">
-            <template #icon><IconPlus /></template>
-            新增下级
-          </a-button>
-          <a-button size="small" @click="onEdit(selected)">
-            <template #icon><IconEdit /></template>
-            修改
-          </a-button>
-          <a-popconfirm content="删除后不可恢复，确认删除？" type="warning" @ok="onDelete(selected)">
-            <a-button size="small" status="danger">
-              <template #icon><IconDelete /></template>
-              删除
-            </a-button>
-          </a-popconfirm>
-        </a-space>
-      </a-card>
-
-      <a-card v-if="(selected.children ?? []).length" :bordered="false">
-        <template #title>下级组织</template>
-        <template #extra>
-          <span class="org__hint">{{ (selected.children ?? []).length }} 个</span>
-        </template>
-        <a-table :data="selected.children" :pagination="false" row-key="id" size="small">
-          <template #columns>
-            <a-table-column title="名称" data-index="orgName" />
-            <a-table-column title="类型" :width="110">
-              <template #cell="{ record }">
-                <a-tag size="small">{{ ORG_TYPE_NAMES[record.orgType] ?? '—' }}</a-tag>
-              </template>
-            </a-table-column>
-            <a-table-column title="编码" data-index="orgCode" :width="130" />
-            <a-table-column title="学生数" data-index="studentCount" :width="90" />
-            <a-table-column title="操作" :width="80">
-              <template #cell="{ record }">
-                <a-link @click="onSelect([record.id], { node: record })">查看</a-link>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
-      </a-card>
-    </template>
-
-    <OrgFormModal ref="formModalRef" :tenant-id="actingStore.tenantId" @save-success="load" />
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns, TreeOption } from 'naive-ui'
+import type { VNodeChild } from 'vue'
 import type { OrgTreeVO } from '@/apis/xt/org'
-import { Message } from '@arco-design/web-vue'
-import { IconDelete, IconEdit, IconFolder, IconPlus } from '@arco-design/web-vue/es/icon'
+import {
+  NButton,
+  NCard,
+  NDataTable,
+  NDescriptions,
+  NDescriptionsItem,
+  NEmpty,
+  NInput,
+  NPopconfirm,
+  NSpace,
+  NSpin,
+  NTag,
+  NTree,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import * as orgApi from '@/apis/xt/org'
 import { ORG_TYPE_NAMES } from '@/apis/xt/org'
-import { useActingTenantStore, useUserStore } from '@/stores'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useActingTenantStore } from '@/stores/acting-tenant'
+import { useUserStore } from '@/stores/user'
 import OrgFormModal from './OrgFormModal.vue'
 
 /**
  * 组织架构。
  *
- * 形态：左树右详情，是管理后台最常规的主从布局。
- * 服务端的约束（编码唯一、类型层级、有下级不可删）在界面上提前提示，
- * 但不做前端拦截 —— 判定权威在服务端，前端只负责减少无效提交。
+ * 形态：左树右详情（管理后台最常规的主从布局）。
+ * 服务端的约束（编码唯一、类型必须比上级低一级、有下级或有账号不可删）在界面上提前提示，
+ * 但**不做前端拦截** —— 判定权威在服务端，前端只负责减少无效提交。
+ *
+ * ⚠️ 平台运营必须先择校（入口在顶栏）：组织树本来就是租户内的东西，而平台身份下
+ *    服务端关掉了租户过滤 —— 不选就请求，拿到的是所有学校的组织混在一棵树里，
+ *    而只有一所学校有数据时它与学校管理员看到的完全一样，看不出错。
  */
 defineOptions({ name: 'Org' })
 
-const userStore = useUserStore()
-
-/**
- * 平台运营的「当前学校」。
- *
- * 服务端对平台关掉了租户过滤，所以平台**必须先指明看哪所学校**才能拿到租户内的数据
- * （见 `@/apis/xt/acting-tenant`）。选择存在 `useActingTenantStore` 里，
- * 与「账号管理」共用 —— 切页面不用重选，也不会出现两个页面各看一所学校。
- * 学校管理员的 `isPlatform` 为 false，这个值恒为 undefined —— 不传头，行为与以前一致。
- */
-const actingStore = useActingTenantStore()
-const isPlatform = computed(() => userStore.roles.includes('PLATFORM_ADMIN'))
-const needPickTenant = computed(() => isPlatform.value && !actingStore.tenantId)
+const message = useMessage()
+const dialog = useDialog()
+const user = useUserStore()
+const acting = useActingTenantStore()
 
 const loading = ref(false)
 const tree = ref<OrgTreeVO[]>([])
 const selected = ref<OrgTreeVO | null>(null)
-const selectedKeys = ref<(string | number)[]>([])
+const selectedKeys = ref<Array<string | number>>([])
 const keyword = ref('')
-const formModalRef = useTemplateRef('formModalRef')
 
-const canManage = computed(() => userStore.permissions.includes('org:manage'))
+// 弹窗暴露的方法在这里显式声明：比 `InstanceType<typeof X>` 更直白，
+// 也不依赖 vue-tsc 对 defineExpose 的推导细节
+const formModalRef = ref<{ add: (parent: OrgTreeVO | null) => void, edit: (row: OrgTreeVO) => void } | null>(null)
+
+const isPlatform = computed(() => user.isPlatform)
+/** 平台没选学校时**不发**租户内数据的请求，界面显示一句指路 */
+const needPickTenant = computed(() => isPlatform.value && !acting.tenantId)
+const canManage = computed(() => user.has('org:manage'))
 const totalNodes = computed(() => countNodes(tree.value))
 
 function countNodes(nodes: OrgTreeVO[]): number {
-  return nodes.reduce((s, n) => s + 1 + countNodes(n.children ?? []), 0)
+  return nodes.reduce((sum, n) => sum + 1 + countNodes(n.children ?? []), 0)
 }
 
-/** 按关键字过滤（命中则保留其祖先链） */
-const treeData = computed(() => {
-  const k = keyword.value.trim().toLowerCase()
-  if (!k) return tree.value
-  const walk = (nodes: OrgTreeVO[]): OrgTreeVO[] =>
-    nodes
-      .map((n) => {
-        const children = walk(n.children ?? [])
-        const hit = `${n.orgName} ${n.orgCode ?? ''}`.toLowerCase().includes(k)
-        return hit || children.length ? { ...n, children } : null
-      })
-      .filter(Boolean) as OrgTreeVO[]
-  return walk(tree.value)
-})
-
 function findById(nodes: OrgTreeVO[], id: number): OrgTreeVO | null {
   for (const n of nodes) {
-    if (n.id === id) return n
+    if (n.id === id) {
+      return n
+    }
     const hit = findById(n.children ?? [], id)
-    if (hit) return hit
+    if (hit) {
+      return hit
+    }
   }
   return null
 }
 
-async function load() {
-  // 平台没选学校时不发请求（服务端会返回空树，徒增一次往返与一次困惑）
+/**
+ * 关键字过滤：命中的节点**连同它的祖先链**一起保留。
+ * 只留命中节点的话，树会变成一堆没有上下文的孤立节点，反而找不到东西。
+ */
+const treeData = computed<OrgTreeVO[]>(() => {
+  const k = keyword.value.trim().toLowerCase()
+  if (!k) {
+    return tree.value
+  }
+  const walk = (nodes: OrgTreeVO[]): OrgTreeVO[] => nodes
+    .map((n) => {
+      const children = walk(n.children ?? [])
+      const hit = `${n.orgName} ${n.orgCode ?? ''}`.toLowerCase().includes(k)
+      return hit || children.length ? { ...n, children } : null
+    })
+    .filter(Boolean) as OrgTreeVO[]
+  return walk(tree.value)
+})
+
+/**
+ * `n-tree` 要的是 `TreeOption`（`{ key, label, children }`），**不能直接喂 `OrgTreeVO[]`**：
+ * TreeOption 带索引签名，而 OrgTreeVO 没有 —— 直接传会报 TS2322。
+ *
+ * 这里映射一层而不是 `as unknown as` 硬转：硬转会把"字段名写错"（比如写成 `orgname`）
+ * 变成一个**运行期空白的树**，而编译期一声不吭。映射写错至少会被类型检查拦住。
+ * `raw` 留着回查原始节点（类型标签、学生数都要用它）。
+ */
+interface OrgTreeOption extends TreeOption {
+  key: number
+  label: string
+  children?: OrgTreeOption[]
+  raw: OrgTreeVO
+}
+
+function toTreeOptions(nodes: OrgTreeVO[]): OrgTreeOption[] {
+  return (nodes ?? []).map((n) => ({
+    key: n.id,
+    label: n.orgName,
+    children: n.children?.length ? toTreeOptions(n.children) : undefined,
+    raw: n
+  }))
+}
+
+const treeOptions = computed<OrgTreeOption[]>(() => toTreeOptions(treeData.value))
+
+/** 树节点右侧：类型标签 + 学生数（这两个是选班级时唯一要看的） */
+function renderSuffix(info: { option: TreeOption }): VNodeChild {
+  const node = (info.option as OrgTreeOption).raw
+  const parts: VNodeChild[] = []
+  if (node?.orgType) {
+    parts.push(h(NTag, { size: 'tiny', bordered: false }, { default: () => ORG_TYPE_NAMES[node.orgType] ?? '—' }))
+  }
+  if (node?.studentCount) {
+    parts.push(h('span', { class: 'org__count' }, `${node.studentCount} 人`))
+  }
+  return h(NSpace, { size: 6, align: 'center', wrap: false }, { default: () => parts })
+}
+
+/**
+ * 下级组织的小表。
+ * ⚠️ 列宽收紧过一档：卡片内容区只有 ~490px（1258 宽的窗口下），
+ *    原来 类型110/编码130/学生数90/操作80 = 410，名称列被挤到 80px，
+ *    「智能制造系」直接变成「智能制…」—— 名称才是这张表要看的那一列。
+ */
+const childColumns: DataTableColumns<OrgTreeVO> = [
+  { title: '名称', key: 'orgName', minWidth: 130, ellipsis: { tooltip: true } },
+  {
+    title: '类型',
+    key: 'orgType',
+    width: 100,
+    render: (row) => h(NTag, { size: 'small', bordered: false }, { default: () => ORG_TYPE_NAMES[row.orgType] ?? '—' })
+  },
+  { title: '编码', key: 'orgCode', width: 116 },
+  { title: '学生数', key: 'studentCount', width: 76 },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 68,
+    render: (row) => h(
+      NButton,
+      { text: true, type: 'primary', size: 'small', onClick: () => onSelect([row.id]) },
+      { default: () => '查看' }
+    )
+  }
+]
+
+async function load(): Promise<void> {
   if (needPickTenant.value) {
     tree.value = []
     selected.value = null
@@ -218,9 +172,9 @@ async function load() {
   }
   loading.value = true
   try {
-    const res = await orgApi.getOrgTree({ withCount: true, tenantId: actingStore.tenantId })
-    tree.value = res.data ?? []
-    // 刷新后保持选中
+    const nodes = await orgApi.getOrgTree({ withCount: true, tenantId: acting.tenantId })
+    tree.value = nodes ?? []
+    // 刷新后保持选中（并把选中项换成新树里的那个对象：旧对象里没有最新的 children）
     if (selected.value) {
       selected.value = findById(tree.value, selected.value.id)
     }
@@ -229,111 +183,386 @@ async function load() {
   }
 }
 
-// 换学校 = 换一整棵树：不清空的话，上一所学校的节点会留在页面上，
-// 而"点进去看到的是别人学校的组织"这种事没有任何报错会提醒你
-watch(() => actingStore.tenantId, () => {
+// 换学校 = 换一整棵树。不清空的话，上一所学校的节点会留在页面上，
+// 而"点进去看到的是别人学校的组织"这件事没有任何报错会提醒你
+watch(() => acting.tenantId, () => {
   selected.value = null
   selectedKeys.value = []
   keyword.value = ''
-  load()
+  void load()
 })
 
-/**
- * 树节点选中。
- *
- * 第二个参数的类型要写成「宽进」的 `{ node?: unknown }` 而不是 `{ node: OrgTreeVO }`：
- * Arco 的 `@select` 回调给的是 `{ selected?, selectedNodes, node?, e? }`，
- * 把参数声明得比它窄，函数就不可赋值给它，vue-tsc 会在模板上报类型错（运行时其实是好的）。
- * 这里收窄的动作放在函数体里做。
- */
-function onSelect(keys: (string | number)[], data?: { node?: unknown }) {
+function onSelect(keys: Array<string | number>): void {
   const id = Number(keys[0] ?? '')
-  if (!id) {
-    selected.value = null
-    return
-  }
-  const node = (data?.node ?? null) as OrgTreeVO | null
-  selected.value = node?.id === id ? node : findById(tree.value, id)
+  selectedKeys.value = id ? [id] : []
+  selected.value = id ? findById(tree.value, id) : null
 }
 
-function onAdd(parent: OrgTreeVO | null) {
+function onAdd(parent: OrgTreeVO | null): void {
   formModalRef.value?.add(parent)
 }
 
-function onEdit(row: OrgTreeVO) {
+function onEdit(row: OrgTreeVO): void {
   formModalRef.value?.edit(row)
 }
 
-async function onDelete(row: OrgTreeVO) {
-  await orgApi.deleteOrg(row.id, actingStore.tenantId)
-  Message.success('已删除')
-  if (selected.value?.id === row.id) {
-    selected.value = null
-    selectedKeys.value = []
-  }
-  await load()
+function onDelete(row: OrgTreeVO): void {
+  dialog.warning({
+    title: `确认删除「${row.orgName}」？`,
+    content: '删除后不可恢复。若该组织下面还有下级组织或账号，服务端会拒绝并列出占用清单。',
+    positiveText: '删除',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      await orgApi.deleteOrg(row.id, acting.tenantId)
+      message.success('已删除')
+      if (selected.value?.id === row.id) {
+        selected.value = null
+        selectedKeys.value = []
+      }
+      await load()
+    }
+  })
 }
 
 onMounted(load)
 </script>
 
-<style lang="scss" scoped>
-.org {
-  &__tree-card {
-    height: 100%;
-  }
+<template>
+  <div class="md">
+    <!--
+      左：组织树 —— **一张独立卡片**。
+      外观（白底 / 描边 / 阴影 / 圆角 / 卡片头灰条）由全局 `.n-card.n-card` 给，页面不再自己画；
+      `page-card` 负责"撑满内容区高度"，这样下面的树滚动条才有确定的可用高度。
+    -->
+    <!--
+      ⚠️ 不要再写 `:content-style="{ padding: '12px' }"`：内联样式会**盖掉全局的
+         `.n-card.n-card > .n-card-content`**，于是左栏比右栏紧一圈（12 vs 16/18），
+         而且它只解决左右、不管"有卡片头时 naive 不给上内边距"这件事（见 styles/index.scss）。
+    -->
+    <NCard class="md__side page-card" size="small">
+      <template #header>
+        <span class="md__side-head">
+          <AppIcon name="org-group" :size="15" />
+          组织架构
+        </span>
+      </template>
+      <template #header-extra>
+        <span class="md__hint">{{ totalNodes }} 个节点</span>
+      </template>
 
-  &__search {
-    margin-bottom: 10px;
-  }
+      <div class="md__side-body">
+        <NInput
+          v-model:value="keyword"
+          clearable
+          placeholder="搜索名称或编码"
+          :disabled="needPickTenant"
+        />
 
-  &__tenant {
-    margin-bottom: 10px;
-  }
+        <NEmpty
+          v-if="needPickTenant"
+          class="md__empty"
+          description="组织按学校隔离：请先在右上角选择学校"
+        />
+        <NSpin v-else :show="loading" class="md__spin">
+          <!-- 只有树自己滚：搜索框与下面的按钮留在原地，不用滚上去才能点 -->
+          <div class="md__tree">
+            <NEmpty v-if="!tree.length" class="md__empty" description="还没有组织">
+              <template #extra>
+                <NButton v-if="canManage" type="primary" @click="onAdd(null)">
+                  新增顶级组织
+                </NButton>
+              </template>
+            </NEmpty>
+            <NTree
+              v-else
+              block-line
+              selectable
+              default-expand-all
+              :indent="16"
+              :data="treeOptions"
+              :selected-keys="selectedKeys"
+              :render-suffix="renderSuffix"
+              @update:selected-keys="onSelect"
+            />
+          </div>
+        </NSpin>
 
-  &__loading {
-    display: block;
-    padding: 40px 0;
-    text-align: center;
-  }
+        <!-- 树为空时上面那块空态里已经有同一个按钮，这里不再重复放一个 -->
+        <NButton
+          v-if="canManage && !needPickTenant && tree.length"
+          type="primary"
+          block
+          @click="onAdd(null)"
+        >
+          <template #icon>
+            <AppIcon name="plus" :size="14" />
+          </template>
+          新增顶级组织
+        </NButton>
+      </div>
+    </NCard>
 
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+    <!--
+      右：所选组织的详情 —— 同一套卡片语言。
+      内容比卡片高时在**卡片内部**滚动（见 `.md__detail` 的 overflow 说明），
+      这样左树的高度不会被右栏内容顶走。
+    -->
+    <NCard class="md__main page-card" size="small">
+      <div class="md__detail page-card__body">
+        <NEmpty v-if="!selected" class="md__detail-empty" description="从左侧选择一个组织" />
 
-  &__empty-title {
-    margin-bottom: 4px;
-    color: var(--color-text-1);
-  }
+        <template v-else>
+          <div class="md__detail-head">
+            <span class="md__detail-name">{{ selected.orgName }}</span>
+            <NTag size="small" :bordered="false">{{ ORG_TYPE_NAMES[selected.orgType] ?? '未知' }}</NTag>
+          </div>
 
-  &__node {
-    display: inline-flex;
-    gap: 6px;
-    align-items: center;
-  }
+          <NDescriptions :column="2" label-placement="left" size="small" bordered>
+            <NDescriptionsItem label="组织编码">{{ selected.orgCode ?? '—' }}</NDescriptionsItem>
+            <NDescriptionsItem label="负责人">{{ selected.leaderName ?? '未指定' }}</NDescriptionsItem>
+            <NDescriptionsItem label="排序号">{{ selected.sortNo }}</NDescriptionsItem>
+            <NDescriptionsItem label="学生数">{{ selected.studentCount ?? 0 }} 人</NDescriptionsItem>
+            <NDescriptionsItem label="下级组织">{{ (selected.children ?? []).length }} 个</NDescriptionsItem>
+            <NDescriptionsItem label="状态">
+              <NTag size="small" :type="selected.status === 1 ? 'success' : 'default'" :bordered="false">
+                {{ selected.status === 1 ? '正常' : '停用' }}
+              </NTag>
+            </NDescriptionsItem>
+          </NDescriptions>
 
-  &__node-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+          <NSpace v-if="canManage" :size="8">
+            <NButton type="primary" @click="onAdd(selected)">
+              <template #icon>
+                <AppIcon name="plus" :size="14" />
+              </template>
+              新增下级
+            </NButton>
+            <NButton @click="onEdit(selected)">
+              <template #icon>
+                <AppIcon name="edit" :size="14" />
+              </template>
+              修改
+            </NButton>
+            <NPopconfirm @positive-click="onDelete(selected)">
+              <template #trigger>
+                <NButton type="error" ghost>
+                  <template #icon>
+                    <AppIcon name="delete" :size="14" />
+                  </template>
+                  删除
+                </NButton>
+              </template>
+              删除后不可恢复，确认删除？
+            </NPopconfirm>
+          </NSpace>
 
-  &__node-type {
-    flex: none;
-    transform: scale(0.88);
-  }
+          <!--
+            下级组织：**不再另开一张卡片**（卡里套卡会糊成一片），
+            用 `.section-title` 把它与上面的详情切开
+          -->
+          <div v-if="(selected.children ?? []).length" class="md__block">
+            <div class="section-title">
+              下级组织
+              <span class="section-title__note">{{ (selected.children ?? []).length }} 个</span>
+            </div>
+            <NDataTable
+              :columns="childColumns"
+              :data="selected.children ?? []"
+              :pagination="false"
+              :bordered="false"
+              size="small"
+              :max-height="260"
+            />
+          </div>
+        </template>
+      </div>
+    </NCard>
 
-  &__node-count {
-    flex: none;
-    font-size: 11px;
-    color: var(--color-text-3);
-  }
+    <OrgFormModal ref="formModalRef" :tenant-id="acting.tenantId" @save-success="load" />
+  </div>
+</template>
 
-  &__acts {
-    padding-top: 14px;
-    margin-top: 18px;
-    border-top: 1px solid var(--color-border-2);
+<style scoped>
+/**
+ * 主从两栏：左树 / 右详情**各是一张卡片**。
+ *
+ * ⚠️ 两栏都带全局的 `page-card`，高度由它按 `--xt-header-h` / `--xt-content-pad` 算出来，
+ *    这里不再写 `calc(100vh - 56px - 28px)` —— 上一版写死 56/28，而内容区内边距是 16px（=32），
+ *    整块比可视区高 4px，页面底部凭空多出一条滚动条。
+ */
+.md {
+  display: flex;
+  gap: var(--xt-gap);
+}
+
+/**
+ * 左栏：`flex: none` + 一个**基准宽度**（220~260 之间，树的层级多了会挤成两行，不能更窄）。
+ * 窄屏收窄一档而不是让它自由伸缩：右表有 `min-width: 0` 能缩，树被压扁反而读不了。
+ */
+.md__side {
+  flex: none;
+  width: 260px;
+}
+
+/* 与「账号管理」同一档，切页面时左栏宽度不跳 */
+@media (max-width: 1100px) {
+  .md__side {
+    width: 220px;
   }
 }
+
+/* 左栏内容：搜索框固定，树占满剩余高度并**自己滚**（卡片高度不跟着节点数长） */
+.md__side-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+
+/**
+ * NSpin 外面套了 container / content 两层 div，且默认都不是 flex ——
+ * 不把 flex 链透下去，`.md__tree` 的 `flex: 1` 就没有可分配的父高度，树的滚动条不会出现
+ * （卡片被内容顶高、整页跟着滚，正是上一版的症状）。
+ */
+.md__spin {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.md__spin :deep(.n-spin-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.md__tree {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* 树的字号比正文小一档：左栏只有 220~260px，14px 下"班级名 + 类型标签"必然折成两行 */
+.md__tree :deep(.n-tree) {
+  font-size: 13px;
+}
+
+/* 原生滚动条在浅色卡片上是一道深色竖杠，收窄 + 调浅（Chromium 专属伪元素，不影响其它浏览器） */
+.md__tree::-webkit-scrollbar,
+.md__main .md__detail::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.md__tree::-webkit-scrollbar-thumb,
+.md__main .md__detail::-webkit-scrollbar-thumb {
+  background: #d8dde5;
+  border-radius: 4px;
+}
+
+.md__tree::-webkit-scrollbar-track,
+.md__main .md__detail::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/**
+ * 树的「轻选中」。
+ *
+ * naive 默认把选中态画成**整行实心色块**（`--n-node-color-active` 铺满 `.n-tree-node`，
+ * `block-line` 下连缩进区一起染），在一张白卡片里比右边表格的行选中还重。
+ * 这里改成：极浅蓝底 + 主色文字 + 左侧 3px 竖条。
+ *
+ * ⚠️ 必须覆盖 naive 的内部类：组件样式由 css-render 在**运行时**注入 <head>，
+ *    与本 SFC 的样式先后顺序不保证 —— 所以 ① 显式写它的 CSS 变量（正常情况生效）、
+ *    ② 把类名重复一遍提到 (0,4,0) 权重兜底（naive 自己是 `.n-tree--block-line .n-tree-node--selected`），
+ *    与 styles/index.scss 用 `.n-card.n-card` 是同一个道理。
+ *    `.n-tree-node` 自带 `position: relative`，竖条直接用绝对定位的 `::before`。
+ */
+.md__tree :deep(.n-tree-node.n-tree-node--selected) {
+  --n-node-color-active: #eef4ff;
+
+  background: #eef4ff;
+}
+
+.md__tree :deep(.n-tree-node.n-tree-node--selected)::before {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: 0;
+  width: 3px;
+  content: '';
+  background: #0052d9;
+  border-radius: 0 2px 2px 0;
+}
+
+.md__tree :deep(.n-tree-node.n-tree-node--selected .n-tree-node-content__text) {
+  font-weight: 500;
+  color: #0052d9;
+}
+
+.md__empty {
+  padding: 28px 0;
+}
+
+.md__side-head {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.md__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+/**
+ * 右栏：卡片内容区（全局 `.page-card > .n-card-content` 已把 flex 链铺好）。
+ * 详情比卡片高时**在卡片内部**滚 —— 用两段选择器提高权重，避免与全局 `.page-card__body`
+ * 的 `overflow: hidden` 比"谁注入得晚"（那种顺序是不保证的）。
+ */
+.md__main {
+  flex: 1;
+  min-width: 0;
+}
+
+.md__main .md__detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xt-gap);
+  overflow: auto;
+}
+
+/* 没选节点时把空态放在卡片正中间；`margin: auto` 在 flex 列里即"水平+垂直都居中" */
+.md__detail-empty {
+  margin: auto;
+}
+
+/* 组织名 + 类型标签：卡片内部的浅灰小格子，而不是再套一层卡片 */
+.md__detail-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.md__detail-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--xt-text);
+}
+
+.md__block {
+  min-width: 0;
+}
+
+:deep(.org__count) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
 </style>
diff --git a/frontend-pc/src/views/redirect/index.vue b/frontend-pc/src/views/redirect/index.vue
deleted file mode 100644
index a475ae3..0000000
--- a/frontend-pc/src/views/redirect/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup lang="ts">
-const route = useRoute()
-const router = useRouter()
-
-const { params, query } = route
-const { path } = params
-
-router.replace({ path: `/${path}`, query })
-</script>
diff --git a/frontend-pc/src/views/role/RoleFormModal.vue b/frontend-pc/src/views/role/RoleFormModal.vue
new file mode 100644
index 0000000..b04e7be
--- /dev/null
+++ b/frontend-pc/src/views/role/RoleFormModal.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import type { FormInst, FormRules } from 'naive-ui'
+import type { RoleVO } from '@/apis/xt/role'
+import {
+  NAlert,
+  NButton,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NSelect,
+  NSpace,
+  useMessage
+} from 'naive-ui'
+import { computed, reactive, ref } from 'vue'
+import { createRole, ROLE_USER_TYPE_NAMES, updateRole } from '@/apis/xt/role'
+import { useActingTenantStore } from '@/stores/acting-tenant'
+
+/**
+ * 自定义角色的新增 / 编辑弹窗。
+ *
+ * ## 为什么"新建"要选一个模板角色
+ *
+ * 服务端对新建角色的校验是 **至少一项权限 + 一个菜单**（`@NotEmpty`）——
+ * 一个新角色如果什么都不给，它的账号登录后什么都看不到，那本来也没有意义。
+ * 而内置角色的权限矩阵在界面上**看得见、改不了**，本来就该当"参考模板"用
+ * （这也是内置角色只读的设计理由之一）。
+ *
+ * 所以这里的做法是：选一个模板角色 → 复制它的权限码与菜单 → 建好之后
+ * 到右侧的授权矩阵里增删。好处是新建这一步只需要填 4 个字段，
+ * 而授权仍然只有**一个**编辑入口（`RoleGrantEditor`），不会出现两套勾选逻辑。
+ *
+ * ## 角色码建后不可改
+ *
+ * 它会进 JWT 的 `roles`、出现在日志与排查对话里。改了它，历史日志里的角色码
+ * 就成了一个查不到的东西。所以编辑时禁用（后端接口里也没有这个字段）。
+ */
+defineOptions({ name: 'RoleFormModal' })
+
+const props = withDefaults(defineProps<{
+  /** 角色列表：模板下拉的候选（内置 + 已存在的自定义角色） */
+  roles?: RoleVO[]
+}>(), {
+  roles: () => []
+})
+
+const emit = defineEmits<{
+  (e: 'save-success', id?: number): void
+}>()
+
+const message = useMessage()
+const acting = useActingTenantStore()
+
+const visible = ref(false)
+const submitting = ref(false)
+const detailId = ref<number | null>(null)
+const formRef = ref<FormInst | null>(null)
+
+const isEdit = computed(() => !!detailId.value)
+const title = computed(() => (isEdit.value ? '修改角色' : '新建角色'))
+
+const current = computed(() => props.roles.find((r) => r.id === detailId.value) ?? null)
+
+function emptyForm() {
+  return {
+    roleCode: '',
+    roleName: '',
+    userType: 3,
+    remark: '',
+    /** 新建时的模板角色码：复制它的权限与菜单 */
+    templateCode: 'HEAD_TEACHER'
+  }
+}
+
+const form = reactive(emptyForm())
+
+const userTypeOptions = Object.entries(ROLE_USER_TYPE_NAMES).map(([code, name]) => ({
+  label: name,
+  value: Number(code)
+}))
+
+/** 模板候选：内置角色优先（它们才是"官方口径"的模板） */
+const templateOptions = computed(() => props.roles
+  .filter((r) => r.id !== detailId.value)
+  .map((r) => ({
+    label: `${r.roleName}（${r.roleType === 1 ? '内置' : '自定义'}｜${r.permCodes?.length ?? 0} 项权限）`,
+    value: r.roleCode
+  })))
+
+/**
+ * ⚠️ `userType` 的 `type: 'number'` **不能省**。
+ *
+ * 只有 `required` 时，async-validator 会把 `rule.type` 默认成 `'string'`
+ * （`Schema.validate` 里 `rule.type = this.getType(rule)`），随后按
+ * `typeof value !== rule.type` 报错；而 `userType` 是数字（1/2/3）——
+ * 结果是**「创建」永远失败**，且错误信息被 `NFormItem` 的 `#feedback` 插槽挡住
+ * （naive 的渲染是 `children || feedback`），界面上只剩一个没有说明的红框。
+ */
+const rules: FormRules = {
+  roleCode: [
+    { required: true, message: '请填写角色码', trigger: ['blur', 'input'] },
+    {
+      pattern: /^[A-Z][A-Z0-9_]{1,63}$/,
+      message: '只能是大写字母、数字与下划线，且以字母开头',
+      trigger: ['blur', 'input']
+    }
+  ],
+  roleName: [{ required: true, message: '请填写角色名称', trigger: ['blur', 'input'] }],
+  userType: [{ type: 'number', required: true, message: '请选择用户类型', trigger: ['change'] }]
+}
+
+function add(): void {
+  detailId.value = null
+  Object.assign(form, emptyForm())
+  // 默认挑一个内置角色当模板：让"新建"这一步不用理解每一条权限码
+  const preferred = props.roles.find((r) => r.roleCode === 'HEAD_TEACHER' && r.roleType === 1)
+  if (preferred) {
+    form.templateCode = preferred.roleCode
+    form.userType = preferred.userType
+  }
+  visible.value = true
+}
+
+function edit(row: RoleVO): void {
+  detailId.value = row.id
+  Object.assign(form, emptyForm())
+  form.roleCode = row.roleCode
+  form.roleName = row.roleName
+  form.userType = row.userType
+  form.remark = row.remark ?? ''
+  visible.value = true
+}
+
+async function confirm(): Promise<void> {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
+
+  submitting.value = true
+  try {
+    if (isEdit.value && detailId.value) {
+      await updateRole(detailId.value, {
+        roleName: form.roleName.trim(),
+        userType: form.userType,
+        remark: form.remark.trim() || undefined
+      })
+      message.success('已保存')
+      visible.value = false
+      emit('save-success', detailId.value)
+      return
+    }
+
+    const tpl = props.roles.find((r) => r.roleCode === form.templateCode)
+    if (!tpl) {
+      message.warning('请选择作为模板的角色（新角色需要至少一项权限与一个菜单）')
+      return
+    }
+
+    const id = await createRole({
+      roleCode: form.roleCode.trim().toUpperCase(),
+      roleName: form.roleName.trim(),
+      userType: form.userType,
+      remark: form.remark.trim() || undefined,
+      permCodes: [...(tpl.permCodes ?? [])],
+      menus: [...(tpl.menus ?? [])]
+    })
+    message.success('已创建。下面可以在授权矩阵里增删权限与菜单')
+    visible.value = false
+    emit('save-success', id)
+  } catch {
+    // 提示已由 http 层给出（如角色码重复、平台级权限 40301、userType 与角色不符）
+  } finally {
+    submitting.value = false
+  }
+}
+
+defineExpose({ add, edit })
+</script>
+
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="card"
+    :title="title"
+    :style="{ width: 'min(520px, calc(100vw - 32px))' }"
+    :mask-closable="false"
+  >
+    <NForm ref="formRef" :model="form" :rules="rules" label-placement="top">
+      <NFormItem label="角色码" path="roleCode">
+        <NInput
+          v-model:value="form.roleCode"
+          :disabled="isEdit"
+          placeholder="如 CLASS_AUDITOR（大写字母 + 下划线）"
+        />
+        <template #feedback>
+          <span class="rf__hint">
+            {{ isEdit
+              ? '角色码建后不可改：它已经进了 JWT 与历史日志，改了那些记录就查不到了'
+              : '租户内唯一；它会出现在日志与排查对话里，所以用大写字母 + 下划线' }}
+          </span>
+        </template>
+      </NFormItem>
+
+      <NFormItem label="角色名称" path="roleName">
+        <NInput v-model:value="form.roleName" placeholder="如 年级审核员" :maxlength="64" clearable />
+      </NFormItem>
+
+      <NFormItem label="用户类型" path="userType">
+        <NSelect v-model:value="form.userType" :options="userTypeOptions" />
+        <template #feedback>
+          <span class="rf__hint">
+            账号的用户类型由角色推导；{{ isEdit && (current?.userCount ?? 0) > 0
+              ? '该角色还有账号在用，服务端不允许改这一项'
+              : '所以它必须选对' }}
+          </span>
+        </template>
+      </NFormItem>
+
+      <NFormItem v-if="!isEdit" label="以哪个角色为模板">
+        <NSelect v-model:value="form.templateCode" :options="templateOptions" />
+        <template #feedback>
+          <span class="rf__hint">
+            复制它的权限码与菜单；建好后在右侧授权矩阵里增删。新角色至少要有一项权限与一个菜单
+          </span>
+        </template>
+      </NFormItem>
+
+      <NFormItem label="备注">
+        <NInput
+          v-model:value="form.remark"
+          type="textarea"
+          :rows="2"
+          :maxlength="255"
+          placeholder="这个角色是给谁用的（选填）"
+        />
+      </NFormItem>
+    </NForm>
+
+    <NAlert type="info" :show-icon="false" class="rf__note">
+      保存授权后<strong>立即生效</strong>，不需要重新登录。
+      <template v-if="acting.tenantId">当前操作的是所选学校的角色。</template>
+    </NAlert>
+
+    <template #footer>
+      <NSpace justify="end">
+        <NButton @click="visible = false">
+          取消
+        </NButton>
+        <NButton type="primary" :loading="submitting" @click="confirm">
+          {{ isEdit ? '保存' : '创建' }}
+        </NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+<style scoped>
+.rf__hint {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--xt-text-3);
+}
+
+/* 表单与结论条之间留出间隔：不隔开的话，提示会像最后一个表单项的说明 */
+.rf__note {
+  margin-top: 4px;
+}
+</style>
diff --git a/frontend-pc/src/views/role/RoleGrantEditor.vue b/frontend-pc/src/views/role/RoleGrantEditor.vue
new file mode 100644
index 0000000..1f3b63b
--- /dev/null
+++ b/frontend-pc/src/views/role/RoleGrantEditor.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import type { PermGroupVO, PermVO, RoleVO } from '@/apis/xt/role'
+import {
+  NAlert,
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NSpace,
+  NTag,
+  useMessage
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { setRoleMenus, setRolePermissions } from '@/apis/xt/role'
+import { DASHBOARD, GROUPS, XT_MENUS } from '@/config/xt-routes'
+
+/**
+ * 授权矩阵（权限码 + 可见菜单）。
+ *
+ * ## 四条口径（决定了这个组件长什么样）
+ *
+ * 1. **内置角色只读**：`role.editable === false` 时整块不可勾选。它的权限由后端代码
+ *    （`BuiltinRole`）决定 —— 一次误操作就能把管理员锁在系统外，而这类错误不可逆。
+ *    所以内置角色在这里的作用是"参考模板"：照着它新建一个自定义角色。
+ * 2. **改完立即生效**：服务端每次写授权都会清掉该角色的缓存，**不需要重新登录**。
+ *    这一点必须写在按钮旁边 —— 不写的话，用户会习惯性地"重新登录一次看看生效没有"。
+ * 3. **只提交改动过的那一项**：权限与菜单是两个接口，只把脏的那一项发出去，
+ *    避免"改菜单顺带把权限也重写一遍"这种放大操作。
+ * 4. **平台级能力要挡住**：`platformOnly` 的权限码与「租户管理」菜单在学校租户里
+ *    发不出去（服务端 40301）。界面把它们禁用，而不是让人点完收到一个错误。
+ */
+defineOptions({ name: 'RoleGrantEditor' })
+
+const props = withDefaults(defineProps<{
+  role: RoleVO
+  permGroups: PermGroupVO[]
+  /** 当前是否在**平台租户**下操作（决定平台级能力可否勾选） */
+  platformTenant?: boolean
+}>(), {
+  platformTenant: false
+})
+
+const emit = defineEmits<{
+  (e: 'saved'): void
+}>()
+
+const message = useMessage()
+
+const perms = ref<string[]>([])
+const menus = ref<string[]>([])
+const savingPerm = ref(false)
+const savingMenu = ref(false)
+
+/** 角色切换（或保存后父组件刷新）时，把本地选择对齐到服务端那份 */
+function resetFromRole(): void {
+  perms.value = [...(props.role.permCodes ?? [])]
+  menus.value = [...(props.role.menus ?? [])]
+}
+
+watch(() => props.role, resetFromRole, { immediate: true, deep: false })
+
+const isReadonly = computed(() => props.role.editable === false)
+
+/** 比较两个字符串集合是否等价（顺序无关）—— 用它判"这一项是否改过" */
+function sameSet(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) {
+    return false
+  }
+  const set = new Set(b)
+  return a.every((x) => set.has(x))
+}
+
+const permDirty = computed(() => !sameSet(perms.value, props.role.permCodes ?? []))
+const menuDirty = computed(() => !sameSet(menus.value, props.role.menus ?? []))
+const dirty = computed(() => permDirty.value || menuDirty.value)
+
+/** 至少一项权限 + 一个菜单：与后端 RoleCreateReq 的校验同口径，避免"点了必然 40001" */
+const canSave = computed(() => perms.value.length > 0 && menus.value.length > 0)
+
+function isPlatformOnly(p: PermVO): boolean {
+  return p.platformOnly === true
+}
+
+function permDisabled(p: PermVO): boolean {
+  return isReadonly.value || (isPlatformOnly(p) && !props.platformTenant)
+}
+
+function platformText(p: PermVO): string {
+  if (p.platform === 'MP') {
+    return '仅小程序'
+  }
+  if (p.platform === 'BOTH') {
+    return '两端'
+  }
+  return '仅 PC'
+}
+
+/** 菜单候选：工作台 + 业务菜单；平台专用菜单（租户管理）只在平台租户里出现 */
+const menuGroups = computed(() => {
+  const platformOnlyKeys = new Set(['tenant'])
+  const business = XT_MENUS.filter((m) => props.platformTenant || !platformOnlyKeys.has(m.key))
+  const groups = GROUPS
+    .map((g) => ({ title: g.title, items: business.filter((m) => m.group === g.id) }))
+    .filter((g) => g.items.length > 0)
+  return [
+    { title: '通用', items: [DASHBOARD] },
+    ...groups
+  ]
+})
+
+async function save(): Promise<void> {
+  if (!canSave.value) {
+    message.warning('至少保留一项权限与一个菜单 —— 否则这个角色的人登录后什么都看不到')
+    return
+  }
+  try {
+    // 只提交改动过的那一项
+    if (permDirty.value) {
+      savingPerm.value = true
+      await setRolePermissions(props.role.id, perms.value)
+      savingPerm.value = false
+    }
+    if (menuDirty.value) {
+      savingMenu.value = true
+      await setRoleMenus(props.role.id, menus.value)
+      savingMenu.value = false
+    }
+    message.success('已保存，立即生效（不必重新登录）')
+    emit('saved')
+  } catch {
+    // 提示已由 http 层给出（如平台级能力 40301、自锁保护）
+  } finally {
+    savingPerm.value = false
+    savingMenu.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="grant">
+    <NAlert v-if="isReadonly" type="default" :show-icon="false" class="grant__note">
+      内置角色的权限由<strong>代码决定，不可修改</strong>。
+      要调整授权范围，请「新建」一个自定义角色，照着这份矩阵勾选。
+    </NAlert>
+
+    <div class="grant__section">
+      <div class="grant__head">
+        <div class="section-title">
+          权限码
+          <span class="section-title__note">决定"能做什么"（按钮与接口校验）</span>
+        </div>
+        <NTag v-if="permDirty" size="small" type="warning" :bordered="false">
+          有改动
+        </NTag>
+      </div>
+
+      <div v-for="g in permGroups" :key="g.group" class="grant__group">
+        <div class="grant__group-title">
+          {{ g.group }}
+        </div>
+        <NCheckboxGroup v-model:value="perms" :disabled="isReadonly">
+          <div class="grant__items">
+            <NCheckbox
+              v-for="p in g.items"
+              :key="p.code"
+              :value="p.code"
+              :disabled="permDisabled(p)"
+            >
+              <span class="grant__item-label">{{ p.label }}</span>
+              <span class="grant__code">{{ p.code }}</span>
+              <NTag size="tiny" :bordered="false" class="grant__tag">
+                {{ platformText(p) }}
+              </NTag>
+              <NTag v-if="isPlatformOnly(p)" size="tiny" type="error" :bordered="false" class="grant__tag">
+                平台专用{{ platformTenant ? '' : '（不可授予）' }}
+              </NTag>
+            </NCheckbox>
+          </div>
+        </NCheckboxGroup>
+      </div>
+    </div>
+
+    <div class="grant__section">
+      <div class="grant__head">
+        <div class="section-title">
+          可见菜单
+          <span class="section-title__note">
+            只决定"左侧看得见哪些入口"，<strong>不代表有权限操作</strong>
+          </span>
+        </div>
+        <NTag v-if="menuDirty" size="small" type="warning" :bordered="false">
+          有改动
+        </NTag>
+      </div>
+
+      <div v-for="g in menuGroups" :key="g.title" class="grant__group">
+        <div class="grant__group-title">
+          {{ g.title }}
+        </div>
+        <NCheckboxGroup v-model:value="menus" :disabled="isReadonly">
+          <div class="grant__items">
+            <NCheckbox v-for="m in g.items" :key="m.key" :value="m.key" :label="m.title" />
+          </div>
+        </NCheckboxGroup>
+      </div>
+    </div>
+
+    <div v-if="!isReadonly" class="grant__foot">
+      <NSpace :size="10" align="center">
+        <NButton
+          type="primary"
+          :loading="savingPerm || savingMenu"
+          :disabled="!dirty || !canSave"
+          @click="save"
+        >
+          保存授权
+        </NButton>
+        <NButton :disabled="!dirty" @click="resetFromRole">
+          撤销改动
+        </NButton>
+        <span class="grant__hint">保存后<strong>立即生效</strong>，不必重新登录</span>
+      </NSpace>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.grant__note {
+  margin-bottom: 16px;
+}
+
+/* 两块之间用 20px 间隔 + 一条 1px 分隔线（分隔线在 .grant__head 上） */
+.grant__section + .grant__section {
+  margin-top: 20px;
+}
+
+.grant__head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--xt-card-border-weak);
+}
+
+/* 全局 .section-title 自带 12px 下外边距，这里由 .grant__head 统一控制间距 */
+.grant__head .section-title {
+  margin-bottom: 0;
+}
+
+.grant__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.grant__group {
+  margin-top: 12px;
+}
+
+.grant__group-title {
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #475467;
+}
+
+.grant__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 4px 12px;
+}
+
+.grant__item-label {
+  margin-right: 6px;
+}
+
+.grant__code {
+  margin-right: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.grant__tag {
+  margin-right: 4px;
+}
+
+.grant__foot {
+  padding-top: 14px;
+  margin-top: 20px;
+  border-top: 1px solid var(--xt-card-border-weak);
+}
+</style>
diff --git a/frontend-pc/src/views/role/index.vue b/frontend-pc/src/views/role/index.vue
new file mode 100644
index 0000000..dba7711
--- /dev/null
+++ b/frontend-pc/src/views/role/index.vue
@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import type { PermGroupVO, RoleVO } from '@/apis/xt/role'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NEmpty,
+  NPopconfirm,
+  NSpace,
+  NSpin,
+  NTag,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import {
+  DATA_SCOPE_NAMES,
+  deleteRole,
+  getPermissions,
+  getRoles,
+  setRoleStatus
+} from '@/apis/xt/role'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useActingTenantStore } from '@/stores/acting-tenant'
+import { useUserStore } from '@/stores/user'
+import RoleFormModal from './RoleFormModal.vue'
+import RoleGrantEditor from './RoleGrantEditor.vue'
+
+/**
+ * 角色与授权。
+ *
+ * ## 界面上的核心分叉：内置角色 vs 自定义角色
+ *
+ * 内置角色（`roleType === 1`）**看得见、改不了**：它的权限由后端代码（`BuiltinRole`）决定。
+ * 所以它的作用只有一个 —— 当"参考模板"：照着它新建一个自定义角色，
+ * 而不是试图去改它然后收到 40001。
+ *
+ * ## 改完立即生效
+ *
+ * 服务端每次写授权都会清掉该角色的缓存，所以**不需要重新登录**：
+ * 保存后刷新页面就能看到按钮与菜单的变化。这一点写在按钮旁边 ——
+ * 不写的话，用户会习惯性地"重新登录一次看看生效没有"。
+ *
+ * ## 数据范围为什么只展示
+ *
+ * 它目前由"拿到了哪些权限码 + 任务里被指派了哪些班"共同决定（散在审核 / 催报 / 代传 / 看板各处）。
+ * 做成可配需要先把那些判据收口（单独一批）。让界面出现一个"改了不生效"的开关，
+ * 比没有这个开关更糟 —— 所以这里只显示它现在是什么。
+ *
+ * ⚠️ 平台运营要先择校（顶栏）：角色是租户内的东西，而平台的租户过滤是关掉的。
+ */
+defineOptions({ name: 'Role' })
+
+const message = useMessage()
+const dialog = useDialog()
+const user = useUserStore()
+const acting = useActingTenantStore()
+
+const loading = ref(false)
+const roles = ref<RoleVO[]>([])
+const current = ref<RoleVO | null>(null)
+const permGroups = ref<PermGroupVO[]>([])
+
+const formModalRef = ref<{
+  add: () => void
+  edit: (row: RoleVO) => void
+} | null>(null)
+
+const isPlatform = computed(() => user.isPlatform)
+const needPickTenant = computed(() => isPlatform.value && !acting.tenantId)
+const canManage = computed(() => user.has('role:manage'))
+/** 授权矩阵只在**平台租户**下允许勾平台级能力；代管某所学校时不允许 */
+const platformTenant = computed(() => isPlatform.value && !acting.tenantId)
+
+async function loadRoles(): Promise<void> {
+  if (needPickTenant.value) {
+    roles.value = []
+    current.value = null
+    return
+  }
+  loading.value = true
+  try {
+    roles.value = await getRoles(acting.tenantId) ?? []
+    // 刷新后保持选中（并把选中项换成新数组里的对象）
+    if (current.value) {
+      current.value = roles.value.find((r) => r.id === current.value?.id) ?? null
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadPermissions(): Promise<void> {
+  // 权限码目录要 role:manage；没有它就不发这个请求（403 会先弹一个提示，catch 拦不住）
+  if (!canManage.value) {
+    permGroups.value = []
+    return
+  }
+  try {
+    permGroups.value = await getPermissions() ?? []
+  } catch {
+    permGroups.value = []
+  }
+}
+
+watch(() => acting.tenantId, () => {
+  current.value = null
+  void loadRoles()
+  void loadPermissions()
+})
+
+function pick(r: RoleVO): void {
+  current.value = r
+}
+
+async function onCreated(id?: number): Promise<void> {
+  await loadRoles()
+  if (id) {
+    current.value = roles.value.find((r) => r.id === id) ?? null
+  }
+}
+
+function onToggleStatus(row: RoleVO, status: number): void {
+  const action = status === 1 ? '启用' : '停用'
+  dialog.warning({
+    title: `确认${action}「${row.roleName}」？`,
+    content: status === 1
+      ? '启用后，持有该角色的账号立刻恢复它带来的权限。'
+      : '停用后该角色立刻不再给权限（不必等 token 过期）；挂在它下面的账号会失去这些权限。',
+    positiveText: action,
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      await setRoleStatus(row.id, status)
+      message.success(`已${action}`)
+      await loadRoles()
+    }
+  })
+}
+
+async function onDelete(row: RoleVO): Promise<void> {
+  try {
+    await deleteRole(row.id)
+    message.success('已删除')
+    if (current.value?.id === row.id) {
+      current.value = null
+    }
+    await loadRoles()
+  } catch {
+    // 40045（还有账号在用）等提示已由 http 层给出
+  }
+}
+
+onMounted(() => {
+  void loadRoles()
+  void loadPermissions()
+})
+</script>
+
+<template>
+  <div class="md">
+    <!-- 左：角色列表（独立卡片，与右栏之间留 16px） -->
+    <NCard class="md__side" :bordered="false" size="small">
+      <template #header>
+        <div class="md__side-head">
+          <AppIcon name="role" :size="15" />
+          <span>角色（{{ roles.length }}）</span>
+        </div>
+      </template>
+      <template #header-extra>
+        <NButton
+          v-if="canManage"
+          type="primary"
+          :disabled="needPickTenant"
+          @click="formModalRef?.add()"
+        >
+          新建
+        </NButton>
+      </template>
+
+      <NEmpty
+        v-if="needPickTenant"
+        class="md__empty"
+        description="角色按学校隔离：请先在右上角选择学校"
+      />
+      <NSpin v-else :show="loading" class="md__list-wrap">
+        <NEmpty v-if="!roles.length" class="md__empty" description="还没有角色" />
+        <div
+          v-for="r in roles"
+          :key="r.id"
+          class="md__row"
+          :class="{ 'md__row--on': current?.id === r.id }"
+          @click="pick(r)"
+        >
+          <div class="md__row-main">
+            <span class="md__row-name">{{ r.roleName }}</span>
+            <NSpace :size="4" :wrap="true">
+              <NTag v-if="r.roleType === 1" size="small" type="info" :bordered="false">
+                内置
+              </NTag>
+              <NTag v-if="r.status === 0" size="small" :bordered="false">
+                已停用
+              </NTag>
+              <NTag v-if="r.assignable === false" size="small" type="warning" :bordered="false">
+                不可分配
+              </NTag>
+            </NSpace>
+          </div>
+          <div class="md__hint">
+            {{ r.roleCode }} · {{ r.userCount ?? 0 }} 个账号
+          </div>
+        </div>
+      </NSpin>
+    </NCard>
+
+    <!-- 右：角色详情 + 授权矩阵（两张独立卡片，同上留 16px） -->
+    <section class="md__main">
+      <NCard v-if="needPickTenant" class="md__blank" :bordered="false" size="small">
+        <NEmpty description="请先在右上角选择学校" />
+      </NCard>
+      <NCard v-else-if="!current" class="md__blank" :bordered="false" size="small">
+        <NEmpty description="从左边选一个角色" />
+      </NCard>
+
+      <template v-else>
+        <NCard class="role__card" :bordered="false" size="small">
+          <template #header>
+            <div class="role__head">
+              <span class="role__name">{{ current.roleName }}</span>
+              <span class="role__code">{{ current.roleCode }}</span>
+            </div>
+          </template>
+          <template #header-extra>
+            <NSpace :size="8" align="center">
+              <NTag size="small" :bordered="false" :type="current.roleType === 1 ? 'info' : 'success'">
+                {{ current.roleType === 1 ? '内置（只读）' : '自定义' }}
+              </NTag>
+              <NTag size="small" :bordered="false" :type="current.status === 1 ? 'success' : 'default'">
+                {{ current.status === 1 ? '启用' : '已停用' }}
+              </NTag>
+              <template v-if="current.editable">
+                <NButton @click="formModalRef?.edit(current)">
+                  编辑
+                </NButton>
+                <NButton
+                  :type="current.status === 1 ? 'warning' : 'primary'"
+                  @click="onToggleStatus(current, current.status === 1 ? 0 : 1)"
+                >
+                  {{ current.status === 1 ? '停用' : '启用' }}
+                </NButton>
+                <NPopconfirm @positive-click="onDelete(current)">
+                  <template #trigger>
+                    <NButton type="error" ghost>
+                      删除
+                    </NButton>
+                  </template>
+                  删除这个角色？{{ (current.userCount ?? 0) > 0
+                    ? `还有 ${current.userCount} 个账号在用它 —— 服务端会拒绝（40045），请先给他们换角色`
+                    : '删除后不可恢复' }}
+                </NPopconfirm>
+              </template>
+            </NSpace>
+          </template>
+
+          <div class="role__meta">
+            <div class="role__meta-row">
+              <span class="role__meta-label">数据范围</span>
+              <NTag size="small" :bordered="false">
+                {{ DATA_SCOPE_NAMES[current.dataScope] ?? '—' }}
+              </NTag>
+            </div>
+            <div class="role__hint">
+              本期只展示、不可配：它由"拿到了哪些权限码 + 任务里被指派了哪些班"共同决定；
+              做成可配要先把散在审核 / 催报 / 代传 / 看板的判据收口
+            </div>
+            <div v-if="current.remark" class="role__hint role__remark">
+              备注：{{ current.remark }}
+            </div>
+          </div>
+        </NCard>
+
+        <NCard class="role__card" :bordered="false" size="small">
+          <template #header>
+            授权
+          </template>
+          <RoleGrantEditor
+            v-if="current.roleType !== 1 || permGroups.length"
+            :role="current"
+            :perm-groups="permGroups"
+            :platform-tenant="platformTenant"
+            @saved="loadRoles"
+          />
+          <NAlert v-else type="warning" :show-icon="false">
+            权限码目录没取到（需要「角色与授权」权限）。内置角色的权限由代码决定，
+            这里看不到也不影响它的实际权限。
+          </NAlert>
+        </NCard>
+      </template>
+    </section>
+
+    <RoleFormModal ref="formModalRef" :roles="roles" @save-success="onCreated" />
+  </div>
+</template>
+
+<style scoped>
+/**
+ * 主从版面：左右各一张独立卡片，间隔 16px（`--xt-gap`）。
+ *
+ * ⚠️ 高度算式与全局 `.page-card` **同源**（`--xt-header-h` / `--xt-content-pad`）：
+ *    上一版写死 `calc(100vh - 56px - 28px)`，比内容区实际高度多 4px，
+ *    整页会多出一条无意义的纵向滚动条。
+ */
+.md {
+  display: flex;
+  gap: var(--xt-gap);
+  height: calc(100vh - var(--xt-header-h) - var(--xt-content-pad) * 2);
+}
+
+/* 左栏：卡片自己就是 flex 列（Naive 的 .n-card 已是 column），宽度固定、不参与伸缩 */
+.md__side {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: 240px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/**
+ * 卡片内容区变成"能撑满的 flex 列"，列表才有确定高度、自己滚（高度链的第一环）。
+ *
+ * ⚠️ 类名是 `.n-card-content`（naive 的 `cB("card-content")`），**不是** `.n-card__content`：
+ *    后者不匹配任何元素，写错了整条规则静默失效（列表会变成不滚动的长块）。
+ */
+.md__side :deep(.n-card-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.md__side-head {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 14px;
+}
+
+.md__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.md__list-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.md__empty {
+  padding: 24px 0;
+}
+
+.md__row {
+  padding: 8px 10px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+
+.md__row:hover {
+  background: var(--xt-band-bg);
+}
+
+.md__row--on {
+  background: #eef4ff;
+  border-color: #cfe0ff;
+}
+
+/* 名字与状态标签同行；左栏收窄（≤1100px）时标签整块落到下一行，而不是把名字挤断 */
+.md__row-main {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.md__row-name {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* 右栏：两张卡片自然堆叠、超高由自己滚 */
+.md__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--xt-gap);
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* 卡片不参与压缩：否则右栏内容一多，两张卡会被压扁而不是滚动 */
+.role__card {
+  flex: none;
+}
+
+/* 空态也占一张卡片：右侧留一块灰底会让人以为"页面没加载完" */
+.md__blank {
+  flex: 1;
+  min-height: 240px;
+}
+
+.md__blank :deep(.n-card-content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.role__head {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.role__name {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.role__code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.role__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.role__meta-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.role__meta-label {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.role__hint {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--xt-text-2);
+}
+
+.role__remark {
+  word-break: break-all;
+}
+
+/* ≤1100px：左栏收窄一档，别把右栏挤到撑破容器 */
+@media (max-width: 1100px) {
+  .md__side {
+    width: 200px;
+  }
+}
+</style>
diff --git a/frontend-pc/src/views/task/TaskFormModal.vue b/frontend-pc/src/views/task/TaskFormModal.vue
index cda6635..99982e1 100644
--- a/frontend-pc/src/views/task/TaskFormModal.vue
+++ b/frontend-pc/src/views/task/TaskFormModal.vue
@@ -1,132 +1,48 @@
-<template>
-  <a-modal v-model:visible="visible" :title="title" :width="640" :mask-closable="false"
-    :ok-loading="submitting" @ok="confirm" @cancel="close">
-    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
-      <a-row :gutter="16">
-        <a-col :span="14">
-          <a-form-item field="taskName" label="任务名称">
-            <a-input v-model="form.taskName" placeholder="如 2026年9月机电专业认定材料收集"
-              :max-length="200" allow-clear />
-          </a-form-item>
-        </a-col>
-        <a-col :span="10">
-          <a-form-item field="batchNo" label="批次号">
-            <a-input v-model="form.batchNo" placeholder="如 202609" :max-length="8" allow-clear />
-            <template #extra>
-              <span class="task-form__hint">4~8 位数字，同时作为任务编码前缀</span>
-            </template>
-          </a-form-item>
-        </a-col>
-
-        <a-col :span="10">
-          <a-form-item field="majorName" label="专业">
-            <a-input v-model="form.majorName" placeholder="如 数控加工" :max-length="64" allow-clear />
-          </a-form-item>
-        </a-col>
-        <a-col :span="7">
-          <a-form-item field="jobName" label="报考工种">
-            <a-input v-model="form.jobName" placeholder="可后补" :max-length="64" allow-clear />
-          </a-form-item>
-        </a-col>
-        <a-col :span="7">
-          <a-form-item field="jobLevel" label="报考等级">
-            <a-input v-model="form.jobLevel" placeholder="可后补" :max-length="32" allow-clear />
-          </a-form-item>
-        </a-col>
-
-        <a-col :span="12">
-          <a-form-item field="startTime" label="填报开始">
-            <a-date-picker v-model="form.startTime" value-format="YYYY-MM-DD" style="width: 100%" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item field="endTime" label="填报截止">
-            <a-date-picker v-model="form.endTime" value-format="YYYY-MM-DD" style="width: 100%" />
-            <template #extra>
-              <span class="task-form__hint">只选日期时按当天 23:59:59 处理</span>
-            </template>
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-divider orientation="left">一期范围</a-divider>
-
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="收集模式">
-            <a-input model-value="学校收集" disabled />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="认定类型">
-            <a-input model-value="自主认定" disabled />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-alert type="info" :show-icon="false" class="task-form__scope">
-        <template #title>
-          一期只做 <strong>学校收集 + 自主认定</strong>。
-          社会收集、社会评价、专项职业能力已后置二期，数据结构保留、界面暂不开放。
-        </template>
-      </a-alert>
-
-      <a-divider orientation="left">命名规则</a-divider>
-
-      <a-form-item field="namingTemplate" label="文件命名模板">
-        <a-input v-model="form.namingTemplate" :max-length="256" allow-clear />
-        <template #extra>
-          <span class="task-form__hint">
-            必须含 <code>{姓名}</code> <code>{证件号}</code> <code>{材料名}</code> ——
-            缺了任一项，文件名就无法唯一归属到人。
-          </span>
-        </template>
-      </a-form-item>
-
-      <div class="task-form__vars">
-        <span class="task-form__vars-label">插入变量</span>
-        <a-space wrap size="mini">
-          <a-button v-for="opt in namingVariableOptions" :key="opt.value" size="mini" type="outline"
-            @click="appendVariable(opt.value)">
-            {{ opt.label }}
-          </a-button>
-        </a-space>
-      </div>
-
-      <a-form-item label="预览（以「张同学 / 361029200912100015 / 身份证」为例）">
-        <code class="task-form__preview">{{ namingPreview }}</code>
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
-import type { TaskUpsertReq, TaskVO } from '@/apis/xt/task'
-import { Message } from '@arco-design/web-vue'
-import * as taskApi from '@/apis/xt/task'
-import { DEFAULT_NAMING_TEMPLATE, NAMING_VARIABLES } from '@/apis/xt/task'
-
 /**
- * 建 / 改任务弹窗。
+ * 建 / 改任务弹窗（《03-接口设计》§7.2）。
  *
  * 三处刻意的设计：
  *   1. **命名模板带实时预览**：光看 `{姓名}-{证件号}-{材料名}` 很难想象最终长什么样，
  *      而它直接决定导出包里每个文件的名字。用样例数据渲染出来一眼就能判断。
- *   2. **收集模式与认定类型做成只读**：它们决定审核流与材料清单，
- *      一期也不启用其它取值。可编辑只会让人以为能改。
+ *   2. **收集模式与认定类型做成只读**：它们决定审核流与材料清单，本期也不开放其它取值。
+ *      可编辑只会让人以为能改。
  *   3. **变量用按钮插入而不是让人手打**：手打 `{姓名}` 少一个大括号或写成 `{姓名 }`，
  *      服务端只会在发布时给一个 40020，而那时已经配了一堆别的东西。
  */
+import type { FormInst, FormRules } from 'naive-ui'
+import type { TaskUpsertReq, TaskVO } from '@/apis/xt/task'
+import {
+  NAlert,
+  NButton,
+  NDatePicker,
+  NDivider,
+  NForm,
+  NFormItem,
+  NFormItemGi,
+  NGrid,
+  NInput,
+  NModal,
+  NSpace,
+  useMessage
+} from 'naive-ui'
+import { computed, reactive, ref, useTemplateRef } from 'vue'
+import * as taskApi from '@/apis/xt/task'
+import { DEFAULT_NAMING_TEMPLATE, NAMING_VARIABLES } from '@/apis/xt/task'
+
 defineOptions({ name: 'TaskFormModal' })
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
+
+const message = useMessage()
+
 const visible = ref(false)
 const submitting = ref(false)
 const detailId = ref<number | null>(null)
 
-const formRef = useTemplateRef('formRef')
+const formRef = useTemplateRef<FormInst>('formRef')
 
 const isEdit = computed(() => !!detailId.value)
 const title = computed(() => (isEdit.value ? '修改任务' : '新建收集任务'))
@@ -134,59 +50,63 @@ const title = computed(() => (isEdit.value ? '修改任务' : '新建收集任
 /**
  * 表单自己的类型。
  *
- * 与 {@link TaskUpsertReq} 的差别只在 `jobName` / `jobLevel`：
- * 接口那边允许 `null`（表示"清空"），而 Arco 的 `a-input` 的 v-model 只接受
- * `string | undefined` —— 直接绑 `string | null | undefined` 会报 TS2322。
- * 界面上用空串表示"没填"，发给服务端前由 Service 的 `trimToNull` 转成 null。
+ * 与 {@link TaskUpsertReq} 的差别是这里的 `jobName` / `jobLevel` 用空串表示"没填"
+ * （接口那边用 `null` 表示清空）；另外收集模式与认定类型**界面上没有输入项**，
+ * 构造请求体时写死为 1（本期只有学校收集 + 自主认定）。
+ *
+ * `startTime` / `endTime` 允许 `null`：Naive 的日期选择器清空时给的是 `null`。
  */
-type TaskForm = Omit<TaskUpsertReq, 'jobName' | 'jobLevel'> & {
+interface TaskForm {
+  taskName: string
+  batchNo: string
+  majorName: string
   jobName: string
   jobLevel: string
+  startTime: string | null
+  endTime: string | null
+  namingTemplate: string
 }
 
 const getInitForm = (): TaskForm => ({
   taskName: '',
-  collectMode: 1,
   batchNo: '',
   majorName: '',
   jobName: '',
   jobLevel: '',
-  certType: 1,
-  startTime: '',
-  endTime: '',
+  startTime: null,
+  endTime: null,
   namingTemplate: DEFAULT_NAMING_TEMPLATE
 })
 
 const form = reactive(getInitForm())
 
-const rules: FormInstance['rules'] = {
-  taskName: [{ required: true, message: '请填写任务名称' }],
+const rules: FormRules = {
+  taskName: { required: true, message: '请填写任务名称', trigger: ['input', 'blur'] },
   batchNo: [
-    { required: true, message: '请填写批次号' },
-    { match: /^\d{4,8}$/, message: '批次号应为 4~8 位数字' }
+    { required: true, message: '请填写批次号', trigger: ['input', 'blur'] },
+    { pattern: /^\d{4,8}$/, message: '批次号应为 4~8 位数字', trigger: ['input', 'blur'] }
   ],
-  majorName: [{ required: true, message: '请填写专业' }],
-  startTime: [{ required: true, message: '请选择填报开始时间' }],
+  majorName: { required: true, message: '请填写专业', trigger: ['input', 'blur'] },
+  startTime: { required: true, message: '请选择填报开始时间', trigger: ['change'] },
   endTime: [
-    { required: true, message: '请选择填报截止时间' },
+    { required: true, message: '请选择填报截止时间', trigger: ['change'] },
     {
-      validator: (value: string, callback: (error?: string) => void) => {
+      validator: (_rule, value: string | null) => {
         if (value && form.startTime && value <= form.startTime) {
-          callback('截止时间必须晚于开始时间')
-          return
+          return new Error('截止时间必须晚于开始时间')
         }
-        callback()
-      }
+        return true
+      },
+      trigger: ['change']
     }
   ],
-  namingTemplate: [{ required: true, message: '请填写命名模板' }]
+  namingTemplate: { required: true, message: '请填写命名模板', trigger: ['input', 'blur'] }
 }
 
 /**
  * 预览时把 `{自定义字段.xxx}` 整体替换掉。
  *
- * 放在模块作用域而不是 computed 里：正则每次渲染都重新编译一遍是纯浪费，
- * 而且这条规则（e18e/prefer-static-regex）在项目里是开着的。
+ * 放在模块作用域而不是 computed 里：正则每次渲染都重新编译一遍是纯浪费。
  */
 const CUSTOM_FIELD_RE = /\{自定义字段\.[^}]*\}/g
 
@@ -208,7 +128,10 @@ const namingPreview = computed(() => {
   }
   let out = form.namingTemplate || ''
   for (const [k, v] of Object.entries(sample)) {
-    out = out.replaceAll(`{${k}}`, v)
+    // 用 split/join 而不是 replaceAll：后者的 lib 声明是 ES2021，
+    // 而本项目的 tsconfig 没把 lib 提到那一档（typecheck 会红）。
+    // 效果一样，且模板里的变量互不重叠，不存在"替换结果又被下一次命中"的问题。
+    out = out.split(`{${k}}`).join(v)
   }
   // 自定义字段在预览里没有真实值，用占位提示而不是留一个空
   out = out.replace(CUSTOM_FIELD_RE, '（自定义字段）')
@@ -220,10 +143,8 @@ const namingPreview = computed(() => {
  *
  * ⚠️ **不要在模板里拼花括号**（比如 `{{ '{' + v + '}' }}`）。
  * Vue 的插值解析器是靠找 `}}` 来收尾的，而模板里一旦出现内层的 `}` 与结尾的 `}}`
- * 相邻（eslint --fix 会把它"帮忙"改成模板字符串 `` `{${v}}` ``，正好制造这种情况），
- * 就会报 `Error parsing JavaScript expression: Unexpected token, expected "}"` ——
- * 而且这个错误**只在构建/编译时才出现**，编辑器里看不出问题。
- * 所以在 script 里算好，模板里只做纯取值。
+ * 相邻，就会报 `Error parsing JavaScript expression` —— 而且这个错误**只在编译时**出现，
+ * 编辑器里看不出问题。所以在 script 里算好，模板里只做纯取值。
  */
 const namingVariableOptions = NAMING_VARIABLES.map((v) => ({ value: v, label: `{${v}}` }))
 
@@ -231,7 +152,7 @@ function appendVariable(v: string) {
   form.namingTemplate = `${form.namingTemplate ?? ''}{${v}}`
 }
 
-async function add() {
+function add() {
   detailId.value = null
   Object.assign(form, getInitForm())
   visible.value = true
@@ -245,8 +166,8 @@ function edit(row: TaskVO) {
   form.majorName = row.majorName ?? ''
   form.jobName = row.jobName ?? ''
   form.jobLevel = row.jobLevel ?? ''
-  form.startTime = (row.startTime ?? '').slice(0, 10)
-  form.endTime = (row.endTime ?? '').slice(0, 10)
+  form.startTime = (row.startTime ?? '').slice(0, 10) || null
+  form.endTime = (row.endTime ?? '').slice(0, 10) || null
   form.namingTemplate = row.namingTemplate ?? DEFAULT_NAMING_TEMPLATE
   visible.value = true
 }
@@ -256,34 +177,40 @@ function close() {
 }
 
 async function confirm() {
-  const valid = await formRef.value?.validate()
-  if (valid) return false
+  try {
+    await formRef.value?.validate()
+  } catch {
+    // ⚠️ Naive 的 `validate()` 在不过时是 **reject**（不是返回 false），所以必须 catch
+    return
+  }
+
+  const end = form.endTime ?? ''
+  const payload: TaskUpsertReq = {
+    taskName: form.taskName.trim(),
+    // 本期只开放这两个取值，界面上也没有输入项 —— 写死而不是从表单里读
+    collectMode: 1,
+    certType: 1,
+    batchNo: (form.batchNo ?? '').trim(),
+    majorName: form.majorName.trim(),
+    jobName: form.jobName?.trim() || null,
+    jobLevel: form.jobLevel?.trim() || null,
+    startTime: form.startTime ?? '',
+    // 只给日期时补上当天最后一秒，避免"截止日期当天 00:00 就截止了"
+    endTime: end.length <= 10 ? `${end}T23:59:59` : end,
+    namingTemplate: (form.namingTemplate ?? '').trim()
+  }
 
   submitting.value = true
   try {
-    const payload: TaskUpsertReq = {
-      taskName: form.taskName.trim(),
-      collectMode: 1,
-      batchNo: (form.batchNo ?? '').trim(),
-      majorName: form.majorName.trim(),
-      jobName: form.jobName?.trim() || null,
-      jobLevel: form.jobLevel?.trim() || null,
-      certType: 1,
-      startTime: form.startTime,
-      // 只给日期时补上当天最后一秒，避免"截止日期当天 00:00 就截止了"
-      endTime: form.endTime.length <= 10 ? `${form.endTime}T23:59:59` : form.endTime,
-      namingTemplate: (form.namingTemplate ?? '').trim()
-    }
-    if (isEdit.value) {
-      await taskApi.updateTask(detailId.value!, payload)
-      Message.success('已保存')
+    if (isEdit.value && detailId.value) {
+      await taskApi.updateTask(detailId.value, payload)
+      message.success('已保存')
     } else {
       const res = await taskApi.addTask(payload)
-      Message.success(`任务已创建，编码 ${res.data?.taskCode ?? ''}（草稿）`)
+      message.success(`任务已创建，编码 ${res?.taskCode ?? ''}（草稿）`)
     }
     visible.value = false
     emit('save-success')
-    return true
   } finally {
     submitting.value = false
   }
@@ -292,17 +219,140 @@ async function confirm() {
 defineExpose({ add, edit })
 </script>
 
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="card"
+    :title="title"
+    :style="{ width: '640px' }"
+    :mask-closable="false"
+  >
+    <NForm ref="formRef" :model="form" :rules="rules" label-placement="top">
+      <NGrid :cols="24" :x-gap="16">
+        <NFormItemGi :span="14" label="任务名称" path="taskName">
+          <NInput
+            v-model:value="form.taskName"
+            placeholder="如 2026年9月机电专业认定材料收集"
+            :maxlength="200"
+            clearable
+          />
+        </NFormItemGi>
+        <NFormItemGi :span="10" label="批次号" path="batchNo">
+          <NInput v-model:value="form.batchNo" placeholder="如 202609" :maxlength="8" clearable />
+          <template #feedback>
+            <span class="task-form__hint">4~8 位数字，同时作为任务编码前缀</span>
+          </template>
+        </NFormItemGi>
+
+        <NFormItemGi :span="10" label="专业" path="majorName">
+          <NInput v-model:value="form.majorName" placeholder="如 数控加工" :maxlength="64" clearable />
+        </NFormItemGi>
+        <NFormItemGi :span="7" label="报考工种" path="jobName">
+          <NInput v-model:value="form.jobName" placeholder="可后补" :maxlength="64" clearable />
+        </NFormItemGi>
+        <NFormItemGi :span="7" label="报考等级" path="jobLevel">
+          <NInput v-model:value="form.jobLevel" placeholder="可后补" :maxlength="32" clearable />
+        </NFormItemGi>
+
+        <NFormItemGi :span="12" label="填报开始" path="startTime">
+          <NDatePicker
+            v-model:formatted-value="form.startTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            clearable
+            class="task-form__date"
+          />
+        </NFormItemGi>
+        <NFormItemGi :span="12" label="填报截止" path="endTime">
+          <NDatePicker
+            v-model:formatted-value="form.endTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            clearable
+            class="task-form__date"
+          />
+          <template #feedback>
+            <span class="task-form__hint">只选日期时按当天 23:59:59 处理</span>
+          </template>
+        </NFormItemGi>
+      </NGrid>
+
+      <NDivider title-placement="left">
+        本期范围
+      </NDivider>
+
+      <NGrid :cols="2" :x-gap="16">
+        <NFormItem label="收集模式">
+          <NInput value="学校收集" disabled />
+        </NFormItem>
+        <NFormItem label="认定类型">
+          <NInput value="自主认定" disabled />
+        </NFormItem>
+      </NGrid>
+
+      <NAlert type="info" :show-icon="false" :bordered="false" class="task-form__scope">
+        本期只做 <strong>学校收集 + 自主认定</strong>：收集模式与认定类型由系统固定，
+        界面上不开放其它取值。
+      </NAlert>
+
+      <NDivider title-placement="left">
+        命名规则
+      </NDivider>
+
+      <NFormItem label="文件命名模板" path="namingTemplate">
+        <NInput v-model:value="form.namingTemplate" :maxlength="256" clearable />
+        <template #feedback>
+          <span class="task-form__hint">
+            必须含 <code>{姓名}</code> <code>{证件号}</code> <code>{材料名}</code> ——
+            缺了任一项，文件名就无法唯一归属到人。
+          </span>
+        </template>
+      </NFormItem>
+
+      <div class="task-form__vars">
+        <span class="task-form__vars-label">插入变量</span>
+        <NSpace :size="6">
+          <NButton
+            v-for="opt in namingVariableOptions"
+            :key="opt.value"
+            size="tiny"
+            secondary
+            @click="appendVariable(opt.value)"
+          >
+            {{ opt.label }}
+          </NButton>
+        </NSpace>
+      </div>
+
+      <NFormItem label="预览（以「张同学 / 361029200912100015 / 身份证」为例）">
+        <code class="task-form__preview">{{ namingPreview }}</code>
+      </NFormItem>
+    </NForm>
+
+    <template #footer>
+      <NSpace justify="end" :size="8">
+        <NButton :disabled="submitting" @click="close">
+          取消
+        </NButton>
+        <NButton type="primary" :loading="submitting" @click="confirm">
+          保存
+        </NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
 <style lang="scss" scoped>
 .task-form {
   &__hint {
     font-size: 12px;
     line-height: 1.7;
-    color: var(--color-text-3);
+    color: #8a8a8a;
 
     code {
       padding: 0 3px;
-      font-family: var(--font-mono, ui-monospace, monospace);
-      background: var(--color-fill-2);
+      font-family: ui-monospace, monospace;
+      background: #f2f3f5;
       border-radius: 2px;
     }
   }
@@ -312,6 +362,10 @@ defineExpose({ add, edit })
     line-height: 1.8;
   }
 
+  &__date {
+    width: 100%;
+  }
+
   &__vars {
     display: flex;
     gap: 10px;
@@ -322,18 +376,18 @@ defineExpose({ add, edit })
   &__vars-label {
     flex: none;
     font-size: 12px;
-    color: var(--color-text-3);
+    color: #8a8a8a;
   }
 
   &__preview {
     display: block;
     width: 100%;
     padding: 6px 10px;
-    font-family: var(--font-mono, ui-monospace, monospace);
+    font-family: ui-monospace, monospace;
     font-size: 13px;
-    color: var(--color-text-1);
+    color: #1f2229;
     word-break: break-all;
-    background: var(--color-fill-2);
+    background: #f2f3f5;
     border-radius: 4px;
   }
 }
diff --git a/frontend-pc/src/views/task/TaskFormSchemaDrawer.vue b/frontend-pc/src/views/task/TaskFormSchemaDrawer.vue
index 610482f..b3cd975 100644
--- a/frontend-pc/src/views/task/TaskFormSchemaDrawer.vue
+++ b/frontend-pc/src/views/task/TaskFormSchemaDrawer.vue
@@ -1,249 +1,4 @@
-<template>
-  <a-drawer v-model:visible="visible" :width="1120" :mask-closable="false" :footer="false"
-    unmount-on-close @cancel="close">
-    <template #title>
-      <span>表单设计</span>
-      <span class="fd__task">{{ taskName }}</span>
-    </template>
-
-    <a-alert v-if="readonly" type="normal" :show-icon="false" class="fd__alert">
-      任务已{{ readonlyReason }}，表单不可再修改，只能查看。
-    </a-alert>
-    <a-alert v-else-if="collecting" type="warning" class="fd__alert">
-      <template #title>
-        任务正在收集中，<strong>保存后即刻生效</strong>：学生刷新页面就会看到新表单。
-        已在填报的学生会按新表单重新校验（新标必填而没填的项会变成问题项）。
-      </template>
-    </a-alert>
-
-    <!--
-      版本号要显眼地摆出来。设计器是"打开 → 改很多处 → 保存"的过程，
-      而服务端用 baseVersion 做乐观锁 —— 让人知道自己正基于哪一版改，
-      冲突时才看得懂那句"别人已经保存过"。
-    -->
-    <div class="fd__bar">
-      <div class="fd__ver">
-        <a-tag :color="schema.version === 0 ? 'gray' : 'arcoblue'">
-          {{ schema.version === 0 ? '未保存过（当前为官方默认表单）' : `当前版本 v${schema.version}` }}
-        </a-tag>
-        <span v-if="schema.latestVersion && schema.latestVersion !== schema.version" class="fd__warn">
-          库里最新是 v{{ schema.latestVersion }}，保存时会被拦下
-        </span>
-      </div>
-      <a-space>
-        <a-button type="primary" :loading="saving" :disabled="readonly" @click="save">
-          保存为新版本
-        </a-button>
-        <a-button :disabled="saving" @click="load">放弃修改并重新加载</a-button>
-      </a-space>
-    </div>
-
-    <a-spin :loading="loading">
-      <a-divider orientation="left">内置字段（官方 21 项，不可删除）</a-divider>
-      <!--
-        为什么内置字段不能删：删掉之后"这个值到底该不该有"就永远说不清了
-        （服务端 40026）。不想收的信息用「条件显示 → 不收集」隐藏，
-        这样它仍然在定义里，只是学生看不到、也不参与必填校验。
-      -->
-      <div class="fd__hint">
-        这些是认定机构要的官方字段。<strong>不想要某一项时不要删</strong>（也删不掉），
-        把它的「条件显示」设为「不收集」即可。带「只读」的字段由老师在名册里填，学生看不到输入框。
-      </div>
-
-      <a-table :data="fields" :pagination="false" row-key="key" size="small" :bordered="false">
-        <template #columns>
-          <a-table-column title="字段" :width="220">
-            <template #cell="{ record }">
-              <div class="fd__label">
-                {{ record.label }}
-                <a-tag v-if="record.locked" size="small">只读</a-tag>
-              </div>
-              <div class="fd__key">{{ record.key }}</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="类型" :width="90">
-            <template #cell="{ record }">
-              <span class="fd__muted">{{ FIELD_TYPE_NAMES[record.type] ?? record.type }}</span>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="必填" :width="80" align="center">
-            <template #cell="{ record }">
-              <!-- 只读字段的必填没有意义（学生改不了、值来自名册），所以直接置灰 -->
-              <a-switch v-model="record.required" size="small" :disabled="readonly || record.locked" />
-            </template>
-          </a-table-column>
-
-          <a-table-column title="条件显示" :width="190">
-            <template #cell="{ record }">
-              <a-select v-model="record.condIndex" size="small" :disabled="readonly"
-                :error="record.condIndex === -1" placeholder="自定义规则">
-                <a-option v-for="(o, i) in CONDITION_OPTIONS" :key="i" :value="i">{{ o.label }}</a-option>
-                <a-option v-if="record.condIndex === -1" :value="-1">自定义（接口配的）</a-option>
-              </a-select>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="排序" :width="80" align="center">
-            <template #cell="{ record }">
-              <a-input-number v-model="record.sortNo" size="small" :min="0" :max="9999"
-                :disabled="readonly" class="fd__num" />
-            </template>
-          </a-table-column>
-
-          <a-table-column title="学生端提示语">
-            <template #cell="{ record }">
-              <a-input v-model="record.tip" size="small" :max-length="200" allow-clear
-                :disabled="readonly" placeholder="如：没有工作单位请填「无」" />
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-
-      <a-divider orientation="left">扩展字段（自定义，仅展示与导出，不参与统计）</a-divider>
-      <a-space class="fd__tool">
-        <a-button v-if="!readonly" type="primary" @click="onAddExtra">
-          <template #icon><IconPlus /></template>
-          新增扩展字段
-        </a-button>
-        <span class="fd__hint fd__hint--inline">
-          扩展字段的值落在 <code>extras_json</code>，key 必须带 <code>extra_</code> 前缀 ——
-          前缀是防重名的护栏，否则"这个值到底是内置的还是扩展的"永远说不清
-        </span>
-      </a-space>
-
-      <a-empty v-if="!extras.length" description="没有扩展字段" />
-
-      <a-table v-else :data="extras" :pagination="false" row-key="key" size="small" :bordered="false">
-        <template #columns>
-          <a-table-column title="字段" :width="200">
-            <template #cell="{ record }">
-              <div class="fd__label">{{ record.label }}</div>
-              <div class="fd__key">{{ record.key }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="类型" :width="90">
-            <template #cell="{ record }">
-              <span class="fd__muted">{{ FIELD_TYPE_NAMES[record.type] ?? record.type }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="必填" :width="80" align="center">
-            <template #cell="{ record }">
-              <a-tag v-if="record.required" color="red" size="small">必填</a-tag>
-              <a-tag v-else size="small">选填</a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="条件显示" :width="150">
-            <template #cell="{ record }">
-              <span class="fd__muted">{{ CONDITION_OPTIONS[record.condIndex]?.label ?? '自定义' }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="选项">
-            <template #cell="{ record }">
-              <span v-if="record.options?.length">{{ record.options.join(' / ') }}</span>
-              <span v-else class="fd__muted">—</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="操作" :width="110" align="center">
-            <template #cell="{ record }">
-              <a-space v-if="!readonly" size="mini">
-                <a-link @click="onEditExtra(record)">编辑</a-link>
-                <a-popconfirm content="删除后学生端不再显示这一项。确认删除？" type="warning"
-                  @ok="onDeleteExtra(record)">
-                  <a-link status="danger">删除</a-link>
-                </a-popconfirm>
-              </a-space>
-              <span v-else class="fd__muted">只读</span>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-spin>
-
-    <!-- ── 扩展字段编辑 ── -->
-    <a-modal v-model:visible="extraVisible" :title="extraTitle" :width="620" :mask-closable="false"
-      :ok-loading="false" @ok="saveExtra" @cancel="() => (extraVisible = false)">
-      <a-form ref="extraFormRef" :model="extraForm" :rules="extraRules" layout="vertical">
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="label" label="字段名称">
-              <a-input v-model="extraForm.label" placeholder="如 家长联系电话" :max-length="64" allow-clear />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="key" label="字段标识（key）">
-              <a-input v-model="extraForm.key" placeholder="extra_xxx" :max-length="46" allow-clear />
-              <template #extra>
-                <span class="fd__hint">
-                  必须以 <code>extra_</code> 开头，只含小写字母、数字、下划线
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="12">
-            <a-form-item field="type" label="类型">
-              <a-select v-model="extraForm.type" placeholder="选择类型">
-                <a-option v-for="t in FIELD_TYPES" :key="t" :value="t">
-                  {{ FIELD_TYPE_NAMES[t] }}
-                </a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="required" label="是否必填">
-              <a-switch v-model="extraForm.required" :checked-value="true" :unchecked-value="false" />
-            </a-form-item>
-          </a-col>
-
-          <a-col v-if="needOptions" :span="24">
-            <a-form-item field="options" label="选项（每行一个）">
-              <a-textarea v-model="extraForm.optionsText" :auto-size="{ minRows: 3, maxRows: 8 }"
-                placeholder="选项一&#10;选项二" />
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="12">
-            <a-form-item field="condIndex" label="条件显示">
-              <a-select v-model="extraForm.condIndex">
-                <a-option v-for="(o, i) in CONDITION_OPTIONS" :key="i" :value="i">{{ o.label }}</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="sortNo" label="排序号">
-              <a-input-number v-model="extraForm.sortNo" :min="0" :max="9999" class="fd__num" />
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item field="tip" label="学生端提示语">
-              <a-input v-model="extraForm.tip" :max-length="200" allow-clear
-                placeholder="如：填不常用的手机号，便于联系" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-modal>
-  </a-drawer>
-</template>
-
 <script setup lang="ts">
-import type { FieldRule, FormInstance } from '@arco-design/web-vue'
-import type { FormFieldVO, FormSchemaVO } from '@/apis/xt/form-schema'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconPlus } from '@arco-design/web-vue/es/icon'
-import * as formApi from '@/apis/xt/form-schema'
-import {
-  CONDITION_OPTIONS,
-  conditionIndex,
-  EXTRA_KEY_PATTERN,
-  FIELD_TYPE_NAMES,
-  FIELD_TYPES,
-  suggestExtraKey
-} from '@/apis/xt/form-schema'
-
 /**
  * 任务「表单设计」抽屉（《03-接口设计》§7.9）。
  *
@@ -256,8 +11,8 @@ import {
  *
  * ## 五处刻意的设计
  *
- * 1. **版本号摆在最显眼处**。服务端用 `baseVersion` 做乐观锁，
- *    冲突时返回 40025 —— 用户得先知道自己正基于哪一版改，才看得懂那句"别人保存过"。
+ * 1. **版本号摆在最显眼处**。服务端用 `baseVersion` 做乐观锁，冲突时返回 40025 ——
+ *    用户得先知道自己正基于哪一版改，才看得懂那句"别人保存过"。
  *
  * 2. **「不收集」是拼出来的，不是删出来的**。内置字段不可删，
  *    所以用一条永远不成立的条件（`_never_`）把它隐藏。
@@ -267,18 +22,60 @@ import {
  *    学生改不了 —— 给一个能拨但拨不动的开关，只会让人以为它坏了。
  *
  * 4. **保存失败时给"重新加载"这条路**。版本冲突不是错误，是并发，
- *    所以用 Modal 明确说清楚，而不是一句红色 toast。
+ *    所以用弹窗明确说清楚，而不是一句红色 toast。
  *
  * 5. **提示语直接在表里编辑**。它是本产品最省人力的一个字段
- *    （写清楚"没有工作单位请填「无」"，就少一批人来问），
- *    藏在二级弹窗里没人会去填。
+ *    （写清楚"没有工作单位请填「无」"，就少一批人来问），藏在二级弹窗里没人会去填。
+ *
+ * ⚠️ 单元格样式走内联：渲染函数创建的元素拿不到本组件的 scoped 属性。
  */
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
+import type { BizError } from '@/apis/types'
+import type { FormFieldVO, FormSchemaVO } from '@/apis/xt/form-schema'
+import {
+  NAlert,
+  NButton,
+  NDataTable,
+  NDivider,
+  NDrawer,
+  NDrawerContent,
+  NEmpty,
+  NForm,
+  NFormItemGi,
+  NGrid,
+  NInput,
+  NInputNumber,
+  NModal,
+  NPopconfirm,
+  NSelect,
+  NSpace,
+  NSpin,
+  NSwitch,
+  NTag,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, reactive, ref, useTemplateRef, watch } from 'vue'
+import * as formApi from '@/apis/xt/form-schema'
+import {
+  CONDITION_OPTIONS,
+  conditionIndex,
+  EXTRA_KEY_PATTERN,
+  FIELD_TYPE_NAMES,
+  FIELD_TYPES,
+  suggestExtraKey
+} from '@/apis/xt/form-schema'
+import AppIcon from '@/icons/AppIcon.vue'
+
 defineOptions({ name: 'TaskFormSchemaDrawer' })
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
+const message = useMessage()
+const dialog = useDialog()
+
 /** 内部编辑模型：多一个 `condIndex` 承载下拉选择（服务端存的是 visibleWhen 对象）。 */
 interface EditField extends FormFieldVO {
   condIndex: number
@@ -302,6 +99,12 @@ const readonly = computed(() => !EDITABLE.includes(taskStatus.value))
 const readonlyReason = computed(() => (taskStatus.value === 2 ? '截止' : '归档'))
 const collecting = computed(() => taskStatus.value === 1)
 
+// 渲染函数里的样式常量（scoped 样式对这些元素不生效）
+const S_LABEL = 'display: flex; align-items: center; gap: 6px'
+const S_MUTED = 'font-size: 12px; color: #8a8a8a'
+
+const conditionSelectOptions = CONDITION_OPTIONS.map((o, i) => ({ label: o.label, value: i }))
+
 // ── 加载 ──────────────────────────────────────────
 
 function toEdit(list: FormFieldVO[] | undefined): EditField[] {
@@ -332,11 +135,10 @@ async function load() {
   }
   loading.value = true
   try {
-    const r = await formApi.getFormSchema(taskId.value)
-    const d = r.data ?? { version: 0, isCurrent: true, fields: [], extras: [] }
-    schema.value = d
-    fields.value = toEdit(d.fields)
-    extras.value = toEdit(d.extras)
+    const d = await formApi.getFormSchema(taskId.value)
+    schema.value = d ?? { version: 0, isCurrent: true, fields: [], extras: [] }
+    fields.value = toEdit(d?.fields)
+    extras.value = toEdit(d?.extras)
   } finally {
     loading.value = false
   }
@@ -346,6 +148,19 @@ function close() {
   extraVisible.value = false
 }
 
+/**
+ * 关闭抽屉时把内层弹窗一起收掉。
+ *
+ * ⚠️ Naive 的抽屉默认**不销毁内容**：抽屉关掉而"新增扩展字段"的弹窗还开着，
+ * 它会被 teleport 到 body 上继续挂在屏幕中间。
+ */
+function onShowChange(v: boolean) {
+  visible.value = v
+  if (!v) {
+    close()
+  }
+}
+
 // ── 保存 ──────────────────────────────────────────
 
 async function save() {
@@ -359,37 +174,189 @@ async function save() {
       fields: toSave(fields.value),
       extras: toSave(extras.value)
     })
-    Message.success(`已保存为 v${r.data?.version ?? '?'}`)
+    message.success(`已保存为 v${r?.version ?? '?'}`)
     await load()
     emit('save-success')
   } catch (e) {
     // 版本冲突（40025）不是错误，是并发：别人先保存过。
     // 服务端在 data 里回了最新定义 —— 但**直接套用等于把用户改的丢掉**，
     // 所以这里给两条路，让人自己决定。
-    const err = e as Error & { bizCode?: number, bizData?: unknown }
+    const err = e as BizError
     if (err.bizCode === 40025) {
-      Modal.warning({
+      dialog.warning({
         title: '有人先保存过了',
-        content: `你打开时是 v${schema.value.version}，库里已经是新版本。
-          直接覆盖会丢掉对方刚改的内容 —— 请先重新加载看看对方改了什么，再决定怎么合。`,
-        okText: '重新加载',
-        hideCancel: true
+        content: () => h('div', { style: 'line-height: 1.8' }, `你打开时是 v${schema.value.version}，库里已经是新版本。直接覆盖会丢掉对方刚改的内容 —— 请先重新加载看看对方改了什么，再决定怎么合。`),
+        positiveText: '重新加载',
+        onPositiveClick: () => {
+          void load()
+        }
       })
-      await load()
     } else if (err.bizCode === 40026) {
-      Message.error('内置字段不能删除。不想收某一项，请把它的「条件显示」设为「不收集」')
+      message.error('内置字段不能删除。不想收某一项，请把它的「条件显示」设为「不收集」')
     } else {
-      Message.error(err.message || '保存失败')
+      message.error(err.message || '保存失败')
     }
   } finally {
     saving.value = false
   }
 }
 
+// ── 内置字段列 ─────────────────────────────────────
+
+const fieldColumns = computed<DataTableColumns<EditField>>(() => [
+  {
+    title: '字段',
+    key: 'label',
+    width: 220,
+    render: (row) => h('div', [
+      h('div', { style: S_LABEL }, [
+        row.label,
+        row.locked ? h(NTag, { size: 'small', bordered: false }, { default: () => '只读' }) : null
+      ]),
+      h('div', { style: S_MUTED }, row.key)
+    ])
+  },
+  {
+    title: '类型',
+    key: 'type',
+    width: 90,
+    render: (row) => h('span', { style: S_MUTED }, FIELD_TYPE_NAMES[row.type] ?? row.type)
+  },
+  {
+    title: '必填',
+    key: 'required',
+    width: 80,
+    align: 'center',
+    // 只读字段的必填没有意义（学生改不了、值来自名册），所以直接置灰
+    render: (row) => h(NSwitch, {
+      'size': 'small',
+      'value': !!row.required,
+      'disabled': readonly.value || !!row.locked,
+      'onUpdate:value': (v: boolean) => {
+        row.required = v
+      }
+    })
+  },
+  {
+    title: '条件显示',
+    key: 'condIndex',
+    width: 190,
+    render: (row) => {
+      const opts = [...conditionSelectOptions]
+      if (row.condIndex === -1) {
+        opts.push({ label: '自定义（接口配的）', value: -1 })
+      }
+      return h(NSelect, {
+        'size': 'small',
+        'value': row.condIndex,
+        'options': opts,
+        'status': row.condIndex === -1 ? 'warning' : undefined,
+        'disabled': readonly.value,
+        'onUpdate:value': (v: number) => {
+          row.condIndex = v
+        }
+      })
+    }
+  },
+  {
+    title: '排序',
+    key: 'sortNo',
+    width: 90,
+    align: 'center',
+    render: (row) => h(NInputNumber, {
+      'size': 'small',
+      'value': row.sortNo ?? 0,
+      'min': 0,
+      'max': 9999,
+      'disabled': readonly.value,
+      'onUpdate:value': (v: number | null) => {
+        row.sortNo = v ?? 0
+      }
+    })
+  },
+  {
+    title: '学生端提示语',
+    key: 'tip',
+    render: (row) => h(NInput, {
+      'size': 'small',
+      'value': row.tip ?? '',
+      'maxlength': 200,
+      'clearable': true,
+      'placeholder': '如：没有工作单位请填「无」',
+      'disabled': readonly.value,
+      'onUpdate:value': (v: string) => {
+        row.tip = v
+      }
+    })
+  }
+])
+
+const extraColumns = computed<DataTableColumns<EditField>>(() => [
+  {
+    title: '字段',
+    key: 'label',
+    width: 200,
+    render: (row) => h('div', [
+      h('div', { style: 'font-weight: 500; color: #1f2229' }, row.label),
+      h('div', { style: S_MUTED }, row.key)
+    ])
+  },
+  {
+    title: '类型',
+    key: 'type',
+    width: 90,
+    render: (row) => h('span', { style: S_MUTED }, FIELD_TYPE_NAMES[row.type] ?? row.type)
+  },
+  {
+    title: '必填',
+    key: 'required',
+    width: 80,
+    align: 'center',
+    render: (row) => h(NTag, {
+      size: 'small',
+      bordered: false,
+      type: row.required ? 'error' : 'default'
+    }, { default: () => (row.required ? '必填' : '选填') })
+  },
+  {
+    title: '条件显示',
+    key: 'condIndex',
+    width: 150,
+    render: (row) => h('span', { style: S_MUTED }, CONDITION_OPTIONS[row.condIndex]?.label ?? '自定义')
+  },
+  {
+    title: '选项',
+    key: 'options',
+    render: (row) => (row.options?.length
+      ? h('span', row.options.join(' / '))
+      : h('span', { style: S_MUTED }, '—'))
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 110,
+    align: 'center',
+    render: (row) => {
+      if (readonly.value) {
+        return h('span', { style: S_MUTED }, '只读')
+      }
+      return h('div', { style: 'display: flex; gap: 8px; justify-content: center' }, [
+        h(NButton, { text: true, size: 'small', onClick: () => onEditExtra(row) }, { default: () => '编辑' }),
+        h(NPopconfirm, {
+          onPositiveClick: () => onDeleteExtra(row)
+        }, {
+          trigger: () => h(NButton, { text: true, size: 'small', type: 'error' }, { default: () => '删除' }),
+          default: () => '删除后学生端不再显示这一项。确认删除？'
+        })
+      ])
+    }
+  }
+])
+
 // ── 扩展字段 ──────────────────────────────────────
 
 const extraEditingKey = ref<string | null>(null)
-const extraFormRef = useTemplateRef<FormInstance>('extraFormRef')
+const extraFormRef = useTemplateRef<FormInst>('extraFormRef')
 
 const emptyExtra = () => ({
   label: '',
@@ -406,27 +373,24 @@ const extraForm = reactive(emptyExtra())
 const needOptions = computed(() => extraForm.type === 'select' || extraForm.type === 'cascade')
 const extraTitle = computed(() => (extraEditingKey.value ? '编辑扩展字段' : '新增扩展字段'))
 
-const extraRules: Record<string, FieldRule[]> = {
-  label: [{ required: true, message: '请填写字段名称' }],
-  type: [{ required: true, message: '请选择类型' }],
+const extraRules: FormRules = {
+  label: { required: true, message: '请填写字段名称', trigger: ['input', 'blur'] },
+  type: { required: true, message: '请选择类型', trigger: ['change'] },
   key: [
-    { required: true, message: '请填写字段标识' },
+    { required: true, message: '请填写字段标识', trigger: ['input', 'blur'] },
     {
-      validator: (value: unknown, cb: (msg?: string) => void) => {
+      validator: (_rule, value: string) => {
         const v = String(value ?? '').trim()
         if (!EXTRA_KEY_PATTERN.test(v)) {
-          cb('必须以 extra_ 开头，且只含小写字母、数字、下划线')
-          return
+          return new Error('必须以 extra_ 开头，且只含小写字母、数字、下划线')
         }
-        const dup = extras.value.some(
-          (x) => x.key === v && x.key !== extraEditingKey.value
-        )
+        const dup = extras.value.some((x) => x.key === v && x.key !== extraEditingKey.value)
         if (dup) {
-          cb('这个标识已经被别的扩展字段用了')
-          return
+          return new Error('这个标识已经被别的扩展字段用了')
         }
-        cb()
-      }
+        return true
+      },
+      trigger: ['input', 'blur']
     }
   ]
 }
@@ -460,12 +424,14 @@ function onEditExtra(row: EditField) {
 
 function onDeleteExtra(row: EditField) {
   extras.value = extras.value.filter((x) => x.key !== row.key)
-  Message.info('已从列表移除，点「保存为新版本」后生效')
+  message.info('已从列表移除，点「保存为新版本」后生效')
 }
 
 async function saveExtra() {
-  const invalid = await extraFormRef.value?.validate()
-  if (invalid) {
+  try {
+    await extraFormRef.value?.validate()
+  } catch {
+    // Naive 的 `validate()` 在不过时是 reject（不是返回 false）
     return
   }
   const opts = needOptions.value
@@ -490,10 +456,10 @@ async function saveExtra() {
     extras.value.push(item)
   }
   extraVisible.value = false
-  Message.info('已加入列表，点「保存为新版本」后生效')
+  message.info('已加入列表，点「保存为新版本」后生效')
 }
 
-/** 填了名称但还没填 key 时，顺手给一个合法的候选（不覆盖用户已填的）。 */
+/** 填了名称但还没填 key 时，顺手给一个合法的候选（不覆盖用户已填的） */
 watch(
   () => extraForm.label,
   (v) => {
@@ -506,24 +472,234 @@ watch(
 defineExpose({ open })
 </script>
 
+<template>
+  <NDrawer
+    :show="visible"
+    :width="1120"
+    :mask-closable="false"
+    placement="right"
+    @update:show="onShowChange"
+  >
+    <NDrawerContent :native-scrollbar="false" closable>
+      <template #header>
+        <span>表单设计</span>
+        <span class="fd__task">{{ taskName }}</span>
+      </template>
+
+      <NAlert v-if="readonly" type="default" :show-icon="false" :bordered="false" class="fd__alert">
+        任务已{{ readonlyReason }}，表单不可再修改，只能查看。
+      </NAlert>
+      <NAlert v-else-if="collecting" type="warning" :show-icon="false" class="fd__alert">
+        任务正在收集中，<strong>保存后即刻生效</strong>：学生刷新页面就会看到新表单。
+        已在填报的学生会按新表单重新校验（新标必填而没填的项会变成问题项）。
+      </NAlert>
+
+      <!--
+        版本号要显眼地摆出来。设计器是"打开 → 改很多处 → 保存"的过程，
+        而服务端用 baseVersion 做乐观锁 —— 让人知道自己正基于哪一版改，
+        冲突时才看得懂那句"别人已经保存过"。
+      -->
+      <div class="fd__bar">
+        <div class="fd__ver">
+          <NTag size="small" :bordered="false" :type="schema.version === 0 ? 'default' : 'info'">
+            {{ schema.version === 0 ? '未保存过（当前为官方默认表单）' : `当前版本 v${schema.version}` }}
+          </NTag>
+          <span v-if="schema.latestVersion && schema.latestVersion !== schema.version" class="fd__warn">
+            库里最新是 v{{ schema.latestVersion }}，保存时会被拦下
+          </span>
+        </div>
+        <NSpace :size="8">
+          <NButton type="primary" :loading="saving" :disabled="readonly" @click="save">
+            保存为新版本
+          </NButton>
+          <NButton :disabled="saving" @click="load">
+            放弃修改并重新加载
+          </NButton>
+        </NSpace>
+      </div>
+
+      <NSpin :show="loading">
+        <NDivider title-placement="left">
+          内置字段（官方 21 项，不可删除）
+        </NDivider>
+        <!--
+          为什么内置字段不能删：删掉之后"这个值到底该不该有"就永远说不清了
+          （服务端 40026）。不想收的信息用「条件显示 → 不收集」隐藏，
+          这样它仍然在定义里，只是学生看不到、也不参与必填校验。
+        -->
+        <div class="fd__hint">
+          这些是认定机构要的官方字段。<strong>不想要某一项时不要删</strong>（也删不掉），
+          把它的「条件显示」设为「不收集」即可。带「只读」的字段由老师在名册里填，学生看不到输入框。
+        </div>
+
+        <NDataTable
+          :columns="fieldColumns"
+          :data="fields"
+          :pagination="false"
+          :bordered="false"
+          size="small"
+        />
+
+        <NDivider title-placement="left">
+          扩展字段（自定义，仅展示与导出，不参与统计）
+        </NDivider>
+        <NSpace class="fd__tool" :size="10" align="center">
+          <NButton v-if="!readonly" type="primary" @click="onAddExtra">
+            <template #icon>
+              <AppIcon name="plus" :size="15" />
+            </template>
+            新增扩展字段
+          </NButton>
+          <span class="fd__hint fd__hint--inline">
+            扩展字段的值落在 <code>extras_json</code>，key 必须带 <code>extra_</code> 前缀 ——
+            前缀是防重名的护栏，否则"这个值到底是内置的还是扩展的"永远说不清
+          </span>
+        </NSpace>
+
+        <NEmpty v-if="!extras.length" description="没有扩展字段" />
+
+        <NDataTable
+          v-else
+          :columns="extraColumns"
+          :data="extras"
+          :pagination="false"
+          :bordered="false"
+          size="small"
+        />
+      </NSpin>
+
+      <!-- ── 扩展字段编辑 ── -->
+      <NModal
+        v-model:show="extraVisible"
+        preset="card"
+        :title="extraTitle"
+        :style="{ width: '620px' }"
+        :mask-closable="false"
+      >
+        <NForm ref="extraFormRef" :model="extraForm" :rules="extraRules" label-placement="top">
+          <NGrid :cols="24" :x-gap="16">
+            <NFormItemGi :span="12" label="字段名称" path="label">
+              <NInput v-model:value="extraForm.label" placeholder="如 家长联系电话" :maxlength="64" clearable />
+            </NFormItemGi>
+            <NFormItemGi :span="12" label="字段标识（key）" path="key">
+              <NInput v-model:value="extraForm.key" placeholder="extra_xxx" :maxlength="46" clearable />
+              <template #feedback>
+                <span class="fd__hint fd__hint--inline">
+                  必须以 <code>extra_</code> 开头，只含小写字母、数字、下划线
+                </span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="12" label="类型" path="type">
+              <NSelect
+                v-model:value="extraForm.type"
+                placeholder="选择类型"
+                :options="FIELD_TYPES.map(t => ({ label: FIELD_TYPE_NAMES[t], value: t }))"
+              />
+            </NFormItemGi>
+            <NFormItemGi :span="12" label="是否必填" path="required">
+              <NSwitch v-model:value="extraForm.required" />
+            </NFormItemGi>
+
+            <NFormItemGi v-if="needOptions" :span="24" label="选项（每行一个）" path="options">
+              <NInput
+                v-model:value="extraForm.optionsText"
+                type="textarea"
+                :autosize="{ minRows: 3, maxRows: 8 }"
+                placeholder="选项一&#10;选项二"
+              />
+            </NFormItemGi>
+
+            <NFormItemGi :span="12" label="条件显示" path="condIndex">
+              <NSelect v-model:value="extraForm.condIndex" :options="conditionSelectOptions" />
+            </NFormItemGi>
+            <NFormItemGi :span="12" label="排序号" path="sortNo">
+              <NInputNumber v-model:value="extraForm.sortNo" :min="0" :max="9999" class="fd__num" />
+            </NFormItemGi>
+
+            <NFormItemGi :span="24" label="学生端提示语" path="tip">
+              <NInput
+                v-model:value="extraForm.tip"
+                :maxlength="200"
+                clearable
+                placeholder="如：填不常用的手机号，便于联系"
+              />
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+
+        <template #footer>
+          <NSpace justify="end" :size="8">
+            <NButton @click="extraVisible = false">
+              取消
+            </NButton>
+            <NButton type="primary" @click="saveExtra">
+              确定
+            </NButton>
+          </NSpace>
+        </template>
+      </NModal>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
 <style lang="scss" scoped>
 .fd {
-  &__task { margin-left: 12px; color: var(--color-text-3); font-weight: 400; }
-  &__alert { margin-bottom: 16px; }
+  &__task {
+    margin-left: 12px;
+    font-weight: 400;
+    color: #8a8a8a;
+  }
+
+  &__alert {
+    margin-bottom: 16px;
+    line-height: 1.8;
+  }
+
   &__bar {
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
   }
-  &__ver { display: flex; align-items: center; gap: 10px; }
-  &__warn { color: rgb(var(--orange-6)); font-size: 12px; }
+
+  &__ver {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  &__warn {
+    font-size: 12px;
+    color: #f0a020;
+  }
+
   &__hint {
-    margin-bottom: 12px; color: var(--color-text-3); font-size: 12px; line-height: 1.7;
-    &--inline { margin-bottom: 0; }
+    margin-bottom: 12px;
+    font-size: 12px;
+    line-height: 1.7;
+    color: #8a8a8a;
+
+    code {
+      padding: 0 3px;
+      font-family: ui-monospace, monospace;
+      background: #f2f3f5;
+      border-radius: 2px;
+    }
+
+    &--inline {
+      margin-bottom: 0;
+    }
+  }
+
+  &__tool {
+    margin-bottom: 12px;
+  }
+
+  &__num {
+    width: 100%;
   }
-  &__tool { margin-bottom: 12px; }
-  &__label { display: flex; align-items: center; gap: 6px; }
-  &__key { color: var(--color-text-3); font-size: 12px; }
-  &__muted { color: var(--color-text-3); }
-  &__num { width: 100%; }
 }
 </style>
diff --git a/frontend-pc/src/views/task/TaskMaterialDrawer.vue b/frontend-pc/src/views/task/TaskMaterialDrawer.vue
index 2439041..e8ff8c5 100644
--- a/frontend-pc/src/views/task/TaskMaterialDrawer.vue
+++ b/frontend-pc/src/views/task/TaskMaterialDrawer.vue
@@ -1,295 +1,4 @@
-<template>
-  <a-drawer v-model:visible="visible" :width="980" :mask-closable="false" :footer="false"
-    unmount-on-close @cancel="close">
-    <template #title>
-      <span>配置收集材料</span>
-      <span class="mat-drawer__task">{{ taskName }}</span>
-    </template>
-
-    <!--
-      已截止 / 已归档时只读。服务端的可编辑状态是 {草稿,收集中,已暂停}，
-      这里与服务端同口径 —— 界面上让按钮点不动，比点完被拒好。
-    -->
-    <a-alert v-if="readonly" type="normal" :show-icon="false" class="mat-drawer__alert">
-      任务已{{ readonlyReason }}，材料要求不可再修改，只能查看。
-    </a-alert>
-
-    <!--
-      收集中改材料要明确警告。学生可能已经在传了 —— 他现在看到的要求与十分钟后的
-      可能不一样，而这会让已传的文件与材料定义对不上（比如把必传改成选传、
-      或把体积上限调小，学生手里那份就已经超了）。服务端允许改（业务确实需要），
-      但界面必须把后果说出来。
-    -->
-    <a-alert v-else-if="collecting" type="warning" class="mat-drawer__alert">
-      <template #title>
-        任务正在收集中，<strong>改动立刻生效</strong>：学生刷新页面就会看到新的要求。
-        调小体积上限或改成必传，会让已经传过材料的学生出现新的问题项。
-      </template>
-    </a-alert>
-
-    <a-space class="mat-drawer__tool" wrap>
-      <a-dropdown v-if="!readonly" trigger="click" @select="onApplyTemplate">
-        <a-button type="primary">
-          <template #icon><IconPlus /></template>
-          按模板初始化
-        </a-button>
-        <template #content>
-          <a-doption v-for="t in templates" :key="t.templateCode" :value="t.templateCode">
-            {{ t.label }}
-          </a-doption>
-        </template>
-      </a-dropdown>
-      <a-button v-if="!readonly" @click="onAdd">
-        <template #icon><IconPlus /></template>
-        新增材料
-      </a-button>
-      <a-button @click="load">
-        <template #icon><IconRefresh /></template>
-        刷新
-      </a-button>
-      <!--
-        模板是幂等的（已存在的材料码会跳过），所以先说清楚"会跳过已存在的"，
-        否则管理员点两次会以为第一次没生效。
-      -->
-      <span class="mat-drawer__hint">按模板初始化是幂等的，已有的材料不会重复添加</span>
-    </a-space>
-
-    <a-spin :loading="loading">
-      <a-empty v-if="!rows.length" description="还没有材料要求，请先「按模板初始化」或「新增材料」">
-        <div class="mat-drawer__empty-hint">
-          必传材料一项都没有时，任务<strong>发布不了</strong>（服务端会返回 40018）。
-        </div>
-      </a-empty>
-
-      <a-table v-else :data="rows" :pagination="false" row-key="id" size="small" :bordered="false">
-        <template #columns>
-          <a-table-column title="材料" :width="200">
-            <template #cell="{ record }">
-              <div class="mat-drawer__name">
-                {{ record.materialName }}
-                <a-tag v-if="record.required" color="red" size="small">必传</a-tag>
-                <a-tag v-else size="small">选传</a-tag>
-              </div>
-              <div class="mat-drawer__code">{{ record.materialCode }}</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="适用对象" :width="120">
-            <template #cell="{ record }">
-              <span v-if="!record.visibleWhen" class="mat-drawer__muted">所有学生</span>
-              <a-tag v-else-if="visibleWhenIndex(record.visibleWhen) === 1" color="arcoblue">
-                仅在校生
-              </a-tag>
-              <a-tag v-else-if="visibleWhenIndex(record.visibleWhen) === 2" color="orange">
-                仅非在校生
-              </a-tag>
-              <a-tooltip v-else content="这是通过接口直接配置的规则，界面上暂不支持编辑">
-                <a-tag color="purple">自定义条件</a-tag>
-              </a-tooltip>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="要求" :width="200">
-            <template #cell="{ record }">
-              <div class="mat-drawer__req">
-                {{ (record.fileTypes || []).join('/') }} ·
-                ≤{{ record.maxSizeKb }}KB
-              </div>
-              <div class="mat-drawer__req mat-drawer__muted">
-                {{ record.maxCount > 1 ? `最多 ${record.maxCount} 份` : '1 份' }} ·
-                {{ profileShort(record.compressProfile) }}
-              </div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="学生端提示语" data-index="tipText" ellipsis tooltip>
-            <template #cell="{ record }">
-              <span v-if="record.tipText">{{ record.tipText }}</span>
-              <span v-else class="mat-drawer__muted">未设置</span>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="操作" :width="120" align="center">
-            <template #cell="{ record }">
-              <a-space v-if="!readonly" size="mini">
-                <a-link @click="onEdit(record)">编辑</a-link>
-                <!--
-                  已有文件时删不掉（服务端 40027）。这里不预先禁用，而是让服务端说清原因 ——
-                  因为"为什么删不掉"的答案（有人已经传了）比一个灰掉的按钮有用得多。
-                -->
-                <a-popconfirm content="删除后学生端不再要求这一项。确认删除？" type="warning"
-                  @ok="onDelete(record)">
-                  <a-link status="danger">删除</a-link>
-                </a-popconfirm>
-              </a-space>
-              <span v-else class="mat-drawer__muted">只读</span>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-spin>
-
-    <!-- ── 新增 / 编辑 ── -->
-    <a-modal v-model:visible="formVisible" :title="formTitle" :width="680" :mask-closable="false"
-      :ok-loading="saving" @ok="save" @cancel="closeForm">
-      <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="materialCode" label="材料类型">
-              <!--
-                编辑时锁死材料码：它是 `collect_file` 的关联键（两者之间没有外键）。
-                改了码，学生已上传的文件就成了孤儿 —— 静默丢材料，且极难发现。
-              -->
-              <a-select v-model="form.materialCode" placeholder="选择材料类型"
-                :disabled="isEdit" @change="onCodeChange">
-                <a-option v-for="k in catalog.codes" :key="k.code" :value="k.code">
-                  {{ k.name }}
-                </a-option>
-              </a-select>
-              <template v-if="isEdit" #extra>
-                <span class="mat-form__hint">材料码不可修改，它是已上传文件的关联键</span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="materialName" label="材料名称">
-              <a-input v-model="form.materialName" placeholder="如 身份证" :max-length="64" allow-clear />
-              <template #extra>
-                <span class="mat-form__hint">学生端与导出文件名都用它，要写规范名</span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item field="aliases" label="别名（俗称）">
-              <a-input-tag v-model="form.aliases" placeholder="输入后回车，如：身份证正面、身份证人像面"
-                :max-tag-count="6" allow-clear />
-              <template #extra>
-                <span class="mat-form__hint">
-                  用于从历史文件名里认出这是哪一项材料 —— 别名不全，该认出来的就认不出来
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="8">
-            <a-form-item field="required" label="是否必传">
-              <a-switch v-model="form.required" :checked-value="true" :unchecked-value="false" />
-              <template #extra>
-                <span class="mat-form__hint">一项都不必传时任务发布不了</span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="16">
-            <a-form-item field="visibleWhenIndex" label="适用对象">
-              <a-select v-model="form.visibleWhenIndex" placeholder="所有学生都要">
-                <a-option v-for="(o, i) in visibleWhenOptions" :key="i" :value="i">
-                  {{ o.label }}
-                </a-option>
-              </a-select>
-              <template #extra>
-                <span class="mat-form__hint">{{ currentWhenHint }}</span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item field="fileTypes" label="允许的格式">
-              <a-select v-model="form.fileTypes" multiple placeholder="选择允许上传的文件格式">
-                <a-option v-for="t in catalog.fileTypes" :key="t" :value="t">.{{ t }}</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="8">
-            <a-form-item field="maxSizeKb" label="体积上限（KB）">
-              <a-input-number v-model="form.maxSizeKb" :min="maxSizeMin" :max="maxSizeMax"
-                :step="128" class="mat-form__num" />
-              <template #extra>
-                <span class="mat-form__hint">{{ maxSizeHint }}</span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item field="maxCount" label="最多可传份数">
-              <a-input-number v-model="form.maxCount" :min="1" :max="10" class="mat-form__num" />
-              <template #extra>
-                <span class="mat-form__hint">身份证正反面这类要传 2 份</span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item field="compressProfile" label="压缩档位">
-              <a-select v-model="form.compressProfile" placeholder="自动判定">
-                <a-option v-for="p in catalog.profiles" :key="p" :value="p">
-                  {{ profileName(p) }}
-                </a-option>
-              </a-select>
-              <template #extra>
-                <span class="mat-form__hint">档位决定分辨率与清晰度，一般不用改</span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item field="namePattern" label="命名模板（留空则继承任务级）">
-              <a-input v-model="form.namePattern" :max-length="256" allow-clear
-                :placeholder="DEFAULT_NAMING_TEMPLATE" />
-              <template #extra>
-                <span class="mat-form__hint">
-                  留空即用任务的 <code>{{ DEFAULT_NAMING_TEMPLATE }}</code>。
-                  单材料项要特殊命名时才填（如身份证正反面要区分）
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item field="tipText" label="来源引导语">
-              <a-textarea v-model="form.tipText" :max-length="512" :auto-size="{ minRows: 2, maxRows: 4 }"
-                show-word-limit placeholder="显示在学生端这一项下面，如：拍身份证人像面，四角要拍全" />
-              <template #extra>
-                <span class="mat-form__hint">
-                  写得越具体，学生传错的比例越低 —— 这句话省下的是班主任逐人纠错的时间
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="12">
-            <a-form-item field="ocrType" label="自动识别">
-              <a-select v-model="form.ocrType" placeholder="不做识别" allow-clear>
-                <a-option v-for="t in catalog.ocrTypes" :key="t" :value="t">
-                  {{ OCR_TYPE_NAMES[t] ?? t }}
-                </a-option>
-              </a-select>
-              <template #extra>
-                <span class="mat-form__hint">识别结果只用于提示，不会自动改动材料归属</span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="sortNo" label="排序号">
-              <a-input-number v-model="form.sortNo" :min="0" class="mat-form__num" />
-              <template #extra>
-                <span class="mat-form__hint">越小越靠前（学生端按这个顺序列材料）</span>
-              </template>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-modal>
-  </a-drawer>
-</template>
-
 <script setup lang="ts">
-import type { FieldRule, FormInstance } from '@arco-design/web-vue'
-import type { MaterialCatalog, MaterialDefSaveReq, MaterialDefVO } from '@/apis/xt/material'
-import { Message } from '@arco-design/web-vue'
-import { IconPlus, IconRefresh } from '@arco-design/web-vue/es/icon'
-import * as matApi from '@/apis/xt/material'
-import { DEFAULT_NAMING_TEMPLATE } from '@/apis/xt/task'
-
 /**
  * 任务「收集材料」配置抽屉（《03-接口设计》§7.10）。
  *
@@ -314,15 +23,50 @@ import { DEFAULT_NAMING_TEMPLATE } from '@/apis/xt/task'
  * 3. **收集中改动要显式警告**。服务端允许改（业务确实需要），
  *    但学生会立刻看到新要求，已传的材料可能因此出现新的问题项。
  *
- * 4. **编辑时锁死材料码**。它是 `collect_file` 的关联键，
- *    改了码已上传的文件就成了孤儿 —— 静默丢材料。
+ * 4. **编辑时锁死材料码**。它是 `collect_file` 的关联键（两者之间没有外键），
+ *    改了码学生已上传的文件就成了孤儿 —— 静默丢材料，且极难发现。
+ *
+ * ⚠️ 单元格样式走内联：渲染函数创建的元素拿不到本组件的 scoped 属性。
  */
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
+import type { MaterialCatalog, MaterialDefSaveReq, MaterialDefVO } from '@/apis/xt/material'
+import {
+  NAlert,
+  NButton,
+  NDataTable,
+  NDrawer,
+  NDrawerContent,
+  NDropdown,
+  NDynamicTags,
+  NEmpty,
+  NForm,
+  NFormItemGi,
+  NGrid,
+  NInput,
+  NInputNumber,
+  NModal,
+  NPopconfirm,
+  NSelect,
+  NSpace,
+  NSpin,
+  NSwitch,
+  NTag,
+  NTooltip,
+  useMessage
+} from 'naive-ui'
+import { computed, h, reactive, ref, useTemplateRef } from 'vue'
+import * as matApi from '@/apis/xt/material'
+import { DEFAULT_NAMING_TEMPLATE } from '@/apis/xt/task'
+import AppIcon from '@/icons/AppIcon.vue'
+
 defineOptions({ name: 'TaskMaterialDrawer' })
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
+const message = useMessage()
+
 const visible = ref(false)
 const loading = ref(false)
 const saving = ref(false)
@@ -355,12 +99,17 @@ const maxSizeHint = computed(() => `可配范围 ${maxSizeMin.value}~${maxSizeMa
 const visibleWhenIndex = matApi.visibleWhenIndex
 const OCR_TYPE_NAMES = matApi.OCR_TYPE_NAMES
 
+// 渲染函数里的样式常量（scoped 样式对这些元素不生效）
+const S_NAME = 'display: flex; align-items: center; gap: 6px'
+const S_MUTED = 'color: #8a8a8a'
+const S_REQ = 'font-size: 12px; line-height: 1.6'
+
 // ── 表单 ──────────────────────────────────────────
 
 const formVisible = ref(false)
 const isEdit = ref(false)
 const editingId = ref<number | null>(null)
-const formRef = useTemplateRef<FormInstance>('formRef')
+const formRef = useTemplateRef<FormInst>('formRef')
 
 const emptyForm = () => ({
   materialCode: '',
@@ -380,18 +129,22 @@ const emptyForm = () => ({
 
 const form = reactive(emptyForm())
 
-const rules: Record<string, FieldRule[]> = {
-  materialCode: [{ required: true, message: '请选择材料类型' }],
-  materialName: [{ required: true, message: '请填写材料名称' }],
-  fileTypes: [{ required: true, type: 'array', minLength: 1, message: '至少选一种允许的格式' }],
-  maxSizeKb: [{ required: true, message: '请填写体积上限' }],
-  maxCount: [{ required: true, message: '请填写最多可传份数' }]
+const rules: FormRules = {
+  materialCode: { required: true, message: '请选择材料类型', trigger: ['change'] },
+  materialName: { required: true, message: '请填写材料名称', trigger: ['input', 'blur'] },
+  fileTypes: {
+    type: 'array',
+    required: true,
+    min: 1,
+    message: '至少选一种允许的格式',
+    trigger: ['change']
+  },
+  maxSizeKb: { required: true, message: '请填写体积上限', trigger: ['change'] },
+  maxCount: { required: true, message: '请填写最多可传份数', trigger: ['change'] }
 }
 
 const formTitle = computed(() => (isEdit.value ? '编辑材料要求' : '新增材料要求'))
-const currentWhenHint = computed(
-  () => visibleWhenOptions[form.visibleWhenIndex]?.hint ?? ''
-)
+const currentWhenHint = computed(() => visibleWhenOptions[form.visibleWhenIndex]?.hint ?? '')
 
 function profileName(p: string) {
   return matApi.PROFILE_NAMES[p] ?? p
@@ -405,6 +158,99 @@ function profileShort(p: string) {
   return p
 }
 
+const codeOptions = computed(() => catalog.value.codes.map((k) => ({ label: k.name, value: k.code })))
+const profileOptions = computed(() => catalog.value.profiles.map((p) => ({ label: profileName(p), value: p })))
+const fileTypeOptions = computed(() => catalog.value.fileTypes.map((t) => ({ label: `.${t}`, value: t })))
+const ocrTypeOptions = computed(
+  () => catalog.value.ocrTypes.map((t) => ({ label: OCR_TYPE_NAMES[t] ?? t, value: t }))
+)
+const whenOptions = computed(
+  () => visibleWhenOptions.map((o, i) => ({ label: o.label, value: i }))
+)
+
+// ── 表格列 ────────────────────────────────────────
+
+const columns = computed<DataTableColumns<MaterialDefVO>>(() => [
+  {
+    title: '材料',
+    key: 'materialName',
+    width: 200,
+    render: (row) => h('div', [
+      h('div', { style: S_NAME }, [
+        row.materialName,
+        h(NTag, {
+          size: 'small',
+          bordered: false,
+          type: row.required ? 'error' : 'default'
+        }, { default: () => (row.required ? '必传' : '选传') })
+      ]),
+      h('div', { style: S_MUTED }, row.materialCode)
+    ])
+  },
+  {
+    title: '适用对象',
+    key: 'visibleWhen',
+    width: 120,
+    render: (row) => {
+      if (!row.visibleWhen) {
+        return h('span', { style: S_MUTED }, '所有学生')
+      }
+      const idx = visibleWhenIndex(row.visibleWhen)
+      if (idx === 1) {
+        return h(NTag, { size: 'small', bordered: false, type: 'info' }, { default: () => '仅在校生' })
+      }
+      if (idx === 2) {
+        return h(NTag, { size: 'small', bordered: false, type: 'warning' }, { default: () => '仅非在校生' })
+      }
+      return h(NTooltip, { trigger: 'hover' }, {
+        trigger: () => h(NTag, { size: 'small', bordered: false }, { default: () => '自定义条件' }),
+        default: () => '这是通过接口直接配置的规则，界面上暂不支持编辑'
+      })
+    }
+  },
+  {
+    title: '要求',
+    key: 'maxSizeKb',
+    width: 200,
+    render: (row) => h('div', [
+      h('div', { style: S_REQ }, `${(row.fileTypes || []).join('/')} · ≤${row.maxSizeKb}KB`),
+      h('div', { style: `${S_REQ} ${S_MUTED}` }, `${row.maxCount > 1 ? `最多 ${row.maxCount} 份` : '1 份'} · ${profileShort(row.compressProfile)}`)
+    ])
+  },
+  {
+    title: '学生端提示语',
+    key: 'tipText',
+    ellipsis: { tooltip: true },
+    render: (row) => (row.tipText ? row.tipText : h('span', { style: S_MUTED }, '未设置'))
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 120,
+    align: 'center',
+    render: (row) => {
+      if (readonly.value) {
+        return h('span', { style: S_MUTED }, '只读')
+      }
+      return h('div', { style: 'display: flex; gap: 8px; justify-content: center' }, [
+        h(NButton, { text: true, size: 'small', onClick: () => onEdit(row) }, { default: () => '编辑' }),
+        // 已有文件时删不掉（服务端 40027）。这里不预先禁用，而是让服务端说清原因 ——
+        // 因为"为什么删不掉"的答案（有人已经传了）比一个灰掉的按钮有用得多
+        h(NPopconfirm, {
+          onPositiveClick: () => onDelete(row)
+        }, {
+          trigger: () => h(NButton, { text: true, size: 'small', type: 'error' }, { default: () => '删除' }),
+          default: () => '删除后学生端不再要求这一项。确认删除？'
+        })
+      ])
+    }
+  }
+])
+
+const templateOptions = computed(
+  () => templates.value.map((t) => ({ key: t.templateCode, label: t.label }))
+)
+
 // ── 打开 / 加载 ───────────────────────────────────
 
 async function open(task: { id: number, taskName: string, status: number }) {
@@ -414,9 +260,9 @@ async function open(task: { id: number, taskName: string, status: number }) {
   taskStatus.value = task.status
   if (!catalog.value.codes.length) {
     // 目录是静态清单，拉一次就够 —— 不要每次开抽屉都拉
-    const r = await matApi.getMaterialCatalog()
-    if (r.data) {
-      catalog.value = r.data
+    const c = await matApi.getMaterialCatalog()
+    if (c) {
+      catalog.value = c
     }
   }
   await load()
@@ -428,8 +274,8 @@ async function load() {
   }
   loading.value = true
   try {
-    const r = await matApi.getMaterialList(taskId.value)
-    rows.value = (r.data ?? []).slice().sort((a, b) => (a.sortNo ?? 0) - (b.sortNo ?? 0))
+    const list = await matApi.getMaterialList(taskId.value)
+    rows.value = (list ?? []).slice().sort((a, b) => (a.sortNo ?? 0) - (b.sortNo ?? 0))
   } finally {
     loading.value = false
   }
@@ -439,6 +285,19 @@ function close() {
   closeForm()
 }
 
+/**
+ * 关闭抽屉时把内层弹窗一起收掉。
+ *
+ * ⚠️ Naive 的抽屉默认**不销毁内容**：抽屉关掉而"新增材料"的弹窗还开着，
+ * 它会被 teleport 到 body 上继续挂在屏幕中间。
+ */
+function onShowChange(v: boolean) {
+  visible.value = v
+  if (!v) {
+    close()
+  }
+}
+
 // ── 新增 / 编辑 ───────────────────────────────────
 
 function onAdd() {
@@ -477,7 +336,7 @@ function onEdit(row: MaterialDefVO) {
  *
  * 只在"新增"时带出。编辑时改类型是不可能的（码被锁），所以不必考虑覆盖用户已填内容。
  */
-function onCodeChange(value: unknown) {
+function onCodeChange(value: string | null) {
   const code = String(value ?? '')
   const k = catalog.value.codes.find((c) => c.code === code)
   if (!k) {
@@ -494,15 +353,17 @@ function onCodeChange(value: unknown) {
 
 function closeForm() {
   formVisible.value = false
-  formRef.value?.resetFields()
+  formRef.value?.restoreValidation()
   Object.assign(form, emptyForm())
   isEdit.value = false
   editingId.value = null
 }
 
 async function save() {
-  const invalid = await formRef.value?.validate()
-  if (invalid) {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    // Naive 的 `validate()` 在不过时是 reject（不是返回 false）
     return
   }
   if (!taskId.value) {
@@ -527,10 +388,10 @@ async function save() {
   try {
     if (isEdit.value && editingId.value) {
       await matApi.updateMaterial(editingId.value, payload)
-      Message.success('已保存')
+      message.success('已保存')
     } else {
       await matApi.addMaterial(taskId.value, payload)
-      Message.success('已新增')
+      message.success('已新增')
     }
     closeForm()
     await load()
@@ -542,18 +403,17 @@ async function save() {
 
 // ── 模板 / 删除 ───────────────────────────────────
 
-async function onApplyTemplate(value: unknown) {
+async function onApplyTemplate(key: string) {
   if (!taskId.value) {
     return
   }
-  const tc = String(value ?? '')
-  const r = await matApi.applyMaterialTemplate(taskId.value, tc)
-  const n = r.data?.createdCount ?? 0
+  const r = await matApi.applyMaterialTemplate(taskId.value, key)
+  const n = r?.createdCount ?? 0
   if (n === 0) {
     // 幂等的结果要说清楚，否则管理员会以为点了没反应
-    Message.info('这个模板里的材料都已经有了，没有新增')
+    message.info('这个模板里的材料都已经有了，没有新增')
   } else {
-    Message.success(`已添加 ${n} 项材料要求`)
+    message.success(`已添加 ${n} 项材料要求`)
   }
   await load()
   emit('save-success')
@@ -561,7 +421,7 @@ async function onApplyTemplate(value: unknown) {
 
 async function onDelete(row: MaterialDefVO) {
   await matApi.deleteMaterial(row.id)
-  Message.success('已删除')
+  message.success('已删除')
   await load()
   emit('save-success')
 }
@@ -569,21 +429,277 @@ async function onDelete(row: MaterialDefVO) {
 defineExpose({ open })
 </script>
 
+<template>
+  <NDrawer
+    :show="visible"
+    :width="980"
+    :mask-closable="false"
+    placement="right"
+    @update:show="onShowChange"
+  >
+    <NDrawerContent :native-scrollbar="false" closable>
+      <template #header>
+        <span>配置收集材料</span>
+        <span class="mat-drawer__task">{{ taskName }}</span>
+      </template>
+
+      <!--
+        已截止 / 已归档时只读。服务端的可编辑状态是 {草稿,收集中,已暂停}，
+        这里与服务端同口径 —— 界面上让按钮点不动，比点完被拒好。
+      -->
+      <NAlert v-if="readonly" type="default" :show-icon="false" :bordered="false" class="mat-drawer__alert">
+        任务已{{ readonlyReason }}，材料要求不可再修改，只能查看。
+      </NAlert>
+
+      <!--
+        收集中改材料要明确警告。学生可能已经在传了 —— 他现在看到的要求与十分钟后的
+        可能不一样，而这会让已传的文件与材料定义对不上（比如把必传改成选传、
+        或把体积上限调小，学生手里那份就已经超了）。服务端允许改（业务确实需要），
+        但界面必须把后果说出来。
+      -->
+      <NAlert v-else-if="collecting" type="warning" :show-icon="false" class="mat-drawer__alert">
+        任务正在收集中，<strong>改动立刻生效</strong>：学生刷新页面就会看到新的要求。
+        调小体积上限或改成必传，会让已经传过材料的学生出现新的问题项。
+      </NAlert>
+
+      <NSpace class="mat-drawer__tool" :size="8" align="center">
+        <NDropdown
+          v-if="!readonly"
+          trigger="click"
+          :options="templateOptions"
+          @select="onApplyTemplate"
+        >
+          <NButton type="primary">
+            <template #icon>
+              <AppIcon name="plus" :size="15" />
+            </template>
+            按模板初始化
+          </NButton>
+        </NDropdown>
+        <NButton v-if="!readonly" @click="onAdd">
+          <template #icon>
+            <AppIcon name="plus" :size="15" />
+          </template>
+          新增材料
+        </NButton>
+        <NButton @click="load">
+          <template #icon>
+            <AppIcon name="refresh" :size="15" />
+          </template>
+          刷新
+        </NButton>
+        <!--
+          模板是幂等的（已存在的材料码会跳过），所以先说清楚"会跳过已存在的"，
+          否则管理员点两次会以为第一次没生效。
+        -->
+        <span class="mat-drawer__hint">按模板初始化是幂等的，已有的材料不会重复添加</span>
+      </NSpace>
+
+      <NSpin :show="loading">
+        <NEmpty v-if="!rows.length" description="还没有材料要求，请先「按模板初始化」或「新增材料」">
+          <div class="mat-drawer__empty-hint">
+            必传材料一项都没有时，任务<strong>发布不了</strong>（服务端会返回 40018）。
+          </div>
+        </NEmpty>
+
+        <NDataTable
+          v-else
+          :columns="columns"
+          :data="rows"
+          :pagination="false"
+          :bordered="false"
+          size="small"
+        />
+      </NSpin>
+
+      <!-- ── 新增 / 编辑 ── -->
+      <NModal
+        v-model:show="formVisible"
+        preset="card"
+        :title="formTitle"
+        :style="{ width: '680px' }"
+        :mask-closable="false"
+      >
+        <NForm ref="formRef" :model="form" :rules="rules" label-placement="top">
+          <NGrid :cols="24" :x-gap="16">
+            <NFormItemGi :span="12" label="材料类型" path="materialCode">
+              <!--
+                编辑时锁死材料码：它是 `collect_file` 的关联键（两者之间没有外键）。
+                改了码，学生已上传的文件就成了孤儿 —— 静默丢材料，且极难发现。
+              -->
+              <NSelect
+                v-model:value="form.materialCode"
+                placeholder="选择材料类型"
+                :options="codeOptions"
+                :disabled="isEdit"
+                @update:value="onCodeChange"
+              />
+              <template v-if="isEdit" #feedback>
+                <span class="mat-form__hint">材料码不可修改，它是已上传文件的关联键</span>
+              </template>
+            </NFormItemGi>
+            <NFormItemGi :span="12" label="材料名称" path="materialName">
+              <NInput v-model:value="form.materialName" placeholder="如 身份证" :maxlength="64" clearable />
+              <template #feedback>
+                <span class="mat-form__hint">学生端与导出文件名都用它，要写规范名</span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="24" label="别名（俗称）" path="aliases">
+              <NDynamicTags v-model:value="form.aliases" :max="6" />
+              <template #feedback>
+                <span class="mat-form__hint">
+                  输入后回车，如：身份证正面、身份证人像面。
+                  用于从历史文件名里认出这是哪一项材料 —— 别名不全，该认出来的就认不出来
+                </span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="8" label="是否必传" path="required">
+              <NSwitch v-model:value="form.required" />
+              <template #feedback>
+                <span class="mat-form__hint">一项都不必传时任务发布不了</span>
+              </template>
+            </NFormItemGi>
+            <NFormItemGi :span="16" label="适用对象" path="visibleWhenIndex">
+              <NSelect v-model:value="form.visibleWhenIndex" :options="whenOptions" />
+              <template #feedback>
+                <span class="mat-form__hint">{{ currentWhenHint }}</span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="24" label="允许的格式" path="fileTypes">
+              <NSelect
+                v-model:value="form.fileTypes"
+                multiple
+                placeholder="选择允许上传的文件格式"
+                :options="fileTypeOptions"
+              />
+            </NFormItemGi>
+
+            <NFormItemGi :span="8" label="体积上限（KB）" path="maxSizeKb">
+              <NInputNumber
+                v-model:value="form.maxSizeKb"
+                :min="maxSizeMin"
+                :max="maxSizeMax"
+                :step="128"
+                class="mat-form__num"
+              />
+              <template #feedback>
+                <span class="mat-form__hint">{{ maxSizeHint }}</span>
+              </template>
+            </NFormItemGi>
+            <NFormItemGi :span="8" label="最多可传份数" path="maxCount">
+              <NInputNumber v-model:value="form.maxCount" :min="1" :max="10" class="mat-form__num" />
+              <template #feedback>
+                <span class="mat-form__hint">身份证正反面这类要传 2 份</span>
+              </template>
+            </NFormItemGi>
+            <NFormItemGi :span="8" label="压缩档位" path="compressProfile">
+              <NSelect v-model:value="form.compressProfile" :options="profileOptions" />
+              <template #feedback>
+                <span class="mat-form__hint">档位决定分辨率与清晰度，一般不用改</span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="24" label="命名模板（留空则继承任务级）" path="namePattern">
+              <NInput
+                v-model:value="form.namePattern"
+                :maxlength="256"
+                clearable
+                :placeholder="DEFAULT_NAMING_TEMPLATE"
+              />
+              <template #feedback>
+                <span class="mat-form__hint">
+                  留空即用任务的 <code>{{ DEFAULT_NAMING_TEMPLATE }}</code>。
+                  单材料项要特殊命名时才填（如身份证正反面要区分）
+                </span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="24" label="来源引导语" path="tipText">
+              <NInput
+                v-model:value="form.tipText"
+                type="textarea"
+                :maxlength="512"
+                :autosize="{ minRows: 2, maxRows: 4 }"
+                show-count
+                placeholder="显示在学生端这一项下面，如：拍身份证人像面，四角要拍全"
+              />
+              <template #feedback>
+                <span class="mat-form__hint">
+                  写得越具体，学生传错的比例越低 —— 这句话省下的是班主任逐人纠错的时间
+                </span>
+              </template>
+            </NFormItemGi>
+
+            <NFormItemGi :span="12" label="自动识别" path="ocrType">
+              <NSelect v-model:value="form.ocrType" clearable placeholder="不做识别" :options="ocrTypeOptions" />
+              <template #feedback>
+                <span class="mat-form__hint">识别结果只用于提示，不会自动改动材料归属</span>
+              </template>
+            </NFormItemGi>
+            <NFormItemGi :span="12" label="排序号" path="sortNo">
+              <NInputNumber v-model:value="form.sortNo" :min="0" class="mat-form__num" />
+              <template #feedback>
+                <span class="mat-form__hint">越小越靠前（学生端按这个顺序列材料）</span>
+              </template>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+
+        <template #footer>
+          <NSpace justify="end" :size="8">
+            <NButton :disabled="saving" @click="closeForm">
+              取消
+            </NButton>
+            <NButton type="primary" :loading="saving" @click="save">
+              保存
+            </NButton>
+          </NSpace>
+        </template>
+      </NModal>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
 <style lang="scss" scoped>
 .mat-drawer {
-  &__task { margin-left: 12px; color: var(--color-text-3); font-weight: 400; }
-  &__alert { margin-bottom: 16px; }
-  &__tool { margin-bottom: 16px; }
-  &__hint { color: var(--color-text-3); font-size: 12px; }
-  &__empty-hint { margin-top: 8px; color: var(--color-text-3); font-size: 12px; }
-  &__name { display: flex; align-items: center; gap: 6px; }
-  &__code { color: var(--color-text-3); font-size: 12px; }
-  &__req { font-size: 12px; line-height: 1.6; }
-  &__muted { color: var(--color-text-3); }
+  &__task {
+    margin-left: 12px;
+    font-weight: 400;
+    color: #8a8a8a;
+  }
+
+  &__alert {
+    margin-bottom: 16px;
+    line-height: 1.8;
+  }
+
+  &__tool {
+    margin-bottom: 16px;
+  }
+
+  &__hint {
+    font-size: 12px;
+    color: #8a8a8a;
+  }
+
+  &__empty-hint {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #8a8a8a;
+  }
 }
 
 .mat-form {
-  &__hint { color: var(--color-text-3); font-size: 12px; }
-  &__num { width: 100%; }
+  &__hint {
+    font-size: 12px;
+    color: #8a8a8a;
+  }
+
+  &__num {
+    width: 100%;
+  }
 }
 </style>
diff --git a/frontend-pc/src/views/task/TaskOrgDrawer.vue b/frontend-pc/src/views/task/TaskOrgDrawer.vue
index a8ba97b..c71e7ad 100644
--- a/frontend-pc/src/views/task/TaskOrgDrawer.vue
+++ b/frontend-pc/src/views/task/TaskOrgDrawer.vue
@@ -1,118 +1,64 @@
-<template>
-  <a-drawer v-model:visible="visible" :width="820" :mask-closable="false" unmount-on-close
-    :ok-loading="saving" ok-text="保存" @ok="save" @cancel="close">
-    <template #title>
-      <span>配置覆盖班级</span>
-      <span class="org-drawer__task">{{ taskName }}</span>
-    </template>
-
-    <a-alert v-if="readonly" type="normal" :show-icon="false" class="org-drawer__readonly">
-      任务已{{ readonlyReason }}，覆盖范围不可再修改，只能查看。
-    </a-alert>
-
-    <a-spin :loading="loading" class="org-drawer__body">
-      <div class="org-drawer__panes">
-        <!-- 左：组织树 -->
-        <div class="org-drawer__tree">
-          <div class="org-drawer__pane-title">
-            选择班级
-            <!-- 只让班级可勾选：把「学校」或「专业部」当成一个班会选错范围，
-                 而且错误很隐蔽 —— 界面上只多一行，实际却把整校学生算进了应填范围 -->
-            <span class="org-drawer__pane-hint">只能勾选到班级一层</span>
-          </div>
-          <a-spin :loading="treeLoading" class="org-drawer__tree-spin">
-            <a-tree v-if="treeData.length" v-model:checked-keys="checkedKeys" :data="treeData"
-              :field-names="treeFieldNames" checkable check-strictly :default-expand-all="true"
-              :disabled="readonly" />
-            <a-empty v-else description="还没有班级，请先在「组织架构」里建班级" />
-          </a-spin>
-        </div>
-
-        <!-- 右：已选班级 -->
-        <div class="org-drawer__list">
-          <div class="org-drawer__pane-title">
-            已选 <strong>{{ rows.length }}</strong> 个班
-            <span class="org-drawer__pane-hint">主班主任留空 = 由该班负责人初审</span>
-          </div>
-
-          <a-empty v-if="!rows.length" description="左侧勾选本次收集涉及的班级" />
-
-          <div v-for="row in rows" :key="row.orgId" class="org-drawer__row">
-            <div class="org-drawer__row-head">
-              <span class="org-drawer__org">{{ orgName(row.orgId) }}</span>
-              <a-link v-if="!readonly" status="danger" @click="removeRow(row)">移除</a-link>
-            </div>
-
-            <a-row :gutter="12">
-              <a-col :span="11">
-                <div class="org-drawer__label">主班主任（初审人）</div>
-                <a-select v-model="row.headUserId" placeholder="留空 = 取班级负责人" allow-clear
-                  :options="teacherOptions" :disabled="readonly" size="small" />
-                <div v-if="!row.headUserId" class="org-drawer__fallback">
-                  {{ leaderHint(row.orgId) }}
-                </div>
-              </a-col>
-              <a-col :span="8">
-                <div class="org-drawer__label">应填人数</div>
-                <a-input-number v-model="row.expectedCount" placeholder="未设置" :min="0"
-                  :disabled="readonly" size="small" class="org-drawer__num" />
-                <div class="org-drawer__fallback">留空表示不比对，填了才与名册比</div>
-              </a-col>
-              <a-col :span="5">
-                <div class="org-drawer__label">副班主任</div>
-                <a-select v-model="row.deputyUserIds" multiple placeholder="无" allow-clear
-                  :options="deputyOptionsOf(row)" :disabled="readonly" size="small" />
-              </a-col>
-            </a-row>
-          </div>
-        </div>
-      </div>
-    </a-spin>
-  </a-drawer>
-</template>
-
 <script setup lang="ts">
-import type { TreeFieldNames, TreeNodeData } from '@arco-design/web-vue'
-import type { OrgTreeVO } from '@/apis/xt/org'
-import type { TaskOrgItem } from '@/apis/xt/task'
-import { Message } from '@arco-design/web-vue'
-import * as orgApi from '@/apis/xt/org'
-import * as taskApi from '@/apis/xt/task'
-
 /**
- * 任务「覆盖班级与班主任」配置抽屉（《03-接口设计》§7.6）。
+ * 任务「覆盖班级与初审人」配置抽屉（《03-接口设计》§7.6）。
  *
  * 三处刻意的设计：
  *
- * 1. **主班主任留空 ≠ 没配**。留空表示"取该班负责人"，所以留空时下面会显示出
- *    负责人是谁。不这么做，管理员会以为漏配了，然后在几百个班上机械地点几百次 ——
- *    而它们本来就等于班级负责人。这是本产品"少让人做无意义操作"的一个具体体现。
+ * 1. **初审人留空 ≠ 没配**。留空表示"取该班负责人"（服务端回退到 `sys_org.leader_user_id`），
+ *    所以留空时下面会显示出负责人是谁。不这么做，管理员会以为漏配了，
+ *    然后在几百个班上机械地点几百次 —— 而它们本来就等于班级负责人。
+ *    这是本产品"少让人做无意义操作"的一个具体体现。
  *
  * 2. **只让班级可勾选**。把「学校」或「专业部」当成一个班会选错范围，而且错误很隐蔽：
- *    界面上只多一行，实际却把整校学生算进了应填范围。服务端也会拒，但让它在界面上
- *    就点不动，比事后报错好。
+ *    界面上只多一行，实际却把整校学生算进了应填范围。服务端也会拒，
+ *    但让它在界面上就点不动，比事后报错好。
  *
  * 3. **应填人数留空 = 未设置，不是 0**。0 是"预期 0 人"，是个有意义的业务值；
  *    拿 0 兼职表示"没填"会让每个没填的班都触发"应填 0 人、实际 31 人"的假告警，
  *    告警变噪音后就没人看了，真正对不上的那次反而被漏掉。
+ *
+ * ⚠️ 2026-10 需求收敛：**副班主任角色已删除**（后端 `TaskOrgSaveReq` 里也没有这个字段了），
+ *    所以这里只有"初审人"一列。多留一个选了不生效的下拉，比没有它更糟。
  */
+import type { TreeOption } from 'naive-ui'
+import type { OrgTreeVO } from '@/apis/xt/org'
+import type { TaskOrgItem, TaskVO } from '@/apis/xt/task'
+import {
+  NAlert,
+  NButton,
+  NDrawer,
+  NDrawerContent,
+  NEmpty,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTree,
+  useMessage
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import * as orgApi from '@/apis/xt/org'
+import * as taskApi from '@/apis/xt/task'
+
 defineOptions({ name: 'TaskOrgDrawer' })
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
+const message = useMessage()
+
 const visible = ref(false)
 const loading = ref(false)
-const treeLoading = ref(false)
 const saving = ref(false)
 const taskId = ref<number | null>(null)
 const taskName = ref('')
 const readonly = ref(false)
 const readonlyReason = ref('')
 
-const treeData = ref<TreeNodeData[]>([])
-const checkedKeys = ref<number[]>([])
+const treeData = ref<TreeOption[]>([])
+/** Naive 的勾选键是 `(string | number)[]`，所以这里不能窄化成 number[] */
+const checkedKeys = ref<Array<string | number>>([])
 const teacherOptions = ref<Array<{ id: number, label: string }>>([])
 
 /** 班级 id → 组织节点，用于取名与取"该班负责人" */
@@ -120,41 +66,31 @@ const orgIndex = ref<Map<number, OrgTreeVO>>(new Map())
 
 interface Row {
   orgId: number
-  /**
-   * 主班主任。
-   *
-   * ⚠️ 用 `undefined` 而不是 `null` 表示"未指定"：Arco 的 `a-select` 的 v-model
-   * 只接受 `string | number | (string|number)[] | undefined`，
-   * 绑 `number | null` 会报 TS2322。提交时再转回 `null`（接口约定的"清空"值）。
-   */
-  headUserId: number | undefined
-  deputyUserIds: number[]
-  /** undefined = 未设置（提交时不传/传 null），不要用 0 代替 —— 0 是"预期 0 人" */
-  expectedCount: number | undefined
+  /** null = 未指定，界面上显示占位符；提交时原样传 null（接口约定的"清空"值） */
+  headUserId: number | null
+  /** null = 未设置（提交时不传/传 null），**不要用 0 代替** —— 0 是"预期 0 人" */
+  expectedCount: number | null
 }
 
 const rows = ref<Row[]>([])
 
-const treeFieldNames: TreeFieldNames = {
-  key: 'key',
-  title: 'title',
-  children: 'children',
-  disableCheckbox: 'disableCheckbox'
-}
+const teacherSelectOptions = computed(
+  () => teacherOptions.value.map((t) => ({ label: t.label, value: t.id }))
+)
 
 function flatten(nodes: OrgTreeVO[], into: Map<number, OrgTreeVO>) {
-  for (const n of nodes || []) {
+  for (const n of nodes ?? []) {
     into.set(n.id, n)
     flatten(n.children ?? [], into)
   }
 }
 
-function toTreeData(nodes: OrgTreeVO[]): TreeNodeData[] {
+function toTreeData(nodes: OrgTreeVO[]): TreeOption[] {
   return (nodes ?? []).map((n) => ({
     key: n.id,
-    title: n.orgName,
-    // 只有班级可以勾选
-    disableCheckbox: n.orgType !== 3,
+    label: n.orgName,
+    // 只有班级可以勾选；只读时整棵树都点不动
+    checkboxDisabled: readonly.value || n.orgType !== 3,
     children: toTreeData(n.children ?? [])
   }))
 }
@@ -166,35 +102,32 @@ function orgName(orgId: number) {
 /** 留空时告诉用户"将由谁审"，而不是留一句让人怀疑的空白 */
 function leaderHint(orgId: number) {
   const org = orgIndex.value.get(orgId)
-  return org?.leaderName ? `将由班级负责人 ${org.leaderName} 初审` : '该班未设负责人，建议指定初审人'
-}
-
-/** 副班主任选项里排除掉本行已选为主班主任的人（同一人不能既主又副，服务端会拒） */
-function deputyOptionsOf(row: Row) {
-  return teacherOptions.value.filter((o) => o.id !== row.headUserId)
+  return org?.leaderName
+    ? `将由班级负责人 ${org.leaderName} 初审`
+    : '该班未设负责人，建议指定初审人'
 }
 
 /** 勾选变化 → 行列表变化。rows 是唯一事实来源，勾选框只是它的一个视图 */
 watch(checkedKeys, (keys) => {
-  const set = new Set(keys as number[])
+  const set = new Set(keys.map((k) => Number(k)))
   rows.value = rows.value.filter((r) => set.has(r.orgId))
   for (const id of set) {
     if (!rows.value.some((r) => r.orgId === id)) {
-      rows.value.push({ orgId: id, headUserId: undefined, deputyUserIds: [], expectedCount: undefined })
+      rows.value.push({ orgId: id, headUserId: null, expectedCount: null })
     }
   }
 })
 
 function removeRow(row: Row) {
   rows.value = rows.value.filter((r) => r.orgId !== row.orgId)
-  checkedKeys.value = checkedKeys.value.filter((k) => k !== row.orgId)
+  checkedKeys.value = checkedKeys.value.filter((k) => Number(k) !== row.orgId)
 }
 
-async function open(task: { id: number, taskName: string, status: number }) {
+async function open(task: TaskVO) {
   taskId.value = task.id
   taskName.value = task.taskName
   // 与后端 EDITABLE_TASK_STATUS 一致：草稿/收集中/已暂停可改，已截止/已归档只读
-  const reason = { 2: '截止', 3: '归档' }[task.status] ?? ''
+  const reason = ({ 2: '截止', 3: '归档' } as Record<number, string>)[task.status] ?? ''
   readonly.value = !!reason
   readonlyReason.value = reason
   visible.value = true
@@ -202,37 +135,36 @@ async function open(task: { id: number, taskName: string, status: number }) {
   checkedKeys.value = []
 
   loading.value = true
-  treeLoading.value = true
   try {
-    const [treeRes, orgRes] = await Promise.all([
+    const [tree, orgs] = await Promise.all([
       orgApi.getOrgTree(),
       taskApi.getTaskOrgs(task.id)
     ])
-    const tree = treeRes.data ?? []
-    treeData.value = toTreeData(tree)
+    const nodes = tree ?? []
     const index = new Map<number, OrgTreeVO>()
-    flatten(tree, index)
+    flatten(nodes, index)
     orgIndex.value = index
+    treeData.value = toTreeData(nodes)
 
-    for (const o of orgRes.data ?? []) {
+    for (const o of orgs ?? []) {
       rows.value.push({
+        // 后端回 null 表示"未指定"；界面上显示占位符、提交时再回 null
         orgId: o.orgId,
-        // 后端回 null 表示"未指定"；界面上用 undefined 让它显示占位符
-        headUserId: o.headUserId ?? undefined,
-        deputyUserIds: o.deputyUserIds ?? [],
-        expectedCount: o.expectedCount ?? undefined
+        headUserId: o.headUserId ?? null,
+        expectedCount: o.expectedCount ?? null
       })
     }
     checkedKeys.value = rows.value.map((r) => r.orgId)
   } finally {
     loading.value = false
-    treeLoading.value = false
   }
 
-  // 班主任选项不影响主流程，单独加载，失败也不该让抽屉打不开
-  taskApi.getTeacherOptions()
-    .then((opts) => { teacherOptions.value = opts })
-    .catch(() => { teacherOptions.value = [] })
+  // 初审人选项不影响主流程，单独加载，失败也不该让抽屉打不开
+  try {
+    teacherOptions.value = await taskApi.getTeacherOptions()
+  } catch {
+    teacherOptions.value = []
+  }
 }
 
 function close() {
@@ -240,19 +172,20 @@ function close() {
 }
 
 async function save() {
-  if (!taskId.value) return
+  if (!taskId.value) {
+    return
+  }
   const orgs: TaskOrgItem[] = rows.value.map((r) => ({
     orgId: r.orgId,
-    headUserId: r.headUserId ?? null,
-    deputyUserIds: r.deputyUserIds ?? [],
+    headUserId: r.headUserId,
     // 未填就传 null（"未设置"），不要传 0
-    expectedCount: r.expectedCount ?? null
+    expectedCount: r.expectedCount
   }))
 
   saving.value = true
   try {
     await taskApi.saveTaskOrgs(taskId.value, orgs)
-    Message.success(orgs.length ? `已保存 ${orgs.length} 个班的覆盖范围` : '已清空覆盖范围')
+    message.success(orgs.length ? `已保存 ${orgs.length} 个班的覆盖范围` : '已清空覆盖范围')
     visible.value = false
     emit('save-success')
   } finally {
@@ -263,24 +196,126 @@ async function save() {
 defineExpose({ open })
 </script>
 
+<template>
+  <NDrawer v-model:show="visible" :width="820" :mask-closable="false" placement="right">
+    <NDrawerContent :native-scrollbar="false" closable>
+      <template #header>
+        <span>配置覆盖班级</span>
+        <span class="org-drawer__task">{{ taskName }}</span>
+      </template>
+
+      <NAlert v-if="readonly" type="default" :show-icon="false" :bordered="false" class="org-drawer__readonly">
+        任务已{{ readonlyReason }}，覆盖范围不可再修改，只能查看。
+      </NAlert>
+
+      <NSpin :show="loading">
+        <div class="org-drawer__panes">
+          <!-- 左：组织树 -->
+          <div class="org-drawer__tree">
+            <div class="org-drawer__pane-title">
+              <!--
+                ⚠️ 标题必须整个包在一个元素里：`.org-drawer__pane-title` 是
+                   `display:flex + justify-content:space-between`，
+                   而 flex 会把**裸文本节点各自变成一个 flex item** ——
+                   写「已选 <strong>1</strong> 个班」会变成三个 item 被摊到整行两端，
+                   看起来就是"已选    1    个班"这种散开的错乱排版。
+              -->
+              <span>选择班级</span>
+              <span class="org-drawer__pane-hint">只能勾选到班级一层</span>
+            </div>
+            <div class="org-drawer__tree-body">
+              <NTree
+                v-if="treeData.length"
+                v-model:checked-keys="checkedKeys"
+                :data="treeData"
+                checkable
+                :cascade="false"
+                :selectable="false"
+                :default-expand-all="true"
+                block-line
+              />
+              <NEmpty v-else description="还没有班级，请先在「组织架构」里建班级" />
+            </div>
+          </div>
+
+          <!-- 右：已选班级 -->
+          <div class="org-drawer__list">
+            <div class="org-drawer__pane-title">
+              <span>已选 <strong>{{ rows.length }}</strong> 个班</span>
+              <span class="org-drawer__pane-hint">初审人留空 = 由该班负责人初审</span>
+            </div>
+
+            <NEmpty v-if="!rows.length" description="左侧勾选本次收集涉及的班级" />
+
+            <div v-for="row in rows" :key="row.orgId" class="org-drawer__row">
+              <div class="org-drawer__row-head">
+                <span class="org-drawer__org">{{ orgName(row.orgId) }}</span>
+                <NButton v-if="!readonly" text size="tiny" type="error" @click="removeRow(row)">
+                  移除
+                </NButton>
+              </div>
+
+              <div class="org-drawer__fields">
+                <div class="org-drawer__field org-drawer__field--head">
+                  <div class="org-drawer__label">初审人（班主任）</div>
+                  <NSelect
+                    v-model:value="row.headUserId"
+                    size="small"
+                    clearable
+                    placeholder="留空 = 取班级负责人"
+                    :options="teacherSelectOptions"
+                    :disabled="readonly"
+                  />
+                  <div v-if="!row.headUserId" class="org-drawer__fallback">
+                    {{ leaderHint(row.orgId) }}
+                  </div>
+                </div>
+                <div class="org-drawer__field org-drawer__field--count">
+                  <div class="org-drawer__label">应填人数</div>
+                  <NInputNumber
+                    v-model:value="row.expectedCount"
+                    size="small"
+                    placeholder="未设置"
+                    :min="0"
+                    :disabled="readonly"
+                  />
+                  <div class="org-drawer__fallback">
+                    留空表示不比对，填了才与名册比
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </NSpin>
+
+      <template #footer>
+        <NSpace justify="end" :size="8">
+          <NButton :disabled="saving" @click="close">
+            取消
+          </NButton>
+          <NButton type="primary" :loading="saving" :disabled="readonly" @click="save">
+            保存
+          </NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
 <style lang="scss" scoped>
 .org-drawer {
   &__task {
     margin-left: 8px;
     font-size: 13px;
     font-weight: 400;
-    color: var(--color-text-3);
+    color: var(--xt-text-3);
   }
 
   &__readonly {
     margin-bottom: 12px;
   }
 
-  &__body {
-    display: block;
-    min-height: 420px;
-  }
-
   &__panes {
     display: flex;
     gap: 16px;
@@ -290,12 +325,11 @@ defineExpose({ open })
     flex: none;
     width: 250px;
     padding: 10px 12px;
-    border: 1px solid var(--color-border-2);
+    border: 1px solid var(--xt-card-border);
     border-radius: 4px;
   }
 
-  &__tree-spin {
-    display: block;
+  &__tree-body {
     max-height: 520px;
     overflow-y: auto;
   }
@@ -312,20 +346,22 @@ defineExpose({ open })
     margin-bottom: 10px;
     font-size: 13px;
     font-weight: 500;
-    color: var(--color-text-2);
+    color: var(--xt-text);
   }
 
   &__pane-hint {
     font-size: 11px;
     font-weight: 400;
-    color: var(--color-text-3);
+    color: var(--xt-text-3);
   }
 
   &__row {
     padding: 10px 12px;
     margin-bottom: 10px;
-    background: var(--color-fill-1);
-    border-radius: 4px;
+    /* 抽屉里的"卡片内小格子"：浅灰底 + 弱描边（见 styles/index.scss 的卡片式规矩） */
+    background: var(--xt-band-bg);
+    border: 1px solid var(--xt-card-border-weak);
+    border-radius: 8px;
   }
 
   &__row-head {
@@ -337,24 +373,37 @@ defineExpose({ open })
 
   &__org {
     font-weight: 500;
-    color: var(--color-text-1);
+    color: #1f2229;
+  }
+
+  &__fields {
+    display: flex;
+    gap: 12px;
+  }
+
+  &__field {
+    &--head {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &--count {
+      flex: none;
+      width: 160px;
+    }
   }
 
   &__label {
     margin-bottom: 4px;
     font-size: 12px;
-    color: var(--color-text-3);
+    color: var(--xt-text-3);
   }
 
   &__fallback {
     margin-top: 3px;
     font-size: 11px;
     line-height: 1.5;
-    color: var(--color-text-3);
-  }
-
-  &__num {
-    width: 100%;
+    color: var(--xt-text-3);
   }
 }
 </style>
diff --git a/frontend-pc/src/views/task/TaskRosterDrawer.vue b/frontend-pc/src/views/task/TaskRosterDrawer.vue
index 9547430..0efbf92 100644
--- a/frontend-pc/src/views/task/TaskRosterDrawer.vue
+++ b/frontend-pc/src/views/task/TaskRosterDrawer.vue
@@ -1,468 +1,6 @@
-<template>
-  <a-drawer v-model:visible="visible" :width="1120" :mask-closable="false" :footer="false"
-    unmount-on-close @cancel="close">
-    <template #title>
-      <span>名单管理</span>
-      <span class="roster__task">{{ taskName }}</span>
-    </template>
-
-    <!--
-      已截止 / 已归档只读。与服务端同口径（服务端也会拒），
-      界面上先说清楚 —— 否则用户选完文件点「开始体检」才被告知不能导。
-      注意：**体检（dryRun）不受状态限制**，看报告是安全的，所以只有"确认导入"被禁。
-    -->
-    <a-alert v-if="readonly" type="normal" :show-icon="false" class="roster__alert">
-      任务已{{ readonlyReason }}，名册不可再改，只能查看。
-      （仍然可以「开始体检」看一份表格有什么问题，只是不能导入。）
-    </a-alert>
-
-    <!--
-      收集中改名册要明确警告：学生可能正在核验。
-      删掉/改掉某一行，那个学生下次扫码就进不来了；而改「报考职业」这类锁定字段，
-      等于把他已经确认过的材料变成另一种认定。
-    -->
-    <a-alert v-else-if="collecting" type="warning" class="roster__alert">
-      <template #title>
-        任务正在收集中，<strong>改动立刻生效</strong>：学生下一次核验就会看到新名单。
-        已经核验过的人不受影响（他们的名册项<b>不会被覆盖</b>，系统会跳过并提示）。
-      </template>
-    </a-alert>
-
-    <!-- ── 一、导入 ─────────────────────────────────── -->
-    <div class="roster__section">导入名册</div>
-    <a-alert type="info" :show-icon="false" class="roster__intro">
-      <template #title>
-        表格里需要有 <strong>姓名</strong> 与 <strong>身份证号</strong> 两列，
-        其余按官方模板的列名（学历、联系电话、报考职业…）识别。
-        <strong>表头在第几行不用管</strong>，系统会自己找；认错了可以手动指定。
-      </template>
-      <template #default>
-        <div class="roster__hint">
-          名册是<b>准入名单</b>：学生必须先填写姓名与身份证号、与名册匹配上，才能进入填报。
-          所以这一份名单就是"谁能填、填的是谁"的唯一依据。
-        </div>
-      </template>
-    </a-alert>
-
-    <a-row :gutter="16" class="roster__form">
-      <a-col :span="8">
-        <a-form-item label="整批归到哪个班级" class="roster__item">
-          <a-select v-model="orgId" placeholder="不指定（名册项不带班级）" allow-clear
-            :loading="orgLoading" size="small">
-            <a-option v-for="c in classOptions" :key="c.id" :value="c.id">{{ c.label }}</a-option>
-          </a-select>
-          <template #extra>
-            <span class="roster__hint">官方模板里没有班级列，所以这里选了就整批都算这个班</span>
-          </template>
-        </a-form-item>
-      </a-col>
-      <a-col :span="8">
-        <a-form-item label="导入方式" class="roster__item">
-          <a-radio-group v-model="mode" type="button" size="small">
-            <a-radio value="APPEND">合并导入</a-radio>
-            <a-radio value="REPLACE">整表替换</a-radio>
-          </a-radio-group>
-          <template #extra>
-            <span class="roster__hint">{{ modeHint }}</span>
-          </template>
-        </a-form-item>
-      </a-col>
-      <a-col :span="8">
-        <a-form-item label="Excel 文件" class="roster__item">
-          <div class="roster__pick">
-            <!--
-              用原生 input 而不是 a-upload：本场景只需要"选一个本地文件然后自己发请求"，
-              原生 input 拿原始 File 的行为是完全确定的。与账号导入弹窗同一做法。
-            -->
-            <input ref="fileInput" type="file" accept=".xlsx,.xls" class="roster__file"
-              @change="onFileChange" />
-            <a-button size="small" :disabled="readonly" @click="pickFile">
-              <template #icon><IconUpload /></template>
-              选择文件
-            </a-button>
-            <span v-if="file" class="roster__filename" :title="file.name">{{ file.name }}</span>
-            <span v-else class="roster__hint">.xlsx / .xls，≤10MB</span>
-          </div>
-        </a-form-item>
-      </a-col>
-    </a-row>
-
-    <a-space class="roster__tool" wrap>
-      <a-button type="primary" size="small" :loading="checking" :disabled="!file || readonly"
-        @click="runDryRun()">
-        {{ report ? '按当前设置重新体检' : '开始体检' }}
-      </a-button>
-      <span class="roster__hint">
-        体检<b>不会写库</b>：先看清楚系统把哪一行当表头、哪几行有问题，确认无误再导入。
-      </span>
-    </a-space>
-
-    <!-- ── 二、体检报告 ─────────────────────────────── -->
-    <template v-if="report">
-      <a-divider />
-
-      <a-row :gutter="12" class="roster__stats">
-        <a-col :span="4">
-          <div class="roster__stat">
-            <div class="roster__stat-num">{{ report.total }}</div>
-            <div class="roster__stat-label">数据行</div>
-          </div>
-        </a-col>
-        <a-col :span="4">
-          <div class="roster__stat roster__stat--ok">
-            <div class="roster__stat-num">{{ report.success }}</div>
-            <div class="roster__stat-label">可入库</div>
-          </div>
-        </a-col>
-        <a-col :span="4">
-          <div class="roster__stat" :class="report.failed ? 'roster__stat--bad' : ''">
-            <div class="roster__stat-num">{{ report.failed }}</div>
-            <div class="roster__stat-label">被阻断</div>
-          </div>
-        </a-col>
-        <a-col :span="4">
-          <div class="roster__stat">
-            <div class="roster__stat-num">{{ report.dryRun ? plannedNew : report.created }}</div>
-            <div class="roster__stat-label">{{ report.dryRun ? '将新增' : '已新增' }}</div>
-          </div>
-        </a-col>
-        <a-col :span="4">
-          <div class="roster__stat">
-            <div class="roster__stat-num">{{ report.dryRun ? plannedUpdate : report.updated }}</div>
-            <div class="roster__stat-label">{{ report.dryRun ? '将更新' : '已更新' }}</div>
-          </div>
-        </a-col>
-        <a-col :span="4">
-          <div class="roster__stat" :class="report.warnings.length ? 'roster__stat--warn' : ''">
-            <div class="roster__stat-num">{{ report.warnings.length }}</div>
-            <div class="roster__stat-label">警告（不影响入库）</div>
-          </div>
-        </a-col>
-      </a-row>
-
-      <a-alert :type="headerAlertType" :show-icon="false" class="roster__header-alert">
-        <template #title>
-          系统把第 <strong>{{ report.headerRow }}</strong> 行当成了表头
-          <span v-if="report.headerRow > 1">
-            —— 它<strong>前面那 {{ report.headerRow - 1 }} 行</strong>是标题与说明，已跳过，
-            这不是导错了
-          </span>
-          。
-          <span v-if="report.sheetName">（工作表：{{ report.sheetName }}）</span>
-        </template>
-        <template #default>
-          <div v-if="report.headerCandidates.length > 1" class="roster__hint">
-            另外还有 {{ report.headerCandidates.length - 1 }} 行也像表头（命中列数：
-            {{ report.headerCandidates.map((c) => `第${c.row}行=${c.score}`).join('，') }}）。
-            如果系统选错了，在下面手动指定。
-          </div>
-          <div class="roster__hint">
-            缺了哪些列、多出来的列去了哪，看下面的「列识别结果」——
-            多出来的列不会丢，会原样存进扩展字段。
-          </div>
-        </template>
-      </a-alert>
-
-      <a-space class="roster__tool" wrap>
-        <span class="roster__hint">手动指定表头行：</span>
-        <a-input-number v-model="manualHeaderRow" :min="1" :max="200" size="small"
-          :style="{ width: '110px' }" placeholder="行号" />
-        <a-button size="small" :loading="checking" :disabled="!file" @click="runDryRun(manualHeaderRow)">
-          按这一行重新体检
-        </a-button>
-      </a-space>
-
-      <!-- 列识别结果 -->
-      <a-table :data="report.columns" :pagination="false" row-key="col" size="small"
-        :max-height="200" :scroll="{ y: 200 }" class="roster__table">
-        <template #columns>
-          <a-table-column title="列" :width="60" align="center" data-index="col" />
-          <a-table-column title="表头原文" data-index="title" :width="200" ellipsis tooltip />
-          <a-table-column title="识别为" :width="180">
-            <template #cell="{ record }">
-              <span v-if="record.matched" class="roster__mapped">{{ fieldName(record.mappedTo) }}</span>
-              <span v-else-if="record.mappedTo" class="roster__muted">
-                非官方列 → 存进扩展字段
-              </span>
-              <span v-else class="roster__muted">忽略</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="说明" :width="140">
-            <template #cell="{ record }">
-              <a-tag v-if="record.matched" color="green" size="small">官方列</a-tag>
-              <a-tag v-else-if="record.mappedTo" size="small">保留</a-tag>
-              <a-tag v-else size="small">空列</a-tag>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-
-      <!-- 阻断行 -->
-      <div class="roster__section roster__section--bad">
-        没能入库的行（{{ report.errors.length }}）
-      </div>
-      <a-empty v-if="!report.errors.length" description="没有阻断行" />
-      <a-table v-else :data="report.errors" :pagination="false" row-key="key" size="small"
-        :max-height="240" :scroll="{ y: 240 }">
-        <template #columns>
-          <a-table-column title="Excel 行" :width="90" align="center">
-            <template #cell="{ record }">第 {{ record.row }} 行</template>
-          </a-table-column>
-          <a-table-column title="列" :width="60" align="center">
-            <template #cell="{ record }">
-              <span v-if="record.col">{{ record.col }} 列</span>
-              <span v-else class="roster__muted">—</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="原值" :width="170" ellipsis tooltip>
-            <template #cell="{ record }">
-              <span v-if="record.value">{{ record.value }}</span>
-              <span v-else class="roster__muted">（空）</span>
-            </template>
-          </a-table-column>
-          <a-table-column title="原因" ellipsis tooltip>
-            <template #cell="{ record }">
-              {{ record.reason }}
-              <!-- 标签给的是**机器码**（排查/提单时有用），不重复上面那句人话 -->
-              <code class="roster__code">{{ record.code }}</code>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-
-      <!-- 警告行 -->
-      <div class="roster__section roster__section--warn">
-        有警告、但仍然会入库的行（{{ report.warnings.length }}）
-      </div>
-      <a-empty v-if="!report.warnings.length" description="没有警告" />
-      <a-table v-else :data="report.warnings" :pagination="false" row-key="key" size="small"
-        :max-height="200" :scroll="{ y: 200 }">
-        <template #columns>
-          <a-table-column title="Excel 行" :width="90" align="center">
-            <template #cell="{ record }">第 {{ record.row }} 行</template>
-          </a-table-column>
-          <a-table-column title="原值" :width="170" ellipsis tooltip>
-            <template #cell="{ record }">{{ record.value || '（空）' }}</template>
-          </a-table-column>
-          <a-table-column title="原因" ellipsis tooltip>
-            <template #cell="{ record }">
-              {{ record.reason }}
-              <code class="roster__code">{{ record.code }}</code>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-
-      <div class="roster__footer">
-        <a-space>
-          <a-button size="small" @click="resetReport">重新选文件</a-button>
-          <a-button type="primary" size="small" :loading="importing"
-            :disabled="readonly || !report.success" @click="confirmImport">
-            {{ importButtonText }}
-          </a-button>
-        </a-space>
-        <div v-if="!report.success" class="roster__hint">
-          没有任何可入库的行，请按上面的原因改好 Excel 再来。
-        </div>
-        <div v-else-if="report.dryRun" class="roster__hint">
-          上面这些数字是<b>预计</b>结果；导入只处理有问题的行以外的那
-          {{ report.success }} 行，其余行改好后可以再次导入（同证件号会合并更新，不会重复）。
-        </div>
-      </div>
-    </template>
-
-    <!-- ── 三、报考范围（从名册聚合，不是"上传计划"）─────── -->
-    <a-divider />
-    <div class="roster__section">
-      报考范围（{{ scope?.rosterCount ?? 0 }} 人）
-      <span v-if="scope?.confirmed">已于 {{ fmtTime(scope?.updatedAt) }} 确认</span>
-      <span v-else>尚未确认</span>
-    </div>
-    <a-alert type="info" :show-icon="false" class="roster__intro">
-      <template #title>
-        这里<strong>不是上传计划</strong>：范围是从名单里「报考职业 / 报考工种 / 报考等级」
-        三列<strong>归出来的</strong>（真实名单里这三列老师已经填好）。
-        确认之后，它就成为"追加名单是否出现范围外报考项"的基准。
-      </template>
-    </a-alert>
-
-    <a-spin :loading="scopeLoading">
-      <a-empty v-if="!scopeGroups.length" description="名册为空，还没有可聚合的报考范围" />
-
-      <template v-else>
-        <a-table :data="scopeGroups" :pagination="false" row-key="__key" size="small"
-          class="roster__table">
-          <template #columns>
-            <a-table-column title="报考组合（职业 / 工种 / 等级）" :width="330">
-              <template #cell="{ record }">
-                <div>{{ groupText(record) }}</div>
-              </template>
-            </a-table-column>
-            <a-table-column title="人数" :width="80" align="center" data-index="count" />
-            <a-table-column title="状态" :width="110" align="center">
-              <template #cell="{ record }">
-                <a-tag :color="SCOPE_STATUS[record.status]?.color ?? 'gray'" size="small">
-                  {{ SCOPE_STATUS[record.status]?.text ?? record.status }}
-                </a-tag>
-              </template>
-            </a-table-column>
-            <a-table-column title="操作" :width="110" align="center">
-              <template #cell="{ record }">
-                <a-link v-if="record.status !== 'EXCLUDED'" @click="toggleExclude(record)">
-                  标为不参与
-                </a-link>
-                <a-link v-else @click="toggleExclude(record)">恢复参与</a-link>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
-
-        <!-- 体检：必须说得出"是哪几个人" -->
-        <template v-if="scopeIssues.length">
-          <div class="roster__section roster__section--warn">
-            一致性体检发现 {{ scopeIssues.length }} 项，请逐项处理或确认忽略
-          </div>
-          <div v-for="is in scopeIssues" :key="is.code + is.title" class="roster__issue">
-            <div class="roster__issue-head">
-              <a-tag size="small" :color="is.level <= 1 ? 'red' : (is.level === 2 ? 'orange' : 'gray')">
-                级别 {{ is.level }}
-              </a-tag>
-              <strong>{{ is.title }}</strong>
-              <a-checkbox :model-value="ignoredCodes.includes(is.code)"
-                @change="toggleIgnore(is.code)">
-                已知悉，本次忽略
-              </a-checkbox>
-            </div>
-            <div class="roster__hint">{{ is.detail }}</div>
-          </div>
-        </template>
-        <a-alert v-else type="success" :show-icon="false" class="roster__intro">
-          体检通过：没有发现漏填、同职业多等级、范围外职业等问题。
-        </a-alert>
-
-        <div class="roster__footer">
-          <a-button type="primary" size="small" :loading="scopeSaving" :disabled="!canConfirmScope"
-            @click="confirmScope">
-            确认报考范围
-          </a-button>
-          <div class="roster__hint">
-            <template v-if="!canConfirmScope">
-              还有 {{ unhandledCount }} 项体检问题未处理：请修名单后重新导入，或逐项勾选「已知悉，本次忽略」。
-            </template>
-            <template v-else>
-              确认时会校验"名册里每个人都恰好被分到一组"——
-              漏掉一个人，导出包就会缺人，而打开导出包时看不出来。
-            </template>
-          </div>
-        </div>
-      </template>
-    </a-spin>
-
-    <!-- ── 四、名册明细 ─────────────────────────────── -->
-    <a-divider />
-    <div class="roster__section">
-      名册（{{ total }} 人）
-      <span v-if="stat.t">已核验 {{ stat.bound }} 人 · 已提交 {{ stat.submitted }} 人</span>
-    </div>
-
-    <a-space class="roster__tool" wrap>
-      <a-input-search v-model="query.keyword" placeholder="姓名，或粘贴完整身份证号" allow-clear
-        class="roster__search" size="small" @search="search" @clear="search" />
-      <a-select v-model="query.submitStatus" placeholder="填报状态" allow-clear size="small"
-        class="roster__filter" @change="search">
-        <a-option v-for="(v, k) in SUBMIT_STATUS" :key="k" :value="Number(k)">{{ v.text }}</a-option>
-      </a-select>
-      <a-select v-model="query.bindStatus" placeholder="核验状态" allow-clear size="small"
-        class="roster__filter" @change="search">
-        <a-option :value="0">未核验</a-option>
-        <a-option :value="1">已核验</a-option>
-      </a-select>
-      <a-button size="small" @click="loadList">
-        <template #icon><IconRefresh /></template>
-        刷新
-      </a-button>
-    </a-space>
-
-    <a-table :data="rows" :loading="listLoading" row-key="id" size="small" :pagination="pagination"
-      :scroll="{ x: 940 }" class="roster__table" @page-change="onPageChange">
-      <template #columns>
-        <a-table-column title="序号" :width="64" align="center">
-          <template #cell="{ record }">
-            <span v-if="record.seqNo !== null">{{ record.seqNo }}</span>
-            <span v-else class="roster__muted">—</span>
-          </template>
-        </a-table-column>
-
-        <a-table-column title="姓名 / 学历" :width="120">
-          <template #cell="{ record }">
-            <div class="roster__name">{{ record.realName }}</div>
-            <div class="roster__muted">{{ record.education || '—' }}</div>
-          </template>
-        </a-table-column>
-
-        <a-table-column title="证件号 / 电话" :width="190">
-          <template #cell="{ record }">
-            <!-- 后端只回脱敏值；这里不做任何"还原"，界面上不该有完整号码 -->
-            <div class="roster__mono">{{ record.idCardMask || '—' }}</div>
-            <div class="roster__muted">{{ record.phoneMask || '未填' }}</div>
-          </template>
-        </a-table-column>
-
-        <a-table-column title="班级" :width="110" ellipsis tooltip>
-          <template #cell="{ record }">
-            <span v-if="record.orgName">{{ record.orgName }}</span>
-            <span v-else class="roster__muted">未指定</span>
-          </template>
-        </a-table-column>
-
-        <a-table-column title="报考（职业 / 工种 / 等级）" :width="230">
-          <template #cell="{ record }">
-            <div>{{ record.occupation || '—' }}</div>
-            <div class="roster__muted">
-              {{ record.worktype || '—' }} · {{ record.jobLevel || '—' }}
-            </div>
-          </template>
-        </a-table-column>
-
-        <a-table-column title="状态" :width="130" align="center">
-          <template #cell="{ record }">
-            <a-tag :color="SUBMIT_STATUS[record.submitStatus]?.color ?? 'gray'" size="small">
-              {{ SUBMIT_STATUS[record.submitStatus]?.text ?? '未知' }}
-            </a-tag>
-            <div class="roster__muted">
-              {{ record.bindStatus === 1 ? '已核验' : '未核验' }}
-            </div>
-          </template>
-        </a-table-column>
-
-        <a-table-column title="其它" :width="96" align="center">
-          <template #cell="{ record }">
-            <a-tooltip v-if="record.extJson && Object.keys(record.extJson).length"
-              :content="extText(record.extJson)">
-              <a-tag size="small">扩展字段 {{ Object.keys(record.extJson).length }}</a-tag>
-            </a-tooltip>
-            <span v-else class="roster__muted">—</span>
-          </template>
-        </a-table-column>
-      </template>
-    </a-table>
-  </a-drawer>
-</template>
-
 <script setup lang="ts">
-import type { PlanScopeVO } from '@/apis/xt/plan-scope'
-import type { RosterImportReport, RosterVO } from '@/apis/xt/roster'
-import type { TaskVO } from '@/apis/xt/task'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconRefresh, IconUpload } from '@arco-design/web-vue/es/icon'
-import * as orgApi from '@/apis/xt/org'
-import * as scopeApi from '@/apis/xt/plan-scope'
-import { SCOPE_STATUS } from '@/apis/xt/plan-scope'
-import * as rosterApi from '@/apis/xt/roster'
-import { SUBMIT_STATUS } from '@/apis/xt/roster'
-
 /**
- * 任务「名单管理」抽屉（《03-接口设计》§8.1 ~ §8.2）—— FR-501 / FR-502。
+ * 任务「名单管理」抽屉（《03-接口设计》§8.1 ~ §8.2）。
  *
  * ## 为什么这个界面必须存在
  *
@@ -470,7 +8,7 @@ import { SUBMIT_STATUS } from '@/apis/xt/roster'
  * 名册只能靠直接改数据库来造 —— 而**名册是准入名单**：学生能不能进来填、
  * 填的是谁，全靠它。也就是说这个界面之前，整条填报链路在界面上是走不通的。
  *
- * ## 三处刻意的设计
+ * ## 四处刻意的设计
  *
  * 1. **先体检、再导入（两步）**。实测两份真实文件的表头分别在第 1 行和第 6 行，
  *    工作表名也不同。一步导入的话，用户只会看到"成功 0 条"，
@@ -485,13 +23,59 @@ import { SUBMIT_STATUS } from '@/apis/xt/roster'
  * 3. **行号 + 列字母 + 原值 + 原因，四样一起给**。只给"第 12 行有问题"，
  *    用户还得自己回去找是哪一列；给了列字母与原因，他能直接改完再导一次。
  *    而"改好再来一次"是这个界面的正常用法（同证件号会合并更新，不会重复）。
+ *
+ * 4. **「标为不参与」不是"删除这个人"**。服务端要求名册全员恰好被覆盖一次
+ *    （少一个人导出包就缺人，而打开包时看不出来），所以排除是把他所在的
+ *    分组标成 `EXCLUDED`，留下痕迹。
+ *
+ * ⚠️ 表格的竖滚用 `max-height`（Naive 的 `n-data-table` 没有 Arco 那种 `scroll` prop），
+ *    单元格样式走内联 —— 渲染函数创建的元素拿不到本组件的 scoped 属性。
  */
+import type { DataTableColumns, PaginationProps } from 'naive-ui'
+import type { BizError } from '@/apis/types'
+import type { OrgTreeVO } from '@/apis/xt/org'
+import type { PlanScopeGroup, PlanScopeVO } from '@/apis/xt/plan-scope'
+import type { RosterImportReport, RosterRowIssue, RosterVO } from '@/apis/xt/roster'
+import type { TaskVO } from '@/apis/xt/task'
+import {
+  NAlert,
+  NButton,
+  NCheckbox,
+  NDataTable,
+  NDivider,
+  NDrawer,
+  NDrawerContent,
+  NEmpty,
+  NInput,
+  NInputNumber,
+  NRadioButton,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTag,
+  NTooltip,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, reactive, ref, useTemplateRef } from 'vue'
+import * as orgApi from '@/apis/xt/org'
+import * as scopeApi from '@/apis/xt/plan-scope'
+import { SCOPE_STATUS } from '@/apis/xt/plan-scope'
+import * as rosterApi from '@/apis/xt/roster'
+import { SUBMIT_STATUS } from '@/apis/xt/roster'
+import AppIcon from '@/icons/AppIcon.vue'
+import { tagOf } from '@/utils/tag'
+
 defineOptions({ name: 'TaskRosterDrawer' })
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
+const message = useMessage()
+const dialog = useDialog()
+
 const visible = ref(false)
 const taskId = ref<number | null>(null)
 const taskName = ref('')
@@ -503,16 +87,30 @@ const readonly = computed(() => !EDITABLE.includes(taskStatus.value))
 const readonlyReason = computed(() => (taskStatus.value === 2 ? '截止' : '归档'))
 const collecting = computed(() => taskStatus.value === 1)
 
-// ── 导入 ──────────────────────────────────────────
+// 渲染函数里的样式常量（scoped 样式对这些元素不生效）
+const S_MUTED = 'font-size: 12px; color: #8a8a8a'
+const S_MONO = 'font-family: ui-monospace, monospace; font-size: 12px'
+const S_NAME = 'font-weight: 500; color: #1f2229'
+const S_CODE = 'margin-left: 6px; font-family: ui-monospace, monospace; font-size: 12px; color: #8a8a8a'
+
+// ── 一、导入 ──────────────────────────────────────
 
 const fileInput = useTemplateRef<HTMLInputElement>('fileInput')
 const file = ref<File | null>(null)
 const mode = ref<'APPEND' | 'REPLACE'>('APPEND')
-const orgId = ref<number | undefined>(undefined)
+const orgId = ref<number | null>(null)
 const checking = ref(false)
 const importing = ref(false)
-const report = ref<RosterImportReport | null>(null)
-const manualHeaderRow = ref<number | undefined>(undefined)
+
+/** 报告里带上行 key：同一行可能有多条问题，拼上 code 与下标才唯一 */
+type IssueRow = RosterRowIssue & { key: string }
+type TaggedReport = Omit<RosterImportReport, 'errors' | 'warnings'> & {
+  errors: IssueRow[]
+  warnings: IssueRow[]
+}
+
+const report = ref<TaggedReport | null>(null)
+const manualHeaderRow = ref<number | null>(null)
 /** 整表替换的二次确认只做一次（用户点过一次「确认替换」之后就走真导入） */
 const replaceConfirmed = ref(false)
 
@@ -575,14 +173,15 @@ function extText(ext: Record<string, unknown>) {
   return Object.entries(ext).map(([k, v]) => `${k}：${String(v)}`).join('\n')
 }
 
-// ── 班级下拉 ───────────────────────────────────────
-
-interface ClassOption {
-  id: number
-  label: string
+function tagged(r: RosterImportReport | null): TaggedReport | null {
+  if (!r) return null
+  const tag = (list: RosterRowIssue[]) => list.map((x, i) => ({ ...x, key: `${x.row}-${x.code}-${i}` }))
+  return { ...r, errors: tag(r.errors), warnings: tag(r.warnings) }
 }
 
-const classOptions = ref<ClassOption[]>([])
+// ── 班级下拉 ───────────────────────────────────────
+
+const classOptions = ref<Array<{ id: number, label: string }>>([])
 const orgLoading = ref(false)
 
 async function loadClasses() {
@@ -591,9 +190,9 @@ async function loadClasses() {
   }
   orgLoading.value = true
   try {
-    const res = await orgApi.getOrgTree()
-    const out: ClassOption[] = []
-    const walk = (nodes: orgApi.OrgTreeVO[] | undefined, parent: string) => {
+    const tree = await orgApi.getOrgTree()
+    const out: Array<{ id: number, label: string }> = []
+    const walk = (nodes: OrgTreeVO[] | undefined, parent: string) => {
       for (const n of nodes ?? []) {
         if (n.orgType === 3) {
           out.push({ id: n.id, label: parent ? `${parent} / ${n.orgName}` : n.orgName })
@@ -601,7 +200,7 @@ async function loadClasses() {
         walk(n.children, n.orgType === 3 ? parent : n.orgName)
       }
     }
-    walk(res.data, '')
+    walk(tree, '')
     classOptions.value = out
   } finally {
     orgLoading.value = false
@@ -615,19 +214,11 @@ const rows = ref<RosterVO[]>([])
 const total = ref(0)
 const query = reactive<{
   keyword: string
-  submitStatus: number | undefined
-  bindStatus: number | undefined
+  submitStatus: number | null
+  bindStatus: number | null
   pageNum: number
   pageSize: number
-}>({ keyword: '', submitStatus: undefined, bindStatus: undefined, pageNum: 1, pageSize: 10 })
-
-const pagination = computed(() => ({
-  current: query.pageNum,
-  pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
-}))
+}>({ keyword: '', submitStatus: null, bindStatus: null, pageNum: 1, pageSize: 10 })
 
 /**
  * 一句话统计。没有它，用户看不出"名册导进来了没有、有多少人已经开始填"，
@@ -639,21 +230,42 @@ const stat = computed(() => {
   return { t: total.value > 0, bound, submitted }
 })
 
+const submitStatusOptions = Object.entries(SUBMIT_STATUS)
+  .map(([k, v]) => ({ value: Number(k), label: v.text }))
+
+const pagination = computed<PaginationProps>(() => ({
+  page: query.pageNum,
+  pageSize: query.pageSize,
+  itemCount: total.value,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50],
+  prefix: (info) => `共 ${info.itemCount} 人`,
+  onUpdatePage: (page: number) => {
+    query.pageNum = page
+    void loadList()
+  },
+  onUpdatePageSize: (size: number) => {
+    query.pageSize = size
+    query.pageNum = 1
+    void loadList()
+  }
+}))
+
 async function loadList() {
   if (!taskId.value) {
     return
   }
   listLoading.value = true
   try {
-    const res = await rosterApi.getRosterList(taskId.value, {
+    const page = await rosterApi.getRosterList(taskId.value, {
       keyword: query.keyword.trim() || undefined,
-      submitStatus: query.submitStatus,
-      bindStatus: query.bindStatus,
+      submitStatus: query.submitStatus ?? undefined,
+      bindStatus: query.bindStatus ?? undefined,
       pageNum: query.pageNum,
       pageSize: query.pageSize
     })
-    rows.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
+    rows.value = page?.list ?? []
+    total.value = page?.total ?? 0
   } finally {
     listLoading.value = false
   }
@@ -661,12 +273,7 @@ async function loadList() {
 
 function search() {
   query.pageNum = 1
-  loadList()
-}
-
-function onPageChange(page: number) {
-  query.pageNum = page
-  loadList()
+  void loadList()
 }
 
 // ── 打开 / 关闭 ────────────────────────────────────
@@ -678,8 +285,8 @@ async function open(task: TaskVO) {
   taskStatus.value = task.status
   resetReport()
   query.keyword = ''
-  query.submitStatus = undefined
-  query.bindStatus = undefined
+  query.submitStatus = null
+  query.bindStatus = null
   query.pageNum = 1
   await Promise.all([loadClasses(), loadList(), loadScope()])
 }
@@ -688,12 +295,26 @@ function close() {
   resetReport()
 }
 
+/**
+ * 关闭抽屉（X / 遮罩 / 保存后）时清掉内部状态。
+ *
+ * ⚠️ Naive 的抽屉默认**不销毁内容**（没有 Arco 那个 `unmount-on-close`），
+ * 不清的话下次打开会看到上一次选的文件与体检报告 —— 而"报告还在、文件已经不在"
+ * 是最难向用户解释的一种状态。
+ */
+function onShowChange(v: boolean) {
+  visible.value = v
+  if (!v) {
+    close()
+  }
+}
+
 function resetReport() {
   file.value = null
   report.value = null
-  manualHeaderRow.value = undefined
+  manualHeaderRow.value = null
   mode.value = 'APPEND'
-  orgId.value = undefined
+  orgId.value = null
   if (fileInput.value) {
     fileInput.value.value = ''
   }
@@ -707,7 +328,7 @@ function onFileChange(e: Event) {
   const input = e.target as HTMLInputElement
   const picked = input.files?.[0] ?? null
   if (picked && picked.size > 10 * 1024 * 1024) {
-    Message.warning('文件超过 10MB，请拆分后分批导入')
+    message.warning('文件超过 10MB，请拆分后分批导入')
     input.value = ''
     file.value = null
     return
@@ -718,31 +339,32 @@ function onFileChange(e: Event) {
 
 // ── 体检 / 导入 ────────────────────────────────────
 
-async function runDryRun(headerRow?: number) {
+async function runDryRun(headerRow?: number | null) {
   if (!file.value || !taskId.value) {
     return
   }
   checking.value = true
   try {
-    const res = await rosterApi.importRoster(taskId.value, file.value, {
+    const r = await rosterApi.importRoster(taskId.value, file.value, {
       dryRun: true,
       mode: mode.value,
-      orgId: orgId.value,
+      orgId: orgId.value ?? undefined,
       headerRow: headerRow ?? undefined
     })
-    report.value = withKeys(res.data ?? null)
-    manualHeaderRow.value = report.value?.headerRow
+    report.value = tagged(r)
+    manualHeaderRow.value = report.value?.headerRow ?? null
   } catch (e) {
     // 40028（认不出表头）/ 40017（缺关键列）是**预期内的结果**，不是系统故障：
     // 把它当"需要人工指定表头"来处理，比弹一句红字有用
-    const err = e as Error & { bizCode?: number }
+    const err = e as BizError
     if (err?.bizCode === 40028 || err?.bizCode === 40017) {
-      Modal.info({
+      dialog.info({
         title: '需要人工指定表头',
-        content: `${err.message}
-
-请在下方把表头行号填上再试一次（比如标题在第 1 行、说明在第 3 行、表头在第 6 行时，填 6）。`,
-        hideCancel: true
+        content: () => h('div', { style: 'line-height: 1.8' }, [
+          h('div', err.message),
+          h('div', { style: 'margin-top: 8px' }, '请在下方把表头行号填上再试一次（比如标题在第 1 行、说明在第 3 行、表头在第 6 行时，填 6）。')
+        ]),
+        positiveText: '知道了'
       })
     }
   } finally {
@@ -750,29 +372,23 @@ async function runDryRun(headerRow?: number) {
   }
 }
 
-/** 行 key：报告里的行号可能有多条问题，拼上 code 才是唯一的 */
-function withKeys(r: RosterImportReport | null): RosterImportReport | null {
-  if (!r) return null
-  const tag = (list: RosterImportReport['errors']) =>
-    list.map((x, i) => ({ ...x, key: `${x.row}-${x.code}-${i}` })) as RosterImportReport['errors']
-  return { ...r, errors: tag(r.errors), warnings: tag(r.warnings) }
-}
-
 async function confirmImport() {
   if (!file.value || !taskId.value || !report.value) {
     return
   }
   if (mode.value === 'REPLACE' && !replaceConfirmed.value) {
-    Modal.warning({
+    dialog.warning({
       title: '整表替换会清掉现有名册',
-      content: `现有的 ${total.value} 条名册会被替换成这份文件里的 ${report.value.success} 条。
-       已经核验或已提交的人会被拒绝（服务端会拦下整次替换）。
-       确认要用「替换」而不是「合并」吗？`,
-      okText: '确认替换',
-      hideCancel: false,
-      onBeforeOk: () => {
+      content: () => h('div', { style: 'line-height: 1.8' }, [
+        h('div', `现有的 ${total.value} 条名册会被替换成这份文件里的 ${report.value?.success ?? 0} 条。`),
+        h('div', { style: 'margin-top: 8px' }, '已经核验或已提交的人会被拒绝（服务端会拦下整次替换）。确认要用「替换」而不是「合并」吗？')
+      ]),
+      positiveText: '确认替换',
+      negativeText: '取消',
+      onPositiveClick: () => {
         replaceConfirmed.value = true
         void confirmImport()
+        // 返回 false：真正的导入由上面这次调用完成，这个确认框只是"再问一次"
         return false
       }
     })
@@ -780,16 +396,16 @@ async function confirmImport() {
   }
   importing.value = true
   try {
-    const res = await rosterApi.importRoster(taskId.value, file.value, {
+    const r = await rosterApi.importRoster(taskId.value, file.value, {
       dryRun: false,
       mode: mode.value,
-      orgId: orgId.value,
-      headerRow: manualHeaderRow.value
+      orgId: orgId.value ?? undefined,
+      headerRow: manualHeaderRow.value ?? undefined
     })
-    report.value = withKeys(res.data ?? null)
+    report.value = tagged(r)
     const d = report.value
     const removedPart = d?.removed ? `、移除 ${d.removed} 人` : ''
-    Message.success(`导入完成：新增 ${d?.created ?? 0} 人、更新 ${d?.updated ?? 0} 人${removedPart}`)
+    message.success(`导入完成：新增 ${d?.created ?? 0} 人、更新 ${d?.updated ?? 0} 人${removedPart}`)
     query.pageNum = 1
     // 名册变了 → 报考范围也要重算（它是从名册聚合出来的）
     await Promise.all([loadList(), loadScope()])
@@ -800,7 +416,9 @@ async function confirmImport() {
   }
 }
 
-// ── 报考范围（§7.7 / §7.8）──────────────────────────
+// ── 三、报考范围（§7.7 / §7.8）──────────────────────
+
+type ScopeRow = PlanScopeGroup & { __key: string }
 
 const scope = ref<PlanScopeVO | null>(null)
 const scopeLoading = ref(false)
@@ -810,13 +428,17 @@ const ignoredCodes = ref<string[]>([])
 /** 本地改过的分组状态（确认之前不落库） */
 const localStatus = ref<Record<string, string>>({})
 
+function scopeKey(g: { occupation: string | null, worktype: string | null, jobLevel: string | null }) {
+  return `${g.occupation ?? ''}|${g.worktype ?? ''}|${g.jobLevel ?? ''}`
+}
+
 /**
  * 分组列表 —— 带上本地改过的状态。
  *
  * `__key` 是给表格用的 row-key：一个分组的身份就是「职业/工种/等级」三项，
  * 用它当 key 比用下标稳（重算之后顺序可能变，下标当 key 会让"排除"跟错行）。
  */
-const scopeGroups = computed(() =>
+const scopeGroups = computed<ScopeRow[]>(() =>
   (scope.value?.groups ?? []).map((g) => {
     const k = scopeKey(g)
     return { ...g, __key: k, status: localStatus.value[k] ?? g.status }
@@ -846,8 +468,7 @@ async function loadScope() {
   }
   scopeLoading.value = true
   try {
-    const res = await scopeApi.getPlanScope(taskId.value)
-    scope.value = res.data ?? null
+    scope.value = await scopeApi.getPlanScope(taskId.value)
     localStatus.value = {}
     // 服务端回来的是"已扣掉被忽略项"的清单，所以本地从空开始
     ignoredCodes.value = []
@@ -856,26 +477,16 @@ async function loadScope() {
   }
 }
 
-function scopeKey(g: { occupation: string | null, worktype: string | null, jobLevel: string | null }) {
-  return `${g.occupation ?? ''}|${g.worktype ?? ''}|${g.jobLevel ?? ''}`
-}
-
 /** 组合的人话说法：「车工 / 数控车工 / 四级」；空的写「（未填）」而不是留白 */
 function groupText(g: { occupation: string | null, worktype: string | null, jobLevel: string | null }) {
   return [g.occupation ?? '（未填）', g.worktype ?? '无', g.jobLevel ?? '无'].join(' / ')
 }
 
-function fmtTime(t: string | null | undefined) {
+function fmtMinute(t: string | null | undefined) {
   return t ? String(t).replace('T', ' ').slice(0, 16) : '—'
 }
 
-/**
- * 「标为不参与」不是把这个人从名单里删掉，而是**把他所在的分组标成 EXCLUDED**。
- *
- * 服务端要求名册全员恰好被覆盖一次：删掉人就过不了校验（40024 会点名他）。
- * 所以界面上的措辞是"标为不参与"，而不是"删除"—— 排除必须留下痕迹。
- */
-function toggleExclude(g: { __key: string, status: string }) {
+function toggleExclude(g: ScopeRow) {
   localStatus.value = {
     ...localStatus.value,
     [g.__key]: g.status === 'EXCLUDED' ? 'CONFIRMED' : 'EXCLUDED'
@@ -894,7 +505,7 @@ async function confirmScope() {
   }
   scopeSaving.value = true
   try {
-    const res = await scopeApi.savePlanScope(taskId.value, {
+    scope.value = await scopeApi.savePlanScope(taskId.value, {
       groups: scopeGroups.value.map((g) => ({
         occupation: g.occupation,
         worktype: g.worktype,
@@ -905,90 +516,748 @@ async function confirmScope() {
       })),
       ignoredIssueCodes: ignoredCodes.value
     })
-    scope.value = res.data ?? null
     localStatus.value = {}
     ignoredCodes.value = []
-    Message.success('报考范围已确认')
+    message.success('报考范围已确认')
     emit('save-success')
   } finally {
     scopeSaving.value = false
   }
 }
 
+// ── 列定义 ─────────────────────────────────────────
+
+/** 列识别结果 */
+const columnColumns = computed<DataTableColumns<{ col: string, title: string, mappedTo: string | null, matched: boolean }>>(() => [
+  { title: '列', key: 'col', width: 60, align: 'center' },
+  { title: '表头原文', key: 'title', width: 200, ellipsis: { tooltip: true } },
+  {
+    title: '识别为',
+    key: 'mappedTo',
+    width: 180,
+    render: (row) => {
+      if (row.matched) {
+        return h('span', { style: 'color: #0052d9' }, fieldName(row.mappedTo))
+      }
+      if (row.mappedTo) {
+        return h('span', { style: S_MUTED }, '非官方列 → 存进扩展字段')
+      }
+      return h('span', { style: S_MUTED }, '忽略')
+    }
+  },
+  {
+    title: '说明',
+    key: 'tag',
+    width: 140,
+    render: (row) => {
+      const type = row.matched ? 'success' : (row.mappedTo ? 'info' : 'default')
+      const text = row.matched ? '官方列' : (row.mappedTo ? '保留' : '空列')
+      return h(NTag, { size: 'small', bordered: false, type }, { default: () => text })
+    }
+  }
+])
+
+/** 阻断行 / 警告行共用一套列（警告行多一个"列"字段可为空） */
+function issueColumns(withCol: boolean): DataTableColumns<IssueRow> {
+  const cols: DataTableColumns<IssueRow> = [
+    {
+      title: 'Excel 行',
+      key: 'row',
+      width: 90,
+      align: 'center',
+      render: (row) => `第 ${row.row} 行`
+    }
+  ]
+  if (withCol) {
+    cols.push({
+      title: '列',
+      key: 'col',
+      width: 60,
+      align: 'center',
+      render: (row) => (row.col ? `${row.col} 列` : h('span', { style: S_MUTED }, '—'))
+    })
+  }
+  cols.push(
+    {
+      title: '原值',
+      key: 'value',
+      width: 170,
+      ellipsis: { tooltip: true },
+      render: (row) => row.value || h('span', { style: S_MUTED }, '（空）')
+    },
+    {
+      title: '原因',
+      key: 'reason',
+      ellipsis: { tooltip: true },
+      render: (row) => h('span', [
+        row.reason,
+        // 标签给的是**机器码**（排查/提单时有用），不重复上面那句人话
+        h('code', { style: S_CODE }, row.code)
+      ])
+    }
+  )
+  return cols
+}
+
+const errorColumns = computed(() => issueColumns(true))
+const warningColumns = computed(() => issueColumns(false))
+
+/** 报考范围分组 */
+const scopeColumns = computed<DataTableColumns<ScopeRow>>(() => [
+  { title: '报考组合（职业 / 工种 / 等级）', key: 'group', width: 330, render: (row) => groupText(row) },
+  { title: '人数', key: 'count', width: 80, align: 'center' },
+  {
+    title: '状态',
+    key: 'status',
+    width: 110,
+    align: 'center',
+    render: (row) => {
+      const tag = tagOf(SCOPE_STATUS, row.status, row.status)
+      return h(NTag, { size: 'small', bordered: false, type: tag.type }, { default: () => tag.text })
+    }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 110,
+    align: 'center',
+    render: (row) => h(NButton, {
+      text: true,
+      size: 'small',
+      onClick: () => toggleExclude(row)
+    }, { default: () => (row.status === 'EXCLUDED' ? '恢复参与' : '标为不参与') })
+  }
+])
+
+/** 名册明细 */
+const rosterColumns = computed<DataTableColumns<RosterVO>>(() => [
+  {
+    title: '序号',
+    key: 'seqNo',
+    width: 64,
+    align: 'center',
+    render: (row) => (row.seqNo !== null ? String(row.seqNo) : h('span', { style: S_MUTED }, '—'))
+  },
+  {
+    title: '姓名 / 学历',
+    key: 'realName',
+    width: 120,
+    render: (row) => h('div', [
+      h('div', { style: S_NAME }, row.realName),
+      h('div', { style: S_MUTED }, row.education || '—')
+    ])
+  },
+  {
+    title: '证件号 / 电话',
+    key: 'idCardMask',
+    width: 190,
+    render: (row) => h('div', [
+      // 后端只回脱敏值；这里不做任何"还原"，界面上不该有完整号码
+      h('div', { style: S_MONO }, row.idCardMask || '—'),
+      h('div', { style: S_MUTED }, row.phoneMask || '未填')
+    ])
+  },
+  {
+    title: '班级',
+    key: 'orgName',
+    width: 110,
+    ellipsis: { tooltip: true },
+    render: (row) => (row.orgName ? row.orgName : h('span', { style: S_MUTED }, '未指定'))
+  },
+  {
+    title: '报考（职业 / 工种 / 等级）',
+    key: 'occupation',
+    width: 230,
+    render: (row) => h('div', [
+      h('div', row.occupation || '—'),
+      h('div', { style: S_MUTED }, `${row.worktype || '—'} · ${row.jobLevel || '—'}`)
+    ])
+  },
+  {
+    title: '状态',
+    key: 'submitStatus',
+    width: 130,
+    align: 'center',
+    render: (row) => {
+      const tag = tagOf(SUBMIT_STATUS, row.submitStatus, '未知')
+      return h('div', [
+        h(NTag, { size: 'small', bordered: false, type: tag.type }, { default: () => tag.text }),
+        h('div', { style: `${S_MUTED}; margin-top: 2px` }, row.bindStatus === 1 ? '已核验' : '未核验')
+      ])
+    }
+  },
+  {
+    title: '其它',
+    key: 'extJson',
+    width: 96,
+    align: 'center',
+    render: (row) => {
+      const keys = row.extJson ? Object.keys(row.extJson).length : 0
+      if (!keys) {
+        return h('span', { style: S_MUTED }, '—')
+      }
+      return h(NTooltip, { trigger: 'hover' }, {
+        trigger: () => h(NTag, { size: 'small' }, { default: () => `扩展字段 ${keys}` }),
+        default: () => extText(row.extJson ?? {})
+      })
+    }
+  }
+])
+
 defineExpose({ open })
 </script>
 
+<template>
+  <NDrawer
+    :show="visible"
+    :width="1120"
+    :mask-closable="false"
+    placement="right"
+    @update:show="onShowChange"
+  >
+    <NDrawerContent :native-scrollbar="false" closable>
+      <template #header>
+        <span>名单管理</span>
+        <span class="roster__task">{{ taskName }}</span>
+      </template>
+
+      <!--
+        已截止 / 已归档只读。与服务端同口径（服务端也会拒），
+        界面上先说清楚 —— 否则用户选完文件点「开始体检」才被告知不能导。
+        注意：**体检（dryRun）不受状态限制**，看报告是安全的，所以只有"确认导入"被禁。
+      -->
+      <NAlert v-if="readonly" type="default" :show-icon="false" :bordered="false" class="roster__alert">
+        任务已{{ readonlyReason }}，名册不可再改，只能查看。
+        （仍然可以「开始体检」看一份表格有什么问题，只是不能导入。）
+      </NAlert>
+
+      <!--
+        收集中改名册要明确警告：学生可能正在核验。
+        删掉/改掉某一行，那个学生下次扫码就进不来了；而改「报考职业」这类锁定字段，
+        等于把他已经确认过的材料变成另一种认定。
+      -->
+      <NAlert v-else-if="collecting" type="warning" :show-icon="false" class="roster__alert">
+        任务正在收集中，<strong>改动立刻生效</strong>：学生下一次核验就会看到新名单。
+        已经核验过的人不受影响（他们的名册项<strong>不会被覆盖</strong>，系统会跳过并提示）。
+      </NAlert>
+
+      <!-- ── 一、导入 ─────────────────────────────────── -->
+      <div class="roster__section">
+        导入名册
+      </div>
+      <NAlert type="info" :show-icon="false" :bordered="false" class="roster__intro">
+        表格里需要有 <strong>姓名</strong> 与 <strong>身份证号</strong> 两列，
+        其余按官方模板的列名（学历、联系电话、报考职业…）识别。
+        <strong>表头在第几行不用管</strong>，系统会自己找；认错了可以手动指定。
+        <div class="roster__hint roster__hint--gap">
+          名册是<b>准入名单</b>：学生必须先填写姓名与身份证号、与名册匹配上，才能进入填报。
+          所以这一份名单就是"谁能填、填的是谁"的唯一依据。
+        </div>
+      </NAlert>
+
+      <div class="roster__form">
+        <div class="roster__field">
+          <div class="roster__label">整批归到哪个班级</div>
+          <NSelect
+            v-model:value="orgId"
+            size="small"
+            clearable
+            :loading="orgLoading"
+            placeholder="不指定（名册项不带班级）"
+            :options="classOptions.map(c => ({ label: c.label, value: c.id }))"
+          />
+          <div class="roster__hint">
+            官方模板里没有班级列，所以这里选了就整批都算这个班
+          </div>
+        </div>
+
+        <div class="roster__field">
+          <div class="roster__label">导入方式</div>
+          <NRadioGroup v-model:value="mode" size="small">
+            <NRadioButton value="APPEND">
+              合并导入
+            </NRadioButton>
+            <NRadioButton value="REPLACE">
+              整表替换
+            </NRadioButton>
+          </NRadioGroup>
+          <div class="roster__hint">
+            {{ modeHint }}
+          </div>
+        </div>
+
+        <div class="roster__field">
+          <div class="roster__label">Excel 文件</div>
+          <div class="roster__pick">
+            <!--
+              用原生 input 而不是 n-upload：本场景只需要"选一个本地文件然后自己发请求"，
+              原生 input 拿原始 File 的行为是完全确定的。
+            -->
+            <input
+              ref="fileInput"
+              type="file"
+              accept=".xlsx,.xls"
+              class="roster__file"
+              @change="onFileChange"
+            >
+            <NButton size="small" :disabled="readonly" @click="pickFile">
+              <template #icon>
+                <AppIcon name="upload" :size="15" />
+              </template>
+              选择文件
+            </NButton>
+            <span v-if="file" class="roster__filename" :title="file.name">{{ file.name }}</span>
+            <span v-else class="roster__hint">.xlsx / .xls，≤10MB</span>
+          </div>
+        </div>
+      </div>
+
+      <NSpace class="roster__tool" :size="8" align="center">
+        <NButton
+          type="primary"
+          size="small"
+          :loading="checking"
+          :disabled="!file || readonly"
+          @click="runDryRun(manualHeaderRow)"
+        >
+          {{ report ? '按当前设置重新体检' : '开始体检' }}
+        </NButton>
+        <span class="roster__hint">
+          体检<b>不会写库</b>：先看清楚系统把哪一行当表头、哪几行有问题，确认无误再导入。
+        </span>
+      </NSpace>
+
+      <!-- ── 二、体检报告 ─────────────────────────────── -->
+      <template v-if="report">
+        <NDivider />
+
+        <div class="roster__stats">
+          <div class="roster__stat">
+            <div class="roster__stat-num">{{ report.total }}</div>
+            <div class="roster__stat-label">数据行</div>
+          </div>
+          <div class="roster__stat roster__stat--ok">
+            <div class="roster__stat-num">{{ report.success }}</div>
+            <div class="roster__stat-label">可入库</div>
+          </div>
+          <div class="roster__stat" :class="{ 'roster__stat--bad': report.failed }">
+            <div class="roster__stat-num">{{ report.failed }}</div>
+            <div class="roster__stat-label">被阻断</div>
+          </div>
+          <div class="roster__stat">
+            <div class="roster__stat-num">{{ report.dryRun ? plannedNew : report.created }}</div>
+            <div class="roster__stat-label">{{ report.dryRun ? '将新增' : '已新增' }}</div>
+          </div>
+          <div class="roster__stat">
+            <div class="roster__stat-num">{{ report.dryRun ? plannedUpdate : report.updated }}</div>
+            <div class="roster__stat-label">{{ report.dryRun ? '将更新' : '已更新' }}</div>
+          </div>
+          <div class="roster__stat" :class="{ 'roster__stat--warn': report.warnings.length }">
+            <div class="roster__stat-num">{{ report.warnings.length }}</div>
+            <div class="roster__stat-label">警告（不影响入库）</div>
+          </div>
+        </div>
+
+        <NAlert :type="headerAlertType" :show-icon="false" :bordered="false" class="roster__header-alert">
+          系统把第 <strong>{{ report.headerRow }}</strong> 行当成了表头<template
+            v-if="report.headerRow > 1"
+          >
+            —— 它<strong>前面那 {{ report.headerRow - 1 }} 行</strong>是标题与说明，已跳过，
+            这不是导错了
+          </template>。<span v-if="report.sheetName">（工作表：{{ report.sheetName }}）</span>
+          <div v-if="report.headerCandidates.length > 1" class="roster__hint roster__hint--gap">
+            另外还有 {{ report.headerCandidates.length - 1 }} 行也像表头（命中列数：
+            {{ report.headerCandidates.map(c => `第${c.row}行=${c.score}`).join('，') }}）。
+            如果系统选错了，在下面手动指定。
+          </div>
+          <div class="roster__hint roster__hint--gap">
+            缺了哪些列、多出来的列去了哪，看下面的「列识别结果」——
+            多出来的列不会丢，会原样存进扩展字段。
+          </div>
+        </NAlert>
+
+        <NSpace class="roster__tool" :size="8" align="center">
+          <span class="roster__hint">手动指定表头行：</span>
+          <NInputNumber
+            v-model:value="manualHeaderRow"
+            size="small"
+            :min="1"
+            :max="200"
+            placeholder="行号"
+            class="roster__num"
+          />
+          <NButton size="small" :loading="checking" :disabled="!file" @click="runDryRun(manualHeaderRow)">
+            按这一行重新体检
+          </NButton>
+        </NSpace>
+
+        <!-- 列识别结果 -->
+        <NDataTable
+          :columns="columnColumns"
+          :data="report.columns"
+          :pagination="false"
+          :max-height="200"
+          :bordered="false"
+          size="small"
+          class="roster__table"
+        />
+
+        <!-- 阻断行 -->
+        <div class="roster__section roster__section--bad">
+          没能入库的行（{{ report.errors.length }}）
+        </div>
+        <NEmpty v-if="!report.errors.length" description="没有阻断行" />
+        <NDataTable
+          v-else
+          :columns="errorColumns"
+          :data="report.errors"
+          :pagination="false"
+          :max-height="240"
+          :bordered="false"
+          size="small"
+        />
+
+        <!-- 警告行 -->
+        <div class="roster__section roster__section--warn">
+          有警告、但仍然会入库的行（{{ report.warnings.length }}）
+        </div>
+        <NEmpty v-if="!report.warnings.length" description="没有警告" />
+        <NDataTable
+          v-else
+          :columns="warningColumns"
+          :data="report.warnings"
+          :pagination="false"
+          :max-height="200"
+          :bordered="false"
+          size="small"
+        />
+
+        <div class="roster__footer">
+          <NSpace :size="8">
+            <NButton size="small" @click="resetReport">
+              重新选文件
+            </NButton>
+            <NButton
+              type="primary"
+              size="small"
+              :loading="importing"
+              :disabled="readonly || !report.success"
+              @click="confirmImport"
+            >
+              {{ importButtonText }}
+            </NButton>
+          </NSpace>
+          <div v-if="!report.success" class="roster__hint">
+            没有任何可入库的行，请按上面的原因改好 Excel 再来。
+          </div>
+          <div v-else-if="report.dryRun" class="roster__hint">
+            上面这些数字是<b>预计</b>结果；导入只处理有问题的行以外的那
+            {{ report.success }} 行，其余行改好后可以再次导入（同证件号会合并更新，不会重复）。
+          </div>
+        </div>
+      </template>
+
+      <!-- ── 三、报考范围（从名册聚合，不是"上传计划"）─────── -->
+      <NDivider />
+      <div class="roster__section">
+        报考范围（{{ scope?.rosterCount ?? 0 }} 人）
+        <span v-if="scope?.confirmed">已于 {{ fmtMinute(scope?.updatedAt) }} 确认</span>
+        <span v-else>尚未确认</span>
+      </div>
+      <NAlert type="info" :show-icon="false" :bordered="false" class="roster__intro">
+        这里<strong>不是上传计划</strong>：范围是从名单里「报考职业 / 报考工种 / 报考等级」
+        三列<strong>归出来的</strong>（真实名单里这三列老师已经填好）。
+        确认之后，它就成为"追加名单是否出现范围外报考项"的基准。
+      </NAlert>
+
+      <NSpin :show="scopeLoading">
+        <NEmpty v-if="!scopeGroups.length" description="名册为空，还没有可聚合的报考范围" />
+
+        <template v-else>
+          <NDataTable
+            :columns="scopeColumns"
+            :data="scopeGroups"
+            :pagination="false"
+            :bordered="false"
+            size="small"
+            class="roster__table"
+          />
+
+          <!-- 体检：必须说得出"是哪几个人" -->
+          <template v-if="scopeIssues.length">
+            <div class="roster__section roster__section--warn">
+              一致性体检发现 {{ scopeIssues.length }} 项，请逐项处理或确认忽略
+            </div>
+            <div v-for="is in scopeIssues" :key="is.code + is.title" class="roster__issue">
+              <div class="roster__issue-head">
+                <NTag
+                  size="small"
+                  :bordered="false"
+                  :type="is.level <= 1 ? 'error' : (is.level === 2 ? 'warning' : 'default')"
+                >
+                  级别 {{ is.level }}
+                </NTag>
+                <strong>{{ is.title }}</strong>
+                <NCheckbox
+                  :checked="ignoredCodes.includes(is.code)"
+                  @update:checked="toggleIgnore(is.code)"
+                >
+                  已知悉，本次忽略
+                </NCheckbox>
+              </div>
+              <div class="roster__hint">
+                {{ is.detail }}
+              </div>
+            </div>
+          </template>
+          <NAlert v-else type="success" :show-icon="false" :bordered="false" class="roster__intro">
+            体检通过：没有发现漏填、同职业多等级、范围外职业等问题。
+          </NAlert>
+
+          <div class="roster__footer">
+            <NButton
+              type="primary"
+              size="small"
+              :loading="scopeSaving"
+              :disabled="!canConfirmScope"
+              @click="confirmScope"
+            >
+              确认报考范围
+            </NButton>
+            <div class="roster__hint">
+              <template v-if="!canConfirmScope">
+                还有 {{ unhandledCount }} 项体检问题未处理：请修名单后重新导入，或逐项勾选「已知悉，本次忽略」。
+              </template>
+              <template v-else>
+                确认时会校验"名册里每个人都恰好被分到一组"——
+                漏掉一个人，导出包就会缺人，而打开导出包时看不出来。
+              </template>
+            </div>
+          </div>
+        </template>
+      </NSpin>
+
+      <!-- ── 四、名册明细 ─────────────────────────────── -->
+      <NDivider />
+      <div class="roster__section">
+        名册（{{ total }} 人）
+        <span v-if="stat.t">已核验 {{ stat.bound }} 人 · 已提交 {{ stat.submitted }} 人</span>
+      </div>
+
+      <NSpace class="roster__tool" :size="8" align="center">
+        <NInput
+          v-model:value="query.keyword"
+          size="small"
+          class="roster__search"
+          placeholder="姓名，或粘贴完整身份证号"
+          clearable
+          @keyup.enter="search"
+          @clear="search"
+        />
+        <NSelect
+          v-model:value="query.submitStatus"
+          size="small"
+          class="roster__filter"
+          placeholder="填报状态"
+          clearable
+          :options="submitStatusOptions"
+          @update:value="search"
+        />
+        <NSelect
+          v-model:value="query.bindStatus"
+          size="small"
+          class="roster__filter"
+          placeholder="核验状态"
+          clearable
+          :options="[{ label: '未核验', value: 0 }, { label: '已核验', value: 1 }]"
+          @update:value="search"
+        />
+        <NButton size="small" @click="loadList">
+          <template #icon>
+            <AppIcon name="refresh" :size="15" />
+          </template>
+          刷新
+        </NButton>
+      </NSpace>
+
+      <NDataTable
+        remote
+        :columns="rosterColumns"
+        :data="rows"
+        :loading="listLoading"
+        :row-key="(r) => r.id"
+        :pagination="pagination"
+        :scroll-x="940"
+        :bordered="false"
+        size="small"
+      />
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
 <style lang="scss" scoped>
 .roster {
-  &__task { margin-left: 12px; color: var(--color-text-3); font-weight: 400; }
-  &__alert { margin-bottom: 16px; }
-  &__intro { margin-bottom: 16px; line-height: 1.8; }
-  &__form { margin-bottom: 4px; }
-  &__item { margin-bottom: 8px; }
-  &__pick { display: flex; gap: 10px; align-items: center; }
-  &__file { display: none; }
+  &__task {
+    margin-left: 12px;
+    font-weight: 400;
+    color: #8a8a8a;
+  }
+
+  &__alert {
+    margin-bottom: 16px;
+    line-height: 1.8;
+  }
+
+  &__intro {
+    margin-bottom: 16px;
+    line-height: 1.8;
+  }
+
+  &__form {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+
+  &__field {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__label {
+    margin-bottom: 4px;
+    font-size: 12px;
+    color: #4a4a4a;
+  }
+
+  &__pick {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  &__file {
+    display: none;
+  }
+
   &__filename {
     max-width: 220px;
     overflow: hidden;
     font-size: 13px;
-    color: var(--color-text-1);
+    color: #1f2229;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  &__hint { font-size: 12px; line-height: 1.7; color: var(--color-text-3); }
-  &__muted { font-size: 12px; color: var(--color-text-3); }
-  &__mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
-  &__name { font-weight: 500; color: var(--color-text-1); }
-  &__tool { margin-bottom: 12px; }
-  &__table { margin-bottom: 8px; }
-  &__mapped { color: rgb(var(--primary-6)); }
-  &__code { margin-left: 6px; }
+
+  &__hint {
+    font-size: 12px;
+    line-height: 1.7;
+    color: #8a8a8a;
+
+    &--gap {
+      margin-top: 6px;
+    }
+  }
+
+  &__tool {
+    margin-bottom: 12px;
+  }
+
+  &__table {
+    margin-bottom: 8px;
+  }
+
+  &__num {
+    width: 110px;
+  }
 
   &__section {
     margin: 4px 0 12px;
     font-size: 14px;
     font-weight: 600;
-    color: var(--color-text-1);
+    color: #1f2229;
 
-    span { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--color-text-3); }
+    span {
+      margin-left: 8px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #8a8a8a;
+    }
 
-    &--bad { color: rgb(var(--danger-6)); }
-    &--warn { color: rgb(var(--warning-6)); }
+    &--bad {
+      color: #d03050;
+    }
+
+    &--warn {
+      color: #f0a020;
+    }
   }
 
-  &__stats { margin-bottom: 16px; }
+  &__stats {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
 
   &__stat {
+    flex: 1;
     padding: 10px 8px;
     text-align: center;
-    background: var(--color-fill-2);
+    background: #f5f6f8;
     border-radius: 6px;
 
-    &--ok .roster__stat-num { color: rgb(var(--success-6)); }
-    &--bad .roster__stat-num { color: rgb(var(--danger-6)); }
-    &--warn .roster__stat-num { color: rgb(var(--warning-6)); }
+    &--ok .roster__stat-num {
+      color: #18a058;
+    }
+
+    &--bad .roster__stat-num {
+      color: #d03050;
+    }
+
+    &--warn .roster__stat-num {
+      color: #f0a020;
+    }
   }
 
   &__stat-num {
     font-size: 22px;
     font-weight: 600;
     line-height: 1.3;
-    color: var(--color-text-1);
+    color: #1f2229;
   }
 
-  &__stat-label { font-size: 12px; color: var(--color-text-3); }
+  &__stat-label {
+    font-size: 12px;
+    color: #8a8a8a;
+  }
 
-  &__header-alert { margin-bottom: 12px; line-height: 1.8; }
-  &__footer { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin: 12px 0 4px; }
-  &__search { width: 240px; }
-  &__filter { width: 130px; }
+  &__header-alert {
+    margin-bottom: 12px;
+    line-height: 1.8;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-end;
+    margin: 12px 0 4px;
+  }
+
+  &__search {
+    width: 240px;
+  }
+
+  &__filter {
+    width: 130px;
+  }
 
   /* 体检问题条目：左边一条竖线，让人一眼看出这是"待处理的事情"而不是一段说明 */
   &__issue {
     padding: 8px 12px;
     margin-bottom: 8px;
-    background: var(--color-fill-1);
-    border-left: 3px solid rgb(var(--warning-6));
+    background: #fafafc;
+    border-left: 3px solid #f0a020;
     border-radius: 4px;
   }
 
diff --git a/frontend-pc/src/views/task/index.vue b/frontend-pc/src/views/task/index.vue
index 89fd73f..9f4319d 100644
--- a/frontend-pc/src/views/task/index.vue
+++ b/frontend-pc/src/views/task/index.vue
@@ -1,166 +1,44 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false" class="g-list-card">
-      <template #title>收集任务</template>
-      <template #extra>
-        <span class="task__hint">共 {{ total }} 个任务</span>
-      </template>
-
-      <!--
-        状态切换：**单独一行的 tab**（2026-10-09 客户要求），不再和
-        「新建任务 / 批次号 / 搜索」挤在同一行做成一个个按钮 ——
-        一排长得一样的按钮分不清"哪个是当前视图、哪个是动作"。
-      -->
-      <a-tabs class="task__tabs" :active-key="activeStatusKey" hide-content @change="onStatusChange">
-        <a-tab-pane v-for="t in STATUS_TABS" :key="t.key" :title="t.label" />
-      </a-tabs>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-button v-if="canManage" type="primary" size="small" @click="onAdd">
-            <template #icon><IconPlus /></template>
-            新建任务
-          </a-button>
-        </a-space>
-
-        <a-space wrap>
-          <a-input v-model="query.batchNo" placeholder="批次号" allow-clear class="task__batch"
-            @press-enter="search" />
-          <a-input-search v-model="query.keyword" placeholder="搜索任务名 / 编码 / 专业" allow-clear
-            class="task__search" @search="search" @clear="search" />
-        </a-space>
-      </div>
-
-      <!--
-        列宽是算过的：1366 宽的屏幕上，减去 200 侧栏后内容区约 830px。
-        下面 6 列合计 840 —— 只差 10px，几乎不出现横向滚动条。
-        之前给到 1130px，结果是横向滚动 + 钉住的「操作」列把「状态」整个盖住，
-        表头挤成了「进度操作」。**改列宽前先按这个口径算一遍。**
-
-        ⚠️ 2026-09-29 加「名单管理」时的账（新增一个链接，所以必须从别处挪宽度）：
-          · 「任务」230 → 200、「填报时间」160 → 130，共省出 60
-          · 「操作」300 → 340（草稿态有 7 个链接，会折成两行 —— 这是**故意认下的**：
-            名册是准入名单，没有它整条链路走不通，它必须在一眼能看到的位置）
-          · 合计仍是 840，与改动前一样，所以横向滚动的行为没有变差。
-      -->
-      <!--
-        `y: '100%'`：让 Arco 拆开表头与表体（表体自己滚、表头钉住），
-        配合卡片上的 `.g-list-card` 把分页器留在卡片底部。原因见 `styles/global.scss`。
-      -->
-      <a-table :data="list" :loading="loading" row-key="id" :pagination="pagination"
-        :scroll="{ x: 820, y: '100%' }" @page-change="onPageChange"
-        @page-size-change="onPageSizeChange">
-        <template #columns>
-          <a-table-column title="任务" :width="200" ellipsis tooltip>
-            <template #cell="{ record }">
-              <div class="task__name">{{ record.taskName }}</div>
-              <div class="task__code">{{ record.taskCode }}</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="批次 / 专业" :width="120">
-            <template #cell="{ record }">
-              <div>{{ record.batchNo }}</div>
-              <div class="task__code">{{ record.majorName }}</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="填报时间" :width="130">
-            <template #cell="{ record }">
-              <div class="task__muted">{{ fmt(record.startTime) }} 起</div>
-              <div class="task__muted">{{ fmt(record.endTime) }} 止</div>
-            </template>
-          </a-table-column>
-
-          <!--
-            「进度」并进「状态」列，是为了给操作列腾宽度。
-            1366 的屏幕减去 200 侧栏，表格可用约 824px；草稿态的操作列要放
-            「编辑 / 配置班级 / 材料规则 / 表单设计 / 发布 / 删除」六个链接，
-            需要 300px（240px 会折成两行）。
-            进度在 M1 阶段恒为「待导入名册」，并进来不损失信息。
-          -->
-          <a-table-column title="状态 / 进度" :width="110" align="center">
-            <template #cell="{ record }">
-              <a-tag :color="TASK_STATUS[record.status]?.color ?? 'gray'">
-                {{ TASK_STATUS[record.status]?.text ?? '未知' }}
-              </a-tag>
-              <!--
-                stat 在 M1 阶段后端恒为 null（它依赖名册 M2 与提交单 M3）。
-                这里明确显示「待导入名册」，而不是把 null 当成 0 显示成"0%" ——
-                后者会让人以为"没人填"，而真相是"还没有分母"。
-              -->
-              <div class="task__muted">
-                {{ record.stat ? record.stat.submitRate : '待导入名册' }}
-              </div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="操作" :width="340" align="center" fixed="right">
-            <template #cell="{ record }">
-              <a-space v-if="canManage" size="mini" wrap>
-                <template v-if="record.status === TASK_STATUS_DRAFT">
-                  <a-link @click="onEdit(record)">编辑</a-link>
-                  <a-link @click="onConfigOrgs(record)">配置班级</a-link>
-                  <!-- 名册（准入名单）排在材料之前：没有它，学生连填报页都进不去 -->
-                  <a-link @click="onConfigRoster(record)">名单管理</a-link>
-                  <!-- 文案必须与服务端 40018 的提示「请到『材料规则』里配置…」一字不差，
-                       否则用户按提示找不到地方 -->
-                  <a-link @click="onConfigMaterials(record)">材料规则</a-link>
-                  <a-link @click="onConfigForm(record)">表单设计</a-link>
-                  <a-link @click="onPublish(record)">发布</a-link>
-                  <a-popconfirm content="删除后不可恢复，确认删除这个草稿？" type="warning"
-                    @ok="onDelete(record)">
-                    <a-link status="danger">删除</a-link>
-                  </a-popconfirm>
-                </template>
-
-                <template v-else-if="record.status === TASK_STATUS_COLLECTING">
-                  <a-link @click="onConfigOrgs(record)">配置班级</a-link>
-                  <a-link @click="onConfigRoster(record)">名单管理</a-link>
-                  <a-link @click="onConfigMaterials(record)">材料规则</a-link>
-                  <a-link @click="onConfigForm(record)">表单设计</a-link>
-                  <a-link status="warning" @click="onPause(record)">暂停</a-link>
-                  <a-link @click="onClose(record)">截止</a-link>
-                </template>
-
-                <template v-else-if="record.status === TASK_STATUS_PAUSED">
-                  <a-link @click="onConfigOrgs(record)">配置班级</a-link>
-                  <a-link @click="onConfigRoster(record)">名单管理</a-link>
-                  <a-link @click="onConfigMaterials(record)">材料规则</a-link>
-                  <a-link @click="onConfigForm(record)">表单设计</a-link>
-                  <a-link status="success" @click="onResume(record)">恢复</a-link>
-                  <a-link @click="onClose(record)">截止</a-link>
-                </template>
-
-                <template v-else-if="record.status === TASK_STATUS_CLOSED">
-                  <!-- 截止后名册只能看不能改（抽屉里会说清），所以仍然给入口 -->
-                  <a-link @click="onConfigRoster(record)">查看名单</a-link>
-                  <a-link @click="onArchive(record)">归档</a-link>
-                </template>
-
-                <template v-else>
-                  <a-link @click="onConfigRoster(record)">查看名单</a-link>
-                </template>
-              </a-space>
-              <span v-else class="task__muted">只读</span>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-
-    <TaskFormModal ref="formModalRef" @save-success="load" />
-    <TaskOrgDrawer ref="orgDrawerRef" @save-success="load" />
-    <TaskMaterialDrawer ref="materialDrawerRef" @save-success="load" />
-    <TaskFormSchemaDrawer ref="formDrawerRef" @save-success="load" />
-    <TaskRosterDrawer ref="rosterDrawerRef" @save-success="load" />
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+/**
+ * 收集任务（《03-接口设计》§7.1 ~ §7.5）。
+ *
+ * 这一屏的核心不是"列表 + 增删改"，而是**状态机**：
+ *   草稿 →(发布)→ 收集中 →(暂停)⇄(恢复)→ 已暂停 →(截止)→ 已截止 →(归档)→ 已归档
+ *
+ * 两个容易做错的地方，界面上刻意做了区分：
+ *   1. **「暂停」和「截止」是两件事**：暂停可以恢复、已提交的照常审核；截止不可逆。
+ *      所以暂停用普通确认，截止与归档用"不可逆"措辞的二次确认。
+ *   2. **发布可能被拦**：5 项前置校验都是阻断级。发起前不讲清"还差什么"，
+ *      用户会以为是系统坏了 —— 所以发布失败时把服务端列出的缺项原样展示，
+ *      并把"仅 P1 提醒、可通过 force 跳过"的那一步单独做成二次确认。
+ *
+ * ⚠️ 表格为什么是 `flex-height` 而不是上一版的 `:scroll="{ x, y }"`：
+ *    Naive 的 `n-data-table` **没有 `scroll` 这个 prop**，竖滚靠 `flex-height`
+ *    （或 `max-height`）实现。但目的与上一版完全相同 —— 表体自己滚、分页器钉在卡片底部，
+ *    而不是整张卡片被裁出可视区（`.page-card` / `.page-card__body` 就是为它准备的，
+ *    见 `styles/index.scss` 里那段注释）。
+ *
+ * ⚠️ 单元格是 `render` 渲染的（Naive 的列不支持具名插槽），所以这些元素的样式
+ *    **走内联**：渲染函数里创建的元素拿不到本组件的 scoped 属性。
+ */
+import type { DataTableColumns, PaginationProps } from 'naive-ui'
+import type { CSSProperties } from 'vue'
+import type { BizError } from '@/apis/types'
 import type { TaskVO } from '@/apis/xt/task'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconPlus } from '@arco-design/web-vue/es/icon'
+import {
+  NButton,
+  NCard,
+  NDataTable,
+  NInput,
+  NPopconfirm,
+  NSpace,
+  NTabPane,
+  NTabs,
+  NTag,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref, useTemplateRef } from 'vue'
 import * as taskApi from '@/apis/xt/task'
 import {
   TASK_STATUS,
@@ -169,74 +47,37 @@ import {
   TASK_STATUS_DRAFT,
   TASK_STATUS_PAUSED
 } from '@/apis/xt/task'
-import { useUserStore } from '@/stores'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useUserStore } from '@/stores/user'
+import { tagOf } from '@/utils/tag'
 import TaskFormModal from './TaskFormModal.vue'
 import TaskFormSchemaDrawer from './TaskFormSchemaDrawer.vue'
 import TaskMaterialDrawer from './TaskMaterialDrawer.vue'
 import TaskOrgDrawer from './TaskOrgDrawer.vue'
 import TaskRosterDrawer from './TaskRosterDrawer.vue'
 
-/**
- * 收集任务（《03-接口设计》§7.1 ~ §7.5）。
- *
- * 这一屏的核心不是"列表 + 增删改"，而是**状态机**：
- *   草稿 →(发布)→ 收集中 →(暂停)⇄(恢复)→ 已暂停 →(截止)→ 已截止 →(归档)→ 已归档
- *
- * 两个容易做错的地方，界面上刻意做了区分：
- *   1. **「暂停」和「截止」是两件事**：暂停可以恢复、已提交的照常审核；
- *      截止不可逆。所以暂停用普通确认，截止用"不可逆"措辞的二次确认。
- *   2. **发布可能被拦**：5 项前置校验都是阻断级。发起前不讲清"还差什么"，
- *      用户会以为是系统坏了。所以发布失败时把服务端列出的缺项原样展示，
- *      并把"仅 P1 提醒、可通过 force 跳过"的那一步单独做成二次确认。
- */
 defineOptions({ name: 'Task' })
 
-/** 状态 tab 的一项：tab 的 key 是字符串，发给接口的是 status */
+const message = useMessage()
+const dialog = useDialog()
+const user = useUserStore()
+
+/** 没有 `task:manage` 的人（例如班主任）看得到列表，但一个动作也不给 */
+const canManage = computed(() => user.has('task:manage'))
+
+/** 状态 tab 的一项：tab 的 `name` 是字符串，发给接口的是 `status` */
 interface StatusTab {
   key: string
   label: string
   value: number | undefined
 }
 
-const userStore = useUserStore()
-
-const canManage = computed(() => userStore.permissions.includes('task:manage'))
-
-const loading = ref(false)
-const list = ref<TaskVO[]>([])
-const total = ref(0)
-const statusFilter = ref<number | undefined>(undefined)
-const query = reactive({ pageNum: 1, pageSize: 10, keyword: '', batchNo: '' })
-
-const formModalRef = useTemplateRef('formModalRef')
-const orgDrawerRef = useTemplateRef('orgDrawerRef')
-const materialDrawerRef = useTemplateRef('materialDrawerRef')
-const formDrawerRef = useTemplateRef('formDrawerRef')
-const rosterDrawerRef = useTemplateRef('rosterDrawerRef')
-
-/**
- * 发布被拦时，每个阻断项**去哪里修**。
- *
- * 光说"未设置覆盖班级或班主任"是没用的：用户知道缺什么，但不知道在哪补。
- * 而这 5 项分属 4 个不同的界面（名册 / 材料规则 / 本页的配置班级 / 编辑弹窗），
- * 让用户自己找是纯粹的浪费。
- */
-const BLOCKING_HINTS: Record<number, string> = {
-  40016: '请点本行的「名单管理」，导入本任务的报考名册',
-  40017: '名册缺少「姓名」或「身份证号」列，请到本行的「名单管理」里重新导入',
-  // 必须说"点本行"：「材料规则」也是一个顶层菜单（那个还是里程碑占位页），
-  // 只说「请到『材料规则』里配置」会把人引到那个占位页去
-  40018: '请点本行的「材料规则」，配置至少一项必传材料',
-  40019: '请点本行的「配置班级」，勾选本次收集涉及的班级',
-  40020: '命名规则有问题，请点「编辑」检查文件命名模板'
-}
-
 /**
  * 状态 tab。
  *
- * `key` 必须是字符串（Arco 的 tab key 不支持 undefined），
- * `value` 才是发给接口的 `status` —— 「全部」= 不带 status 参数，
- * 这个映射只在这一处定义，别在别处再写一份 `?? undefined`。
+ * `name` 必须是字符串（Naive 的 tab 不接受 `undefined`），`value` 才是发给接口的
+ * `status` —— 「全部」= 不带 status 参数。这个映射只在这一处定义，
+ * 别在别处再写一份 `?? undefined`。
  */
 const STATUS_TABS: StatusTab[] = [
   { key: 'all', label: '全部', value: undefined },
@@ -246,19 +87,99 @@ const STATUS_TABS: StatusTab[] = [
   { key: String(TASK_STATUS_CLOSED), label: '已截止', value: TASK_STATUS_CLOSED }
 ]
 
+const loading = ref(false)
+const list = ref<TaskVO[]>([])
+const total = ref(0)
+const statusFilter = ref<number | undefined>(undefined)
+const query = reactive({ pageNum: 1, pageSize: 10, keyword: '', batchNo: '' })
+
 /** 当前选中的 tab（由 statusFilter 反推，保持单一数据源） */
-const activeStatusKey = computed(() =>
-  STATUS_TABS.find((t) => t.value === statusFilter.value)?.key ?? 'all'
+const activeStatusKey = computed(
+  () => STATUS_TABS.find((t) => t.value === statusFilter.value)?.key ?? 'all'
 )
 
-const pagination = computed(() => ({
-  current: query.pageNum,
+/**
+ * 子组件通过 `defineExpose` 暴露的方法。
+ *
+ * 这里显式声明而不是用 `InstanceType<typeof X>`：列表页只需要这几个方法，
+ * 声明出来读代码的人一眼就知道父子之间的契约是什么。
+ */
+interface ModalExpose {
+  add: () => void
+  edit: (row: TaskVO) => void
+}
+interface DrawerExpose {
+  open: (task: TaskVO) => void
+}
+
+const formModalRef = useTemplateRef<ModalExpose>('formModalRef')
+const orgDrawerRef = useTemplateRef<DrawerExpose>('orgDrawerRef')
+const materialDrawerRef = useTemplateRef<DrawerExpose>('materialDrawerRef')
+const formDrawerRef = useTemplateRef<DrawerExpose>('formDrawerRef')
+const rosterDrawerRef = useTemplateRef<DrawerExpose>('rosterDrawerRef')
+
+/**
+ * 发布被拦时，每个阻断项**去哪里修**。
+ *
+ * 光说"未设置覆盖班级或班主任"是没用的：用户知道缺什么，但不知道在哪补。
+ * 而这 5 项分属 4 个不同的界面（名册 / 材料规则 / 配置班级 / 编辑弹窗），
+ * 让用户自己找是纯粹的浪费。
+ */
+const BLOCKING_HINTS: Record<number, string> = {
+  40016: '请点本行的「名单管理」，导入本任务的报考名册',
+  40017: '名册缺少「姓名」或「身份证号」列，请到本行的「名单管理」里重新导入',
+  40018: '请点本行的「材料规则」，配置至少一项必传材料',
+  40019: '请点本行的「配置班级」，勾选本次收集涉及的班级',
+  40020: '命名规则有问题，请点「编辑」检查文件命名模板'
+}
+
+/** 发布前的阻断级错误码。**给 force 也绕不过去**，所以界面上不给这个入口 */
+const BLOCKING_CODES = [40016, 40017, 40018, 40019, 40020]
+
+/**
+ * `n-card` 的内容区要变成"能撑满的 flex 列"。
+ *
+ * 不这么写，里面的表格拿不到确定高度，`flex-height` 无从计算 ——
+ * 表现就是分页器被裁在可视区之外（这是上一版踩过的坑）。
+ */
+const contentStyle: CSSProperties = {
+  flex: '1 1 auto',
+  minHeight: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+}
+
+// 渲染函数里的样式常量（见文件头那段说明：scoped 样式对这些元素不生效）
+const S_NAME = 'font-weight: 500; color: #1f2229'
+const S_MUTED = 'font-size: 12px; color: #8a8a8a'
+const S_MONO = 'font-family: ui-monospace, monospace; font-size: 12px; color: #8a8a8a'
+const S_ACTIONS = 'display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center'
+
+const pagination = computed<PaginationProps>(() => ({
+  page: query.pageNum,
   pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
+  itemCount: total.value,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50],
+  prefix: (info) => `共 ${info.itemCount} 条`,
+  // ⚠️ 改每页条数必须重新取数：表格自己也会按 pageSize 切一次数据，
+  // 只改本地条数就会出现"分页器说 50 条/页、表里还是 10 条"的自相矛盾画面
+  onUpdatePage: (page: number) => {
+    query.pageNum = page
+    void load()
+  },
+  onUpdatePageSize: (size: number) => {
+    query.pageSize = size
+    query.pageNum = 1
+    void load()
+  }
 }))
 
+function rowKeyOf(row: TaskVO) {
+  return row.id
+}
+
 function fmt(v: string | null) {
   return v ? v.replace('T', ' ').slice(0, 10) : '—'
 }
@@ -266,15 +187,15 @@ function fmt(v: string | null) {
 async function load() {
   loading.value = true
   try {
-    const res = await taskApi.getTaskList({
+    const page = await taskApi.getTaskList({
       keyword: query.keyword.trim() || undefined,
       batchNo: query.batchNo.trim() || undefined,
       status: statusFilter.value,
       pageNum: query.pageNum,
       pageSize: query.pageSize
     })
-    list.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
+    list.value = page?.list ?? []
+    total.value = page?.total ?? 0
   } finally {
     loading.value = false
   }
@@ -282,35 +203,16 @@ async function load() {
 
 function search() {
   query.pageNum = 1
-  load()
+  void load()
 }
 
-function setStatus(v: number | undefined) {
-  statusFilter.value = v
+/** 状态 tab 切换（Naive 回的是 tab 的 name） */
+function onStatusChange(key: string) {
+  statusFilter.value = STATUS_TABS.find((t) => t.key === key)?.value
   search()
 }
 
-/** 状态 tab 切换 */
-function onStatusChange(key: string | number) {
-  setStatus(STATUS_TABS.find((t) => t.key === String(key))?.value)
-}
-
-/**
- * 改每页条数。
- *
- * ⚠️ 与「操作日志」同一处坑：Arco 表格在 `pagination` 非 false 时**自己也会切数据**，
- * 不重新取数就会出现「分页器说 50 条/页、表里还是 10 条」的自相矛盾画面。
- */
-function onPageSizeChange(size: number) {
-  query.pageSize = size
-  query.pageNum = 1
-  load()
-}
-
-function onPageChange(page: number) {
-  query.pageNum = page
-  load()
-}
+// ── 行内动作 ────────────────────────────────────────
 
 function onAdd() {
   formModalRef.value?.add()
@@ -324,6 +226,10 @@ function onConfigOrgs(row: TaskVO) {
   orgDrawerRef.value?.open(row)
 }
 
+function onConfigRoster(row: TaskVO) {
+  rosterDrawerRef.value?.open(row)
+}
+
 function onConfigMaterials(row: TaskVO) {
   materialDrawerRef.value?.open(row)
 }
@@ -332,13 +238,14 @@ function onConfigForm(row: TaskVO) {
   formDrawerRef.value?.open(row)
 }
 
-function onConfigRoster(row: TaskVO) {
-  rosterDrawerRef.value?.open(row)
-}
-
 async function onDelete(row: TaskVO) {
-  await taskApi.deleteTask(row.id)
-  Message.success('已删除')
+  try {
+    await taskApi.deleteTask(row.id)
+  } catch {
+    // http 层已经弹过原因；这里不关弹窗之外的事，直接返回
+    return false
+  }
+  message.success('已删除')
   await load()
 }
 
@@ -347,45 +254,55 @@ async function onDelete(row: TaskVO) {
  *
  * 先不带 force 试一次：如果服务端说"存在待确认的提醒"，说明 5 项阻断级校验都过了，
  * 只剩 P1 级提醒（比如某班没指定初审人）。这时才用二次确认 + force 重发。
- * 如果返回的是阻断级错误码（40016/40017/40018/40019/40020），
- * 说明根本还没配齐 —— 直接展示缺项，**不给 force 的入口**（给了也绕不过去，只会让人白试）。
+ * 如果返回的是阻断级错误码，说明根本还没配齐 —— 直接展示缺项，
+ * **不给 force 的入口**（给了也绕不过去，只会让人白试）。
  */
 async function onPublish(row: TaskVO) {
   try {
     const res = await taskApi.publishTask(row.id, false)
-    Message.success('已发布，学生可以开始填报了')
-    const warns = res.data?.warnings ?? []
+    message.success('已发布，学生可以开始填报了')
+    const warns = res?.warnings ?? []
     if (warns.length) {
-      Modal.info({ title: '发布时的提醒', content: warns.join('；') })
+      dialog.info({
+        title: '发布时的提醒',
+        content: () => h('div', { style: 'line-height: 1.8' }, warns.join('；')),
+        positiveText: '知道了'
+      })
     }
     await load()
   } catch (e) {
-    const err = e as Error & { bizCode?: number }
+    const err = e as BizError
     const msg = err?.message ?? ''
-    // 阻断级错误码：把缺项讲清楚 + 告诉他去哪里补，不给 force 入口
-    // （给了也绕不过去，只会让人白试一次）
-    const blocking = [40016, 40017, 40018, 40019, 40020]
-    if (err?.bizCode && blocking.includes(err.bizCode)) {
+    if (err?.bizCode && BLOCKING_CODES.includes(err.bizCode)) {
       const hint = BLOCKING_HINTS[err.bizCode]
-      Modal.warning({
+      dialog.warning({
         title: '还不能发布',
-        content: `${msg}${hint ? `\n\n👉 ${hint}` : ''}
-
-这些是阻断级检查，必须补齐后重新发布（点「确定」不会放行）。`,
-        hideCancel: true
+        content: () => h('div', { style: 'line-height: 1.8' }, [
+          h('div', msg),
+          hint ? h('div', { style: 'margin-top: 8px' }, hint) : null,
+          h('div', { style: 'margin-top: 8px' }, '这些是阻断级检查，必须补齐后重新发布（点「确定」不会放行）。')
+        ]),
+        positiveText: '知道了'
       })
       return
     }
     // P1 级提醒：二次确认后可 force
-    Modal.confirm({
+    dialog.warning({
       title: '发现待确认的提醒',
-      content: `${msg}
-
-确认无误后可以继续发布。`,
-      okText: '确认并发布',
-      onOk: async () => {
-        await taskApi.publishTask(row.id, true)
-        Message.success('已发布')
+      content: () => h('div', { style: 'line-height: 1.8' }, [
+        h('div', msg),
+        h('div', { style: 'margin-top: 8px' }, '确认无误后可以继续发布。')
+      ]),
+      positiveText: '确认并发布',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        try {
+          await taskApi.publishTask(row.id, true)
+        } catch {
+          // 失败时保持弹窗打开，让用户看到 http 层弹的原因
+          return false
+        }
+        message.success('已发布')
         await load()
       }
     })
@@ -393,15 +310,21 @@ async function onPublish(row: TaskVO) {
 }
 
 function onPause(row: TaskVO) {
-  const reason = ''
-  Modal.confirm({
+  dialog.warning({
     title: `暂停「${row.taskName}」？`,
-    content: '暂停后学生<b>不能提交</b>，但<b>已提交的照常审核</b>，而且随时可以恢复。'
-      + '适合"名单要改、规则要调"的场景 —— 如果是不再收集了，请用「截止」。',
-    okText: '暂停',
-    onOk: async () => {
-      await taskApi.pauseTask(row.id, reason || undefined)
-      Message.success('已暂停')
+    content: () => h('div', { style: 'line-height: 1.8' }, [
+      h('div', '暂停后学生不能提交，但已提交的照常审核，而且随时可以恢复。'),
+      h('div', { style: 'margin-top: 8px' }, '适合"名单要改、规则要调"的场景 —— 如果是不再收集了，请用「截止」。')
+    ]),
+    positiveText: '暂停',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        await taskApi.pauseTask(row.id)
+      } catch {
+        return false
+      }
+      message.success('已暂停')
       await load()
     }
   })
@@ -409,58 +332,273 @@ function onPause(row: TaskVO) {
 
 async function onResume(row: TaskVO) {
   await taskApi.resumeTask(row.id)
-  Message.success('已恢复')
+  message.success('已恢复')
   await load()
 }
 
 function onClose(row: TaskVO) {
-  Modal.warning({
+  dialog.warning({
     title: `截止「${row.taskName}」？`,
-    content: '截止后学生不能提交，且<b>不可逆</b>（不能再恢复为收集中）。已提交的仍可审核。',
-    okText: '确认截止',
-    hideCancel: false,
-    onBeforeOk: async () => {
-      await taskApi.closeTask(row.id)
-      Message.success('已截止')
+    content: () => h('div', { style: 'line-height: 1.8' }, '截止后学生不能提交，且不可逆（不能再恢复为收集中）。已提交的仍可审核。'),
+    positiveText: '确认截止',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        await taskApi.closeTask(row.id)
+      } catch {
+        return false
+      }
+      message.success('已截止')
       await load()
-      return true
     }
   })
 }
 
 function onArchive(row: TaskVO) {
-  Modal.warning({
+  dialog.warning({
     title: `归档「${row.taskName}」？`,
-    content: '归档后<b>连审核也不能做</b>，整体转为只读。有未审完的单子会被拦下。',
-    okText: '确认归档',
-    hideCancel: false,
-    onBeforeOk: async () => {
-      await taskApi.archiveTask(row.id)
-      Message.success('已归档')
+    content: () => h('div', { style: 'line-height: 1.8' }, '归档后连审核也不能做，整体转为只读。有未审完的单子会被拦下。'),
+    positiveText: '确认归档',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        await taskApi.archiveTask(row.id)
+      } catch {
+        return false
+      }
+      message.success('已归档')
       await load()
-      return true
     }
   })
 }
 
+// ── 列 ─────────────────────────────────────────────
+
+/** 文字按钮（表格里的动作都是这个形态） */
+function link(text: string, onClick: () => void, type: 'primary' | 'warning' | 'error' | 'success' = 'primary') {
+  return h(NButton, { text: true, size: 'small', type, onClick }, { default: () => text })
+}
+
+/**
+ * 操作列按状态给出不同的动作。
+ *
+ * 三个刻意的地方：
+ *   · 名册（准入名单）排在材料之前 —— 没有它，学生连填报页都进不去；
+ *   · 「材料规则」的文案与服务端 40018 的提示一字不差，否则用户按提示找不到地方；
+ *   · 已截止后名册只能看不能改（抽屉里会说清），所以仍然给入口。
+ */
+function actionCell(row: TaskVO) {
+  if (!canManage.value) {
+    return h('span', { style: S_MUTED }, '只读')
+  }
+  const items = []
+  if (row.status === TASK_STATUS_DRAFT) {
+    items.push(link('编辑', () => onEdit(row)))
+    items.push(link('配置班级', () => onConfigOrgs(row)))
+    items.push(link('名单管理', () => onConfigRoster(row)))
+    items.push(link('材料规则', () => onConfigMaterials(row)))
+    items.push(link('表单设计', () => onConfigForm(row)))
+    // 发布是"推进状态"的主动作，但**不**做成成功/告警色：
+    // 它与「暂停 / 恢复」不是一类（那两个才是需要被一眼看见的风险动作）
+    items.push(link('发布', () => void onPublish(row)))
+    items.push(h(NPopconfirm, {
+      onPositiveClick: () => onDelete(row)
+    }, {
+      trigger: () => h(NButton, { text: true, size: 'small', type: 'error' }, { default: () => '删除' }),
+      default: () => '删除后不可恢复，确认删除这个草稿？'
+    }))
+  } else if (row.status === TASK_STATUS_COLLECTING) {
+    items.push(link('配置班级', () => onConfigOrgs(row)))
+    items.push(link('名单管理', () => onConfigRoster(row)))
+    items.push(link('材料规则', () => onConfigMaterials(row)))
+    items.push(link('表单设计', () => onConfigForm(row)))
+    items.push(link('暂停', () => onPause(row), 'warning'))
+    items.push(link('截止', () => onClose(row)))
+  } else if (row.status === TASK_STATUS_PAUSED) {
+    items.push(link('配置班级', () => onConfigOrgs(row)))
+    items.push(link('名单管理', () => onConfigRoster(row)))
+    items.push(link('材料规则', () => onConfigMaterials(row)))
+    items.push(link('表单设计', () => onConfigForm(row)))
+    items.push(link('恢复', () => void onResume(row), 'success'))
+    items.push(link('截止', () => onClose(row)))
+  } else if (row.status === TASK_STATUS_CLOSED) {
+    items.push(link('查看名单', () => onConfigRoster(row)))
+    items.push(link('归档', () => onArchive(row)))
+  } else {
+    items.push(link('查看名单', () => onConfigRoster(row)))
+  }
+  return h('div', { style: S_ACTIONS }, items)
+}
+
+/**
+ * 列宽合计 900 —— 这是"1366 宽的屏幕上尽量不出现横向滚动条"的账
+ * （减去 220 侧栏与内容区内边距后剩约 1100），`scroll-x` 取同一个数。
+ * 改列宽前先按这个口径算一遍，否则钉住的「操作」列会把「状态」整个盖住。
+ */
+const columns = computed<DataTableColumns<TaskVO>>(() => [
+  {
+    title: '任务',
+    key: 'taskName',
+    width: 200,
+    ellipsis: { tooltip: true },
+    render: (row) => h('div', [
+      h('div', { style: S_NAME }, row.taskName),
+      h('div', { style: S_MONO }, row.taskCode)
+    ])
+  },
+  {
+    title: '批次 / 专业',
+    key: 'batchNo',
+    width: 120,
+    render: (row) => h('div', [
+      h('div', row.batchNo),
+      h('div', { style: S_MUTED }, row.majorName)
+    ])
+  },
+  {
+    title: '填报时间',
+    key: 'startTime',
+    width: 130,
+    render: (row) => h('div', [
+      h('div', { style: S_MUTED }, `${fmt(row.startTime)} 起`),
+      h('div', { style: S_MUTED }, `${fmt(row.endTime)} 止`)
+    ])
+  },
+  {
+    title: '状态 / 进度',
+    key: 'status',
+    width: 110,
+    align: 'center',
+    render: (row) => {
+      const tag = tagOf(TASK_STATUS, row.status, '未知')
+      return h('div', [
+        h(NTag, { size: 'small', bordered: false, type: tag.type }, { default: () => tag.text }),
+        // stat 依赖名册与填报单：还没有名册时后端回 null。
+        // 这里如实显示「待导入名册」，而不是把 null 当成 0 显示成"0%"
+        // （后者会让人以为"没人填"，而真相是"还没有分母"）
+        h('div', { style: `${S_MUTED}; margin-top: 4px` }, row.stat ? row.stat.submitRate : '待导入名册')
+      ])
+    }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 340,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => actionCell(row)
+  }
+])
+
 onMounted(load)
 </script>
 
+<template>
+  <NCard :bordered="false" class="page-card" :content-style="contentStyle">
+    <template #header>
+      收集任务
+    </template>
+    <template #header-extra>
+      <span class="task__hint">共 {{ total }} 个任务</span>
+    </template>
+
+    <!--
+      状态切换：**单独一行的 tab**（2026-10-09 客户要求），不再和
+      「新建任务 / 批次号 / 搜索」挤在同一行做成一个个按钮 ——
+      一排长得一样的按钮分不清"哪个是当前视图、哪个是动作"。
+    -->
+    <NTabs class="task__tabs" :value="activeStatusKey" @update:value="onStatusChange">
+      <!--
+        ⚠️ 必须用 `#tab` **插槽**，不能用 `tab="..."` 属性：
+           naive-ui 2.45.3 的 Tab 渲染里，属性值走的是
+           `normalizeVNode(() => render(mergedTab ?? name))`，而这个 thunk 返回的是
+           一个 Text VNode → 被当成块 `createBlock(vnode)` 处理 → 只渲染出一个空注释节点。
+           表现是**一排 tab 一个字都不显示、整行高度 12px**（筛选功能等于消失，不报错）。
+           插槽那条分支是 `normalizeVNode(() => defaultSlot())`，返回数组 → 正常渲染。
+      -->
+      <NTabPane v-for="t in STATUS_TABS" :key="t.key" :name="t.key">
+        <template #tab>
+          {{ t.label }}
+        </template>
+      </NTabPane>
+    </NTabs>
+
+    <!--
+      工具条：**主操作在左、筛选在右**，同一行里所有控件统一默认尺寸。
+      之前全排 `size="small"`，28px 的白底小按钮贴在白底表格上几乎看不出是按钮
+      （客户反馈"按钮不明显"）；默认尺寸是 34px，且全局给默认按钮加深了描边。
+    -->
+    <div class="toolbar">
+      <NSpace :size="8">
+        <NButton v-if="canManage" type="primary" @click="onAdd">
+          <template #icon>
+            <AppIcon name="plus" :size="16" />
+          </template>
+          新建任务
+        </NButton>
+      </NSpace>
+
+      <NSpace :size="8">
+        <NInput
+          v-model:value="query.batchNo"
+          class="task__batch"
+          placeholder="批次号"
+          clearable
+          @keyup.enter="search"
+        />
+        <NInput
+          v-model:value="query.keyword"
+          class="task__search"
+          placeholder="搜索任务名 / 编码 / 专业"
+          clearable
+          @keyup.enter="search"
+        />
+        <NButton type="primary" ghost @click="search">
+          <template #icon>
+            <AppIcon name="search" :size="16" />
+          </template>
+          搜索
+        </NButton>
+      </NSpace>
+    </div>
+
+    <div class="page-card__body">
+      <NDataTable
+        flex-height
+        remote
+        :columns="columns"
+        :data="list"
+        :loading="loading"
+        :row-key="rowKeyOf"
+        :pagination="pagination"
+        :scroll-x="900"
+        :bordered="false"
+        size="small"
+      />
+    </div>
+  </NCard>
+
+  <TaskFormModal ref="formModalRef" @save-success="load" />
+  <TaskOrgDrawer ref="orgDrawerRef" @save-success="load" />
+  <TaskMaterialDrawer ref="materialDrawerRef" @save-success="load" />
+  <TaskFormSchemaDrawer ref="formDrawerRef" @save-success="load" />
+  <TaskRosterDrawer ref="rosterDrawerRef" @save-success="load" />
+</template>
+
 <style lang="scss" scoped>
 .task {
   &__hint {
     font-size: 12px;
-    color: var(--color-text-3);
+    color: var(--xt-text-3);
   }
 
-  /* 状态 tab 自己占一行（下面的工具栏是另一行） */
+  /* 状态 tab 自己占一行（下面的工具栏是另一行）；pane 里没有内容，别让它占位 */
   &__tabs {
-    :deep(.arco-tabs-nav) {
-      margin-bottom: 12px;
-    }
+    /* tab 自带下边框（bar 型），与工具条的下边框离得太近会变成两条挨着的横线 */
+    margin-bottom: 14px;
 
-    :deep(.arco-tabs-nav::before) {
-      background-color: var(--color-border-2);
+    :deep(.n-tab-pane) {
+      display: none;
     }
   }
 
@@ -471,21 +609,5 @@ onMounted(load)
   &__search {
     width: 240px;
   }
-
-  &__name {
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
-
-  &__code {
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
-
-  &__muted {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
 }
 </style>
diff --git a/frontend-pc/src/views/tenant/index.vue b/frontend-pc/src/views/tenant/index.vue
index 48a2a69..46e40b2 100644
--- a/frontend-pc/src/views/tenant/index.vue
+++ b/frontend-pc/src/views/tenant/index.vue
@@ -1,236 +1,112 @@
-<template>
-  <GiPageLayout>
-    <a-card :bordered="false">
-      <template #title>租户</template>
-      <template #extra>
-        <a-space>
-          <span class="tenant__hint">共 {{ total }} 个单位</span>
-          <a-button type="primary" size="small" @click="onAdd">
-            <template #icon><IconPlus /></template>
-            开通租户
-          </a-button>
-        </a-space>
-      </template>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-button v-for="c in statusChips" :key="String(c.value)"
-            :type="statusFilter === c.value ? 'primary' : 'outline'" size="small" @click="setStatus(c.value)">
-            {{ c.label }}
-          </a-button>
-        </a-space>
-        <a-input-search v-model="query.keyword" placeholder="搜索名称或编码" allow-clear class="tenant__search"
-          @search="search" @clear="search" />
-      </div>
-
-      <a-table :data="list" :loading="loading" row-key="id" :pagination="pagination" @page-change="onPageChange">
-        <template #columns>
-          <a-table-column title="单位名称" data-index="tenantName">
-            <template #cell="{ record }">
-              <div class="tenant__name">{{ record.tenantName }}</div>
-              <div class="tenant__id">#{{ record.id }}</div>
-            </template>
-          </a-table-column>
-          <a-table-column title="编码" data-index="tenantCode" :width="130" />
-          <a-table-column title="类型" :width="110">
-            <template #cell="{ record }">
-              {{ TENANT_TYPE_NAMES[record.tenantType] ?? '—' }}
-            </template>
-          </a-table-column>
-          <a-table-column title="联系人" data-index="contactName" :width="120" />
-          <a-table-column title="到期" :width="120">
-            <template #cell="{ record }">
-              {{ (record.expireTime ?? '').slice(0, 10) || '—' }}
-            </template>
-          </a-table-column>
-          <a-table-column title="状态" :width="100">
-            <template #cell="{ record }">
-              <a-tag :color="TENANT_STATUS[record.status]?.color ?? 'gray'">
-                {{ TENANT_STATUS[record.status]?.text ?? '未知' }}
-              </a-tag>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- 开通租户：成功态与表单态共用一个弹窗，弱化"关掉就看不到密码了"的风险 -->
-    <a-modal v-model:visible="visible" :title="created ? '租户已开通' : '开通租户'" :width="620"
-      :mask-closable="false" :closable="!created" :footer="false">
-      <!-- 成功态 -->
-      <template v-if="created">
-        <a-alert type="success" :show-icon="false">
-          <template #title>
-            <strong>「{{ createdName }}」已开通。</strong>
-            系统已自动创建 6 个内置角色，以及首个管理员账号。
-          </template>
-        </a-alert>
-
-        <div class="tenant__pwd-box">
-          <div class="tenant__pwd-label">管理员初始密码</div>
-          <div class="tenant__pwd-row">
-            <code class="tenant__pwd">{{ created.adminInitialPassword }}</code>
-            <a-button type="primary" size="small" @click="copyPassword">
-              <template #icon><IconCopy /></template>
-              复制
-            </a-button>
-          </div>
-          <a-alert type="warning" :show-icon="false" class="tenant__pwd-warn">
-            <strong>这个密码只显示这一次。</strong>
-            关闭窗口后就查不到了 —— 请现在复制并发给管理员，由其首次登录后自行修改。
-          </a-alert>
-        </div>
-
-        <a-descriptions :column="1" size="small">
-          <a-descriptions-item label="租户 ID">{{ created.id }}</a-descriptions-item>
-          <a-descriptions-item label="小程序码参数">{{ created.miniProgramScene }}</a-descriptions-item>
-          <a-descriptions-item label="管理员账号">{{ form.adminUsername }}</a-descriptions-item>
-        </a-descriptions>
-
-        <div class="tenant__footer">
-          <a-button type="primary" @click="closeCreated">我已记下密码</a-button>
-        </div>
-      </template>
-
-      <!-- 表单态 -->
-      <template v-else>
-        <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
-          <a-row :gutter="16">
-            <a-col :span="12">
-              <a-form-item field="tenantName" label="单位名称">
-                <a-input v-model="form.tenantName" placeholder="如 江西机电职业技术学院" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item field="tenantCode" label="租户编码">
-                <a-input v-model="form.tenantCode" placeholder="如 jxjd" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item field="tenantType" label="类型">
-                <a-select v-model="form.tenantType">
-                  <a-option v-for="(name, code) in TENANT_TYPE_NAMES" :key="code" :value="Number(code)">
-                    {{ name }}
-                  </a-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item field="expireTime" label="到期时间">
-                <a-date-picker v-model="form.expireTime" value-format="YYYY-MM-DD" style="width: 100%" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item field="contactName" label="联系人">
-                <a-input v-model="form.contactName" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item field="contactPhone" label="联系电话">
-                <a-input v-model="form.contactPhone" allow-clear />
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-divider orientation="left">首个管理员</a-divider>
-
-          <a-row :gutter="16">
-            <a-col :span="8">
-              <a-form-item field="adminUsername" label="登录账号">
-                <a-input v-model="form.adminUsername" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item field="adminRealName" label="姓名">
-                <a-input v-model="form.adminRealName" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item field="adminPhone" label="手机号">
-                <a-input v-model="form.adminPhone" allow-clear />
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-alert type="info" :show-icon="false">
-            <template #title>
-              提交后会一次性完成：<strong>建租户</strong> → <strong>发放 6 个内置角色</strong> →
-              <strong>创建首个管理员</strong>。初始密码在下一步显示，<strong>只显示一次</strong>。
-            </template>
-          </a-alert>
-        </a-form>
-
-        <div class="tenant__footer">
-          <a-space>
-            <a-button @click="visible = false">取消</a-button>
-            <a-button type="primary" :loading="submitting" @click="onSubmit">确认开通</a-button>
-          </a-space>
-        </div>
-      </template>
-    </a-modal>
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
 import type { TenantCreateResult, TenantVO } from '@/apis/xt/tenant'
-import { Message } from '@arco-design/web-vue'
-import { IconCopy, IconPlus } from '@arco-design/web-vue/es/icon'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NDataTable,
+  NDatePicker,
+  NDescriptions,
+  NDescriptionsItem,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NSelect,
+  NSpace,
+  NTag,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref } from 'vue'
 import * as tenantApi from '@/apis/xt/tenant'
 import { TENANT_STATUS, TENANT_TYPE_NAMES } from '@/apis/xt/tenant'
+import { listPagination } from '@/composables/pagination'
+import AppIcon from '@/icons/AppIcon.vue'
+import { fmtDate } from '@/utils/format'
+import { tagOf } from '@/utils/tag'
 
 /**
  * 租户管理（仅平台运营）。
  *
  * 两个容易做错的地方：
- *   1. **初始密码只返回一次** —— 成功后不能弹个 toast 就完事，
- *      必须停下来让用户当场记下／复制，并明确告知"关掉就再也看不到"。
- *   2. **租户列表是跨租户的**（sys_tenant 没有 tenant_id），
- *      所以权限把关全在服务端；学校管理员调它会拿到 40301，前端也据此隐藏入口。
+ *   1. **初始密码只返回一次** —— 成功后不能弹个 toast 就完事，必须停下来让用户当场
+ *      复制下来，并明确告知"关掉就再也看不到"（库里存的是 BCrypt 哈希，谁也还原不出来）。
+ *   2. **租户列表是跨租户的**（`sys_tenant` 没有 `tenant_id`），权限把关全在服务端；
+ *      学校管理员调它会拿到 40301，左侧菜单也不会给他这一项。
+ *
+ * ⚠️ 列表**没有操作列**：不提供编辑 / 停用入口（客户 2026-10 走查确认的口径）。
  */
 defineOptions({ name: 'Tenant' })
 
+const message = useMessage()
+
 const loading = ref(false)
 const submitting = ref(false)
 const list = ref<TenantVO[]>([])
 const total = ref(0)
 const statusFilter = ref<number | undefined>(undefined)
-const query = reactive({ pageNum: 1, pageSize: 10, keyword: '' })
+const keyword = ref('')
+
+const query = reactive({ pageNum: 1, pageSize: 10 })
 
 const visible = ref(false)
 const created = ref<TenantCreateResult | null>(null)
 const createdName = ref('')
-const formRef = useTemplateRef('formRef')
+const formRef = ref<FormInst | null>(null)
 
-const getInitForm = () => ({
-  tenantName: '',
-  tenantCode: '',
-  tenantType: 1,
-  contactName: '',
-  contactPhone: '',
-  expireTime: '',
-  adminUsername: 'admin',
-  adminRealName: '',
-  adminPhone: ''
-})
-
-const form = reactive(getInitForm())
-
-const rules: FormInstance['rules'] = {
-  tenantName: [{ required: true, message: '请填写单位名称' }],
-  tenantCode: [
-    { required: true, message: '请填写租户编码' },
-    { match: /^[a-z][a-z0-9_-]{1,31}$/, message: '小写字母开头，后接小写字母、数字、下划线或短横线' }
-  ],
-  tenantType: [{ required: true, message: '请选择类型' }],
-  expireTime: [{ required: true, message: '请选择到期时间' }],
-  contactName: [{ required: true, message: '请填写联系人' }],
-  contactPhone: [{ required: true, message: '请填写联系电话' }],
-  adminUsername: [{ required: true, message: '请填写管理员账号' }],
-  adminRealName: [{ required: true, message: '请填写管理员姓名' }],
-  adminPhone: [{ required: true, message: '请填写管理员手机号' }]
+function emptyForm() {
+  return {
+    tenantName: '',
+    tenantCode: '',
+    tenantType: 1,
+    contactName: '',
+    contactPhone: '',
+    // 用 null 而不是 ''：n-date-picker 清空时会回传 null，
+    // 声明成 string 会在 v-model 上产生类型打架（运行期没事，但 vue-tsc 会红）
+    expireTime: null as string | null,
+    adminUsername: 'admin',
+    adminRealName: '',
+    adminPhone: ''
+  }
 }
 
+const form = reactive(emptyForm())
+
+/**
+ * ⚠️ 数字字段的规则必须显式写 `type: 'number'`。
+ *
+ * 只有 `required` 时，async-validator 会把 `rule.type` 默认成 `'string'`
+ * （`Schema.validate` 里 `rule.type = this.getType(rule)`），接着按
+ * `typeof value !== rule.type` 判错；而 `tenantType` 是数字（1/2/3）——
+ * 结果是「确认开通」永远提交不出去，且错误信息会被 `#feedback` 插槽挡掉，
+ * 界面上只剩一个红框、没有任何说明。
+ */
+const rules: FormRules = {
+  tenantName: [{ required: true, message: '请填写单位名称', trigger: ['blur', 'input'] }],
+  tenantCode: [
+    { required: true, message: '请填写租户编码', trigger: ['blur', 'input'] },
+    {
+      pattern: /^[a-z][a-z0-9_-]{1,31}$/,
+      message: '小写字母开头，后接小写字母、数字、下划线或短横线',
+      trigger: ['blur', 'input']
+    }
+  ],
+  tenantType: [{ type: 'number', required: true, message: '请选择类型', trigger: ['change'] }],
+  expireTime: [{ required: true, message: '请选择到期时间', trigger: ['change'] }],
+  contactName: [{ required: true, message: '请填写联系人', trigger: ['blur', 'input'] }],
+  contactPhone: [{ required: true, message: '请填写联系电话', trigger: ['blur', 'input'] }],
+  adminUsername: [{ required: true, message: '请填写管理员账号', trigger: ['blur', 'input'] }],
+  adminRealName: [{ required: true, message: '请填写管理员姓名', trigger: ['blur', 'input'] }],
+  adminPhone: [{ required: true, message: '请填写管理员手机号', trigger: ['blur', 'input'] }]
+}
+
+const typeOptions = Object.entries(TENANT_TYPE_NAMES).map(([code, name]) => ({
+  label: name,
+  value: Number(code)
+}))
+
+/** 状态筛选用「按钮组」而不是下拉：平台运营看的就是这几个状态，一眼能选完 */
 const statusChips = computed(() => [
   { label: `全部 ${total.value}`, value: undefined },
   { label: '正常', value: 1 },
@@ -238,85 +114,139 @@ const statusChips = computed(() => [
   { label: '已停用', value: 0 }
 ])
 
-const pagination = computed(() => ({
-  current: query.pageNum,
+const columns: DataTableColumns<TenantVO> = [
+  {
+    title: '单位名称',
+    key: 'tenantName',
+    render: (row) => h('div', null, [
+      h('div', null, row.tenantName),
+      h('div', { class: 'tenant__id' }, `#${row.id}`)
+    ])
+  },
+  { title: '编码', key: 'tenantCode', width: 140 },
+  {
+    title: '类型',
+    key: 'tenantType',
+    width: 110,
+    render: (row) => TENANT_TYPE_NAMES[row.tenantType] ?? '—'
+  },
+  { title: '联系人', key: 'contactName', width: 120, render: (row) => row.contactName || '—' },
+  {
+    title: '到期',
+    key: 'expireTime',
+    width: 120,
+    render: (row) => fmtDate(row.expireTime)
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    render: (row) => {
+      const s = tagOf(TENANT_STATUS, row.status)
+      return h(NTag, { size: 'small', bordered: false, type: s.type }, { default: () => s.text })
+    }
+  }
+]
+
+/**
+ * 分页器统一走 `listPagination`（见 `@/composables/pagination`）——
+ * 手写 `prefix` 的类型最容易写错（naive 给的 `itemCount` 是 `number | undefined`）。
+ * 事件在模板上处理：`@update:page` 与 `@update:page-size` 两个都要管。
+ */
+const pagination = computed(() => listPagination({
+  page: query.pageNum,
   pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true
+  itemCount: total.value,
+  pageSizes: [10, 20, 50]
 }))
 
-async function load() {
+function onPage(page: number): void {
+  query.pageNum = page
+  void load()
+}
+
+function onPageSize(size: number): void {
+  query.pageSize = size
+  query.pageNum = 1
+  void load()
+}
+
+async function load(): Promise<void> {
   loading.value = true
   try {
-    const res = await tenantApi.getTenantList({
+    const page = await tenantApi.getTenantList({
       pageNum: query.pageNum,
       pageSize: query.pageSize,
-      keyword: query.keyword.trim() || undefined,
+      keyword: keyword.value.trim() || undefined,
       status: statusFilter.value
     })
-    list.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
+    list.value = page.list ?? []
+    total.value = page.total ?? 0
   } finally {
     loading.value = false
   }
 }
 
-function search() {
+function search(): void {
   query.pageNum = 1
-  load()
+  void load()
 }
 
-function setStatus(v: number | undefined) {
+function setStatus(v: number | undefined): void {
   statusFilter.value = v
   search()
 }
 
-function onPageChange(page: number) {
-  query.pageNum = page
-  load()
-}
-
-function onAdd() {
-  Object.assign(form, getInitForm())
+function onAdd(): void {
+  Object.assign(form, emptyForm())
   created.value = null
   visible.value = true
 }
 
-async function onSubmit() {
-  const valid = await formRef.value?.validate()
-  if (valid) return
+async function onSubmit(): Promise<void> {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
 
   submitting.value = true
   try {
     const res = await tenantApi.createTenant({
-      ...form,
       tenantName: form.tenantName.trim(),
       tenantCode: form.tenantCode.trim().toLowerCase(),
+      tenantType: form.tenantType,
       contactName: form.contactName.trim(),
       contactPhone: form.contactPhone.trim(),
+      expireTime: form.expireTime ?? '',
       adminUsername: form.adminUsername.trim(),
       adminRealName: form.adminRealName.trim(),
       adminPhone: form.adminPhone.trim()
     })
     createdName.value = form.tenantName.trim()
-    created.value = res.data
+    created.value = res
     await load()
+  } catch {
+    // 提示已由 http 层给出（如租户编码重复）
   } finally {
     submitting.value = false
   }
 }
 
-async function copyPassword() {
-  if (!created.value) return
+async function copyPassword(): Promise<void> {
+  const pwd = created.value?.adminInitialPassword
+  if (!pwd) {
+    return
+  }
   try {
-    await navigator.clipboard.writeText(created.value.adminInitialPassword)
-    Message.success('已复制到剪贴板')
+    await navigator.clipboard.writeText(pwd)
+    message.success('已复制到剪贴板')
   } catch {
-    Message.warning('浏览器不允许自动复制，请手动选中后复制')
+    message.warning('浏览器不允许自动复制，请手动选中后复制')
   }
 }
 
-function closeCreated() {
+function closeCreated(): void {
   created.value = null
   visible.value = false
 }
@@ -324,71 +254,281 @@ function closeCreated() {
 onMounted(load)
 </script>
 
-<style lang="scss" scoped>
-.tenant {
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+<template>
+  <NCard class="page-card tenant" :bordered="false" size="small">
+    <template #header>
+      租户
+    </template>
+    <template #header-extra>
+      <span class="tenant__hint">共 {{ total }} 个单位</span>
+    </template>
 
-  &__search {
-    width: 220px;
-    margin-left: auto;
-  }
+    <!--
+      工具条：主操作在左、筛选在右（与收集任务页同一口径）。
+      同一行里所有控件统一**默认尺寸** —— 全是 28px 的小控件挤在 52px 的一行里，
+      白底小按钮贴在白底卡片上几乎看不出是按钮。
+    -->
+    <div class="toolbar">
+      <NSpace :size="8">
+        <NButton type="primary" @click="onAdd">
+          <template #icon>
+            <AppIcon name="plus" :size="16" />
+          </template>
+          开通租户
+        </NButton>
+      </NSpace>
 
-  &__name {
-    font-weight: 600;
-  }
+      <NSpace :size="8" align="center">
+        <NButton
+          v-for="c in statusChips"
+          :key="String(c.value)"
+          :type="statusFilter === c.value ? 'primary' : 'default'"
+          @click="setStatus(c.value)"
+        >
+          {{ c.label }}
+        </NButton>
+        <NInput
+          v-model:value="keyword"
+          clearable
+          placeholder="搜索名称或编码"
+          class="tenant__search"
+          @keyup.enter="search"
+          @clear="search"
+        />
+      </NSpace>
+    </div>
 
-  &__id {
-    margin-top: 2px;
-    font-size: 11px;
-    color: var(--color-text-3);
-  }
+    <div class="page-card__body">
+      <!--
+        ⚠️ Naive 的表格**没有** `scroll` prop（那是 Arco 的 API）：
+           横向用 `:scroll-x`（数值），纵向靠 `flex-height` + 高度链。
+      -->
+      <NDataTable
+        flex-height
+        style="height: 100%"
+        remote
+        :columns="columns"
+        :data="list"
+        :loading="loading"
+        :row-key="row => row.id"
+        :scroll-x="800"
+        :pagination="pagination"
+        size="small"
+        @update:page="onPage"
+        @update:page-size="onPageSize"
+      />
+    </div>
 
-  &__pwd-box {
-    padding: 16px;
-    margin: 16px 0;
-    background: var(--color-fill-1);
-    border: 1px solid var(--color-border-2);
-    border-radius: var(--border-radius-large);
-  }
+    <!-- 开通租户：成功态与表单态共用一个弹窗，弱化"关掉就看不到密码了"的风险 -->
+    <NModal
+      v-model:show="visible"
+      preset="card"
+      :title="created ? '租户已开通' : '开通租户'"
+      :style="{ width: created ? 'min(560px, calc(100vw - 32px))' : 'min(620px, calc(100vw - 32px))' }"
+      :mask-closable="false"
+      :closable="!created"
+    >
+      <!-- 成功态：初始密码只显示这一次 -->
+      <template v-if="created">
+        <NAlert type="success" :show-icon="false">
+          <strong>「{{ createdName }}」已开通。</strong>
+          系统已自动创建内置角色，以及首个管理员账号。
+        </NAlert>
 
-  &__pwd-label {
-    margin-bottom: 8px;
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+        <div class="tenant__pwd-box">
+          <div class="tenant__pwd-label">
+            管理员初始密码
+          </div>
+          <div class="tenant__pwd-row">
+            <code class="tenant__pwd">{{ created.adminInitialPassword }}</code>
+            <NButton type="primary" size="small" @click="copyPassword">
+              复制
+            </NButton>
+          </div>
+          <NAlert type="warning" :show-icon="false" class="tenant__pwd-warn">
+            <strong>这个密码只显示这一次。</strong>
+            关闭窗口后就查不到了 —— 请现在复制并发给管理员，由其首次登录后自行修改。
+          </NAlert>
+        </div>
 
-  &__pwd-row {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
+        <NDescriptions :column="1" size="small" label-placement="left">
+          <NDescriptionsItem label="租户 ID">{{ created.id }}</NDescriptionsItem>
+          <NDescriptionsItem label="小程序码参数">{{ created.miniProgramScene }}</NDescriptionsItem>
+          <NDescriptionsItem label="管理员账号">{{ form.adminUsername }}</NDescriptionsItem>
+        </NDescriptions>
 
-  &__pwd {
-    flex: 1;
-    padding: 10px 14px;
-    font-family: Consolas, Menlo, monospace;
-    font-size: 19px;
-    font-weight: 700;
-    letter-spacing: 0.14em;
-    user-select: all;
-    background: #fff;
-    border: 1px solid var(--color-border-3);
-    border-radius: var(--border-radius-medium);
-  }
+        <div class="tenant__footer">
+          <NButton type="primary" @click="closeCreated">
+            我已记下密码
+          </NButton>
+        </div>
+      </template>
 
-  &__pwd-warn {
-    margin-top: 12px;
-  }
+      <!-- 表单态 -->
+      <template v-else>
+        <NForm ref="formRef" :model="form" :rules="rules" label-placement="top">
+          <div class="tenant__grid">
+            <NFormItem label="单位名称" path="tenantName">
+              <NInput v-model:value="form.tenantName" placeholder="如 江西机电职业技术学院" clearable />
+            </NFormItem>
+            <NFormItem label="租户编码" path="tenantCode">
+              <NInput v-model:value="form.tenantCode" placeholder="如 jxjd（小写字母开头）" clearable />
+            </NFormItem>
+            <NFormItem label="类型" path="tenantType">
+              <NSelect v-model:value="form.tenantType" :options="typeOptions" />
+            </NFormItem>
+            <NFormItem label="到期时间" path="expireTime">
+              <NDatePicker
+                v-model:formatted-value="form.expireTime"
+                type="date"
+                value-format="yyyy-MM-dd"
+                class="tenant__full"
+              />
+            </NFormItem>
+            <NFormItem label="联系人" path="contactName">
+              <NInput v-model:value="form.contactName" clearable />
+            </NFormItem>
+            <NFormItem label="联系电话" path="contactPhone">
+              <NInput v-model:value="form.contactPhone" clearable />
+            </NFormItem>
+          </div>
 
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 16px;
-    margin-top: 16px;
-    border-top: 1px solid var(--color-border-2);
-  }
+          <div class="tenant__sub">
+            <div class="section-title">
+              首个管理员
+            </div>
+            <div class="tenant__grid tenant__grid--3">
+              <NFormItem label="登录账号" path="adminUsername">
+                <NInput v-model:value="form.adminUsername" clearable />
+              </NFormItem>
+              <NFormItem label="姓名" path="adminRealName">
+                <NInput v-model:value="form.adminRealName" clearable />
+              </NFormItem>
+              <NFormItem label="手机号" path="adminPhone">
+                <NInput v-model:value="form.adminPhone" clearable />
+              </NFormItem>
+            </div>
+          </div>
+
+          <NAlert type="info" :show-icon="false">
+            提交后会一次性完成：<strong>建租户</strong> → <strong>发放内置角色</strong> →
+            <strong>创建首个管理员</strong>。初始密码在下一步显示，<strong>只显示一次</strong>。
+          </NAlert>
+        </NForm>
+
+        <div class="tenant__footer">
+          <NSpace justify="end">
+            <NButton @click="visible = false">
+              取消
+            </NButton>
+            <NButton type="primary" :loading="submitting" @click="onSubmit">
+              确认开通
+            </NButton>
+          </NSpace>
+        </div>
+      </template>
+    </NModal>
+  </NCard>
+</template>
+
+<style scoped>
+/**
+ * 页面就是一张卡片（`.page-card` 提供撑满内容区的高度链）。
+ *
+ * ⚠️ Naive 的 `.n-card` 本身已是 `display:flex; flex-direction:column`，
+ *    所以只要把**内容区**也变成"能撑满的 flex 列"，下面的表格才拿得到确定高度，
+ *    `flex-height` 才有意义 —— 少了这一条，分页器会被顶出卡片底部
+ *    （"DOM 里有、屏幕上看不到"）。
+ */
+.tenant :deep(.n-card-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.tenant__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.tenant__search {
+  width: 220px;
+}
+
+.tenant__id,
+:deep(.tenant__id) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.tenant__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 16px;
+}
+
+.tenant__grid--3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.tenant__full {
+  width: 100%;
+}
+
+/**
+ * 「首个管理员」子块。
+ *
+ * ⚠️ 这里**刻意不用 `NCard`**：弹窗本身已经是卡片，卡里再套一张卡会出现
+ *    两层"浮起 + 浅灰头"，比不分组还乱。改用浅灰底 + 弱描边的小格子
+ *    （与工作台的四格看板同一套写法）。
+ */
+.tenant__sub {
+  padding: 14px 16px 16px;
+  margin-bottom: 16px;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.tenant__pwd-box {
+  padding: 12px 14px;
+  margin: 14px 0;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.tenant__pwd-label {
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.tenant__pwd-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.tenant__pwd {
+  flex: 1;
+  padding: 6px 10px;
+  font-size: 15px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: 0.06em;
+  background: #fff;
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 4px;
+}
+
+.tenant__pwd-warn {
+  margin-top: 10px;
+}
+
+.tenant__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
 }
 </style>
diff --git a/frontend-pc/src/views/user/UserFormModal.vue b/frontend-pc/src/views/user/UserFormModal.vue
index a5fa1e6..a53103d 100644
--- a/frontend-pc/src/views/user/UserFormModal.vue
+++ b/frontend-pc/src/views/user/UserFormModal.vue
@@ -1,159 +1,46 @@
-<template>
-  <a-modal v-model:visible="visible" :title="created ? '账号已创建' : title" :width="560"
-    :mask-closable="false" :closable="!created" :footer="false">
-    <!-- ── 成功态：初始密码只显示这一次 ──────────────────── -->
-    <template v-if="created">
-      <a-alert type="success" :show-icon="false">
-        <template #title>
-          <strong>「{{ created.realName }}」的账号已创建。</strong>
-          请把下面的初始密码发给本人。
-        </template>
-      </a-alert>
-
-      <div class="user-form__pwd-box">
-        <div class="user-form__pwd-label">初始密码</div>
-        <div class="user-form__pwd-row">
-          <code class="user-form__pwd">{{ created.initialPassword }}</code>
-          <a-button type="primary" size="small" @click="copyPassword">
-            <template #icon><IconCopy /></template>
-            复制
-          </a-button>
-        </div>
-        <a-alert type="warning" :show-icon="false" class="user-form__pwd-warn">
-          <strong>这个密码只显示这一次。</strong>
-          关闭窗口后就查不到了 —— 库里存的是不可逆的哈希，忘了只能重新重置。
-        </a-alert>
-      </div>
-
-      <a-descriptions :column="1" size="small">
-        <a-descriptions-item label="登录账号">{{ created.username }}</a-descriptions-item>
-        <a-descriptions-item label="姓名">{{ created.realName }}</a-descriptions-item>
-        <a-descriptions-item label="角色">{{ created.roleNames.join('、') || '—' }}</a-descriptions-item>
-      </a-descriptions>
-
-      <div class="user-form__footer">
-        <a-button type="primary" @click="closeCreated">我已记下密码</a-button>
-      </div>
-    </template>
-
-    <!-- ── 表单态 ──────────────────────────────────────── -->
-    <template v-else>
-      <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="username" label="登录账号">
-              <a-input v-model="form.username" :disabled="isEdit" placeholder="如 zhangsan" allow-clear />
-              <template #extra>
-                <span v-if="isEdit" class="user-form__hint">
-                  登录名不可修改：改了会让历史通知、导出包里的账号全对不上。
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="realName" label="姓名">
-              <a-input v-model="form.realName" placeholder="如 张三" :max-length="64" allow-clear />
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="12">
-            <a-form-item field="phone" label="手机号">
-              <a-input v-model="form.phone" placeholder="11 位手机号" :max-length="11" allow-clear />
-              <template #extra>
-                <span class="user-form__hint">加密存储，列表只显示脱敏值。</span>
-              </template>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="orgId" label="所属组织">
-              <a-tree-select v-model="form.orgId" :data="orgTree" :field-names="ORG_FIELD_NAMES"
-                placeholder="不选表示不归属任何组织" allow-clear />
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item label="用户类型">
-              <a-space>
-                <a-tag v-if="derivedUserType" color="arcoblue">
-                  {{ USER_TYPE_NAMES[derivedUserType] ?? derivedUserType }}
-                </a-tag>
-                <span v-else-if="conflictTypes.length > 1" class="user-form__hint">
-                  所选角色分属不同类别（{{ conflictTypes.join('、') }}），请只选同一类的角色
-                </span>
-                <span v-else class="user-form__hint">选择角色后自动确定</span>
-              </a-space>
-              <template #extra>
-                <span class="user-form__hint">
-                  由所选角色自动决定，不需要手选 —— 这样不会出现「学生拿着学校管理员权限」这类账号。
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="24">
-            <a-form-item field="roleCodes" label="角色">
-              <a-checkbox-group v-model="form.roleCodes">
-                <a-checkbox v-for="r in roleOptions" :key="r.value" :value="r.value">
-                  {{ r.label }}
-                </a-checkbox>
-              </a-checkbox-group>
-              <template #extra>
-                <span class="user-form__hint">
-                  可多选，权限取并集。内置角色的权限由系统决定，不能在这里改。
-                </span>
-              </template>
-            </a-form-item>
-          </a-col>
-
-          <a-col v-if="isEdit" :span="24">
-            <a-form-item field="status" label="状态">
-              <a-switch v-model="form.status" :checked-value="1" :unchecked-value="0" />
-              <span class="user-form__hint user-form__hint--inline">
-                {{ form.status === 1 ? '正常，可登录' : '停用，不能登录（数据保留）' }}
-              </span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-
-      <div class="user-form__footer">
-        <a-space>
-          <a-button @click="close">取消</a-button>
-          <a-button type="primary" :loading="submitting" @click="confirm">
-            {{ isEdit ? '保存' : '创建账号' }}
-          </a-button>
-        </a-space>
-      </div>
-    </template>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
-import type { FormInstance } from '@arco-design/web-vue'
+import type { FormInst, FormRules, TreeSelectOption } from 'naive-ui'
 import type { OrgTreeVO } from '@/apis/xt/org'
-import { Message } from '@arco-design/web-vue'
-import { IconCopy } from '@arco-design/web-vue/es/icon'
+import type { RoleOption } from '@/apis/xt/role'
+import type { UserVO } from '@/apis/xt/user'
+import {
+  NAlert,
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NDescriptions,
+  NDescriptionsItem,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NSpace,
+  NSwitch,
+  NTag,
+  NTreeSelect,
+  useMessage
+} from 'naive-ui'
+import { computed, reactive, ref, watch } from 'vue'
 import { getOrgTree } from '@/apis/xt/org'
+import { deriveUserType, getRoleOptions, ROLE_USER_TYPE_NAMES } from '@/apis/xt/role'
 import * as userApi from '@/apis/xt/user'
-import { deriveUserType, PLATFORM_ROLE_OPTIONS, ROLE_TO_USER_TYPE, SCHOOL_ROLE_OPTIONS, USER_TYPE_NAMES } from '@/apis/xt/user'
-import { useUserStore } from '@/stores'
 
 /**
  * 账号新增 / 编辑弹窗。
  *
- * 三处值得留意的设计：
- *   1. **初始密码只显示一次** —— 创建成功后不弹 toast 就完事，而是把弹窗切成成功态，
+ * 四处值得留意的设计：
+ *   1. **初始密码只显示一次** —— 创建成功后不弹个 toast 就完事，而是把弹窗切成成功态，
  *      停下来让用户当场抄下来。库里是 BCrypt 哈希，关了窗口谁也还原不出来。
- *   2. **角色选项按租户过滤** —— 平台运营角色只对平台租户显示。学校管理员
- *      拿到它会直接越权到平台级（能开通租户、看全平台租户列表），
- *      所以前端不显示、后端也会用 40301 拒绝。
- *   3. **用户类型不让用户选，而是从角色推导** —— 二者一对一绑定，
- *      让用户分别选就会产生"学生 + 学校管理员"这种自相矛盾的账号，
- *      而服务端还会因此拒掉整个提交。改成推导后这类组合在界面上产生不了。
+ *   2. **角色选项按租户过滤**（`getRoleOptions` 只给"启用且可发放"的）——
+ *      平台运营角色在学校租户里发不出去（服务端 40301），所以前端不显示它，
+ *      而不是让人选完再收到一个错误。
+ *   3. **用户类型不让用户选，从角色推导** —— 二者一对一绑定，让用户分别选就会产生
+ *      "学生 + 学校管理员"这种自相矛盾的账号，而服务端还会因此拒掉整个提交。
+ *   4. **编辑时手机号必须重填** —— 列表接口只返回脱敏值（`138****8888`），
+ *      拿它回填会把脱敏串写进库，比"让用户重填一次"糟糕得多。
  *
- * `tenantId` 由父页面传入，**只有平台运营的页面会给值**：表示"这个账号建到哪所学校下"
- * （服务端按请求头 `X-Tenant-Id` 摆租户上下文）。它同时决定角色的可选范围：
- * 给某所学校建账号时只能发**学校那套角色**，发 PLATFORM_ADMIN 会被服务端拒（40301）。
+ * `tenantId` 由父页面传入，**只有平台运营会传值**：它既是"账号建到哪所学校"，
+ * 也决定角色候选的范围（给某校建账号时只能发学校那套角色）。
  */
 defineOptions({ name: 'UserFormModal' })
 
@@ -165,172 +52,175 @@ const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
-const userStore = useUserStore()
+const message = useMessage()
 
 const visible = ref(false)
 const submitting = ref(false)
 const detailId = ref<number | null>(null)
 const orgTree = ref<OrgTreeVO[]>([])
+const roleOptions = ref<RoleOption[]>([])
 const created = ref<{ username: string, realName: string, initialPassword: string, roleNames: string[] } | null>(null)
-
-const formRef = useTemplateRef('formRef')
+const formRef = ref<FormInst | null>(null)
 
 const isEdit = computed(() => !!detailId.value)
 const title = computed(() => (isEdit.value ? '修改账号' : '新增账号'))
 
-/** 平台租户下才提供平台运营角色 */
-const isPlatformTenant = computed(() => userStore.roles.includes('PLATFORM_ADMIN'))
+function emptyForm() {
+  return {
+    username: '',
+    realName: '',
+    phone: '',
+    orgId: null as number | null,
+    roleCodes: [] as string[],
+    status: 1
+  }
+}
 
-const ORG_FIELD_NAMES = { key: 'id', title: 'orgName', children: 'children' }
+const form = reactive(emptyForm())
 
-const getInitForm = () => ({
-  username: '',
-  realName: '',
-  phone: '',
-  orgId: undefined as number | undefined,
-  roleCodes: [] as string[],
-  status: 1
-})
+/** 所选角色推导出的用户类型；跨类（如班主任 + 学校管理员）时为 null，页面据此拦住提交 */
+const derivedUserType = computed(() => deriveUserType(form.roleCodes, roleOptions.value))
 
-// 顺序要紧：下面几个 computed 读的是 form，所以 form 必须在前
-const form = reactive(getInitForm())
-
-/**
- * 可选角色。
- *
- * ⚠️ 判据不只是"我是不是平台租户"，还要看**有没有代管学校**：
- *    · 平台运营 + 没选学校 → 建的是平台自己的账号 → 只能发 PLATFORM_ADMIN；
- *    · 平台运营 + 选了学校 → 建的是**那所学校**的账号 → 只能发学校那套角色
- *      （发 PLATFORM_ADMIN 会被服务端按租户白名单拒掉，报 40301）；
- *    · 学校管理员 → 学校那套。
- */
-const roleOptions = computed(() =>
-  isPlatformTenant.value && !props.tenantId ? PLATFORM_ROLE_OPTIONS : SCHOOL_ROLE_OPTIONS
-)
-
-/**
- * 从所选角色推导用户类型。
- *
- * 用户类型不让用户手选：它与角色是**一对一绑定**的（见 ROLE_TO_USER_TYPE），
- * 让用户分别选就会出现"学生 + 学校管理员"这种自相矛盾的账号，
- * 而服务端还会因此拒掉整个提交。改成推导之后这类组合在界面上根本产生不了。
- */
-const derivedUserType = computed(() => deriveUserType(form.roleCodes))
-
-/** 所选角色跨越了多个用户类型时的类别名（用于提示为什么不能提交） */
+/** 所选角色跨越了多个用户类型时的类别名，用来解释"为什么不能提交" */
 const conflictTypes = computed(() => {
   const names = new Set<string>()
-  for (const c of form.roleCodes) {
-    const t = ROLE_TO_USER_TYPE[c]
-    if (t) names.add(USER_TYPE_NAMES[t] ?? String(t))
+  for (const code of form.roleCodes) {
+    const t = roleOptions.value.find((o) => o.value === code)?.userType
+    if (t) {
+      names.add(ROLE_USER_TYPE_NAMES[t] ?? String(t))
+    }
   }
   return [...names]
 })
 
-const rules: FormInstance['rules'] = {
+const rules: FormRules = {
   username: [
-    { required: true, message: '请填写登录账号' },
+    { required: true, message: '请填写登录账号', trigger: ['blur', 'input'] },
     {
-      match: /^[A-Z][\w.-]{1,63}$/i,
-      message: '只能以字母开头，可含字母、数字、下划线、点或短横线'
+      pattern: /^[A-Z]\w{1,63}$/i,
+      message: '只能以字母开头，可含字母、数字、下划线',
+      trigger: ['blur', 'input']
     }
   ],
-  realName: [{ required: true, message: '请填写姓名' }],
+  realName: [{ required: true, message: '请填写姓名', trigger: ['blur', 'input'] }],
   phone: [
-    { required: true, message: '请填写手机号' },
-    { match: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
+    { required: true, message: '请填写手机号', trigger: ['blur', 'input'] },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'input'] }
   ],
-  roleCodes: [{ required: true, message: '请至少选择一个角色' }]
+  roleCodes: [{
+    required: true,
+    type: 'array',
+    message: '请至少选择一个角色',
+    trigger: ['change', 'blur']
+  }]
 }
 
-async function loadOrgTree() {
-  if (orgTree.value.length) return
-  const res = await getOrgTree({ tenantId: props.tenantId })
-  orgTree.value = res.data ?? []
+const orgOptions = computed<TreeSelectOption[]>(() => toTreeSelect(orgTree.value))
+
+function toTreeSelect(nodes: OrgTreeVO[]): TreeSelectOption[] {
+  return (nodes ?? []).map((n) => ({
+    key: n.id,
+    label: n.orgName,
+    children: n.children?.length ? toTreeSelect(n.children) : undefined
+  }))
 }
 
-// 换了学校就把缓存的组织树丢掉：留着上一所学校的树，用户会在"组织"下拉里
-// 看到别人学校的班级，而选中它提交会得到一个指向不存在组织的 orgId
-watch(() => props.tenantId, () => {
-  orgTree.value = []
-})
-
-/** 新增 */
-async function add() {
-  detailId.value = null
-  created.value = null
-  Object.assign(form, getInitForm())
-  visible.value = true
-  await loadOrgTree()
-}
-
-/** 编辑 */
-async function edit(row: userApi.UserVO) {
-  detailId.value = row.id
-  created.value = null
-  Object.assign(form, getInitForm())
-  form.username = row.username ?? ''
-  form.realName = row.realName
-  // 手机号只回脱敏值，编辑时留空表示"不改手机号"（后端会把空的手机号当作不修改）
-  form.phone = ''
-  form.orgId = row.orgId ?? undefined
-  // 用户类型不在这里赋值：它由 roleCodes 推导，见 derivedUserType
-  form.roleCodes = [...row.roleCodes]
-  form.status = row.status ?? 1
-  visible.value = true
-  await loadOrgTree()
-}
-
-function close() {
-  visible.value = false
-}
-
-function closeCreated() {
-  created.value = null
-  visible.value = false
-}
-
-async function copyPassword() {
-  const pwd = created.value?.initialPassword
-  if (!pwd) return
+async function loadOrgTree(): Promise<void> {
   try {
-    await navigator.clipboard.writeText(pwd)
-    Message.success('已复制到剪贴板')
+    orgTree.value = await getOrgTree({ tenantId: props.tenantId }) ?? []
   } catch {
-    Message.warning('浏览器不允许自动复制，请手动选中后复制')
+    orgTree.value = []
   }
 }
 
-async function confirm() {
-  const valid = await formRef.value?.validate()
-  if (valid) return
+async function loadRoles(): Promise<void> {
+  try {
+    roleOptions.value = await getRoleOptions(props.tenantId)
+  } catch {
+    roleOptions.value = []
+  }
+}
+
+// 换了学校就把缓存的组织树与角色候选丢掉：留着上一所学校的树，
+// 用户会在「组织」下拉里看到别人学校的班级，而选中它提交会得到指向不存在组织的 orgId
+watch(() => props.tenantId, () => {
+  orgTree.value = []
+  roleOptions.value = []
+})
+
+async function add(): Promise<void> {
+  detailId.value = null
+  created.value = null
+  Object.assign(form, emptyForm())
+  visible.value = true
+  await Promise.all([loadOrgTree(), loadRoles()])
+}
+
+async function edit(row: UserVO): Promise<void> {
+  detailId.value = row.id
+  created.value = null
+  Object.assign(form, emptyForm())
+  form.username = row.username ?? ''
+  form.realName = row.realName
+  // 手机号留空，强制重填（见文件头第 4 条）
+  form.phone = ''
+  form.orgId = row.orgId ?? null
+  form.roleCodes = [...(row.roleCodes ?? [])]
+  form.status = row.status ?? 1
+  visible.value = true
+  await Promise.all([loadOrgTree(), loadRoles()])
+}
+
+async function copyPassword(): Promise<void> {
+  const pwd = created.value?.initialPassword
+  if (!pwd) {
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(pwd)
+    message.success('已复制到剪贴板')
+  } catch {
+    message.warning('浏览器不允许自动复制，请手动选中后复制')
+  }
+}
+
+function closeCreated(): void {
+  created.value = null
+  visible.value = false
+  emit('save-success')
+}
+
+async function confirm(): Promise<void> {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
 
   const phone = form.phone.trim()
   if (!phone) {
-    // 编辑态也要求重填手机号：列表接口按 §1.7 只返回脱敏值（138****8888），
-    // 拿它当明文回填会把脱敏串写进库里，比"让用户重填一次"糟糕得多。
-    Message.warning('请填写手机号（列表只返回脱敏值，无法回填原号码，需重填）')
+    message.warning('请填写手机号（列表只返回脱敏值，无法回填原号码，需重填）')
     return
   }
 
   const userType = derivedUserType.value
   if (userType === null) {
-    Message.warning('请选择角色（且需属于同一类），用户类型由它自动确定')
+    message.warning('请选择角色，且所选角色需属于同一类（用户类型由它自动确定）')
     return
   }
 
   submitting.value = true
   try {
-    if (isEdit.value) {
-      await userApi.updateUser(detailId.value!, {
+    if (isEdit.value && detailId.value) {
+      await userApi.updateUser(detailId.value, {
         realName: form.realName.trim(),
         phone,
-        orgId: form.orgId ?? null,
+        orgId: form.orgId,
         roleCodes: form.roleCodes,
         userType,
         status: form.status
       }, props.tenantId)
-      Message.success('已保存')
+      message.success('已保存')
       visible.value = false
       emit('save-success')
       return
@@ -340,23 +230,19 @@ async function confirm() {
       username: form.username.trim(),
       realName: form.realName.trim(),
       phone,
-      orgId: form.orgId ?? null,
+      orgId: form.orgId,
       roleCodes: form.roleCodes,
       userType
     }, props.tenantId)
-    const data = res.data
-    if (!data) {
-      Message.error('创建失败，请重试')
-      return
-    }
+
     created.value = {
       username: form.username.trim(),
       realName: form.realName.trim(),
-      initialPassword: data.initialPassword,
-      roleNames: form.roleCodes.map(
-        (c) => roleOptions.value.find((r) => r.value === c)?.label ?? c
-      )
+      initialPassword: res.initialPassword,
+      roleNames: form.roleCodes.map((c) => roleOptions.value.find((r) => r.value === c)?.label ?? c)
     }
+  } catch {
+    // 提示已由 http 层给出（如"用户类型与所选角色不符"）
   } finally {
     submitting.value = false
   }
@@ -365,52 +251,200 @@ async function confirm() {
 defineExpose({ add, edit })
 </script>
 
-<style lang="scss" scoped>
-.user-form {
-  &__hint {
-    font-size: 12px;
-    line-height: 1.7;
-    color: var(--color-text-3);
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="card"
+    :title="created ? '账号已创建' : title"
+    :style="{ width: created ? '480px' : '600px' }"
+    :mask-closable="false"
+    :closable="!created"
+  >
+    <!-- ── 成功态：初始密码只显示这一次 ──────────────────── -->
+    <template v-if="created">
+      <NAlert type="success" :show-icon="false">
+        <strong>「{{ created.realName }}」的账号已创建。</strong>
+        请把下面的初始密码发给本人。
+      </NAlert>
 
-    &--inline {
-      margin-left: 10px;
-    }
-  }
+      <div class="uf__pwd-box">
+        <div class="uf__pwd-label">
+          初始密码
+        </div>
+        <div class="uf__pwd-row">
+          <code class="uf__pwd">{{ created.initialPassword }}</code>
+          <NButton type="primary" @click="copyPassword">
+            复制
+          </NButton>
+        </div>
+        <NAlert type="warning" :show-icon="false" class="uf__pwd-warn">
+          <strong>这个密码只显示这一次。</strong>
+          关闭窗口后就查不到了 —— 库里存的是不可逆的哈希，忘了只能重新重置。
+        </NAlert>
+      </div>
 
-  &__pwd-box {
-    margin: 16px 0;
-  }
+      <NDescriptions :column="1" size="small" label-placement="left">
+        <NDescriptionsItem label="登录账号">{{ created.username }}</NDescriptionsItem>
+        <NDescriptionsItem label="姓名">{{ created.realName }}</NDescriptionsItem>
+        <NDescriptionsItem label="角色">{{ created.roleNames.join('、') || '—' }}</NDescriptionsItem>
+      </NDescriptions>
 
-  &__pwd-label {
-    margin-bottom: 6px;
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+      <div class="uf__footer">
+        <NButton type="primary" @click="closeCreated">
+          我已记下密码
+        </NButton>
+      </div>
+    </template>
 
-  &__pwd-row {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
+    <!-- ── 表单态 ──────────────────────────────────────── -->
+    <template v-else>
+      <NForm ref="formRef" :model="form" :rules="rules" label-placement="top">
+        <div class="uf__grid">
+          <NFormItem label="登录账号" path="username">
+            <NInput v-model:value="form.username" :disabled="isEdit" placeholder="如 zhangsan" clearable />
+            <template v-if="isEdit" #feedback>
+              <span class="uf__hint">登录名不可修改：改了会让历史记录与导出包里的账号对不上</span>
+            </template>
+          </NFormItem>
 
-  &__pwd {
-    flex: 1;
-    padding: 8px 12px;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 18px;
-    letter-spacing: 2px;
-    background: var(--color-fill-2);
-    border-radius: 4px;
-  }
+          <NFormItem label="姓名" path="realName">
+            <NInput v-model:value="form.realName" placeholder="如 张三" :maxlength="64" clearable />
+          </NFormItem>
 
-  &__pwd-warn {
-    margin-top: 10px;
-  }
+          <NFormItem label="手机号" path="phone">
+            <NInput v-model:value="form.phone" placeholder="11 位手机号" :maxlength="11" clearable />
+            <template #feedback>
+              <span class="uf__hint">
+                {{ isEdit ? '列表只返回脱敏值，这里必须重填一次（加密存储）' : '加密存储，列表只显示脱敏值' }}
+              </span>
+            </template>
+          </NFormItem>
 
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
+          <NFormItem label="所属组织">
+            <NTreeSelect
+              v-model:value="form.orgId"
+              :options="orgOptions"
+              placeholder="不选表示不归属任何组织"
+              clearable
+              class="uf__full"
+            />
+          </NFormItem>
+        </div>
+
+        <NFormItem label="用户类型">
+          <NSpace align="center" :size="8">
+            <NTag v-if="derivedUserType" type="info" :bordered="false" size="small">
+              {{ ROLE_USER_TYPE_NAMES[derivedUserType] ?? derivedUserType }}
+            </NTag>
+            <span v-else-if="conflictTypes.length > 1" class="uf__hint">
+              所选角色分属不同类别（{{ conflictTypes.join('、') }}），请只选同一类的角色
+            </span>
+            <span v-else class="uf__hint">选择角色后自动确定</span>
+          </NSpace>
+          <template #feedback>
+            <span class="uf__hint">
+              由所选角色自动决定，不需要手选 —— 这样不会出现「学生拿着学校管理员权限」这类账号
+            </span>
+          </template>
+        </NFormItem>
+
+        <NFormItem label="角色" path="roleCodes">
+          <NCheckboxGroup v-model:value="form.roleCodes">
+            <NSpace :size="14" :wrap="true">
+              <NCheckbox v-for="r in roleOptions" :key="r.value" :value="r.value" :label="r.label" />
+            </NSpace>
+          </NCheckboxGroup>
+          <template #feedback>
+            <span class="uf__hint">
+              可多选，权限取并集。内置角色的权限由系统决定，不能在这里改。
+              <template v-if="!roleOptions.length">（没有可选角色：请先确认已选学校、且角色是启用状态）</template>
+            </span>
+          </template>
+        </NFormItem>
+
+        <NFormItem v-if="isEdit" label="状态">
+          <NSpace align="center" :size="8">
+            <NSwitch v-model:value="form.status" :checked-value="1" :unchecked-value="0" />
+            <span class="uf__hint">
+              {{ form.status === 1 ? '正常，可登录' : '停用，不能登录（数据保留）' }}
+            </span>
+          </NSpace>
+        </NFormItem>
+      </NForm>
+
+      <div class="uf__footer">
+        <NSpace justify="end">
+          <NButton @click="visible = false">
+            取消
+          </NButton>
+          <NButton type="primary" :loading="submitting" @click="confirm">
+            {{ isEdit ? '保存' : '创建账号' }}
+          </NButton>
+        </NSpace>
+      </div>
+    </template>
+  </NModal>
+</template>
+
+<style scoped>
+/* 两列表单：窄屏（弹窗本身固定宽，这里只在字段名很长时兜底）也不会被 min-content 撑破 */
+.uf__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 16px;
+}
+
+.uf__full {
+  width: 100%;
+}
+
+.uf__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+/**
+ * 初始密码块：**卡片内部的浅灰小格子**（浅灰底 + 弱描边 + 小圆角），
+ * 不是再套一层卡片 —— 弹窗本身已经是一张卡片了。
+ */
+.uf__pwd-box {
+  padding: 12px;
+  margin: 14px 0;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.uf__pwd-label {
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.uf__pwd-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.uf__pwd {
+  flex: 1;
+  padding: 6px 10px;
+  font-size: 15px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: 0.06em;
+  background: var(--xt-card-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 4px;
+}
+
+.uf__pwd-warn {
+  margin-top: 10px;
+}
+
+.uf__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
 }
 </style>
diff --git a/frontend-pc/src/views/user/UserImportModal.vue b/frontend-pc/src/views/user/UserImportModal.vue
index 90927ce..d76986f 100644
--- a/frontend-pc/src/views/user/UserImportModal.vue
+++ b/frontend-pc/src/views/user/UserImportModal.vue
@@ -1,182 +1,38 @@
-<template>
-  <a-modal v-model:visible="visible" :title="report ? '导入结果' : '批量导入账号'" :width="report ? 760 : 560"
-    :mask-closable="false" :footer="false" @cancel="close">
-    <!-- ── 第一步：选文件 ────────────────────────────── -->
-    <template v-if="!report">
-      <a-alert type="info" :show-icon="false" class="user-import__intro">
-        <template #title>
-          表格里需要有 <strong>姓名</strong> 与 <strong>账号</strong> 两列，
-          <strong>手机号</strong> 必填；<strong>组织</strong>、<strong>角色</strong> 可选。
-          表头在第几行<b>不用管</b>，系统会自己找。
-        </template>
-      </a-alert>
-
-      <a-form :model="formModel" layout="vertical">
-        <a-form-item label="Excel 文件">
-          <div class="user-import__pick">
-            <!--
-              这里用原生 input 而不是 a-upload：
-              a-upload 的 auto-upload=false 时，拿原始 File 对象要经由 fileItem.file，
-              各版本字段名不尽相同；而本场景只需要"选一个本地文件然后自己发请求"，
-              原生 input 的行为是完全确定的，少一层不确定性。
-            -->
-            <input ref="fileInput" type="file" accept=".xlsx,.xls" class="user-import__file"
-              @change="onFileChange" />
-            <a-button @click="pickFile">
-              <template #icon><IconUpload /></template>
-              选择文件
-            </a-button>
-            <span v-if="file" class="user-import__filename">{{ file.name }}</span>
-            <span v-else class="user-import__hint">支持 .xlsx / .xls，不超过 10MB</span>
-          </div>
-        </a-form-item>
-
-        <a-form-item label="没有「角色」列时的默认角色">
-          <a-select v-model="formModel.defaultRoleCode" class="user-import__role">
-            <a-option v-for="r in roleOptions" :key="r.value" :value="r.value">{{ r.label }}</a-option>
-          </a-select>
-          <template #extra>
-            <span class="user-import__hint">
-              表格里有「角色」列时以列为准；那一行没填角色才用这里的默认值。
-            </span>
-          </template>
-        </a-form-item>
-      </a-form>
-
-      <div class="user-import__footer">
-        <a-space>
-          <a-button @click="close">取消</a-button>
-          <a-button type="primary" :loading="submitting" :disabled="!file" @click="submit">
-            开始导入
-          </a-button>
-        </a-space>
-      </div>
-    </template>
-
-    <!-- ── 第二步：体检报告 ─────────────────────────── -->
-    <template v-else>
-      <a-row :gutter="12" class="user-import__stats">
-        <a-col :span="8">
-          <div class="user-import__stat">
-            <div class="user-import__stat-num">{{ report.total }}</div>
-            <div class="user-import__stat-label">参与导入的行数</div>
-          </div>
-        </a-col>
-        <a-col :span="8">
-          <div class="user-import__stat user-import__stat--ok">
-            <div class="user-import__stat-num">{{ report.success }}</div>
-            <div class="user-import__stat-label">成功创建</div>
-          </div>
-        </a-col>
-        <a-col :span="8">
-          <div class="user-import__stat" :class="report.failed ? 'user-import__stat--bad' : ''">
-            <div class="user-import__stat-num">{{ report.failed }}</div>
-            <div class="user-import__stat-label">未能导入</div>
-          </div>
-        </a-col>
-      </a-row>
-
-      <!-- 表头识别结果：行号 + 原文 + 列映射，三样一起给才核对得动 -->
-      <a-alert :type="report.errors.some((e) => e.field === 'realName' || e.field === 'username') ? 'warning' : 'success'"
-        :show-icon="false" class="user-import__header-alert">
-        <template #title>
-          系统把第 <strong>{{ report.headerRow }}</strong> 行当成了表头。
-        </template>
-        <template #default>
-          <div v-if="report.headerText" class="user-import__header-text">{{ report.headerText }}</div>
-          <div class="user-import__cols">
-            <span v-for="c in report.columns" :key="c.field" class="user-import__col-tag">
-              {{ c.fieldName }}
-              <em>{{ c.column }} 列</em>
-            </span>
-            <span v-if="!report.columns.length" class="user-import__hint">
-              没有识别到任何列 —— 请确认表格里有「姓名」和「账号」两列。
-            </span>
-          </div>
-          <div class="user-import__hint">
-            如果上面的行或列不对，请调整表格后重新导入；已经导入成功的账号不会重复创建。
-          </div>
-        </template>
-      </a-alert>
-
-      <!-- 失败明细 -->
-      <template v-if="report.errors.length">
-        <div class="user-import__section">未能导入的行（{{ report.errors.length }}）</div>
-        <a-table :data="report.errors" :pagination="false" row-key="row" size="small"
-          :max-height="220" :scroll="{ y: 220 }">
-          <template #columns>
-            <a-table-column title="Excel 行号" :width="100" align="center">
-              <template #cell="{ record }">第 {{ record.row }} 行</template>
-            </a-table-column>
-            <a-table-column title="字段" :width="90">
-              <template #cell="{ record }">
-                {{ IMPORT_FIELD_NAMES[record.field] ?? record.field }}
-              </template>
-            </a-table-column>
-            <a-table-column title="原值" data-index="value" :width="150" ellipsis tooltip />
-            <a-table-column title="原因" data-index="reason" />
-          </template>
-        </a-table>
-      </template>
-
-      <!-- 初始密码：只这一次 -->
-      <template v-if="report.initialPasswords.length">
-        <div class="user-import__section">
-          新账号的初始密码（{{ report.initialPasswords.length }}）
-        </div>
-        <a-alert type="warning" :show-icon="false">
-          <template #title>
-            <strong>这些密码只显示这一次。</strong>
-            关闭后无法再查看，请现在就复制下来分发给本人。
-          </template>
-        </a-alert>
-        <a-table :data="report.initialPasswords" :pagination="false" row-key="username" size="small"
-          :max-height="200" :scroll="{ y: 200 }">
-          <template #columns>
-            <a-table-column title="账号" data-index="username" :width="180" />
-            <a-table-column title="初始密码">
-              <template #cell="{ record }">
-                <code class="user-import__pwd">{{ record.password }}</code>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
-      </template>
-
-      <div class="user-import__footer">
-        <a-space>
-          <a-button v-if="report.initialPasswords.length" @click="copyAll">
-            <template #icon><IconCopy /></template>
-            复制全部密码
-          </a-button>
-          <a-button type="primary" @click="finish">完成</a-button>
-        </a-space>
-      </div>
-    </template>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
+import type { RoleOption } from '@/apis/xt/role'
 import type { UserImportResult } from '@/apis/xt/user'
-import { Message } from '@arco-design/web-vue'
-import { IconCopy, IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+  NAlert,
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NGrid,
+  NGridItem,
+  NModal,
+  NSelect,
+  NSpace,
+  useMessage
+} from 'naive-ui'
+import { computed, reactive, ref, watch } from 'vue'
+import { getRoleOptions } from '@/apis/xt/role'
 import * as userApi from '@/apis/xt/user'
-import { IMPORT_FIELD_NAMES, PLATFORM_ROLE_OPTIONS, SCHOOL_ROLE_OPTIONS } from '@/apis/xt/user'
-import { useUserStore } from '@/stores'
+import { IMPORT_FIELD_NAMES } from '@/apis/xt/user'
 
 /**
  * 账号批量导入弹窗。
  *
  * 这个弹窗的重点不是"上传"，而是**体检报告**：
  * 实测的真实 Excel 里，表头一份在第 1 行、一份在第 6 行，列名也有多种写法。
- * 所以导入不可能"静默全成功或全失败"，必须把
- *   ① 系统认的是第几行、那行长什么样、认成了哪几列
- *   ② 哪几行没进去、为什么
- *   ③ 新账号的初始密码（只此一次）
- * 三件事摊开给用户看，让他当场就能判断"这次导入能不能信"。
+ * 所以导入不可能"静默全成功或全失败"，必须把三件事摊开给用户看：
+ *   ① 系统认的是第几行、那行长什么样、认成了哪几列；
+ *   ② 哪几行没进去、为什么（行号 + 字段 + 原值 + 原因）；
+ *   ③ 新账号的初始密码（**只此一次**）。
+ * 用户当场就能判断"这次导入能不能信"。
  *
- * `tenantId` 由父页面传入，**只有平台运营的页面会给值**：表示"导进哪所学校"
- * （服务端按请求头 `X-Tenant-Id` 摆租户上下文）。它同时决定默认角色的可选范围。
+ * `tenantId` 由父页面传入，**只有平台运营会传值**：表示"导进哪所学校"，
+ * 同时决定默认角色的可选范围。
  */
 defineOptions({ name: 'UserImportModal' })
 
@@ -188,45 +44,88 @@ const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
-const userStore = useUserStore()
+const message = useMessage()
 
 const visible = ref(false)
 const submitting = ref(false)
 const file = ref<File | null>(null)
 const report = ref<UserImportResult | null>(null)
+const roleOptions = ref<RoleOption[]>([])
+const fileInput = ref<HTMLInputElement | null>(null)
 
-const fileInput = useTemplateRef<HTMLInputElement>('fileInput')
+const form = reactive({ defaultRoleCode: 'HEAD_TEACHER' })
 
-const isPlatformTenant = computed(() => userStore.roles.includes('PLATFORM_ADMIN'))
-/** 与 UserFormModal 同一口径：代管某所学校时只能发学校那套角色 */
-const roleOptions = computed(() =>
-  isPlatformTenant.value && !props.tenantId
-    ? PLATFORM_ROLE_OPTIONS
-    : SCHOOL_ROLE_OPTIONS.filter((r) => r.value !== 'STUDENT')
-)
+/**
+ * 默认角色的候选：**不含学生**。
+ *
+ * 学生账号是从微信进来的（他们不填 Excel，也没有密码），批量导入一批"学生账号"
+ * 只会造出一堆永远登不上的账号。
+ */
+const roleSelectOptions = computed(() => roleOptions.value
+  .filter((r) => r.value !== 'STUDENT')
+  .map((r) => ({ label: r.label, value: r.value })))
 
-/** a-form 需要一个 model；文件选择走原生 input，不进这个对象 */
-const formModel = reactive({ defaultRoleCode: 'HEAD_TEACHER' })
+const errorColumns: DataTableColumns<UserImportResult['errors'][number]> = [
+  {
+    title: 'Excel 行号',
+    key: 'row',
+    width: 100,
+    align: 'center',
+    render: (row) => `第 ${row.row} 行`
+  },
+  {
+    title: '字段',
+    key: 'field',
+    width: 90,
+    render: (row) => IMPORT_FIELD_NAMES[row.field] ?? row.field
+  },
+  { title: '原值', key: 'value', width: 150, ellipsis: { tooltip: true }, render: (row) => row.value || '（空）' },
+  { title: '原因', key: 'reason' }
+]
 
-function open() {
+const pwdColumns: DataTableColumns<UserImportResult['initialPasswords'][number]> = [
+  { title: '账号', key: 'username', width: 180 },
+  { title: '初始密码', key: 'password' }
+]
+
+/** 一行可能既有字段错又有原因错，所以键要带上字段名 */
+function errorRowKey(row: UserImportResult['errors'][number]): string {
+  return `${row.row}-${row.field}`
+}
+
+/** 初始密码表按账号去重（同一个账号只会有一条） */
+function pwdRowKey(row: UserImportResult['initialPasswords'][number]): string {
+  return row.username
+}
+
+async function loadRoles(): Promise<void> {
+  try {
+    roleOptions.value = await getRoleOptions(props.tenantId)
+  } catch {
+    roleOptions.value = []
+  }
+}
+
+watch(() => props.tenantId, () => {
+  roleOptions.value = []
+})
+
+async function open(): Promise<void> {
   file.value = null
   report.value = null
   visible.value = true
+  await loadRoles()
 }
 
-function close() {
-  visible.value = false
-}
-
-function pickFile() {
+function pickFile(): void {
   fileInput.value?.click()
 }
 
-function onFileChange(e: Event) {
+function onFileChange(e: Event): void {
   const input = e.target as HTMLInputElement
   const picked = input.files?.[0] ?? null
   if (picked && picked.size > 10 * 1024 * 1024) {
-    Message.warning('文件超过 10MB，请拆分后分批导入')
+    message.warning('文件超过 10MB，请拆分后分批导入')
     input.value = ''
     file.value = null
     return
@@ -234,160 +133,308 @@ function onFileChange(e: Event) {
   file.value = picked
 }
 
-async function submit() {
-  if (!file.value) return
+async function submit(): Promise<void> {
+  if (!file.value) {
+    return
+  }
   submitting.value = true
   try {
-    const res = await userApi.importUsers(file.value, formModel.defaultRoleCode, props.tenantId)
-    report.value = res.data ?? null
+    report.value = await userApi.importUsers(file.value, form.defaultRoleCode, props.tenantId)
     emit('save-success')
+  } catch {
+    // 提示已由 http 层给出（如文件格式不对）
   } finally {
     submitting.value = false
   }
 }
 
-async function copyAll() {
+async function copyAll(): Promise<void> {
   const rows = report.value?.initialPasswords ?? []
-  if (!rows.length) return
+  if (!rows.length) {
+    return
+  }
+  // 制表符分隔：可以直接粘进 Excel 分两列
   const text = rows.map((r) => `${r.username}\t${r.password}`).join('\r\n')
   try {
     await navigator.clipboard.writeText(text)
-    Message.success(`已复制 ${rows.length} 条（账号 + 密码，制表符分隔，可直接粘进 Excel）`)
+    message.success(`已复制 ${rows.length} 条（账号 + 密码，制表符分隔，可直接粘进 Excel）`)
   } catch {
-    Message.warning('浏览器不允许自动复制，请手动选中后复制')
+    message.warning('浏览器不允许自动复制，请手动选中后复制')
   }
 }
 
-function finish() {
+function finish(): void {
   if (report.value?.initialPasswords.length) {
-    Message.warning('请确认已经复制并保存了初始密码 —— 关闭后无法再查看')
+    message.warning('请确认已经复制并保存了初始密码 —— 关闭后无法再查看')
   }
   visible.value = false
 }
 
+/** 表头没认出姓名/账号列时把提示升级成 warning：那意味着这次导入基本没进去 */
+const headerTone = computed(() => {
+  const errs = report.value?.errors ?? []
+  return errs.some((e) => e.field === 'realName' || e.field === 'username') ? 'warning' : 'success'
+})
+
 defineExpose({ open })
 </script>
 
-<style lang="scss" scoped>
-.user-import {
-  &__intro {
-    margin-bottom: 16px;
-    line-height: 1.8;
-  }
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="card"
+    :title="report ? '导入结果' : '批量导入账号'"
+    :style="{ width: report ? '760px' : '560px' }"
+    :mask-closable="false"
+  >
+    <!-- ── 第一步：选文件 ────────────────────────────── -->
+    <template v-if="!report">
+      <NAlert type="info" :show-icon="false" class="ui__intro">
+        表格里需要有 <strong>姓名</strong> 与 <strong>账号</strong> 两列，
+        <strong>手机号</strong> 必填；<strong>组织</strong>、<strong>角色</strong> 可选。
+        表头在第几行<strong>不用管</strong>，系统会自己找。
+      </NAlert>
 
-  &__pick {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
+      <NForm label-placement="top">
+        <NFormItem label="Excel 文件">
+          <div class="ui__pick">
+            <!-- 用原生 input 而不是上传组件：本场景只需要"选一个本地文件然后自己发请求"，
+                 原生 input 的取值行为完全确定，少一层封装带来的不确定性 -->
+            <input
+              ref="fileInput"
+              type="file"
+              accept=".xlsx,.xls"
+              class="ui__file"
+              @change="onFileChange"
+            >
+            <NButton @click="pickFile">
+              选择文件
+            </NButton>
+            <span v-if="file" class="ui__filename">{{ file.name }}</span>
+            <span v-else class="ui__hint">支持 .xlsx / .xls，不超过 10MB</span>
+          </div>
+        </NFormItem>
 
-  &__file {
-    display: none;
-  }
+        <NFormItem label="没有「角色」列时的默认角色">
+          <NSelect v-model:value="form.defaultRoleCode" :options="roleSelectOptions" class="ui__full" />
+          <template #feedback>
+            <span class="ui__hint">
+              表格里有「角色」列时以列为准；那一行没填角色才用这里的默认值
+            </span>
+          </template>
+        </NFormItem>
+      </NForm>
 
-  &__filename {
-    font-size: 13px;
-    color: var(--color-text-1);
-  }
+      <div class="ui__footer">
+        <NSpace justify="end">
+          <NButton @click="visible = false">
+            取消
+          </NButton>
+          <NButton type="primary" :loading="submitting" :disabled="!file" @click="submit">
+            开始导入
+          </NButton>
+        </NSpace>
+      </div>
+    </template>
 
-  &__hint {
-    font-size: 12px;
-    line-height: 1.7;
-    color: var(--color-text-3);
-  }
+    <!-- ── 第二步：体检报告 ─────────────────────────── -->
+    <template v-else>
+      <NGrid cols="3" :x-gap="12" class="ui__stats">
+        <NGridItem>
+          <div class="ui__stat">
+            <div class="ui__stat-num">{{ report.total }}</div>
+            <div class="ui__stat-label">参与导入的行数</div>
+          </div>
+        </NGridItem>
+        <NGridItem>
+          <div class="ui__stat ui__stat--ok">
+            <div class="ui__stat-num">{{ report.success }}</div>
+            <div class="ui__stat-label">成功创建</div>
+          </div>
+        </NGridItem>
+        <NGridItem>
+          <div class="ui__stat" :class="report.failed ? 'ui__stat--bad' : ''">
+            <div class="ui__stat-num">{{ report.failed }}</div>
+            <div class="ui__stat-label">未能导入</div>
+          </div>
+        </NGridItem>
+      </NGrid>
 
-  &__role {
-    width: 200px;
-  }
+      <!-- 表头识别结果：行号 + 原文 + 列映射，三样一起给才核对得动 -->
+      <NAlert :type="headerTone" :show-icon="false" class="ui__header-alert">
+        <div>
+          系统把第 <strong>{{ report.headerRow }}</strong> 行当成了表头。
+        </div>
+        <div v-if="report.headerText" class="ui__header-text">{{ report.headerText }}</div>
+        <div class="ui__cols">
+          <span v-for="c in report.columns" :key="c.field" class="ui__col-tag">
+            {{ c.fieldName }} <em>{{ c.column }} 列</em>
+          </span>
+          <span v-if="!report.columns.length" class="ui__hint">
+            没有识别到任何列 —— 请确认表格里有「姓名」和「账号」两列
+          </span>
+        </div>
+        <div class="ui__hint">
+          如果上面的行或列不对，请调整表格后重新导入；已经导入成功的账号不会重复创建。
+        </div>
+      </NAlert>
 
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
+      <!-- 失败明细 -->
+      <template v-if="report.errors.length">
+        <div class="section-title ui__section">
+          未能导入的行（{{ report.errors.length }}）
+        </div>
+        <NDataTable
+          :columns="errorColumns"
+          :data="report.errors"
+          :pagination="false"
+          :row-key="errorRowKey"
+          size="small"
+          :max-height="220"
+        />
+      </template>
 
-  &__stats {
-    margin-bottom: 16px;
-  }
+      <!-- 初始密码：只这一次 -->
+      <template v-if="report.initialPasswords.length">
+        <div class="section-title ui__section">
+          新账号的初始密码（{{ report.initialPasswords.length }}）
+        </div>
+        <NAlert type="warning" :show-icon="false">
+          <strong>这些密码只显示这一次。</strong>
+          关闭后无法再查看，请现在就复制下来分发给本人。
+        </NAlert>
+        <NDataTable
+          :columns="pwdColumns"
+          :data="report.initialPasswords"
+          :pagination="false"
+          :row-key="pwdRowKey"
+          size="small"
+          :max-height="200"
+          class="ui__pwd-table"
+        />
+      </template>
 
-  &__stat {
-    padding: 12px 16px;
-    text-align: center;
-    background: var(--color-fill-2);
-    border-radius: 6px;
+      <div class="ui__footer">
+        <NSpace justify="end">
+          <NButton v-if="report.initialPasswords.length" @click="copyAll">
+            复制全部密码
+          </NButton>
+          <NButton type="primary" @click="finish">
+            完成
+          </NButton>
+        </NSpace>
+      </div>
+    </template>
+  </NModal>
+</template>
 
-    &--ok .user-import__stat-num {
-      color: rgb(var(--success-6));
-    }
+<style scoped>
+.ui__intro {
+  margin-bottom: 14px;
+}
 
-    &--bad .user-import__stat-num {
-      color: rgb(var(--danger-6));
-    }
-  }
+.ui__pick {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
 
-  &__stat-num {
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 1.4;
-    color: var(--color-text-1);
-  }
+/* 原生 input 只用来触发文件选择，界面上出现的是它左边的按钮 */
+.ui__file {
+  display: none;
+}
 
-  &__stat-label {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+.ui__filename {
+  font-size: 13px;
+}
 
-  &__header-alert {
-    margin-bottom: 16px;
-  }
+.ui__hint {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
 
-  &__header-text {
-    padding: 8px 10px;
-    margin: 6px 0 8px;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 12px;
-    line-height: 1.8;
-    color: var(--color-text-2);
-    word-break: break-all;
-    background: var(--color-bg-2);
-    border-radius: 4px;
-  }
+.ui__full {
+  width: 100%;
+}
 
-  &__cols {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-bottom: 6px;
-  }
+.ui__stats {
+  margin-bottom: 12px;
+}
 
-  &__col-tag {
-    padding: 2px 8px;
-    font-size: 12px;
-    color: var(--color-text-2);
-    background: var(--color-fill-2);
-    border-radius: 3px;
+/* 统计三格：**弹窗内部的浅灰小格子**（浅灰底 + 弱描边），不是三张嵌套卡片 */
+.ui__stat {
+  padding: 10px 12px;
+  text-align: center;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
 
-    em {
-      margin-left: 4px;
-      font-style: normal;
-      color: rgb(var(--primary-6));
-    }
-  }
+/* 成功 / 失败两格保留状态色（绿 / 红），描边跟着状态走，避免"灰框红底"看着像两种状态 */
+.ui__stat--ok {
+  background: #eaf7ee;
+  border-color: #cbe9d5;
+}
 
-  &__section {
-    margin: 16px 0 8px;
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
+.ui__stat--bad {
+  background: #fdecec;
+  border-color: #f6d3d3;
+}
 
-  &__pwd {
-    padding: 2px 6px;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 13px;
-    letter-spacing: 1px;
-    background: var(--color-fill-2);
-    border-radius: 3px;
-  }
+.ui__stat-num {
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.ui__stat-label {
+  font-size: 12px;
+  color: var(--xt-text-2);
+}
+
+.ui__header-alert {
+  margin-bottom: 12px;
+}
+
+.ui__header-text {
+  margin: 6px 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.ui__cols {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.ui__col-tag {
+  padding: 1px 8px;
+  font-size: 12px;
+  background: var(--xt-card-bg);
+  border: 1px solid var(--xt-card-border);
+  border-radius: 10px;
+}
+
+.ui__col-tag em {
+  font-style: normal;
+  color: var(--xt-text-3);
+}
+
+/*
+ * 区块标题直接用全局 `.section-title`（左侧色条 + 加粗），
+ * 这里只补它与上一块之间的上间距 —— 全局那条只管 margin-bottom。
+ */
+.ui__section {
+  margin-top: 16px;
+}
+
+.ui__pwd-table {
+  margin-top: 8px;
+}
+
+.ui__footer {
+  margin-top: 16px;
 }
 </style>
diff --git a/frontend-pc/src/views/user/index.vue b/frontend-pc/src/views/user/index.vue
index 1156a94..5ae0239 100644
--- a/frontend-pc/src/views/user/index.vue
+++ b/frontend-pc/src/views/user/index.vue
@@ -1,255 +1,80 @@
-<template>
-  <GiPageLayout>
-    <!-- 左：组织树，用于按院系/班级过滤账号 -->
-    <template #left>
-      <a-card :bordered="false" class="user__tree-card">
-        <template #title>
-          <a-space>
-            <IconFolder />
-            <span>组织</span>
-          </a-space>
-        </template>
-
-        <!-- 平台运营必须先选学校：账号与组织都是租户内的数据（见 @/apis/xt/acting-tenant） -->
-        <GiTenantPicker
-          v-if="isPlatformTenant"
-          v-model="actingStore.tenantId"
-          class="user__tenant"
-          placeholder="选择学校（平台运营）"
-        />
-
-        <a-empty v-if="needPickTenant" description="请先选择学校" />
-
-        <a-spin v-else-if="orgLoading" class="user__loading" />
-
-        <template v-else>
-          <a-button long size="small" :type="orgId === undefined ? 'primary' : 'outline'"
-            class="user__all-btn" @click="onOrgSelect(undefined)">
-            全部账号
-          </a-button>
-          <a-tree v-if="orgTree.length" :data="orgTree" :field-names="ORG_FIELD_NAMES" block-node
-            :default-expand-all="true" :selected-keys="orgId === undefined ? [] : [orgId]"
-            @select="onOrgSelect" />
-          <a-empty v-else description="还没有组织" />
-        </template>
-      </a-card>
-    </template>
-
-    <a-card :bordered="false">
-      <template #title>账号</template>
-      <template #extra>
-        <span class="user__hint">共 {{ total }} 个账号</span>
-      </template>
-
-      <div class="g-row-tool">
-        <a-space wrap>
-          <a-button v-if="canManage" type="primary" size="small" @click="onAdd">
-            <template #icon><IconPlus /></template>
-            新增账号
-          </a-button>
-          <a-button v-if="canManage" size="small" @click="onImport">
-            <template #icon><IconUpload /></template>
-            批量导入
-          </a-button>
-        </a-space>
-
-        <a-space wrap>
-          <a-button v-for="c in statusChips" :key="String(c.value)"
-            :type="statusFilter === c.value ? 'primary' : 'outline'" size="small" @click="setStatus(c.value)">
-            {{ c.label }}
-          </a-button>
-          <a-select v-model="roleFilter" placeholder="全部角色" allow-clear class="user__role-filter"
-            @change="search">
-            <a-option v-for="r in allRoleOptions" :key="r.value" :value="r.value">{{ r.label }}</a-option>
-          </a-select>
-          <a-input-search v-model="query.keyword" placeholder="搜索姓名或账号" allow-clear class="user__search"
-            @search="search" @clear="search" />
-        </a-space>
-      </div>
-
-      <!--
-        ⚠️ `:scroll` 不是可选的：Arco 的 `fixed: 'right'` 列**必须**配合 scroll 配置
-        才会预留位置；不加的话那一列会直接浮在其它列上面。
-
-        ⚠️ 列宽也不是随便给的：1366 宽的屏幕减去 200 侧栏，内容区只有约 830px。
-        下面 6 列合计 860 —— 基本贴边。**下次加列前先按这个口径算一遍**，
-        否则会横向滚动，而钉住的「操作」列会盖住紧邻它的那一列
-        （实测把「状态」整个遮住了，表头挤成「进度操作」）。
-      -->
-      <!--
-        ⚠️ 关于列宽与「操作」列的 fixed：**改之前先量一下表格可用宽度。**
-
-        实测（1366 宽的屏幕）：
-          · 收集任务页：左侧栏 200，表格可用约 824px
-          · 账号管理页：左侧栏 200 + 左侧组织树卡约 250，表格可用**只有约 574px**
-
-        所以账号管理页必须保留 `fixed="right"`：
-        列宽合计 800px 装不进 574px，必然横向滚动；
-        横向滚动时**钉住的操作列会盖住紧邻它的那一列**，这是固定列的固有行为，不是配置错了。
-        去掉 fixed 看似不压盖了，实际是把操作列滚出视野 ——
-        用户根本看不到「编辑 / 重置密码 / 停用」，那比压盖更糟。
-
-        要真正消除压盖只有一条路：**把列数减到能在 574px 内放下**。
-        留给下一轮：把「手机号」或「状态 / 最后登录」并进「姓名 / 账号」那一列。
-      -->
-      <a-table :data="list" :loading="loading" row-key="id" :pagination="pagination"
-        :scroll="{ x: 800 }" @page-change="onPageChange">
-        <template #columns>
-          <a-table-column title="姓名 / 账号" :width="175">
-            <template #cell="{ record }">
-              <div class="user__name">{{ record.realName }}</div>
-              <div class="user__account">{{ record.username ?? '（未设账号）' }}</div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="角色" :width="170">
-            <template #cell="{ record }">
-              <a-space v-if="record.roleNames.length" wrap size="mini">
-                <a-tag v-for="n in record.roleNames" :key="n" size="small">{{ n }}</a-tag>
-              </a-space>
-              <span v-else class="user__muted">—</span>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="手机号" :width="125">
-            <template #cell="{ record }">
-              <span class="user__mono">{{ record.phoneMasked ?? '—' }}</span>
-            </template>
-          </a-table-column>
-
-          <!--
-            这里刻意**不放「用户类型」列**。
-            `userType` 与角色是一对一推导的（见 apis/xt/user.ts 的 ROLE_TO_USER_TYPE），
-            单独列出来就是「角色：学校管理员 / 类型：学校管理员」这种重复，
-            看着像 bug。类型仍由接口返回，需要时在详情里看即可 —— 列表以「角色」为准。
-          -->
-
-          <a-table-column title="状态 / 最后登录" :width="130" align="center">
-            <template #cell="{ record }">
-              <a-tag :color="USER_STATUS[record.status]?.color ?? 'gray'">
-                {{ USER_STATUS[record.status]?.text ?? '未知' }}
-              </a-tag>
-              <!--
-                最后登录并进这一列，是为了给窄屏省宽度。
-                1366 的屏幕减去 200 侧栏，内容区只有约 830px，
-                7 列各占一份根本放不下 —— 放不下的后果是横向滚动，
-                而钉住的「操作」列会直接盖住紧邻它的那一列（实测「状态」被整个遮住）。
-                这里用"标签 + 一行小字"把两列并成一列，信息一点没少。
-              -->
-              <div class="user__muted user__lastlogin">
-                {{ record.lastLoginTime
-                  ? record.lastLoginTime.replace('T', ' ').slice(0, 16)
-                  : '从未登录' }}
-              </div>
-            </template>
-          </a-table-column>
-
-          <a-table-column title="操作" :width="200" align="center" fixed="right">
-            <template #cell="{ record }">
-              <a-space v-if="canManage" size="mini">
-                <a-link @click="onEdit(record)">编辑</a-link>
-                <a-link @click="onResetPassword(record)">重置密码</a-link>
-                <a-link v-if="record.status === 1" status="warning" @click="onToggleStatus(record, 0)">
-                  停用
-                </a-link>
-                <a-link v-else status="success" @click="onToggleStatus(record, 1)">启用</a-link>
-              </a-space>
-              <span v-else class="user__muted">只读</span>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-card>
-
-    <UserFormModal ref="formModalRef" :tenant-id="actingStore.tenantId" @save-success="load" />
-    <UserImportModal ref="importModalRef" :tenant-id="actingStore.tenantId" @save-success="load" />
-
-    <!-- 重置密码结果：与创建一样，只显示这一次 -->
-    <a-modal v-model:visible="resetVisible" title="密码已重置" :width="460" :mask-closable="false"
-      :footer="false" :closable="false">
-      <a-alert type="success" :show-icon="false">
-        <template #title>
-          账号 <strong>{{ resetResult?.username }}</strong> 的密码已重置。
-          该账号此前的<b>登录锁定也已一并解除</b>。
-        </template>
-      </a-alert>
-
-      <div class="user__pwd-box">
-        <div class="user__pwd-row">
-          <code class="user__pwd">{{ resetResult?.newPassword }}</code>
-          <a-button type="primary" size="small" @click="copyResetPassword">
-            <template #icon><IconCopy /></template>
-            复制
-          </a-button>
-        </div>
-        <a-alert type="warning" :show-icon="false" class="user__pwd-warn">
-          <strong>只显示这一次。</strong>关闭后无法再查看，请现在发给本人。
-        </a-alert>
-      </div>
-
-      <div class="user__footer">
-        <a-button type="primary" @click="resetVisible = false">我已记下密码</a-button>
-      </div>
-    </a-modal>
-  </GiPageLayout>
-</template>
-
 <script setup lang="ts">
+import type { DataTableColumns, TreeOption } from 'naive-ui'
 import type { OrgTreeVO } from '@/apis/xt/org'
+import type { RoleOption } from '@/apis/xt/role'
 import type { UserVO } from '@/apis/xt/user'
-import { Message, Modal } from '@arco-design/web-vue'
-import { IconCopy, IconFolder, IconPlus, IconUpload } from '@arco-design/web-vue/es/icon'
-import { getOrgTree } from '@/apis/xt/org'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NDataTable,
+  NEmpty,
+  NInput,
+  NModal,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTag,
+  NTree,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { computed, h, onMounted, reactive, ref, watch } from 'vue'
+import { getOrgTree, ORG_TYPE_NAMES } from '@/apis/xt/org'
+import { getRoleOptions } from '@/apis/xt/role'
 import * as userApi from '@/apis/xt/user'
-import { PLATFORM_ROLE_OPTIONS, SCHOOL_ROLE_OPTIONS, USER_STATUS } from '@/apis/xt/user'
-import { useActingTenantStore, useUserStore } from '@/stores'
+import { USER_STATUS } from '@/apis/xt/user'
+import { listPagination } from '@/composables/pagination'
+import AppIcon from '@/icons/AppIcon.vue'
+import { useActingTenantStore } from '@/stores/acting-tenant'
+import { useUserStore } from '@/stores/user'
+import { fmtTime } from '@/utils/format'
+import { tagOf } from '@/utils/tag'
 import UserFormModal from './UserFormModal.vue'
 import UserImportModal from './UserImportModal.vue'
 
 /**
- * 账号管理（《03-接口设计》§5.6 ~ §5.9）。
+ * 账号管理。
  *
- * 形态：左组织树 + 右列表，与「组织架构」页同一套主从布局 —— 学校最常问的
- * 是"这个班有哪些账号"，从树点进去比在搜索框里回想姓名快得多。
+ * 形态：左组织树 + 右列表，与「组织架构」同一套主从布局 —— 学校最常问的是
+ * "这个班有哪些账号"，从树点进去比在搜索框里回想姓名快得多。
  *
- * 两处按产品约束做的取舍：
- *   1. **手机号只显示脱敏值**，因此编辑时无法回填原号码，"不改手机号"是不支持的 ——
- *      要改就得重填。这是「列表接口不返回明文」（§1.7）带来的必然结果。
- *   2. **停用 ≠ 删除**。停用只改 status、可再启用；删除是软删、会从列表消失。
- *      日常"某人离职"用停用，建错了才用删除。
+ * 四处按产品约束做的取舍（都是**刻意**的，不要"顺手放开"）：
+ *   1. **手机号只显示脱敏值** → 编辑时必须重填（拿 `138****8888` 回填会把脱敏串写进库）；
+ *   2. **停用 ≠ 删除**：停用只改 status、可再启用。页面只暴露停用/启用，不给删除入口；
+ *   3. **用户类型不让用户选**，由所选角色推导（否则会出现"学生 + 学校管理员"这种账号，
+ *      而服务端会因此拒掉整个提交）；
+ *   4. **初始密码 / 重置密码只显示一次**（库里是 BCrypt 哈希，关了窗口谁也还原不出来）。
  */
 defineOptions({ name: 'User' })
 
-const userStore = useUserStore()
+const message = useMessage()
+const dialog = useDialog()
+const user = useUserStore()
+const acting = useActingTenantStore()
 
-const canManage = computed(() => userStore.permissions.includes('user:manage'))
-const isPlatformTenant = computed(() => userStore.roles.includes('PLATFORM_ADMIN'))
-
-/**
- * 平台运营的「当前学校」（请求头 `X-Tenant-Id`，见 `@/apis/xt/acting-tenant`）。
- *
- * 服务端对平台是关掉租户过滤的，不指明学校就会把**所有租户的账号**混在一起返回 ——
- * 而那种错看起来很正常（列表有数据、分页也对）。学校管理员不带这个头，行为不变。
- *
- * 选择与「组织架构」共用同一个 store：切页面不用重选，两个页面也不会各看一所学校。
- */
-const actingStore = useActingTenantStore()
-const needPickTenant = computed(() => isPlatformTenant.value && !actingStore.tenantId)
-
-const ORG_FIELD_NAMES = { key: 'id', title: 'orgName', children: 'children' }
+const canManage = computed(() => user.has('user:manage'))
+const isPlatform = computed(() => user.isPlatform)
+/** 平台没选学校时**不发**租户内数据的请求（选择入口在顶栏） */
+const needPickTenant = computed(() => isPlatform.value && !acting.tenantId)
 
 const loading = ref(false)
 const orgLoading = ref(false)
 const list = ref<UserVO[]>([])
 const total = ref(0)
 const orgTree = ref<OrgTreeVO[]>([])
-const orgId = ref<number | undefined>(undefined)
-const roleFilter = ref<string | undefined>(undefined)
+const roleOptions = ref<RoleOption[]>([])
+
+const orgId = ref<number | null>(null)
+const roleFilter = ref<string | null>(null)
 const statusFilter = ref<number | undefined>(1)
 const query = reactive({ pageNum: 1, pageSize: 10, keyword: '' })
 
-const formModalRef = useTemplateRef('formModalRef')
-const importModalRef = useTemplateRef('importModalRef')
+const formModalRef = ref<{
+  add: () => void
+  edit: (row: UserVO) => void
+} | null>(null)
+const importModalRef = ref<{ open: () => void } | null>(null)
 
 const resetVisible = ref(false)
 const resetResult = ref<userApi.UserResetResult | null>(null)
@@ -260,36 +85,157 @@ const statusChips = [
   { label: '全部', value: undefined }
 ]
 
-/** 角色筛选的候选：平台租户用平台那套，学校用学校那套 */
-const allRoleOptions = computed(() =>
-  isPlatformTenant.value
-    ? PLATFORM_ROLE_OPTIONS
-    : [...SCHOOL_ROLE_OPTIONS]
-)
+const roleFilterOptions = computed(() => roleOptions.value.map((r) => ({ label: r.label, value: r.value })))
 
-const pagination = computed(() => ({
-  current: query.pageNum,
+const selectedOrgKeys = computed(() => (orgId.value === null ? [] : [orgId.value]))
+
+const columns: DataTableColumns<UserVO> = [
+  {
+    title: '姓名 / 账号',
+    key: 'realName',
+    width: 150,
+    render: (row) => h('div', null, [
+      h('div', { class: 'user__name' }, row.realName),
+      h('div', { class: 'user__account' }, row.username ?? '（未设账号）')
+    ])
+  },
+  {
+    title: '角色',
+    key: 'roleNames',
+    width: 130,
+    render: (row) => {
+      if (!row.roleNames?.length) {
+        return h('span', { class: 'user__muted' }, '—')
+      }
+      return h(NSpace, { size: 4, wrap: true }, {
+        default: () => row.roleNames.map((n) => h(NTag, { size: 'tiny', bordered: false }, { default: () => n }))
+      })
+    }
+  },
+  {
+    title: '手机号',
+    key: 'phoneMasked',
+    width: 120,
+    // 后端按契约只返回脱敏值（§1.7），这里显示的就是它 —— 不是前端截的
+    render: (row) => h('span', { class: 'user__mono' }, row.phoneMasked ?? '—')
+  },
+  {
+    // 刻意不放「用户类型」列：它与角色一对一推导，单列出来就是重复（看着像 bug）
+    title: '状态 / 最后登录',
+    key: 'status',
+    width: 140,
+    render: (row) => {
+      const s = tagOf(USER_STATUS, row.status)
+      return h('div', null, [
+        h(NTag, { size: 'small', bordered: false, type: s.type }, { default: () => s.text }),
+        h('div', { class: 'user__muted user__lastlogin' }, row.lastLoginTime ? fmtTime(row.lastLoginTime) : '从未登录')
+      ])
+    }
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 160,
+    fixed: 'right',
+    render: (row) => {
+      if (!canManage.value) {
+        return h('span', { class: 'user__muted' }, '只读')
+      }
+      const acts = [
+        h(NButton, { text: true, type: 'primary', size: 'small', onClick: () => formModalRef.value?.edit(row) }, { default: () => '编辑' }),
+        h(NButton, { text: true, type: 'primary', size: 'small', onClick: () => onResetPassword(row) }, { default: () => '重置密码' })
+      ]
+      acts.push(row.status === 1
+        ? h(NButton, { text: true, type: 'warning', size: 'small', onClick: () => onToggleStatus(row, 0) }, { default: () => '停用' })
+        : h(NButton, { text: true, type: 'primary', size: 'small', onClick: () => onToggleStatus(row, 1) }, { default: () => '启用' }))
+      return h(NSpace, { size: 10, wrap: false }, { default: () => acts })
+    }
+  }
+]
+
+/**
+ * 分页器统一走 `listPagination`（见 `@/composables/pagination`）：
+ * 手写 `prefix` 的类型很容易写错（naive 给的 `itemCount` 是 `number | undefined`）。
+ *
+ * ⚠️ 远程分页的三件事缺一不可：`remote` + 自己控制 page/pageSize +
+ *    **同时**处理 `@update:page` 与 `@update:page-size`（见模板）。
+ *    只改本地每页条数不重新取数，就会出现"分页器说 50 条/页、表里还是 20 条"。
+ */
+const pagination = computed(() => listPagination({
+  page: query.pageNum,
   pageSize: query.pageSize,
-  total: total.value,
-  showTotal: true,
-  showPageSize: true
+  itemCount: total.value,
+  pageSizes: [10, 20, 50]
 }))
 
-async function loadOrgTree() {
+function onPage(page: number): void {
+  query.pageNum = page
+  void load()
+}
+
+function onPageSize(size: number): void {
+  query.pageSize = size
+  query.pageNum = 1
+  void load()
+}
+
+/**
+ * `n-tree` 的数据要 `TreeOption`（映射一层，别硬转 —— 见 org/index.vue 的说明）。
+ * 这里用不到 `raw`，但保留它能让 renderSuffix 拿到完整节点。
+ */
+interface OrgTreeOption extends TreeOption {
+  key: number
+  label: string
+  children?: OrgTreeOption[]
+  raw: OrgTreeVO
+}
+
+function toTreeOptions(nodes: OrgTreeVO[]): OrgTreeOption[] {
+  return (nodes ?? []).map((n) => ({
+    key: n.id,
+    label: n.orgName,
+    children: n.children?.length ? toTreeOptions(n.children) : undefined,
+    raw: n
+  }))
+}
+
+const treeOptions = computed<OrgTreeOption[]>(() => toTreeOptions(orgTree.value))
+
+/** 树节点右侧显示组织类型：确认自己点的是"班级"而不是"院系" */
+function renderSuffix(info: { option: TreeOption }) {
+  const node = (info.option as OrgTreeOption).raw
+  const label = node ? ORG_TYPE_NAMES[node.orgType] : ''
+  return label
+    ? h(NTag, { size: 'tiny', bordered: false }, { default: () => label })
+    : null
+}
+
+async function loadOrgTree(): Promise<void> {
   if (needPickTenant.value) {
     orgTree.value = []
     return
   }
   orgLoading.value = true
   try {
-    const res = await getOrgTree({ tenantId: actingStore.tenantId })
-    orgTree.value = res.data ?? []
+    orgTree.value = await getOrgTree({ tenantId: acting.tenantId }) ?? []
   } finally {
     orgLoading.value = false
   }
 }
 
-async function load() {
+async function loadRoleOptions(): Promise<void> {
+  if (needPickTenant.value) {
+    roleOptions.value = []
+    return
+  }
+  try {
+    roleOptions.value = await getRoleOptions(acting.tenantId)
+  } catch {
+    roleOptions.value = []
+  }
+}
+
+async function load(): Promise<void> {
   if (needPickTenant.value) {
     list.value = []
     total.value = 0
@@ -297,202 +243,490 @@ async function load() {
   }
   loading.value = true
   try {
-    const res = await userApi.getUserList({
+    const page = await userApi.getUserList({
       keyword: query.keyword.trim() || undefined,
-      orgId: orgId.value,
-      roleCode: roleFilter.value,
+      orgId: orgId.value ?? undefined,
+      roleCode: roleFilter.value ?? undefined,
       status: statusFilter.value,
       pageNum: query.pageNum,
       pageSize: query.pageSize
-    }, actingStore.tenantId)
-    list.value = res.data?.list ?? []
-    total.value = res.data?.total ?? 0
+    }, acting.tenantId)
+    list.value = page.list ?? []
+    total.value = page.total ?? 0
   } finally {
     loading.value = false
   }
 }
 
-// 换学校 = 换一整套数据（组织树、列表、已选的班级都要重来）。
-// 留着上一所学校的 orgId 去查新学校，会得到"一个空的列表" —— 看起来像这所学校没有账号。
-watch(() => actingStore.tenantId, () => {
-  orgId.value = undefined
+// 换学校 = 换一整套数据（组织树、角色候选、列表、已选班级全要重来）。
+// 留着上一所学校的 orgId 去查新学校，会得到一个空列表 —— 看起来像这所学校没有账号
+watch(() => acting.tenantId, () => {
+  orgId.value = null
+  roleFilter.value = null
   query.pageNum = 1
-  loadOrgTree()
-  load()
+  void loadOrgTree()
+  void loadRoleOptions()
+  void load()
 })
 
-function search() {
+function search(): void {
   query.pageNum = 1
-  load()
+  void load()
 }
 
-function setStatus(v: number | undefined) {
+function setStatus(v: number | undefined): void {
   statusFilter.value = v
   search()
 }
 
-function onPageChange(page: number) {
-  query.pageNum = page
-  load()
-}
-
-function onOrgSelect(keys: (string | number)[] | number | undefined) {
-  // a-button 直接调时传的是 undefined；a-tree 的 @select 传的是 keys 数组
-  const raw = Array.isArray(keys) ? keys[0] : keys
-  orgId.value = raw === undefined || raw === '' ? undefined : Number(raw)
+function onOrgSelect(keys: Array<string | number>): void {
+  const raw = keys[0]
+  orgId.value = raw === undefined || raw === null || raw === '' ? null : Number(raw)
   search()
 }
 
-function onAdd() {
-  formModalRef.value?.add()
+function onAllAccounts(): void {
+  orgId.value = null
+  search()
 }
 
-function onEdit(row: UserVO) {
-  formModalRef.value?.edit(row)
-}
-
-function onImport() {
-  importModalRef.value?.open()
-}
-
-async function onToggleStatus(row: UserVO, status: number) {
-  const action = status === 1 ? '启用' : '停用'
-  if (status === 0) {
-    return new Promise<void>((resolve) => {
-      Modal.warning({
-        title: `确认${action}「${row.realName}」？`,
-        content: '停用后该账号将无法登录，但数据保留，可以随时再启用。',
-        hideCancel: false,
-        onBeforeOk: async () => {
-          await userApi.setUserStatus(row.id, status, actingStore.tenantId)
-          Message.success(`已${action}`)
-          await load()
-          resolve()
-          return true
-        },
-        onCancel: () => resolve()
-      })
-    })
-  }
-  await userApi.setUserStatus(row.id, status, actingStore.tenantId)
-  Message.success(`已${action}`)
-  await load()
-}
-
-async function onResetPassword(row: UserVO) {
-  Modal.warning({
+function onResetPassword(row: UserVO): void {
+  dialog.warning({
     title: `确认重置「${row.realName}」的密码？`,
-    content: '系统会生成一个新的初始密码，旧密码立即失效。该账号的登录锁定也会一并解除。',
-    hideCancel: false,
-    onBeforeOk: async () => {
-      const res = await userApi.resetUserPassword(row.id, { mode: 'GENERATE' }, actingStore.tenantId)
-      resetResult.value = res.data ?? null
+    content: '系统会生成一个新的初始密码，旧密码立即失效。该账号此前的登录锁定也会一并解除。',
+    positiveText: '重置',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      const res = await userApi.resetUserPassword(row.id, { mode: 'GENERATE' }, acting.tenantId)
+      resetResult.value = res
       resetVisible.value = true
-      return true
     }
   })
 }
 
-async function copyResetPassword() {
+function onToggleStatus(row: UserVO, status: number): void {
+  if (status === 0) {
+    dialog.warning({
+      title: `确认停用「${row.realName}」？`,
+      content: '停用后该账号将无法登录，但数据保留，可以随时再启用。若他有在办任务，服务端会拒绝。',
+      positiveText: '停用',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        await userApi.setUserStatus(row.id, status, acting.tenantId)
+        message.success('已停用')
+        await load()
+      }
+    })
+    return
+  }
+  void (async () => {
+    await userApi.setUserStatus(row.id, status, acting.tenantId)
+    message.success('已启用')
+    await load()
+  })()
+}
+
+async function copyResetPassword(): Promise<void> {
   const pwd = resetResult.value?.newPassword
-  if (!pwd) return
+  if (!pwd) {
+    return
+  }
   try {
     await navigator.clipboard.writeText(pwd)
-    Message.success('已复制到剪贴板')
+    message.success('已复制到剪贴板')
   } catch {
-    Message.warning('浏览器不允许自动复制，请手动选中后复制')
+    message.warning('浏览器不允许自动复制，请手动选中后复制')
   }
 }
 
 onMounted(() => {
-  loadOrgTree()
-  load()
+  void loadOrgTree()
+  void loadRoleOptions()
+  void load()
 })
 </script>
 
-<style lang="scss" scoped>
-.user {
-  &__tree-card {
-    height: 100%;
-  }
+<template>
+  <div class="md">
+    <!--
+      左：组织树（按院系/班级过滤账号）—— **一张独立卡片**。
+      外观由全局 `.n-card.n-card` 给（白底 / 描边 / 阴影 / 卡片头灰条），页面不再自己画；
+      `page-card` 负责撑满内容区高度，树才有确定的可用高度自己滚。
+    -->
+    <!--
+      ⚠️ 不要再写 `:content-style="{ padding: '12px' }"`：内联样式会**盖掉全局的
+         `.n-card.n-card > .n-card-content`**，左右栏内边距会不一致（12 vs 16/18）。
+         内边距统一由 styles/index.scss 给。
+    -->
+    <NCard class="md__side page-card" size="small">
+      <template #header>
+        <span class="md__side-head">
+          <AppIcon name="org" :size="15" />
+          组织
+        </span>
+      </template>
 
-  &__loading {
-    display: block;
-    padding: 40px 0;
-    text-align: center;
-  }
+      <div class="md__side-body">
+        <NEmpty
+          v-if="needPickTenant"
+          class="md__empty"
+          description="账号按学校隔离：请先在右上角选择学校"
+        />
+        <NSpin v-else :show="orgLoading" class="md__spin">
+          <!--
+            「全部账号」用 `secondary` 的浅色主色按钮而不是实心主色块：
+            它是"清空筛选"的一条快捷项，与下面树的选中项同级，
+            画成整块深蓝会比真正的主操作（新增账号）还抢眼。
+          -->
+          <NButton
+            block
+            class="md__all"
+            :type="orgId === null ? 'primary' : 'default'"
+            :secondary="orgId === null"
+            @click="onAllAccounts"
+          >
+            全部账号
+          </NButton>
+          <div class="md__tree">
+            <NEmpty v-if="!orgTree.length" class="md__empty" description="还没有组织" />
+            <NTree
+              v-else
+              block-line
+              selectable
+              default-expand-all
+              :indent="16"
+              :data="treeOptions"
+              :selected-keys="selectedOrgKeys"
+              :render-suffix="renderSuffix"
+              @update:selected-keys="onOrgSelect"
+            />
+          </div>
+        </NSpin>
+      </div>
+    </NCard>
 
-  &__all-btn {
-    margin-bottom: 10px;
-  }
+    <!-- 右：账号列表 —— 同样是一张独立卡片，与左栏留 16px（见 `.md` 的 gap） -->
+    <NCard class="md__main page-card" size="small">
+      <div class="toolbar">
+        <div class="toolbar__left">
+          <span class="user__title">账号</span>
+          <span class="toolbar__hint">共 {{ total }} 个账号</span>
+        </div>
+        <NSpace v-if="canManage" :size="8">
+          <NButton type="primary" :disabled="needPickTenant" @click="formModalRef?.add()">
+            <template #icon>
+              <AppIcon name="plus" :size="14" />
+            </template>
+            新增账号
+          </NButton>
+          <NButton :disabled="needPickTenant" @click="importModalRef?.open()">
+            <template #icon>
+              <AppIcon name="upload" :size="14" />
+            </template>
+            批量导入
+          </NButton>
+        </NSpace>
+      </div>
 
-  &__hint {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+      <div class="toolbar">
+        <NSpace :size="6">
+          <NButton
+            v-for="c in statusChips"
+            :key="String(c.value)"
+            :type="statusFilter === c.value ? 'primary' : 'default'"
+            :disabled="needPickTenant"
+            @click="setStatus(c.value)"
+          >
+            {{ c.label }}
+          </NButton>
+        </NSpace>
 
-  &__role-filter {
-    width: 130px;
-  }
+        <NSpace :size="8">
+          <NSelect
+            v-model:value="roleFilter"
+            clearable
+            class="user__role-filter"
+            placeholder="全部角色"
+            :options="roleFilterOptions"
+            :disabled="needPickTenant"
+            @update:value="search"
+          />
+          <NInput
+            v-model:value="query.keyword"
+            clearable
+            class="user__search"
+            placeholder="搜索姓名或账号"
+            :disabled="needPickTenant"
+            @keyup.enter="search"
+            @clear="search"
+          />
+        </NSpace>
+      </div>
 
-  &__search {
+      <div class="page-card__body">
+        <NDataTable
+          flex-height
+          style="height: 100%"
+          remote
+          :columns="columns"
+          :data="list"
+          :loading="loading"
+          :row-key="row => row.id"
+          :scroll-x="700"
+          :pagination="pagination"
+          size="small"
+          @update:page="onPage"
+          @update:page-size="onPageSize"
+        />
+      </div>
+    </NCard>
+
+    <UserFormModal ref="formModalRef" :tenant-id="acting.tenantId" @save-success="load" />
+    <UserImportModal ref="importModalRef" :tenant-id="acting.tenantId" @save-success="load" />
+
+    <!-- 重置密码结果：与创建一样，**只显示这一次** -->
+    <NModal
+      v-model:show="resetVisible"
+      preset="card"
+      title="密码已重置"
+      style="width: 460px"
+      :mask-closable="false"
+      :closable="false"
+    >
+      <NAlert type="success" :show-icon="false">
+        账号 <strong>{{ resetResult?.username }}</strong> 的密码已重置。
+        该账号此前的<strong>登录锁定也已一并解除</strong>。
+      </NAlert>
+
+      <div class="user__pwd-box">
+        <div class="user__pwd-row">
+          <code class="user__pwd">{{ resetResult?.newPassword }}</code>
+          <NButton type="primary" @click="copyResetPassword">
+            复制
+          </NButton>
+        </div>
+        <NAlert type="warning" :show-icon="false" class="user__pwd-warn">
+          <strong>只显示这一次。</strong>关闭后无法再查看，请现在发给本人。
+        </NAlert>
+      </div>
+
+      <div class="user__footer">
+        <NButton type="primary" @click="resetVisible = false">
+          我已记下密码
+        </NButton>
+      </div>
+    </NModal>
+  </div>
+</template>
+
+<style scoped>
+/**
+ * 主从两栏：左组织树 / 右账号列表**各是一张卡片**（外观由全局 `.n-card.n-card` 给），
+ * 中间 16px 是 `--xt-gap` —— 上一版两块都贴在白底页面上、只差 12px，
+ * 中间没有任何边界，看起来是一整块。
+ *
+ * ⚠️ 两栏都带全局 `page-card` 撑满内容区，页面不再自己写 `calc(100vh - 56px - 28px)`：
+ *    那个 28px 与内容区实际内边距（16×2）差 4px，会让整页多出一条滚动条。
+ */
+.md {
+  display: flex;
+  gap: var(--xt-gap);
+}
+
+/**
+ * 左栏：`flex: none` + 基准宽度（220~260 之间）。窄屏收窄一档 ——
+ * 不让它自由伸缩：右表有 `min-width: 0` 可以缩，树被压扁反而读不了。
+ */
+.md__side {
+  flex: none;
+  width: 240px;
+}
+
+/* 与「组织架构」同一档，切页面时左栏宽度不跳 */
+@media (max-width: 1100px) {
+  .md__side {
     width: 220px;
   }
+}
 
-  &__name {
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
+/* 左栏内容：「全部账号」固定在顶部，树占满剩余高度并**自己滚** */
+.md__side-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
 
-  &__account {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
+/**
+ * NSpin 自带 container / content 两层 div（默认都不是 flex）——
+ * 不把 flex 链透下去，树就没有可分配的父高度，滚动条不出现、卡片被内容顶高。
+ */
+.md__spin {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
 
-  &__mono {
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 13px;
-  }
+.md__spin :deep(.n-spin-content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
 
-  &__muted {
-    color: var(--color-text-3);
-  }
+.md__tree {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
 
-  /** 与状态标签同列的"最后登录"小字 */
-  &__lastlogin {
-    margin-top: 4px;
-    font-size: 11px;
-    line-height: 1.5;
-  }
+/* 树的字号比正文小一档：左栏只有 220~240px，14px 下"班级名 + 类型标签"必然折成两行 */
+.md__tree :deep(.n-tree) {
+  font-size: 13px;
+}
 
-  &__pwd-box {
-    margin: 16px 0 0;
-  }
+/* 原生滚动条在浅色卡片上是一道深色竖杠，收窄 + 调浅（Chromium 专属伪元素） */
+.md__tree::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
 
-  &__pwd-row {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
+.md__tree::-webkit-scrollbar-thumb {
+  background: #d8dde5;
+  border-radius: 4px;
+}
 
-  &__pwd {
-    flex: 1;
-    padding: 8px 12px;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 18px;
-    letter-spacing: 2px;
-    background: var(--color-fill-2);
-    border-radius: 4px;
-  }
+.md__tree::-webkit-scrollbar-track {
+  background: transparent;
+}
 
-  &__pwd-warn {
-    margin-top: 10px;
-  }
+/**
+ * 树的「轻选中」。
+ *
+ * naive 默认把选中态画成**整行实心色块**（`block-line` 下 `--n-node-color-active` 铺满整行、
+ * 连缩进区一起染），比右边表格的行选中还重。这里改成：极浅蓝底 + 主色文字 + 左侧 3px 竖条。
+ *
+ * ⚠️ 覆盖的是 naive 的**内部类**：组件样式由 css-render 在**运行时**注入 <head>，
+ *    与本 SFC 的样式先后顺序不保证 —— 所以 ① 显式写它的 CSS 变量、
+ *    ② 把类名重复一遍提到 (0,4,0) 权重兜底（naive 自己是 `.n-tree--block-line .n-tree-node--selected`）。
+ *    `.n-tree-node` 自带 `position: relative`，竖条用绝对定位的 `::before` 即可。
+ */
+.md__tree :deep(.n-tree-node.n-tree-node--selected) {
+  --n-node-color-active: #eef4ff;
 
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
+  background: #eef4ff;
+}
+
+.md__tree :deep(.n-tree-node.n-tree-node--selected)::before {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: 0;
+  width: 3px;
+  content: '';
+  background: #0052d9;
+  border-radius: 0 2px 2px 0;
+}
+
+.md__tree :deep(.n-tree-node.n-tree-node--selected .n-tree-node-content__text) {
+  font-weight: 500;
+  color: #0052d9;
+}
+
+.md__empty {
+  padding: 24px 0;
+}
+
+/* 卡片头里的「图标 + 文字」：靠 flex gap 对齐，比 inline 元素之间的空格可控 */
+.md__side-head {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.md__main {
+  flex: 1;
+  min-width: 0;
+}
+
+.user__title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+/* 尺寸与工具条里的默认尺寸控件保持一致（同一行不要大小混用） */
+.user__role-filter {
+  width: 170px;
+}
+
+.user__search {
+  width: 210px;
+}
+
+.user__name,
+:deep(.user__name) {
+  font-weight: 500;
+}
+
+.user__account,
+:deep(.user__account) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.user__muted,
+:deep(.user__muted) {
+  font-size: 12px;
+  color: var(--xt-text-3);
+}
+
+.user__mono,
+:deep(.user__mono) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+
+.user__lastlogin,
+:deep(.user__lastlogin) {
+  margin-top: 2px;
+}
+
+/* 卡片内部的浅灰小格子（弹窗本身已经是一张卡片，这里不再套一层） */
+.user__pwd-box {
+  padding: 12px;
+  margin-top: 14px;
+  background: var(--xt-band-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 8px;
+}
+
+.user__pwd-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.user__pwd {
+  flex: 1;
+  padding: 6px 10px;
+  font-size: 15px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: 0.06em;
+  background: var(--xt-card-bg);
+  border: 1px solid var(--xt-card-border-weak);
+  border-radius: 4px;
+}
+
+.user__pwd-warn {
+  margin-top: 10px;
+}
+
+.user__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
 }
 </style>
diff --git a/frontend-pc/stylelint.config.js b/frontend-pc/stylelint.config.js
deleted file mode 100644
index b73dd56..0000000
--- a/frontend-pc/stylelint.config.js
+++ /dev/null
@@ -1,44 +0,0 @@
-export default {
-  ignoreFiles: [
-    'node_modules/**/*',
-    'dist/**/*',
-    'public/**/*'
-  ],
-  plugins: ['stylelint-scss'],
-  extends: [
-    'stylelint-config-standard', // 基础 CSS 规则
-    'stylelint-config-standard-scss', // SCSS 推荐规则
-    'stylelint-config-recommended-vue/scss', // Vue + SCSS 推荐规则（自动适配 scoped）
-    'stylelint-config-recess-order' // 配置 stylelint css 属性书写顺序插件
-  ],
-  rules: {
-    // 禁用导致错误的规则
-    'scss/double-slash-comment-empty-line-before': null, // 禁止在双斜杠注释前有空行
-    'scss/operator-no-unspaced': null, // 运算符周围需要空格
-    'scss/load-partial-extension': null, // 禁止在@use指令中使用.scss扩展名
-    'scss/double-slash-comment-whitespace-inside': null, // 双斜杠注释内部需要空格
-    'scss/dollar-variable-empty-line-before': null, // $变量前需要空行
-    'scss/at-rule-conditional-no-parentheses': null, // @规则条件不使用括号
-    'no-descending-specificity': null, // 禁止选择器优先级降低
-    'declaration-block-no-duplicate-properties': null, // 禁止声明块中重复的属性
-    'keyframes-name-pattern': null, // 限制keyframes名称格式
-    'number-max-precision': null, // 禁用数字精度限制规则
-    'import-notation': null, // 导入语法格式
-    'font-family-no-missing-generic-family-keyword': null, // 字体族必须包含通用字体族
-    'custom-property-empty-line-before': null, // 自定义属性前空行规则
-    'declaration-empty-line-before': null, // 声明前空行规则
-    // 其他基础规则
-    'no-empty-source': null, // 禁止空源码
-    'selector-class-pattern': null // 强制选择器类名的格式
-  },
-  overrides: [
-    {
-      files: ['**/*.vue'],
-      customSyntax: 'postcss-html'
-    },
-    {
-      files: ['**/*.scss'],
-      customSyntax: 'postcss-scss'
-    }
-  ]
-}
diff --git a/frontend-pc/tsconfig.json b/frontend-pc/tsconfig.json
index 36a1f41..636ae68 100644
--- a/frontend-pc/tsconfig.json
+++ b/frontend-pc/tsconfig.json
@@ -1,42 +1,31 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
-    "target": "ES2020", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
-    "jsx": "preserve", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
-    "jsxFactory": "h", // 当使用经典的JSX运行时，更改.js文件中调用的函数，默认：React.createElement
-    "jsxFragmentFactory": "Fragment", // 指定 JSX 片段工厂函数
-    "lib": [
-      "ES2022",
-      "DOM"
-    ], // 指定要包含在编译中的库文件。必须含 ES2022 ——
-    // gi-demo 的 useBreakpoint / useTabsStore 用了 Array.prototype.at()，
-    // 停在 ES2020 会让 `pnpm typecheck` 报 TS2550（运行期是好的：Vite 按浏览器实际能力打包）
-    "baseUrl": ".", // 用于解析非相对模块名称的基目录
-    "module": "ES2020", //
+    "target": "ESNext",
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "module": "ESNext",
     "moduleResolution": "bundler",
     "paths": {
-      "@/*": [
-        "src/*"
-      ] // 模块名到基于 baseUrl 的路径映射的列表
+      "@/*": ["src/*"],
+      "~/*": ["./*"]
     },
-    "resolveJsonModule": true, // 是否解析 JSON 文件
-    "allowJs": true, // 允许编译 javascript 文件
-    "checkJs": true, // 报告 javascript 文件中的错误
-    "strict": true, // 开启所有严格的类型检查
-    "noImplicitAny": false,
-    "sourceMap": true, // 是否生成相应的Map映射的文件，默认：false
-    "esModuleInterop": true, // 是否通过为所有导入模块创建命名空间对象，允许CommonJS和ES模块之间的互操作性
-    "skipLibCheck": true, // 是否跳过声明文件的类型检查
-    "ignoreDeprecations": "5.0" // 消除 importsNotUsedAsValues 的弃用报错
+    "resolveJsonModule": true,
+    "types": ["vite/client", "node"],
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
   },
   "include": [
-    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
     "src/**/*.vue",
     "vite.config.ts"
-  ], // 指定被编译文件所在的目录
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.js"
-  ] // 指定不需要被编译的目录
+  ],
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/frontend-pc/vite.config.ts b/frontend-pc/vite.config.ts
index c611e94..d4a4a10 100644
--- a/frontend-pc/vite.config.ts
+++ b/frontend-pc/vite.config.ts
@@ -1,115 +1,41 @@
 import { fileURLToPath, URL } from 'node:url'
 import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import AutoImport from 'unplugin-auto-import/vite'
-import IconsResolver from 'unplugin-icons/resolver'
-import Icons from 'unplugin-icons/vite'
-import { ArcoResolver } from 'unplugin-vue-components/resolvers'
-import Components from 'unplugin-vue-components/vite'
 import { defineConfig, loadEnv } from 'vite'
-import vitePluginCompression from 'vite-plugin-compression'
-import VueDevTools from 'vite-plugin-vue-devtools'
 
+/**
+ * 管理端（Vue 3 + Naive UI）构建配置。
+ *
+ * ⚠️ 与上一版（Gi Admin Pro + Arco）的差别：**没有** unplugin-auto-import /
+ * unplugin-vue-components / Arco 解析器。理由有两个：
+ *   1. 组件与 API 全部**显式 import** —— vue-tsc 看到的就是真的，
+ *      不依赖"生成但不一定提交/更新"的 `components.d.ts`；
+ *   2. 少一层构建期魔法：出问题时读代码就能定位。
+ */
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd()) as ImportMetaEnv
+  const env = loadEnv(mode, process.cwd())
 
   return {
-    // 开发或生产环境服务的公共基础路径
-    base: env.VITE_BASE,
-    // 路径别名
+    base: env.VITE_BASE || '/',
     resolve: {
       alias: {
         '~': fileURLToPath(new URL('./', import.meta.url)),
         '@': fileURLToPath(new URL('./src', import.meta.url))
-      },
-      // 确保正确解析模块
-      dedupe: ['vue', '@arco-design/web-vue']
-    },
-    // 依赖优化配置
-    optimizeDeps: {
-      include: ['@arco-design/color']
-    },
-    // 引入scss全局样式变量
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: `@use "@/styles/var.scss" as *;`
-        }
       }
     },
     server: {
-      // 服务启动时是否自动打开浏览器
-      open: false,
-      // 本地跨域代理 -> 代理到服务器的接口地址
+      port: 5173,
       proxy: {
+        // 本地开发：/api → Spring Boot 8080（本仓库没有 Mock，见 AGENTS.md）
         '/api': {
-          target: env.VITE_API_BASE_URL, // 后台服务器地址
-          changeOrigin: true, // 是否允许不同源
-          secure: false, // 支持https
-          rewrite: (path) => path.replace(/^\/api/, '/api')
+          target: env.VITE_API_BASE_URL,
+          changeOrigin: true
         }
       }
     },
-    plugins: [
-      vue(),
-      vueJsx(),
-      VueDevTools(),
-      AutoImport({
-        // 自动导入vue相关函数，如: ref、reactive、toRef等
-        imports: ['vue', 'vue-router', {
-          // vue 3.5.x
-          vue: ['useTemplateRef', 'onWatcherCleanup', 'useId']
-        }],
-        dts: 'src/auto-import.d.ts'
-      }),
-      Components({
-        // 指定组件位置，默认是 src/components 自动导入自定义组件
-        dirs: ['src/components/Gi*'],
-        extensions: ['vue', 'tsx'],
-        // 配置文件生成位置
-        dts: 'src/components.d.ts',
-        // Arco Design Vue 按需导入配置（使用官方推荐的 ArcoResolver）
-        resolvers: [
-          ArcoResolver({
-            sideEffect: false
-          }),
-          // Iconify 图标按需导入
-          IconsResolver({
-            prefix: 'icon',
-            enabledCollections: ['icon-park-outline']
-          })
-        ]
-      }),
-      // Iconify 图标插件配置
-      Icons({
-        compiler: 'vue3',
-        autoInstall: true,
-        defaultClass: 'iconify-icon',
-        defaultStyle: 'vertical-align: middle;'
-      }),
-      // Gzip 压缩配置
-      vitePluginCompression({
-        verbose: true, // 是否在控制台输出压缩结果
-        disable: false, // 是否禁用压缩
-        deleteOriginFile: false, // 压缩后是否删除原文件
-        threshold: 10240, // 压缩阈值，单位：字节，超过此大小的文件才会被压缩（10KB）
-        algorithm: 'gzip', // 压缩算法，可选 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'
-        ext: '.gz', // 压缩文件扩展名
-        filter: /\.(js|mjs|json|css|html|svg|ico|eot|otf|ttf|ttc|woff|woff2)$/i // 需要压缩的文件类型
-      })
-    ],
-    // 构建
     build: {
-      chunkSizeWarningLimit: 2000
+      outDir: 'dist',
+      chunkSizeWarningLimit: 1500
     },
-    // 生产环境优化
-    esbuild:
-      mode === 'development'
-        ? undefined
-        : {
-          pure: ['console.log'],
-          drop: ['debugger'],
-          legalComments: 'none'
-        }
+    plugins: [vue()]
   }
 })
diff --git a/scripts/extract-pc-icons.py b/scripts/extract-pc-icons.py
new file mode 100644
index 0000000..af5324c
--- /dev/null
+++ b/scripts/extract-pc-icons.py
@@ -0,0 +1,133 @@
+# -*- coding: utf-8 -*-
+"""从 @iconify-json/icon-park-outline 里抽出**本项目实际用到的那几十个图标**，
+生成 `frontend-pc/src/icons/icon-data.ts`。
+
+为什么不直接依赖 `@iconify/vue` + 在线 API：
+  1. 这套系统要能**内网离线部署**，运行时去 iconify 拉图标会白屏；
+  2. 整包 `icons.json` 有 4MB+，为了 20 个图标打进产物不划算。
+
+所以：构建前跑一次本脚本（图标集升级时重跑），产物是一个纯数据的 TS 文件。
+"""
+from __future__ import annotations
+
+import json
+import os
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+SRC = os.path.join(ROOT, "frontend-pc", "node_modules",
+                   "@iconify-json", "icon-park-outline", "icons.json")
+OUT = os.path.join(ROOT, "frontend-pc", "src", "icons", "icon-data.ts")
+
+# 键 = 前端用的短名；值 = iconify 集合里的图标名
+WANTED = {
+    # ── 菜单与分组 ─────────────────────────────
+    "dashboard": "dashboard-one",
+    "collect": "application-two",
+    "setting": "setting-two",
+    "org-group": "every-user",
+    "platform": "server",
+    "task": "list-two",
+    "audit": "check-one",
+    "export": "download-two",
+    "notify": "remind",
+    "dict": "list-two",
+    "org": "tree-list",
+    "user": "peoples",
+    "role": "permissions",
+    "tenant": "school",
+    "log": "log",
+    # ── 通用动作 ───────────────────────────────
+    "fold": "menu-fold-one",
+    "unfold": "menu-unfold-one",
+    "account": "user",
+    "logout": "logout",
+    "refresh": "refresh",
+    "plus": "plus",
+    "search": "search",
+    "close": "close",
+    "check": "check",
+    "warning": "caution",
+    "info": "info",
+    "download": "download",
+    "upload": "upload",
+    "edit": "edit",
+    "delete": "delete",
+    "more": "more",
+    "arrow-down": "down",
+    "file": "file-text",
+    "photo": "picture-one",
+    "idcard": "id-card",
+    "school-roll": "book-one",
+    "work-proof": "doc-detail",
+}
+
+
+def main() -> int:
+    if not os.path.exists(SRC):
+        print(f"找不到图标集：{SRC}\n（先 cd frontend-pc && pnpm install）")
+        return 1
+
+    with open(SRC, encoding="utf-8") as f:
+        data = json.load(f)
+    icons = data.get("icons") or {}
+    aliases = data.get("aliases") or {}
+
+    out: dict[str, dict] = {}
+    missing: list[str] = []
+    for short, name in WANTED.items():
+        node = icons.get(name)
+        if node is None and name in aliases:
+            parent = aliases[name].get("parent")
+            node = icons.get(parent) if parent else None
+        if node is None:
+            missing.append(name)
+            continue
+        out[short] = {
+            "body": node["body"],
+            "width": node.get("width", data.get("width", 48)),
+            "height": node.get("height", data.get("height", 48)),
+        }
+
+    os.makedirs(os.path.dirname(OUT), exist_ok=True)
+    lines = [
+        "/**",
+        " * 菜单与通用图标的数据（由 scripts/extract-pc-icons.py 生成，**不要手改**）。",
+        " *",
+        f" * 来源：@iconify-json/icon-park-outline（{data.get('info', {}).get('name', '?')}），",
+        f" * 只抽了本项目实际用到的 {len(out)} 个，避免把 4MB 的整包打进来。",
+        " */",
+        "",
+        "export interface IconData {",
+        "  body: string",
+        "  width: number",
+        "  height: number",
+        "}",
+        "",
+        "export const ICONS: Record<string, IconData> = {",
+    ]
+    for short in WANTED:
+        if short not in out:
+            continue
+        node = out[short]
+        body = node["body"].replace("\\", "\\\\").replace("'", "\\'")
+        lines.append(f"  '{short}': {{")
+        lines.append(f"    body: '{body}',")
+        lines.append(f"    width: {node['width']},")
+        lines.append(f"    height: {node['height']}")
+        lines.append("  },")
+    lines.append("}")
+    lines.append("")
+
+    with open(OUT, "w", encoding="utf-8", newline="\n") as f:
+        f.write("\n".join(lines))
+
+    print(f"已生成 {os.path.relpath(OUT, ROOT)}：{len(out)} 个图标")
+    if missing:
+        print("⚠️ 集合里没有这些图标（已跳过，请改名或换一个）：")
+        for m in missing:
+            print(f"   - {m}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())