6.3 KiB

Raw Blame History

iMeeting 按钮统一规范

目标

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

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

业务操作按钮：统一通过 ActionButton 承载。
表单操作条按钮：统一使用 Ant Design Button 家族，不与 ActionButton 混用。

设计原则

语义和尺寸分离。语义只表达动作类型，例如查看、编辑、删除；尺寸只表达场景层级，例如列表操作、面板次级操作。
同一场景只选一种尺寸档。不要在同一条记录、同一个卡片头部、同一个面板操作区里混用大图标、小图标、大文字、小文字。
删除按钮只保留颜色差异。删除按钮和其它按钮使用同一套圆角、边框、阴影和尺寸，不再使用额外的危险态造型。
业务操作、表单操作、功能控件分开。

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

同一操作条内外框语言必须一致。如果一组按钮里已经采用普通 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
常见组合：输入框后缀的 复制 / 保存

禁止项

不要在业务操作中直接裸用 EditOutlined、DeleteOutlined 作为可点击入口。
不要在同一场景混用：

shape="circle" 图标按钮
旧的 btn-icon-soft-*
默认 danger 样式按钮
新的 ActionButton
普通 Button 和 ActionButton 的不同外框语言

不要为了“删除更危险”单独给删除按钮换不同形状、尺寸或阴影。
不要在业务操作中继续手写 Tooltip + Button + btn-text-* + btn-action-*。优先使用 ActionButton。

推荐写法

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

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

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

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

<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>

落地约束

新增按钮时，先判断是不是业务动作还是表单提交动作。

业务动作优先使用 ActionButton
表单操作条优先使用标准 Button

新页面开发时，先确定场景，再选尺寸档。不要先凭感觉挑样式。
旧页面调整时，如果涉及编辑、删除、查看、更多、复制、下载等业务动作，顺手迁移到 ActionButton。
如果删除按钮和取消、保存并排出现，优先按表单操作条处理，不要单独给删除套胶囊业务按钮。

现状说明

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

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

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

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