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

类型定义

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

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）。无需修改全局样式。

改造范围

仅新建组件。不改造现有页面（后续按需逐步替换）。

2026-05-26-action-column-design.md 2.5 KB Kalıcı Bağlantı Geçmiş Ham