跳到主要内容

同步 2026/06/01 组件更新（DES-40）

Pre-release · 类型： ✨ 新功能

DES-40：同步 2026/06/01 设计 changelog 的组件更新。单 issue 跟踪，按组件分次提交。

Select / Dropdown / Date Picker / Modal 浮层圆角改为 Radius_12​

状态: 已完成

背景: 设计 2026/06/01 更新将 Select / Dropdown / Date Picker / (Onboarding) Modals 的浮层圆角由 Radius_5 调整为 Radius_12。经 Figma 核实，改动仅作用于浮层/弹层面板容器，trigger（Select Trigger、MultiSelect Trigger、Date Picker Trigger）、Chip、菜单项、关闭按钮等仍保持 Radius_5。

涉及 Figma 节点：Select Menu 21120:1603、Dropdown Menu 21128:11039、Date Picker 面板 21885:861、Modal 21235:6773（Default / Emphasized 均为 12）、Onboarding Modal 18609:2556，cornerRadius 均为 12。

改动文件:

  • src/components/Select/styles.ts（SELECT_CONTENT_TOKEN_CLASS）
  • src/components/DropdownMenu/styles.ts（DROPDOWN_CONTENT_TOKEN_CLASS、DROPDOWN_SUB_CONTENT_TOKEN_CLASS）
  • src/components/DatePicker/styles.ts（RANGE_PICKER_PANEL_CLASS）
  • src/components/Calendar/styles.ts（CALENDAR_ROOT_VISUAL_CLASS，单选 Date Picker 弹层 + 独立 Calendar 共用）
  • src/components/ui/dialog.tsx（Dialog Content 面板）
  • 对应测试：Select.test.tsx、DropdownMenu.test.tsx、Calendar.test.tsx、RangePicker.test.tsx、Dialog.test.tsx
  • 对应 spec：SelectDesignSpec.md、DropdownMenuDesignSpec.md、DatePickerDesignSpec.md

改动内容:

  1. 上述浮层面板容器圆角 rounded-(--Radius_5) → rounded-(--Radius_12)
  2. Select 的 searchable / MultiSelect 下拉面板复用 SELECT_CONTENT_TOKEN_CLASS，自动继承新圆角
  3. 单选 Date Picker 弹层即 Calendar 根容器（CALENDAR_ROOT_VISUAL_CLASS），随之更新
  4. 各组件补充 rounded-(--Radius_12) 断言，锁定本次圆角变更

新增 Ai Button 组件​

状态: 已完成

背景: 设计 2026/06/01 新增 AI Button（Figma 组件集 23496:9462）。药丸形 AI 入口按钮，AI 渐变描边 + 内置渐变 sparkle 图标。轴：Size（Medium / Small）× State（Default / Hover / Clicked）× Show Stroke（True / False）。

改动文件:

  • src/components/AiButton/AiButton.tsx、styles.ts、AiSparkleIcon.tsx、index.ts、AiButton.test.tsx、AiButtonDesignSpec.md
  • src/components/index.ts（导出 AiButton / AiButtonProps / AiButtonSize）
  • packages/design-site/src/theme/ReactLiveScope/index.tsx（live demo scope）
  • packages/design-site/docs/components/atomic/ai-button.mdx + zh-CN i18n

改动内容:

  1. 独立组件 AiButton，不复用 Button variant 体系；对外 size（medium/small，默认 medium）、showStroke（默认 true），其余透传原生 button 属性
  2. AI 渐变 #8F53ED → #00D0FF → #21EF6A：Show Stroke=True 用 padding-box / border-box 双层背景实现 2px 渐变描边（内层白底）；Show Stroke=False 为纯白底
  3. 内置 AiSparkleIcon（多色渐变 sparkle），按 CLAUDE.md 7.2「组件内部非契约视觉」直接实现，渐变 id 用 useId 避免多实例冲突
  4. 交互投影：Default AI 青色辉光 / Hover --Effects-Shadow-Emphasized / active --Effects-Shadow-Default
  5. 尺寸：Medium px-24/py-12 + Body(14)/leading-5；Small px-12/py-8 + Footnote(13/18)；图标统一 20×20

Alert（Toast）新增 AI Feedback 变体​

状态: 已完成

背景: 设计 2026/06/01 为 Alert（Figma 组件集 319:30904，本仓库以 Toast 实现）新增 Style=AI Feedback。与 Info/Success/Warning/Error 的「16% 变体色遮罩 + 单色图标」不同，AI Feedback 为白底 + 1px AI 渐变描边 + 多色渐变图标（icon_multicolor_ai）。

改动文件:

  • src/components/Toast/toast-manager.ts（ToastType 增加 aiFeedback）
  • src/components/Toast/Toast.tsx（toast.aiFeedback 方法 + JSDoc）
  • src/components/Toast/styles.ts（TOAST_VARIANT_CLASS / TOAST_ICON_COLOR_CLASS 增加 aiFeedback；新增 mask 渐变描边）
  • src/components/Toast/ToastItem.tsx（renderIcon 增加 aiFeedback 分支）
  • src/components/Toast/ToastAiIcon.tsx（新增多色渐变图标）
  • src/components/Toast/Toast.test.tsx、Feedbacks/FeedbacksDesignSpec.md
  • packages/design-site/docs/components/patterns/feedbacks-toast.mdx + zh-CN i18n

