90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# ToolbarAction 组件设计
|
||
|
||
## 问题
|
||
|
||
web-admin 列表页操作列按钮过多（3-6 个），导致操作列宽度达 320-480px，挤压数据列空间。部分页面（如耗材管理）工具栏和操作列的按钮存在功能重复。
|
||
|
||
## 方案
|
||
|
||
取消操作列，所有操作按钮移到表格上方工具栏。用户通过勾选行来激活操作按钮，实现「选择 → 操作」的交互模式。
|
||
|
||
### 交互规则
|
||
|
||
| 选中状态 | 批量按钮（mode: batch） | 单行按钮（mode: single） |
|
||
|----------|------------------------|-------------------------|
|
||
| 0 行 | 禁用 | 禁用 |
|
||
| 1 行 | 可操作 | 可操作 |
|
||
| 多行 | 可操作 | 禁用 + tooltip「请选择单条记录」 |
|
||
|
||
### 行为细节
|
||
|
||
- 双击行 → 等同于「查看」（保留现有 `@row-dblclick` 模式）
|
||
- 勾选 0 行时：所有操作按钮 disabled
|
||
- 勾选 1 行时：所有按钮可用
|
||
- 勾选多行时：单行操作按钮 disabled + tooltip 提示
|
||
- 工具栏左对齐：「已选 N 项」→ 主操作按钮
|
||
|
||
## 组件 API
|
||
|
||
### 文件位置
|
||
|
||
```
|
||
src/components/common/toolbar-action/
|
||
index.vue
|
||
types.ts
|
||
```
|
||
|
||
### 类型定义
|
||
|
||
```ts
|
||
import type { Component } from 'vue'
|
||
|
||
export interface ToolbarActionItem {
|
||
label: string
|
||
icon?: Component
|
||
handler: (rows: any[]) => void
|
||
mode: 'batch' | 'single'
|
||
danger?: boolean
|
||
disabled?: boolean
|
||
visible?: boolean
|
||
}
|
||
```
|
||
|
||
### Props
|
||
|
||
```ts
|
||
interface Props {
|
||
selected: any[]
|
||
actions: ToolbarActionItem[]
|
||
}
|
||
```
|
||
|
||
### 行为
|
||
|
||
- 过滤 `visible !== false` 的 actions
|
||
- 根据 `selected.length` 和 `action.mode` 自动控制按钮 disabled 状态
|
||
- `danger=true` 的按钮使用 `btn-ghost` + `type="danger"` 样式
|
||
- `disabled=true` 的按钮始终禁用（调用方控制）
|
||
- 非 danger 按钮使用 `btn-ghost` 样式
|
||
|
||
### 样式
|
||
|
||
- 复用现有 `.btn-ghost` 按钮样式（已在 `el-ui.scss` 中定义）
|
||
- 不新增全局 CSS
|
||
- 组件 scoped 样式
|
||
|
||
### 不做的事
|
||
|
||
- 不处理权限（由调用方通过 `visible` 控制）
|
||
- 不处理 el-popconfirm（由调用方在 handler 中自行处理）
|
||
- 不做全局注册（按需 import）
|
||
- 不封装「新增」按钮（新增不属于行操作，由调用方自行放置）
|
||
|
||
## 全局样式调整
|
||
|
||
使用 ToolbarAction 组件的页面将移除操作列（`fixed="right"`），`el-ui.scss` 中现有 `min-width: 260px` 规则不再对这些页面生效（因为不再有 `.btn-op-item`）。无需修改全局样式。
|
||
|
||
## 改造范围
|
||
|
||
仅新建组件。不改造现有页面（后续按需逐步替换）。
|