UI 组件规范
列表字段渲染的单一真实来源 — 由 app/config/ui_components.yaml 驱动
📋 新增 UI 组件流程(4 处缺一不可):
1.
_macros/components.html 加 macro ·
2. _macros/column_render.html 加 elif col.render_type == 'xxx' 分支 ·
3. _samples/<key>.html 建 sample include ·
4. ui_components.yaml 加 components 条目
客户编号 chip
qbh_chip
客户编号胶囊, 按 wechat_status 切换 6 种状态色 (有群/离群/手机/曾入群/流失/无群)
客户已离群
1234
有微信未建群
0923
手机线索
1276
1277
已流失
0711
0739
员工名片
staff_card
员工头像 + 姓名, userid 自动配色 (STAFF_COLORS)
何
何紫桐
刘静波
卓光
孙丽苹
崔
崔磊
朱五斌
朱
朱辉
李
李京
李凤伟
林小莲
王
王志明
王振锋
穆小晴
郭馨然
陈
陈帅
陈晓曼
陈晶晶
马特
阶段徽章
stage_badge
客户阶段 / 商机阶段共用 stage_colors.py 配色
客户阶段
原始线索
目标客户
价值客户
商机客户
定金客户
成交客户
商机阶段
商机客户
定金客户
成交客户
输单
状态标签
status_badge
通用状态标签 (success/pending/incomplete/error/info/neutral 6 色)
已完成
可生成
待处理
缺信息
失败
已生成
未开始
来源标签
source_badge
客户来源标识 (web / weiling_cb / crm_sync / wecom_cb)
web
weiling_cb
crm_sync
wecom_cb
unknown
金额
amount
金额格式化 (万/千/元自动切换), 支持 sm/md/lg 尺寸 + 颜色
大 (lg)
329,429
17,657
-1,471
中 (md)
29,429
50,000
-
小 (sm)
2,000
10,000
-
价值评分
value_score
分数 + 等级双色徽章 (A=红 B=绿 C=橙 D=蓝 E=灰)
92
A
75
B
58
C
41
D
15
E
-
时间戳
timestamp
日期/时间格式化, 支持 full / compact 两种显示
完整
2026-04-02 22:06:51
2026-03-29 20:33:38
紧凑
04-02 22:06
03-29 20:33
-
手机号
phone
手机号显示, 支持脱敏 (中间 4 位 ****)
完整
188 1106 8329
137 1606 7615
脱敏
188 **** 8329
137 **** 7615
里程碑
milestone_tags + milestone_cell
里程碑标签 (展示模式) / 单格图标 (列表模式)
已达成 3 项
电话
到店
量尺
全部达成
电话
视频
到店
量尺
方案
报价
可交互(详情页用)
列表单元格
Y
-
Y
-
消息统计
msg_stats
客户/员工消息计数 (橙/蓝双色)
12/38
3/15
0/5
-
最后聊天
last_chat
最后一条聊天预览 (时间 + 发送人 + 内容, 客户橙 / 员工蓝)
2026-04-02
郭馨然
中古包豪斯风格墙板资料库里没有
2026-04-01
李凤伟
客户考虑去河北工厂
2026-03-30
郭小果
好的,我周末过来看看
-
响应状态 chip
response_chip
客户响应状态 (6 色双档, v3.28.2). 色值与规则由 response_status_rules.yaml 驱动, 代码不硬编码
最紧急 (sev 4)
沉默
重点关注 (sev 3)
失联
静默
常规预警 (sev 2)
冷落
观察 (sev 1)
观望
正常 (sev 0)
活跃
空值
-
几何鸟营销中心