部门产品设计规范
我们的产品在电脑网页、手机网页和微信小程序上应该长什么样、怎么反应，这里说了算。产品、设计、开发、测试看的是同一份。下面每个例子都是用规范里的真实颜色和尺寸画出来的，看到的就是产品该有的样子。
这套规范是为了什么
- 让用户一眼看清、顺手做完。销售打开客户列表，三秒内知道谁需要关注、下一步做什么。每条规则都在回答一个这样的具体问题。
- 让电脑、手机、小程序长得一样、反应一样。同一个「需关注」在三端是同一个颜色同一个词。以前颜色靠截图口口相传，改一处要改三处。
- 让改动有据可查。改规则要填变更单，改颜色只改一个变量，产品用了要登记。谁改的、为什么改、验过没有，都能查到。
- 让 AI 参与的界面守住底线。AI 出草稿，人拍板。AI 写的东西一直标着，能看依据，能撤销。这些写成规则，不靠自觉。
先看一眼：这套规范长什么样
实心蓝的是这一页最该做的事，其余都是描边。两个实心按钮并排，用户就不知道先点哪个。
规则 C-01想改颜色看效果，去「视觉基础」章；想看每个组件所有状态，去「组件」章，那里能直接点。
常见问题，直接给答案
| 问题 | 答案 | 出处 |
|---|---|---|
| 主色是哪个 | #2863CD，代码里写 var(--ui-primary)，不要写色值 | 视觉基础 |
| 图标用哪套 | 网页用 Ant Design 自带的线性图标，小程序用 TDesign 自带的 t-icon。40 个常用图标的对照在「组件」章基础控件一节。图标旁必须有字 | 组件 |
| 字多大 | 正文 14，辅助说明 12，分区标题 16，页面标题 24，关键数字 32。小程序把 px 换成两倍的 rpx，正文 28rpx | V-02 |
| 按钮禁用了怎么办 | 旁边写原因，比如「还有 3 项必填未确认」。灰掉不说话等于让用户猜 | C-01 |
| 表单填错了怎么提示 | 错误写在那个字段下面，红字，输入的内容保留。不弹窗，不清空 | C-02 |
| 筛选条件放哪 | 紧挨着结果列表上方，写明范围（本人负责／全部门），显示已选几项、共几条，有「清除」 | C-04 |
| 手机上怎么进详情 | 列表点一行，详情整页进入。返回时列表还在原来的位置，筛选和搜索都还在 | X-03 |
| 电脑上列表和详情怎么摆 | 窗口宽过 900 三栏并排：导航、列表、详情。601 到 900 收成图标导航加二选一。600 以下和手机一样 | 布局 |
| AI 生成的字段用户要改怎么办 | 可以直接改，改完标「已由你修改」，旁边留着 AI 原值，可以一键恢复。AI 没把握的字段留空给候选 | A-03 |
| 规则不合适想改 | 填一张变更单：现在的规则、遇到的问题、想怎么改、影响哪些页面。评审通过后改源文件，站点自动更新 | 团队怎么用 |
你是谁，从哪开始
- 读「原则」章前三条，写需求时按它取舍。
- 写空态、出错、无权限时的文案，规则在「交互状态」章。
- 验收时对着「常见问题」这张表逐条问。
- 颜色、字号、间距只从「视觉基础」章取，不新造。
- 先在「组件」章找现成的，找不到再画新的。
- 新画的组件要标出用了哪些变量，交给开发时一起给。
- 安装组件包，装法在「组件」章下方的说明。
- 样式只写
var(--ui-…)，跑一次检查脚本，新增违规为零。 - 页面做完按「跨端适配」章看三个宽度。
- 每个列表页试四种情况：加载中、空、出错、无权限。
- 出错点重试，看筛选条件有没有丢。
- AI 生成的内容，看标识在不在、依据能不能点开。
原则
做页面时经常要取舍：信息放多少、先显示什么、出错了怎么办。原则就是取舍的依据，有了它不用每次重新争。这章四组，从上往下重要程度递减：设计原则三条是根本；产品原则七条是这个业务的事实，不能违反；业务表达五条规定客户、商机、缺失值、红黄绿灰怎么说；最后两组是还在讨论的候选原则。点开任何一张卡片能看正例、反例和怎么检查。
设计原则（已确认）
三条讲的是：先给结论再给细节；一页里用留白和面板把总览、操作、结果分开；用户输入过的东西别弄丢。
P-01所有页面一打开页面，先看到这是谁、现在什么状态、下一步能做什么。
一打开页面，先看到这是谁、现在什么状态、下一步能做什么。细节往下翻再看。
规则原文 先呈现对象、重点状态与主要动作；摘要后可看完整事实
正确示例／反例 正：商机名称＋需关注＋变化摘要；反：所有信息同字号同权重
怎么检查 首屏能回答“这是谁、发生什么、下一步做什么”
样板部件 详情摘要卡
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:33
P-02多区域页面一页里有好几块时，用标题和留白分开，每块只放一个主要按钮。
一页里有好几块时，用标题和留白分开，每块只放一个主要按钮。
规则原文 用标题、留白、面板边界区分总览、操作、结果；每区一个主要动作
正确示例／反例 正：首页待办与动态独立；反：一长列同质卡片
怎么检查 隐去内容后仍能辨认分区；操作归属明确
跨端结论 适配：含义统一，留白值适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:34
P-03连续操作出错、取消、切换页签，用户已经填的东西不能丢。
出错、取消、切换页签，用户已经填的东西不能丢。「正在保存」和「已保存」是两回事，要分开显示。
规则原文 失败、取消或切换展示时保留有效输入；处理反馈与事实状态分别表达
正确示例／反例 正：质检失败可回到原文；反：一失败就清空
怎么检查 填写长文本后制造校验失败，内容仍完整
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:35
产品原则（业务事实，共 7 条）
这七条来自产品仓库，是这个业务怎么运转的事实，设计只能顺着它做。比如「以客户为核心」决定了首页是客户列表而不是商机列表；「销售不手工打分」决定了象限图不能拖动。
原则 1以客户为核心，不以订单或商机为核心。
客户下面挂商机、拜访、毛利、合同。一个客户可有多条商机。
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:43「必须遵守的产品原则」
原则 2销售不手工打分、不填复杂表单。
语音口述拜访 → Agent 结构化 → 人工确认归档；象限、风险、画像由 Agent 依据已确认事实重算，不可手工拖动或改分。
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:44「必须遵守的产品原则」
原则 3四条不可破坏：同一对象、同一事实、统一权限、关键动作可确认可追溯。
客户、商机在各端是同一条记录；同一件事只有一个事实来源；权限规则各端一致；归档、下发这类关键动作要有人确认并留下记录。
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:45「必须遵守的产品原则」
原则 4Agent 只生成草稿和洞察；写入正式业务表必须经人工确认。
Tool 分 Read / Draft / Command / External 四类，Agent 不直连数据库。
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:46「必须遵守的产品原则」
原则 5产品核心 / 产品配置 / 项目定制三层分开。
神码专属内容走定制或配置，不改跟进记录逻辑与三张表（客户表、商机表、跟进记录表）。
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:47「必须遵守的产品原则」
原则 6权限由服务端判定，数据库行级权限兜底。
销售看本人，主管看直属团队，总经理看授权部门，董事长只读核心客户。界面不能靠隐藏按钮来做权限。
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:48「必须遵守的产品原则」
原则 7对客文案使用中文全角标点；正文字号不小于 14px，卡片说明不小于 12px。
（本条直接决定 --ui-text-body 与 --ui-text-small 的底线。）
相关变量 --ui-text-body --ui-text-small
来源：产品仓库 shandianT/xiaoshouguanli CLAUDE.md:49「必须遵守的产品原则」
业务表达（已确认）
同一个业务概念在三端怎么叫、怎么显示。红黄绿灰各代表什么，金额和时间怎么写，没填的值显示什么。
B-01红黄绿灰灯红是转差，黄是需关注，绿是向好，灰是待评估，旁边一定有字和依据。
红是转差，黄是需关注，绿是向好，灰是待评估，旁边一定有字和依据。颜色来自业务判断，不能因为字段没填就标红。
规则原文 业务变化使用红“转差”、黄“需关注”、绿“向好”、灰“待评估”，同时呈现判断依据；沿用业务来源结果，不从颜色、关键词或缺失字段推断
正确示例／反例 正：更新成功但判断未返回显示待评估；反：所有保存成功一律绿色向好
怎么检查 使用四类业务返回检查标签、摘要、依据及关注计数；技术保存成功不冒充业务判断
相关变量 --ui-danger --ui-danger-soft --ui-warning --ui-warning-soft --ui-success --ui-success-soft --ui-neutral --ui-neutral-soft
样板部件 列表行、红黄绿灰标签
跨端结论 不分端：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:101
B-02对象与状态客户、商机、拜访、任务各有各的来源。
客户、商机、拜访、任务各有各的来源。任务接受了不等于完成。下一步计划没建成任务前不算任务。
规则原文 客户、商机、拜访、任务各自有事实来源；任务已接受仍未完成；下一步计划未创建任务前不计入任务
正确示例／反例 正：“已接受，待执行”；反：“接收方已确认”配已完成
怎么检查 查看实际状态字段与持久化记录；不能仅凭展示推断完成
样板部件 列表行、象限判断依据、在推商机、待办与任务页签
跨端结论 不分端：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:102
B-03金额、时间与缺失年度合同额、确收、回款分开标。
年度合同额、确收、回款分开标。0 只在真是零时显示，没填的写「未登记」。金额带单位，日期带年份。
规则原文 ACV、确收、回款分别标注；0 仅用于明确零值；缺失显示未填写／未登记，处理中显示加载；金额有币种单位，完整日期带年份，动态时间展开可查
正确示例／反例 正：¥ 0 与未登记并列；反：用导入当天补齐所有关单日期
怎么检查 对照源数据；大金额和跨年日期无歧义；缺失不得臆造
样板部件 「未填写跟进」「ACV 未登记」「象限：待评估」、在推商机
跨端结论 不分端：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:103
B-04AI 流程AI 处理拜访的四步：核对、质检、人工确认、归档。
AI 处理拜访的四步：核对、质检、人工确认、归档。处理中显示到哪一步，失败保留输入可重试。质检完不等于归档。
规则原文 核对内容→质检→人工确认→归档；处理中可见阶段；失败保留输入且可重试或返回；超时走已有恢复机制；质检完成不等于归档
正确示例／反例 正：“已生成建议，待人工确认”；反：“AI 正在分析”时让用户误以为还能填写被锁字段
怎么检查 草稿、处理中、失败、待确认、归档各自回读；仅真实归档回执可显示已归档
跨端结论 不分端：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:104
B-05范围与权限数据旁边写清范围，比如「本人负责 · 24 家」。
数据旁边写清范围，比如「本人负责 · 24 家」。有没有权限由服务端说了算，前端藏个按钮不算权限。
规则原文 范围名邻近数据；权限与 capability 以服务端契约为准；前端隐藏按钮不等同于权限校验
正确示例／反例 正：“本人／团队”对应同一授权范围；反：依靠角色名称猜写权限
怎么检查 核对列表、详情和操作返回的权限；示例册合成数据不算权限验证
样板部件 列表标题 + 范围 + 总数、空数据／加载中／失败／无权限、辅栏「风险与关注」与「范围与权限」
跨端结论 不分端：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:105
候选原则 建议
从 Apple、Google、蚂蚁、腾讯、微软等十二家的设计规范和 AI 产品的实践里提炼出来的，还没正式通过。先看这六条，页面里天天用到；其余十六条收在下面，评审时再看。来源见 06 章。
D-01以工作中的人为中心每个页面先写清谁、在什么场景（电脑办公，或客户现场单手）、要完成什么，再决定放什么建议
规则原文 每个页面先写清谁、在什么场景（电脑办公，或客户现场单手）、要完成什么，再决定放什么。回答不了这三问的内容不上首屏。把人直接送到任务和内容，少设引导流程，必要的引导可以跳过
怎么检查 页面验收单首行写出三问的答案。首屏每个区块能对应一个任务。引导流程有跳过
来自哪几家 Apple 的 Purpose 与 Stay out of the way；Ant Design 意义感；GOV.UK 的 Start with user needs 与 Understand context；Polaris 的 Respect the reality of this work
来源：06-设计原则-多家之长与AI时代.md:58 （跨端建议，待登记采用）
D-03动作前有预期，中有反馈，后有交代每个动作在触发前让人知道会发生什么，进行中显示状态和能否取消，完成后说明结果和下一步建议
规则原文 每个动作在触发前让人知道会发生什么，进行中显示状态和能否取消，完成后说明结果和下一步。反馈量级跟操作量级走：小操作就地轻提示，大操作明确交代结果
怎么检查 对页面上每个按钮列出前、中、后三段的表现，缺一项不通过。保存、归档、下发任务三类动作必须有事后交代
来自哪几家 Ant Design 即时反应与巧用过渡；Apple 的 Provide clear feedback；Arco 及时反馈；Nielsen 第 1 条
来源：06-设计原则-多家之长与AI时代.md:60 （跨端建议，待登记采用）
D-04撤销优于二次确认可逆动作直接执行并给撤销入口建议
规则原文 可逆动作直接执行并给撤销入口。只有不可逆且代价高的动作才弹确认，确认框写明后果。出错时保留已输入内容，错误就地说明怎么改
怎么检查 数页面弹窗，可逆动作出现确认框就不通过。触发一次失败，输入不丢，错误信息带修正方法
来自哪几家 Ant Design 足不出户；Apple 的 Help people recover from mistakes；Polaris 的 without taking away decisions；Nielsen 第 3、5、9 条；WCAG 3.3
来源：06-设计原则-多家之长与AI时代.md:61 （跨端建议，待登记采用）
A-01AI 只出草稿，人拍板AI 生成的内容在人确认前都是草稿建议
规则原文 AI 生成的内容在人确认前都是草稿。写入正式业务表必须经人工确认。象限、风险、画像由 AI 依据已确认事实重算，界面不提供改分或拖动入口，只提供对依据提异议
怎么检查 找出每个 AI 写入点，前面都有人工确认步骤。页面上没有拖动象限或改分的控件
来自哪几家 产品原则 2、4；Apple 的 Keep people in control；Microsoft 第 9 条；Ant Design X 显性确认；IBM Carbon 的 Revert
来源：06-设计原则-多家之长与AI时代.md:75 （跨端建议，待登记采用）
A-02明示 AI 在场，说清能做什么、做得多好AI 生成的文字和字段带持续显示的标识，含「AI」和「生成」字样，字号不低于说明字号，不能只靠图标或颜色建议
规则原文 AI 生成的文字和字段带持续显示的标识，含「AI」和「生成」字样，字号不低于说明字号，不能只靠图标或颜色。归档后保留「由 AI 起草、由谁确认」。导出件页脚带标识，元数据写生成信息。首次使用和新能力上线时用两三句话说明能做什么、常见做不好的情况
怎么检查 抽 10 条 AI 内容，标识可见，折叠和滚动后仍在。导出一份周报看页脚和元数据。首次使用有说明页且能再次查看
来自哪几家 《标识办法》第 3、4、10 条；GB 45438 的 5.1、5.6；IBM Carbon 的 AI label；Apple 的 Communicate where your app uses AI；Microsoft 第 1、2 条；Ant Design X 的 AI 标识
来源：06-设计原则-多家之长与AI时代.md:76 （跨端建议，待登记采用）
A-03给依据和把握程度，不裸露数字每个 AI 结论旁一句依据，点开能到原始拜访记录建议
规则原文 每个 AI 结论旁一句依据，点开能到原始拜访记录。把握程度用高、中、低加触发条件，不用百分比。把握低的字段留空并给候选。评级和预警的规则可查
怎么检查 每张 AI 卡片能点开依据并跳到原记录。找不到百分比式置信度。把握低的字段有候选
来自哪几家 Microsoft 第 11 条；Apple 的 Attribution 与 Confidence；IBM 解释先摘要后细节；Ant Design X 必须写明引用的数据源；PIPL 第 24 条
来源：06-设计原则-多家之长与AI时代.md:77 （跨端建议，待登记采用）
其余 16 条候选原则
多家之长 D 与 AI 时代 A 的全文
D-02一致，但不划一同一含义在三端用同一个词、同一种颜色语义、同一个图标、同一个位置建议
规则原文 同一含义在三端用同一个词、同一种颜色语义、同一个图标、同一个位置。尺寸和摆放可以因端和场景不同，叫法和颜色不可以。已有做法优先于新发明
怎么检查 抽 10 个术语和 4 种状态色在三端截图比对。新增组件前先查规则索引和组件清单
来自哪几家 Salesforce 的 Consistency；GOV.UK 的 Be consistent, not uniform；Apple 的 Familiarity；Ant Design 用户确定；Atlassian 反对为一致而一致
来源：06-设计原则-多家之长与AI时代.md:59 （跨端建议，待登记采用）
D-05克制能做但想清楚了不做建议
规则原文 能做但想清楚了不做。页面只放完成任务必要的信息和控件，其余折叠或后置。美来自对用户时间和注意力的尊重，不加装饰元素和动效
怎么检查 首屏控件数和信息条目数写进验收单并说明每项的必要性。去掉某个装饰元素页面功能不变，它就是多余的
来自哪几家 Ant Design 保持克制；Apple 的 Simplicity isn't minimalism；Salesforce 的 Beauty；GOV.UK 的 Do less
来源：06-设计原则-多家之长与AI时代.md:62 （跨端建议，待登记采用）
D-06人人可用是默认文字对比度不低于 4.5:1建议
规则原文 文字对比度不低于 4.5:1。正文不小于 14px，说明不小于 12px，触控目标不小于 44px。键盘可达，焦点可见。不以颜色为唯一区分，状态必带文字或图标。文案让第一次用的人也能懂
怎么检查 用对比度工具抽查全部状态色。键盘走通主要流程。关掉颜色后状态仍可辨认。新同事不看说明能完成一次拜访录入
来自哪几家 Material 的 Accessibility by default；Atlassian 把可访问性当准入；GOV.UK 的 This is for everyone；TDesign 包容；WCAG 2.2；产品原则 7
来源：06-设计原则-多家之长与AI时代.md:63 （跨端建议，待登记采用）
D-07系统保持中立界面呈现事实和依据，不替用户下判断，不用默认值和排序诱导结论建议
规则原文 界面呈现事实和依据，不替用户下判断，不用默认值和排序诱导结论。预警和评级必须同时显示依据。默认排序和默认筛选写明规则
怎么检查 每个评级、预警、推荐旁都能点开依据。默认排序规则在页面上可查。没有预选的判断类选项
来自哪几家 Ant Design「系统应该保持中立，不能替用户或者诱导用户做出判断」；Apple 的 Responsibility；Polaris 的 Trustworthy；产品原则 2
来源：06-设计原则-多家之长与AI时代.md:64 （跨端建议，待登记采用）
D-08信息密度按任务选列表、看板、总览用高密度：一屏看全，字段对齐，数字右对齐建议
规则原文 列表、看板、总览用高密度：一屏看全，字段对齐，数字右对齐。录入、确认、阅读用低密度：一次一件事，留白充足。密度由用户任务决定，不由组件默认值决定
怎么检查 每个页面模板标明密度档位。列表页一屏可见行数和录入页每屏字段数写进验收单
来自哪几家 飞书「信息密度由用户与组件的交互方式决定」；macOS 的 comfortable information density；Polaris 的 Efficient；Ant Design 对齐与亲密性
来源：06-设计原则-多家之长与AI时代.md:65 （跨端建议，待登记采用）
D-09随业务生长规则、变量、组件只增不推翻建议
规则原文 规则、变量、组件只增不推翻。新需求先查现有规则能否覆盖，再新增。新增走变更单并给编号。默认基础加开放定制，项目定制不改核心
怎么检查 每张变更单能回答「现有哪条规则不够用」。变量只在 tokens.json 增删。定制走配置层，不改三张表和跟进逻辑
来自哪几家 Ant Design 生长性；TDesign 进化；Semi「设计系统必须是活的」；Atlassian 的 Foundational；Material 的 Customization；产品原则 5
来源：06-设计原则-多家之长与AI时代.md:66 （跨端建议，待登记采用）
D-10用数据迭代关键页面内建使用数据：完成率、失败率、返回率、AI 草稿修改率建议
规则原文 关键页面内建使用数据：完成率、失败率、返回率、AI 草稿修改率。规则和页面上线后按真实数据迭代，不凭感觉改。验收记录和数据一起归档
怎么检查 每个页面模板列出至少一个可量化指标和采集方式。变更单的「实际问题」引用数据或验收记录
来自哪几家 GOV.UK 的 Design with data 与 Iterate；Apple 的 Experiment and iterate；Material 的 Test and iterate；G-02
来源：06-设计原则-多家之长与AI时代.md:67 （跨端建议，待登记采用）
A-04待确认态看得见、分得清AI 原值、人已修改、已确认三种状态在视觉和数据上都能区分建议
规则原文 AI 原值、人已修改、已确认三种状态在视觉和数据上都能区分。人改过的字段去掉 AI 标识，可恢复 AI 建议。全部确认前归档按钮禁用并说明还缺什么
怎么检查 拜访确认页三态截图。改一个字段后标识变化并可恢复。未确认完时归档不可点且有说明
来自哪几家 产品原则 2；Apple 的 guided corrections；IBM Carbon 的 Revert；Salesforce SLDS 2 的待确认态（二手）
来源：06-设计原则-多家之长与AI时代.md:78 （跨端建议，待登记采用）
A-05可撤销，可追溯AI 参与的每一步留痕：提示模板版本、模型、输入事实快照、输出、处置和理由、确认人和时间建议
规则原文 AI 参与的每一步留痕：提示模板版本、模型、输入事实快照、输出、处置和理由、确认人和时间。归档后保留草稿版本。重新生成后可回到上一版
怎么检查 任选一条归档记录能查到上述字段。重新生成后上一版可对比
来自哪几家 产品原则 3；Microsoft 第 9 条撤销自动动作与第 16 条；Apple 的 revert or retry；Vercel 的 Checkpoint；《标识办法》第 10 条
来源：06-设计原则-多家之长与AI时代.md:79 （跨端建议，待登记采用）
A-06行动前预览与授权，按工具类别分级Read 和 Draft 类自动执行且不落库建议
规则原文 Read 和 Draft 类自动执行且不落库。Command 和 External 类执行前显示动作、对象、参数、影响范围，由人选本次允许、总是允许本类、或拒绝并说明。参数解析不了就转人工
怎么检查 列出全部 Command 和 External 工具，每个都有授权卡。拒绝路径能走通
来自哪几家 产品原则 4 的 Tool 四类；Apple 的 get permission before irreversible actions；Ant Design X 按错误成本分档确认；OpenAI 的 needs_approval；Anthropic 权限模式；Microsoft 课程的风险分级
来源：06-设计原则-多家之长与AI时代.md:80 （跨端建议，待登记采用）
A-07失败要体面，不确定就问、就收缩听不清或不确定的字段给两到四个候选建议
规则原文 听不清或不确定的字段给两到四个候选。两次仍不确定就留空交给人。转写或模型不可用时退回手工表单，已识别部分保留。错误说原因和下一步
怎么检查 模拟转写失败和模型超时，页面能继续填写，已识别值不丢。不确定字段给候选而不是猜一个值
来自哪几家 Microsoft 第 10 条；Apple 的 Limitations 与 fallback；Ant Design X 错误处理与追问；Anthropic 的 AskUserQuestion
来源：06-设计原则-多家之长与AI时代.md:81 （跨端建议，待登记采用）
A-08权限对齐，只看该看的AI 只基于当前用户有权看的数据生成建议
规则原文 AI 只基于当前用户有权看的数据生成。洞察和总结不出现越权客户名。无权限页面不显示对象名称
怎么检查 用主管和销售两个账号生成同一份总结，越权客户不出现。403 页面没有客户名
来自哪几家 产品原则 6；Apple 的 Keep people's information safe；Microsoft 课程的 need-only basis；飞书 Aily 权限对齐（二手）
来源：06-设计原则-多家之长与AI时代.md:82 （跨端建议，待登记采用）
A-09不打断主线，顺势出现AI 以内嵌补全、角标、卡片建议出现在对应对象旁，可一键忽略并记录原因建议
规则原文 AI 以内嵌补全、角标、卡片建议出现在对应对象旁，可一键忽略并记录原因。不做独立聊天首页。解释和来源默认折叠。生成过程显示具体阶段和进度，可中途取消并保留已生成部分
怎么检查 拜访确认和客户列表不被 AI 弹窗打断。每个 AI 提示有忽略入口。生成中能看到阶段文案，不是笼统的「处理中」
来自哪几家 Microsoft 第 3、8 条；IBM Carbon 解释只在需要时出现；Ant Design X 以 Do 为主、流式生成；Apple 的 specific, reassuring feedback；Vercel 可折叠的 Reasoning 与 Tool
来源：06-设计原则-多家之长与AI时代.md:83 （跨端建议，待登记采用）
A-10隐私最小化，边界清楚语音转写只抽取任务需要的字段建议
规则原文 语音转写只抽取任务需要的字段。语音原文的保留期和用途在确认页可见。导出默认脱敏联系人电话。处理联系人信息前告知用途和保存期限。提供更正、删除申请入口和投诉举报入口
怎么检查 确认页能看到保留期说明。导出件电话脱敏。联系人页有更正和删除入口。设置页有投诉举报入口
来自哪几家 Apple 的 Privacy 三条；PIPL 第 6、7、17、24、45～47 条；《生成式办法》第 11、15 条；Microsoft 的 Privacy and security
来源：06-设计原则-多家之长与AI时代.md:84 （跨端建议，待登记采用）
A-11不伪装成人，语气克制助手有固定名字和 AI 标识，不用真人头像建议
规则原文 助手有固定名字和 AI 标识，不用真人头像。对客文案由 AI 起草时明示草稿，只有销售确认后才以销售名义发出。语气专业克制，全角标点，不夸饰
怎么检查 找不到真人头像或暗示真人的措辞。对客文案发送前有销售确认步骤
来自哪几家 Apple 的 Never trick someone into thinking they're interacting with a human；Microsoft 第 5、6 条；Ant Design X 角色一致；产品原则 7
来源：06-设计原则-多家之长与AI时代.md:85 （跨端建议，待登记采用）
A-12反馈有回响，更新要谨慎每条 AI 输出可赞踩，踩必须选原因建议
规则原文 每条 AI 输出可赞踩，踩必须选原因。销售对 AI 值的修改作为质量信号回流。评分规则或算法调整前先公告，说明对我的客户有何影响。不悄悄改变行为
怎么检查 踩后必须选原因才能提交。能找到最近一次算法调整的公告
来自哪几家 Microsoft 第 13～18 条；Apple 的 Let people share feedback on outputs；Ant Design X 点赞点踩加原因；Anthropic 的 Approve and remember
来源：06-设计原则-多家之长与AI时代.md:86 （跨端建议，待登记采用）
视觉基础
换个主色以前要改三端几十处，现在改一个变量。颜色、字号、间距、圆角都是变量。左边改一个值，右边的预览和下面的样板一起变。改完可以生成变更单草稿。这里的修改只在你的浏览器里，不会写回仓库。
为什么一版舒服一版累
- 一层一圈边。一个容器里的东西不再描边，同一层只用边框、底色、留白三者之一。
- 留白就是分组。同组 8，分组 16，分区 24，不用线。
- 悬停才出底色。能点的平时和不能点的长得一样。
- 数字大、说明小、其余没有。
- 一行数字对齐到一条线。
- 一屏最多两种圆角。面板 12，控件 6。
看一屏时数框、数圆角，超过两圈两种就有多的。全文在 14 章。
颜色怎么用
一共就五种用法。记住这张图，不用记变量名。
| 用法 | 变量 | 什么时候用 |
|---|---|---|
| 导航 | --ui-sidebar | 只有左侧或底部导航 |
| 页面底 | --ui-background | 整页最底下那层 |
| 面板与文字 | --ui-surface、--ui-ink、--ui-secondary | 白面板，正文，说明 |
| 动作与选中 | --ui-primary、--ui-selected、--ui-focus | 主按钮、链接、选中行、键盘焦点。别的地方不用蓝 |
| 业务状态 | --ui-success、--ui-warning、--ui-danger、--ui-neutral | 向好、需关注、转差、待评估。旁边一定有字 |
变量面板
颜色（共 39 个，列表可滚动）
基础色
业务状态色
导航与遮罩
字号、间距、尺寸（px）
这里是电脑网页的值。手机网页和小程序有几个值不同，在「跨端适配」章。标 建议 的变量还没正式采用。
预览
字号
--ui-text-small · 12px--ui-text-body · 14px--ui-text-section · 16px--ui-text-page · 24px--ui-text-metric · 32px间距
--ui-space-1 · 4px4：图标与文字--ui-space-2 · 8px8：同组控件--ui-space-3 · 12px12：行内区域--ui-space-4 · 16px16：内容块--ui-space-6 · 24px24：面板内边距--ui-space-8 · 32px32：大分区样板实时跟随
规则
V-01配色与层级深蓝只做左侧导航，页面底是浅灰，内容放在白面板上。
深蓝只做左侧导航，页面底是浅灰，内容放在白面板上。蓝色只给按钮和选中项。红黄绿一定带字。
规则原文 深蓝导航、浅色阅读、白色面板；蓝用于动作和选中；业务状态色配文字或图标
正确示例／反例 正：红色边线＋“转差”＋依据；反：大面积深色正文区或只显示色点
怎么检查 颜色与标签含义一致；文字在背景上可读
相关变量 --ui-background --ui-surface --ui-sidebar --ui-ink --ui-secondary --ui-muted --ui-primary --ui-primary-hover --ui-line --ui-selected --ui-on-primary --ui-sidebar-ink --ui-sidebar-nav --ui-sidebar-muted --ui-sidebar-hover --ui-sidebar-active --ui-sidebar-accent
样板部件 深蓝导航栏（电脑）
跨端结论 适配：色值统一；导航容器适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:57
V-02字体与数字正文 14，说明 12，分区标题 16，页面标题 24，大数字 32。
正文 14，说明 12，分区标题 16，页面标题 24，大数字 32。数字用等宽字体，一列对齐。
规则原文 系统中文字体；正文 14px、辅助 12px、分区标题 16px、页面标题 24px、关键数字 32px；正文行高 1.65，标题 1.5；数字等宽对齐
正确示例／反例 正：标题、事实、时间分三层；反：一整段任务说明加粗作大标题
怎么检查 长中文与大金额不覆盖状态、按钮；关键内容不因截断丢失
相关变量 --ui-font --ui-text-small --ui-text-body --ui-text-section --ui-text-page --ui-text-metric
样板部件 手机正文 16px、手机说明文字 13px
跨端结论 适配：档位统一；正文值适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:58
V-03间距与形状间距只用 4、8、12、16、24、32 这六档。
间距只用 4、8、12、16、24、32 这六档。按钮圆角 6，面板圆角 12。按钮高 36，输入框高 40。
规则原文 间距 4/8/12/16/24/32px；控件圆角 6px、面板 12px；普通控件高 36px、表单 40px；同组紧密、分区疏朗
正确示例／反例 正：列表条件与结果间 12～16px，独立面板间 24px；反：所有空隙等宽
怎么检查 对照示例册；偏离时记录具体理由
相关变量 --ui-space-1 --ui-space-2 --ui-space-3 --ui-space-4 --ui-space-6 --ui-space-8 --ui-radius-control --ui-radius-panel --ui-control-height --ui-field-height
跨端结论 适配：档位统一；用途→档位的选择适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:59
V-04图标与焦点图标 16 大，只有图标的按钮要有文字名。
图标 16 大，只有图标的按钮要有文字名。键盘选中要有 2 像素的框。文字和底色对比够。
规则原文 图标延用产品已有风格；常用图标 16px；纯图标按钮提供可读名称；键盘焦点轮廓至少 2px；正文正常状态对比度目标 ≥4.5:1
正确示例／反例 正：刷新图标有“刷新”名称；反：依靠颜色猜按钮
怎么检查 Tab 可见，读屏名称明确；检查常用文字与状态标签对比度
相关变量 --ui-focus --ui-icon-sm --ui-icon-md --ui-icon-lg --ui-sidebar-focus
样板部件 详情页签、键盘焦点 2px 轮廓
跨端结论 适配：含义统一；目标尺寸适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:60
组件
按钮、输入框、选择器这些基础控件直接用 Ant Design，筛选栏、四态面板这些组合件和 AI 标识、待确认字段这些 AI 件是部门自己的。下面就是组件库本体，每个组件每个状态都能直接点。
组件说明表
上面目录页里每个组件对应这里一行：叫什么、在两端各叫什么、做什么、依据哪条规则、有哪些状态。
| 组件 | Web 组件 | 小程序组件 | 做什么 | 规则 | 状态 |
|---|---|---|---|---|---|
| 基础控件 | Basics | t-* 直接用 | 直接用 Ant Design 6，主题只来自桥接文件；这里列出常用的和它们的状态。头像、附件上传已有 Sb 壳（SbAvatar、SbUpload），不再单列 用在：所有页 | V-01、V-03 | Button、Input、Select、DatePicker、Cascader、Table、Modal、Drawer、message、notification、Tag、Tooltip、Tabs、Collapse、Switch、Radio、Checkbox、Steps、Progress、Badge、Skeleton、Spin、Divider、Slider、Transfer、Tree、Mentions、Image、Popover、Dropdown、Typography、Space、Grid、Affix、BackTop、QRCode、Carousel |
| 主题注入 | SbProvider | app.wxss 两行 import | 一次注入主题：antd 的 token 来自 bridge-antd.theme.json，页面再引 design-tokens.css。 用在：所有页 | V-01、V-03 | — |
| 状态标签 | SbStatusTag | sb-status-tag | 红黄绿灰必带文字，可带依据。业务状态（向好、需关注、待确认、已拒绝这类）一律用它；antd 的 Tag 只做分类标识，如象限名、层级、部门。 用在：15 页 | B-01 | 向好、需关注、转差、待评估、未登记、带依据 |
| 四态面板 | SbStatePanel | sb-state-panel | 加载中、空数据、失败可重试、无权限，一个组件。重试不清筛选，无权限不露对象名。 用在：24 页 | C-06、P-03 | 加载中、骨架、空、失败、无权限 |
| 筛选栏 | SbFilterBar | sb-filter-bar | 标题带范围、筛选片、已选数、结果数、清除，紧邻结果区。 用在：7 页 | C-04 | 默认、已选、禁用 |
| 搜索框 | SbSearch | sb-search | 带清除；无结果由四态面板表达。 用在：8 页 | C-02、C-04 | 默认、输入中、加载中、禁用 |
| 列表行 | SbListRow | sb-list-row | 名称、摘要、状态、时间位置固定；选中、禁用带原因。 用在：25 页 | C-05 | 默认、选中、无权限 |
| 底部操作条 | SbBottomBar | sb-bottom-bar | 一个主操作，处理中防重复，禁用说原因，含安全区。 用在：13 页 | C-01、X-05 | 默认、处理中、禁用说原因 |
| 表单项 | SbField | sb-field | 标签常显、必填标记、错误就地、只读态；内部放 antd 的输入、选择、日期。 用在：18 页 | C-02 | 默认、必填、错误、只读 |
| 底部弹层 | SbSheet | sb-sheet | 标题、关闭、取消；不替代页面级返回。 用在：7 页 | C-07、X-03 | 打开 |
| 分页 | SbPagination | sb-pagination | 显示总数，末页禁用下一页；传了 onPageSizeChange 才显示每页条数选择器；mode=more 是加载更多按钮，不显示每页条数。 用在：5 页 | C-05 | 默认、末页、可选每页条数、加载更多 |
| 指标卡 | SbMetricTile | sb-metric-tile | 数字、说明、变化；缺失显示未登记，不显示 0。 用在：看板、工作台、总览 | B-03 | 有值、缺失 |
| 页面标题 | SbPageHeader | sb-page-header | 标题、范围名邻近数据、主操作。 用在：所有页 | T-02、B-05 | 默认 |
| 三段布局 | SbDetailLayout | 不适用，小程序用 navigateTo | 按容器宽度分三档：三栏并排、图标导航加二选一、底部导航加整页进入。 用在：Web 列表详情页 | T-03、X-02、X-03 | 电脑、收紧、手机列表、手机详情 |
| 带标签下拉 | SbLabeledSelect | — | 标签在框内左侧，值在右侧；没选显示「全部」。多选默认显示复选框，点击应用才提交，取消保留原条件。 用在：客户、商机、任务、看板 | C-04 | 未选、已选、带数量、连续勾选与应用、取消恢复、禁用 |
| 指标条 | SbMetricStrip | — | 几张指标卡横排，右侧周期切换和口径说明。缺失显示未登记，加载中显示正在读取而不是 0。 用在：客户、看板、总览 | T-05、B-03 | flat 默认、带周期与口径、card、加载中 |
| 带数量标签页 | SbTabs | — | 数量小号灰字，超过 99 显示 99+，当前页签主色。 用在：任务、商机、动态 | C-05 | 默认、超过 99、禁用 |
| 表格 | SbTable | — | 封装 antd 表格：操作列固定右侧，四态接 SbStatePanel，分页接 SbPagination，行高两档；列上的 sorter 与 rowSelection 原样透传 antd 原生排序与勾选。 用在：客户、商机、任务、成员 | C-05、C-06 | 默认、紧凑、可排序、可勾选、加载中、空、失败、无权限 |
| 图标 | SbIcon | — | 传含义名不传图标库名字，两端同一张表；尺寸三档，颜色跟文字或语义色；tile 带底色方块用于导航、空态、指标卡。 用在：所有页 | V-04 | 三档尺寸、语义色、带底方块、和文字一起 |
| AI 标识 | SbAiBadge | sb-ai-badge | 持续显示，含「AI」与「生成」字样，不只靠图标或颜色；归档后写谁确认。 用在：拜访确认、洞察、画像、总结 | A-02 | 生成中、待确认、已确认 |
| 待确认字段 | SbAiField | sb-ai-field | AI 原值、人已修改、已确认三态；低把握留空给候选；可恢复 AI 建议。 用在：拜访确认 | A-01、A-03、A-04 | AI 原值待确认、人已修改、已确认、低把握给候选、错误 |
| AI 依据 | SbAiSources | sb-ai-sources | 每条依据可点开到原始记录；默认折叠；没有依据就不展示结论。 用在：洞察、象限、总结 | A-03 | 折叠、展开、无依据 |
| 生成过程 | SbAiProgress | sb-ai-progress | 具体阶段与进度，可取消并保留已生成部分；失败可重试。 用在：语音转草稿 | A-09、A-07 | 进行中、已取消、失败、完成 |
| 侧导航 | SbSideNav | — | 深蓝侧栏：品牌、工作区切换、分组导航（分组灰字小标题、当前项浅蓝底）、底部运营后台链接与账号块；折叠成 64 宽窄条只留图标。颜色只走 --ui-sidebar* 变量。 用在：Web 所有页 | T-01、T-03、V-01 | 展开、折叠窄条、账号激活 |
| 顶栏 | SbTopBar | — | 白底 64 高：返回按钮加面包屑，右侧连接状态点与日期、「新建」主按钮、帮助、刷新。有顶栏面包屑的页不再放 SbPageHeader。 用在：Web 所有页 | T-02、X-03、C-06 | 已连接、演示数据、服务不可用、正在检查、无新建 |
| 日期选择 | SbDatePicker | — | antd DatePicker 薄壳：中文文案，快捷项今天／本周／本季，对外只收发 YYYY-MM-DD 字符串；range 为区间。 用在：拜访、任务、商机、筛选 | C-02、V-03 | 单日、区间、禁用 |
| 下拉选择 | SbSelect | — | antd Select 薄壳：统一 options，count 显示灰小字，缺省不带清除。筛选场景用 SbLabeledSelect。 用在：表单 18 页 | C-02、C-04 | 未选、已选、带数量、多选、禁用 |
| 搜索选择 | SbSearchSelect | — | 远程搜索下拉：search(keyword) 返回 Promise，防抖 300ms；下拉里三种提示：输入关键词搜索、正在搜索、没有匹配。 用在：选客户、选人、关联商机 | C-02、C-06 | 待输入、正在搜索、有结果、没有匹配、静态选项 |
| 金额输入 | SbAmountInput | — | antd InputNumber 薄壳：单位默认万元，千分位，只收非负数，两位小数；空是 null 不是 0。 用在：商机、合同、毛利 | C-02、B-03 | 空、有值、禁用、换单位 |
| 多行文本 | SbTextarea | — | antd Input.TextArea 薄壳：带字数、上限 500，高度随内容 3～8 行。 用在：拜访口述、任务、拒绝意见 | C-02 | 默认、有内容、禁用 |
| 分段切换 | SbSegmented | — | antd Segmented 薄壳：统一 options，默认 small；多于 5 项改用 SbTabs 或下拉。 用在：看板、总览、列表视图 | C-04、T-05 | 默认、带禁用项、中号 |
| 作战地图 | SbBattleMap | — | 关系 × 潜力四象限：横轴潜力、纵轴关系，分界线默认 5.5 虚线，layout=equal 按阈值等分四区；四个格子名字永远显示；点一律主色、只用点径表示金额档（状态写在悬停提示与读屏文字里）；重叠聚成数字，点象限放大，点客户进详情；没填的客户在图下方计数。 用在：客户、看板、总览 | 12 章 2.1、12 章 2.2、12 章 2.3、12 章 2.4、12 章 2.5、12 章 2.6 | 默认、悬停与选中、重叠聚合、放大一个象限、空、待评估、加载中、手机 |
| 图表卡片 | SbChartCard | — | 标题写图回答什么问题，范围周期紧挨标题，口径放悬停；加载骨架，空与错四态；读屏摘要；可切到数据表。只是壳，图区放 SbBarChart／SbLineChart。 用在：看板、作战地图、总览 | 12 章 §1、12 章 §4 | 有图、带数据表、加载中、空、失败 |
| 看板指标卡 | SbKpiCard | — | 数字 32、单位小一号、说明 14、变化 12；升绿降红只在有好坏时用，无好坏用灰；缺失显示未登记，加载中显示正在读取。 用在：看板、总览 | 12 章 §3.1、B-03 | 有值、变化向好、变化转差、无好坏、缺失、加载中、可点进 |
| 柱状图 | SbBarChart | — | 横向条形做排名与阶段 ACV，竖向柱状做对比；从 0 开始不截断；最多五个系列按 chart-1～5；缺失写未登记不画 0；排名最多 10 条。 用在：看板、总览 | 12 章 §3.2、12 章 §3.4、12 章 §3.5 | 横向排名、竖向单系列、两个系列、带未登记、超过 10 条 |
| 折线图 | SbLineChart | — | 趋势；可以不从 0 开始但轴上标最小值；线粗 2 点 6；缺失断开并写未登记。 用在：看板、客户详情 | 12 章 §3.2、12 章 §3.4 | 单系列、多系列、面积、不从 0 开始 |
| 时间轴 | SbTimeline | — | antd Timeline 薄壳：跟进历史与业务动态。节点色只由 tone 决定（good、watch、bad、pending、neutral），时间小灰字、标题、说明三行；pending 是末尾「进行中」占位；空列表不画空轴。 用在：客户详情、商机详情、任务详情 | C-05、B-01 | 默认、可点进、进行中占位、倒序、紧凑、加载中、空 |
| 附件上传 | SbUpload | — | antd Upload 薄壳：列表型或拖拽区；文件统一 {uid,name,size,status,url}；类型、大小、数量超限就地一行红字说明，不弹 toast，其余文件照常加入；request 不传只维护本地列表。 用在：拜访附件、合同扫描件、任务交付物 | C-02、C-06 | 点击、拖拽、上传中与失败、超限说明、到上限、禁用 |
| 结果页 | SbResult | — | antd Result 薄壳：整页反馈。图标色只走 success、danger、primary、warning 变量；一个主按钮一个次按钮；extra 放补充内容。拜访确认的归档成功页以后换成它。 用在：拜访归档成功、提交失败、需补充 | C-01、C-06、B-01 | 成功、失败、提示、警示、带补充内容 |
| 头像 | SbAvatar | — | antd Avatar 薄壳：没有图片就用姓名后两字（中文去姓，英文取前两个字母）；三档 24 / 32 / 40；底色档默认主色淡底；SbSideNav 的账号头像也用它。 用在：侧栏账号、拜访记录人、任务执行人、成员列表 | V-01、V-04 | 取字、图片、三档尺寸、底色档、方形 |
来源：packages/ui-react/src/meta.js。清单依据 08-组件清单.md。
规则
C-01按钮一块区域只有一个实心蓝按钮。
一块区域只有一个实心蓝按钮。按钮灰掉要写原因。点了以后显示「处理中」，不能连点两次。
规则原文 同一区域突出一个主操作，次操作描边或文字；默认、悬停、聚焦、禁用、处理中均有表达；禁用说明原因
正确示例／反例 正：“保存中”并阻止重复提交；反：三个同样抢眼的主按钮
怎么检查 鼠标、Tab、Enter 操作；处理中不可重复提交
样板部件 底部主动作条（手机）
跨端结论 适配：统一；位置适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:68
C-02输入与校验标签一直显示，必填打星。
标签一直显示，必填打星。填错了红字写在那个字段下面，已填的内容保留。
规则原文 标签常显，必填项明确；错误就地提示并关联字段；错误时保留输入；仅对应处理阶段只读
正确示例／反例 正：沟通内容缺失时提示且保留下一步计划；反：用 placeholder 代替标签
怎么检查 中文输入、长文、粘贴、失败重填；不可覆盖正在编辑的值
样板部件 搜索框
跨端结论 引用平台：统一；键盘处理引用平台 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:69
C-03选择器下拉选择能搜索、能多选、能清空。
下拉选择能搜索、能多选、能清空。单选点了就生效，多选点「应用」才生效。按 Esc 关闭。
规则原文 使用现有 SalesSelect、SalesDatePicker；搜索、多选与清空可用；单选选中即生效，多选点击应用；Esc 取消，焦点回触发点
正确示例／反例 正：季度多选显示已选数量；反：四个季度用庞大双栏弹窗
怎么检查 搜索无结果、取消、多选应用、日期合法性、窄屏位置
跨端结论 适配：行为统一；实现各端 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:70
C-04筛选栏筛选条件紧贴在结果列表上方，写清范围，显示已选几项、共几条，有「清除」。
筛选条件紧贴在结果列表上方，写清范围，显示已选几项、共几条，有「清除」。
规则原文 紧邻所属结果区，注明作用范围，显示已选条件、结果数和清除入口；总览与列表分别命名
正确示例／反例 正：“商机列表·阶段”，上方总览保持不变；反：无标题下拉放在两个区域之间
怎么检查 改列表条件核对总览；改统计周期核对列表；清除恢复
样板部件 筛选片、结果行
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:71
C-05列表与表格列表里名称、状态、负责人、时间、金额、操作的位置每一行都一样。
列表里名称、状态、负责人、时间、金额、操作的位置每一行都一样。电脑上用表格，不用一堆卡片。
规则原文 名称、状态、负责人、时间、金额、操作位置稳定；长文可展开完整内容；不以卡片堆叠替代桌面列表
正确示例／反例 正：首行对象、次行摘要、末列操作；反：长标题把状态推离屏幕
怎么检查 长名称、20 行以上、空列表、窄屏；操作可达且关联对象正确
样板部件 列表行
跨端结论 适配：字段与顺序统一；表格↔列表行适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:72
C-06数据与反馈状态加载中有字，空了说原因和下一步，出错能重试，缺一部分数据就显示已有的并说明缺了什么。
加载中有字，空了说原因和下一步，出错能重试，缺一部分数据就显示已有的并说明缺了什么。
规则原文 加载有文案；空数据说明原因及下一步；异常可重试；部分缺失应显示已有数据并说明覆盖范围
正确示例／反例 正：未登记回款；反：加载失败显示 0
怎么检查 切换正常、加载、空数据、异常；重试不丢筛选
样板部件 空数据／加载中／失败／无权限
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:73
C-07弹窗与展开弹窗有标题、有关闭、有取消，按 Esc 能关，关了焦点回到打开它的地方。
弹窗有标题、有关闭、有取消，按 Esc 能关，关了焦点回到打开它的地方。小详情就地展开，不弹窗。
规则原文 标题清楚；弹窗有关闭与取消；Esc 可关，焦点不逃逸且关闭回到触发点；次要详情优先就地展开
正确示例／反例 正：摘要后展开完整判断依据；反：看一行备注也跳新页面
怎么检查 Tab/Shift+Tab、Esc；展开不改变记录、顺序、业务状态
相关变量 --ui-shadow-popup --ui-overlay
样板部件 关闭（电脑）／返回（其他）、返回后保留
跨端结论 适配：行为统一；容器适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:74
C-03 里写的 SalesSelect、SalesDatePicker 是 Web 1.0 自己做的两个控件。Web 改用 Ant Design 后由它的 Select 与 DatePicker 替代，规则文本要走变更单更新。
组件用哪家 建议
不自己造轮子。每个端选一个成熟的开源组件库当底座，按钮、输入框、弹窗这些直接用它的，部门只做三件事：一份颜色字号变量、给这个库的主题桥接文件、在它之上搭的十几个组合件。
| 端 | 用哪家 | 为什么 |
|---|---|---|
| 微信小程序 | 腾讯 TDesign 小程序版（tdesign-miniprogram） | 它的颜色变量在网页和小程序同名，一份桥接两边生效；组件全；每月更新；开源免费 |
| 电脑与手机网页 | 蚂蚁 Ant Design 6 加 Ant Design X，用 React | 用的人最多，招人最容易；Ant Design X 专门有 AI 对话、来源引用这类组件，AI 原则最省事 |
两家不是一家，但颜色字号都从同一份变量桥接过去，实际不影响。2026-09-20 定的。备选方案、每家的缺口和接入步骤在 05 章。
来源：05-组件生态选型.md。
布局
电脑三栏到手机单页怎么折，每个开发理解不一样。规范定死：电脑上是导航、列表、详情三段，到手机变成列表页进详情页再返回。电脑上拖预览框右下角的小三角把预览拉窄，看它在 900 和 600 两个门槛怎么折。手机上点上方的宽度按钮。
拖宽看三档
电脑 >900 [导航 220][客户列表 360][客户详情 其余宽度] 三栏并排 收紧 601～900 [栏 56][客户列表 ────────────] → 点一行 → [栏 56][详情覆盖列表 ‹返回] 手机 ≤600 [客户列表 整宽 + 底部导航] → 点一行 → [详情整页 ‹返回 + 底部操作条]
8 个视口的自动截图
页面模板（已确认）
T-01首页工作台首页分三块：待办、常用操作、业务动态。
首页分三块：待办、常用操作、业务动态。动态每条写对象、摘要、状态、时间、动作。红黄的进「需关注」。
规则原文 待办、常用操作、业务动态独立；动态按对象、摘要、状态、时间、动作组织；红黄业务判断进入“需关注”
正确示例／反例 正：需关注来自业务判断；反：橙色任务“待接受”当作商机风险
怎么检查 全部／需关注切换、展开依据、完整标题可读；[#template-home](../示例册/design-system/index.html#template-home)
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:89
T-02业务列表列表页上方是总览面板，下面列表的标题、工具栏、筛选、数量、结果在一块。
列表页上方是总览面板，下面列表的标题、工具栏、筛选、数量、结果在一块。筛选只影响这个列表。
规则原文 总览独立面板；列表标题、工具栏、条件、数量和结果同区；局部筛选不污染其他区域
正确示例／反例 正：列表无匹配时总览仍显示原统计；反：全页一个含糊的时间选择器
怎么检查 搜索＋多选组合、单条件移除、清除；[#template-list](../示例册/design-system/index.html#template-list)
样板部件 列表标题 + 范围 + 总数、结果行
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:90
T-03经营详情详情页顶部是对象摘要和主按钮，下面用页签分摘要、跟进、任务。
详情页顶部是对象摘要和主按钮，下面用页签分摘要、跟进、任务。左边事实，右边关注点和依据。客户和商机分开两页。
规则原文 对象摘要与主要操作在顶部；页签组织摘要、跟进、任务；主栏事实、辅栏关注与依据；客户与商机分开
正确示例／反例 正：商机注明所属客户；反：把客户整体与某商机状态混为一谈
怎么检查 两种对象切换、页签键盘操作、完整记录；[#template-detail](../示例册/design-system/index.html#template-detail)
样板部件 详情摘要卡、详情页签、辅栏「风险与关注」与「范围与权限」、辅栏何时并排
跨端结论 适配：统一；分栏按详情栏自身宽度 ≥760px 决定（容器查询） （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:91
T-04拜访录入录拜访时电脑上左边是关联的客户，右边是编辑区，同屏。
录拜访时电脑上左边是关联的客户，右边是编辑区，同屏。保存按钮固定在底部。手机上下排。
规则原文 桌面左右分栏，关联对象与编辑内容同屏；长文本内部滚动，操作区固定在表单底部；窄屏上下排列
正确示例／反例 正：失败保留下一步计划；反：长页面滚到底才能提交或静默失去草稿
怎么检查 1024×600、长文本、必填缺失、返回修改；[#template-visit](../示例册/design-system/index.html#template-visit)
跨端结论 适配：统一；分栏适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:92
T-05经营分析分析页的范围和周期选择紧挨着指标。
分析页的范围和周期选择紧挨着指标。金额和数量分别写单位。图表旁边配数据表，空值和口径写清楚。
规则原文 范围／周期紧邻指标；金额、数量分别标单位；图表配数据表、空值与统计口径说明
正确示例／反例 正：缺关单日期的条目明确标注未纳入；反：缺数据的指标算 0
怎么检查 切季度图表与合计一致，缺失仍缺失；[#template-analytics](../示例册/design-system/index.html#template-analytics)
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:93
跨端布局建议
X-02桌面频繁切换对象客户、任务等可采用“功能导航＋对象列表＋详情”建议
规则原文 客户、任务等可采用“功能导航＋对象列表＋详情”；窗口不够时折叠导航或将详情独立打开
怎么检查 连续查看多条、关闭详情、长标题与键盘操作
相关变量 --ui-nav-width --ui-nav-rail-width --ui-list-width
样板部件 导航折叠成图标栏（收紧）
来源：1.0.0-使用包快照/手册正文.md:152 （跨端建议，待登记采用）
X-03手机导航常用一级功能可放底部建议
规则原文 常用一级功能可放底部；列表点进详情；返回时保留允许保留的条件、选中项和位置
怎么检查 列表→详情→返回；导航栏与系统返回的结果一致
相关变量 --ui-tabbar-height
样板部件 底部导航（手机）、关闭（电脑）／返回（其他）、返回后保留
来源：1.0.0-使用包快照/手册正文.md:153 （跨端建议，待登记采用）
X-05响应式沿用 Web V1 的大于 900、601～900、不大于 600px 三档建议
规则原文 沿用 Web V1 的大于 900、601～900、不大于 600px 三档；根据内容决定是否分栏，不强行把所有页面做三栏
怎么检查 1440、1366、1024、900、600、390、320 宽度与短屏
来源：1.0.0-使用包快照/手册正文.md:155 （跨端建议，待登记采用）
交互状态
加载、空数据、失败、无权限也是规范的一部分，不由开发自由发挥。点状态机的节点，下面的样板会真的切到那个画面，搜索和筛选条件不丢。返回时保留条件这条按 X-03，还是建议。
状态机
点节点，样板跟着切。手机上图可以左右滑规则
C-06数据与反馈状态加载中有字，空了说原因和下一步，出错能重试，缺一部分数据就显示已有的并说明缺了什么。
加载中有字，空了说原因和下一步，出错能重试，缺一部分数据就显示已有的并说明缺了什么。
规则原文 加载有文案；空数据说明原因及下一步；异常可重试；部分缺失应显示已有数据并说明覆盖范围
正确示例／反例 正：未登记回款；反：加载失败显示 0
怎么检查 切换正常、加载、空数据、异常；重试不丢筛选
样板部件 空数据／加载中／失败／无权限
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:73
C-07弹窗与展开弹窗有标题、有关闭、有取消，按 Esc 能关，关了焦点回到打开它的地方。
弹窗有标题、有关闭、有取消，按 Esc 能关，关了焦点回到打开它的地方。小详情就地展开，不弹窗。
规则原文 标题清楚；弹窗有关闭与取消；Esc 可关，焦点不逃逸且关闭回到触发点；次要详情优先就地展开
正确示例／反例 正：摘要后展开完整判断依据；反：看一行备注也跳新页面
怎么检查 Tab/Shift+Tab、Esc；展开不改变记录、顺序、业务状态
相关变量 --ui-shadow-popup --ui-overlay
样板部件 关闭（电脑）／返回（其他）、返回后保留
跨端结论 适配：行为统一；容器适配 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:74
B-04AI 流程AI 处理拜访的四步：核对、质检、人工确认、归档。
AI 处理拜访的四步：核对、质检、人工确认、归档。处理中显示到哪一步，失败保留输入可重试。质检完不等于归档。
规则原文 核对内容→质检→人工确认→归档；处理中可见阶段；失败保留输入且可重试或返回；超时走已有恢复机制；质检完成不等于归档
正确示例／反例 正：“已生成建议，待人工确认”；反：“AI 正在分析”时让用户误以为还能填写被锁字段
怎么检查 草稿、处理中、失败、待确认、归档各自回读；仅真实归档回执可显示已归档
跨端结论 不分端：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:104
P-03连续操作出错、取消、切换页签，用户已经填的东西不能丢。
出错、取消、切换页签，用户已经填的东西不能丢。「正在保存」和「已保存」是两回事，要分开显示。
规则原文 失败、取消或切换展示时保留有效输入；处理反馈与事实状态分别表达
正确示例／反例 正：质检失败可回到原文；反：一失败就清空
怎么检查 填写长文本后制造校验失败，内容仍完整
跨端结论 统一：统一 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:35
X-03手机导航常用一级功能可放底部建议
规则原文 常用一级功能可放底部；列表点进详情；返回时保留允许保留的条件、选中项和位置
怎么检查 列表→详情→返回；导航栏与系统返回的结果一致
相关变量 --ui-tabbar-height
样板部件 底部导航（手机）、关闭（电脑）／返回（其他）、返回后保留
来源：1.0.0-使用包快照/手册正文.md:153 （跨端建议，待登记采用）
X-11状态覆盖同一业务动作在各端都考虑加载、空数据、失败、无权限、成功和重复提交建议
规则原文 同一业务动作在各端都考虑加载、空数据、失败、无权限、成功和重复提交
怎么检查 同一组异常案例逐端检查
样板部件 空数据／加载中／失败／无权限
来源：1.0.0-使用包快照/手册正文.md:161 （跨端建议，待登记采用）
跨端适配
电脑网页、手机网页、小程序，哪些必须一样，哪些可以不一样。
三句话
- 含义必须一样。「需关注」在三端是同一个黄色同一个词；客户、商机的字段名和状态名一致；权限规则一致。
- 尺寸和摆放可以不一样。电脑三栏并排，手机上下排；手机上字可以大一点，按钮放底部；间距按端选档位。
- 平台自带的东西用平台的。小程序的导航栏、底部标签栏、日期选择用微信原生的，只把颜色调成规范的。
下面第一张表是每条规则在三端各怎么做，第二张是每个变量在三端的值。都很长，默认收起。
规则逐条对照 建议
点开看全部 38 行
电脑网页一列是正式规则，另外两列是建议。右上按钮可以只看某一类。
| 规则 | 电脑网页 已确认 | 手机网页 建议 | 小程序 建议 | 结论／样板验证 | 状态 |
|---|---|---|---|---|---|
| P-01 所有页面 | 详情顶部摘要卡 | 同 | 同 | 统一统一 | 已确认 已验证（本地） 已确认（Web）；样板三档均已验证（本地） |
| P-02 多区域页面 | 标题、留白、面板边界 | 同，留白档位变小 | 同 | 适配含义统一，留白值适配 | 已确认 建议 已确认（Web）；留白 16px 为建议 |
| P-03 连续操作 | 失败重试不丢筛选 | 同 | 同 | 统一统一 | 已确认 已验证（本地） 已确认（Web）；样板已验证（本地） |
| V-01 配色与层级 | 深蓝导航、浅色阅读、白面板、蓝主操作 | 同；导航在底部时用白底＋蓝选中 | 同；原生 tabBar 只能在 app.json 写十六进制 | 适配色值统一；导航容器适配 | 已确认 已确认（Web）；小程序现为 #1677FF，待接入 |
| V-02 字体与数字 | 正文 14、辅助 12、分区 16、页面 24、数字 32 | 正文 16（建议），其余同 | 正文 16（建议）；小程序 px 按 WeUI 做法视为逻辑像素（待复核） | 适配档位统一；正文值适配 | 已确认 建议 已确认（Web）；16px 为建议（X-06）；小程序现状 88% 声明 <14px |
| V-03 间距与形状 | 4/8/12/16/24/32；圆角 6/12；控件高 36/40 | 同档位；留白取 16 | 同；只有随屏宽缩放的量用 rpx（小程序等比单位，详见 02 章） | 适配档位统一；用途→档位的选择适配 | 已确认 建议 已确认（Web）；映射为建议（X-08） |
| V-04 图标与焦点 | 16px 图标；焦点轮廓 2px；对比度 ≥4.5:1 | 同；触控目标 ≥44px（建议） | 同 | 适配含义统一；目标尺寸适配 | 已确认 已验证（本地） 建议 已确认（Web）；44px 为建议（X-06），样板按钮、导航、筛选片、页签均已验证（本地） |
| C-01 按钮 | 一区一主操作；处理中防重复 | 同；主动作固定在底部操作条 | 同 | 适配统一；位置适配 | 已确认 已验证（本地） 建议 已确认；底部操作条为建议，样板已验证（本地） |
| C-02 输入与校验 | 标签常显、错误就地、保留输入 | 同；键盘弹起后操作可达 | 同；用平台 adjust-position（属性说明来自文档镜像，待复核） | 引用平台统一；键盘处理引用平台 | 已确认 已确认；键盘未验证（需真机） |
| C-03 选择器 | SalesSelect／SalesDatePicker | 同组件的窄屏位置 | 需小程序对应组件 | 适配行为统一；实现各端 | 已确认 已确认（Web）；其他端未接入 |
| C-04 筛选栏 | 紧邻结果、显示已选与数量、可清除 | 同，筛选片横向滚动 | 同 | 统一统一 | 已确认 已验证（本地） 已确认；样板三档已验证（本地） |
| C-05 列表与表格 | 桌面用列表／表格，不以卡片堆叠替代 | 手机用列表行（名称／摘要／状态／时间） | 同手机 | 适配字段与顺序统一；表格↔列表行适配 | 已确认 建议 已确认（Web）；手机列表行为建议 |
| C-06 数据与反馈状态 | 加载有文案、空数据说原因、异常可重试 | 同 | 同（现状：三态外观相同） | 统一统一 | 已确认 已验证（本地） 已确认；样板三档已验证；小程序现状不达标 |
| C-07 弹窗与展开 | Esc 可关、焦点回触发点、次要详情就地展开 | 详情整页进入而不是弹窗；系统返回可关 | 同手机；浮层不得替代页面级返回 | 适配行为统一；容器适配 | 已确认 建议 已确认（Web）；手机整页进入为建议（X-03） |
| T-01 首页工作台 | 待办／常用操作／动态分区 | 单栏顺序排列 | 同手机 | 统一统一 | 已确认 已确认（Web）；未做样板 |
| T-02 业务列表 | 总览独立；列表标题、工具栏、条件、数量、结果同区 | 同，总览可折叠 | 同 | 统一统一 | 已确认 已验证（本地） 已确认；样板已验证（本地） |
| T-03 经营详情 | 顶部摘要＋主操作；页签；主栏事实、辅栏关注 | 辅栏落到主栏下方 | 同手机 | 适配统一；分栏按详情栏自身宽度 ≥760px 决定（容器查询） | 已确认 已验证（本地） 建议 已确认（Web）；分栏阈值为建议，样板已验证（本地） |
| T-04 拜访录入 | 左右分栏 | 上下排列 | 同手机；textarea 在固定层需 fixed（来自文档镜像，待复核） | 适配统一；分栏适配 | 已确认 已确认（Web）；未做样板 |
| T-05 经营分析 | 范围周期紧邻指标；图表配数据表 | 同 | 同 | 统一统一 | 已确认 已确认（Web）；未做样板 |
| B-01 红黄绿灰灯 | 不分端：业务口径或流程，三端同一句话 | 不分端统一 | 已确认 已验证（本地） 已确认；样板三档已验证（本地） | ||
| B-02 对象与状态 | 不分端：业务口径或流程，三端同一句话 | 不分端统一 | 已确认 已确认；样板体现（任务页签说明） | ||
| B-03 金额、时间与缺失 | 不分端：业务口径或流程，三端同一句话 | 不分端统一 | 已确认 已确认；样板体现「ACV 未登记」 | ||
| B-04 AI 流程 | 不分端：业务口径或流程，三端同一句话 | 不分端统一 | 已确认 已确认；样板未涉及 | ||
| B-05 范围与权限 | 不分端：业务口径或流程，三端同一句话 | 不分端统一 | 已确认 已确认；样板体现「范围：本人负责」与 403 状态（演示） | ||
| G-01 需求与开发 | 不分端：业务口径或流程，三端同一句话 | 不分端三端统一；需求与 PR 都引用规则编号，落地见 04 章第 2 节 | 已确认 建议 已确认（Web）；流程为建议 | ||
| G-02 版本与偏差 | 不分端：业务口径或流程，三端同一句话 | 不分端三端统一；偏差按端登记，落地见 `采用登记表.md` | 已确认 建议 已确认（Web）；流程为建议 | ||
| X-01 三端共同内容 | 对象名称、字段含义、状态含义和权限规则保持一致；由同一业务契约确定 | 样板三档字段一致 真机：未验证 | 建议 | ||
| X-02 桌面频繁切换对象 | 客户、任务等可采用“功能导航＋对象列表＋详情”；窗口不够时折叠导航或将详情独立打开 | 1440／1366／1024 并排；900／760 折叠导航、详情覆盖列表 真机：未验证 | 建议 | ||
| X-03 手机导航 | 常用一级功能可放底部；列表点进详情；返回时保留允许保留的条件、选中项和位置 | 600／390／320 全部通过；浏览器返回与刷新也通过 真机：小程序现状用页内浮层，系统返回关不掉（见核查） | 建议 | ||
| X-04 复杂编辑 | 拜访录入等需要完整编辑空间；退出时说明未保存内容如何处理 | 未做 真机：未验证 | 建议 | ||
| X-05 响应式 | 沿用 Web V1 的大于 900、601～900、不大于 600px 三档；根据内容决定是否分栏，不强行把所有页面做三栏 | 8 个视口档位判定正确、无横向溢出 真机：未验证 | 建议 | ||
| X-06 手机可读可点 | 手机正文建议从 16 个逻辑像素起评估；交互目标建议至少 44×44 个逻辑像素，可扩大无形点击区域 | 通过 真机：未验证 | 建议 | ||
| X-07 安全区与键盘 | 底部操作避开系统安全区；键盘弹起后当前输入和关键操作可到达 | 安全区按 CSS 规则写入；键盘未测 真机：需真机 | 建议 | ||
| X-08 共享间距 | 使用相同间距档位和语义名称，端侧允许选择不同档位；具体值进入统一配置及采用记录 | 变量已定义并在样板使用 真机：未接入产品 | 建议 | ||
| X-09 单位适配 | Web 使用 CSS px；小程序按布局策略选择 px/rpx；原生 App 按平台逻辑单位实现。相同数字不代表相同实际尺寸 | 生成 WXSS 用 px；规则写在 02 章 真机：未接入 | 建议 | ||
| X-10 同步发布 | 配置变化经生成、组件接入、回归检查和各端构建发布后生效；已安装或已发布客户端按各自机制升级 | 链路已跑通到「生成」；接入与发布未做 真机：未做 | 建议 | ||
| X-11 状态覆盖 | 同一业务动作在各端都考虑加载、空数据、失败、无权限、成功和重复提交 | 加载／空／失败／无权限三档通过 真机：未验证 | 建议 | ||
| X-12 例外管理 | 平台限制或业务特性允许差异；记录原因、影响、负责人和复查时机 | 小程序原生 tabBar 颜色无法用变量，登记为例外 真机：— | 建议 | ||
变量在三端的值
点开看全部 67 个变量
高亮的行是三端值不一样的变量。手机网页和小程序的值都还是 建议。
| 变量 | 电脑网页 | 手机网页 | 小程序 | 状态 |
|---|---|---|---|---|
--ui-background工作区背景 | #F3F5F9 | #F3F5F9 | #F5F6F7（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-surface内容面板 | #FFFFFF | #FFFFFF | #FFFFFF | 已确认 |
--ui-sidebar深蓝导航 | #142F54 | #142F54 | #142F54 | 已确认 |
--ui-ink正文文字 | #192842 | #192842 | #1F2329（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-secondary次要文字 | #5B6C82 | #5B6C82 | #646A73（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-muted辅助文字 | #617188 | #617188 | #646A73（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-primary主要操作、选中 | #2863CD | #2863CD | #2863CD | 已确认 |
--ui-primary-hover主要操作悬停 | #2055B5 | #2055B5 | #2055B5 | 已确认 |
--ui-line边线 | #E2E8F0 | #E2E8F0 | #DEE0E3（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-selected选中底色 | #EDF3FF | #EDF3FF | #EDF3FF | 已确认 |
--ui-focus键盘焦点轮廓 | #5786DC | #5786DC | #5786DC | 已确认 |
--ui-danger红：转差／错误文字 | #A73F38 | #A73F38 | #AC2F28（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-danger-soft红底 | #FBE4DF | #FBE4DF | #FDE2E2（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-danger-accent转差色条与图形标记，不作文字色；Web 与 --ui-danger 同色，小程序取飞书红 5 档 | #A73F38 | #A73F38 | #F54A45（建议） | 建议 建议 端侧覆盖为建议 |
--ui-warning黄：需关注文字 | #805919 | #805919 | #8F4F04（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-warning-soft黄底 | #FFF0CF | #FFF0CF | #FEEAD2（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-warning-accent提醒色条与图形标记（卡片顶部 3px 状态条等），不作文字色；飞书警示色取橙，--ui-warning 是给文字用的深棕，做细条发暗 | #C7741B | #C7741B | #FF8800（建议） | 建议 建议 端侧覆盖为建议 |
--ui-success绿：向好文字 | #27694C | #27694C | #237B19（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-success-soft绿底 | #E8F5EE | #E8F5EE | #D9F5D6（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-neutral灰：待评估文字 | #56677E | #56677E | #646A73（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-neutral-soft灰底 | #EEF2F7 | #EEF2F7 | #F2F3F5（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-font系统中文字体 | 系统字体 | 系统字体 | 系统字体 | 已确认 |
--ui-text-small辅助信息 | 12px | 12px | 12px | 已确认 |
--ui-text-body正文 | 14px | 16px（建议） | 16px（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-text-section分区标题 | 16px | 16px | 16px | 已确认 |
--ui-text-page页面标题 | 24px | 24px | 20px（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-text-metric关键数字 | 32px | 32px | 32px | 已确认 |
--ui-space-14：图标与文字 | 4px | 4px | 4px | 已确认 |
--ui-space-28：同组控件 | 8px | 8px | 8px | 已确认 |
--ui-space-312：行内区域 | 12px | 12px | 12px | 已确认 |
--ui-space-416：内容块 | 16px | 16px | 16px | 已确认 |
--ui-space-624：面板内边距 | 24px | 24px | 24px | 已确认 |
--ui-space-832：大分区 | 32px | 32px | 32px | 已确认 |
--ui-radius-control控件圆角 | 6px | 6px | 6px | 已确认 |
--ui-radius-panel面板圆角 | 12px | 12px | 8px（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-control-height普通控件高 | 36px | 36px | 36px | 已确认 |
--ui-field-height表单控件高 | 40px | 40px | 44px（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-icon-sm图标：文字旁、按钮内、列表行 | 16px | 16px | 16px | 建议 |
--ui-icon-md图标：单独可点的图标按钮 | 20px | 20px | 20px | 建议 |
--ui-icon-lg图标：导航、空态、指标卡 | 24px | 24px | 24px | 建议 |
--ui-shadow-popup弹出层阴影（当前为 CSS 字符串形式，Style Dictionary 可直接输出；待工具链完整支持 2025.10 后迁移为对象形式） | 0 8px 28px #1928421a, 0 2px 6px #19284208 | 0 8px 28px #1928421a, 0 2px 6px #19284208 | 0 0 1px #0000004d, 0 4px 14px #0000001a（建议） | 已确认 建议 端侧覆盖为建议 |
--ui-page-gutter页面左右留白（第 06 章间距映射示例：电脑 24，手机 16） | 24px | 16px（建议） | 16px（建议） | 建议 建议 端侧覆盖为建议 |
--ui-card-padding普通卡片内边距（第 06 章示例：16） | 16px | 16px | 16px | 建议 |
--ui-block-gap独立区块间隔（第 06 章示例：24） | 24px | 24px | 24px | 建议 |
--ui-touch-target手机最小交互目标（X-06 建议 44×44 逻辑像素） | 44px | 44px | 44px | 建议 |
--ui-nav-width桌面导航栏宽度（三段布局样板） | 220px | 220px | 220px | 建议 |
--ui-nav-rail-width折叠后的图标导航宽度（601～900px） | 56px | 56px | 56px | 建议 |
--ui-list-width桌面对象列表栏宽度（三段布局样板） | 360px | 360px | 360px | 建议 |
--ui-tabbar-height手机底部导航高度（不含安全区） | 56px | 56px | 56px | 建议 |
--ui-on-primary主操作按钮上的文字 | #FFFFFF | #FFFFFF | #FFFFFF | 建议 |
--ui-sidebar-ink深蓝导航主文字（theme.css 已有实现） | #E7EFFA | #E7EFFA | #E7EFFA | 建议 |
--ui-sidebar-nav导航项文字 | #C2D1E6 | #C2D1E6 | #C2D1E6 | 建议 |
--ui-sidebar-muted导航次要文字 | #B4C7E1 | #B4C7E1 | #B4C7E1 | 建议 |
--ui-sidebar-hover导航悬停底 | #23466F | #23466F | #23466F | 建议 |
--ui-sidebar-active导航当前项底 | #2A568B | #2A568B | #2A568B | 建议 |
--ui-sidebar-accent导航当前项亮条 | #91BAFF | #91BAFF | #91BAFF | 建议 |
--ui-sidebar-focus导航上的键盘焦点轮廓 | #B9D2FF | #B9D2FF | #B9D2FF | 建议 |
--ui-overlay弹窗与抽屉背后的遮罩（深蓝导航色 45% 透明） | #142F5473 | #142F5473 | #16161A99（建议） | 建议 建议 端侧覆盖为建议 |
--ui-quadrant-asset客户资产（右上）底色：主色 5%，和主攻区同一种淡主色，只标出潜力大的两格 | #F4F7FD | #F4F7FD | #F4F7FD | 建议 |
--ui-quadrant-attack主攻区（右下）底色：主色 5% | #F4F7FD | #F4F7FD | #F4F7FD | 建议 |
--ui-quadrant-resource客户资源（左上）底色：白，不再用中性灰 | #FFFFFF | #FFFFFF | #FFFFFF | 建议 |
--ui-quadrant-spot见单打单（左下）底色：白 | #FFFFFF | #FFFFFF | #FFFFFF | 建议 |
--ui-chart-1图表顺序色一：主色，第一系列、本期 | #2863CD | #2863CD | #2863CD | 建议 |
--ui-chart-2图表顺序色二：青，第二系列、上期 | #0E8A8A | #0E8A8A | #0E8A8A | 建议 |
--ui-chart-3图表顺序色三：紫 | #6B4FBB | #6B4FBB | #6B4FBB | 建议 |
--ui-chart-4图表顺序色四：橙 | #C7741B | #C7741B | #C7741B | 建议 |
--ui-chart-5图表顺序色五：灰蓝，第五系列、其他；只有两个系列时与 chart-1 搭配 | #7A8A9E | #7A8A9E | #7A8A9E | 建议 |
小程序现在的颜色和规范差多少
| app.json 项 | 产品现状 | 规范 | 比对 |
|---|---|---|---|
window.backgroundColor | #F5F3F8 | #F5F6F7 | 不一致 |
window.navigationBarBackgroundColor | #F8F7FA | #FFFFFF | 不一致 |
tabBar.color | #7A8495 | #646A73 | 不一致 |
tabBar.selectedColor | #1677FF | #2863CD | 不一致 |
tabBar.backgroundColor | #FBFAFC | #FFFFFF | 不一致 |
5 项不一致，这是第一张待办变更，改产品仓库要先授权。原生 tabBar 和导航栏不认 CSS 变量，只能写十六进制，规范值由 tokens.json 生成到 miniprogram-app.tokens.json。产品现状来自快照 前端交接包 Raccoon-SalesBuddy v1.0.6（2026-09-20，前端提交 6b8aa7a）· frontend/miniprogram/app.json。重新同步用 node tools/sync-product.mjs。
跨端建议全文
X-01三端共同内容对象名称、字段含义、状态含义和权限规则保持一致建议
规则原文 对象名称、字段含义、状态含义和权限规则保持一致；由同一业务契约确定
怎么检查 同一测试账号与记录，在已接入各端核对；记录缺失端
来源：1.0.0-使用包快照/手册正文.md:151 （跨端建议，待登记采用）
X-02桌面频繁切换对象客户、任务等可采用“功能导航＋对象列表＋详情”建议
规则原文 客户、任务等可采用“功能导航＋对象列表＋详情”；窗口不够时折叠导航或将详情独立打开
怎么检查 连续查看多条、关闭详情、长标题与键盘操作
相关变量 --ui-nav-width --ui-nav-rail-width --ui-list-width
样板部件 导航折叠成图标栏（收紧）
来源：1.0.0-使用包快照/手册正文.md:152 （跨端建议，待登记采用）
X-03手机导航常用一级功能可放底部建议
规则原文 常用一级功能可放底部；列表点进详情；返回时保留允许保留的条件、选中项和位置
怎么检查 列表→详情→返回；导航栏与系统返回的结果一致
相关变量 --ui-tabbar-height
样板部件 底部导航（手机）、关闭（电脑）／返回（其他）、返回后保留
来源：1.0.0-使用包快照/手册正文.md:153 （跨端建议，待登记采用）
X-04复杂编辑拜访录入等需要完整编辑空间建议
规则原文 拜访录入等需要完整编辑空间；退出时说明未保存内容如何处理
怎么检查 长文、输入法弹起、取消和失败恢复
来源：1.0.0-使用包快照/手册正文.md:154 （跨端建议，待登记采用）
X-05响应式沿用 Web V1 的大于 900、601～900、不大于 600px 三档建议
规则原文 沿用 Web V1 的大于 900、601～900、不大于 600px 三档；根据内容决定是否分栏，不强行把所有页面做三栏
怎么检查 1440、1366、1024、900、600、390、320 宽度与短屏
来源：1.0.0-使用包快照/手册正文.md:155 （跨端建议，待登记采用）
X-06手机可读可点手机正文建议从 16 个逻辑像素起评估建议
规则原文 手机正文建议从 16 个逻辑像素起评估；交互目标建议至少 44×44 个逻辑像素，可扩大无形点击区域
怎么检查 真机阅读、误触、长中文和系统字号放大；项目登记最终值
相关变量 --ui-touch-target
样板部件 底部主动作条（手机）、手机正文 16px、触控目标 ≥44px
来源：1.0.0-使用包快照/手册正文.md:156 （跨端建议，待登记采用）
X-07安全区与键盘底部操作避开系统安全区建议
规则原文 底部操作避开系统安全区；键盘弹起后当前输入和关键操作可到达
怎么检查 真机键盘、横竖屏及带底部手势区域设备
样板部件 底部导航（手机）、底部主动作条（手机）
来源：1.0.0-使用包快照/手册正文.md:157 （跨端建议，待登记采用）
X-08共享间距使用相同间距档位和语义名称，端侧允许选择不同档位建议
规则原文 使用相同间距档位和语义名称，端侧允许选择不同档位；具体值进入统一配置及采用记录
怎么检查 调整一个公共配置，核对依赖它的各端组件
相关变量 --ui-page-gutter --ui-card-padding --ui-block-gap
来源：1.0.0-使用包快照/手册正文.md:158 （跨端建议，待登记采用）
X-09单位适配Web 使用 CSS px建议
规则原文 Web 使用 CSS px；小程序按布局策略选择 px/rpx；原生 App 按平台逻辑单位实现。相同数字不代表相同实际尺寸
怎么检查 在基准和非基准宽度设备测量，避免直接机械替换单位
来源：1.0.0-使用包快照/手册正文.md:159 （跨端建议，待登记采用）
X-10同步发布配置变化经生成、组件接入、回归检查和各端构建发布后生效建议
规则原文 配置变化经生成、组件接入、回归检查和各端构建发布后生效；已安装或已发布客户端按各自机制升级
怎么检查 记录配置版本、客户端版本、截图和接入日期
来源：1.0.0-使用包快照/手册正文.md:160 （跨端建议，待登记采用）
X-11状态覆盖同一业务动作在各端都考虑加载、空数据、失败、无权限、成功和重复提交建议
规则原文 同一业务动作在各端都考虑加载、空数据、失败、无权限、成功和重复提交
怎么检查 同一组异常案例逐端检查
样板部件 空数据／加载中／失败／无权限
来源：1.0.0-使用包快照/手册正文.md:161 （跨端建议，待登记采用）
X-12例外管理平台限制或业务特性允许差异建议
规则原文 平台限制或业务特性允许差异；记录原因、影响、负责人和复查时机
怎么检查 差异可查到具体页面，不以“移动端特殊”笼统解释
来源：1.0.0-使用包快照/手册正文.md:162 （跨端建议，待登记采用）
团队怎么用
规则改了谁知道、谁批、谁接入。这章回答四件事：想改规则怎么走（变更单），产品用了怎么登记（采用登记表），谁负责什么（角色），还有哪些事没定（待决定）。流程和角色还是 建议，部门指定负责人后生效。点流程图里的一步能看到对应模板。
同事怎么开始用
仓库 shandianT/desgin 是公开的，打好的包在仓库 release/ 目录，直接从网址装，不用申请权限。
| 你是 | 做什么 |
|---|---|
| 做网页 | npm i react@18 react-dom@18 antd@6 @ant-design/x@2npm i https://github.com/shandianT/desgin/raw/main/release/shandiant-tokens-1.1.0-draft.1.tgz https://github.com/shandianT/desgin/raw/main/release/shandiant-ui-react-0.5.2.tgz |
| 做小程序 | npm i tdesign-miniprogram@1.16.1 https://github.com/shandianT/desgin/raw/main/release/shandiant-ui-miniprogram-0.5.0.tgz，然后开发者工具「构建 npm」，把包里 components/style/ 的两个 wxss 复制到根目录在 app.wxss 引入 |
| 不想自己敲 | 把仓库 模板/同事装包-给AI的提示词.md 里那段贴给 Claude Code 或 Cursor，AI 装好并渲染一个标签验证 |
| 想看接入后的真实页面 | Web 样板 shandiant.github.io/desgin/web/，总览、客户、任务、创建任务四页已换成组件库，示例数据，右上角能切角色 |
| 只是看规范 | 记这一个网址：https://shandiant.github.io/desgin/。仓库 main 有改动它自动更新 |
装好之后：颜色字号只写 var(--ui-…)，组件先用包里现成的，用法在「组件」章每张卡片的「用法」。以后升级把网址里的版本号换成新的重装，最新版本看仓库 release/README.md。
用 Git 一起改
- 拿仓库
git clone https://github.com/shandianT/desgin.git，然后node tools/check.mjs生成站点和变量、跑检查。 - 开分支改 不直接改 main。规则改 rules 相关的 md，变量改
tokens.json，组件改packages/。 - 跑检查
node tools/check.mjs全部通过，生成物一起提交。 - 开 PR 描述里写变更单四项：现在的规则、问题、改法、影响页面。引用规则编号。一个人评审通过后合并。
- 发包 升 package.json 版本号，推到 main，Actions 页点 publish-npm 的 Run workflow，或打
v开头的标签。 - 登记 哪个产品用了哪个版本，在采用登记表加一行。
改真实业务工程要先授权，清单在 07 章。仓库协作者由负责人在 Settings 里加。
变更流程 建议
点每一步看说明和模板。手机上图可以左右滑。
东西放在哪、怎么进来、怎么把关 建议
所有规则、变量、样板只在仓库里有一份。人看站点，开发装包，AI 读技能文件，产品登记采用。改动只有一个口：变更单加评审。
怎么引用 建议
| 谁 | 怎么写 |
|---|---|
| 产品写需求 | 写规则编号、页面模板和样板部件名。比如「客户列表按 T-02、C-04，返回保留按 X-03（建议）」 |
| 设计出稿 | 标注变量名不标数值，如「按钮底色 --ui-primary」 |
| 开发写代码 | 颜色和尺寸只写 var(--ui-*)。PR 描述写规则编号。改完跑 node tools/check.mjs |
| 测试验收 | 页面验收单逐项填实际结果和证据。空白不算通过 |
| AI | 技能自动触发，也可以手动输入 /design-spec。交回时说清规则编号、改动文件、新增变量数、检查输出、证据等级 |
角色（人名待填） 建议
| 角色 | 负责 | 实际负责人 |
|---|---|---|
| 产品／业务负责人 | 变更单业务影响；PR 评审 | 待填 |
| 设计负责人 | tokens.json 与规则文字；PR 评审 | 待填 |
| 开发负责人 | 各端接入与脚本 | 待填 |
| 测试／验收负责人 | 验收单与真机 | 待填 |
| 规范维护人 | 合并、打标签、更新日志、采用表 | 待填 |
待决定与已决定
| 事项 | 谁决定 | 影响 | 状态 |
|---|---|---|---|
| 主色 | 规范发起人 | 沿用 Web 已确认的主色 --ui-primary，即 #2863CD。小程序 app.json 五项颜色与样式改用变量，成为第一张待办变更，待授权执行 | 已决定（2026-09-19） |
| 部门共同入口 | 规范发起人 | 部门仓库 shandianT/desgin 为共同入口，规范在它的 specs/salesbuddy/。个人草稿不入库 | 已决定（2026-09-19） |
| 原生 App | 规范发起人 | 暂不在范围。变量源与对照表已去掉 App 一端，将来纳入时再补 | 已决定（2026-09-19） |
| 真实项目回流：Web 候选版暴露的 10 处规范空白、7 个待建组件 | 规范发起人、产品 | 见 13 章。先补四个组件，再填变更单 | 待决定，2026-09-21 |
| 一级导航命名是否三端一致：叫「客户」还是「作战地图」，手机底部 4 项加更多怎么分配 | 产品 | X-01；样板手机导航 | 待决定，不阻塞 |
| 客户详情是否只保留一种呈现，小程序现有三种 | 产品 | 小程序改造范围 | 待决定，不阻塞 |
| 9 个建议变量与两条端侧覆盖是否登记采用，覆盖指手机正文 16px、留白 16px | 规范维护人 | 变量对照表状态列 | 待登记 |
手机说明文字 13px 是否新增 --ui-text-small 端侧覆盖 | 设计负责人 | 样板偏差 | 待决定 |
| 业务口径拍板项：客户等级、关系量纲、地图轴向、地盘落库、风险等级、董事长视图、待办与任务、有风险与需关注 | 产研 | 样板数据与文案 | 见 03-跨端样板-客户列表到详情/业务约束清单.md 末节 |
| Web 端引入 React | 规范发起人 | sales-web 新增 Node 构建链，有一段两套组件并存期。先在任务工作台一页做岛屿式样板，不整站重写。见 05-组件生态选型.md | 已决定（2026-09-20） |
| Web 主库 | 规范发起人 | Ant Design 6 加 Ant Design X。生态最大，AI 界面组件最全，招人最容易。和小程序不是一家，两边都走 --ui-* 桥接。Semi 与 TDesign React 降为备选 | 已决定（2026-09-20） |
| 图标 | 规范发起人 | 小程序用 TDesign 自带 t-icon，网页用 Ant Design 自带 @ant-design/icons 的线性一族。三个尺寸变量为建议；40 个常用图标对照表在 10-图标.md | 已决定（2026-09-20） |
| 小程序组件主库 | 规范发起人 | tdesign-miniprogram 1.16.1。要开 npm 构建、删 "style": "v2"、基础库 2.12.0，这些改真实业务工程，逐项授权。先拿客户页一页做真机验证 | 已决定（2026-09-20） |
| 飞书感是否作为 Web 端硬要求 | 规范发起人 | 不作硬要求。统一与克制靠部门变量和规则达到，不依赖某一家的皮肤 | 已决定（2026-09-20） |
| 小程序视觉与交互的参照 | 规范发起人 | 以飞书为核心参考（取代 2026-09-20「不作硬要求」在小程序端的效力）：tokens 1.3.0-draft.1 的小程序端中性色、圆角、遮罩、页面标题按飞书主题对齐，组件库 0.9.0 卡片默认无边框、标签小圆角、筛选片灰底；主色保留 #2863CD（飞书蓝对比度不足）。Web 端暂不变，另议 | 已决定（2026-09-23） |
| 小程序状态色 | 规范发起人 | 学飞书：状态标签浅底用飞书 1 档、字用同色系深档（≥4.5:1），色条用飞书 5 档鲜色；提醒改用飞书橙；主色不变；只改小程序端（tokens 1.5.0-draft.1，ui-miniprogram 0.11.0）。规则见 16 章第 12 条 | 已决定（2026-09-26） |
| 卡片顶部色条 | 规范发起人 | 对象详情页顶卡状态异常时、AI 建议卡、看板主卡加顶部 3px 色条（红、橙、主色），不用渐变：用户看过「上沿浅色渐变」与「顶部色条」两套整页样板后选色条。新增 --ui-warning-accent（tokens 1.4.0-draft.1），sb-summary-card tone（ui-miniprogram 0.10.0）。规则见 16 章第 11 条 | 已决定（2026-09-24） |
| 作战地图点色 | 规范发起人 | 客户点一律主色蓝，不按状态上色；只用点径表示金额档，图例画三档点径；状态在悬停提示与点开后的客户卡里用状态标签看。取代 12 章 2.3 原「需关注黄、转差红、待评估空心」。小程序 1.0.8、ui-miniprogram sb-battle-map、ui-react SbBattleMap 同步 | 已决定（2026-09-24） |
来自采用登记表的待决定事项表。
下一步
- 小程序客户页最小接入，会改真实业务工程。
- 真机验收并填页面验收单。
- 指定五个角色的实际负责人，填入这张表与
04-团队协作与版本流程.md第 7 节。 - 等 Web 工程可见时，按样板改造真实客户列表与详情。
验收与维护规则（已确认）
G-01需求与开发提需求和改代码都写规则编号，比如「按 T-02、C-04 改商机列表」。
提需求和改代码都写规则编号，比如「按 T-02、C-04 改商机列表」。新概念先对齐口径，不另发明一套规则。
反例：「照截图画一下」
规则原文 每次变更引用规则编号、示例锚点和验收项；新业务语义先对齐契约，展示改造不发明第二套规则
正确示例／反例 正：“按 T-02＋C-04 改商机列表”；反：“照截图画一下”
怎么检查 评审能追溯规则与原始业务处理
跨端结论 不分端：三端统一；需求与 PR 都引用规则编号，落地见 04 章第 2 节 （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:111
G-02版本与偏差规范、示例、验收单一起改。
规范、示例、验收单一起改。每类规范只有一份有效版本。和规范不一致的地方写清页面、影响、状态、证据。
规则原文 主规范、示例册、验收清单一起更新；有效规范每类一份；偏差写清页面、影响、状态和证据
正确示例／反例 正：某旧页仍有硬编码颜色，列待整改；反：构建绿灯就声称全系统遵循
怎么检查 按偏差表复核；新证据覆盖旧结论时保留有效信息
跨端结论 不分端：三端统一；偏差按端登记，落地见 `采用登记表.md` （统一还是适配的划分还是建议，见 01 章）
来源：1.0.0-使用包快照/依据/Web设计规范.md:112