【免费下载链接】plannotatorAnnotate and review coding agent plans and code diffs visually, share with your team, send feedback to agents with one click.项目地址https://gitcode.com/gh_mirrors/pl/plannotator点击查看免费下载本篇技术指南以 plannotator 仓库packages/ui/.migration/dropdown-menu.md迁移记录为骨架完整还原 2026-07-07 这次组件引擎替换的全过程为什么选base-ui/react/menu作为新的菜单基元、Portal Positioner Popup三层结构如何重构Content与SubContent、消费端OpenInAppButton、Agent 选择器如何从 Radix 的asChild/onSelect迁移到 Base UI 的render/onClick以及公开 API 上的破坏性变更与 HANDOFF 项。读者读完将掌握一套可复制的Radix → Base UI迁移方法论既懂组件层改造也懂消费端同步清扫与手工验收清单。迁移背景与总体判定packages/ui/HANDOFF.md明确记录了这次迁移的宏观背景从0.23.0起plannotator/ui全面构建在Base UIbase-ui/react^1.6.0当前 packages/ui/package.json 中为^1.7.0之上取代 Radix。这一举措与 shadcn/ui 在 2026 年 7 月将 Base UI 设为默认引擎的生态变化保持一致并且是一次整包级、零混合引擎的刻意迁移——迁移完成后仓库内零radix-ui/*依赖残留。本次 dropdown-menu 的迁移判定verdict是DropdownMenu → Base UI Menu采用规范的Portal Positioner Popup结构重组并在同一个提交内清扫 2 个仓库内消费端OpenInAppButton与AnnotateAgentTerminalPanel同时对公开 API 表面标记了若干差异项deltas。迁移记录的收尾验证方式是全局残留扫描grep -n radix-ui\|radix-ui对三个改动文件执行后均无匹配确认radix-ui/react-dropdown-menu已彻底移除。组件层改造dropdown-menu.tsx 的重写要点迁移的核心文件是 packages/ui/components/ui/dropdown-menu.tsx依赖从radix-ui/react-dropdown-menu切换为base-ui/react/menu源码第 1 行import { Menu as MenuPrimitive } from base-ui/react/menu。所有导出名称被完整保留外部导入路径plannotator/ui/components/ui/dropdown-menu无需变化这为消费端迁移提供了第一层兼容保障。Content/SubContent 的三层结构重组FORWARD 规则Radix 时代的Content直接承载弹出层Base UI 将其拆分为Portal传送门 Positioner定位器 Popup弹出层三层。源码中DropdownMenuContent的实现在第 26–52 行function DropdownMenuContent({ className, side, sideOffset 4, align, alignOffset, ...props }: MenuPrimitive.Popup.Props PickMenuPrimitive.Positioner.Props, side | sideOffset | align | alignOffset) { return ( MenuPrimitive.Portal MenuPrimitive.Positioner classNameisolate z-50 outline-none side{side} sideOffset{sideOffset} align{align} alignOffset{alignOffset} MenuPrimitive.Popup >function DropdownMenuSubContent({ className, side right, sideOffset 0, align start, alignOffset -3, ...props })迁移记录明确指出这些默认值是**承重load-bearing**的——Radix 的SubContent隐含了sideright与start对齐行为迁移到 Base UI 后这些隐含语义不复存在必须以显式默认值补回否则子菜单会出现在错误位置。alignOffset{-3}用于抵消子菜单触发器与弹出层之间的视觉缝隙。部件重命名对照Base UI 的部件命名更贴近语义本次迁移涉及以下改名全部在 packages/ui/components/ui/dropdown-menu.tsx 中有对应实现Radix 名称Base UI 名称说明LabelGroupLabel语义化为组标签且必须位于Group内部ItemIndicatorCheckboxItemIndicator/RadioItemIndicator按复选/单选拆分为两个指示器部件SubSubmenuRoot子菜单根节点SubTriggerSubmenuTrigger子菜单触发器动画与交互态的类名重写Radix 时代依赖 tw-animate 的 keyframes 动画data-[stateopen]:animate-inslide-in-from-*系列Base UI 采用基于 transition 的起始/结束样式starting/ending style。迁移后的 Popup 共享样式源码第 23–24 行origin-[var(--transform-origin)] transition-[opacity,scale] duration-150>赞分享【免费下载链接】plannotatorAnnotate and review coding agent plans and code diffs visually, share with your team, send feedback to agents with one click.项目地址https://gitcode.com/gh_mirrors/pl/plannotator点击查看免费下载相关推荐plannotator review-editorQAChecklist 复选框组件从 Radix 迁移到 Base UI 的 1:1 改造实录plannotator review editorQAChecklist 复选框组件从 Radix 迁移到 Base UI 的 1:1 改造实录 本文围绕 pplannotator/ui Badge 组件迁移实录Radix asChild 到 Base UI render 的多态改造解析plannotator/ui Badge 组件迁移实录Radix asChild 到 Base UI render 的多态改造解析 本文以 迁移报告 httplannotator 评审编辑器实践把 DiffTypePicker 从 Radix DropdownMenu 迁移到 Base UI Menuplannotator 评审编辑器实践把 DiffTypePicker 从 Radix DropdownMenu 迁移到 Base UI Menu 本文以 p上一篇OpenCore Legacy Patcher终极指南让老旧Mac重获新生的完整教程下一篇HarfBuzz 文本整形中的簇(Cluster)机制详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
plannotator 下拉菜单组件迁移实录：从 Radix 到 Base UI 的 DropdownMenu 改造指南
【免费下载链接】plannotatorAnnotate and review coding agent plans and code diffs visually, share with your team, send feedback to agents with one click.项目地址https://gitcode.com/gh_mirrors/pl/plannotator点击查看免费下载本篇技术指南以 plannotator 仓库packages/ui/.migration/dropdown-menu.md迁移记录为骨架完整还原 2026-07-07 这次组件引擎替换的全过程为什么选base-ui/react/menu作为新的菜单基元、Portal Positioner Popup三层结构如何重构Content与SubContent、消费端OpenInAppButton、Agent 选择器如何从 Radix 的asChild/onSelect迁移到 Base UI 的render/onClick以及公开 API 上的破坏性变更与 HANDOFF 项。读者读完将掌握一套可复制的Radix → Base UI迁移方法论既懂组件层改造也懂消费端同步清扫与手工验收清单。迁移背景与总体判定packages/ui/HANDOFF.md明确记录了这次迁移的宏观背景从0.23.0起plannotator/ui全面构建在Base UIbase-ui/react^1.6.0当前 packages/ui/package.json 中为^1.7.0之上取代 Radix。这一举措与 shadcn/ui 在 2026 年 7 月将 Base UI 设为默认引擎的生态变化保持一致并且是一次整包级、零混合引擎的刻意迁移——迁移完成后仓库内零radix-ui/*依赖残留。本次 dropdown-menu 的迁移判定verdict是DropdownMenu → Base UI Menu采用规范的Portal Positioner Popup结构重组并在同一个提交内清扫 2 个仓库内消费端OpenInAppButton与AnnotateAgentTerminalPanel同时对公开 API 表面标记了若干差异项deltas。迁移记录的收尾验证方式是全局残留扫描grep -n radix-ui\|radix-ui对三个改动文件执行后均无匹配确认radix-ui/react-dropdown-menu已彻底移除。组件层改造dropdown-menu.tsx 的重写要点迁移的核心文件是 packages/ui/components/ui/dropdown-menu.tsx依赖从radix-ui/react-dropdown-menu切换为base-ui/react/menu源码第 1 行import { Menu as MenuPrimitive } from base-ui/react/menu。所有导出名称被完整保留外部导入路径plannotator/ui/components/ui/dropdown-menu无需变化这为消费端迁移提供了第一层兼容保障。Content/SubContent 的三层结构重组FORWARD 规则Radix 时代的Content直接承载弹出层Base UI 将其拆分为Portal传送门 Positioner定位器 Popup弹出层三层。源码中DropdownMenuContent的实现在第 26–52 行function DropdownMenuContent({ className, side, sideOffset 4, align, alignOffset, ...props }: MenuPrimitive.Popup.Props PickMenuPrimitive.Positioner.Props, side | sideOffset | align | alignOffset) { return ( MenuPrimitive.Portal MenuPrimitive.Positioner classNameisolate z-50 outline-none side{side} sideOffset{sideOffset} align{align} alignOffset{alignOffset} MenuPrimitive.Popup >function DropdownMenuSubContent({ className, side right, sideOffset 0, align start, alignOffset -3, ...props })迁移记录明确指出这些默认值是**承重load-bearing**的——Radix 的SubContent隐含了sideright与start对齐行为迁移到 Base UI 后这些隐含语义不复存在必须以显式默认值补回否则子菜单会出现在错误位置。alignOffset{-3}用于抵消子菜单触发器与弹出层之间的视觉缝隙。部件重命名对照Base UI 的部件命名更贴近语义本次迁移涉及以下改名全部在 packages/ui/components/ui/dropdown-menu.tsx 中有对应实现Radix 名称Base UI 名称说明LabelGroupLabel语义化为组标签且必须位于Group内部ItemIndicatorCheckboxItemIndicator/RadioItemIndicator按复选/单选拆分为两个指示器部件SubSubmenuRoot子菜单根节点SubTriggerSubmenuTrigger子菜单触发器动画与交互态的类名重写Radix 时代依赖 tw-animate 的 keyframes 动画data-[stateopen]:animate-inslide-in-from-*系列Base UI 采用基于 transition 的起始/结束样式starting/ending style。迁移后的 Popup 共享样式源码第 23–24 行origin-[var(--transform-origin)] transition-[opacity,scale] duration-150>赞分享【免费下载链接】plannotatorAnnotate and review coding agent plans and code diffs visually, share with your team, send feedback to agents with one click.项目地址https://gitcode.com/gh_mirrors/pl/plannotator点击查看免费下载相关推荐plannotator review-editorQAChecklist 复选框组件从 Radix 迁移到 Base UI 的 1:1 改造实录plannotator review editorQAChecklist 复选框组件从 Radix 迁移到 Base UI 的 1:1 改造实录 本文围绕 pplannotator/ui Badge 组件迁移实录Radix asChild 到 Base UI render 的多态改造解析plannotator/ui Badge 组件迁移实录Radix asChild 到 Base UI render 的多态改造解析 本文以 迁移报告 httplannotator 评审编辑器实践把 DiffTypePicker 从 Radix DropdownMenu 迁移到 Base UI Menuplannotator 评审编辑器实践把 DiffTypePicker 从 Radix DropdownMenu 迁移到 Base UI Menu 本文以 p上一篇OpenCore Legacy Patcher终极指南让老旧Mac重获新生的完整教程下一篇HarfBuzz 文本整形中的簇(Cluster)机制详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