改动内容:

  1. 新增 toast.aiFeedback(message, options?)，沿用 Message / Alert（含 description）两种布局
  2. AI 渐变描边用 before 伪元素 + mask（content-box / border-box exclude）实现 1px 渐变边框，白底不变；根节点本身是 absolute，故不加 relative，避免覆盖定位
  3. 内置 ToastAiIcon（icon_multicolor_ai，4 stop 对角渐变），渐变 id 用 useId；图标不施加文字色
  4. 渐变方向与 AiButton 描边一致（紫 → 青 → 绿）

Breadcrumb 折叠项增加 Hover / Select 交互​

状态: 已完成

背景: 设计 2026/06/01 为 Breadcrumb 折叠态新增交互：...（Figma Style=Compressed，节点 23859:25240）从静态文字变为可交互触发器，点击/选中展开下拉（Figma Breadcrumb Dropdown Menu 23880:11610，Radius_12）列出被折叠的中间项。

改动文件:

  • src/components/Breadcrumb/Breadcrumb.tsx（getResolvedBreadcrumbItems 收纳 hiddenItems；新增 BreadcrumbEllipsisMenu）
  • src/components/Breadcrumb/styles.ts（BREADCRUMB_ELLIPSIS_TRIGGER_CLASS / BREADCRUMB_DROPDOWN_LINK_CLASS）
  • src/components/Breadcrumb/Breadcrumb.test.tsx、BreadcrumbDesignSpec.md
  • packages/design-site/docs/components/atomic/breadcrumb.mdx + zh-CN i18n

改动内容:

  1. 超过 4 级时，折叠占位 ... 改为 DropdownMenu 触发器；复用 design DropdownMenu（Radius_12 + 统一 item hover），不重复造浮层
  2. 触发器三态：Default / Hover / Selected(open)，hover 与 data-[state=open] 显示灰底 + 加深文字
  3. 下拉列出被折叠的中间项（items.slice(2, n-2)），每项为链接（icon + 文本，携带 href），按层级递进缩进（首层 0，其后 8px 起步、每层 +16px，对齐 Figma Spacer 0/8/24/40）
  4. 缩进用内联 style（动态 Tailwind 类无法被编译扫描）
  5. 组合式 BreadcrumbEllipsis（静态 ...）保留为公开 API，不受影响

状态: 已完成

背景: 设计 2026/06/01 替换了 Main Menu 的母组件并更新为 4.0 样式（新母组件 22535:4613，旧通用 Menu 4746:125765 已删除、旧 Main Menu 1449:72679 deprecated）。新 Main Menu 仍复用既有 _Menu Item Base 组件集 229:33384。

经核对，design 的 Menu / MenuItem 基础原语在间距（px-8/py-8/gap-8）、圆角（Radius_5）、颜色（Labels-Secondary / Tertiary、hover bg Grays-Gray-1 #EBEBEB）、高度（40px）上已与 4.0 Menu Item Base 一致。唯一样式差异为正文行高：4.0 为 14/20，旧实现为 14/22。

Main Menu 作为业务级组合（Logo、用户信息、Plan 信息、Sections 等）不纳入 @plaud/design，由应用层（web4）拼装；本仓库只维护其复用的 Menu 原语。Sections 分组标题样式（List Heading/Subheading）见单独改动，不在本条范围。

改动文件:

  • src/components/Menu/styles.ts（MENU_ITEM_CONTENT_CLASS 行高 leading-(--Line-Height-Body) → leading-5；注释更新）
  • src/components/Menu/Menu.tsx、MenuDesignSpec.md（Figma 母组件节点引用更新到 4.0）

改动内容:

  1. Menu Item 正文行高对齐 4.0（14/20，leading-5，与 AiButton medium 一致）；因 item 受 min-h-40 约束，视觉无回归
  2. 更新 Menu 的 Figma 源节点引用：主节点指向 4.0 Main Menu 22535:4613，标注旧节点已删除 / deprecated
  3. spec 行高与节点清单同步到 4.0

后续修正（review 反馈）​

状态: 已完成

DevTools 验证 + reviewer 反馈后的两处修正，覆盖上面 AiButton / Toast AI Feedback 两条的初版实现：

  1. 渐变描边渲染修复：初版用 Tailwind arbitrary 表达分层 background / mask（[background:...padding-box,linear-gradient...border-box]、before:[-webkit-mask:...content-box,...]）。Tailwind v4 无法编译含顶层逗号的 arbitrary value（生成不出 CSS，DevTools 实测 computed 为 none / 边框不显）。改为内联 style：
    • AiButton：AI_BUTTON_STROKE_STYLE（showStroke 时施加）
    • Toast AI Feedback：TOAST_AI_BORDER_STYLE（ToastItem 在 type==='aiFeedback' 时施加，1px 边框）
    • 括号内逗号（rgba() 阴影等）不受影响。
  2. AI 图标改为契约注入：删除组件内自绘的 AiSparkleIcon.tsx / ToastAiIcon.tsx，改为走图标契约——新增 key askAi（icon_multicolor_ask_ai）、aiFeedback（icon_multicolor_ai），与其它图标一致由使用方注入；design 不内置任何 AI 图标 SVG。
    • 改动文件：src/Icons/contract.ts、src/Icons/index.tsx（AskAiIcon / AiFeedbackIcon 包装）、src/test/test-icon-registry.tsx（stub）、AiButton.tsx / Toast/ToastItem.tsx（改用注入图标）；参考实现注入：design-site plaud-icon-registry.tsx、web4 designIconRegistry.tsx（复用既有 icon_multicolor_ask_ai.svg / icon_multicolor_ai.svg 资源）。
    • 契约 key 由 29 增至 31。