ZTECH CRM Design System v1.5
卓信特 CRM 统一的 UI 标准答案。先复用当前靛蓝工作台与既有组件，再通过 Mock Demo 验证新的页面需求。
Foundation
Color、Typography、Spacing、Radius、Surface 和 Theme Token。
语义色彩
切换浅色或深色，组件随语义变量变化。正式页面引用 token，不直接写颜色值。
品牌主色
--primary内容背景
--background容器背景
--card选中背景
--accent成功
--success警告
--warning失败
--danger文字层级
页面标题 30px
区域标题 18px
正文与表格 14px：面向日常操作，使用系统中文字体，优先保证阅读清晰。
辅助文字 12px · 日期、帮助文字与说明
12,345.67
Spacing 与 Radius
4 / 8 / 12 / 16 / 20 / 24 / 32px
4px
8px
12px
16px
20px
24px
32px
对应 --zxt-space token；页面间距使用同一刻度。
Radius：8 / 10 / 12 / 16px
8px
10px
12px
16px
按钮、输入、面板和大容器按层级使用同一圆角 token。
按钮与状态
点击查看反馈；危险操作确认窗口见交互状态。
主操作使用靛蓝危险操作使用红色
输入控件
Components
基础控件与语义提示共用现有 UI primitive 和 CSS token。
表单控件
控件展示；不会上传文件。
语义提示与标签
信息提示：提供上下文，不替代字段校验。
待确认提示：需要明确下一步或待补充内容。
错误提示：描述问题和可执行的恢复方法。
草稿处理中已完成待补充失败
Tabs 与内容卡片
基本信息
标签页状态可见，内容区使用共用容器和文字层级。
紧凑数据表
表头 36px、紧凑行、无斑马纹；文字左对齐，金额右对齐。
| 编号 | 项目 | 状态 | 金额 · CNY |
|---|---|---|---|
| DEMO-001 | 主控板（示例） | 已完成 | 86.20 |
| DEMO-002 | 连接排线（示例） | 待补充 | — |
| DEMO-003 | 显示模组（示例） | 处理中 | 128.50 |
表单错误与禁用
错误提示应说明如何修复。
正式页面须说明不可编辑原因。
CRM Patterns
Page Header、Filter、List、Form、Detail、Pagination、Drawer。
列表与详情
筛选、排序、分页与多选保持在列表中；详情使用侧边抽屉。以下均为示例记录。
| 选择 | 名称 / 编号 | 负责人 | 状态 | 更新日期 | 操作 |
|---|---|---|---|---|---|
DEMO-001 | 演示成员甲 | 进行中 | 2026-10-01 | ||
DEMO-002 | 演示成员乙 | 已完成 | 2026-09-30 | ||
DEMO-003 | 演示成员甲 | 进行中 | 2026-09-29 |
共 5 条 · 每页 3 条
1 / 2
表单模式
标签、必填、帮助文字和错误提示统一呈现。保存仅演示反馈。
Interaction States
Loading、Empty、Error、Permission、Disabled、Confirmation。
状态语义
草稿处理中已完成待处理失败
颜色与文字共同表达状态；业务阶段的名称与流转规则需另行确认。
加载与操作状态
正在加载
此处为静态状态示例，未发起保存请求。
空白状态
还没有记录
首次使用时应说明记录的用途，并提供创建入口。筛选无结果时，应提供清除筛选入口。
错误与权限
记录暂时加载失败
这是错误状态示例。真实系统应保留筛选条件，并允许重试。
暂无访问权限
此组件只展示受限状态。正式系统必须由服务端验证访问权限，并提供申请或联系管理员的路径。
危险操作确认
确认窗口应写明对象、影响和恢复条件。只在需要保护用户操作时使用。
通知与待办
通知未读数、Task / Todo 待处理数和通用记录数使用独立语义；交互仅更新本地 Mock State。
Sidebar Badge 与 Counter
计数只在正数时显示；大于 99 显示 99+，文字语义保留精确数量。
未读通知 8待处理任务 5错误 2总记录 99+零计数 不显示徽标
通知铃铛打开 Sheet 预览；通知未读数和审批待办数分别计算。
Task Status 与 Task List
状态同时使用语义色、图标和文本。
待处理处理中已完成已退回已取消
- 待处理
BOM-2026-001 采购核价示例
WF-DEMO-001 · 采购核价节点
- 待处理
BOM-2026-002 Edge Mini 核价示例
WF-DEMO-002 · 采购核价节点
- 待处理
PRJ-DEMO-001 Smart A 阶段评审示例
WF-DEMO-003 · 项目评审节点
Notification Item 与 Feed
未读状态有文字和标记，Feed 按消息呈现；点击消息可在 Demo 状态中标记已读。
BOM、Version、Diff、Cost
数值仅作为静态展示示例，不定义 BOM 字段、成本计算或流程规则。
生产前项目组件
以下阶段、差异、时间线和金额均为静态界面示例，不定义审批规则、BOM 字段或成本口径。
立项（示意）
已完成
EVT（示意）
当前阶段
DVT（示意）
未开始
后续可配置阶段
未开始
成本差异表样式
CNY · 静态金额文本 · 方向与差异也由 Mock Data 提供；组件不进行成本计算。
| 成本项 | 目标金额 (CNY) | 核对金额 (CNY) | 差异示例 |
|---|---|---|---|
物料成本示例 单台 · Demo-V1 | 1,200.00 | 1,203.00 | +3.00 |
组装成本示例 单台 · Demo-V1 | 80.00 | 75.00 | −5.00 |
包装成本示例 单台 · Demo-V1 | 25.00 | 待补充 | 待补充 |
设计版本 Demo-V1 → 设计版本 Demo-V2
| 变更项 | 变更前 | 变更后 |
|---|---|---|
| 显示规格示例 | 规格方案 A | 规格方案 B |
| BOM 版本示例 | BOM-Demo-V1 | BOM-Demo-V2 |
Diff 状态
新增移除变更上升下降未变
状态同时有图标和文字；颜色仅作补充。
Activity Timeline
修改 BOM Demo-V1.2
演示用户 A
Unit Cost：12.30 → 11.80 · 原因：供应商重新报价（全部为演示内容）
添加示例资料
演示用户 B
只用于展示人物、时间、操作和原因的层级。
采购核价与物料价格历史
采购核价继承 BOM Version 的只读行结构，并展示阶段成本 Diff；物料价格历史跨项目追溯到原核价单。
Purchasing Costing Pattern
项目 / 阶段 / BOM / Version 固定绑定；BOM 基础列只读，采购字段与阶段价格对比分组显示。
等待核价打开采购核价 Demo
当前：DVT2 · BOM-2026-014 · V3.0对比：DVT1 · BOM-2026-013 · V2.1PRJ-DEMO-001
| BOM 原始字段 · 只读 | 采购核价字段 | 上一阶段成本比较 | ||||
|---|---|---|---|---|---|---|
| 料号 / BOM 名称 | 规格 | Qty / Unit | 供应商 | 采购单价 | 上一阶段 | Diff |
ACC-CHG-001 USB-C 电源适配器 | 65W · USB-C | 1 个 | 供应商示例丙 · SUP-0003 | ¥19.60 | ¥20.00 | 下降↓ -2.0% |
P-DEMO-001 显示模组 | 10.1 英寸 · 规格 B | 1 件 | 供应商示例甲 · SUP-0001 | ¥126.50 | ¥128.50 | 下降↓ -1.6% |
BOM 行数
7
已核价行
7
待核价行
0
当前成本
¥304.60
上一阶段
¥315.50
变化
↓ ¥10.90
Pattern 汇总与 PRC-DEMO-001 示例行快照一致；前端合计仅用于界面演示，不定义正式成本口径。
项目提交 BOM
已完成
采购核价
当前阶段
成本审核 · TBD
未开始
总经理审批
未开始
金额、数量和流程节点均为 Pattern Mock；总成本口径和审批配置尚未确定。
Material Price History Pattern
历史点绑定稳定 Material / Accessory ID 和原 PRC；实线只表示已审批历史，当前待核价价格在图表中单独标记。
最新已审批价
¥18.80 / 个
历史最低
¥18.80 / 个
历史最高
¥20.50 / 个
记录数
4 条可追溯历史
| 核价日期 | 阶段 / Version | 供应商 | 单价 | 状态 |
|---|---|---|---|---|
| 2026-01-18 | EVT · V1.2 | 供应商示例甲 | ¥20.50 / 个 | 总经理已审批 |
| 2026-03-18 | DVT1 · V2.1 | 供应商示例乙 | ¥20.00 / 个 | 总经理已审批 |
| 2026-05-18 | EVT · V0.8 | 供应商示例丙 | ¥18.50 / 个 | 已核价 |
| 2026-07-18 | DVT2 · V1.3 | 供应商示例乙 | ¥19.20 / 个 | 总经理已审批 |
采购核价与标准配件库调用同一 Drawer；币种 / 单位不同的记录不会混合比较，统计不做预测。
主数据、关联记录与 API 集成
Category Navigation、Customer 360、Related Records、Token Secret 和 API Access Log Pattern；只用于 Demo 评审。
Category Navigation
分类卡片展示记录量并进入统一列表；列表内保留快捷分类导航。分类是主数据属性，不复制不同业务模块。
手机 · 6平板 · 2IoT · 3其他产品 · 1
查看产品分类 DemoCustomer 360 · Related Records
客户主档通过稳定 ID 关联 Quote；Order 显示来源 Quote。未形成订单的报价仍留在客户报价列表；相关记录可以往返打开。
CUS-DEMO-001QT-DEMO-001ORD-DEMO-001
查看客户 360API Token / Secret Pattern
列表只展示脱敏前缀。新建与重新生成后明文仅在独立确认步骤出现一次；关闭即清除。Scope 要受 Owner 的当前权限上限约束。
zxt_ab12•••••• · 明文不在列表重现
查看 Token DemoAPI Access Log ≠ Audit Log
Access Log 记录谁在何时调用哪个 Endpoint 与结果；Audit Log 记录由此导致的业务字段变化、旧值 / 新值和原因。正文策略不默认全量保存。
API Access
POST /customers/123 · 403
Business Audit
客户电话 A → B · 原因示例
Customer、Product、Standard Accessory Demo 均展示 Stable ID / Code、Status 和 Updated At 思路。正式字段、API Schema、权限契约和日志策略仍保留 TBD。
Supplier Master · 复用主数据 Pattern
独立 Supplier ID / Code；供应商分类与主营物料类别分开。列表、详情、关联记录和 Activity Timeline 共用既有规范。
供应商选择
选择引用：SUP-DEMO-001 · 供应商示例甲 · SUP-0001
物料价格来自采购核价记录；同一 Supplier + Material 复用价格历史 Drawer，按 ID 筛选，不能自由文本重复创建供应商。供应商状态、准入及 API 规则 TBD。
Workflow Designer Pattern
Flow、Actor、Condition、Action、Notification、Version、Validation 与发布模拟的统一视觉约定。
人工任务 NodeNormal
采购核价
采购负责人
审批 NodeSelected
高金额审批
总经理角色 · Mock
条件 NodeInvalid
金额 ≥ 500,000
Rule Builder
负责人未配置
通知 NodeDisabled
阶段提醒
仅告知 · 不创建 Task
Connection / Edge
线条可选中并编辑 Label；分支状态同时使用文字和连接方向。
高金额条件
是 / Yes否 / No
高金额审批
常规复核
同意 · Approve驳回 · Reject退回 · Return / TBD
Validation / Publish Gate
Error · 采购核价负责人未配置；点击定位 Node。Error 阻止发布。
Warning · 通知节点通知内容待补充；允许继续并在发布确认中提示。
通过后要求填写 Change Reason，再确认发布。
Version Summary
V2.0 · PublishedCreated By：演示管理员 B
Created At2026-08-30 11:30
Published At2026-09-02 16:00
Change Reason阶段 BOM 流程示意
Previous Version—
已发布版本只读；运行实例保留启动时版本。
Version Diff
+ AddedStage Rule Builder 条件
↔ Changed流程说明和分支提示
− Removed旧财务通知节点
变化同时包含图标、文字与方向，不仅依赖红绿颜色。
Workflow pattern 复用现有品牌色、StatusBadge、边界和间距 token。当前节点、角色、Trigger、分支语义均为 Mock；未确认规则标为 TBD。
打开 Workflow Designer DemoRole Workbench / SLA Pattern
Oversight 看流程位置，Manager 看分配与汇总，Personal Task 只看自己的 Assignment。共享业务状态，提醒不替代任务。
Role Preview · 权限视角演示
共享本地数据；正式 Permission / Role Scope TBD。刷新恢复示例。
演示时间：2026-10-04 12:00（Asia/Shanghai，固定快照）。截止时间为显式 Mock 数据；工作日计时与暂停规则 TBD。
正常
正常
截止：2026-10-05 12:00
明天 12:00 · 剩余 24h 0m
即将超时
即将超时
截止：2026-10-04 14:00
今天 14:00 · 剩余 2h 0m
已超时
已超时
截止：2026-10-04 08:00
今天 08:00 · 超时 4h 0m
Node Override ＞ Workflow Default ＞ System Default；Overall SLA 单独定义，节点时限不相加。配置工作时间只做 UI，Calendar 与暂停规则 TBD。
此页面是内部开发规范与交互示例；示例数据不持久化。若业务页面需要新的视觉规则，先扩展本页与公共组件，再由页面组合使用。