Skip to content

MIGRATION_PROGRESS.md

Latest commit

 

History

History
120 lines (94 loc) · 4.1 KB

MIGRATION_PROGRESS.md

File metadata and controls

120 lines (94 loc) · 4.1 KB
Raw

组件迁移进度总结

已完成迁移的组件 ✅

高优先级 (P0-P1)

1. Accordion

  • Headless 层: Root, Item, Trigger, Chevron, Content
  • Shadcn 层: 使用 AccordionPrimitive 组装，支持 single/multiple 模式
  • 导出: export * as AccordionPrimitive from "./accordion"

2. Dialog

  • Headless 层: Root, Overlay, Content, Header, Title, Body, Footer, Close, Cancel, OK
  • Shadcn 层: 使用 DialogPrimitive 组装，支持动画和遮罩
  • 导出: export * as DialogPrimitive from "./dialog"

3. Tabs

  • Headless 层: Root, List, Tab, Indicator, Content
  • Shadcn 层: 使用 TabsPrimitive 组装，支持动态渲染 tabs
  • 导出: export * as TabsPrimitive from "./tabs"

4. Toast

  • Headless 层: Root, Mask, Viewport, Item, Icon, Text, Close
  • Shadcn 层: 使用 ToastPrimitive 组装，支持 loading 图标和多行文本
  • 导出: export * as ToastPrimitive from "./toast"

5. Menu

  • Headless 层: 已经是 Primitive 架构，只需移除 theme 导入
  • 改动: 移除 import { tp, merge } from "./theme"
  • 导出: 已经是 export * as MenuPrimitive from "./menu"

6. Sheet

  • Headless 层: Root, Overlay, Content, Header, Title, Description, Close
  • Shadcn 层: 使用 SheetPrimitive 组装，支持 4 个方向（right/left/top/bottom）
  • 导出: export * as SheetPrimitive from "./sheet"

7. Context Menu

  • Headless 层: 已经是 Primitive 架构，只需移除 theme 导入
  • 改动: 移除 import { merge, tp } from "./theme"
  • 导出: 已经是 export * as ContextMenuPrimitive from "./context-menu"

中优先级 (P2)

8. Toggle

  • Headless 层: Root, Thumb
  • Shadcn 层: 使用 TogglePrimitive 组装，支持 checked 状态
  • 导出: export * as TogglePrimitive from "./toggle"

9. Slider

  • Headless 层: Root, Track, Range, Thumb
  • Shadcn 层: 使用 SliderPrimitive 组装，支持拖拽和步进
  • 导出: export * as SliderPrimitive from "./slider"

10. Textarea

  • Headless 层: 移除 theme 支持，直接使用 class 和 style
  • Shadcn 层: 直接传递样式类
  • 导出: export * from "./textarea"（保持原有导出方式）

低优先级 (P3)

11. Progress

  • Headless 层: Root, Indicator
  • Shadcn 层: 使用 ProgressPrimitive 组装，支持 store 和 value 两种模式
  • 导出: export * as ProgressPrimitive from "./progress"

迁移统计

  • 总计完成: 11 个组件
  • 高优先级 (P0-P1): 7/7 ✅ 全部完成
  • 中优先级 (P2): 3/3 ✅ 全部完成
  • 低优先级 (P3): 1/1 ✅ 全部完成

🎉 所有组件迁移完成！

所有计划中的组件已经全部完成迁移，从 theme-based 架构升级到 Primitive 架构。

关键改进

  1. 架构统一: 所有组件遵循 Core + Primitive + Shadcn 三层架构
  2. 移除 theme: 不再使用 theme-based 配置，改用直接的样式类
  3. 响应式状态: 使用 refobj 和 computed 管理状态
  4. 组件拆分: 每个组件拆分为多个可组合的 Primitive 组件
  5. 类型安全: 所有组件都有明确的类型定义
  6. 可访问性: 添加适当的 ARIA 属性（如 progress 的 role 和 aria-* 属性）

导出方式总结

Primitive 导出（命名空间）

  • AccordionPrimitive
  • DialogPrimitive
  • TabsPrimitive
  • ToastPrimitive
  • MenuPrimitive
  • SheetPrimitive
  • ContextMenuPrimitive
  • TogglePrimitive
  • SliderPrimitive
  • ProgressPrimitive
  • ButtonPrimitive
  • InputPrimitive
  • SelectPrimitive
  • CheckboxPrimitive
  • FieldPrimitive
  • PopoverPrimitive
  • TooltipPrimitive
  • DropdownMenuPrimitive
  • ResizablePanelsPrimitive
  • PopperPrimitive

直接导出

  • Textarea（简单组件，无需拆分）
  • 其他内容组件（flex, head, paragraph, table, avatar, card, label, badge, separator, skeleton, alert）

下一步建议

  1. ✅ 更新使用这些组件的应用代码
  2. ✅ 测试所有迁移后的组件功能
  3. ✅ 编写迁移文档和示例
  4. ✅ 清理旧的 theme.ts 相关代码（如果不再使用）
  5. ✅ 更新组件文档，说明新的使用方式