|
|
@@ -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包的集成。"
|