CoBot 组件画廊

生成于 2026/10/20 22:25:42 · 由 frontend/src/gallery 生成，勿手改

必读：改前端之前

这一页是 CoBot 界面的唯一标准。人或 AI 修改 frontend/ 之前先读本节，再到下面找要用的组件。

  • 只用 frontend/src/components/ui 里的组件拼界面（从 "../components/ui" 引入）。需要的东西这里没有，先把组件和它的画廊条目加上，再在界面里用。
  • 颜色只用中性色阶 neutral-*、强调色 signal-*、状态色（emerald/sky/amber/red）和角色色；不写死十六进制，不用 gray/slate/zinc。画在强调色上的字和图标用 on-signal，不写 white（经典主题深色模式下强调色是近白）。
  • 悬停、按下、选中用 interactive.hover / pressed / selected（半透明墨色叠层），不要用某个固定灰色。
  • 每个可点的元素都要有可分辨的静止、悬停、选中、键盘焦点、禁用状态。焦点框由全局样式提供，不要写 outline-none 又不给替代。
  • 一个视图只有一个 primary 按钮；不可撤销的操作用 danger 按钮并先弹 AlertDialog。
  • 保存成功用 Toast（窗口顶部居中）；和字段有关的错误写在字段下面；不在字段旁写“已保存”。Alert 是页面内容的一部分，放在相关内容上方。
  • 按钮形状：页面、设置、表单用 rounded；会话里的卡片和浮动卡片（审批、提问）用 pill，答复按钮靠右，主要的放最右。
  • 图标从 Icons 按意思取（Icons.team、Icons.delete），一个意思一个图标。
  • 会话里提到成员时用“头像 + 名字”；RoleChip 只用在放不下头像的紧凑场合。
  • 侧栏开合用 PanelToggle：同一个按钮、同一个位置、同一对图标；桌面端放在 AppTitleBar 两端，网页端放在会话标题行两端。
  • 只有图标的按钮必须有 label；所有文字走 i18n，两个语言包键名一致。
  • 机器的值（路径、ID、数字、命令）用等宽字体（mono）。
  • 改完界面后：重新生成本画廊（npm run gallery），并在四个主题、深浅两种模式下看一遍。

基础规范

颜色、字体、间距、圆角、阴影、层级、动效和焦点。组件只从这里取值；用了规范之外的值，要在代码注释里写清原因。

BrandMark 品牌标志

components/ui/BrandMark.tsx · assets/branding
用于
固定的石墨银灰金属飞鸟：侧栏、登录入口、应用图标和 favicon 使用同一视觉。
不要用于
不改成单色，不随主题染色，不拉伸鸟形。浅色底板是品牌图片的一部分，在深色主题下也保留。
无障碍
独立出现时提供 label；旁边已有名称或外层已标注时省略，避免重复朗读。
金属版 · 实际显示尺寸
CoBot

16px

CoBot

24px

CoBot

32px

CoBot

36px

CoBot

48px

CoBot

64px

设计原则

frontend/src/styles/index.css
用于
判断一个界面“对不对”时的依据。
  • 安静的桌面，颜色留给成员：界面主体是主题的中性灰（默认经典：宣纸与墨），强调色只出现在焦点、选中这类提示上；最鲜明的颜色是成员的角色色。
  • “当前项”只有一种样子：一块淡墨色底，不加竖条（导航项、成员行、标签页都是）。分段选择里的“当前值”是浮起的小块，那是分段控件自己的写法。
  • 窗口的层次：两边退后、中间浮起。一级菜单最深（rail），团队列表和工作面板在同一层（side），会话是唯一浮起的一张纸（canvas，上沿圆角），卡片浮在纸上（card），用户气泡和命令凹下去（sunk）。层与层之间靠明暗分开，不靠分隔线。
  • 成员的回复不用气泡：一行小号的头像和名字，下面是正文，像读文档；只有用户的话是右侧凹下去的气泡。
  • 一个视图只有一个主要操作（实心深色按钮）；其他操作用次要或文字按钮。
  • 状态要看得见：每个可点的东西都有静止、悬停、按下、选中、键盘焦点、禁用几种可分辨的样子。
  • 悬停和按下用“半透明墨色叠层”，不用固定灰色——固定灰色放在同色底上就看不见了。
  • 机器的值（路径、ID、数字、命令）用等宽字体；人说的话用正文字体。
  • 同一件事在所有地方长得一样、叫法一样、在同一个位置。
  • 主题只换中性色和强调色（阴影也取主题自己的深色）；成员角色色、状态色在所有主题和明暗模式下不变。主题的强调色要和状态色（尤其错误红、警告琥珀）明显分开。

