Skip to content

Latest commit

 

History

History
198 lines (161 loc) · 18.1 KB

appearance-optimization-20261022.md

File metadata and controls

198 lines (161 loc) · 18.1 KB

外观优化与验收范围(2026-10-22)

这是用户“全方位外观优化”的分阶段记录,不能用一组公共控件或单个页面通过来代表全应用完成。 2026-10-22 22:13(北京时间)用户要求五分钟内收尾本版外观,随后用半小时做性能优化;更深入的优化留到下个版本。 因此本版按已完成修复和实际证据收尾,下表未完成的全量走查与深度优化转入下版本,不冒称已经全部验收。 沿用现有设计和信息架构,不新增产品流程,不通过隐藏内容、删入口或固定主题色规避适配。

共同要求

  • 浅色、深色、跟随系统均有效;深色不是简单取反。
  • 保留用户原色与背景选择,实心文字、强调文字和必要的描边独立派生。
  • 页面保持既有密度与分栏,长文案、窄窗口、工具栏、底部操作区不相互遮挡。
  • 键盘焦点可见;悬停不改变控件尺寸;减少动态效果不丢失功能或状态。
  • 加载、空、失败、在途、禁用和成功分别可辨认,不用假数据或默认结论填空。
  • 复用原图标、头像、图片和既有公共组件,不重造同类控件。

当前覆盖矩阵

范围 当前证据与状态
主题与公共控件 已实施本阶段可读色/焦点/行内布局修正;不能据此覆盖所有旧 CSS
聊天气泡与输入 本阶段验证自定义色、己方文字、公共按钮、窄屏展开输入;转发/卡片/媒体/长回复等仍需逐项走查
设置、帮助与模型配置 日志/主题/版本/备份和导航,以及 API/TTS 配置/模型选择已分阶段验证;其它配置表单仍需完整逐页检查
主窗口、侧栏、工具与联系人列表 已验证会话/联系人选中行、预览和未读徽标的本阶段修正;主窗口、侧栏工具及完整状态仍未完成
个人/群资料、管理浮层 复用既有实现,尚未完成本轮完整外观验收
搜索、收藏、资源、导出与任务列表 尚未完成本轮完整外观验收
空间、邮箱、相册与媒体预览 不以先前功能回执替代本轮统一走查,尚未完成
对话框、菜单、横幅与多层窗口 本阶段覆盖公共确认框和焦点;完整堆叠、长错误和所有窗口仍需走查
启动、账号选择、Native 失败、应用锁与独立 Web 登录 首页、账号菜单、预热、Native 过期、锁屏、桌面登录/导入与恢复启动长内容已分阶段验证;完整异常状态及独立 Web 登录仍待走查
助手/克隆、图表与封面页面 共用颜色工具已接;完整渲染和内容状态尚未完成

静态 CSS 扫描只提供线索:一个文件有固定颜色,不一定是错误(品牌、媒体和状态色可能有意固定); 另一个文件没有减少动态效果规则,也不表示全局覆盖无效。必须结合真实组件和实际层叠确认后再改。

本阶段实施

  • 提取已有 Hex 规范化与 sRGB 混色到 shared/theme_colors.ts,设置选色器、主题状态和助手主题共用; 不引入依赖、不创建第二套主题设置。新增标准亮度对比计算与可读色派生。
  • 实心前景在黑/白间选择,强调字在不改变原色的前提下调整至普通文字对比度; hover 同向增加而不降低实心对比度。派生色只影响实际使用对应 token 的控件,不冒称所有旧样式已迁移。
  • 清除自定义色后,助手桥接发送当前实际预设色,避免主进程仍保留旧色;无效存储值回落默认。
  • 主题动画延迟提交时读取最新主色/背景,并拒绝过时的主题请求;配置恢复也使旧请求失效, 不让动画旧快照覆盖后续设置。
  • 公共按钮、分段选中、主页面导航、己方文字/链接、发送键和确认框接入可读色; 媒体/语音/贴纸纯内容分支不套普通气泡背景。必要焦点、图标尺寸与窄屏设置行单独修正。
  • 浅色描边带中性色基础,避免白色主题把界面边界全部冲掉;语义危险按钮和已有中性按钮保留各自覆盖。
  • PostCSS 与值 AST 精确识别“同一规则的纯主题色实心底+固定白字”,只迁移 61 条前景声明; 不改变尺寸、背景、图片、渐变、半透明填色或业务交互。工具二次扫描该限定集合为零,不代表全部颜色问题为零。
  • 会话/联系人桌面选中行的暗色覆盖改为跟随主题,标题、预览、时间与签名共用相应前景; 移动端保留透明选中底并使用中性文字,不把实心底的前景直接套到透明底。未读数字与免打扰灰色徽标补充独立语义 token。
  • 迁移后另查同类控件的局部覆盖:四条原先向黑压暗的 hover/播放底改用安全派生色, 危险清理按钮保留红底并使用独立前景,不从用户主色推断红底文字。

