docs/界面参考/蓝白卡片式工作台风格参考.md

蓝白卡片式工作台风格参考

本文件是 Admin 蓝白样板的视觉与接入入口。风格为：白色主体、明亮蓝色强调、浅色图标底座、轻边框圆角卡片、清晰的数字层级。首屏保持清爽，页面先按用途选择样板，再组合公共样式，保留自身的业务信息和操作。

2026-10-20，用户选择自营经营总览制作样板，随后扩展到销量分析、库存分析和数据采集，包括共用的 SKU 趋势、图表证据弹窗；提供实际截图完成收尾，并授权更新 Admin 测试环境。用户随后要求正式固化该风格：后续 Admin 页面以这套蓝白、清爽、少提示文字的样板为改版基线，按页面类型复用公共样式。 各页面的实际视觉仍以人工截图为准；规范固化不代表全端已改造或验收通过。本文不记录部署成功或实施进度，任务范围与逐页结论回到对应模块现有逐操作矩阵。

其他页面该参考哪个样板

页面类型	参考入口	源码入口	复用内容与保留边界
经营总览、首页指标、数据摘要	经营总览 /self-operated/overview	OverviewView.vue、DashboardTrend.vue、DashboardBars.vue	页头操作、统计口径、分区标题、指标卡、趋势和排行榜；按实际指标数量组织，六列指标、2:1 主图和三列榜单只属于该页
标准查询列表、业务台账	销量分析 /self-operated/sales	SalesView.vue → AnalyticsView.vue	浅色筛选区、列表外壳、主次按钮、表头与悬停态、分页；保留行密度、筛选条件、权限和操作列，不增加大指标卡
有分类／状态页签的业务列表	整柜业务、排车列表	DomesticContainersView.vue、DispatchesView.vue	顶部左侧分类页签、右侧操作共用一行，随后为筛选和表格；排车审核子分区保留真实层级
复杂分析、指标加宽表、多视图查询	库存分析 /self-operated/inventory，分别看“库存周转”和“库存明细”	InventoryView.vue → InventoryTurnoverView.vue／AnalyticsView.vue	视图页签、两组紧凑指标、可展开图表、宽表和关注条件；保留业务列宽、横向查看、固定业务标识及筛选作用范围
采集、同步、批处理等运行看板	数据采集 /self-operated/collection	CollectionView.vue → CollectionAccountMonitor.vue、CollectionTaskProgress.vue、CollectionProgressGauge.vue	主状态、当前阶段进度环、数量卡、右侧后续安排、阶段流程与各仓结果；进度与发布结果分开表达，不复制该模块的任务状态机
SKU 趋势、图表明细和证据浮层	在上述页面点击已有趋势／明细入口	SkuTrend.vue、ChartDetailsDialog.vue，调用方见前三类页面	独立主题根、蓝白图表、说明与证据表；保留普通／全屏、关闭重开、正文滚动、原尺寸和数据重置行为

新增、编辑、审核表单与独立详情继续从 Admin 高密度界面规范 的对应规则进入。蓝白样板提供外观，不能据此把表单改成指标卡、把抽屉改成弹窗，或改动字段分组与提交入口。打印标签、PDF、装柜模型和图纸保留业务所需尺寸。

样板用于参考结构与公共类；其他业务模块不得直接引用自营模块的内部页面或组件。真正跨模块复用的稳定能力，应沿现有 Admin 公共层扩展。

视觉基线与维护入口

维护内容	唯一实现入口
DOM 配色、字号、间距、圆角、阴影与辅助色	adminWorkbenchTokens.css
标题、指标卡、列表外壳、页签、阶段、图表空态与弹窗外观	adminWorkbench.css
Canvas 图表字体、颜色、坐标网格与提示框主题	adminWorkbenchChartTheme.ts
显式接入范围、变量归属、公共类与浮层作用域合同	adminWorkbench.test.ts
原有表格、控件和弹窗密度	adminDensityTokens.css、adminDensity.css
弹框与抽屉的标题、正文滚动和底部操作	AppDialog.vue、AppDrawer.vue；真实 Element 挂载回归见 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；内容多时自然换行，不截断或固定总高度
文字层级	页标题 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，页面不再额外增加左右偏移；表格单元格仍由原密度规范管理。

信息层级与渐进披露

页面常驻内容以关键标题、数值、简短状态和操作为主。老板已明确不希望页面堆满提示文字；以下规则用于组织实际业务信息，不能把本规范逐条搬成页面说明。