颜色

frontend/src/styles/index.css · components/ui/foundation.ts
用于
所有颜色都从这几组里取。切换顶部的主题和明暗，看它们怎么变。
不要用于
不要写死十六进制颜色（成员头像色板除外），不要用 Tailwind 的 gray、slate 等其他灰色。
中性色阶（随主题变化）
neutral-50页面底色（浅）
neutral-100下沉区域、侧栏（浅）
neutral-200分隔线、描边（浅）
neutral-300输入框边框
neutral-400占位文字、次要图标
neutral-500辅助文字
neutral-600次要正文
neutral-700强调正文（深色模式描边）
neutral-800深色模式卡片描边
neutral-900主文字、主要按钮、深色卡片
neutral-950页面底色（深）
强调色 signal（随主题变化）：焦点、选中、链接、开关
signal-400深色模式文字
signal-500焦点描边、选中
signal-600链接、开关
状态色（不随主题变化）
中性
信息 · 排队
成功 · 工作中
警告 · 等你处理
错误 · 中断
角色色（不随主题变化，来自头像库色板）
项目经理#7d8c85产品经理#d8b1fb全栈工程师#9cc8fb测试工程师#fbb271评审员#f2d16b

字体与字号

--font-sans · --font-mono
用于
正文字体：Segoe UI Variable / PingFang SC / 微软雅黑；等宽字体：Cascadia Code / JetBrains Mono。
不要用于
字号只用这一套阶梯（11/12/14/16/18/20/24），不写 text-[13px] 这类中间值；不要引入网络字体；一个视图里不超过四种字号。

24 · 页面大标题（画廊、空状态主标题）

20 · 页面标题

18 · 对话框标题

16 · 分区标题

14 · 正文、控件文字（默认）

12 · 辅助说明、提示、标签

11 · 时间、计数、徽章、元信息（text-2xs）

11 · 分组小标题（全大写）

12 · 等宽：E:\work\todo-app · 1,280 tok

间距、圆角与阴影

Tailwind 默认 4px 刻度
用于
间距用 4 的倍数：控件内 8–12，控件之间 8，分组之间 16–24，分区之间 32。
圆角：越大的东西越圆
4 · 小标记、Kbd
6 · 徽章、菜单项
8 · 按钮、输入框
12 · 卡片、浮层
16 · 对话框、输入区
圆 · 头像状态点、开关
深度：阴影只给浮起来的东西；阴影颜色取主题自己的深色，不写死
平面：页面里的卡片用描边，不用阴影
轻：按钮、输入框
输入区（shadow-raised）
等你处理的卡片（shadow-floating）
浮层：菜单、提示、Toast
最高：对话框、侧滑面板
层级（z-index）：从低到高

sticky 10 · dropdown/sheet 40 · dialog 50 · toast 60 · tooltip 70（components/ui/foundation.ts 的 layer）

动效

--animate-*
用于
出现的东西轻轻上浮淡入（160ms）；侧滑面板从边缘滑入（200ms）；悬停变化 150ms。
不要用于
不要弹跳、不要装饰性动画。系统开了“减少动态效果”时，所有动画都会被缩到几乎为零。
pop-in：菜单、Toast、对话框
fade-in：遮罩、提示
shimmer：骨架屏
spin：加载中

