# 项目结构重构计划

## 当前问题分析

### 1. 目录结构混乱
- 智谱AI 和 DeepSeek AI 的页面分散在不同目录
- 缺乏清晰的平台分离

### 2. 路由配置复杂
- 两套独立的路由配置
- 路由路径不够语义化
- 缺乏统一的平台标识

### 3. 代码复用困难
- 相似功能的组件分散在不同目录
- 缺乏共享组件的统一管理
- 平台特定的逻辑与通用逻辑混合

## 重构目标

### 1. 清晰的平台分离
- 按 AI 平台组织代码结构
- 统一的命名规范
- 清晰的职责划分

### 2. 提高代码复用性
- 提取共享组件
- 统一 API 调用方式
- 减少重复代码

### 3. 改善可维护性
- 统一的开发规范
- 清晰的模块边界
- 便于功能扩展

## 重构方案

### 阶段一：目录结构重组

#### 1. 创建新的目录结构
```
src/pages/
├── platforms/
│   ├── deepseek/           # DeepSeek AI 平台
│   │   ├── questionAnswer/
│   │   ├── knowledgeLib/
│   │   ├── audit/
│   │   └── dataExport/
│   └── zhipu/              # 智谱AI 平台
│       ├── questionAnswer/
│       ├── knowledgeLib/
│       └── dataExport/
└── shared/                 # 共享页面组件
```


### 阶段二：路由配置优化

#### 1. 统一路由前缀
```typescript
// 新的路由结构
const platformRoutes = {
    deepseek: {
        path: '/deepseek',
        children: [
            { path: 'questionAnswer', element: lazyLoad(() => import('@/pages/platforms/deepseek/questionAnswer')) },
            { path: 'knowledgeLib', element: lazyLoad(() => import('@/pages/platforms/deepseek/knowledgeLib')) },
            { path: 'audit', element: lazyLoad(() => import('@/pages/platforms/deepseek/audit')) },
            { path: 'dataExport', element: lazyLoad(() => import('@/pages/platforms/deepseek/dataExport')) },
        ]
    },
    zhipu: {
        path: '/zhipu',
        children: [
            { path: 'questionAnswer', element: lazyLoad(() => import('@/pages/platforms/zhipu/questionAnswer')) },
            { path: 'knowledgeLib', element: lazyLoad(() => import('@/pages/platforms/zhipu/knowledgeLib')) },
            { path: 'dataExport', element: lazyLoad(() => import('@/pages/platforms/zhipu/dataExport')) },
        ]
    }
};
```

#### 2. 更新路由配置
- 修改 `src/router.tsx` 文件
- 更新面包屑配置
- 调整默认重定向逻辑

### 阶段三：API 层重构

#### 1. 创建平台特定的 API 模块
```typescript
// src/apis/platforms/deepseek.ts
export const deepseekApis = {
    questionAnswer: {
        list: (params: any) => request.get('/deepseek/question-answer', { params }),
        create: (data: any) => request.post('/deepseek/question-answer', data),
        update: (id: string, data: any) => request.put(`/deepseek/question-answer/${id}`, data),
        delete: (id: string) => request.delete(`/deepseek/question-answer/${id}`),
    },
    knowledgeLib: {
        list: (params: any) => request.get('/deepseek/knowledge-lib', { params }),
        detail: (id: string) => request.get(`/deepseek/knowledge-lib/${id}`),
        create: (data: any) => request.post('/deepseek/knowledge-lib', data),
    },
    audit: {
        list: (params: any) => request.get('/deepseek/audit', { params }),
    },
    dataExport: {
        export: (params: any) => request.get('/deepseek/data-export', { params }),
    },
};

// src/apis/platforms/zhipu.ts
export const zhipuApis = {
    questionAnswer: {
        list: (params: any) => request.get('/zhipu/question-answer', { params }),
        create: (data: any) => request.post('/zhipu/question-answer', data),
        update: (id: string, data: any) => request.put(`/zhipu/question-answer/${id}`, data),
        delete: (id: string) => request.delete(`/zhipu/question-answer/${id}`),
    },
    knowledgeLib: {
        list: (params: any) => request.get('/zhipu/knowledge-lib', { params }),
        detail: (id: string) => request.get(`/zhipu/knowledge-lib/${id}`),
        create: (data: any) => request.post('/zhipu/knowledge-lib', data),
    },
    dataExport: {
        export: (params: any) => request.get('/zhipu/data-export', { params }),
    },
};
```

#### 2. 创建统一的 API 接口
```typescript
// src/apis/platforms/index.ts
export interface PlatformApi {
    questionAnswer: {
        list: (params: any) => Promise<any>;
        create: (data: any) => Promise<any>;
        update: (id: string, data: any) => Promise<any>;
        delete: (id: string) => Promise<any>;
    };
    knowledgeLib: {
        list: (params: any) => Promise<any>;
        detail: (id: string) => Promise<any>;
        create: (data: any) => Promise<any>;
    };
    dataExport: {
        export: (params: any) => Promise<any>;
    };
}

export const platformApis: Record<string, PlatformApi> = {
    deepseek: deepseekApis,
    zhipu: zhipuApis,
};
```

