宽弹窗 · 多列 KV 布局 Demo

弹窗宽度 ≥920px 时，如何在不牺牲长值可读性的前提下提高信息密度。 以下 7 种方案使用同一组 18 个字段（含路径、地址、备注等长值），默认 KV 为上下堆叠。 若偏好左右表格（label | value），见「KV 表格模式」； 指标卡、Tab、时间轴、手风琴等其他展示形态见「其他信息展示模式」。 相关：窄弹窗 KV 对比 · 弹窗风格 Demo · 少字段稀疏场景

720px 双列（基准，不在此页） 920px 三列起点 960px 分栏 / 双区块 1040px 四列 / 2×2 卡片 1120px 宽表双组

KV 表格模式（左右 label | value）

与上下堆叠栅格相对：每行（或每半行）为左 label、右 value 的表格行，类似 el-descriptions 但样式对齐 Fresh Mint。 短字段可一行两组（四列）；长字段独占整行。少字段时表格更饱满，不易显空。

其他信息展示模式

除上下 KV 栅格与左右 KV 表格外，查看弹窗还可采用指标卡、属性行、Tab 分段、时间轴、手风琴、芯片摘要、路线进度、Bento 卡片等形态。 样式对齐规范 §9.6（view-timeline / view-route-bar / view-bento 等）。Tab 与手风琴在全屏预览中可点击交互。

宽弹窗选型建议： 短字段（编码/状态/日期）≥9 个 → 可用 3～4 列； 含长路径/备注 → 长字段必须 span 跨整行（方案 C / G）； 字段可自然分组 → 优先 双区块并排（D）或 2×2 卡片（F），比单纯加列更易扫读； 需「摘要 + 明细/轨迹」→ 用 左右分栏（E），左侧 1 列、右侧 2～3 列。 偏好左右对齐、表格感 → 见 KV 表格模式（M～R，推荐 N 双组四列）。 需流程/进度/折叠/分段 → 见 其他展示模式（S～Y）。 字段 ≤8 个 → 见下方「少字段稀疏场景」或 独立 Demo 页；表格方案见 Q / R。

少字段稀疏场景（≤8 个 KV）

1040px 四列在字段少时容易「空荡荡」。常用手段：① 自适应降列 ② Hero 下沉 KPI ③ Hero 芯片摘要 ④ 单卡片 Bento ⑤ 窄弹窗 720px。 实现上可在 SystemViewDialog 按 fields.length 动态设 gridColumns 与 width。