# 蓝白样板目录与原始视觉参考

本文件只供按页面类型查找样板和原始截图。**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) | 独立筛选区、列表外壳、主次按钮、表头与悬停态、分页；保留行密度、筛选条件、权限和操作列，不增加大指标卡 |
| 有分类／状态页签的业务列表 | **整柜业务**、**排车列表** | [`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)，调用方见前三类页面 | 独立主题根、蓝白图表、说明与证据表；保留普通／全屏、关闭重开、正文滚动、原尺寸和数据重置行为 |

样板只用于参考结构，不授权跨模块引用内部组件或改变业务字段、权限及承载方式。自营模块的逐操作与验收记录见 [operation-matrix.md](../../apps/admin-web/src/modules/self-operated/operation-matrix.md)。

## 视觉基线与维护入口

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#视觉基线与维护入口)。

## 信息层级与渐进披露

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#提示文字与加载布局)。

## 公共样式接入

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#公共样式接入)。

## 弹框与抽屉的布局边界

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#作用域与嵌套)。

## 图表与数据表达

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#图表与数据表达)。

## 本轮截图收尾约定

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#实现与验收)。

## 后续推广顺序与验收

已统一至 [Admin 界面规范对应章节](../Admin高密度界面规范.md#新模块接入规则)。

## 原始视觉参考

![用户提供的蓝白卡片式工作台参考](蓝白卡片式工作台参考.png)

原图为 2874×1468 像素，像素尺寸不等于浏览器 CSS 尺寸。参考的是配色、卡片层级和克制的装饰；AI 报告、搜索、图钉等原系统功能不属于本项目的新增需求。悬停、焦点、禁用、加载和错误交互沿用本项目规则，不从静态截图推断。