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-*/
85 lines
3.3 KiB
Markdown
85 lines
3.3 KiB
Markdown
# IT智能服务台 — 现有前端视觉评价
|
||
|
||
> **版本**: v1.0
|
||
> **日期**: 2026-07-10
|
||
> **作者**: 宋献
|
||
> **类型**: 技术 - 前端改造
|
||
> **源自**: 方案-前端评价与推广-v1.0.md
|
||
|
||
---
|
||
|
||
## 一、整体品牌一致性：60/100
|
||
|
||
| 维度 | 现状 | 问题 |
|
||
|------|------|------|
|
||
| 色彩体系 | H5 端用「企微绿 + 浅灰」；坐席端用「绿 + 白」；管理后台用「深色卡片 + 高饱和点缀」 | 三端像三套系统，没有统一的品牌记忆点 |
|
||
| 字体层级 | 标题/正文/辅助文字差异不够大，靠颜色而不是字号/字重区分 | 信息密度高时容易"糊成一团" |
|
||
| 圆角与按钮 | 基本使用 Element Plus / Vant 4 默认圆角，没有定制 | 品牌感弱，像"通用后台" |
|
||
| 图标语言 | 混用 emoji、线框图标、填充图标 | 视觉语言不统一 |
|
||
|
||
---
|
||
|
||
## 二、分端评价
|
||
|
||
### 2.1 H5 员工端（浅色）
|
||
|
||
**优点：**
|
||
- 入口清晰：呼叫、主题切换、帮助都在顶部
|
||
- 右侧辅助信息丰富：处理指南、申请流程、常用资源
|
||
- 底部输入区功能完整：表情、附件、语音、发送
|
||
|
||
**问题：**
|
||
- 右侧边栏占据约 40% 宽度，导致主聊天区显得拥挤
|
||
- "正在获取身份信息…" 这种空白状态太赤裸，像系统卡住了
|
||
- 输入框 placeholder 文案重复：底部同时出现"请输入消息…"和"请描述你遇到的问题，AI 助手会帮你分析"
|
||
- 头像/状态图标偏小，点击目标不够大
|
||
- 趣味问答模块在当前场景下与主任务无关，容易干扰
|
||
|
||
**建议总分：62/100**
|
||
|
||
### 2.2 坐席端工作台
|
||
|
||
**优点：**
|
||
- 三栏结构符合工单类产品直觉
|
||
- 顶部快捷操作（置顶、待办、转接、结束）便于一线操作
|
||
- 右侧 AI 推荐提供了坐席需要的辅助能力
|
||
|
||
**问题：**
|
||
- 信息密度过高，三栏都塞满内容，坐席视觉压力大
|
||
- 右侧三个面板（生成回复、知识库、排查流程）各占一列，但每个面板内容很少，空间利用率低
|
||
- 聊天区绿色气泡与 AI 回答的绿底色混在一起，没有区分"用户/AI/坐席"三种消息来源
|
||
- 标签、按钮、状态徽标太多，没有视觉降噪
|
||
- 左侧会话列表中，用户头像、星级、消息预览、未读数、标签挤在一起
|
||
|
||
**建议总分：58/100**
|
||
|
||
### 2.3 管理后台（深色）
|
||
|
||
**优点：**
|
||
- 深色主题适合长时间监控场景
|
||
- 运营总览数据卡片清晰，核心指标突出
|
||
- 系统健康状态一目了然
|
||
|
||
**问题：**
|
||
- 深色模式对比度需要校验（部分文字可能低于 WCAG 4.5:1）
|
||
- 卡片边框/阴影弱，层次靠颜色区分，夜间长时间观看易疲劳
|
||
- 导航图标与文字对齐有轻微偏差（如"会话监控""坐席绩效"）
|
||
- 顶部报错提示"提示的资源不存在"破坏整体专业感（需后端配合修复）
|
||
|
||
**建议总分：70/100**
|
||
|
||
---
|
||
|
||
## 三、核心设计问题总结
|
||
|
||
1. **三端风格割裂**：H5、坐席、后台像三个团队做的
|
||
2. **信息密度失控**：坐席端尤其严重，一次看 5 个以上信息源
|
||
3. **品牌感弱**：除绿色外，没有独特的视觉符号
|
||
4. **空状态/负面状态处理差**："正在获取身份信息…"这类状态没有引导感
|
||
5. **深色模式未深度定制**：H5 深色只是反色，绿色气泡在深色上可能刺眼
|
||
|
||
---
|
||
|
||
> **关联文档**：
|
||
> - 前端改造建议: `02-技术文档/前端改造/前端改造建议-v1.0.md`
|