AI 实践指南：大型模块拆分
本文档提供了一套系统化的方法，指导如何使用 AI 工具（如 Cursor、GitHub Copilot 等）来分析和拆分大型 Vue 组件模块。
一、工作流程
阶段一：代码分析
提示词模板:
请分析以下文件的结构：
- 统计文件总行数、template/script/style 各部分行数
- 收集所有状态变量（ref、reactive、computed、props、store）
- 按功能域分类所有函数（搜索、编辑、保存、签署、成组等）
- 识别所有弹窗组件和 API 调用
文件路径: [文件路径]
阶段二：依赖关系分析
提示词模板:
请分析以下功能模块的依赖关系：
模块名称: [模块名] 模块位置: [函数名或行号范围]
请列出：
- 使用的所有状态变量（例如ref、reactive、computed标注类型和来源）
- 调用的所有函数（标注来源）
- 被哪些其他模块调用
- 调用的所有 API 和第三方库
对于每个依赖项，请标注：
- 来源（本模块定义 / 组件内部 / Store / Props / API）
- 类型（状态变量 / 函数 / API / 工具类）
- 是否可替换（是/否）
阶段三：拆分方案设计
提示词模板:
基于依赖分析结果，请评估以下模块是否适合拆分：
评估标准：
- 依赖清晰度：依赖项是否明确，是否易于传入
- 独立性：是否与其他模块深度耦合
- 可复用性：是否在多个地方使用
- 复杂度：拆分后是否降低整体复杂度
请给出：
- 拆分可行性评分（1-10）
- 拆分建议（适合/部分适合/不适合）
- 拆分方式（Hook / 组件 / 工具函数）
- 接口设计（输入/输出）
阶段四：代码生成与集成
提示词模板:
请根据拆分方案生成代码并集成：
- 生成 Hook/组件代码（包含完整类型定义和 JSDoc）
- 集成到原文件（导入、调用、替换原函数）
- 删除不再需要的代码
- 确保功能完整性
阶段五：验证与优化
提示词模板:
请检查集成结果：
- 是否有未使用的导入和旧代码
- 是否有类型错误和循环依赖
- 代码行数是否减少
- 功能是否完整
二、依赖关系分析规则
2.1 依赖分类
状态变量依赖:
- ref: 基础响应式变量，可作为参数传入 Hook
- reactive: 对象响应式变量，需要传入整个对象或解构
- computed: 计算属性，需要传入依赖的状态
- Store 状态: 来自 Pinia/Vuex store
- Props: 来自父组件
函数依赖:
- 本模块函数 / 组件函数 / 工具函数 / API 函数
外部依赖:
- API 调用 / 第三方库 / 组件库 / 事件通信
2.2 拆分可行性评分（总分 10 分）
| 维度 | 评分标准 |
|---|---|
| 依赖清晰度 (0-2.5) | 所有依赖可传入(2.5) / 大部分可传入(1.5) / 大量内部状态(0.5) / 深度耦合(0) |
| 独立性 (0-2.5) | 完全独立(2.5) / 少量通用依赖(1.5) / 多个业务依赖(0.5) / 深度耦合(0) |
| 可复用性 (0-2.5) | 多组件复用(2.5) / 相似场景(1.5) / 仅当前场景(0.5) / 无法复用(0) |
| 复杂度降低 (0-2.5) | 显著降低(2.5) / 适度降低(1.5) / 变化不大(0.5) / 增加复杂度(0) |
拆分建议:
- 9-10 分: ✅ 强烈建议拆分
- 7-8 分: ✅ 建议拆分
- 5-6 分: ⚠️ 部分拆分（提取工具函数）
- 3-4 分: ⚠️ 谨慎拆分（需要重构依赖）
- 0-2 分: ❌ 不建议拆分
2.3 拆分方式选择
Hook: 包含响应式状态管理、需要生命周期、需要组合多个功能 组件: 包含 UI 渲染逻辑、需要用户交互、需要样式定义 工具函数: 纯函数逻辑、无状态管理、无副作用
三、最佳实践
3.1 提示词编写技巧
✅ 好的提示词特征:
- 明确具体: 提供文件路径、行号、函数名
- 分步骤: 将复杂任务拆分为多个步骤
- 提供上下文: 包含代码片段、项目结构、代码规范
- 明确输出格式: 指定期望的输出格式（表格、代码、列表）
❌ 避免的提示词:
- "帮我重构这个文件"（太模糊）
- "优化代码"（没有具体目标）
- "修复所有问题"（范围太大）
3.2 常见问题处理
AI 输出不准确: 提供更多上下文，分步骤进行，提供示例代码 依赖关系复杂: 先分析核心依赖，使用依赖关系图可视化，识别循环依赖 拆分后功能异常: 保留原代码备份，逐步集成，使用 Git 分支测试
四、提示词模板库
4.1 状态变量收集
请收集 [文件路径] 中所有响应式状态变量：
- 所有 ref、reactive、computed
- 所有 props、emit
- 所有 Store 状态
- 按表格输出：变量名、类型、初始值、用途、所属模块
4.2 依赖分析
请分析 [模块名] 的依赖关系：
- 使用的状态变量（从状态变量列表中匹配）
- 调用的函数（标注来源）
- 被哪些模块调用
- 调用的 API 和第三方库
4.3 拆分方案
请为 [模块名] 生成拆分方案：
- 拆分可行性评估
- 拆分方式建议（Hook/组件/工具函数）
- 接口设计（明确需要传入的状态变量类型）
- 集成步骤
4.4 代码生成
请根据以下方案生成代码：
- Hook 名称: [名称]
- 功能描述: [描述]
- 接口设计: [设计，包含状态变量类型]
- 代码规范: [规范]
五、实战案例
案例：拆分合理用药模块
步骤 1: 收集状态变量
请收集 StandingOrder/index.vue 中所有响应式状态变量步骤 2: 分析代码
请分析合理用药相关代码：
- 函数: checkRationalDrugUse, handleOpenCheckDrug, handleRationalDrugUse
- 行号范围: 5245-5498
- 使用的状态变量: [从步骤 1 匹配]步骤 3: 分析依赖
请分析合理用药模块的依赖关系：
- 使用的状态: curPatientInfo (computed), userInfo (store), isOpenCheckDrug (ref)
- 调用的函数: handleRationalDrugUse, handleGroupData
- 被调用位置: signFn()步骤 4: 生成拆分方案
请为合理用药模块生成拆分方案：
- 评估拆分可行性
- 设计 Hook 接口（明确传入的状态变量）
- 提供集成步骤步骤 5: 生成代码
请生成 useRationalDrugCheck Hook：
- 文件路径: shared/composables/useRationalDrugCheck.ts
- 参考项目中的其他 Hook 代码风格步骤 6: 集成
请将 useRationalDrugCheck 集成到 StandingOrder/index.vue：
- 导入 Hook
- 传入所需的状态变量
- 替换原函数
- 更新调用点六、总结
关键要点
- 分步骤进行: 不要一次性处理所有代码
- 优先收集状态变量: Vue 3 项目中状态变量是依赖分析的核心
- 提供充分上下文: 让 AI 理解代码结构和业务逻辑
- 验证结果: 每次拆分后都要验证功能完整性
- 迭代优化: 根据实际情况调整方案
成功指标
- ✅ 代码行数减少 20%+
- ✅ 单个文件复杂度降低
- ✅ 可复用代码增加
- ✅ 功能完整性保持 100%
- ✅ 无类型错误和循环依赖
文档版本: v1.0
适用工具: Cursor, GitHub Copilot, ChatGPT, Claude 等