Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
162 lines
6.0 KiB
Markdown
162 lines
6.0 KiB
Markdown
# 技术方案 — 管理后台 v1.2 分配模式 Tab 收编
|
||
|
||
> **版本**: v1.0 | **日期**: 2026-07-28
|
||
> **作者**: 宋献
|
||
> **关联 PRD**: `docs/01-产品文档/08-集成生态/PRD-REQ-集成-002-管理后台-v1.0.md`（v1.2）
|
||
> **关联原型**: `docs/01-产品文档/08-集成生态/原型-REQ-集成-000-管理后台-v1.0.html`
|
||
> **任务说明书**: `docs/07-项目管理/任务说明书/任务说明书-REQ-集成-002-分配模式Tab收编.md`
|
||
> **状态**: 待评审 / 待实施
|
||
|
||
---
|
||
|
||
## 1. 目标
|
||
|
||
把「消息分配模式」从管理后台的独立菜单页（`/admin/assignment-mode`）收编为「坐席管理」页（`/admin/agents`）的第二个 Tab「分配策略」，使解锁条件（依赖坐席人数）可在同页可见，**不欠技术债**。
|
||
|
||
---
|
||
|
||
## 2. 改动范围
|
||
|
||
| 模块 | 改动 | 复杂度 |
|
||
|------|------|--------|
|
||
| 路由 | 删除 `/admin/assignment-mode` 路由项 | S |
|
||
| 导航 | 「知识与 AI」组菜单减 1 项（8 → 7） | S |
|
||
| 坐席管理页 | `Agents.vue` 加 `<el-tabs>` + 第 2 个 `<el-tab-pane>` | S |
|
||
| 旧页面 | `AssignmentMode.vue` 保留但停用（防止后续回滚） | S |
|
||
| 后端 API | **不动**（仍走 `system_configs.assignment_mode` + `GET/PUT /api/admin/assignment-mode`） | — |
|
||
| 数据模型 | **不动** | — |
|
||
|
||
**总工作量预估**：0.5–1 人日。
|
||
|
||
---
|
||
|
||
## 3. 前端改造详细设计
|
||
|
||
### 3.1 路由（`src/frontend-admin/src/router/index.ts`）
|
||
|
||
```diff
|
||
- {
|
||
- path: 'assignment-mode',
|
||
- name: 'AssignmentMode',
|
||
- component: () => import('@/views/AssignmentMode.vue'),
|
||
- meta: { title: '消息分配模式', priority: 'P1' },
|
||
- },
|
||
```
|
||
|
||
> 路由组 meta 配置（如 `meta.hidden`、导航分组 `meta.section`）按现有代码风格调整，确保左侧导航不再显示该入口。
|
||
|
||
### 3.2 坐席管理页（`src/frontend-admin/src/views/Agents.vue`）
|
||
|
||
#### 3.2.1 顶层模板改造
|
||
|
||
在 `<AgentTable>` 外层包一个 `<el-tabs v-model="activeTab">`，原页面内容迁入 Tab 1，新增 Tab 2：
|
||
|
||
```vue
|
||
<template>
|
||
<div class="agents-page">
|
||
<div class="page-title">坐席人员管理</div>
|
||
<div class="page-desc">坐席状态、技能标签、权限分级管理。技能标签与快速回复7大类对齐。</div>
|
||
|
||
<el-tabs v-model="activeTab" class="agents-tabs">
|
||
<!-- Tab 1：坐席列表（原页面内容整体迁入） -->
|
||
<el-tab-pane label="坐席列表" name="agents-list">
|
||
<!-- 原 toolbar + AgentTable + 三个 dialog 全部移入此 el-tab-pane -->
|
||
</el-tab-pane>
|
||
|
||
<!-- Tab 2：分配策略（迁移 AssignmentMode.vue 内容） -->
|
||
<el-tab-pane label="分配策略" name="agents-assignment">
|
||
<div class="page-desc" style="margin-bottom:16px">
|
||
<i class="fas fa-info-circle" style="color:var(--accent);margin-right:6px"></i>
|
||
当前坐席 <strong>{{ agentStore.agents.length }}</strong> 人足以承担，手动接单完全满足。后续模式按坐席规模自动解锁。
|
||
</div>
|
||
|
||
<div class="mode-card" :class="..." v-for="mode in modes" :key="mode.id">
|
||
<!-- 直接复用 AssignmentMode.vue 的 mode-card 模板 -->
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
#### 3.2.2 脚本迁移
|
||
|
||
| 来源 | 处理 |
|
||
|------|------|
|
||
| `AssignmentMode.vue` 的 `modes` 数组、`currentMode`、`getModeDescription`、`getLockReason` | 直接复制到 `Agents.vue` 的 `<script setup>` 中 |
|
||
| `getAssignmentMode`、`updateAssignmentMode`（API） | 复用 `@/api/admin` 已有的导出 |
|
||
| `AssignmentMode` 类型 | 复用 `@/types` |
|
||
|
||
#### 3.2.3 引导条
|
||
|
||
Tab 2 顶部加一行引导，**复用 `agentStore` 数据**，直接显示当前在岗人数，免去跨页比对：
|
||
|
||
```ts
|
||
const { agentStore } = useAgentStore()
|
||
agentStore.loadAgents() // Tab 2 进入时若未加载则补一次
|
||
```
|
||
|
||
### 3.3 旧页面处理（`src/frontend-admin/src/views/AssignmentMode.vue`）
|
||
|
||
**保留文件但停用**（不删除），方便阶段二/三分配策略膨胀时回滚为独立页：
|
||
|
||
```ts
|
||
// 未来回滚步骤（约 30 分钟）：
|
||
// 1. router/index.ts 恢复 /admin/assignment-mode 路由
|
||
// 2. 左侧导航恢复菜单项
|
||
// 3. 把 Agents.vue Tab 2 内容整段搬回 AssignmentMode.vue
|
||
// 4. Agents.vue 移除 el-tabs，回到单一 Tab 结构
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 状态/数据流
|
||
|
||
```
|
||
用户点击「分配策略」Tab
|
||
↓
|
||
el-tabs v-model="activeTab" → 'agents-assignment'
|
||
↓
|
||
Tab 2 渲染：6 张模式卡片（modes 数组）
|
||
↓
|
||
onMounted / watch(activeTab)
|
||
↓
|
||
getAssignmentMode() → 更新 currentMode + modes
|
||
↓
|
||
用户点击非锁定卡片 → apiUpdateMode(mode.id) → currentMode 更新
|
||
```
|
||
|
||
**无新增 API**，无新增数据库读写。
|
||
|
||
---
|
||
|
||
## 5. 风险与回滚
|
||
|
||
| 风险 | 概率 | 影响 | 缓解 |
|
||
|------|------|------|------|
|
||
| Tab 切换时 `modes` 数据二次请求 | 低 | 网络浪费 | 用 `watch(activeTab)` 懒加载或一次性加载 |
|
||
| 路由删除后旧菜单链接 404 | 中 | 文档/聊天记录里残留链接 | 原型图已同步删除菜单项，PRD 明确标注 v1.2 起不再独立 |
|
||
| `AssignmentMode.vue` 文件留作僵尸 | 低 | 维护混淆 | 注释中写明"v1.2 起停用，仅供回滚" |
|
||
| 阶段二/三分配模式复杂化需拆回 | 中 | 需重构 | 已记录回滚步骤，30 分钟内可逆 |
|
||
|
||
---
|
||
|
||
## 6. 验证清单
|
||
|
||
| 项 | 方式 |
|
||
|----|------|
|
||
| 路由可达 | 浏览器访问 `/admin/agents`，确认 Tab 1 默认显示，Tab 2 可切换 |
|
||
| 菜单减项 | 左侧「知识与 AI」组无「分配模式」入口 |
|
||
| Tab 2 渲染 | 6 张模式卡片全部显示，"手动接单"高亮+「当前启用」tag |
|
||
| 锁定态 | 其余 5 张卡片 `opacity:0.5` + 锁图标 + 解锁条件文案 |
|
||
| API 兼容 | curl `GET http://localhost:8000/admin/assignment-mode` 返回 `{current_mode, modes}` |
|
||
| 切换功能 | 在手动接单模式下点击（理论上其他模式全锁定），不出现意外报错 |
|
||
| 构建 | `npm run build` 成功，无 TS 报错 |
|
||
|
||
---
|
||
|
||
## 7. 变更日志
|
||
|
||
| 版本 | 日期 | 变更 | 变更人 |
|
||
|------|------|------|--------|
|
||
| v1.0 | 2026-07-28 | 初版（管理后台 v1.2 配套技术方案） | 宋献 | |