键盘焦点

index.css 的 :focus-visible
用于
所有可聚焦的元素用键盘聚焦时，统一显示 2px 强调色描边。用 Tab 键在本页试试。
不要用于
不要写 outline-none 却不给替代的焦点样式；不要在鼠标点击时显示焦点框（用 focus-visible，不用 focus）。
或者这个链接

图标

components/ui/icons.ts（Icons）
用于
只用 lucide 图标，并且按意思从 Icons 里取（Icons.team、Icons.delete），不在页面里随手挑。一个意思只有一个图标。尺寸：14（行内、小控件）、16（按钮、导航项）、18（图标栏、对话框）。图标和旁边文字同色。
不要用于
不要同一个功能用两个图标；只有图标的按钮必须有文字标签（IconButton 的 label）。需要新的意思，先加进 Icons 和这张表。
首页Icons.home
设置Icons.settings
团队Icons.team
成员Icons.member
队长Icons.leader
任务Icons.tasks
审批Icons.approvals
动态Icons.activity
记忆Icons.memory
待处理Icons.inbox
角色Icons.roles
外观Icons.appearance
通用设置Icons.general
引擎（Codex）Icons.engine
模型Icons.model
新建、添加Icons.add
编辑、重命名Icons.edit
删除Icons.delete
归档Icons.archive
恢复Icons.restore
复制Icons.copy
搜索Icons.search
筛选Icons.filter
更多操作Icons.more
关闭Icons.close
返回Icons.back
发送消息Icons.send
发给成员Icons.sendMessage
停止Icons.stop
刷新、检查更新Icons.refresh
重试Icons.retry
上传、选图Icons.upload
下载Icons.download
打开目录Icons.openFolder
在外部打开Icons.openExternal
查看Icons.view
展开左栏Icons.panelLeftOpen
收起左栏Icons.panelLeftClose
展开右栏Icons.panelRightOpen
收起右栏Icons.panelRightClose
最小化Icons.minimize
最大化Icons.maximize
展开Icons.expand
收起Icons.collapse
上一个Icons.previous
下一个Icons.next
命令Icons.command
改文件Icons.fileChange
本轮改动Icons.diff
工具调用Icons.tool
网页搜索Icons.webSearch
计划Icons.plan
思考、说明Icons.thinking
子智能体Icons.subagent
思考强度Icons.reasoningEffort
权限模式（默认权限）Icons.permission
只读权限Icons.readOnly
完全访问Icons.fullAccess
密钥、登录Icons.secret
锁定、必选Icons.locked
用时Icons.duration
通知Icons.notification
跟随系统Icons.system
浅色Icons.light
深色Icons.dark
成功Icons.success
错误Icons.error
警告Icons.warning
信息Icons.info
帮助Icons.help
完成、已选Icons.done
尺寸
14px
16px
18px

操作与表单

按钮触发动作；表单控件改变一个值。设置类的控件改了就生效（保存成功用 Toast 告知），对话框里的表单点按钮才提交。

Button 按钮

components/ui/Button.tsx
用于
触发一个动作。文字写动作本身（“保存修改”“新建团队”），不写“确定”“提交”。一个视图只放一个 primary。
不要用于
跳转到别处用链接或导航项；不可撤销的操作才用 danger，并且要先弹 AlertDialog 确认。
无障碍
loading 时自动禁用并标记 aria-busy；禁用的按钮仍保持可读的对比度。
变体
primary 主要
secondary 次要（默认）
ghost 文字
danger 危险
link 链接
形状：rounded 用于页面、设置、表单；pill 用于会话里的卡片和浮动卡片（审批、提问）
rounded（默认）
pill 主要
pill 次要
pill 文字
pill 小
状态对照（静态示意：不用鼠标也能看出每种状态）
primary · 静止
悬停
按下
键盘焦点
加载中
禁用
secondary · 静止
悬停
按下
键盘焦点
加载中
禁用
ghost · 静止
悬停
按下
键盘焦点
加载中
禁用
带后置图标
尺寸：sm 28 · md 36（默认）· lg 44
sm
md
lg
block 占满一行

