chore: docs 结构整改 + compose 双目录对齐(合并重建提交)

本提交为 .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-*/
This commit is contained in:
Simon
2026-08-07 22:31:32 +08:00
parent 5a77a89ab1
commit facc04aa65
573 changed files with 129347 additions and 909 deletions
@@ -0,0 +1,132 @@
# 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
│ └── 组件内 padding12/16,卡片 padding16/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)
└── 动效系统
├── 快速 150mshover/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`