From a2c420c74f20b38c8ca9de2e43853e1b20025f23 Mon Sep 17 00:00:00 2001 From: WuYongJie <549727955@qq.com> Date: Tue, 8 Sep 2026 23:03:15 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E7=AE=80=E5=BC=80=E5=8F=91=E8=A7=84?= =?UTF-8?q?=E5=88=99=E5=B9=B6=E8=A1=A5=E9=BD=90=E8=A1=A8=E6=A0=BC=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E8=A6=81=E6=B1=82=20(#133)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .impeccable/design.json | 42 ++++++++++--------------------- AGENTS.md | 17 ++++++------- DESIGN.md | 56 ++++++++++++++++------------------------- 3 files changed, 42 insertions(+), 73 deletions(-) diff --git a/.impeccable/design.json b/.impeccable/design.json index 95595d70..73962735 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -115,16 +115,16 @@ }, "typographyMeta": { "title": { - "displayName": "页面与一级导航标题", - "purpose": "右侧页面标题和一级导航，固定 14px，不随视口流体缩放。" + "displayName": "页面标题", + "purpose": "右侧页面标题，固定 14px，不随视口流体缩放。" }, "body": { "displayName": "业务正文", "purpose": "表单、说明、按钮和常规业务文字。" }, "label": { - "displayName": "字段与二级导航标签", - "purpose": "筛选字段、状态标签和二级菜单，固定 12px。" + "displayName": "字段与导航标签", + "purpose": "筛选字段、状态标签和一、二级菜单，固定 12px。" }, "data": { "displayName": "表格与金额数据", @@ -197,7 +197,7 @@ "refersTo": "sidebar-item-active", "description": "浅黑功能栏上的单一圆形 chevron 活动状态。", "html": "
店铺收款账户账单›
", - "css": ".ds-sidebar { width: 240px; padding: 8px; background: #1D1D1F; } .ds-sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; color: #F0E4BF; font: 500 14px/1.25 'JetBrains Mono', 'Microsoft YaHei', monospace; text-decoration: none; transition: background 150ms cubic-bezier(.22,1,.36,1); } .ds-sidebar-item:hover { background: rgba(240,228,191,.10); } .ds-sidebar-item.is-active { background: #2A2927; color: #F2E7C5; } .ds-sidebar-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ds-active-indicator { display: inline-flex; width: 16px; height: 16px; margin-left: auto; align-items: center; justify-content: center; border: 1px solid rgba(246,233,194,.72); border-radius: 999px; background: rgba(246,233,194,.14); color: #F6E9C2; font-size: 14px; } .ds-sidebar-item:focus-visible { outline: 2px solid #F2E7C5; outline-offset: 2px; }" + "css": ".ds-sidebar { width: 224px; padding: 8px; background: #1D1D1F; } .ds-sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; color: #F0E4BF; font: 500 12px/16px 'JetBrains Mono', 'Microsoft YaHei', monospace; text-decoration: none; transition: background 150ms cubic-bezier(.22,1,.36,1); } .ds-sidebar-item:hover { background: rgba(240,228,191,.10); } .ds-sidebar-item.is-active { background: #2A2927; color: #F2E7C5; } .ds-sidebar-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ds-active-indicator { display: inline-flex; width: 16px; height: 16px; margin-left: auto; align-items: center; justify-content: center; border: 1px solid rgba(246,233,194,.72); border-radius: 999px; background: rgba(246,233,194,.14); color: #F6E9C2; font-size: 14px; } .ds-sidebar-item:focus-visible { outline: 2px solid #F2E7C5; outline-offset: 2px; }" }, { "name": "Workspace Tabs", @@ -205,7 +205,7 @@ "refersTo": "tab-active", "description": "白色工作区内使用深金活动文字和单一金色下划线的局部标签切换。", "html": "", - "css": ".ds-tabs { display: flex; align-items: center; gap: 36px; min-height: 80px; padding: 0 32px; overflow-x: auto; border: 1px solid #D8D2C7; border-radius: 16px; background: #fff; } .ds-tab { position: relative; display: inline-flex; min-height: 80px; align-items: center; color: #595959; font: 600 14px/1.25 'JetBrains Mono', 'Microsoft YaHei', monospace; text-decoration: none; white-space: nowrap; transition: color 150ms cubic-bezier(.22,1,.36,1); } .ds-tab:hover, .ds-tab.is-active { color: #856632; } .ds-tab.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 999px 999px 0 0; background: #B9954F; content: ''; } .ds-tab:focus-visible { outline: 2px solid #856632; outline-offset: 3px; }" + "css": ".ds-tabs { display: flex; align-items: center; gap: 36px; min-height: 34px; padding: 0 32px; overflow-x: auto; border: 1px solid #D8D2C7; border-radius: 16px; background: #fff; } .ds-tab { position: relative; display: inline-flex; min-height: 34px; align-items: center; color: #595959; font: 600 14px/1.25 'JetBrains Mono', 'Microsoft YaHei', monospace; text-decoration: none; white-space: nowrap; transition: color 150ms cubic-bezier(.22,1,.36,1); } .ds-tab:hover, .ds-tab.is-active { color: #856632; } .ds-tab.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 999px 999px 0 0; background: #B9954F; content: ''; } .ds-tab:focus-visible { outline: 2px solid #856632; outline-offset: 3px; }" }, { "name": "Business Panel", @@ -225,7 +225,7 @@ { "name": "Finance Data Table", "kind": "custom", - "description": "紧凑、可扫描、数字右对齐的财务数据表。", + "description": "紧凑、可扫描、数字右对齐的财务数据表。支持列显示/隐藏、拖动排序、恢复默认及按用户和具体表格保存；冻结多层表头，横向滚动条始终可达。导出明确筛选范围和可见列顺序，保留精度并排除密码；允许导入的业务提供模板、预览、校验及失败反馈，只读镜像不写回。", "html": "
订单号收入余额
20260722001¥1,280.00¥8,460.00
", "css": ".ds-table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid #D8D2C7; border-radius: 12px; background: #fff; color: #171717; font: 400 12.5px/1.5 'JetBrains Mono', 'Microsoft YaHei', monospace; } .ds-table th { padding: 9px 10px; border-bottom: 1px solid #D8D2C7; background: #FBF8F1; color: #595959; font-size: 12px; font-weight: 600; text-align: left; } .ds-table td { padding: 9px 10px; border-bottom: 1px solid #EEE9DF; } .ds-table tbody tr:hover { background: #F7F0DE; } .ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; } .ds-table .ds-income { color: #B80000; font-weight: 600; }" } @@ -237,8 +237,8 @@ "深黑工具轨道、浅黑功能栏、浅色内容区，三层边界清楚。", "浅金用于深色导航，深金用于浅色内容区的文字与主要操作。", "全站使用 JetBrains Mono，标题和数据采用固定字号，不使用流体放大。", - "页面标题位于内容区右侧，保持 14px，与侧边栏一级标题同级。", - "一级导航 14px，二级导航 12px；同一层级的图标、字号和交互状态必须一致。", + "页面标题位于内容区右侧，保持 14px；导航使用统一的紧凑字号。", + "一、二级导航统一 12px；同一层级的图标、字号和交互状态必须一致。", "表格、筛选器和状态反馈优先，装饰性卡片、阴影和动画受到严格限制。", "标签切换是局部状态变化，不触发整页刷新；加载前后字号和布局不得跳变。" ], @@ -254,26 +254,10 @@ { "name": "The No-Nested-Cards Rule", "body": "卡片只用于真实分组；卡片内部不能再套同样外观的卡片。优先使用标题、间距、分隔线和表格分组表达层级。", "section": "elevation" } ], "dos": [ - "**Do** 在所有前端任务开始前读取根目录 `DESIGN.md`，并优先复用全局 `--vip-*` 令牌和既有组件。", - "**Do** 保持深黑工具轨道、浅黑功能栏、浅色内容区的三层结构。", - "**Do** 在深色导航使用浅金，在浅色内容区使用对比度合格的深金。", - "**Do** 将页面标题放在右侧，使用 14px 字号和匹配业务语义的统一图标。", - "**Do** 让一级导航保持 14px、二级导航保持 12px，并为所有交互实现 hover、focus、active、disabled、loading 和 error 状态。", - "**Do** 让标签切换、筛选和分页保持局部更新，并使用 History API 维护可分享 URL。", - "**Do** 对正文、小号标签、按钮和占位文字检查至少 4.5:1 的对比度。", - "**Do** 在设计规则确需改变时，先更新 `DESIGN.md` 和 `.impeccable/design.json`，再修改页面代码。" + "复用已有令牌和组件，按 DESIGN.md 保持同类页面一致；常规排版和交互细节自主决定，不增加额外设计审批。", + "临时截图和 design-qa.md 仅作验收证据；规则变化时同步现有设计文档，不另建规范文件。", + "保持首屏布局稳定、焦点可见，正文和小号文字对比度至少 4.5:1；不添加与业务无关的装饰或宣传内容。" ], - "donts": [ - "**Don't** 把遗留的紫色、靛蓝、亮蓝硬编码（例如 `#4F46E5`、`#4338CA`、`#2563EB`）复制到新页面；信息状态蓝色除外。", - "**Don't** 在白色或浅灰背景上把亮金 `colors.content-accent` 用作小号正文或白字按钮底色；改用 `colors.content-accent-dark`。", - "**Don't** 在内容区使用大面积黑色背景和金色正文；黑底金字只属于导航、浮层或明确的高层级控制区域。", - "**Don't** 同时显示竖条、圆点和圆形 chevron 等多个选中标识；每个菜单项只能有一个活动指示器。", - "**Don't** 在业务内容内部重复页面 H1，或让首次加载时出现远大于 14px 的标题闪烁。", - "**Don't** 用普通 `` 默认导航实现站内标签切换，导致整个文档重新加载。", - "**Don't** 给有边框的卡片叠加宽而软的大阴影，也不要使用超过 16px 的卡片圆角。", - "**Don't** 使用渐变文字、玻璃拟态、装饰网格、斜纹背景、彩色侧边条或与任务无关的动画。", - "**Don't** 恢复“Akaunting 提供支持”之类的供应商页脚文字，或在业务页面加入非业务宣传信息。", - "**Don't** 把临时截图路径、个人电脑路径或 `design-qa.md` 当成团队视觉规范。" - ] + "donts": [] } } diff --git a/AGENTS.md b/AGENTS.md index 66d62242..1883d235 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -6,8 +6,9 @@ - 默认使用中文，先给结论；以当前代码、配置、数据和日志为准，旧文档和历史结论仅作参考。 - 用户说“先看、排查、审计”时先只读说明事实和影响；用户说“修改、修复、实现”时，Codex 可直接完成范围内的本地改动、测试、提交和 PR，不必为正常开发步骤逐项请示。 -- 一次只处理一个明确任务，优先复用现有模式和解决根因；不顺手重构、升级依赖或修改无关模块。 -- 只有以下情况需要停止并说明：产品方向存在会改变结果的歧义；与其他任务发生实际写入冲突；需要生产发布、生产数据写入、迁移、删除或其他不可逆操作；缺少完成任务必需的外部权限。 +- 围绕用户当前目标持续完成实现和必要验证，常规实现细节自主决定；优先复用现有模式，不顺手重构、升级依赖或修改无关模块。 +- 仅在缺失信息会实质改变业务目标、实际写入冲突无法自行安全解决、缺少必需权限，或高风险操作尚未获授权时暂停依赖该条件的步骤；其余工作继续。 +- 明确授权在同一任务、目标和影响范围内持续有效，不重复确认；范围、风险或费用实质变化时再确认。不得把 Skill 流程建议当成额外审批要求，也不自行增加团队契约、负责人审批或强制流程。 - 不为理论上可能、但正常使用无法触发的问题增加复杂框架、兜底层或重复检查。 ## 2. 开工与多人协作 @@ -15,8 +16,8 @@ - 开工先核对项目目录、`git status --short --branch`、`origin`、Git 身份和最新 `main`；保护现有未提交内容，不覆盖、不顺带提交。 - 开发从最新 `main` 建立独立任务分支：功能用 `feature/用户名-任务名`，修复用 `fix/用户名-问题名`，紧急修复用 `hotfix/用户名-问题名`。 - 只改独立页面、独立测试或文档时，不强制运行重型预检或提前建立 WIP PR；确认没有明显同名任务后即可开发。 -- 当任务会修改共享路由、Controller、Repository、数据表/视图、`source_key`、`scope`、权限名、菜单键或公共组件，或远程已有相同区域任务时，才运行 `scripts/codex-task-preflight.ps1`，列明“将修改”和“仅复用”内容，并尽早推送 WIP PR。 -- 只有双方会写同一契约或同一文件时才算冲突。仅调用现有路由、组件、Repository 或读取同一数据源不构成阻塞。 +- 涉及多人正在修改的共享文件时，可用 `scripts/codex-task-preflight.ps1` 辅助检查；不把预检或提前创建 WIP PR 设为普通开发的必经步骤。 +- 冲突以当前实际改动为准。结合 PR 合并状态和文件差异排除旧分支、squash 合并造成的误报；仅复用组件或读取同一数据源不阻塞开发。 - 多代理只用于边界清楚且不修改同一批文件的独立工作；主 Codex 负责最终复核。 ## 3. Git、PR 与合并 @@ -34,6 +35,7 @@ - 前端改动至少检查目标页面、关键交互和错误状态；后端改动至少运行相关测试或走一次目标接口；纯文档改动检查内容、链接和 diff 即可。 - 涉及金额、权限、导入、审批或数据库结构时，增加对应边界和回归验证。 - 已确认且状态未变化的内容不重复检查。未验证或验证失败时如实说明，不能写“应该没问题”。 +- 数据页面按本次影响验证代表性数据量下的首页、翻页和筛选耗时；明显长时间等待不能以“返回正确”判定通过。低风险改动不增加重复或仅复述实现的测试。 - 明确区分：本地已验证、已提交/推送、已合并、已上线和仍需生产验收。 ## 5. 前端与视觉 @@ -57,11 +59,8 @@ ## 7. 新人本地开发 -- 新人只需要启动 Docker Desktop、在网页登录，以及输入一次负责人提供的系统数据库密码；拉取代码、初始化、缓存、容器和连接排错由 Codex 完成。 -- 标准初始化由 Codex 在最新 `main` 上运行不带参数的 `deploy/local-init.sh`。不要让新人判断 `--build`、手工迁移共享数据库、复制他人 `.env` 或配置上游连接。 -- 本地连接系统数据库后，用户、菜单、设置和上游登记继续使用团队系统数据库，不把主连接切回本机临时 MySQL。 -- 与数据库无关的普通页面或业务功能可以直接开发，不要求开发者先理解或验证全部上游、镜像和生产部署链路。 -- 只有接入新上游数据时，才需要验证对应来源的只读查询、镜像同步状态、总数及代表性分页/筛选；无需每个普通任务重复验证两套数据库。 +- 新人只需启动 Docker Desktop、网页登录并输入负责人提供的系统数据库密码；Codex 按 SOP 运行不带参数的 `deploy/local-init.sh`，完成初始化和排错，不让新人选择构建或迁移参数。 +- 连接团队系统数据库后保留该连接，不切回临时库、不复制他人 `.env`；普通功能开发无需检查全部上游链路，仅接入新数据时验证对应来源。 ## 8. 构建与生产部署 diff --git a/DESIGN.md b/DESIGN.md index 047b9ed4..9daed852 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -86,13 +86,13 @@ components: sidebar-item: backgroundColor: "{colors.sidebar-black}" textColor: "{colors.sidebar-gold}" - typography: "{typography.title}" + typography: "{typography.label}" rounded: "{rounded.sm}" padding: "8px 10px" sidebar-item-active: backgroundColor: "{colors.sidebar-active}" textColor: "{colors.rail-gold}" - typography: "{typography.title}" + typography: "{typography.label}" rounded: "{rounded.sm}" padding: "8px 10px" tab-default: @@ -100,13 +100,13 @@ components: textColor: "{colors.content-muted}" typography: "{typography.title}" padding: "0 4px" - height: "80px" + minHeight: "34px" tab-active: backgroundColor: "{colors.surface}" textColor: "{colors.content-accent-dark}" typography: "{typography.title}" padding: "0 4px" - height: "80px" + minHeight: "34px" panel: backgroundColor: "{colors.surface}" textColor: "{colors.content-ink}" @@ -131,8 +131,8 @@ CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视 - 深黑工具轨道、浅黑功能栏、浅色内容区，三层边界清楚。 - 浅金用于深色导航，深金用于浅色内容区的文字与主要操作。 - 全站使用 JetBrains Mono，标题和数据采用固定字号，不使用流体放大。 -- 页面标题位于内容区右侧，保持 14px，与侧边栏一级标题同级。 -- 一级导航 14px，二级导航 12px；同一层级的图标、字号和交互状态必须一致。 +- 页面标题位于内容区右侧，保持 14px；导航使用统一的紧凑字号。 +- 一、二级导航统一 12px；同一层级的图标、字号和交互状态必须一致。 - 表格、筛选器和状态反馈优先，装饰性卡片、阴影和动画受到严格限制。 - 标签切换是局部状态变化，不触发整页刷新；加载前后字号和布局不得跳变。 @@ -191,8 +191,8 @@ CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视 ### Hierarchy - **页面标题** (600, 14px, 1.25): 固定在内容头部右侧，与配套图标同行；禁止在业务内容内部重复放置大号 H1。 -- **侧边栏一级标题** (500–600, 14px, 1.25): 模块和一级功能名称。 -- **侧边栏二级标题** (400–500, 12px, 16px): 比一级标题小一档，保持单行和稳定缩进。 +- **侧边栏一级标题** (500–600, 12px, 16px): 模块和一级功能名称。 +- **侧边栏二级标题** (400–500, 12px, 16px): 通过缩进区分层级，保持单行和稳定行高。 - **正文** (400, 13px, 1.5): 表单说明、面板正文和常规业务文字。 - **标签** (500, 12px, 16px): 筛选条件、字段名、状态标签和辅助说明。 - **表格与金额** (400–600, 12.5px, 1.5): 启用等宽数字 `tabular-nums`，金额和数量右对齐。 @@ -233,8 +233,8 @@ CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视 ### Navigation -- 一级导航 14px，二级导航 12px；文字和对应 Material 图标使用同一浅金色。 -- 图标统一采用 Material Icons Outlined/Round，常规尺寸 20–24px；同一业务语义不得在不同页面更换图标体系。 +- 一、二级导航统一 12px；文字和对应 Material 图标使用同一浅金色。 +- 图标统一采用 Material Icons Outlined/Round，导航图标统一 16px；同一业务语义不得在不同页面更换图标体系。 - 当前二级菜单只显示一个 16px 圆形浅金 chevron 指示器；禁止同时保留竖条、圆点或第二个箭头。 - 悬停使用轻微浅金透明底，选中使用 `colors.sidebar-active`；状态变化为 150–200ms。 @@ -246,7 +246,7 @@ CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视 ### Tabs -- 桌面标签栏高度 80px，白色表面，标签间距以可点击性和单行展示为准。 +- 标签栏采用白色表面，按所在区域保持紧凑高度和足够点击空间；同类页面一致，不把主标签栏的 80px 高度套用到局部标签。 - 默认文字使用辅助墨色；活动文字使用 `colors.content-accent-dark`，底部使用 3px `colors.content-accent` 下划线。 - 标签图标与文字同色；切换只更新内容、URL History 和活动状态，不触发 document 级刷新。 - 标签变化使用 150ms 状态过渡；`prefers-reduced-motion` 下立即切换。 @@ -277,6 +277,12 @@ CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视 - 行悬停使用极浅金/中性背景；选中状态同时提供图标、文字或边界，不只改变底色。 - 收入、支出、错误和成功色遵循业务语义；不得为了“好看”交换红绿含义。 +- 各业务表格支持列显示/隐藏、拖动排序和恢复默认；按用户及页面、标签页、表格分别保存，表头、数据和合计同步排列，必要操作列可固定。 +- 单层或多层表头随纵向滚动保持可见；横向滚动条在浏览数据时始终可达，不得落到屏幕外或必须滚至整表底部才能操作。 +- 合理设置表格滚动容器，适配视口、缩放和侧栏变化，避免多层滚动互相干扰。优先复用现有组件，具体实现自主选择。 +- 导出明确范围，支持当前筛选结果及可见列顺序，不把当前页冒充全部；保留金额精度、日期和长编号格式，遵守字段权限，密码不导出，大数据量沿用分批或后台机制。 +- 允许导入的业务提供模板、预览、字段校验、重复处理和逐行失败反馈，不静默覆盖数据；只读上游镜像不增加写回入口。业务规则不明时只澄清必要问题。 + ### Scrollbars - 内容滚动条为 8px，轨道使用浅中性色，滑块使用 VIP 金；悬停使用更深金色。 @@ -288,28 +294,8 @@ CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视 - 空状态说明“为什么没有数据”和“下一步能做什么”，不能只写“暂无数据”。 - 错误状态保留重试入口和明确原因；局部失败不能清空整个页面或触发整页刷新。 -## 6. Do's and Don'ts +## 6. 使用原则 -### Do: - -- **Do** 在所有前端任务开始前读取根目录 `DESIGN.md`，并优先复用全局 `--vip-*` 令牌和既有组件。 -- **Do** 保持深黑工具轨道、浅黑功能栏、浅色内容区的三层结构。 -- **Do** 在深色导航使用浅金，在浅色内容区使用对比度合格的深金。 -- **Do** 将页面标题放在右侧，使用 14px 字号和匹配业务语义的统一图标。 -- **Do** 让一级导航保持 14px、二级导航保持 12px，并为所有交互实现 hover、focus、active、disabled、loading 和 error 状态。 -- **Do** 让标签切换、筛选和分页保持局部更新，并使用 History API 维护可分享 URL。 -- **Do** 对正文、小号标签、按钮和占位文字检查至少 4.5:1 的对比度。 -- **Do** 在设计规则确需改变时，先更新 `DESIGN.md` 和 `.impeccable/design.json`，再修改页面代码。 - -### Don't: - -- **Don't** 把遗留的紫色、靛蓝、亮蓝硬编码（例如 `#4F46E5`、`#4338CA`、`#2563EB`）复制到新页面；信息状态蓝色除外。 -- **Don't** 在白色或浅灰背景上把亮金 `colors.content-accent` 用作小号正文或白字按钮底色；改用 `colors.content-accent-dark`。 -- **Don't** 在内容区使用大面积黑色背景和金色正文；黑底金字只属于导航、浮层或明确的高层级控制区域。 -- **Don't** 同时显示竖条、圆点和圆形 chevron 等多个选中标识；每个菜单项只能有一个活动指示器。 -- **Don't** 在业务内容内部重复页面 H1，或让首次加载时出现远大于 14px 的标题闪烁。 -- **Don't** 用普通 `` 默认导航实现站内标签切换，导致整个文档重新加载。 -- **Don't** 给有边框的卡片叠加宽而软的大阴影，也不要使用超过 16px 的卡片圆角。 -- **Don't** 使用渐变文字、玻璃拟态、装饰网格、斜纹背景、彩色侧边条或与任务无关的动画。 -- **Don't** 恢复“Akaunting 提供支持”之类的供应商页脚文字，或在业务页面加入非业务宣传信息。 -- **Don't** 把临时截图路径、个人电脑路径或 `design-qa.md` 当成团队视觉规范。 +- 复用已有令牌和组件，按上述标准保持同类页面一致；常规排版和交互细节自主决定，不增加额外设计审批。 +- 临时截图和 `design-qa.md` 仅作验收证据，不覆盖本文件；规则变化时同步 `.impeccable/design.json`，不另建规范文件。 +- 保持首屏布局稳定、焦点可见，正文和小号文字对比度至少 4.5:1；不添加与业务无关的装饰或宣传内容。