223 lines
6.3 KiB
Markdown
223 lines
6.3 KiB
Markdown
|
# 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 编辑器工具栏按钮
|
|||
|
|
- 会议详情中的音频工具栏按钮
|
|||
|
|
|
|||
|
|
这两类属于功能控件，不按业务操作按钮规范处理。
|