Files

T

Simon facc04aa65 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-*/

2026-08-07 22:31:32 +08:00

5.2 KiB

Raw Blame History

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

5.2 KiB Raw Blame History Unescape Escape

IT智能服务台 — 前端改造建议

一、当前问题诊断

二、改造方案：统一设计系统

2.1 核心原则

2.2 设计令牌层（Design Tokens）

三、三端改造重点

四、改造执行路径

五、知识图谱可视化（配合 Slogan）

六、技术层面建议

七、改造优先级总览

5.2 KiB

Raw Blame History