S · SITUATION — 原生组件的效率瓶颈
⚙️
操作繁琐
创建大量度量值
在可视化界面反复
手动拖字段、调格式、
设条件格式……
🔄
不可复用
每个看板、每个页面
都要从零走一遍
相同的手动配置流程
即使需求高度相似
📈
规模失控
30+ 看板在维护
同类需求重复劳动
看板越多
交付越慢
核心矛盾:看板越多 → 重复操作越多 → 边际成本不降反升
T · TASK — 找到"写一次,复用N次"的方案
找到一种方法突破原生组件的重复配置模式,实现写一次模板,后续无限复用
前期投入可接受
后续复用成本趋近于零
效果不低于原生组件
A · ACTION — 三步建立组件化体系
第一步:技术选型 — 发现 HTML Content (lite) 方案
输入
DAX 度量值
数据计算 + 字符串拼接
输出渲染
输出
HTML + CSS + SVG
自定义渲染,无需 JavaScript
关键优势:写好一个模板 → 换个度量值引用就能复用到任意看板
第二步:AI辅助 + 标准化开发模式
样式/内容分离
每个组件拆为两个度量值:
· _style — 纯 CSS
· 主度量值 — 动态 HTML
[KPI卡_style] → 静态样式
[KPI卡] → 数据 + 渲染
参数化设计
颜色/字号/间距/圆角
全部提取为 DAX 变量
集中在顶部声明
VAR CardBg = "#FAFAFA"
VAR ValSize = "28px"
→ 改品牌色只改一处
响应式布局
使用 flexbox / CSS Grid
支持 @container 查询
自适应不同卡片尺寸
display: grid;
grid-template-columns:
  repeat(auto-fit, ...)
手写调试 2 小时 AI 辅助 30 分钟 效率提升 4 倍
第三步:沉淀为可复用组件库 — 8类 11个组件
KPI 卡片类
4 个组件
· 总览月度卡片
· 趋势对比卡片
· 品类达标率卡片
· 预算进度卡片
含 sparkline / 进度条 / SVG箭头
多指标网格类
1 个组件
· 8格 DSP 指标卡

含 hover 帮助提示
自适应列数
单组件承载 8 个指标
图表类
2 个组件
· 星级分布柱状图
· 策略费用条形图

苹果 5 色风格
纯 CSS + SVG 渲染
状态标签类
4 个组件
· 考核状态药丸标签
· 达标状态图例
· 评级色条图例
· 趋势箭头图标
5 色动态映射
新看板需要类似组件 → 直接调用 + 调参数 → 无需从零开发
R · RESULT — 写一次,复用N次
已应用到:
VOC 星级看板
广告 DSP 看板
品牌 TikTok 看板
品牌社媒看板
广告购买报告
...
开发效率
2h → 30min ×4
单个组件开发时间
复用收益
1 → N
写一次模板,跨项目复用
"看板比之前专业多了,打开就能看到全貌"
— 业务方反馈
从"每次从零配置"到"写一次复用N次" — 看板越多,复用收益越大
技术选型的价值不在于单次使用,而在于规模化后的边际成本趋近于零
体现能力 → 专业深度 技术选型 · AI提效 · 规范化沉淀 · 组件复用体系