跳到主要内容

AiButton 新增 Loading 与 Disabled（预留）状态（WEB-1176）

版本： 0.6.6 · 类型： ✨ Feature

WEB-1176

问题​

Figma AI Button 组件集（23496:9462）新增了 Loading 与 Disabled 变体（Size × Show Stroke 各 4 个节点），但 AiButton 只实现了 Default / Hover / Clicked。组件需要补齐这两个状态并对齐设计稿。

设计规范​

维度LoadingDisabled（预留）
背景 / 描边与 Default 一致（白底 + 渐变描边，随 showStroke）灰底 --Grays-Gray-2（#D6D6D6），去除渐变描边
图标Spinner 16×16（--Grays-Gray-6 #5C5C5C）sparkle 灰显（CSS grayscale）
文字色--Labels-Disabled（#A3A3A3）--Labels-Disabled（#A3A3A3）
交互原生 disabled + aria-busy，光标 not-allowed原生 disabled，光标 not-allowed

Loading 以原生 disabled 阻断交互，从而让 not-allowed 光标生效（pointer-events-none 的元素无法显示光标）。Disabled 的 sparkle 灰显用 CSS grayscale 近似 Figma 的扁平灰——注入的 askAi 图标是多色渐变 SVG，design 层无法将其重着色为单一灰。

改动文件​

  • packages/design/src/components/AiButton/AiButton.tsx
  • packages/design/src/components/AiButton/styles.ts
  • packages/design/src/components/AiButton/index.ts
  • packages/design/src/components/AiButton/__tests__/AiButton.test.tsx
  • packages/design/src/components/AiButton/__tests__/AiButton.ct.spec.tsx
  • packages/design/scripts/visual/visual-diff-config.ts

改动内容​

  1. 新增 loading?: boolean prop；disabled 沿用原生属性（预留态）。
  2. styles.ts 由「尺寸 × 描边」二维重构为「尺寸 × 描边 × 状态」三维：新增 AiButtonState（default | loading | disabled），状态视觉（文字色 / 光标 / 投影 / 底色）拆入 AI_BUTTON_STATE_CLASS，背景/描边拆入 getAiButtonSurfaceClass。
  3. Loading 通过 AI_BUTTON_SPINNER_CLASS 渲染共享的 Spinner（对齐 Figma 的 8 段指示器），与 Button 的 LOADING_SPINNER_CLASS 保持一致。
  4. 新增单测（loading / disabled）与 8 个新变体的 @visual CT 截图，并补齐对应 Figma 节点映射。