用途
本技能面向将应用从 @lobehub/ui 5.x 升级至 6.x 的迁移任务。v6 不再包含 antd、antd-style、ThemeProvider 和 @lobehub/ui/base-ui 子路径;codemod 负责机械性改写,本技能覆盖其余需要判断和处理的部分。人工迁移指南见 https://ui.lobehub.com/migration-v6,codemod 报告中的每一条目都链接到该指南的对应章节。
主要能力
- 依赖清点与升级:安装 @lobehub/ui@^6、@lobehub/icons@^6、@lobehub/fluent-emoji@^5、motion@^14(若使用 @lobehub/editor 则保留 motion@^13,因其 peer 范围为 ^13),按需安装 @lobehub/charts@^6、@lobehub/editor@^5、@lobehub/tts@^6;移除 antd、antd-style、@ant-design/* 与 rc-*。
- 运行 codemod:在仓库根目录执行 npx --registry=https://registry.npmjs.org @lobehub/ui-codemod@latest v6 . --dry,审阅补丁后去掉 --dry 重跑;报告保存在 .lobe-ui-codemod/v6-*/ 目录,包含 Markdown/JSON 报告与预览补丁。
- 主题迁移:用样式表与 data-theme 属性替换 ThemeProvider,删除 StyleProvider 与 static-css 接线。
- 导入与组件迁移:替换被移除的导出与 antd 组件,逐一核对变更组件的 props,包括 Video/Table/ProTable/DatePicker 被移除的 prop 及其替代项。
- 样式残留清理:处理 createStyles、themeMode/setThemeMode、.ant-* 选择器与 --ant-* 变量;codemod 扫描 JS/TS 字符串及 CSS/Less/Sass 但不改写样式表,其余文件类型与动态选择器需手动排查。
- 表单检查:对使用 @lobehub/ui/form 的提交路径(getValues()、onSubmit、onValuesChange)进行排查,这些回调接收整个 store 而非仅挂载字段,属于静默行为变化,需显式选取发送字段。
- 测试与验证:与升级前基线对比测试;为 motion 使用方包裹 MotionProvider;类型检查、lint 到零错误;重跑 codemod 应无改写;对比亮/暗与桌面/移动、弹窗、表单提交、可访问名称等。
使用方式
按顺序工作,每步后做类型检查,不要将多步合并为一次未验证改动。步骤依次为:清点(package.json、工作区包、入口文件、SSR 外壳、ThemeProvider/StyleProvider/antd App/ConfigProvider 渲染位置、包管理器)→ 依赖调整(使用 --registry=https://registry.npmjs.org,并验证各消费工作区的解析版本,如 pnpm -r list @lobehub/ui --depth 0)→ 运行 codemod → 主题迁移 → 导入与组件迁移 → 样式残留清理 → 表单检查 → 测试与验证。
codemod 报告先看 JSON 的 schemaVersion、codemodVersion、mode、scope、summary 与 nextAction,再查看任务 ID、消息与出现次数,然后加载单个任务的 locations。使用 --report <file.md> 可更改报告路径,已有输出文件不会被覆盖;仅在 stdout 需要 JSON 时使用 --json。注意退出码 0 不代表迁移成功,零发现项仍需执行 nextSteps。
规则
不得为消除报错而重新引入 antd 或 antd-style;若某组件无对应实现,用 @lobehub/ui 部件重建或询问用户。不得针对生成的类名(StyleX 哈希)或 .ant-* 写样式,应通过 className、style、classNames/styles 插槽和文档化的 data-* 属性定制。不得将 ThemeProvider 的 props 传给 ConfigProvider,后者仅支持 customFonts、enableCustomFonts、direction、config、locale、resources 与 motion。保持行为而非标记:v6 组件渲染不同 DOM 时,应修正依赖旧 DOM 的应用 CSS。应用内未分层的全局 CSS 现在会覆盖组件样式,若按钮或输入框被重置,应将重置样式移入 layer。对无法迁移的内容需报告文件与原因,而非留下静默 TODO。
完成标准
无来自 antd、antd-style、@ant-design/、rc- 或 @lobehub/ui/base-ui 的导入残留;theme.css 与 style.css 在应用根导入一次,服务端渲染页面在首屏绘制前设置 data-theme;类型检查、lint 与测试通过,重跑 codemod 无改写;在总结中列出所有人工决策(替换的组件、变更语义的 prop、收窄的表单提交等)。