验证边界

单测使用合成配置、存储和主题桥,不访问真实 QQ 或 API。浏览器使用真实 ChatPane、SettingsDialog、 Dialog 等组件和合成 RPC,并阻断外部网络;不修改已安装应用或个人偏好,不提交消息/反馈。 分阶段记录实际通过结果;原清单外观项与后续性能项在全部要求未验证前均保持未完成。

当前定向单测 7 文件 47 项通过,包含主题 13 项、恢复交接、设置归位、最近消息交互和启动图表。 主题逻辑检查 432 组 RGB/深浅组合、标准对比值、hover、规范化、清除自定义色、助手桥接、 延迟动画与恢复后的旧请求隔离。

实际渲染覆盖 20 组聊天/公共控件场景,250 个普通/hover/确认按钮/己方文字和链接样本, 最低对比度 5.35;20 组桌面会话/联系人选中和 hover 场景最低 7.00,无页面异常或横向溢出。 另走查 320/390 设置页、键盘焦点、移动展开输入和免打扰徽标。上述测量只说明已列样本, 不证明图像遮罩、所有文字层叠或矩阵中其它页面已通过。 跟随系统实测浅→深→浅,可读强调字随之更新并恢复,原主色不变。

工具与生成报告留在本机原项目 Agents/2026-10-19-WeQ会话交互/work/followups-appearance-20261022/, 预览入口复用仓库忽略的 .codex-local/appearance-preview.*。首次聊天夹具未接主界面的 QQ 渲染器, 只覆盖普通文本;接上原 composeMessageRenderers 后,工具要求每页出现四个真实 QQ 链接再测量, 最终 250 个样本包含链接。联系人默认分组折叠,验证先明确展开,不把未渲染状态当作选中态验收。

第二阶段:列表、发送与长浮层

  • 按用户截图的紫色复现;不保存私人会话名称、头像或正文。列表选中底改为浅色 14%/深色 18% 主题色混合,中性名称、次级预览/时间与可读强调描边各自独立;草稿、文件、红包等保留语义色。
  • 消息、邮箱和会话数字徽标共用 18px 高度、11px 字号和等宽数字,较大计数按内容加宽; 纯提醒点仍为 9px,免打扰徽标仍为灰色。深色与移动端不再被局部尺寸或固定蓝色覆盖。
  • 原主题设置不变,实心操作独立派生至少 7:1 的前景与底色;主聊天/展开输入、助手/克隆、 公共按钮及媒体发送按钮接入。禁用使用中性配色,不靠整体透明度降低可读性。 颜色成对切换,不独立淡入淡出;模板按钮的继承重置放回基础层,避免覆盖组件指定文字色。
  • 公共长确认/错误/密码弹窗约束在视口内,标题与正文分别可滚动,底部操作可达;不截断内容。 横幅队列有界滚动,阅读旧内容时不强制跳到最新,计时与成功/失败策略不变。
  • 多账号菜单复用已有浮层定位和层级,列表滚动、退出动作保留;读取错误与空列表区分并支持重试。 嵌套菜单逐层 Escape,节点移除前归还焦点;没有修改账号切换或删除后端接口。

最终定向回归 14 文件 124 项通过,desktop node/web 类型检查和 25 个本轮代码/样式文件 Biome 检查通过;遵循本机约定未跑全量 CI、Native 或安装包构建。

真实组件浏览器复测使用合成数据、禁外网的 headless Edge,结果如下:

场景 结果
会话/联系人、选中/普通/置顶/免打扰、深浅与桌面/窄屏 132 组,名称最低 9.77,次级文字最低 4.95,无失败
消息/邮箱/会话徽标,1、2、10、99、120 和零计数 20 组,数字最低 7.39,尺寸与隐藏状态通过
主聊天/展开输入、助手/克隆、普通/危险按钮和己方文字/链接 136 组,512 普通与 192 悬停样本最低 7.00,禁用切换通过
长确认/错误/密码弹窗 12 组,含 320×360,文字保留、操作可达
横幅队列、主壳和 24 个合成账号/嵌套菜单 3 组队列、4 组主壳,滚动与焦点通过

