优化
This commit is contained in:
@@ -3,14 +3,14 @@
|
||||
## 适用范围
|
||||
|
||||
- 本文件适用于 `src/shared/components/` 及其直接测试。业务页面使用这些组件时,同时遵守 `../../../AGENTS.md` 和 `../../../../../docs/Admin-Client前端原型还原验收规则.md`。
|
||||
- 这里只放与具体业务无关、已被多个模块真实复用的后台组件;纯业务字段、状态和流程留在所属模块。
|
||||
- 这里只放与具体业务无关、已被多个模块真实复用的后台组件;纯业务字段、状态和流程留在所属模块。样式唯一入口为 [Admin 界面规范](../../../../../docs/Admin高密度界面规范.md#按任务阅读),本指引只补充组件组合与调用约束。
|
||||
|
||||
## 标准列表组合
|
||||
|
||||
- 标准列表使用 `ListPageLayout` 组织查询区和表格区,保持单一 `16px` 间距;不叠加页面级空白操作区或重复面板间距。
|
||||
- 查询与筛选使用 `QueryToolbar.vue`,通过 `fields`、`v-model`、`search`、`reset` 接入;查询即刷新当前结果,不另设独立刷新按钮。
|
||||
- 数据列表使用 `DataTable.vue`,通过 `columns`、命名插槽、`v-model:page`、`v-model:page-size` 和 `total` 接入,不重复拼装 `el-table` 与分页器。
|
||||
- “操作”列放在第一列,需要固定时固定在左侧。单行操作不超过 3 个时直接显示“图标 + 文案”;第 4 个起使用 `MoreHorizontal` 菜单,并优先直接保留详情、编辑、下载等高频操作。
|
||||
- “操作”列放在第一列,需要固定时固定在左侧。单行操作不超过 3 个时直接显示纯文字动作;第 4 个起使用 `MoreHorizontal` 菜单,并优先直接保留详情、编辑、下载等高频操作。
|
||||
- 列表操作统一使用 `RowActions.vue`:默认直接展示 3 个,通过 `priority` 决定高频或关键操作的展示资格,其余自动进入带可访问名称的“更多”菜单;权限和状态由业务页面生成 `actions` 时决定,组件不推导业务资格。
|
||||
- 新增、导入、导出和批量操作放入 `DataTable` 的 `toolbar-actions`;不放入查询栏,不用 `toolbar-start` 重复列表标题、数量或说明,数量统一放在 `pagination-left`。
|
||||
- 路由标题和说明默认由 `AppLayout` 的 `page-heading` 根据路由元数据展示;标准列表正文不重复标题。只有明确关闭路由页头的详情页或工作台才自带独立页头。
|
||||
@@ -28,6 +28,7 @@
|
||||
- 原型已定义图标时复用原型资源;原型未定义时使用 Lucide:查看 `Eye`、编辑 `Pencil`、更多 `MoreHorizontal`、新增 `Plus`、删除 `Trash2`、启停 `Power`、刷新 `RefreshCw`、导入 `FileUp`、导出/下载 `Download`、返回 `ArrowLeft`、保存 `Save`、复制 `Copy`。
|
||||
- 危险操作保留明确文案、危险色、确认过程和成功/失败反馈,不只显示图标。
|
||||
- 组件按适用语义覆盖加载、空数据、错误、禁用和无权限状态;保留键盘操作、可见焦点、表单标签、图标按钮名称和颜色对比度,不只用颜色表达状态。
|
||||
- 加载反馈遵循 [提示文字与加载布局](../../../../../docs/Admin高密度界面规范.md#提示文字与加载布局),上述状态覆盖要求不授权新增独立提示小字或造成布局跳动。
|
||||
|
||||
## 修改与验证
|
||||
|
||||
|
||||
Reference in New Issue
Block a user