social-media-matrix-tracker-template

社交媒体矩阵追踪器模板

打造一款高端、富有电影感的社交媒体分析模板，具备高数据密度和生产级微交互。

资源映射

social-media-matrix-tracker-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

工作流

1. 先阅读当前生效的 DESIGN.md，将设计令牌映射到 CSS 变量，然后调整 assets/template.html。
2. 保持结构信息架构完整：主视觉区 + 平台矩阵 + KPI 指标栏 + 多个图表深度分析区。
3. 保持交互体验的完整性：
   • 深色 / 浅色主题切换
   • 图表悬停提示（自动限制在视口内）
   • 点击固定图表数据点
   • 拖动选择区间进行分析
   • Shift + 拖动比较多个区间
   • 洞察面板随所有图表（折线图 / 堆叠图 / 环形图 / 地理图）实时更新
   • 折线图支持触控 + 键盘方向键操作（无障碍）
4. 确保模板保持自包含（单个 HTML，内含 CSS / JS，不依赖框架）。
5. 确保默认示例数据真实可信，且卡片与图表中的数据彼此一致。
6. 输出产物前，使用 references/checklist.md 进行验证。

安全调整示例数据

assets/template.html 内置了经过精细调整的示例数组。替换为真实数据时，请遵循以下约定，确保图表和洞察保持一致：

• 一次性替换整个数组，不要只替换单个索引 — 折线图要求 values[] 和 xLabels[] 长度相同，且按索引对齐。
• 保持现有的单位 + 小数位数：hourChart（互动数 / decimals: 0）、slaChart（分钟 / decimals: 0）、roiChart（x 倍数 / decimals: 1）、cohortChart（% / decimals: 0）。单位不匹配会导致提示和 A/B 洞察文案出错。
• 四条折线的数据系列长度必须相同（默认 7 个数据点）。长度不同会导致 A/B 比较出错，因为比较逻辑要求索引一致。
• 对于 mixChart，每个 bars[i].stack 都必须保持为包含 3 个元素的数组（[Video, Thread, Carousel]）。对于 sentimentChart，arcs[] 的百分比总和应为 100。
• 同步更新 KPI 指标栏和平台卡片数据 — 产物的“实时概览”洞察根据相同的数据计算得出。
• 单数据点数据集设有保护机制（会绘制为带标签的点），但会降低用户体验；调整时建议每个图表至少包含 3 个数据点。

输出约定

在产物前输出一个简短句子（例如 “富有电影感的社交媒体矩阵追踪器 — 默认使用深色主题，所有交互均可用。”），然后输出一个自包含的 HTML 产物。

• 产物必须使用下方所示的 <artifact> 包装元素 — 守护程序解析器依赖该包装元素。
• identifier="social-media-matrix-tracker" 是规范 ID（不要追加项目名称）。
• 必须包含 type="text/html" 和 title。
• 仅使用内联 CSS + JS。不使用外部框架 / CDN。除 template.html 中已有声明外，不导入外部字体。
• 最终文档必须是调整后的 template.html（已应用 DESIGN.md 令牌），不能是原样副本，也不能是单独的 index.html。不要同时输出两者。

<artifact identifier="social-media-matrix-tracker" type="text/html" title="Social Media Matrix Tracker">
<!doctype html>
<html>...</html>
</artifact>