跳到主要内容

DropdownMenu 级联子菜单样式调优（WEB-1129）

版本： 0.6.3 · 类型： 🐛 缺陷修复

WEB-1129

问题​

级联子菜单视觉与设计稿不符：

  1. 级联箭头过大（用的是 chevronRight 粗箭头）。
  2. 二级菜单与一级菜单错开，未叠在一级菜单之上。
  3. 二级菜单首个选项未与一级菜单父级选项对齐。
  4. 子菜单展开时父级 SubTrigger 背景变深色，应为 hover 的 Gray-1。
  5. 前置图标与箭头图标颜色不统一。

改动文件​

  • packages/design/src/Icons/contract.ts
  • packages/design/src/Icons/index.tsx
  • packages/design/src/components/DropdownMenu/DropdownMenu.tsx
  • packages/design/src/components/DropdownMenu/styles.ts
  • packages/design/src/components/DropdownMenu/DropdownMenuDesignSpec.md
  • 消费方图标 registry：packages/design-site/src/icons/plaud-icon-registry.tsx、apps/web4/src/shared/icons/designIconRegistry.tsx

改动内容​

  1. 向 IconRegistry 新增必填 key listChevronRight（Figma icon_list_chevron_right）；级联箭头改用它，20px 容器，Labels/Primary 色。
  2. 前置图标容器默认 Labels/Primary（业务传入的 node 仍可自行覆盖）。
  3. DropdownMenuSubContent 默认 sideOffset={-8}（与父菜单横向重叠 8px）+ alignOffset={-8}（上移 8px，使首个选项与父级选项对齐），两者均可覆盖。
  4. SubTrigger 展开态背景覆盖为 Grays/Gray-1，与 hover 一致（修复展开时深色背景）。

破坏性变更​

IconRegistry 新增必填 key listChevronRight。所有注入图标 registry 的消费方必须补 icon_list_chevron_right 实现，否则 satisfies IconRegistry 编译报错。monorepo 内消费方（design-site、web4）已同步。