Files
wecom_it_smart_desk/docs/02-技术文档/前端改造/前端视觉评价-v1.0.md
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

3.3 KiB
Raw Blame History

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