# iMeeting 按钮统一规范

## 目标

统一平台内业务操作按钮的视觉语言、尺寸层级和使用方式，避免同一场景中出现不同形态的编辑、删除、查看、复制等操作按钮。

当前平台按钮分为两套标准：

1. 业务操作按钮：统一通过 [ActionButton](/Users/jiliu/工作/projects/imeeting/frontend/src/components/ActionButton.jsx) 承载。
2. 表单操作条按钮：统一使用 Ant Design `Button` 家族，不与 `ActionButton` 混用。

## 设计原则

1. 语义和尺寸分离。
语义只表达动作类型，例如查看、编辑、删除；尺寸只表达场景层级，例如列表操作、面板次级操作。

2. 同一场景只选一种尺寸档。
不要在同一条记录、同一个卡片头部、同一个面板操作区里混用大图标、小图标、大文字、小文字。

3. 删除按钮只保留颜色差异。
删除按钮和其它按钮使用同一套圆角、边框、阴影和尺寸，不再使用额外的危险态造型。

4. 业务操作、表单操作、功能控件分开。
- 业务操作统一走 `ActionButton`
- 表单操作条统一走标准 `Button`
- 编辑器工具栏、播放器控制等功能控件不强行复用这套规范

5. 同一操作条内外框语言必须一致。
如果一组按钮里已经采用普通 `Button`，就不要混入胶囊式 `ActionButton`；如果一组按钮采用 `ActionButton`，就不要再塞入默认 `Button`。

## 标准尺寸

### 1. 带文字（大）

- 组件参数：`variant="textLg"`
- 典型场景：面板内次级操作、详情弹窗中的补充动作、信息面板中的“下载结果 / 复制链接 / 编辑当前菜单”
- 示例：`编辑`、`删除`、`下载转录结果 (JSON)`、`复制链接`

### 2. 带文字（小）

- 组件参数：`variant="textSm"`
- 典型场景：卡片头部轻量动作、模块内局部切换动作
- 示例：`标签`、`编辑`、`查看详情`、`清空已选`

### 3. 仅图标（大）

- 组件参数：`variant="iconLg"`
- 典型场景：输入框组合控件右侧操作、需要更高点击面的紧凑操作
- 示例：分享密码区的 `复制 / 保存`

### 4. 仅图标（小）

- 组件参数：`variant="iconSm"`
- 典型场景：列表行操作、卡片角落操作、悬浮于内容边缘的轻量动作
- 示例：`编辑 / 删除 / 查看 / 同步 / 更多`

## 标准语义

### `tone="view"`

- 用于查看、打开、复制、下载、预览
- 颜色语义：蓝色系

### `tone="neutral"`

- 用于更多、清空、重置筛选、非强调型辅助动作
- 颜色语义：中性色

### `tone="edit"`

- 用于编辑、设置、修改
- 颜色语义：蓝色系，与查看同体系但文义偏编辑

### `tone="accent"`

- 用于需要强调但非危险的特殊动作
- 颜色语义：强调色
- 当前典型场景：`重置密码`

### `tone="delete"`

- 用于删除、移除、关闭会话等不可逆动作
- 颜色语义：红色系

## 场景映射

### 列表行操作

- 一律使用 `iconSm`
- 常见组合：`编辑 / 删除`、`查看 / 编辑 / 删除`
- 示例页面：
  - 热词管理
  - 用户管理
  - 参数管理
  - 模型管理
  - 客户端管理
  - 外部应用管理

### 卡片角落操作

- 一律使用 `iconSm`
- 常见组合：`编辑 / 删除`、`更多`
- 示例页面：
  - 会议中心卡片
  - 时间线卡片
  - 知识库左侧列表

### 卡片或模块头部的轻量动作

- 一律使用 `textSm`
- 常见组合：`标签`、`编辑`、`查看详情`

### 面板或 Drawer 的次级操作

- 一律使用 `textLg`
- 常见组合：`编辑`、`删除`、`复制链接`、`下载转录结果`

### 表单操作条

- 一律使用标准 `Button`
- 常见组合：`删除 / 取消 / 保存`
- 视觉规范：
  - `删除`：`className="btn-soft-red"`
  - `取消`：默认 `Button`
  - `保存`：`type="primary"`
- 说明：
  - 这类按钮属于提交与撤销控制，不使用 `ActionButton`
  - 同一条内不要出现 `ActionButton tone="delete"` 与普通 `Button` 并排

### 输入框附属操作

- 一律使用 `iconLg`
- 常见组合：输入框后缀的 `复制 / 保存`

## 禁止项

1. 不要在业务操作中直接裸用 `EditOutlined`、`DeleteOutlined` 作为可点击入口。

2. 不要在同一场景混用：
- `shape="circle"` 图标按钮
- 旧的 `btn-icon-soft-*`
- 默认 `danger` 样式按钮
- 新的 `ActionButton`
- 普通 `Button` 和 `ActionButton` 的不同外框语言

3. 不要为了“删除更危险”单独给删除按钮换不同形状、尺寸或阴影。

4. 不要在业务操作中继续手写 `Tooltip + Button + btn-text-* + btn-action-*`。
优先使用 `ActionButton`。

## 推荐写法

```jsx
import ActionButton from '../components/ActionButton';

<ActionButton
  tone="edit"
  variant="iconSm"
  tooltip="编辑"
  icon={<EditOutlined />}
  onClick={handleEdit}
/>
```

```jsx
<ActionButton
  tone="delete"
  variant="textLg"
  icon={<DeleteOutlined />}
  onClick={handleDelete}
>
  删除
</ActionButton>
```

```jsx
<ActionButton
  tone="view"
  variant="iconLg"
  tooltip="复制密码"
  icon={<CopyOutlined />}
  onClick={handleCopy}
/>
```

```jsx
<Space>
  <Button className="btn-soft-red" icon={<DeleteOutlined />} onClick={handleDelete}>
    删除
  </Button>
  <Button icon={<CloseOutlined />} onClick={handleCancel}>
    取消
  </Button>
  <Button type="primary" icon={<SaveOutlined />} onClick={handleSave}>
    保存
  </Button>
</Space>
```

## 落地约束

1. 新增按钮时，先判断是不是业务动作还是表单提交动作。
- 业务动作优先使用 `ActionButton`
- 表单操作条优先使用标准 `Button`

2. 新页面开发时，先确定场景，再选尺寸档。
不要先凭感觉挑样式。

3. 旧页面调整时，如果涉及编辑、删除、查看、更多、复制、下载等业务动作，顺手迁移到 `ActionButton`。

4. 如果删除按钮和取消、保存并排出现，优先按表单操作条处理，不要单独给删除套胶囊业务按钮。

## 现状说明

当前平台中的主要业务操作按钮已基本迁移到 `ActionButton`，主要表单操作条也开始统一为 `删除 / 取消 / 保存` 的标准按钮组合。

未纳入本规范的主要是两类控件：

- Markdown 编辑器工具栏按钮
- 会议详情中的音频工具栏按钮

这两类属于功能控件，不按业务操作按钮规范处理。