Simon
44e77dcb0e
**重构前**（旧编号 02-11）： - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计（HTML 原型） - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书（重复） - docs/11-历史归档/ → deploy-nas-archived **重构后**（新编号 00-07，语义化）： - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ （PRD/原型/认证/会话/AI 服务/坐席/集成） - docs/02-技术文档/ （技术方案/架构图/重构记录/前端改造/实现配置） - docs/03-测试文档/ （E2E/功能用例/版本报告/缺陷单） - docs/04-运维文档/ （部署运维/运维指南） - docs/05-运营文档/ （品牌推广/用户手册） - docs/06-安全审计/ （审计报告） - docs/07-项目管理/ （任务说明书/日报/计划/看板） **净收益**： - 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号） - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录） - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
133 lines
5.2 KiB
Markdown
133 lines
5.2 KiB
Markdown
# IT智能服务台 — 前端改造建议
|
||
|
||
> **版本**: v1.1
|
||
> **日期**: 2026-07-10
|
||
> **作者**: 宋献
|
||
> **类型**: 技术 - 前端改造
|
||
> **源自**:
|
||
> - 方案-全套改造建议与推广-v1.0.md
|
||
> - 方案-前端评价与推广-v1.0.md
|
||
> **合并说明**: 本文档整合了两个方案文档中的前端改造建议内容
|
||
|
||
---
|
||
|
||
## 一、当前问题诊断
|
||
|
||
| 端 | 技术栈 | 主要问题 |
|
||
|----|--------|---------|
|
||
| H5端 | Vue3 + Vant4 | 功能完善但视觉老旧，参与者列表占空间大，缺少引导动画 |
|
||
| 坐席端 | Vue3 + Element Plus | 三栏工作台信息密度高但层次不清，组件风格不统一 |
|
||
| 管理后台 | Vue3 + Element + Tailwind | 功能齐全但数据可视化弱，仪表盘缺乏设计感 |
|
||
|
||
---
|
||
|
||
## 二、改造方案：统一设计系统
|
||
|
||
### 2.1 核心原则
|
||
|
||
一套设计令牌，三端共享，各自适配。
|
||
|
||
### 2.2 设计令牌层（Design Tokens）
|
||
|
||
```
|
||
设计令牌层（Design Tokens）
|
||
├── 色彩系统
|
||
│ ├── 主色 #07C160（企微绿，已在用）
|
||
│ ├── 辅助色 #3b82f6（坐席蓝）/ #FF9800（发起人橙）
|
||
│ ├── 语义色 success/warning/danger/info
|
||
│ └── 中性色 9级灰阶
|
||
├── 排版系统
|
||
│ ├── 字体：PingFang SC / Microsoft YaHei
|
||
│ ├── 字号：12/13/14/15/16/20/24/30
|
||
│ └── 行高：1.4/1.5/1.6
|
||
├── 间距系统
|
||
│ ├── 基准 4px，刻度 4/8/12/16/20/24/32/48
|
||
│ └── 组件内 padding：12/16，卡片 padding：16/20
|
||
├── 圆角系统
|
||
│ ├── sm 6px / md 8px / lg 12px / xl 16px / full 999px
|
||
│ └── 按钮用 md，卡片用 lg，弹窗用 xl
|
||
├── 阴影系统（克制使用）
|
||
│ ├── sm 0 1px 2px rgba(0,0,0,0.04)
|
||
│ ├── md 0 2px 8px rgba(0,0,0,0.06)
|
||
│ └── lg 0 4px 16px rgba(0,0,0,0.08)
|
||
└── 动效系统
|
||
├── 快速 150ms（hover/press）
|
||
├── 标准 200ms（展开/收起）
|
||
└── 慢速 300ms（弹窗/页面过渡）
|
||
```
|
||
|
||
---
|
||
|
||
## 三、三端改造重点
|
||
|
||
| 端 | 改造重点 | 预期效果 |
|
||
|----|---------|---------|
|
||
| H5端 | 1. 群聊双模式落地 2. 首屏加载骨架屏 3. 消息发送动画 4. 空状态插画 5. 下拉刷新体验 | 聊天区域空间释放40%，视觉年轻化 |
|
||
| 坐席端 | 1. 三栏布局优化（可拖拽分栏） 2. 会话列表卡片重设计 3. 排查流程图可视化 4. 快捷键体系 5. 暗色模式 | 信息层次清晰，坐席效率提升 |
|
||
| 管理后台 | 1. 仪表盘数据可视化升级 2. 图表组件统一 3. 表格密度可调 4. 筛选器重设计 | 管理层数据一目了然 |
|
||
|
||
---
|
||
|
||
## 四、改造执行路径
|
||
|
||
```
|
||
Phase 1: 设计系统建立（2周）
|
||
→ 产出 design-tokens.css + 组件规范文档
|
||
→ 由设计原型专家团执行（design-system-expert + prototype-builder）
|
||
|
||
Phase 2: H5端改造（3周）
|
||
→ 群聊双模式 + 视觉升级 + 动效
|
||
→ 逐页面替换旧样式
|
||
|
||
Phase 3: 坐席端改造（3周）
|
||
→ 布局优化 + 组件升级 + 排查流程图
|
||
→ 与H5端并行，互不阻塞
|
||
|
||
Phase 4: 管理后台改造（2周）
|
||
→ 仪表盘 + 图表 + 表格
|
||
→ 最后做，依赖前两端的组件沉淀
|
||
|
||
Phase 5: 联调与验收（1周）
|
||
→ 三端视觉一致性检查
|
||
→ 性能回归测试
|
||
```
|
||
|
||
---
|
||
|
||
## 五、知识图谱可视化（配合 Slogan）
|
||
|
||
为了让"7 次选择找到答案"有直观表达，建议新增：
|
||
|
||
| 端 | 改造内容 | 预期效果 |
|
||
|----|---------|---------|
|
||
| **H5 端** | 当 AI 给出答案时，在答案顶部显示一条「知识路径」：问题 → 网络 → VPN → 零信任 → 密码 → 账户锁定 → 解锁步骤，用横向节点图表示，最多 7 个节点，当前节点高亮 | 用户直观理解AI推理过程 |
|
||
| **坐席端** | 知识库引用面板增加「知识图谱」Tab，展示问题关联的知识点网络 | 坐席快速定位相关知识 |
|
||
| **管理后台** | 增加「知识图谱健康度」看板，展示知识节点覆盖率、关联度、7跳可达率 | 管理层掌握知识库质量 |
|
||
|
||
## 六、技术层面建议
|
||
|
||
| 建议 | 理由 |
|
||
|------|------|
|
||
| **A/B测试框架** | AI回复策略、置信度阈值等可A/B测试，数据驱动调优 |
|
||
| **灰度发布机制** | 前端改造分批灰度，降低全量发布风险 |
|
||
| **性能监控** | 接入前端性能监控（首屏时间、WS连接稳定性），量化体验提升 |
|
||
|
||
---
|
||
|
||
## 七、改造优先级总览
|
||
|
||
| 阶段 | 时间 | 内容 | 影响 |
|
||
|------|------|------|------|
|
||
| 近期（1-2 周） | 设计系统 v1.0 | 统一色彩、字体、圆角、图标 | 三端开始像一套产品 |
|
||
| 近期（3-4 周） | H5 结构优化 | 底部导航、浮层、空状态 | 员工体验提升最明显 |
|
||
| 中期（5-8 周） | 坐席端重构 | 三栏降噪、AI 面板合并、专注模式 | 坐席效率提升 |
|
||
| 中期（9-12 周） | 管理后台精调 | 深色模式对比度、数据可视化 | 运维体验提升 |
|
||
| 远期 | 知识图谱可视化 | H5/坐席/后台三端知识路径展示 | 支撑 Slogan 心智 |
|
||
|
||
---
|
||
|
||
> **关联文档**：
|
||
> - 产品功能层面: `01-产品文档/00-产品规划/全套改造建议-产品功能层面-v1.0.md`
|
||
> - 技术架构优化: `02-技术文档/技术架构/技术架构优化建议-v1.0.md`
|
||
> - 前端视觉评价: `02-技术文档/前端改造/前端视觉评价-v1.0.md`
|