仪表盘与布局插件：产品能力说明#

状态：与当前实现同步（2026-07）
受众：产品、售前、PM、架构沟通
工程说明：设计与实现 · DataView 前端规格

1. 一句话#

仪表盘插件决定「整页怎么排」，布局插件决定「页内如何分组嵌套」；深度进入分组内部编辑时，用 Focus Mode 隔离修改，保存才回写，取消不污染整页。

2. 为什么拆成两层#

能力层	产品含义	内置形态
仪表盘（面板）插件	整页几何与阅读场景	网格 / 自由布局 / 列表
布局插件	页内容器：分组、多标签、轮播	行分组、标签页、幻灯片

这样拆分的产品价值：

• 场景清晰：大屏、门户、移动端各用合适的整页形态，不必用一种布局硬扛所有场景。
• 组合灵活：任意整页形态里都可以再放分组 / 标签 / 轮播，嵌套内容与外层 同一布局家族（大屏里还是大屏语义，列表里还是列表语义）。
• 编辑可深入：容器内部像「子仪表盘」一样编排，又不必打开另一个独立文件。

3. 三种整页布局（选型）#

布局	适合谁	画布语义
网格	PC 门户、可滚动经营看板	宽度铺满，高度可随内容增长
自由布局	指挥大屏、展厅、拼接屏	固定逻辑尺寸 + 等比缩放，一屏看全
列表	移动端单列	单列流式；编辑态可开 手机宽度预览（对齐常见机型视口）

自由布局 不做「固定宽、高度随内容撑高」——详见 自由布局大屏固定尺寸。流式滚动请用网格。

列表编辑的设备预览用于「在桌面编辑器里按 iPhone 等宽度验收」，查看态仍按真实设备通栏展示；预览不改变嵌套容器内部「铺满当前槽位」的运行规则。

4. 页内布局容器#

容器	用户能做什么
分组（行）	把多块内容收成一组，可折叠，便于整组移动与查看
标签页	多页签切换，每页独立内容区
轮播	多页幻灯切换，适合巡检 / 轮播大屏区块

容器只负责「壳」与槽位；槽位里仍是 同家族仪表盘画布，而不是另一种互相打架的布局引擎。

5. Focus Mode（聚焦编辑）#

当用户需要改某个分组 / 标签 / 轮播 内部 的编排时：

1. 进入 聚焦编辑：遮罩整页，站位对齐原容器位置；
2. 侧栏区分 容器设置（如标签标题）与 画布设置（背景、图层等）；
3. 保存 才合并回整页；取消 丢弃本次内部改动。

产品体验目标：

• 深层编辑时，外层仪表盘不被误拖、误改；
• 站位与遮罩下预览框对齐（尤其列表手机预览开启时），所见即所量；
• 自由布局还可在聚焦态调整内部 图层顺序。

6. 编辑态侧栏（产品语言）#

场景	侧栏能力
编辑整页	画布（背景、尺寸/预览等）；自由布局另有 图层
聚焦进容器	容器 + 画布；若内部是自由布局再加 图层

插件只提供「配置内容」；折叠、页签切换、深浅主题由统一编辑器壳承载，保证根编辑与聚焦编辑体验一致。

7. 对客户与交付的价值#

• 多形态交付：同一产品覆盖门户、大屏、移动，选型有文档可讲。
• 可嵌套不串味：大屏里的标签页不会「变成网格」，降低脏数据与售后成本。
• 深度编辑可控：聚焦保存/取消语义清晰，适合多人协作与反复打磨。
• 插件可扩展：新的整页形态或容器类型按同一契约扩展，不推翻编辑器壳。

8. 相关文档#

文档	说明
设计与实现（Develop）	架构分层、Focus、侧栏、技术优势
完整产品能力 · 布局选型	能力矩阵中的布局表
面板插件概念	插件体系中的面板定义
自由布局固定尺寸	大屏画布产品决议
DataView 实现规格	DataView/spec/development/dashboard-layout-plugins.md
MetaRepo 索引	spec/development/dashboard-layout-overview.md