【免费下载链接】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），仅供参考
企业数字化 ERP 产品动态
相关推荐
大模型迈入10T时代：大厂疯狂买卡削HC，27届秋招迎寒冬？ 大模型迈入10T时代：大厂疯狂买卡削HC，27届秋招迎寒冬？
当参数规模从1T冲向8至10T，27届秋招却迎来HC骤减的刺骨寒风。近期脉脉热帖揭示了算力跃进与岗位收缩的剧烈反差：大厂狂买算力卡的同时，以只出不进方式… · 2026/9/26 10:08:57
品清别墅装修设计施工服务靠谱吗 从2004年上海高端别墅设计工作室起步，到如今长三角地区布局无锡、常州、南通、扬州四家直营分公司，上海品清装饰设计工程有限公司无锡分公司(以下简称品清装饰)已经在别墅装修赛道深耕二十余年。二十余年间，家装行业从分散的队作业走向规模化… · 2026/9/26 10:08:57
基于ESP32-S3的桌面AI语音助手MimiClaw从零搭建全记录 大概半年前，我彻底对手机里的语音助手失去耐心：喊一声要等图标弹出来，问个天气先解锁，再等它联网，经常换来一句“这个我还不会”。那阵子手头正好多了一块 ESP32-S3 开发板，就琢磨着能不能自己在桌面上搞一… · 2026/9/26 10:08:51
MCP协议解析：构建开源AI Agent工作流的协议级替代方案 1. 项目概述：WorkBuddy 是什么，为什么需要“平替”？WorkBuddy 不是一个传统意义上的软件产品，而是一套面向开发者与技术型产品经理的智能协作工作流引擎。它本质是将大模型能力深度嵌入日常开发、测试、设计协同场景的轻量级 Agen… · 2026/9/26 11:26:55
2026年评价高的斗式提升机设备厂家质量参考评选：用户力荐的制造厂家有哪些 选斗式提升机必踩的4大坑，你中了几个?作为物料输送环节的核心设备，斗式提升机的选择直接影响生产效率、物料损耗和车间合规性。很多客户在选购时都会遇到这些共性难题：
车间场地有限却硬塞大型设备，改造土建成本陡增：… · 2026/9/26 11:26:37
诚峰建材花岗石大板切割 支持来图定制 保障供货周期与品质 工程优选 花岗石行业基础科普：认识工程常用花岗石建材花岗石是一种源自天然岩浆岩的硬质石材，主要由石英、长石和云母等矿物质组成，形成过程经过亿万年地质作用，质地本身具备天然的高密度与高强度特性。不同于人工合成建材，天然… · 2026/9/26 11:26:37
Modbus RTU与TCP核心区别：报文帧、实操对比与避坑指南 搞工业通讯的，迟早要跟 Modbus 打交道。刚入行那会儿我总被一个问题卡住：Modbus RTU 和 Modbus TCP，看起来都叫 Modbus，报文里都有功能码、都有寄存器地址，到底差在哪？为什么有人说“程序改改就能用”&… · 2026/9/26 11:26:37
6460张工业级烟火检测VOC数据集：烟雾与明火双类别精标 简介：本资源为面向计算机视觉算法研发与火灾检测应用的高质量烟火目标检测数据集，适用于YOLO、Faster R-CNN等主流检测模型的训练与验证，特别适合安防监控、森林防火、工业安全等场景下的烟雾与明火双类别识别任务。数据集严格遵循Pascal VOC… · 2026/9/26 11:26:31
ResNet18集成CBAM注意力机制实战指南 简介：本资源是一套基于PyTorch实现的ResNet18视觉模型增强方案，面向计算机、人工智能、自动化等专业的在校学生、教师及初学者，聚焦深度学习中注意力机制的实践落地与模型性能对比分析。压缩包共7个文件（6个Python源码1个README说… · 2026/9/26 11:26:31
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