IconButton 图标按钮

components/ui/Button.tsx
用于
空间有限、图标含义足够明确的操作：收起面板、关闭、更多、复制。方形用于工具栏和标题栏；圆形用于发送、停止，以及圆角卡片上的翻页、关闭。
不要用于
含义不明显的操作（用带文字的按钮）。
无障碍
label 必填，同时作为读屏名称和悬停提示；开关类用 pressed。
常用操作（ghost，方形）
变体、形状与状态
ghost（默认）
悬停（示意）
pressed 开启
secondary
primary
circle 发送
circle 翻页
disabled
sm · md · lg

ButtonGroup 按钮组

components/ui/Button.tsx
用于
几个并列且相关的操作。
不要用于
互斥的选择（用 SegmentedControl）。

Field 字段

components/ui/Field.tsx
用于
给每个输入控件配标签、提示和错误。里面的控件自动关联 id 和说明。
不要用于
不要在字段旁边放“已保存”——保存成功用 Toast。
无障碍
错误用 role=alert 读出，并通过 aria-describedby 关联到控件。

成员会在团队列表里看到这个名字。

TextInput · Textarea · SearchInput · NumberInput

components/ui/Input.tsx
用于
输入文字和数字。路径、ID、密钥用 mono。数字有上下限时用 NumberInput。
无障碍
SearchInput 按 Esc 清空；NumberInput 的加减按钮必须传入文字标签。
https:///assets
人

1–20

Select 下拉 · Combobox 可搜索下拉

components/ui/Select.tsx · Combobox.tsx
用于
Select：选项少且固定（语言）。Combobox：选项多、需要打字筛选（模型、角色）。
不要用于
2–4 个选项且要一眼看全时用 SegmentedControl 或 RadioGroup。
无障碍
Combobox：上下键移动、回车选择、Esc 关闭。

Checkbox 复选 · Switch 开关

components/ui/Choice.tsx
用于
Checkbox：表单里的独立是/否，点保存才生效（建团队时勾选成员）。Switch：一个设置，拨动立即生效。
不要用于
不要用 Switch 表示需要再点保存的选择。

RadioGroup 单选 · RadioCards 单选卡片

components/ui/Choice.tsx
用于
从几个选项里选一个，而且要全部摆出来对比。需要图片或说明时用卡片。
无障碍
方向键在选项间移动并选中，和原生单选一致。

CheckboxCards 多选卡片

components/ui/Choice.tsx
用于
从几个带图片或说明的选项里选几个（新建团队选成员）。必选的一项锁定并标出原因。
无障碍
每张卡片是 checkbox；锁定的卡片 aria-disabled，仍可读到。

SegmentedControl 分段选择 · Toggle 切换按钮

components/ui/Choice.tsx
用于
SegmentedControl：2–4 个短选项，立即生效（明暗模式、视图切换）。Toggle：一个保持开或关的按钮（筛选）。

Slider 滑块

components/ui/Slider.tsx
用于
位置比精确数字更重要的值。需要精确输入时配一个 NumberInput。
40%

FileDrop 文件选择

components/ui/FileDrop.tsx
用于
从本机选一个文件，可以点也可以拖进来。写清接受哪些格式。

PNG、JPEG 或 WebP，会自动裁成正方形

Fieldset 字段组

components/ui/Field.tsx
用于
把相关的字段归成一组，加一个小标题。
协作与预算

控制团队规模和用量。

反馈、数据与结构

告诉人发生了什么、正在发生什么、接下来做什么；把数据摆清楚；把页面分好区。

Toast 消息

