html/docs
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-10-21 14:30:36 +08:00
parent 1fb613c8bd
commit be51f03c6c
14 changed files with 258 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
界面参考/蓝白卡片式工作台风格参考.md
+12 -153
View File
@@ -1,188 +1,47 @@
# 蓝白卡片式工作台风格参考
# 蓝白样板目录与原始视觉参考
本文件是 Admin 蓝白样板的视觉与接入入口。风格为：**白色主体、明亮蓝色强调、浅色图标底座、轻边框圆角卡片、清晰的数字层级**。首屏保持清爽，页面先按用途选择样板，再组合公共样式，保留自身的业务信息和操作。
2026-10-20，用户选择自营经营总览制作样板，随后扩展到销量分析、库存分析和数据采集，包括共用的 SKU 趋势、图表证据弹窗；提供实际截图完成收尾，并授权更新 Admin 测试环境。用户随后要求正式固化该风格：**后续 Admin 页面以这套蓝白、清爽、少提示文字的样板为改版基线，按页面类型复用公共样式。** 各页面的实际视觉仍以人工截图为准；规范固化不代表全端已改造或验收通过。本文不记录部署成功或实施进度，任务范围与逐页结论回到对应模块现有逐操作矩阵。
本文件只供按页面类型查找样板和原始截图。**Admin 样式统一从 [Admin 界面规范](../Admin高密度界面规范.md) 进入**；通用规则和公共类说明已并入主规范，本文件不再单独维护规则。普通样式任务无需先读本文件。
## 其他页面该参考哪个样板
| 页面类型 | 参考入口 | 源码入口 | 复用内容与保留边界 |
|---|---|---|---|
| 经营总览、首页指标、数据摘要 | **经营总览** `/self-operated/overview` | [`OverviewView.vue`](../../apps/admin-web/src/modules/self-operated/pages/OverviewView.vue)、[`DashboardTrend.vue`](../../apps/admin-web/src/modules/self-operated/components/DashboardTrend.vue)、[`DashboardBars.vue`](../../apps/admin-web/src/modules/self-operated/components/DashboardBars.vue) | 页头操作、统计口径、分区标题、指标卡、趋势和排行榜；按实际指标数量组织，六列指标、2:1 主图和三列榜单只属于该页 |
| 标准查询列表、业务台账 | **销量分析** `/self-operated/sales` | [`SalesView.vue`](../../apps/admin-web/src/modules/self-operated/pages/SalesView.vue) → [`AnalyticsView.vue`](../../apps/admin-web/src/modules/self-operated/components/AnalyticsView.vue) | 浅色筛选区、列表外壳、主次按钮、表头与悬停态、分页；保留行密度、筛选条件、权限和操作列，不增加大指标卡 |
| 标准查询列表、业务台账 | **销量分析** `/self-operated/sales` | [`SalesView.vue`](../../apps/admin-web/src/modules/self-operated/pages/SalesView.vue) → [`AnalyticsView.vue`](../../apps/admin-web/src/modules/self-operated/components/AnalyticsView.vue) | 独立筛选区、列表外壳、主次按钮、表头与悬停态、分页；保留行密度、筛选条件、权限和操作列，不增加大指标卡 |
| 有分类／状态页签的业务列表 | **整柜业务**、**排车列表** | [`DomesticContainersView.vue`](../../apps/admin-web/src/modules/domestic-containers/pages/DomesticContainersView.vue)、[`DispatchesView.vue`](../../apps/admin-web/src/modules/overseas-warehouse/pages/DispatchesView.vue) | 顶部左侧分类页签、右侧操作共用一行，随后为筛选和表格；排车审核子分区保留真实层级 |
| 复杂分析、指标加宽表、多视图查询 | **库存分析** `/self-operated/inventory`，分别看“库存周转”和“库存明细” | [`InventoryView.vue`](../../apps/admin-web/src/modules/self-operated/pages/InventoryView.vue) → [`InventoryTurnoverView.vue`](../../apps/admin-web/src/modules/self-operated/components/InventoryTurnoverView.vue)／[`AnalyticsView.vue`](../../apps/admin-web/src/modules/self-operated/components/AnalyticsView.vue) | 视图页签、两组紧凑指标、可展开图表、宽表和关注条件；保留业务列宽、横向查看、固定业务标识及筛选作用范围 |
| 采集、同步、批处理等运行看板 | **数据采集** `/self-operated/collection` | [`CollectionView.vue`](../../apps/admin-web/src/modules/self-operated/pages/CollectionView.vue) → [`CollectionAccountMonitor.vue`](../../apps/admin-web/src/modules/self-operated/components/CollectionAccountMonitor.vue)、[`CollectionTaskProgress.vue`](../../apps/admin-web/src/modules/self-operated/components/CollectionTaskProgress.vue)、[`CollectionProgressGauge.vue`](../../apps/admin-web/src/modules/self-operated/components/CollectionProgressGauge.vue) | 主状态、当前阶段进度环、数量卡、右侧后续安排、阶段流程与各仓结果；进度与发布结果分开表达，不复制该模块的任务状态机 |
| SKU 趋势、图表明细和证据浮层 | 在上述页面点击已有趋势／明细入口 | [`SkuTrend.vue`](../../apps/admin-web/src/modules/self-operated/components/SkuTrend.vue)、[`ChartDetailsDialog.vue`](../../apps/admin-web/src/modules/self-operated/components/ChartDetailsDialog.vue)，调用方见前三类页面 | 独立主题根、蓝白图表、说明与证据表；保留普通／全屏、关闭重开、正文滚动、原尺寸和数据重置行为 |
新增、编辑、审核表单与独立详情继续从 [Admin 高密度界面规范](../Admin高密度界面规范.md) 的对应规则进入。蓝白样板提供外观，不能据此把表单改成指标卡、把抽屉改成弹窗，或改动字段分组与提交入口。打印标签、PDF、装柜模型和图纸保留业务所需尺寸。
样板用于参考结构与公共类；其他业务模块不得直接引用自营模块的内部页面或组件。真正跨模块复用的稳定能力，应沿现有 Admin 公共层扩展。
样板只用于参考结构，不授权跨模块引用内部组件或改变业务字段、权限及承载方式。自营模块的逐操作与验收记录见 [operation-matrix.md](../../apps/admin-web/src/modules/self-operated/operation-matrix.md)。
## 视觉基线与维护入口
| 维护内容 | 唯一实现入口 |
|---|---|
| DOM 配色、字号、间距、圆角、阴影与辅助色 | [`adminWorkbenchTokens.css`](../../apps/admin-web/src/styles/adminWorkbenchTokens.css) |
| 标题、指标卡、列表外壳、页签、阶段、图表空态与弹窗外观 | [`adminWorkbench.css`](../../apps/admin-web/src/styles/adminWorkbench.css) |
| Canvas 图表字体、颜色、坐标网格与提示框主题 | [`adminWorkbenchChartTheme.ts`](../../apps/admin-web/src/styles/adminWorkbenchChartTheme.ts) |
| 显式接入范围、变量归属、公共类与浮层作用域合同 | [`adminWorkbench.test.ts`](../../apps/admin-web/src/styles/adminWorkbench.test.ts) |
| 原有表格、控件和弹窗密度 | [`adminDensityTokens.css`](../../apps/admin-web/src/styles/adminDensityTokens.css)、[`adminDensity.css`](../../apps/admin-web/src/styles/adminDensity.css) |
| 弹框与抽屉的标题、正文滚动和底部操作 | [`AppDialog.vue`](../../apps/admin-web/src/shared/components/AppDialog.vue)、[`AppDrawer.vue`](../../apps/admin-web/src/shared/components/AppDrawer.vue)；真实 Element 挂载回归见 [`AppDialog.layout.test.ts`](../../apps/admin-web/src/shared/components/AppDialog.layout.test.ts) |
以下列出样板的主要取值，便于理解效果；代码以对应令牌为准，修改数值只改唯一实现入口，不在页面重新声明默认值。
| 项目 | 样板基线 |
|---|---|
| 主操作与链接 | `--workbench-primary`，`#3784FA`；悬停、按下与禁用使用配套令牌 |
| 重点数字 | `--workbench-number`，`#1890FF` |
| 正文与辅助文字 | `--workbench-text`，`#1F2937`；`--workbench-muted`，`#64748B` |
| 表面与边框 | 白色主体，浅灰蓝辅助区；`--workbench-border`，`#E5EAF2` |
| 卡片与图标底座 | 卡片圆角 16px、图标底座圆角 12px，低强度阴影；使用公共令牌 |
| 普通指标卡高度 | `--workbench-metric-min-height: 186px`；长内容可自然撑高，紧凑指标不继承此最小高度 |
| 空间 | 外壳内容区上／左右 12px、底部 16px；工作台根内边距 `--workbench-page-padding: 12px`；区块间距仍为 24px，普通卡片内边距 20px、紧凑卡片内边距 14px、同级网格间距 18px |
| 主列表顶部 | 工具栏最小高度 48px、上下内边距 6px；筛选区上下 8px；两区左右统一 12px，普通按钮与筛选控件 32px；内容多时自然换行，不截断或固定总高度 |
| 主列表底部分页 | 最小高度 48px（border-box）、上下内边距 6px、左右 12px，与筛选区对齐；保留 32px 翻页按钮和长统计换行，不沿用集成列表旧的 64px 高度、14px 上下留白 |
| 文字层级 | 页标题 24px、分区标题 18px、普通指标名称 15px、重点数字 34px、紧凑指标数字 26px |
| 辅助色 | 青、绿、紫、黄、红用于图标、分区与真实状态，不能代替状态文字 |
白色和细边框负责分层，不反复套大卡片；标题与数值形成重点，单位和补充说明降低权重。蓝色强调重点数据，不要求所有数字着色。红、黄继续表示风险、失败或警告；趋势是否改善由业务决定，不能仅凭上涨或下降设绿色。
原有 `--admin-*` 密度默认值继续有效。公共控件、表格行高、行内操作、弹窗尺寸和滚动由原组件与密度规范管理；蓝白外观只在显式主题范围内生效。
页面边缘采用紧凑双层留白：`.page-container` 与 `.admin-workbench.admin-page` 分别使用 12px，避免旧外壳 20px 再叠加工作台 24px 挤占内容。页边距与区块间距使用独立令牌，不通过缩小表格行高、控件或文字来换空间。
页面内复用另一个完整 `AdminPage` 时，仅在嵌入调用上显式加 `is-embedded`，去掉内层重复 padding；独立路由打开仍保留原页边距。订单内的测量审核分支是此用法的参考。不要在业务页重复声明公共间距变量，也不要全局清空所有面板内距。
整页主体是一块连续白底，不再额外套一圈边框、圆角和阴影。包住主要列表的 `workbench-table`／`workbench-toolbar` 或整页详情 `workbench-panel` 显式增加 `is-page-surface`；内部指标、图表、并列独立面板继续保留细边框，表格单元格、表头和操作分隔线也保留。不能通过清除全部 `border` 把卡片、控件和表格边界一起抹掉。
详情主容器的 `workbench-panel.is-page-surface` 在屏幕展示时不再叠加 padding，即使同时有 `is-compact` 也由外层页面或业务分区提供唯一一层留白。独立预装／装柜清单详情和货柜内的清单页签按此规则接入；内部独立紧凑卡片仍为 14px，普通卡片仍为 20px。该规则排除 `AdminPage` 页根并仅用于屏幕，不覆盖页面原有 12px 或打印内距。
主列表不要叠加“重复路由标题行 → 分类页签行 → 按钮行”。有同级分类／状态页签时，将原页签移入 DataTable 的 `toolbar-start`，原按钮留在 `toolbar-actions`／`toolbar-end`，筛选留在 `filters`；页签使用 `workbench-list-tabs` 清除重复外框和内边距。无页签时保留紧凑标题与按钮行。真实业务子分区、统计数量、加载失败与当前范围继续保留，不因减高消失。工具栏与筛选共用 `--workbench-list-inset`，页面不再额外增加左右偏移；表格单元格仍由原密度规范管理。
2026-10-21 用户截图补充：主列表顶部第一个状态页签与下方审核分区对齐，公共样式抵消工具栏重复叠加的 12px 缩进；页签前有返回按钮时保留按钮与页签间距，嵌套表格不套该偏移。标准 DataTable 使用组件默认斑马纹，按销量分析样板呈现浅灰、白色交替，不再由业务页显式关闭。行底色复用 `--admin-row-stripe`，悬停行、当前行和悬停单元格交回 Element 对应状态样式；父表行底色不穿透内嵌表格。
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#视觉基线与维护入口)。
## 信息层级与渐进披露
页面常驻内容以**关键标题、数值、简短状态和操作**为主。老板已明确不希望页面堆满提示文字；以下规则用于组织实际业务信息，不能把本规范逐条搬成页面说明。
- **详细口径按需展开。** 计算公式、统计口径、图例、来源解释和操作说明放入已有说明入口或 `InlineHelp`／tooltip，支持键盘聚焦；不为每张卡增加介绍段、装饰性副标题或长解释。确需影响判断的周期、单位和版本保留最短必要表达。
- **同一事实只讲一次。** 多张卡共用的统计周期、完整性或来源在分区层级统一表达；卡片仅显示自身特有状态。主状态、进度环、数量卡与阶段节点不重复整段等待原因。
- **异常优先合并到一个清晰入口。** 同一异常影响多块内容时，在相关区域保留一条简短状态与查看详情／重试入口；不要在每张卡和图表下重复警告。独立异常仍在对应位置明确呈现，不能合并后丢失作用范围。
- **关键异常与阻断常驻。** 当前失败、未知、陈旧、权限不足、操作阻断及危险后果必须能直接识别；细节可以展开，关键状态不能只藏进 tooltip。正常完整状态不需要逐卡反复宣告。
- **事实与视觉分开。** `0` 表示已知零值，`—` 或“待确认”表示未知；历史结果和陈旧快照要有简短标识。精简文案不得把未知显示为零、把暂停显示为完成，也不得隐藏真实风险。
库存分析样板按这套规则收敛：快照解释、“本仓概览／截至日期／采集时间”整行及图表范围说明移入已有说明入口；正常指标卡只保留名称、数值和单位，删除重复的“已确认”。真实未知、陈旧和异常继续显示简短提示。删除独占一行的“展开图表”，将图表操作并入顶部简短入口。完整数值来源、采集时点和估算细节可在说明或 tooltip 中查看；估算值必须能辨认其估算属性，不得因精简文案冒充实测值。
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#提示文字与加载布局)。
## 公共样式接入
页面直接导入 `@/styles/adminWorkbench.css`，保留原有密度入口，并在实际页面根容器增加 `admin-workbench`。不依赖先打开样板页后残留的 CSS，不将主题放入全局入口，不修改 `:root`。导航、顶栏、页签由总控在各自容器显式接入，不给包含业务页面的 `.app-shell` 或 `.app-main` 添加主题类；业务页和 Teleport 浮层仍须自己接入。
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#公共样式接入)。
```vue
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '@/styles/adminWorkbench.css'
// 继续使用该页面原有数据、筛选、权限与事件。
</script>
## 弹框与抽屉的布局边界
<template>
<AdminPage class="admin-density admin-workbench">
<ListPageLayout>
<div class="workbench-table">
<DataTable :data="rows" :columns="columns">
<!-- 原有工具栏、查询和操作插槽 -->
</DataTable>
</div>
</ListPageLayout>
<AppDialog
v-model="detailOpen"
class="admin-density-dialog admin-workbench is-dialog"
>
<!-- 原有内容与尺寸配置 -->
</AppDialog>
</AdminPage>
</template>
```
这个片段只说明主题作用域。`rows`、`columns`、弹窗宽高、事件与组件导入仍按目标页原实现补齐，不代表需要新建弹窗或更换承载方式。
| 场景 | 公共类与用法 |
|---|---|
| 页头与分区 | `workbench-heading`、`workbench-title`、`workbench-meta`、`workbench-section`、`workbench-section-heading`、`workbench-section-title`、`workbench-badge` |
| 普通指标卡 | `workbench-metric`、`workbench-metric-heading`、`workbench-icon`、`workbench-metric-label`、`workbench-metric-value`、`workbench-status`、`workbench-note` |
| 紧凑指标 | 在指标卡和图标上增加 `is-compact`；不继承总览卡片的最小高度 |
| 面板与提示 | `workbench-panel`、`workbench-notice`、`workbench-skeleton`；紧凑／自带头部面板使用 `is-compact`／`is-flush` |
| 图表与空态 | `workbench-chart`、`workbench-chart-heading`、`workbench-chart-title`、`workbench-chart-actions`、`workbench-chart-canvas`、`workbench-chart-empty`、`workbench-chart-empty-icon` |
| 标准列表 | **外层 `div.workbench-table` 包裹 DataTable**，统一外框、表头、边框、行悬停和分页强调；不修改业务列宽或行密度 |
| 整页主要内容 | 主要列表的 `workbench-table`／`workbench-toolbar`、整页详情的 `workbench-panel` 增加 `is-page-surface`，去掉整页外框、圆角和阴影；详情主容器的屏幕 padding 为 0，保留页面根及内部卡片内距；主表顶部同时使用公共紧凑高度与左右边界，子表格不自动套用 |
| 嵌入完整页面 | 仅在嵌入调用上加 `is-embedded`，清除内层 AdminPage 的重复内距；独立路由不加 |
| 独立查询区 | QueryToolbar 自身添加 `workbench-query`，保留原控件宽高、内边距及换行；位于 DataTable 集成筛选区时保持连续表面，不重复套卡片 |
| 列表页签与操作 | 页签放 `toolbar-start` 并加 `workbench-list-tabs`，按钮保留原操作插槽；标准主表统一 48px 最小工具栏、32px 控件，无需销量页专属紧凑类。保留自动换行与键盘切换，嵌套表格、详情和弹框不继承该布局 |
| 只有查询工具栏 | 外层 `div.workbench-toolbar` 包裹 DataTable，保留组件原有工具栏和筛选排列 |
| 原生页签与输入 | 页签父级 `workbench-tabs`，保留按钮的 `aria-pressed` 和点击事件；原生输入使用 `workbench-input`，页面只保留业务宽度 |
| 阶段节点 | `workbench-step`、`workbench-step-index`，从已确认的 `data-state` 选择状态，不从任务名或阶段顺序推断完成 |
| 证据内容 | 容器 `workbench-evidence`；已有 `density-table` 保留行密度 |
| 详情与表单 | 显式主题根保留原密度类，已有 `density-detail-*`、`density-fields`、`density-descriptions`、`density-form`、`density-form-section` 适配中性外观；字段列数、字号、业务色、校验及尺寸保持原契约 |
| 抽屉 | 实际根使用 `admin-density-drawer admin-workbench is-drawer`，保留原有详情／编辑 modifier、方向、宽度、贴边形态和正文滚动 |
| 白色品牌资源底座 | `workbench-brand-mark` 提供蓝底与公共圆角；图片比例、容器宽高由实际布局决定，不替换品牌图形 |
| 辅助色 | 元素增加 `workbench-tone`，按需选择 `data-tone="blue|teal|green|purple|amber|rose"`；语义胶囊可加 `workbench-badge is-toned` |
DataTable 的属性透传目标是内部表格，不能只把 `workbench-table` 加到组件上就认为外框已接入。默认与 integrated 模式各保留原密度，不能为了外观切换模式。Teleport 弹框必须自身带 `admin-workbench is-dialog`，页面祖先不能替代；同时保留 `admin-density-dialog`、全屏、关闭、重开和正文滚动规则。抽屉使用 `is-drawer`，不能套用弹窗类改变承载。
业务页只保留列数、排列、业务宽度与高度；接入公共类后删除被接管的私有配色、边框和标题外观，不能保留两套 CSS 再叠加优先级或 `!important`。共享组件应明确接入模式并核对实际调用者，避免影响尚未推广的页面。
### 弹框与抽屉的布局边界
新增、编辑先参考公共 `AppDialog`／`AppDrawer`，表单字段排列仍参考本业务已确认的样板。客户新增／编辑使用三列短字段，地址、备注和长内容跨列；小型确认框保留原宽度。智能装柜等工作台保留原有宽版和 92vh 高度，不把所有浮层压成同一尺寸。
- 标题、正文和页脚样式只匹配当前浮层的直接子节点；业务页的 `:deep` 规则也必须限定自身，不能通过任意后代选择器影响子弹框。
- 不假设 `AppDialog` 默认一定挂到 body。嵌在另一个弹框、工具栏或有裁切的容器中的独立浮层，应明确设置 `append-to-body`，并把主题类放到实际浮层根。核对关闭、重开、全屏和取消仅影响对应窗口。
- 标题与底部操作不随长正文滚走，正文使用单一纵向滚动区；真实宽表可在自己的区域横向滚动。不要通过整框 `overflow: hidden`、固定短高度或隐藏按钮解决溢出。
- 底部多按钮可换行且保持间距；已有复合底栏（统计、分页、提交等）保留自身布局，不强制改成一排普通按钮。工具栏的紧凑按钮尺寸不得传入浮层。
- 工具栏只控制自身操作按钮及已核实的包装层，遇到浮层、弹出菜单或内嵌 DataTable 就结束作用范围；保留按钮组与下拉按钮，不能为隔离而使已有操作失去样式。
- 长校验错误应占据正常布局空间，不能遮住下一行；长文件名允许换行，文件选择、上传和删除按钮保持可用宽度。必填标识、字段标签、错误和提交反馈不为清爽而删除。
公共选择器修复至少覆盖真实 Element 挂载下的非 Teleport 嵌套、显式 Teleport、工具栏内浮层及全屏重开。组件测试可证明 DOM、状态与部分 CSS 作用域，不能证明浏览器像素布局或实际滚动已经验收；最终仍由用户在 1920×1080、100% 缩放下截图确认。
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#作用域与嵌套)。
## 图表与数据表达
Canvas 图表显式导入 `adminWorkbenchChartTheme`，在 option 构建处组合字体、轴标签、网格、颜色与 tooltip；不注册全局 ECharts 主题。业务 option 入口分别为 [`skuTrendChart.ts`](../../apps/admin-web/src/modules/self-operated/skuTrendChart.ts)、[`dashboardChartOptions.ts`](../../apps/admin-web/src/modules/self-operated/dashboardChartOptions.ts)、[`turnoverPresentation.ts`](../../apps/admin-web/src/modules/self-operated/turnoverPresentation.ts)。
- 趋势使用蓝色直线和轻面积。只有连续完整数据段可以填充，未知与缺失日期继续断线，未完整日继续以虚线／空心点表达。
- 柱图使用圆角、真实数值尺度和清晰单位；未知分类用灰色并显示文字，不把缺失量补成零。排名、tooltip 内容、精度和点击业务键由业务模块负责。
- 进度环只表达当前已知阶段；总量未知、分母为零或数量异常时保留未知状态。待机不等于全部完成，当前阶段 100% 不代表报表已发布。
- 普通、加载、空数据、错误和部分数据都保留已有语义。减少装饰不能删掉覆盖不足、过期、权限或操作阻断提示。
- 图表面积按用途选择。库存周转保留 360px 面板及内部伸缩画布，不机械套用固定画布类；体积图保留右侧数值标签空间。长标签、长数字及单位不得挤出可视区域。
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#图表与数据表达)。
## 本轮截图收尾约定
下列约定用于本轮样板收尾，也供后续页面逐项核对：
| 检查点 | 约定 |
|---|---|
| 数字格式 | 同一类指标统一千分位，例如 `31,279`、`192,445`；保持原有业务小数精度、单位、零值与空值语义，不为排版缩写成“万”或先舍入再计算 |
| 筛选含义 | 提示词包含筛选对象；货主输入明确“货主名称或编码”，关注／样本条件标明类别，不能用多个无上下文的“全部” |
| 运行状态 | 主状态、阶段状态与等待原因使用一致事实；采集关闭且存在保留进度时应明确已关闭／暂停与保留进度，不能同时给出容易被理解为正在续采的提示。关闭状态不改变进度数值，也不伪造恢复安排 |
| 数据状态 | “采集完整”和“修订核对状态未知”属于不同维度，保持各自含义；可调整措辞和层级，不能为美观隐藏未知 |
| 说明与重复提示 | 正常完整性、公共口径在分区统一表达，详细解释收至说明入口；同一异常保留一个清晰入口，不在各卡片重复长提示，也不添加装饰性副标题 |
| 库存分析样板 | 快照解释、本仓概览／截至／采集时间及图表范围说明进入已有说明；正常卡片仅名称、数值、单位，删除“已确认”；图表操作并入顶部，不保留独立“展开图表”说明行。来源和估算细节按需查看，估算属性仍须可辨认，未知／陈旧／异常保留短提示 |
| 留白 | 普通指标卡最小高度统一为 186px；主列表统一 48px 最小顶部操作栏、上下 6px、左右 12px，筛选上下 8px，避免页签和筛选重复缩进。收紧排行榜标题下空白，保留足够图表面积及首屏可读性，不靠裁切说明或缩小正文实现 |
| 宽表 | 横向查看时保留业务标识的对应关系；只读库存表可固定 SKU 首列。有操作列的业务列表仍按现行规则将操作放第一列、需要时固定左侧 |
| 操作措辞 | 按用户可理解的结果命名，例如“显示更多指标”；保留原按钮行为、权限与禁用条件 |
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#实现与验收)。
## 后续推广顺序与验收
1. 使用测试环境的自营页面和本规范作为已固化的风格基线；后续按用户确定的任务范围分批改造。每个模块独立保留人工截图结论，样板发布授权不自动扩展为后续批次的发布授权。
2. 进入目标模块，按实际导航、路由和操作列出列表、独立详情、编辑、弹窗、抽屉及预览入口，更新该模块现有逐操作矩阵。只维护一份实施记录，不另建全端进度副本。
3. 从上方五类样板选择结构，显式接入公共样式；保留业务字段、统计口径、客户隔离、权限、API、筛选和页面承载。标准列表保留紧凑密度，不复制总览的大指标卡。
4. 扩展公共样式时回归真实消费者，更新 `adminWorkbench.test.ts` 与相关密度合同。受影响测试、类型检查、全量测试和构建均通过仓库 `local-check.ps1` 门禁；修改 `AGENTS.md` 后另跑索引合同。自动检查与视觉结论分别记录。
5. 人工按 **1920×1080、浏览器缩放 100%** 核对独立打开／刷新、长标题与长数字、宽表、空态、部分数据、错误、只读／无权限、弹窗普通／全屏／重开。缺少截图的状态仍标记“待人工截图确认”，不因构建成功直接判定视觉通过。
自营样板不包含导航外壳；后续 Admin 推广由总控统一维护公共样式、共享组件和外壳，各业务任务按实际消费者逐模块接入。外壳参考 `AppLayout.vue`、`WorkspaceTabs.vue` 和 `shell.css`：白色顶栏、蓝色激活态、轻分隔线，现有白色 Logo 保留蓝底承载；折叠菜单和页签下拉单独声明 `popper-class` 主题范围。保留菜单尺寸、彩色图标、未保存标记、权限与页签行为，不能通过全局注入主题或替换所有 Element 默认样式跳过验收。Client、PDA 不在本轮推广范围。
折叠侧栏保留 76px 宽度，展开仍为 240px。菜单宽度随纵向滚动条占用后的实际可用空间伸缩，折叠触发器去掉重复横向 padding 和图标右边距并居中；侧栏只允许纵向滚动，悬浮子菜单继续 Teleport 到侧栏滚动区之外，不能为去掉横向滚动条而裁切子菜单。
现行依据：[Admin 高密度界面规范](../Admin高密度界面规范.md)、[Admin 和 Client 前端原型还原验收规则](../Admin-Client前端原型还原验收规则.md)。自营模块的当前承载和核对记录见 [`operation-matrix.md`](../../apps/admin-web/src/modules/self-operated/operation-matrix.md)。
已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#新模块接入规则)。
## 原始视觉参考