项目结构重构计划

当前问题分析

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. 统一路由前缀

// 新的路由结构
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 模块

// 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 接口

// 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. 提取共享组件

// 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. 平台特定组件

// 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

// 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 工厂

// 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}`);
    }
};

实施步骤

第一步：准备工作

创建新的目录结构
备份现有代码
创建功能分支

第二步：迁移组件

迁移 DeepSeek AI 组件
迁移智谱AI 组件
更新导入路径

第三步：重构 API

创建平台特定的 API 模块
更新现有 API 调用
测试 API 功能

第四步：重构路由

更新路由配置
测试路由功能
更新导航逻辑

第五步：重构状态管理

创建平台特定的 Store
更新组件中的状态管理
测试状态管理功能

第六步：测试和优化

全面功能测试
性能优化
代码审查

预期收益

1. 代码可维护性提升

清晰的目录结构
统一的命名规范
模块化的代码组织

2. 开发效率提升

减少重复代码
提高代码复用性
简化新功能开发

3. 扩展性增强

易于添加新的 AI 平台
支持平台特定的功能
灵活的配置管理

4. 团队协作改善

统一的开发规范
清晰的代码结构
便于代码审查

风险评估

1. 迁移风险

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

2. 兼容性风险

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

3. 性能风险

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

总结

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

REFACTORING_PLAN.md 9.7 KB Historia Raaka

项目结构重构计划

当前问题分析

1. 目录结构混乱

2. 路由配置复杂

3. 代码复用困难

重构目标

1. 清晰的平台分离

2. 提高代码复用性

3. 改善可维护性

重构方案

阶段一：目录结构重组

1. 创建新的目录结构

阶段二：路由配置优化

1. 统一路由前缀

2. 更新路由配置

阶段三：API 层重构

1. 创建平台特定的 API 模块

2. 创建统一的 API 接口

阶段四：组件重构

1. 提取共享组件

2. 平台特定组件

阶段五：状态管理重构

1. 创建平台特定的 Store

2. 创建 Store 工厂

实施步骤

第一步：准备工作

第二步：迁移组件

第三步：重构 API

第四步：重构路由

第五步：重构状态管理

第六步：测试和优化

预期收益

1. 代码可维护性提升

2. 开发效率提升

3. 扩展性增强

4. 团队协作改善

风险评估

1. 迁移风险

2. 兼容性风险

3. 性能风险

总结

REFACTORING_PLAN.md 9.7 KB

Historia Raaka