以上场景无页面异常、真实消息发送或个人数据变更。禁用夹具曾误把空编辑器序列化产生的换行 当作有效草稿;核对真实输入返回后修正夹具为空白判断,保留全部状态断言并重新通过。 对比目标是本次高频文字的局部设计选择,不表示全应用已通过无障碍认证。完整外观矩阵与后续性能 仍保持进行中;源码/组件验证不代替已安装客户端、全部媒体卡片或其它页面的验收。

第三阶段:启动与锁屏

  • 首页和预热文字、图标、进度使用主题语义色,入口在窄屏单列、短窗口可滚动; 无账号时保留独立禁用状态,不通过整体透明度让文字变淡。保留现有品牌资源和两个原入口。 去除入口背景的独立颜色过渡,避免浅色主题切换时与立即变化的前景形成低对比组合。
  • 启动账号选择器复用公共锚定浮层,菜单离开滚动裁切树;24 个合成账号仍全部保留, 列表滚动而底部入口可达,截断名称提供完整提示。右键菜单不越界,Escape 逐层关闭, 窗口失焦同时收起两层;选择/删除仍原样回传对应账号,不增加后台操作。
  • 应用锁与验证码输入使用中性主题表面、可读强调色与独立错误色,六格输入可收缩; 长认证错误保留全文并可滚动,锁屏受视口约束。Native 过期窗口复用长消息框的滚动布局, 更新和备份入口可达。认证、失败重试、自动上锁和解锁条件不变,没有提供绕过入口。
  • 开启减少动态效果时,预热漂浮/转圈、锁屏错误抖动与成功动画停用,真实进度和状态仍显示。

先记录真实浏览器基线:30 组场景有 18 组失败,包含 320px 首页入口越界、长认证错误撑出视口、 账号/右键菜单边界与逐层关闭,以及短窗口 Native 过期内容。新增账号浮层回归先在原实现出现 4 项产品失败,另纠正 2 处本地 Vitest 版本不支持的测试 matcher 后再验证,不把夹具错误算作产品缺陷。

最终 10 文件 69 项定向回归、desktop node/web 类型检查与 11 个本轮源码/样式文件 Biome 通过。 使用真实组件、合成账号/认证失败返回和隔离 RPC,浏览器覆盖浅/深、1280×800、390×600、320×360: 48 组首页/空配置/预热/账号菜单/TOTP/系统认证/过期窗口场景,以及 64 组主题色场景通过, 普通文字与本次采样图标最低对比度 4.63,无页面异常。检查了滚动后的实际可达性,不要求短窗口 同时展示全部内容;验证码失败后保持锁定,Escape 不放行,假认证调用每次仅一次。

该阶段没有读取个人账号、请求真实系统认证、校验真实验证码、下载更新或操作已安装客户端。 完整登录/静态导入表单、恢复启动失败和独立 Web 登录仍未据此验收,其它外观矩阵项继续保留。

第四阶段:登录来源与恢复启动

  • 账号查询失败与空列表分开显示,提供原查询的刷新操作;重新读取失败时保留缓存账号。 新账号列表为空时仍保留现有来源页签,可切入本地备份;未选择账号时不显示无效的密钥操作。
  • 扫码窗口受视口约束,头部关闭按钮始终可达;长状态完整换行并滚动,账号全名保留提示, 匿名扫码不预留头像列。标题、状态、加载与生成失败使用主题色;二维码图像保留库生成的黑白静区。
  • 二维码结果关联目标与尺寸,新请求不能暂留旧图;旧请求晚到不覆盖新目标,生成错误不会阻止 后续目标恢复。使用原 qrcode 库,不新增二维码编码器或依赖,也不改登录订阅和取消协议。
  • 恢复启动提示改为视口内滚动,长错误、恢复警告和放弃界面偏好确认均保留全文,按钮可达。 静态导入长账号名可换行,不撑宽账号来源和表单;占位提示及禁用按钮保持可读,不改变禁用条件。

先补失败回归,原实现 7 项中 5 项失败,分别复现空账号丢失备份入口、两种查询失败冒充空列表、 旧二维码暂留和生成错误不能恢复。浏览器基线 72 组中 40 组失败;实际恢复启动容器在 320px 短窗口可撑到 1210px,另测得不分词账号名达 5426px,禁用按钮采样最低 2.36,浅色占位文字 4.10。

