跳到主要内容

第一轮批量修复（WEB-377）

Pre-release · 类型： 🐛 缺陷修复

WEB-377 组件库问题第一轮批量修复。

改动内容​

WEB-606: Input 缺少 Password/Textarea/Upload (In Dev)​

状态: 待修复

WEB-610: Dialog 样式与 Figma 有出入 (In Dev)​

状态: 已修复

问题: 1) Dialog 描述文字缺少 14px 字号设置；2) 确认按钮存在描边阴影（focus outline 泄漏）

改动文件: src/components/Dialog/Dialog.tsx, src/components/Button/styles.ts

改动内容:

  1. Dialog 内容区 div 增加 text-[14px] leading-[22px] text-(--Labels-Secondary)，固定字号和颜色
  2. BUTTON_BASE_CLASS 增加 focus-visible:outline-none（此前 unstyledVisual 跳过了 ui 层的 VISUAL_BASE，导致浏览器默认 focus outline 泄漏）

WEB-611: DropdownMenu 样式与 Figma 有出入 (In Dev)​

状态: 已修复

问题: 分割线不可见——--Separators-Non-opaque token 不存在，分割线背景色为空

改动文件: src/components/DropdownMenu/styles.ts

改动内容:

  1. DROPDOWN_SEPARATOR_TOKEN_CLASS：bg-(--Separators-Non-opaque) → bg-(--Separators-Default)，引用正确的 token（rgb(235,235,235)）

WEB-612: Toast 样式与 Figma 有出入 (In Dev)​

状态: 已修复

问题: Toast 标题字重为 bold（Sonner 默认），Figma 应为 normal；字号确认为 14px

改动文件: src/components/Toast/styles.ts

改动内容:

  1. TOAST_TITLE_CLASS 增加 font-normal!，覆盖 Sonner 默认的 bold 字重

WEB-724: Badges Member Badges 缺失​

状态: 已修复

问题: 1) 缺少 "Limited-time free" 和倒计时两个 Member Badges；2) "26% OFF" 底部应为直角而非圆角；3) 倒计时 badge 高度（28px）与其他不同

改动文件: src/components/Badge/styles.ts, src/components/Badge/MemberBadge.tsx(新建), src/components/Badge/Badge.tsx, design-site badge.mdx(en/zh-CN)

改动内容:

  1. 新增 'top-round' shape（rounded-tl-(--Radius_5) rounded-tr-(--Radius_5)，顶部圆角底部直角）
  2. 新建 MemberBadge.tsx，提供 7 个 Member Badge 预设组件：
    • Badge.Starter（gray, pill, default）
    • Badge.Pro（cyan, pill, default）
    • Badge.Unlimited（tinted purple, pill, default）
    • Badge.Membership（warm, pill, default）
    • Badge.MemberLimitedTime（lavender-mist, pill, sm）
    • Badge.Countdown（tinted lavender-mist, pill, 28px, 带 icon_countdown 沙漏图标，接受 children）
    • Badge.Discount（purple, top-round, default, 接受 children）
  3. design-site Member Badges 示例改用预设组件

WEB-725: Button 缺少 click 点击态​

状态: 已修复

问题: active 状态颜色与 hover 相同，未对齐 Figma Clicked 态

改动文件: src/components/Button/styles.ts

改动内容:

  1. Secondary active: --Grays-Gray-1(#EBEBEB) → --Grays-Gray-2(#D6D6D6)
  2. Tertiary active: --Grays-Gray-1(#EBEBEB) → --Grays-Gray-2(#D6D6D6)
  3. Destructive active: color-mix(90% error, white) → color-mix(90% error, black)（hover 变浅，active 变深）

WEB-726: Button Loading 态与 Figma 有出入​

状态: 已修复

问题: Loading 态 Spinner 继承了 disabled 文字色（#a3a3a3），应为 Grays-Gray-6（#5c5c5c）

改动文件: src/components/Button/Button.tsx

改动内容:

  1. 给 Loading Spinner 加 text-(--Grays-Gray-6) 独立颜色，不继承 disabled 文字色

WEB-727: RadioGroup 选中禁用态样式修复​

状态: 已修复

问题: 禁用+选中态外圈只改了 border 颜色，应该是实填；内圆点在父级传 disabled 时仍显示黑色

改动文件: src/components/RadioGroup/styles.ts, src/components/RadioGroup/RadioGroup.tsx

改动内容:

  1. 禁用选中态外圈：border-(--Grays-Gray-3) → bg-(--Grays-Gray-3) border-transparent（实填）
  2. Item 加 group class，内圆点用 group-data-disabled:bg-(--Grays-Gray-1) 替代 JS 条件判断
  3. 移除 RADIO_DOT_DISABLED_CLASS，合并为单一 RADIO_DOT_CLASS
  4. Indicator 加 size-full 确保 flex 居中生效
  5. 内圆点 size-1.75(7px) → size-1.5(6px)，解决 12px 内容区无法整除居中的问题

WEB-728: Controls 缺少 Checkmark-Fill 和 Checkmark​

状态: 已修复

问题: Controls 模块只有 Checkbox 和 RadioGroup，缺少 Checkmark-Fill 和 Checkmark 展示组件

改动文件: 新建 src/components/Controls/Checkmark.tsx，更新 Controls.tsx、index.ts、components/index.ts

改动内容:

  1. 新建 CheckmarkFill 组件（圆形背景 + 勾选标记，支持 checked/disabled）
  2. 新建 Checkmark 组件（纯勾选标记，支持 checked）
  3. 挂载到 Controls 命名空间：Controls.Checkmark、Controls.CheckmarkFill
  4. 同时支持直接导入：import { Checkmark, CheckmarkFill } from '@plaud/design'

WEB-730: InputSearch 放大镜图标样式不符​

状态: 已修复

问题: 搜索图标使用占位 SVG，颜色用 Labels-Secondary 而非 Labels-Primary

改动文件: src/Icons/index.tsx, src/components/Input/InputSearch.tsx, src/components/Input/input-search-styles.ts

改动内容:

  1. 新增 SearchIcon（Figma icon_search 20995:2085 的真实 SVG path）
  2. InputSearch 从 SearchIconPlaceholder 改为 SearchIcon
  3. 图标容器颜色 Labels-Secondary → Labels-Primary

WEB-740: Spinner 样式与 Figma 有出入​

状态: 已修复（随 WEB-726 一起修复）

问题: Spinner 线条坐标、透明度序列与 Figma 不一致，且多了 strokeLinecap="round"

改动文件: src/components/ProgressIndicators/styles.ts, src/components/ProgressIndicators/Spinner.tsx

改动内容:

  1. 更新 SPINNER_LINES 坐标和透明度，对齐 Figma Spinner (20924:403)
  2. 移除 strokeLinecap="round"（Figma 无此属性）

WEB-741: Switch loading 态缺少 Spinner​

状态: 已修复

问题: Switch loading 态只禁用交互，没有显示 Spinner

改动文件: src/components/ui/switch.tsx, src/components/Switch/Switch.tsx, src/components/Switch/styles.ts

改动内容:

  1. ui 层 Switch 新增 thumbChildren prop，支持向 thumb 内注入子元素
  2. design 层 loading 时传入 12px Spinner（text-(--Grays-Gray-6)）
  3. 新增 SWITCH_THUMB_LOADING_CLASS，loading 时 thumb 用 flex 居中 Spinner

WEB-742: Popover 两点样式优化​

状态: 已修复

问题: 1) 无标题 Popover 缺少字体大小（应为 14px）；2) Popover 到 trigger 间距偏宽（应为 4px）

