wecom_it_smart_desk/docs/02-技术文档/技术方案-REQ-集成-002-管理后台v1.2-分配模式Tab收编.md

技术方案 — 管理后台 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）

- {
-   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：

<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 数据，直接显示当前在岗人数，免去跨页比对：

const { agentStore } = useAgentStore()
agentStore.loadAgents()  // Tab 2 进入时若未加载则补一次

3.3 旧页面处理（src/frontend-admin/src/views/AssignmentMode.vue）

保留文件但停用（不删除），方便阶段二/三分配策略膨胀时回滚为独立页：

// 未来回滚步骤（约 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 配套技术方案）	宋献