components/ui/Toast.tsx
用于
一件事完成了，但结果不在眼前（已保存、已复制、已撤销）。从窗口顶部居中落下；成功的 2.5 秒后自动消失，失败的一直留着，直到点关闭。最多同时三条。
不要用于
和某个字段有关的错误写在字段下面；需要用户立刻决定的事用对话框。
无障碍
成功用 polite、失败用 assertive 读出；鼠标停在上面时不会消失。

Alert 提示条

components/ui/Feedback.tsx
用于
页面里需要读到的情况：引擎未登录、目录丢失、额度快用完。它是页面内容的一部分，放在相关内容的上方（比如会话顶部、设置分组顶部），不浮起、不自动消失。写清发生了什么和怎么办，最多带一个操作。
不要用于
一闪而过的结果用 Toast；需要马上决定的用对话框。

头像库还没下载

成员暂时显示默认头像。可以到“设置 → 外观”检查更新。
Codex 已登录，安全钩子已授权。

本周额度已用 79%

额度用完后成员会暂停，直到下周重置。

Spinner · ProgressBar · Skeleton

components/ui/Feedback.tsx
用于
等待时给出反馈：很短的等待用 Spinner；知道进度用 ProgressBar；内容加载用和内容同形状的 Skeleton。
不要用于
不要整页转圈；能先显示的部分先显示。
正在检查更新…

ProgressRing 环形进度

components/ui/Feedback.tsx
用于
一个比例需要一眼看出时（上下文已用多少、额度用了多少），放在统计栏或卡片角上。
无障碍
以 progressbar 读出百分比。
23上下文 23%
79额度 79%（警告）
100超限（错误）
小号，不显示数字

EmptyState 空状态

components/ui/Feedback.tsx
用于
一个地方暂时没有内容：说明为什么空、下一步做什么，最多一个主要操作。

还没有任务

和项目经理对齐方案后，任务会出现在这里。

Badge · Tag · StatusDot · Count · Kbd

components/ui/Feedback.tsx
用于
Badge：状态或分类。Tag：可移除的值。StatusDot：状态点，必须有文字标签。Count：数量。Kbd：快捷键。
已归档neutral
排队中info
工作中success
等你审批warning
已中断danger
进行中全栈工程师Tag
StatusDot
399+Count
Enter发送Shift+Enter换行Kbd

Card 卡片 · Divider 分隔

components/ui/Display.tsx
用于
一组相关内容，比如设置里的一个分组。卡片在页面里用描边，不用阴影。

头像库

成员头像从这里来。

团子：第 1 版

没有标题的卡片

分隔线可以带文字

List 列表

components/ui/Display.tsx
用于
一列同类的东西（角色、已归档团队）。行可以整体可点，也可以只有尾部操作。
  • 全栈工程师默认头像

Table 表格

components/ui/Display.tsx
用于
按同样几列比较多行数据（用量、历史）。数字列右对齐、等宽。
无障碍
可排序的列标头是按钮，并带 aria-sort。
各成员用量
项目经理4182,400
全栈工程师196,210
测试工程师251,877

DescriptionList 键值列表 · Stat 指标 · CodeBlock 代码

components/ui/Display.tsx
用于
键值列表：一组属性。指标：一个重要的数字。代码块：命令、输出、配置，带复制。
版本
0.1.0
数据位置
C:\Users\me\.cobot
Codex
0.161.0 · 已登录

本周额度

79%

周一 08:00 重置

缓存命中

95%

PowerShell
cobot serve --profile production

Accordion 折叠面板 · CopyButton 复制按钮

components/ui/Display.tsx
用于
折叠面板：可以分别展开的几段内容（任务的交付记录、高级设置）。复制按钮：一个值旁边的复制，点后图标短暂变成对勾、读屏器读出“已复制”。

全栈工程师 09:52 交付：添加和删除可用，本地保存已完成，已用 Playwright 验证。

C:\Users\me\.cobot

PageHeader · Section · PanelHeader · Toolbar · PanelToggle

