优化
This commit is contained in:
+53
-4
@@ -6,6 +6,8 @@
|
||||
|
||||
本规范固定该样板的视觉与密度规则。验收视口为 **1920×1080，浏览器缩放 100%**。其他页面采用本规范不等于其功能或视觉已验收。
|
||||
|
||||
这是一套后续 Admin 页面可复用的基线。新增菜单按“新模块接入规则”实施，不复制订单或客户模块 CSS；货柜管理的入口与共享组件边界见 [货柜管理核对记录](Admin货柜管理样式核对记录.md)。列入下一批入口不代表页面已完成改造或验收。
|
||||
|
||||
当前推广范围包括 Admin 导航中的“国内仓”，以及本轮确认的“客户管理”两个入口：客户列表、海外仓阶梯费用，包含各入口实际使用的详情、页签、新增、编辑、审核、确认、图片/文件预览和其他业务弹框。客户管理下的海外仓阶梯费用属于客户费用配置，不扩大到海外仓作业菜单。跨菜单跳转应记录目标入口和共享组件影响；不因此把另一个菜单的全部页面自动加入改造范围。Client、PDA 与其他菜单采用规范时另行明确范围。
|
||||
|
||||
样板实现入口：
|
||||
@@ -61,11 +63,11 @@
|
||||
### 列表
|
||||
|
||||
- 继续使用 `ListPageLayout + QueryToolbar + DataTable`。查询、批量操作、表格、分页构成连续工作区，不重复放置正文大标题或统计卡片。
|
||||
- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；保留页面已确认的直接操作数量。订单列表和客户管理采用下述纯文字按钮，其他已接入页面沿用原按钮约定。危险动作保留明确文字与确认。
|
||||
- “操作”列始终第一列，需要固定时固定在左侧。最多三个高频操作直接显示，更多操作使用已有菜单约定；保留页面已确认的直接操作数量。国内仓全部 7 个菜单及客户管理的行内业务操作采用下述纯文字描边按钮。危险动作保留明确文字与确认。
|
||||
- 列宽按实际编号、状态和按钮数量决定；不能把样板的 260px 操作列套给所有列表。核对最多按钮、加载中和权限变化后的布局。
|
||||
- 数值列右对齐，单位优先放表头；编号按业务需要设置宽度。保留横向滚动、列偏好、分页和已有行内编辑能力。
|
||||
|
||||
#### 订单列表行内按钮（人工验收调整）
|
||||
#### 国内仓行内按钮（以订单列表样板统一）
|
||||
|
||||
依据用户提供的白底描边按钮参考图，订单列表行内操作采用纯文字、白底、1px 细边框，无阴影，圆角 6px；保持 28px 高、13px 字号、600 字重、左右内边距 10px、按钮间距 6px。该按钮圆角为明确例外，普通内容容器仍为 0–4px。
|
||||
|
||||
@@ -74,7 +76,7 @@
|
||||
- 测量：紫色文字与浅紫边框。
|
||||
- 悬停使用对应浅色底，键盘焦点保持可见；禁用、处理中状态保留。更多入口统一为 `…`（Lucide `MoreHorizontal`），保留包含业务对象的“更多操作”悬停提示和可访问名称；下拉项纯文字。
|
||||
|
||||
本次仅接入订单列表行内操作。顶部查询/批量操作、弹框提交按钮与其他页面保持各自规则；不照搬参考图中的编辑、重置密码、跳转登录、删除等客户管理功能。
|
||||
该规则覆盖订单列表、订单测量、测量数据审核、预装清单、库位管理、托盘管理、整柜业务以及其详情中的行内操作。查看/编辑/备注为灰色，测量为紫色，审核为橙色，启用为绿色，停用/删除为红色。预装共用组件只在 `preload` 模式接入，已确认装柜清单模式保持原规则。顶部查询/新增/批量操作和弹框提交仍使用 32px 主次按钮，不机械改成行内按钮，也不增加样板中不存在的业务操作。
|
||||
|
||||
#### 客户管理按钮与详情
|
||||
|
||||
@@ -88,6 +90,7 @@
|
||||
### 详情与基本信息
|
||||
|
||||
- 第一行集中放返回、业务编号、核心状态及主要操作。下一行用可换行摘要展示关键上下文，不使用大数字概览卡。
|
||||
- 返回使用 `density-back` 轻量导航，与业务编号和状态排在同一行，保留箭头、文字、键盘焦点及原返回目标。该行并入连续白底详情区域，不为返回单独增加卡片或空白行；整柜库存的标题行与基本信息共用一个信息区。
|
||||
- 页签紧接摘要。页签已表达的标题不再在正文重复占用一大行；数量、更新时间与相关操作可放紧凑工具栏。
|
||||
- 短字段通常每行四组，长内容跨两组或整行。描述表标签浅灰、数值白底，边线连续；标签宽度以 112px 为样板参考，按字段实际长度调整。
|
||||
- 保留字段顺序和业务分组，不使用会改变阅读顺序的自动密集填空布局。
|
||||
@@ -133,7 +136,7 @@
|
||||
|
||||
图标只作辅助，保留文字标签；装饰图标设置 `aria-hidden="true"`。选中态通过文字色和底部横线表示，不把 Emoji 强制染成单色。采用系统彩色 Emoji 字体，不引入图片生成或外部图标下载依赖。
|
||||
|
||||
彩色图标用于详情页签。业务操作按钮按各页已确认规则执行：订单列表行内按钮与客户管理使用纯文字；其他入口可保留既有 Lucide 图标。不要给操作按钮、表头或字段添加 Emoji。
|
||||
彩色图标用于详情页签。国内仓 7 个菜单的行内按钮与客户管理业务操作使用纯文字；返回箭头、顶部与弹框的既有功能图标可保留。不要给操作按钮、表头或字段添加 Emoji。
|
||||
|
||||
## 国内仓推广清单与顺序
|
||||
|
||||
@@ -179,6 +182,7 @@
|
||||
| 表格行高、输入高度、操作按钮高度、页签高度 | `--admin-row-height`、`--admin-control-height`、`--admin-action-height`、`--admin-tab-height` | 使用已有公共组件和公共类 |
|
||||
| 常用间距、圆角、普通数据区底色 | `--admin-space-*`、`--admin-radius`、`--admin-surface` 等 | 业务布局引用变量；不可在页面重定义变量默认值 |
|
||||
| 描边按钮外观、悬停/禁用/焦点状态 | `adminDensity.css` 的 `.density-action` | 只选择 `data-tone` 与业务事件 |
|
||||
| 详情返回导航 | `.density-back` | 使用 `link`，保留返回事件和可访问名称；客户管理按纯文字约定保留返回文字 |
|
||||
| 详情页签及彩色图标 | `.density-tabs`、`.density-tab-icon` | 保留标签、键盘事件和激活态；只配置业务内容 |
|
||||
| 连续信息表边框、标签底色、文字与内边距 | `.density-fields` | 只配置列数、跨列、字段顺序；特殊标签宽度使用局部 `--admin-field-label-width` |
|
||||
| 弹框/抽屉标题、正文滚动、底部间距 | `.admin-density-dialog` / `.admin-density-drawer` | 容器显式接入，保留该业务已确认宽度与作业高度 |
|
||||
@@ -200,6 +204,8 @@
|
||||
|
||||
`data-tone` 可用 `neutral`（默认）、`warning`、`purple`、`primary`、`success`、`danger`。每个页面仍按已确认的动作配色表选择；纯文字与图标策略不由 CSS 猜测。按钮组使用 `density-actions` 统一间距，业务布局可决定是否换行。
|
||||
|
||||
`density-actions` 使用 `gap` 管理间距，并将 `--cc-list-action-sibling-margin` 设为 0；`DataTable` 通过该变量保留未接入按钮的默认 8px 左边距。不得将两份间距叠加，也不以更强选择器在页面逐个覆盖。
|
||||
|
||||
### 防止维护退化
|
||||
|
||||
1. **同一通用外观只有一个实现。** 已由公共类接管的按钮配色、页签高度、信息表边框或弹框内边距，删除原页面声明，不能保留两套后再增加优先级或 `!important`。
|
||||
@@ -209,3 +215,46 @@
|
||||
5. **共用组件保留未接入消费者。** CSS 变量的兜底值用于独立渲染和未接入入口；两个已接入模块始终由公共变量决定实际值，兜底值不是第二份密度配置。打印标签、PDF 尺寸、原图、画布和既有窄屏规则不能机械替换。
|
||||
6. **公共调整按消费者回归。** `adminDensity.test.ts` 维护明确的页面/组件清单，不扫描全部后台。检查模板中公共按钮、页签和信息表的真实祖先是否带有密度入口，不能仅断言文件导入了 CSS 或出现过密度类；页面弹框带有 `admin-density-dialog` 不代表列表与详情已接入。新增接入时同步清单及逐操作矩阵，运行合同、受影响测试、类型检查、全量测试和构建。
|
||||
7. **视觉与代码分开记录。** 本轮默认人工截图；代码通过不等于视觉验收通过。已确认业务宽度和工作区高度可以保留为例外，例外写入核对记录。
|
||||
|
||||
## 新模块接入规则
|
||||
|
||||
### 先确定范围，再选择公共能力
|
||||
|
||||
1. 用导航与实际路由列出全部菜单入口，以及新建、详情、编辑和深链页面；不能把文件夹数量当作页面覆盖数。为每个页面沿实际组件引用列出弹框、抽屉、消息确认、预览与打印入口，按逐操作矩阵记录承载方式。
|
||||
2. 默认复用普通表格 36px 行高、正文 13px、辅助文字 12px、行内描边按钮 28px、页签 38px、轻量返回和连续信息表。新模块的行内业务操作默认纯文字；顶部/提交保留 32px 主次按钮。动作语义色沿用本规范，不通过按钮文字自动猜测。
|
||||
3. 模块只保留业务列宽、字段跨列、布局与图纸尺寸等参数。`density-fields` 的四列是默认值，不是固定业务要求；返回位置与大弹框尺寸也不能从订单整页复制。
|
||||
4. 编辑表格、流程图、装柜模型、图片、标签和 PDF 保留业务所需面积；模型画布和打印尺寸不套普通行高。空态、错误、长内容、处理中、只读和无权限仍要可用。
|
||||
|
||||
### 完整接入示例
|
||||
|
||||
下面展示已有页面的接入结构，`rows`、`columns`、事件与表单仍使用该页面原实现。页面脚本直接导入 `@/styles/adminDensity.css`，不依赖先进入其他菜单后残留的样式，也不把这份 CSS 放入 `scoped` 样式块。
|
||||
|
||||
```vue
|
||||
<AdminPage class="admin-density">
|
||||
<ListPageLayout>
|
||||
<DataTable :data="rows" :columns="columns">
|
||||
<template #actions="{ row }">
|
||||
<div class="density-actions">
|
||||
<el-button class="density-action" @click="openDetail(row)">详情</el-button>
|
||||
<el-button class="density-action" data-tone="warning" @click="review(row)">审核</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</ListPageLayout>
|
||||
<AppDialog class="admin-density-dialog" v-model="editorOpen" title="编辑资料">
|
||||
<!-- 原有业务表单 -->
|
||||
</AppDialog>
|
||||
</AdminPage>
|
||||
```
|
||||
|
||||
此结构只说明样式接入，不授权新增审核等业务动作。详情复用页面根节点的 `admin-density`；原生详情页签用 `density-tabs` / `density-tab-icon`，连续信息表用 `density-fields`。返回按钮使用 `link class="density-back"`，跟编号、状态排在同一行。
|
||||
|
||||
Teleport 弹框用 `admin-density-dialog`，抽屉框架用 `admin-density-drawer`，`ElMessageBox` 用 `customClass: 'admin-density-confirm'`；这些浮层必须各自声明，页面祖先不能替代。抽屉当前公共框架负责字号、标题和正文边距；其正文若复用页面级表格、信息表或按钮原语，在正文业务根节点显式接入 `admin-density`。不要把名为 Drawer 的嵌入组件当作实际抽屉，承载方式以模板和调用端为准。
|
||||
|
||||
### 共享组件与检查的扩展
|
||||
|
||||
- 对每个共享组件列出真实调用方及模式。现有 `dense` 参数由调用入口显式传递；`mode` / `workbench` 属于业务范围，不能为了样式变更其含义。新增消费者后，对开启和关闭密度、国内和海外等实际模式分别回归。
|
||||
- `adminDensity.test.ts` 中菜单清单、`densityPages`、`consumers`、`moduleCss` 分别覆盖导航、独立入口、子组件和模块 CSS。接入时补充受影响清单，不移除国内仓和客户管理基线，也不通过递归扫描全后台推导范围。
|
||||
- 动态类检查目前显式执行预装/已确认两种模式。接入其他条件时补充真实上下文和对应开关用例，不能一律传 `preload`、强行把所有条件置真，或只断言出现过类名。
|
||||
- 检查必须同时覆盖 CSS 独立导入、公共原语的实际祖先、Teleport 容器自己的类、变量定义与消费、按钮间距、普通/悬停/焦点/禁用，以及原有业务行为。源码合同只防止已知结构退化，不能证明最终 CSS 优先级或布局视觉正确。
|
||||
- 发布前的代码门禁为密度合同、受影响业务测试、类型检查、全量测试和构建；维护指引后运行 AGENTS 索引合同。人工按 1920×1080、100% 缩放检查独立打开/刷新、列表到详情、浮层普通/全屏/重开、长数据和权限状态。缺少对应截图时保留“待人工截图确认”。
|
||||
|
||||
Reference in New Issue
Block a user