Fresh Mint · 查看弹窗风格 Demo

基于 web-admin 设计规范（主色 #10b981、无遮罩模糊、查看态仅关闭按钮）的 6 套查看弹窗方案。 点击下方卡片预览各风格，或在业务选型时对照适用场景。 另见 KV 字段布局对比 Demo（上下 vs 左右 vs 表格）· 宽弹窗多列 Demo（920～1120px）。

A · 经典 Hero SystemViewDialog

经典 Hero + KV 分块

当前 SystemViewDialog 标准方案：渐变 Hero 区 + 绿条区块标题 + 双列键值。适合用户、角色、主数据等通用 CRUD 查看。

B · 数据看板 订单/配送

数据看板 + Bento 指标

Hero 内嵌 4 格指标卡 + Bento 信息卡 + 路由示意条。适合订单、配送任务、运单等含数量/金额/路线的业务详情。

C · 左右分栏 Split Layout

左右分栏 + 时间轴

左侧固定摘要与 KV，右侧展示审批流/轨迹/子表。对应 layout="split"，适合工作流待办、检测任务等「摘要 + 过程」场景。

D · 紧凑清单 轻量实体

紧凑行式清单

无 Hero 渐变，单行 label-value 对齐，分组灰底标题。宽度 560px，适合字典项、单位、岗位等字段少、无需视觉强调的轻量查看。

E · 票据档案 合同/证书

票据档案风

正式文档头 + 水印 + 圆形印章态 + 表格式 KV + 签章区。适合合同、报价单、运输计划证、质检报告等需「归档感」的只读详情。

F · 标签页 复杂业务

标签页分区查看

顶部 Tab 切换基本信息 / 明细 / 审批 / 附件，避免单页过长滚动。适合 CRM 合同、报价、商机等多区块复杂对象。

G · 卡片堆叠 客户/供应商

卡片堆叠分区

灰底容器 + 独立浮卡，每卡一个主题区块，视觉层次清晰。适合客户档案、供应商资质、人员档案等「多维度画像」类查看。