components/ui/Layout.tsx
用于
页面和面板的骨架。PanelToggle：侧栏的打开和收起永远是同一个按钮、同一个位置、同一对图标。
不要用于
不要用 × 关闭侧栏、再用另一个图标打开它；不要为打开按钮单独留一条空列。

设置

外观

浅色、深色或跟随系统，以及界面配色。

头像库

成员头像从这里来。

项目经理

待办应用 · E:\work\todo-app

团队列表：展开

成员与会话

CoBot 自己的组件。成员 = 头像 + 名字，在哪里提到成员都一起出现；状态由头像表达（工作中会动、等你处理时睁大眼睛），同时用文字告诉读屏器。

Avatar 头像

features/avatars/Avatar.tsx · render.ts
用于
所有显示成员的地方。尺寸：16（行内、往来行）、24（列表）、28（消息旁）、36（会话头部）、48（空状态）、96（选头像）。
不要用于
不要自己画首字母方块；头像库没下载时组件会自动用打包的默认头像。
无障碍
头像本身对读屏器隐藏，成员名和状态由旁边的文字或外层的标签说出。
16px
24px
28px
36px
48px
96px
空闲
工作中（会动）
等你处理
已中断
默认头像（未下载）
本地图片 · 工作中
leader
product-manager
fullstack-engineer
qa-engineer
code-reviewer

RoleChip 角色名牌 · AvatarStack 头像叠放

components/ui/Team.tsx
用于
名牌：只在没有位置放头像的紧凑场合用（任务负责人、表格单元格）。会话里提到成员时用“头像 + 名字”，不用名牌。叠放：一组成员一眼看过。
项目经理产品经理全栈工程师测试工程师评审员+2

MemberRow 成员行

components/ui/Team.tsx
用于
团队列表里的一个成员：头像、名字、右上角状态或时间、下面一行是最近一条消息（只显示一行，超出用省略号截断，不会撑出侧栏）。当前成员白底加描边；等你处理时头像右下角加琥珀色点。项目经理和成员暂时用同一种样式（怎么区分项目经理以后再定）。

MessageBubble 消息 · ExchangeLine 往来 · SystemNote 系统说明

components/ui/Team.tsx
用于
用户的话是右侧凹下去的浅色气泡；成员的回复不用气泡：一行头像和名字，下面是正文，像读文档；成员之间的往来是居中的一行，带对方头像，点名字打开完整往来；CoBot 自己的说明是居中的小字。
做一个本地待办页面，能添加和删除
已送达
项目经理
好的。我先确认两点：数据要不要在刷新后保留？要不要支持标记完成？
发给
来自
团队成员有变化：加入了评审员

ProcessStep 过程步骤

components/ui/Team.tsx
用于
成员一轮工作里做的每一步：命令、改文件、工具调用、子智能体……可以展开看详情。进行中转圈，完成打勾，失败打叉。
npm test4.2s
14 passed
修改 src/App.tsx、src/todo.ts
2 个文件，+48 −3
派生了子智能体：检查无障碍子智能体
view_tasks
连接中断，已重试
本轮改动 3 个文件

ApprovalCard 审批卡 · QuestionCard 提问卡

components/ui/Team.tsx（WaitingCard）
用于
等你处理的事，放在输入框上方，一次一张，多张时可以翻页。中性底色的浮起卡片：左上角图标加标题，正文写清谁、要做什么、为什么，答复用胶囊按钮放在右下，最主要的放最右边。提问卡还带一个回答框。
不要用于
不要用黄色等警告色铺满卡片；处理后卡片直接消失，不在消息流里留记录（历史在工作面板的“审批”页）。

安全审批

1 / 3

测试工程师想在沙箱外运行命令

npx playwright test --headed

需要打开真实浏览器验证页面。

问题

项目经理

数据要不要在刷新后保留？要的话我会用浏览器本地存储。

Composer 输入区

