## 任务目标
请为桌面管理端与小程序建立一致而可实现的组件使用约定。目标是减少同类页面的视觉和交互偏差。
交付能用于评审或后续实施的具体方案、规则与样例;未要求实施的部分不声称已经落地。
## 输入信息(选填)
两项均可留空,也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表;能读取的内容由执行者补齐。
组件统一范围:
工程或设计资料:
## 信息不完整时
先使用本次对话中已经说明的信息;用户留空、写“暂无/不清楚”或未替换输入标记,都按缺失处理,不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问,不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料,不为补齐输入擅自扩大操作范围。
### 优先确认
- 查两端实际组件包、锁文件和封装入口,核对当前版本支持的组件 API 与样式配置机制。
- 定位同类业务组件的使用页面,比较输入、状态、权限与操作结果,不只比较外观。
- 盘点主题变量、局部样式覆盖与已有设计稿,找出重复定义、不同业务同名及触屏不可用的交互。
### 可采用的默认处理
- 沿用现有组件库与版本,先给使用约定和差异映射,不为统一外观引入第二套库或升级框架。
- 跨端统一业务含义、状态名称与主次操作,保留表格和移动记录卡、点击和触摸等必要呈现差异。
- 优先复用现有视觉变量,缺值时提出少量项目建议;颜色、字号和间距不包装为组件库强制规则。
### 必须有依据的事项
- 两端同一字段或状态的业务含义不同且无法从契约解释时,不能直接合并为通用组件。
- 实际安装版本或 API 支持无法确认时,不能承诺对应代码可运行;先交付组件职责和状态约定。
只有缺口会改变业务结果、权限边界或关键实现,且无法从现有资料确认时,才集中提出最多 3 个关键问题;说明影响,并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定,不逐项等待确认。
### 资料仍不足时的交付
- 只获得一端工程时,先交付该端盘点及已知跨端业务约定,把另一端的 API 与适配核对留为明确缺口。
- 只有设计资料时交付业务组件映射、变量建议、状态矩阵和交接样例,不声称完成代码兼容验证。
## 执行要求
主题、设计变量和组件 API 均以项目安装版本为准;跨端统一的是业务含义和使用约定,不能假定不同组件库的 API 相同。
1. 盘点项目实际使用的组件库、版本、定制组件和样式覆盖,区分已经存在与建议新增。先确认项目选择,优先复用已有组件库。
2. 建立业务组件清单,将查询区、审批状态、附件区、成员选择、操作栏等映射到基础组件或组合组件,注明适用场景和不适用场景。名字应能让设计与研发直接对应。
3. 整理颜色语义、文字层级、间距、边框、圆角与控件密度,优先使用当前库的可配置变量。必须自定义时解释业务原因,变量值来源未知的标为建议。
4. 定义组件的默认、悬浮、聚焦、禁用、加载、错误和只读状态,明确哪些状态适用于触屏。不能把鼠标悬浮作为小程序读取重要内容的唯一方式。
5. 逐项区分跨端保持一致的业务含义与需要因终端改变的呈现,例如审批结果名称一致,但桌面表格与手机记录卡可不同。明确点击、触摸、返回和输入法下的行为。
6. 形成设计到研发的对照与验收样例,列出长中文、空值、大数值、无权限、弱网等内容条件。核验组件 API 应基于安装版本文档,不能凭名称推断支持属性。
## 交付与验收
输出:现有组件盘点、业务组件映射、视觉变量建议、状态矩阵、跨端差异表、设计交付与验收清单。涉及代码时仅使用已核实版本支持的能力。
验收:相同业务状态名称与含义一致;视觉变量有来源;终端差异有任务依据;不存在组件库混用造成的重复样式;小程序任务不依赖桌面专有交互。
信息边界:未读取实现或未运行终端时不得声称完成兼容验证;官方仓库说明只能证明其公开能力,不能作为对本项目质量或合规性的品牌背书。
### 本条完成检查
- 组件映射有真实使用位置,相同状态的名称与含义一致,例外有业务理由。
- 变量、版本与能力来源明确,不假设不同组件库 API 相同。
- 触屏任务不依赖悬浮等桌面专有操作,长中文、空值、无权限及弱网样例进入验收清单。
按本条要求组织结果,使用简洁中文和一致的编号、术语、缩进及空行;已有项目格式优先。只说明实际完成的内容,将采用的假设、未完成项和缺少的条件写在相关位置,不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注,不宣称已通过或已有性能收益。
## 参考资料与适用边界
参考来源(核验于 2026-09-08):
- [Arco Design 官方仓库中文说明](https://github.com/arco-design/arco-design/blob/main/README.zh-CN.md)
- [TDesign 官方仓库](https://github.com/Tencent/tdesign)