梳理现有组件与主题能力,统一桌面端和小程序的业务语义、视觉变量与状态规则,明确各终端的交互差异和交付要求。
## 任务目标 请为桌面管理端与小程序建立一致而可实现的组件使用约定。目标是减少同类页面的视觉和交互偏差。 交付能用于评审或后续实施的具体方案、规则与样例;未要求实施的部分不声称已经落地。 ## 输入信息(选填) 两项均可留空,也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表;能读取的内容由执行者补齐。 组件统一范围:从当前桌面端和小程序中承担相同业务任务的页面识别范围;未指定组件时,先整理已有查询区、状态、选择器、附件和操作栏,不新增不存在的终端。 工程或设计资料:读取现有包版本、组件引用、业务封装、主题变量和页面样例,使用已提供品牌资料识别共同规范与跨端差异。 ## 信息不完整时 先使用本次对话中已经说明的信息;用户留空、写“暂无/不清楚”或未替换输入标记,都按缺失处理,不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问,不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料,不为补齐输入擅自扩大操作范围。 ### 优先确认 - 查两端实际组件包、锁文件和封装入口,核对当前版本支持的组件 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)