### 阶段四：组件重构

#### 1. 提取共享组件
```typescript
// src/components/shared/QuestionAnswerList.tsx
interface QuestionAnswerListProps {
    platform: 'deepseek' | 'zhipu';
    data: any[];
    loading: boolean;
    onAction: (action: string, data: any) => void;
}

const QuestionAnswerList: React.FC<QuestionAnswerListProps> = ({
    platform,
    data,
    loading,
    onAction,
}) => {
    // 通用的列表组件实现
};

// src/components/shared/KnowledgeLibList.tsx
interface KnowledgeLibListProps {
    platform: 'deepseek' | 'zhipu';
    data: any[];
    loading: boolean;
    onAction: (action: string, data: any) => void;
}

const KnowledgeLibList: React.FC<KnowledgeLibListProps> = ({
    platform,
    data,
    loading,
    onAction,
}) => {
    // 通用的知识库列表组件实现
};
```

#### 2. 平台特定组件
```typescript
// src/pages/platforms/deepseek/questionAnswer/index.tsx
const DeepSeekQuestionAnswer: React.FC = () => {
    const store = useDeepSeekStore();
    
    return (
        <QuestionAnswerList
            platform="deepseek"
            data={store.questionAnswerList}
            loading={store.loading}
            onAction={store.handleAction}
        />
    );
};

// src/pages/platforms/zhipu/questionAnswer/index.tsx
const ZhipuQuestionAnswer: React.FC = () => {
    const store = useZhipuStore();
    
    return (
        <QuestionAnswerList
            platform="zhipu"
            data={store.questionAnswerList}
            loading={store.loading}
            onAction={store.handleAction}
        />
    );
};
```

### 阶段五：状态管理重构

#### 1. 创建平台特定的 Store
```typescript
// src/stores/platforms/deepseek.ts
class DeepSeekStore {
    @observable questionAnswerList = [];
    @observable knowledgeLibList = [];
    @observable loading = false;
    
    @action
    async fetchQuestionAnswerList(params: any) {
        this.loading = true;
        try {
            const response = await platformApis.deepseek.questionAnswer.list(params);
            this.questionAnswerList = response.data;
        } finally {
            this.loading = false;
        }
    }
    
    @action
    async handleAction(action: string, data: any) {
        // 平台特定的操作处理
    }
}

// src/stores/platforms/zhipu.ts
class ZhipuStore {
    @observable questionAnswerList = [];
    @observable knowledgeLibList = [];
    @observable loading = false;
    
    @action
    async fetchQuestionAnswerList(params: any) {
        this.loading = true;
        try {
            const response = await platformApis.zhipu.questionAnswer.list(params);
            this.questionAnswerList = response.data;
        } finally {
            this.loading = false;
        }
    }
    
    @action
    async handleAction(action: string, data: any) {
        // 平台特定的操作处理
    }
}
```

#### 2. 创建 Store 工厂
```typescript
// src/stores/platforms/index.ts
export const createPlatformStore = (platform: 'deepseek' | 'zhipu') => {
    switch (platform) {
        case 'deepseek':
            return new DeepSeekStore();
        case 'zhipu':
            return new ZhipuStore();
        default:
            throw new Error(`Unsupported platform: ${platform}`);
    }
};
```

## 实施步骤

### 第一步：准备工作
1. 创建新的目录结构
2. 备份现有代码
3. 创建功能分支

### 第二步：迁移组件
1. 迁移 DeepSeek AI 组件
2. 迁移智谱AI 组件
3. 更新导入路径

### 第三步：重构 API
1. 创建平台特定的 API 模块
2. 更新现有 API 调用
3. 测试 API 功能

### 第四步：重构路由
1. 更新路由配置
2. 测试路由功能
3. 更新导航逻辑

### 第五步：重构状态管理
1. 创建平台特定的 Store
2. 更新组件中的状态管理
3. 测试状态管理功能

### 第六步：测试和优化
1. 全面功能测试
2. 性能优化
3. 代码审查

## 预期收益

### 1. 代码可维护性提升
- 清晰的目录结构
- 统一的命名规范
- 模块化的代码组织

### 2. 开发效率提升
- 减少重复代码
- 提高代码复用性
- 简化新功能开发

### 3. 扩展性增强
- 易于添加新的 AI 平台
- 支持平台特定的功能
- 灵活的配置管理

### 4. 团队协作改善
- 统一的开发规范
- 清晰的代码结构
- 便于代码审查

## 风险评估

### 1. 迁移风险
- **风险**: 迁移过程中可能引入 bug
- **缓解**: 分阶段迁移，每个阶段都要充分测试

### 2. 兼容性风险
- **风险**: 现有功能可能受到影响
- **缓解**: 保持向后兼容，逐步迁移

### 3. 性能风险
- **风险**: 重构可能影响性能
- **缓解**: 性能测试，优化关键路径

## 总结

通过这次重构，项目将获得更清晰的结构、更好的可维护性和更强的扩展性。重构过程采用渐进式方法，确保现有功能的稳定性，同时为未来的发展奠定良好的基础。