components/ui/Team.tsx
用于
给成员写消息。Enter 发送，Shift+Enter 换行；成员工作中且没有草稿时，发送键变成停止键。左下角放团队级的选项。

输入后按 Enter 试试。

ModelEffortPicker 模型与思考强度

components/ui/ModelPicker.tsx
用于
输入框左下角选择模型和思考强度，和 Codex 一样：按钮上显示当前强度（强调色）和模型；点开后顶部居中是强度和模型名，点模型名换模型；下面是分档滑块，可以拖、点刻度或用方向键；右上角恢复默认（已是默认时不可点）。
无障碍
滑块以 slider 读出档位名称；面板打开后 Esc 或点外面关闭。

高

输入框里的样子，点开向上弹出

AppTitleBar 桌面标题栏

components/ui/Layout.tsx
用于
桌面客户端隐藏系统标题栏，由 CoBot 自己画：两端是左右侧栏的开关，中间可以拖动窗口、双击最大化，颜色跟着 CoBot 的主题和明暗。Windows 上右侧自己画最小化、最大化、关闭；macOS 左侧保留系统的红绿灯位置。
不要用于
网页版没有标题栏，侧栏开关放在会话标题行的两端。
无障碍
窗口按钮都有文字标签；关闭按钮悬停变红，和系统一致。
Windows
CoBot — 待办应用 · 项目经理
团队列表
会话
工作面板
macOS
CoBot — 待办应用 · 项目经理

交互模式、文案与禁止事项

跨组件的约定。新界面先在这里找做法；这里没有的，先补进画廊再用。

保存反馈

useToast + Field
用于
设置项改了就保存。成功：窗口顶部居中弹出 Toast“已保存”。失败：错误写在那个设置项下面，值回到保存前，同时给一条失败 Toast。
不要用于
不要在每个设置项旁边显示“已保存”。

侧栏的展开与收起

PanelToggle
用于
左右两栏的开关固定在会话标题栏的两端，用同一对“侧栏”图标表示开和关。侧栏始终在布局里，任何宽度都不盖住会话、不挡继续操作；窗口窄时，打开一边会收起另一边，让会话保留空间。
团队列表
项目经理

加载、空、出错

Skeleton · EmptyState · Alert
用于
加载：先显示骨架，能先显示的先显示。空：说明为什么空、下一步做什么。出错：说清发生了什么、怎么恢复，并给一个重试操作。

文案规则

frontend/src/i18n/locales/*.json
用于
界面上的每个字。
  • 从用户的角度说话：说用户认识的东西（“团队”“成员”“工作目录”），不说实现（“线程”“迁移”“端点”）。
  • 按钮写出动作：“保存修改”“删除团队”“更换头像”；确认框的确认按钮和动作同名。
  • 出错说清三件事：发生了什么、为什么（知道的话）、怎么办。不道歉，不含糊，不只写错误码。
  • 空状态是邀请：告诉用户下一步，最多一个主要操作。
  • 一句话做一件事；能删的字删掉。
  • 中文里夹英文、数字时不加空格，用全角标点；英文用句首大写（Sentence case）。
  • 所有文字都放进 i18n 两个语言包，键名一致；组件里不写死中文或英文，图标按钮的标签也要翻译。

禁止事项

—
用于
下面每一对都来自真实踩过的坑。
这样做：悬停用半透明墨色叠层（interactive.hover），放在任何底色上都看得见。
不要这样：悬停色和底色都是 neutral-100：鼠标移上去什么都看不到。
这样做：同一个按钮在同一个位置切换开和关，图标成对。
不要这样：用 × 关闭，再用另一个图标、在另一个位置打开。
这样做：保存成功用 Toast；字段下面只放错误。
语言已保存
不要这样：每个字段旁边一行绿色“已保存”。
这样做：错误写清原因和办法，挨着出错的地方。

error.team.directory_bound

不要这样：只写“操作失败”或一个错误码。