组件总览Overview

按钮的主色只给主操作，一屏只有一个主按钮；其余用次级（secondary 底）或幽灵（无底、hover 时 accent）。破坏性操作用 destructive 实心底 + on-status 字，绝不用主色。

批量操作条：多选时从底部中央浮出，float 深色底、on-float 字、radius-lg、shadow-float、高 44。不占页面空间。

复选框、单选、开关。三者都是 16px 控件（现场端 24），input 描边 1.5px、圆角 radius-chip（复选）/ 圆（单选）；选中态是主色实心——这是主色允许出现的三处之一。

状态芯片：浅底同色深字、圆角 radius-chip（4px）、必须带图标、chip 字号 12.5。不用胶囊形、不用描边、不只靠颜色。

指标卡：metric 大数字（等宽）+ 小号后缀（meta + muted-foreground），下面一条极简 sparkline。放在 card 里，space-4 内距，四五个横排。

台账表：th 表头（subtle、小号、字间距、可排序带小箭头）退到内容后面；行之间不画线，靠行高（桌面 44）与留白区分；选中行 muted 底；hover accent。行首用首字圆形头像（secondary 底、label 字）做视觉锚点，负责人列同样。

首字圆形头像——整套语言里允许的圆形之一，做表格行与侧栏的视觉锚点。secondary 底、secondary-foreground 字、字重 600；尺寸 22（表格）/ 28（列表、聊天）/ 36（详情、当前用户）。

代码、SQL、日志、生成的表结构。muted 底、radius-md、code 13 / 20 mono、内距 space-3 space-4；顶部一行 meta：语言 / 文件名，右侧复制图标。不做彩色语法高亮——只用 foreground 与 muted-foreground 两级（注释、字符串弱化）。

侧栏：background 灰底，宽 224，顶部工作区切换，下面按分组列导航。选中态是白块浮起来——card 底 + shadow-raised + radius-sm，不用彩色底、不用左侧色条。hover 用 accent。

页头 = 面包屑（meta，chevron-right 分隔，最后一级不可点）+ 标题行（title 26 + 可选状态 pill + 右侧操作：幽灵 / 次级 / 一个主按钮）。高度随内容，底部与内容区隔 space-6 24。

页内切换视图。两种：

分页在表格底部右侧，左侧显示「第 1–20 条，共 156 条」（meta）。页码按钮 28×28、radius-sm，当前页 secondary 底 + 500 字重（不用主色），前后箭头用 chevron-left / right。超过 7 页折叠为「1 … 5 6 7 … 8」。

输入框：card 底、input 描边 1px、圆角 radius-md、聚焦时描边换 ring。标签 label 在上，选填在标签后用 meta + subtle 标注。

下拉选择与下拉菜单共用一个弹层：popover 底、radius-md、shadow-overlay、内距 space-1；每项高 32、radius-sm、hover accent、选中项左侧对勾。触发器与输入框同尺寸，右侧 chevrons-up-down。

轻提示只放不需要读的内容：成功了、正在导出、有几条待上传。3 秒消失。float 深色底、on-float 字、圆角 radius-md、shadow-float，左侧状态图标，右侧一个动作（撤销 / 查看）。

页内错误块：失败原因留在页面上，不消失。destructive-soft 底、radius-md、左侧 destructive 图标，标题 label 字重 600 destructive，正文 body foreground。

离线常驻条：吸顶、不消失。这是状态不是事件——风场和地下室没信号是常态，静默失败会直接摧毁信任。

空状态：一个 icon-lg 24 图标（subtle）+ 一句话说这里会有什么 + 一个主按钮做第一件事。上下留白 space-12 48。不放插画、吉祥物、彩色。

悬停解释。float 深色底、on-float 字、meta 12、radius-sm、内距 space-1 space-2，shadow-float，无箭头。延迟 300ms 出现，移开即消失。

破坏性确认框。card 底、radius-lg、shadow-overlay、内距 space-6、宽 400。

侧滑详情面板。从右侧推入，宽 panel 480，card 底、shadow-overlay，列表留在后面可对照；遮罩很淡（foreground 8%），点遮罩关闭。