改动文件: src/components/Popover/styles.ts

改动内容:

  1. POPOVER_CONTENT_CLASS 增加 text-[14px] leading-[22px] 作为基础字体，覆盖无标题场景
  2. POPOVER_SIDE_OFFSET 从 8 → 4，对齐 Figma 规范

WEB-743: Tooltip 两点优化​

状态: 已修复

问题: 1) 字体可能偏大（responsive 模式下 --Font-Size-Body 会变 16px）；2) Tooltip 到 trigger 间距应为 4px

改动文件: src/components/Tooltip/styles.ts

改动内容:

  1. 字体：text-(length:--Font-Size-Body) leading-(--Line-Height-Body) → text-[14px] leading-[22px]，固定 14px 不受 responsive 模式影响
  2. 间距：TOOLTIP_SIDE_OFFSET 从 8 → 4，对齐 Figma 规范

状态: 已修复

问题: 1) 导航按钮箭头默认是灰色，应为白色；2) 悬停后颜色变黑但仍有透明度

改动文件: src/components/ui/carousel.tsx

改动内容:

  1. 导航按钮从 Button variant="outline" 改为原生 <button>，移除 Button 依赖
  2. 新增 CAROUSEL_BUTTON_CLASS：bg-black/20 text-white（默认灰底白箭头）+ hover:bg-black/40（悬停加深）
  3. 保留 disabled:opacity-50、rounded-full、定位类等结构样式

WEB-745: Menu 两点优化​

状态: 已修复

问题: 1) 带标题时，标题距 menu items 间距应为 16px；2) 分组操作按钮的 + 与 Figma 设计组件不符

改动文件: src/components/Menu/styles.ts, src/Icons/index.tsx, design-site menu.mdx(en/zh-CN)

改动内容:

  1. MENU_CONTAINER_CLASS 增加 gap-(--Spacing_16)，header 到 items 间距 16px
  2. 新增 PlusIcon（Figma icon_add_xs I21463:570;21220:2583 的真实 SVG path）
  3. design-site story 中分组操作按钮从纯文本 + 改为 Figma icon_add_xs SVG

WEB-746: Table 样式差异​

状态: 已修复

问题: 表头/列行高度、字色、字重、间距、分割线、对齐、悬停态均与 Figma 不符

改动文件: src/components/Table/styles.ts, src/components/Table/table-data-mode.tsx

改动内容:

  1. 表头 th：min-h-(--Spacing_40) → h-[60px]；font-medium → font-normal；text-(--Labels-Secondary) → text-(--Labels-Tertiary)；px-(--Spacing_12) → px-(--Spacing_16)
  2. 表头行：移除 bg-(--Backgrounds-Tertiary)，分割线改为 border-(--Separators-Default)
  3. 新增 TABLE_BODY_ROW_CLASS：border-0（无行间分割线）+ hover:bg-(--Grays-Gray-1)（悬停态）
  4. 新增 TABLE_BODY_TD_CLASS：h-[60px] px-(--Spacing_16) py-[20px] text-(--Labels-Primary)，对齐表头 px 解决字段未对齐问题
  5. table-data-mode.tsx 中 body 行和 td 应用新样式类

WEB-747: Tabs 样式与 Figma 有出入​

状态: 已修复

问题: 1) Underline 下滑线距离文字过近；2) Chevron 右侧 icon 样式与 Figma 有出入

改动文件: src/components/Tabs/styles.ts, src/components/Tabs/Tabs.tsx, src/Icons/index.tsx

改动内容:

  1. Underline trigger 增加 self-stretch，使触发器拉伸到父容器 40px 高度，下滑线与文字产生正确间距（此前 h-full + 父级 items-center 不生效，trigger 高度坍缩为文字高度）
  2. 新增 ListChevronDownIcon（Figma icon_list_chevron_down 21568:9967，path M5 7.5L10 12.5L15 7.5，无 strokeLinejoin），替换原 ChevronDownIcon