Forráskód Böngészése

📝 docs(epic-008): 修正组件引用路径为共享UI包路径

修正史诗008文档中错误的组件引用路径:
1. 将`@/components/ui/`路径修正为`@d8d/shared-ui-components/components/ui/`
2. 更新技术栈描述:从'shadcn/ui'修正为'@d8d/shared-ui-components'
3. 更新组件转换策略描述
4. 更新故事经理交接说明中的技术栈描述

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 6 napja
szülő
commit
105033f1a1
1 módosított fájl, 16 hozzáadás és 16 törlés
  1. 16 16
      docs/prd/epic-008-allin-ui-modules-transplant.md

+ 16 - 16
docs/prd/epic-008-allin-ui-modules-transplant.md

@@ -25,7 +25,7 @@
 
 - **新增/变更内容**:将7个现有UI模块从allin_system-master/client移植到allin-packages目录下的独立UI包
 - **集成方式**:每个UI模块将重构为独立的npm包,遵循@d8d/allin-命名规范,通过workspace依赖管理
-- **技术栈转换**:从Ant Design + Jotai转换为shadcn/ui + React Query + Hono RPC
+- **技术栈转换**:从Ant Design + Jotai转换为@d8d/shared-ui-components + React Query + Hono RPC
 - **成功标准**:
   1. 7个UI模块成功移植为独立UI包
   2. 保持原有功能完整性
@@ -174,12 +174,12 @@ allin-packages/{module-name}-management-ui/
 
 | 方面 | 当前项目(目标) | allin_system-master(源) | 差异程度 |
 |------|------------------|---------------------------|----------|
-| **UI框架** | React 19 + shadcn/ui | React 19 + Ant Design 5 | **重大** |
+| **UI框架** | React 19 + @d8d/shared-ui-components | React 19 + Ant Design 5 | **重大** |
 | **状态管理** | React Query + Zustand | Jotai | **中等** |
 | **表单处理** | React Hook Form + Zod | Ant Design Form | **重大** |
 | **API客户端** | Hono RPC (hc) | 自定义fetch API | **重大** |
 | **样式方案** | Tailwind CSS + shadcn/ui | Ant Design + Tailwind CSS | **中等** |
-| **组件库** | shadcn/ui组件 | Ant Design组件 | **重大** |
+| **组件库** | @d8d/shared-ui-components组件 | Ant Design组件 | **重大** |
 | **构建工具** | unbuild | Next.js构建 | **重大** |
 | **测试框架** | Vitest + Testing Library | 无测试 | **新增** |
 
@@ -190,7 +190,7 @@ allin-packages/{module-name}-management-ui/
 #### 移植调整方案
 
 ##### A. 架构转换策略
-1. **Ant Design组件 → shadcn/ui组件**:重写所有UI组件
+1. **Ant Design组件 → @d8d/shared-ui-components组件**:重写所有UI组件
 2. **Jotai状态 → React Query + Zustand**:重构状态管理
 3. **Ant Design Form → React Hook Form + Zod**:转换表单逻辑
 4. **自定义fetch API → Hono RPC (hc)**:重构API客户端
@@ -215,9 +215,9 @@ const ChannelTable = ({ data, loading, onEdit, onDelete }) => {
   return <Table dataSource={data} columns={columns} loading={loading} />;
 };
 
-// 转换后shadcn/ui表格组件
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Button } from '@/components/ui/button';
+// 转换后@d8d/shared-ui-components表格组件
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
+import { Button } from '@d8d/shared-ui-components/components/ui/button';
 import { useQuery } from '@tanstack/react-query';
 
 const ChannelTable = () => {
@@ -274,9 +274,9 @@ const ChannelForm = ({ initialValues, onSubmit }) => {
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@d8d/shared-ui-components/components/ui/form';
+import { Input } from '@d8d/shared-ui-components/components/ui/input';
+import { Button } from '@d8d/shared-ui-components/components/ui/button';
 
 const channelSchema = z.object({
   channelName: z.string().min(1, '渠道名称不能为空')
@@ -422,7 +422,7 @@ const useChannels = () => {
 
 **验收标准**:
 1. 创建`allin-packages/channel-management-ui`目录结构
-2. 完成组件转换:从Ant Design转换为shadcn/ui组件
+2. 完成组件转换:从Ant Design转换为@d8d/shared-ui-components组件
 3. 完成API客户端转换:从自定义fetch API转换为Hono RPC
 4. 完成状态管理转换:从Jotai转换为React Query
 5. 完成表单转换:从Ant Design Form转换为React Hook Form + Zod
@@ -512,7 +512,7 @@ const useChannels = () => {
 
 **现状分析**:
 1. **已有包**:`@d8d/area-management-ui`已提供完整的区域管理功能
-2. **技术栈**:与目标技术栈一致(shadcn/ui + React Query + Hono RPC)
+2. **技术栈**:与目标技术栈一致(@d8d/shared-ui-components + React Query + Hono RPC)
 3. **功能匹配**:提供树形区域管理、CRUD操作、搜索等功能
 4. **集成点**:与`@d8d/geo-areas`后端模块已集成
 
@@ -671,11 +671,11 @@ const useChannels = () => {
 "UI模块分析和技术栈分析已完成,关键发现:
 
 1. **依赖关系分析完成**:8个UI模块的依赖关系已明确
-2. **技术栈差异分析完成**:源系统使用Ant Design + Jotai,目标系统使用shadcn/ui + React Query,存在重大架构差异
+2. **技术栈差异分析完成**:源系统使用Ant Design + Jotai,目标系统使用@d8d/shared-ui-components + React Query,存在重大架构差异
 3. **命名方案确定**:使用`@d8d/allin-`前缀,`-management-ui`后缀,非多租户版本
 4. **目录结构**:在`allin-packages/`目录下创建UI包,与后端模块保持相同目录
 5. **移植顺序建议**:从简单到复杂,先移植基础CRUD页面
-6. **技术栈转换方案**:已制定从Ant Design到shadcn/ui的详细转换策略
+6. **技术栈转换方案**:已制定从Ant Design到@d8d/shared-ui-components的详细转换策略
 7. **故事拆分完成**:按模块拆分为8个故事,每个故事包含组件测试要求
 
 **新的故事拆分方案**:
@@ -705,7 +705,7 @@ const useChannels = () => {
 7. 最后执行**故事4、5**(disability-person、order):高复杂度
 
 **技术栈转换关键点**:
-- **Ant Design组件 → shadcn/ui组件**:使用现有shadcn/ui组件库
+- **Ant Design组件 → @d8d/shared-ui-components组件**:使用现有共享UI组件库
 - **Jotai状态 → React Query + Zustand**:使用TanStack Query进行数据管理
 - **Ant Design Form → React Hook Form + Zod**:使用hook form + zod验证
 - **自定义fetch API → Hono RPC (hc)**:使用类型安全的RPC客户端
@@ -739,4 +739,4 @@ const useChannels = () => {
 - 保持API兼容性,制定数据迁移方案
 - 注意组件性能,合理使用memoization
 
-史诗应在保持用户体验一致性的同时实现将UI模块从Ant Design架构移植到shadcn/ui架构的标准化独立UI包,每个模块都要有完整的组件测试验证,并完成与现有文件管理UI包的集成。"
+史诗应在保持用户体验一致性的同时实现将UI模块从Ant Design架构移植到@d8d/shared-ui-components架构的标准化独立UI包,每个模块都要有完整的组件测试验证,并完成与现有文件管理UI包的集成。"