移动端底部抽屉：表单、选项列表、二级操作都用它，不用居中弹窗（拇指够不到）。card 底、顶部两角 radius-lg、shadow-overlay，顶部一条 36×4 的拖动条（border）。

长任务进度面板（生成应用 2–3 分钟）。超过 40 秒不能用转圈，用户会以为卡死然后刷新，生成被打断。

像素加载：3×3 像素网格 + 流光文字 + 计时。用在等待时间不确定的空窗期——用户刚发完消息、模型还没吐第一个 token。计时是关键：长任务时它是唯一能证明「没卡死」的信号。来自智算客户端（移植自 beautifului.dev）。

AI 回答的三个状态：在想、思考过程、流式输出。

Agent 执行轨迹：工具调用一步一行，进行中自动展开、结束后收起成一行「执行了 N 步」，想看全过程随时点开。与 Reasoning（模型的思考文字）分工：这里是动作。来自智算客户端（移植自 beautifului.dev，改为完全受控）。

AI 助理面板里的消息。用户消息右对齐、secondary 底、radius-md（右下角 radius-chip）；AI 消息左对齐、无底色直接在面板上，前面一个 28 的 bot 图标方块。宽度不超过 80%。

统一的 markdown 渲染。AI 回答、知识库文档、文章、协议——四端里 markdown 是最扎眼的不一致处，原因是每处各写一套样式覆盖。现在规则只有一份（「页面模式 › Markdown」），Web 用这个组件，iOS / Android 按同一张表。

本轮改动过的文件压成一排 chip：region.ts +74 −41。mono 字、card 底 + shadow-raised、radius-chip。超过 max（默认 6）折成「+N 个文件」，避免一轮改几十个文件刷屏。

语音录入三态，关单时弹出的沉淀钩子入口。第三态（转写完成可编辑）不能省：转写一定会把「轴承内圈剥落」认错，让师傅看一眼、能改，他才会信；改不了下次就不说了。

移动端不用表格，改成 64 高的整行可点卡片列表。每行：左侧首字头像 28、中间两行（f-label 15 主字段 + f-meta 13.5 辅助信息）、右侧状态 pill；行与行之间 space-2 8，card 底、radius-md、shadow-hairline。

营销皮肤：包住官网 / 营销页的根节点，把语义 token 重映射到品牌层——暖米底 brand-paper、墨蓝字 brand-ink、品牌金主色、按钮圆角 10、卡片圆角 14、1px 实线卡片边。里面的 Button / Card / Input 等产品组件自动换皮，不用改调用。dark 为藏青深色带（知库、数据大屏），主色换 brand-cyan。

区块上方的小字标签：11px mono、全大写、字距 .16em、brand-gold；深色带里自动变 brand-cyan。每个区块一个，放在 h2 上方 14px，内容是「分类 / 英文」这种两三个词。产品页不用它——那里分组小标题是 meta 灰字。

数据条：mono 大数字 + 单位 + 说明。size="sm"（22）放在首屏标题下面带上分隔线；默认（32）配 divided 做独立的数据带（白底、四等分、竖线分隔）。highlight 项用金边金底（「60+ 官方 Skills」这种）。数字等宽、右侧单位小一号灰。

描边小 chip：11px、6px 圆角、brand-line-2 边、白底，标技能与分类；lit 点亮态换金边 + brand-gold-soft 底。一排 gap 6，可换行。它是营销层的「标签云」，不表示状态——状态仍用 StatusPill。

mono 小标签：11px mono、字距 .06em、4px 圆角，标层级与类型（AGENT / SKILL / TOOL、DOCX / XLSX）。四种 tone：gold（默认）、neutral、info、ok——后两种直接用产品的状态 token，不另配色。

徽章：营销层唯一允许的胶囊形（999 圆角），mono 12、brand-gold-soft 底 + brand-gold-ink 字。只用在两处：首屏一句话卖点（「效率提升 逐页翻 4 小时 → 秒级」）、定价卡的「推荐」角标。产品层禁止胶囊，这里也不要用它做按钮。