This commit is contained in:
2026-08-18 17:40:40 +08:00
parent 6ff77e92b2
commit c188482c24
18 changed files with 423 additions and 97 deletions
+9
View File
@@ -98,12 +98,21 @@
- Admin 是高信息密度业务系统,默认使用紧凑的表格、键值行、分组标题和连续分区呈现信息;不将普通字段、统计值或流程节点拆成大面积卡片,不为少量信息制造大留白。一屏应优先展示完成当前业务判断所需的多项关键信息。
- 需要突出结果时,仅对总额、异常、待办或当前状态使用克制的强调;其余信息保持同一紧凑信息层级,不重复标题、说明和装饰性容器。
- 详情页的短字段优先使用无独立卡片外框的多列键值网格或描述表;在 `1920×1080` 下通常并排展示 `4–6` 组短字段,长文本、地址、备注和异常原因再按内容跨列。不得把“一个标签 + 一个值”做成一张卡片,也不得用嵌套卡片、重复阴影和多层圆角制造层级。
- 详情内容按真实业务域使用紧凑分组标题、细分隔线和连续白底分区;重复记录使用表格或紧凑列表,只有独立指标、明确告警、待办或需要单独操作的业务对象才使用卡片。卡片是否采用以信息结构为准,不以已有组件方便为理由机械套用。
- 详情页顶部的返回、标题、核心状态和主要操作应尽量合并在同一紧凑头部;不得让返回按钮、状态提示、标题说明各自独占一整行。路由壳层已经展示标题时,正文不得再次重复标题或说明。
- 同一状态或流程结论只保留一个主要视觉落点:优先在页头或概览中使用紧凑状态标签;除真实错误、阻断、危险或必须立即处理的告警外,不再叠加大面积彩色横幅、彩色卡片和重复状态条。页面主色操作通常只保留一个,其余动作使用次要或文字层级。
- 不以“信息密度”为由使用过小字号、压缩可点击区域、删除标签或强制截断关键值;长值可以换行、跨列或提供完整悬停内容。目标是减少无效容器、重复说明和纵向留白,而不是牺牲可读性与可操作性。
- 同一详情页必须使用一致的内容底色和容器语言。采用连续白底时,页头、概览、明细、费用和历史应位于同一主内容面内,以分隔线和间距分区;不得出现顶部透明或灰底、下方连续独立白卡的割裂布局。确需独立卡片时,各同级区域的背景、圆角、边框和外间距必须统一。
- 在 `1920×1080` 验收视口中,如果一组柜次号、集装箱号、订单号、提单号或时间集中显示为省略号,说明列数或宽度设计失败,应减少列数、允许合理换行或让长字段跨列,而不是继续缩小字号。详情概览的标签样式应使用直接子级选择器,避免给 `StatusBadge` 等嵌套组件误加冒号、字号或截断规则。
- 样式调整必须用真实长编号、空值、状态徽标及至少一组多字段数据核对首屏;自动化测试只能证明结构和行为,不能替代人工截图对背景连续性、有效信息量、截断和留白的视觉验收。
- 修改已有 Admin 原型页面前先读 `../../docs/Admin-Client前端原型还原验收规则.md`,按页面和操作形成原型核对矩阵;本节维护 Admin 的实现约束,不复制跨前端验收文档全文。
- 已向客户讲解或确认过的产品原型是页面视觉与布局实现的直接事实来源。字段顺序、字段分组、字段摆放、列宽、控件宽高、对齐方式、换行方式、区块层级、上下左右边距、内边距、间隙、留白、圆角、边框、阴影、背景色、文字颜色和字号均必须按原型还原,不得只参考大致风格后自行重新排版。
- 原型中的按钮位置、顺序、尺寸、圆角、边框、背景色、文字色、图标、悬停态、激活态、禁用态和危险语义必须直接按原型实现;不得擅自改为文字链接、不同颜色、不同按钮类型、折叠菜单或自创交互效果,也不得增加原型没有的上浮、缩放、渐变线、装饰图标或其他视觉元素。
- 原型已经给出明确图标、字符图标、图片资源或按钮内图标时,直接使用原型中的同一方案和资源,不得以 Lucide、Element Plus 默认图标、手绘图标或个人偏好替换。仅当原型没有定义对应图标时,才按本节的默认图标语义补齐。
- 上述原型还原规则优先于本文件中“延续现有视觉体系”、默认组件样式和默认图标库等一般性规则。只有用户当前明确要求、阶段范围、真实字段长度、响应式、可访问性或接口事实与原型冲突时才允许做最小调整,并须在修改前说明具体差异、原因和影响范围;不得以技术实现方便为由偏离原型。
- “Admin 高信息密度”是当前已确认的产品级约束:当历史原型仅因大量字段卡片、重复状态块或过度留白与本节冲突时,应保留原型字段、顺序、业务分组和交互语义,但将承载方式收敛为上述紧凑布局;不得以机械复刻历史卡片外观覆盖当前密度要求。
- 详情、新增、编辑、审核等操作采用独立页面、居中弹框、侧滑面板或其他承载方式,必须逐页面按对应原型确认,不得全局写死为某一种容器。原型为独立页面时使用正式路由和页面布局;原型为居中弹框时使用模态弹框;只有原型明确为侧滑面板时才使用抽屉。不得因为已有公共组件或改动方便,把原型中的独立页面改成弹框、把弹框改成抽屉,或反向替换。
- 延续现有后台视觉体系:克制的企业级界面、清晰的信息层级和高密度但可扫描的数据展示。
- 路由级页面标题和说明统一由 `AppLayout` 顶部 `page-heading` 根据路由 `meta.title`、`meta.description` 展示。标准列表页正文不得重复渲染 `PageToolbar`、页面标题或说明,只保留查询区与表格区。`QueryToolbar` 只承载筛选项及其内置查询、重置按钮,不把新增、导入、导出或批量操作放入其 `actions` 插槽;重新执行查询即刷新当前结果,标准列表页任何位置都不得再提供独立刷新按钮。新增、导入、导出和批量操作统一放入 `DataTable` 的 `toolbar-actions` 插槽并靠表格工具栏右侧展示。仅没有查询组件的实时工作台或详情页在业务确实需要主动重载时,才可保留刷新;仅详情页或工作台在路由明确设置 `showPageHeading: false` 时,才可在正文使用独立详情头。