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 条目

📚 组件索引（14 个）

客户标识客户编号 chip 客户名片员工名片

阶段/状态阶段徽章状态标签来源标签

数值指标金额价值评分

时间日期时间戳

消息/沟通消息统计最后聊天响应状态 chip

里程碑里程碑

其他手机号

widgets 客户编号 chip qbh_chip

客户编号胶囊, 按 wechat_status 切换 6 种状态色 (有群/离群/手机/曾入群/流失/无群)

render_type: link_chat 适用字段: qbh

有群 group1569 group1149 group1577 group1686

客户已离群 person_off1234

有微信未建群 person_add0923

手机线索 phone_iphone1276 phone_iphone1277

曾入群 group_off0828 group_off1156

已流失 delete0711 delete0739

widgets 客户名片 customer_card

头像 + 姓名, 点击跳客户详情; 无头像时按姓名生成渐变底色

render_type: link_detail_avatar 适用字段: user_namereal_namecustomer_name

有头像

Simon 徐

stonealike

不一样的尤设计🌻

🚞Antony

张小歪

无头像大大可小雨

widgets 员工名片 staff_card

员工头像 + 姓名, userid 自动配色 (STAFF_COLORS)

render_type: staff_card 适用字段: owner_namelast_owner_namecreate_user_name

何何紫桐

刘静波

卓光

孙丽苹孙孙晓秀

崔磊

廖乐男张张子巍张张文嘉

朱五斌

朱辉李李京

李凤伟杨杨明杨杨硕

林小莲段段金宁牛牛玉龙王王志明

王振锋

田倩倩田田嘉媛

穆小晴

郭馨然陈陈帅

陈晓曼

陈晶晶

马特

widgets 阶段徽章 stage_badge

客户阶段 / 商机阶段共用 stage_colors.py 配色

render_type: badge 适用字段: customer_stagestage_name

客户阶段原始线索目标客户价值客户商机客户定金客户成交客户

商机阶段商机客户定金客户成交客户输单

widgets 状态标签 status_badge

通用状态标签 (success/pending/incomplete/error/info/neutral 6 色)

render_type: 暂无列表配置使用（仅模板内引用）

check_circle已完成 check_circle可生成 schedule待处理 warning缺信息 error失败 task_alt已生成未开始

widgets 来源标签 source_badge

客户来源标识 (web / weiling_cb / crm_sync / wecom_cb)

render_type: 暂无列表配置使用（仅模板内引用）

web weiling_cb crm_sync wecom_cb unknown

widgets 金额 amount

金额格式化 (万/千/元自动切换), 支持 sm/md/lg 尺寸 + 颜色

render_type: moneymoney_highlight 适用字段: expect_amountwinning_amount

大 (lg) 329,429 17,657 -1,471

中 (md) 29,429 50,000 -

小 (sm) 2,000 10,000 -

widgets 价值评分 value_score

分数 + 等级双色徽章 (A=红 B=绿 C=橙 D=蓝 E=灰)

render_type: number 适用字段: value_score

92 A 75 B 58 C 41 D 15 E -

widgets 时间戳 timestamp

日期/时间格式化, 支持 full / compact 两种显示

render_type: timetime_ts 适用字段: created_atupdated_atlast_follow_timepublic_sea_at

完整 2026-04-02 22:06:51 2026-03-29 20:33:38

紧凑 04-02 22:06 03-29 20:33 -

widgets 手机号 phone

手机号显示, 支持脱敏 (中间 4 位 ****)

render_type: phonephone_full 适用字段: mobile

完整 188 1106 8329 137 1606 7615

脱敏 188 **** 8329 137 **** 7615

widgets 里程碑 milestone_tags + milestone_cell

里程碑标签 (展示模式) / 单格图标 (列表模式)

render_type: milestone 适用字段: ms_phonems_videoms_visitms_quotems_measurems_proposal

已达成 3 项 call电话 storefront到店 home量尺

全部达成 call电话 videocam视频 storefront到店 home量尺 design_services方案 request_quote报价

可交互（详情页用） call电话 videocam视频 storefront到店 home量尺 design_services方案 request_quote报价

列表单元格 Y - Y -

widgets 消息统计 msg_stats

客户/员工消息计数 (橙/蓝双色)

render_type: split_dmsplit_grp 适用字段: dm_countgroup_count

12/38 3/15 0/5 -

widgets 最后聊天 last_chat

最后一条聊天预览 (时间 + 发送人 + 内容, 客户橙 / 员工蓝)

render_type: composite_last_chat 适用字段: last_msg_time

2026-04-02 郭馨然中古包豪斯风格墙板资料库里没有 2026-04-01 李凤伟客户考虑去河北工厂 2026-03-30 郭小果好的，我周末过来看看 -

widgets 响应状态 chip response_chip help_outline

客户响应状态 (6 色双档, v3.28.2). 色值与规则由 response_status_rules.yaml 驱动, 代码不硬编码

render_type: response_chip 适用字段: response_status

最紧急 (sev 4) 沉默

重点关注 (sev 3) 失联静默

常规预警 (sev 2) 冷落

观察 (sev 1) 观望

正常 (sev 0) 活跃

空值 -

table_chart综合示例（真实客户列表形态）

客户ID	客户	阶段	归属人	金额	手机	状态
group1569	S Simon 徐	商机客户	郭郭馨然	29,429	-	check_circle已完成
group1149	s stonealike	商机客户	郭郭馨然	29,429	-	check_circle已完成
person_add1837	不不一样的尤设计🌻	原始线索	李李凤伟	29,429	-	check_circle已完成
group1577	🚞 🚞Antony	成交客户	朱朱五斌	29,429	157 **** 0283	check_circle已完成