• 详细口径按需展开。 计算公式、统计口径、图例、来源解释和操作说明放入已有说明入口或 InlineHelp／tooltip，支持键盘聚焦；不为每张卡增加介绍段、装饰性副标题或长解释。确需影响判断的周期、单位和版本保留最短必要表达。
• 同一事实只讲一次。 多张卡共用的统计周期、完整性或来源在分区层级统一表达；卡片仅显示自身特有状态。主状态、进度环、数量卡与阶段节点不重复整段等待原因。
• 异常优先合并到一个清晰入口。 同一异常影响多块内容时，在相关区域保留一条简短状态与查看详情／重试入口；不要在每张卡和图表下重复警告。独立异常仍在对应位置明确呈现，不能合并后丢失作用范围。
• 关键异常与阻断常驻。 当前失败、未知、陈旧、权限不足、操作阻断及危险后果必须能直接识别；细节可以展开，关键状态不能只藏进 tooltip。正常完整状态不需要逐卡反复宣告。
• 事实与视觉分开。 0 表示已知零值，— 或“待确认”表示未知；历史结果和陈旧快照要有简短标识。精简文案不得把未知显示为零、把暂停显示为完成，也不得隐藏真实风险。

库存分析样板按这套规则收敛：快照解释、“本仓概览／截至日期／采集时间”整行及图表范围说明移入已有说明入口；正常指标卡只保留名称、数值和单位，删除重复的“已确认”。真实未知、陈旧和异常继续显示简短提示。删除独占一行的“展开图表”，将图表操作并入顶部简短入口。完整数值来源、采集时点和估算细节可在说明或 tooltip 中查看；估算值必须能辨认其估算属性，不得因精简文案冒充实测值。

公共样式接入

页面直接导入 @/styles/adminWorkbench.css，保留原有密度入口，并在实际页面根容器增加 admin-workbench。不依赖先打开样板页后残留的 CSS，不将主题放入全局入口，不修改 :root。导航、顶栏、页签由总控在各自容器显式接入，不给包含业务页面的 .app-shell 或 .app-main 添加主题类；业务页和 Teleport 浮层仍须自己接入。

<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

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% 缩放下截图确认。

图表与数据表达

Canvas 图表显式导入 adminWorkbenchChartTheme，在 option 构建处组合字体、轴标签、网格、颜色与 tooltip；不注册全局 ECharts 主题。业务 option 入口分别为 skuTrendChart.ts、dashboardChartOptions.ts、turnoverPresentation.ts。

• 趋势使用蓝色直线和轻面积。只有连续完整数据段可以填充，未知与缺失日期继续断线，未完整日继续以虚线／空心点表达。
• 柱图使用圆角、真实数值尺度和清晰单位；未知分类用灰色并显示文字，不把缺失量补成零。排名、tooltip 内容、精度和点击业务键由业务模块负责。
• 进度环只表达当前已知阶段；总量未知、分母为零或数量异常时保留未知状态。待机不等于全部完成，当前阶段 100% 不代表报表已发布。
• 普通、加载、空数据、错误和部分数据都保留已有语义。减少装饰不能删掉覆盖不足、过期、权限或操作阻断提示。
• 图表面积按用途选择。库存周转保留 360px 面板及内部伸缩画布，不机械套用固定画布类；体积图保留右侧数值标签空间。长标签、长数字及单位不得挤出可视区域。

本轮截图收尾约定

下列约定用于本轮样板收尾，也供后续页面逐项核对：

检查点	约定
数字格式	同一类指标统一千分位，例如 31,279、192,445；保持原有业务小数精度、单位、零值与空值语义，不为排版缩写成“万”或先舍入再计算
筛选含义	提示词包含筛选对象；货主输入明确“货主名称或编码”，关注／样本条件标明类别，不能用多个无上下文的“全部”
运行状态	主状态、阶段状态与等待原因使用一致事实；采集关闭且存在保留进度时应明确已关闭／暂停与保留进度，不能同时给出容易被理解为正在续采的提示。关闭状态不改变进度数值，也不伪造恢复安排
数据状态	“采集完整”和“修订核对状态未知”属于不同维度，保持各自含义；可调整措辞和层级，不能为美观隐藏未知
说明与重复提示	正常完整性、公共口径在分区统一表达，详细解释收至说明入口；同一异常保留一个清晰入口，不在各卡片重复长提示，也不添加装饰性副标题
库存分析样板	快照解释、本仓概览／截至／采集时间及图表范围说明进入已有说明；正常卡片仅名称、数值、单位，删除“已确认”；图表操作并入顶部，不保留独立“展开图表”说明行。来源和估算细节按需查看，估算属性仍须可辨认，未知／陈旧／异常保留短提示
留白	普通指标卡最小高度统一为 186px；主列表统一 48px 最小顶部操作栏、上下 6px、左右 12px，筛选上下 8px，避免页签和筛选重复缩进。收紧排行榜标题下空白，保留足够图表面积及首屏可读性，不靠裁切说明或缩小正文实现
宽表	横向查看时保留业务标识的对应关系；只读库存表可固定 SKU 首列。有操作列的业务列表仍按现行规则将操作放第一列、需要时固定左侧
操作措辞	按用户可理解的结果命名，例如“显示更多指标”；保留原按钮行为、权限与禁用条件

后续推广顺序与验收

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 和 Client 前端原型还原验收规则。自营模块的当前承载和核对记录见 operation-matrix.md。

原始视觉参考

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