# dataview-visualize

**Repository Path**: saugage/dataview-visualize

## Basic Information

- **Project Name**: dataview-visualize
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-11-03
- **Last Updated**: 2026-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dataview-visualize

数据大屏（1920×1080 指挥屏 / 驾驶舱 / 运营看板）设计与生成技能。复用工作区已有的样式基座与设计规范 → 与用户确认布局与风格 → 多方案模式生成**零依赖**大屏 HTML → 浏览器级自检交付；需要工程化时经 `prototype-to-frontend` 技能输出真实前端项目。

**在线示例**（全国仓储物流运行大屏 · L3 中心地图 × 科技蓝 HUD），点开即看：

- GitHub Pages 入口：<https://wikkygao.github.io/dataview-visualize/>
- 直达大屏：[大屏-方案一-全国仓储物流.html](https://wikkygao.github.io/dataview-visualize/%E5%A4%A7%E5%B1%8F-%E6%96%B9%E6%A1%88%E4%B8%80-%E5%85%A8%E5%9B%BD%E4%BB%93%E5%82%A8%E7%89%A9%E6%B5%81.html)（中国地图光点可拖拽、点击节点卡联动、右上角「看板导读」逐站讲解、双击面板标题可改文案）

> 示例统一由 GitHub Pages 提供（Gitee 用户同样可直接访问上述链接）。Gitee Pages 服务已于 2024 年 5 月下线且暂无恢复计划，gh-pages 分支内容已同步到 Gitee 仓库备查。

## 能力亮点

- **基座五件套**（`assets/`，生成时复制到交付目录）
  - `大屏基座.css / .js`：等比缩放画布、HUD 面板、双击全屏、时钟、数字滚动
  - `大屏编辑.js`：模块标题双击编辑（Esc 还原，`data-edit-key` 可持久化）
  - `大屏导读.js`：分步看板导读（蒙层挖孔、卡片避让、文案可编辑存 localStorage、键盘操作）
  - `大屏地图.js`：地图光点板块（拖拽微调、光点↔卡片虚线连线、飞线弧、16:9 适配、重置）
- **布局菜单 L1~L7**：经典驾驶舱 / 分层分域看板 / 中心地图 / 流程主轴 / 实时态势 / 对象矩阵 / 左右分区
- **风格菜单 S1~S5**：科技蓝 HUD（默认）/ 碳黑极简 / 亮色商务浅底 / 政务暖金 / 深空紫霓虹——换风格只动令牌与背景层，骨架不动
- **工作区侦察**：设计前先找工作区已有的基座 / 设计规范 / 大屏样例 / 业务输入 / 地图素材（涉及地图必先向用户索要底图），有则复用，无则回退内置资产
- **内容叙事约束**：一屏一结论、指标口径表、示例数据自洽、敏感信息脱敏
- **多方案模式**：默认产出 2~3 个布局方案 + `00-总览与选型建议.md` 对比
- **零依赖**：原生 SVG + vanilla JS，离线可投屏；不引第三方图表库（除非用户明确要求）

## 使用

安装到 ZCode 技能目录（软链或复制本目录），之后对话中提到大屏 / 驾驶舱 / 指挥屏 / 运营看板等即自动触发，也可手动调用：

```
/dataview-visualize 做一块全国仓储物流大屏，要有中国地图
```

典型工作流：盘工作区 → 内容规划（口径表）→ AskUserQuestion 确认布局与风格（含地图素材）→ 多方案生成 → Playwright 自检 → 交付（HTML + 方案 md + 00-总览）。

## 目录结构

```
dataview-visualize/
├── SKILL.md              主工作流（含第 7 步：经 prototype-to-frontend 交付真实工程）
├── assets/               基座五件套
└── references/
    ├── 布局模式库.md      L1~L7 骨架与选型速查
    ├── 内容叙事方法.md    口径表 / 受众 / 示例数据规则
    ├── 风格菜单.md        S1~S5 令牌与换风格三步法
    ├── 风格-科技蓝HUD.md  默认风格完整规范
    ├── 交互能力.md        编辑/导读接入写法
    ├── 地图板块.md        底图素材询问规则 + 地图光点接入
    └── 验收清单.md        交付前 A~E 自检
```

## 交付物形态

```
<输出目录>/
├── 00-总览与选型建议.md
├── 指标字典.md           每个指标的数据来源与统计计算方式（接数对接依据）
├── 大屏-方案一-<主题>.html …（引用同目录五件套与底图，双击即开）
├── 方案N-<主题>.md       版块清单 / 口径表 / 交互站清单
└── 大屏基座.css/.js、大屏编辑.js、大屏导读.js、大屏地图.js
```

## 相关链接

- GitHub：[WikkyGao/dataview-visualize](https://github.com/WikkyGao/dataview-visualize)
- Gitee：[saugage/dataview-visualize](https://gitee.com/saugage/dataview-visualize)
- Skillhub：skillId `305556`（`skillhub install dataview-visualize`）

## 版本

- **v1.2.0** 新增「文档同步 SOP」：一个方案一份说明文档，屏上调整按同步矩阵当轮更新文档；指标字典升格为独立参考文档
- **v1.1.0** 新增必交付物《指标字典.md》：逐指标数据来源 + 统计计算方式（含状态阈值映射与非指标型数据清单）
- **v1.0.1** 中文文件名打包编码修复（内容同 1.0.0）
- **v1.0.0** 首发地图板块（拖拽/连线/飞线弧）+ L1~L7 布局库 + S1~S5 风格库 + prototype-to-frontend 交付指引