最终 10 文件 64 项定向回归通过,含二维码目标/尺寸/晚到结果、登录空/加载/失败/缓存保留、 恢复启动及浮层关联路径;desktop node/web 类型检查与 9 个本轮代码/样式文件 Biome 通过。 真实 SelectScreen/LoginPanel/StaticBackupPanel/QrDialog/BackupStartupGate 加隔离 RPC 验证: 84 组浅深/1280×800/390×600/320×360 状态和布局场景,24 组默认/紫/黑白/浅黄/深绿配色场景 通过,采样文字最低 4.95,无页面异常、横向越界或动作不可达。

二维码成功和超容量错误均调用实际库;竞态与错误后恢复由可控 Promise 回归覆盖。 静态测试仅使用合成返回,未打开目录、读写私人数据库、提交登录、确认真实恢复或安装更新。 复测没有把强制程序滚动当作用户可达的证明:恢复容器还必须处于视口内且确有可用滚动方式。 独立 Web 登录处于另一批在途变更中,本轮未改动或据此验收;全应用外观与后续性能仍未完成。

第五阶段:API/TTS 与设置选项

  • API/TTS 列表区分加载、空、读取失败和带缓存失败;模板与模型列表提供同样的原查询重试。 复用设置控件模块中的查询错误展示,不新增配置存储或请求接口。查询失败不再把已保存模型 引用直接标成不可用,原 provider ID、模型 ID 和凭据绑定不变。
  • 模板缺失时编辑器保留原厂商选项,TTS 保留已有非空字段;模板迟到或重试成功只更新来源, 不重新灌入已保存配置覆盖当前 API 草稿。原模板替换规则、手动模型、保存、测试任务与删除逻辑保留。
  • 提供方长名称/地址、模型选择和拉取结果受容器边界约束;编辑窗头部和底部操作保留, 中间表单滚动。短窗口中底部按钮换行,长模型标识完整换行,原生输入仍可横向查看完整值。
  • 拉取结果由固定蓝色改为主题语义色;设置说明文字使用次级文字色,公共复选项与勾选标记 采用各自可读配色,不再白底白勾。禁用保留不可操作条件,以中性颜色区分,不依赖整体透明度。 文字和底色成对切换,框线仍可过渡,不改变选择或多选交互。

先补 5 项失败回归,复现两类配置加载冒充空列表、两类模板故障无反馈以及模型引用误标不可用; 另加模板迟到覆盖正在编辑凭据的失败用例。真实组件基线 40 组场景中 38 组失败,包含长列表、 编辑器/拉取结果横向越界、查询状态以及原生模型选择器。配色另复现白色主题勾选标记对比度 1:1。

最终 7 文件 64 项定向回归通过,包含原有同名配置隔离、后台连通任务、显式保存、多选与设置导航, 新增 6 项查询/草稿回归;desktop node/web 类型检查与 8 个本轮代码/样式文件 Biome 通过。 浏览器使用真实 SettingsDialog、AgentLabSection、TtsProvidersCard、ApiModelSelect 和公共复选项: 46 组浅深/1280×800/390×600/320×360 布局与查询状态通过,含键盘焦点、6 个合成 API 配置、 3 个 TTS 配置、24 个长模型和拉取结果;24 组默认/紫/黑白/浅黄/深绿配色共 2256 个已渲染样本, 普通文字最低 6.76,勾选标记最低 7.00,无页面异常或控件越界。

所有 RPC 隔离,拉取使用合成模型;未调用真实 API、保存配置、删除提供方或合成/播放语音。 本轮未修改并行中的 Remote、Web 或存储页面;其它设置、业务页面及完整状态矩阵继续未完成。

本版收尾

  • 设置入口巡检覆盖 36 页,包含常规、模型、服务、数据和帮助等;使用合成返回和真实组件, 默认/空配置与已声明的长内容样本不等同于全部业务状态或真实服务验收。
  • 修复 MCP 长客户端名/路径撑宽、保存设置下拉框越界和手机布局文字区固定留高; 公共设置卡片与标签网格使用可收缩列,目录与客户端信息保留完整提示。
  • RKEY/SSE/MCP 区分加载、失败、空与缓存;读取失败可重试,MCP 状态未知不显示为停止, 未读到状态时不允许切换服务或重新生成令牌。SSE 同值重读不覆盖未保存调优值。
  • 本阶段 8 文件 74 项定向回归、desktop node/web 类型检查通过,7 个本轮源码/样式文件 Biome 通过。 服务页 102 组状态/编辑布局、36 组配色通过,最低对比度 4.70;未启动真实服务或修改个人配置。

下版本继续:个人/群资料、搜索收藏与导出任务、空间邮箱相册和媒体预览、助手/克隆等完整状态走查, 以及矩阵中其它未覆盖项。本版不再为扩大外观覆盖继续增加实现。