【免费下载链接】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/dialog.md迁移报告为核心骨架完整记录plannotator/ui包中 shadcn 风格对话框组件从 Radixradix-ui/react-dialog切换到 Base UIbase-ui/react/dialog的工程决策、API 映射、动画体系重构与行为变更。读者可以从中掌握Base UI 的Backdrop/Popup部件与 RadixOverlay/Content的对应关系、data-starting-style/data-ending-style过渡式动画替代 keyframes 动画的写法、onOpenChange双参签名与 dismiss 原因分支的迁移方式以及如何通过仓库内真实调用点如ReviewSubmissionDialog、ConfirmDialog完成兼容验证。迁移背景为什么 plannotator 要换掉 Radix Dialog2026-07-07plannotator 的 UI 包启动了一场覆盖整个packages/ui的引擎迁移将所有 Radix 系依赖替换为 Base UIbase-ui/react1.6.0。这次迁移的背景与约束在packages/ui/.migration/project.md中有完整记录跟随 shadcn/ui 的引擎默认Base UI 自 2026 年 7 月起成为 shadcn/ui 的默认引擎plannotator 的components/ui/目录正是 shadcn 风格的手写 vendored kit因此同步迁移。无 golden-pair CLI仓库没有components.json组件是手写维护的 kit无法使用官方迁移 CLI只能靠transformation engine手工逐个迁移。版本门槛base-ui/react1.6.02026-06-18 发布通过了仓库 7 天的minimumReleaseAge安装门禁可被安装。并行迁移packages/ui与packages/review-editor由两个 agent 并行迁移迁移报告统一放在packages/ui/.migration/目录避免与仓库根目录的报告冲突。在迁移之前packages/ui/package.json中与对话框相关的 Radix 依赖是radix-ui/react-dialog迁移完成后该依赖被彻底移除最终状态由packages/ui/package.json确认依赖列表只剩base-ui/react: ^1.7.0全包不再存在任何radix-ui/*引用迁移报告原文grep -rn radix-ui packages/ui仅剩.migration历史记录。本次迁移的对话框部分即本文主题由packages/ui/.migration/dialog.md独立记录。变更总览一次部件重命名 动画体系重写的定点手术packages/ui/.migration/dialog.md将本次对话框迁移定性为Verdict: restructured Overlay→Backdrop, Content→Popup; keyframe animations → transition-based starting/ending styles.即对话框迁移的核心只有两件事部件重命名Radix 的Overlay/Content映射为 Base UI 的Backdrop/Popup与动画体系切换keyframes 动画切换为基于 transition 的起始/结束样式。结构类、视觉类样式居中 translate、rounded-2xl、阴影、z-[110]逐字节保持不变。受影响的文件为packages/ui/components/ui/dialog.tsx下面逐条对照迁移前后差异。1. 依赖与 Primitive 来源迁移前Radiximport { Dialog, DialogOverlay, DialogContent, ... } from radix-ui/react-dialog;迁移后Base UIimport { Dialog as DialogPrimitive } from base-ui/react/dialog;组件文件的完整导出集合见 dialog.tsxconst Dialog DialogPrimitive.Root; const DialogTrigger DialogPrimitive.Trigger; const DialogPortal DialogPrimitive.Portal; const DialogClose DialogPrimitive.Close;2. Overlay → BackdropContent → Popup迁移报告明确指出DialogOverlay现在包装DialogPrimitive.Backdrop保留导出名DialogOverlayDialogContent则在Portal Backdrop Popup的层级中包装DialogPrimitive.Popup。源码证实了这一点dialog.tsxconst DialogOverlay React.forwardRef React.ComponentReftypeof DialogPrimitive.Backdrop, React.ComponentPropsWithoutReftypeof DialogPrimitive.Backdrop (({ className, ...props }, ref) ( DialogPrimitive.Backdrop ref{ref} >DialogPortal DialogOverlay className{backdropClassName} / div classNamepn-visible-viewport-overlay z-[110] pointer-events-none flex items-center justify-center DialogPrimitive.Popup ref{ref} className{cn( relative pointer-events-auto z-[110] w-full min-h-0, max-w-4xl max-h-[min(640px,85vh,100%)], flex flex-col overflow-hidden, rounded-2xl border border-border bg-popover text-popover-foreground, shadow-[0_24px_80px_-36px_rgba(15,23,42,0.5)], transition-[opacity,scale] duration-200, data-starting-style:opacity-0>Dialog open{isOpen} disablePointerDismissal onOpenChange{(open) { // 单参 handlerBase UI 下依然类型安全 if (!open) onClose(); }} DialogContent ... DialogTitle{title}/DialogTitle ... /DialogContent /Dialog关键点disablePointerDismissal是 Base UIDialog.Root的原生 prop用于禁止点击遮罩关闭迁移后直接透传无需任何适配。单参onOpenChangehandler 完全合法——这正是迁移报告强调的single-arg handlers stay type-safe。案例二ReviewSubmissionDialog评审提交对话框ReviewSubmissionDialog.tsx 展示了迁移后自定义 props 的完整组合Dialog open{isOpen} disablePointerDismissal onOpenChange{(open) { if (!open !isSubmitting) onCancel(); }} DialogContent hideClose initialFocus{isCompactTouchLayout || bodyLocked ? false : () generalCommentRef.current} backdropClassNamebg-background/80 backdrop-blur-sm className!max-h-full max-w-md rounded-xl bg-card p-0 text-foreground shadow-2xl transition-none ... /DialogContent /Dialog这里用到了三个值得注意的 APIhideClose隐藏默认的右上角 X 关闭按钮该对话框由底部操作条提供Cancel/Post Comments按钮。initialFocusBase UI 替代 RadixonOpenAutoFocus的新 prop值为false禁止自动聚焦触摸布局或锁定状态下或一个返回聚焦目标元素的函数聚焦到 general comment 的textarearef。backdropClassName覆盖默认黑色遮罩改为bg-background/80 backdrop-blur-sm与页面主题背景一致。此外className... transition-none展示了如何通过 tailwind-mergecn覆盖 Popup 的默认过渡动画——迁移后动画基于 CSS transition因此调用方可以完全禁用或替换它。该对话框的roledialog、聚焦管理、Escape 关闭、点击外部关闭等行为都依赖 Base UIDialog.Root的底层实现而 plannotator 的移动端测试如 ConfirmDialog.mobile.test.tsx、CommentPopover.mobile.test.tsx会在.pn-visible-viewport-overlay容器内断言[roledialog]与触控目标data-pn-touch-target的渲染说明该对话框已被纳入移动端回归保障。逐项验证清单Verify by hand迁移报告在末尾给出了手工验证清单覆盖交互语义、关闭路径与自定义 prop这是迁移完成后质量把关的最终手段开/关动画打开与关闭对话框时应看到淡入淡出 缩放fadescale背景为深色模糊遮罩dark blurred backdrop。三种关闭路径 焦点归还Escape 关闭点击遮罩外部关闭点击 X 按钮关闭关闭后焦点返回触发元素focus returns to the trigger on close。hideClose生效传入hideClose时不再渲染任何 X 按钮。结合源码第 2 点的焦点归还由 Base UIDialog的finalFocus机制保证HANDOFF 第 6 条提到onCloseAutoFocus→finalFocus默认行为是归还给触发元素第 3 点可直接从 dialog.tsx 的{!hideClose (...)}条件渲染得到代码级确认。迁移收尾与后续影响对话框只是整个packages/ui引擎迁移的第 4 步迁移顺序为 badge → button → tabs → dialog → dropdown-menu → Popover wrapper → Tooltip wrapper → PopoutDialog → OpenInAppButton sweep见 project.md但它奠定了后续所有 overlay 组件的迁移范式部件重命名保持导出名不变、动画改用 starting/ending style、内容级 dismiss 回调上移到 Root 的eventDetails.reason。迁移完成后的全包最终状态packages/ui/.migration/project.md记录6 个radix-ui/*依赖全部从packages/ui/package.json移除base-ui/react1.6.0精确锁定加入当前仓库已升至^1.7.0。tailwindcss-animatepeer 依赖移除发布的styles.css重建后从 187.4 kB 降至 186.0 kB。版本升至0.23.0发布仍由 owner 门控packages/ui/HANDOFF.md新增 UI engine: Base UI (0.23.0) 章节罗列 11 项破坏性/行为变更。全仓测试 1955 通过 / 0 失败apps/review、build:hook、build:opencode、build:css全部通过。浏览器冒烟测试Playwright真实编译产物6 个场景全部通过。packages/ui内 0 个 wrapper 仍停留在 Radixgrep -rn radix-ui packages/ui仅剩.migration报告中的历史提及。对于希望在自己的项目里把 Radix Dialog 迁移到 Base UI 的读者本文的迁移报告可以作为一份可直接复用的对照表先按Overlay→Backdrop、Content→Popup重命名部件再把animate-in/outkeyframes 类换成transition-*data-starting-style/data-ending-style最后把内容级 dismiss 回调收编到 Root 的onOpenChange(open, eventDetails)中按reason分支处理即可获得与 Radix 时代视觉等价、但基于 CSS transition 的现代对话框实现。参考文件索引迁移报告packages/ui/.migration/dialog.md本文主体全包迁移策略与清单packages/ui/.migration/project.md迁移后的组件源码dialog.tsx消费者示例ConfirmDialog.tsx、ReviewSubmissionDialog.tsx引擎迁移总结与破坏性变更清单packages/ui/HANDOFF.md移动端视口容器定义theme.css移动端对话框回归测试ConfirmDialog.mobile.test.tsx、CommentPopover.mobile.test.tsx赞分享【免费下载链接】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 review editor 的 Popover 迁移实录从 Radix UI 切换到 Base UI 的完整转换手册plannotator review editor 的 Popover 迁移实录从 Radix UI 切换到 Base UI 的完整转换手册 本文基于 popElement UI 对话框组件 Dialog 使用详解Element UI 对话框组件 Dialog 使用详解 什么是 Dialog 组件 Dialog 对话框组件是 Element UI 提供的一个模态窗口组件前端UI组件设计系统上一篇3分钟定位用户行为异常Pinpoint前端埋点与后端关联实战指南下一篇Kubernetes Ingress-NGINX终极兼容性实战指南从K8s 1.23到1.35版本适配方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
