A.2 代码修改类模板
本节提供修改现有代码的 Prompt 模板，包括功能扩展、代码重构、性能优化和样式调整。
模板一：功能扩展
适用于：在现有代码基础上添加新功能
markdown
## 当前状态
**项目背景**：[简述项目是做什么的]
**技术栈**：[使用的技术]
**要扩展的模块**：[哪个文件/组件]
## 现有代码
```[语言]
[粘贴现有代码]扩展需求
新增功能：[描述要添加什么功能]
功能细节：
- [细节1]
- [细节2]
- [细节3]
触发方式：[用户如何触发这个功能] 预期结果：[功能执行后应该发生什么]
约束条件
必须保持：
- [现有功能A 不能受影响]
- [现有功能B 要继续正常工作]
不要改动：
- [不要修改的部分1]
- [不要修改的部分2]
输出要求
- [ ] 只输出修改后的代码，不需要重复未修改的部分
- [ ] 用注释标注新增的代码
- [ ] 说明需要额外安装的依赖（如有）
### 填写示例：待办清单添加"撤销删除"功能
```markdown
## 当前状态
**项目背景**：个人待办清单网页应用
**技术栈**：React + TypeScript + Tailwind CSS
**要扩展的模块**：TaskList.tsx 组件
## 现有代码
```tsx
function TaskList({ tasks, onDelete }) {
return (
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.content}
<button onClick={() => onDelete(task.id)}>删除</button>
</li>
))}
</ul>
);
}扩展需求
新增功能：删除任务后显示"撤销"提示，3 秒内可恢复
功能细节：
- 删除任务后，底部显示"已删除，点击撤销"提示
- 提示显示 3 秒后自动消失
- 点击"撤销"按钮，任务恢复到原位置
- 同时只能有一个撤销提示
触发方式：用户点击删除按钮 预期结果：任务从列表消失，底部出现撤销提示
约束条件
必须保持：
- 现有的任务展示逻辑不变
- 删除按钮的位置和样式不变
不要改动：
- 不要改变 props 的类型定义
- 不要引入新的状态管理库
输出要求
- [x] 只输出修改后的代码
- [x] 用注释标注新增的代码
- [ ] 说明需要额外安装的依赖
## 模板二：代码重构
适用于：改进代码质量、提高可读性、统一代码风格
```markdown
## 重构目标
**当前问题**：[代码现在有什么问题]
**期望改进**：[重构后希望达到什么效果]
## 待重构代码
```[语言]
[粘贴需要重构的代码]重构要求
方向：[可多选]
- [ ] 提高可读性（变量命名、函数拆分）
- [ ] 减少重复代码（提取公共函数）
- [ ] 统一代码风格
- [ ] 添加类型定义（TypeScript）
- [ ] 改进错误处理
- [ ] 其他：[具体说明]
必须保持：
- 功能行为完全不变
- [其他约束]
参考规范（可选）： [如果有特定的代码规范，可以贴在这里]
输出要求
请提供：
- 重构后的完整代码
- 简要说明做了哪些改动
- 改动的理由
### 填写示例：重构重复的表单验证代码
```markdown
## 重构目标
**当前问题**：注册、登录、修改密码三个表单都有类似的验证代码，复制粘贴了三遍
**期望改进**：提取公共的验证函数，减少重复
## 待重构代码
```typescript
// 注册表单
function validateRegister(data) {
if (!data.email || !data.email.includes('@')) {
return '邮箱格式不正确';
}
if (!data.password || data.password.length < 8) {
return '密码至少8位';
}
if (data.password !== data.confirmPassword) {
return '两次密码不一致';
}
return null;
}
// 登录表单
function validateLogin(data) {
if (!data.email || !data.email.includes('@')) {
return '邮箱格式不正确';
}
if (!data.password || data.password.length < 8) {
return '密码至少8位';
}
return null;
}
// 修改密码表单
function validateChangePassword(data) {
if (!data.oldPassword || data.oldPassword.length < 8) {
return '旧密码至少8位';
}
if (!data.newPassword || data.newPassword.length < 8) {
return '新密码至少8位';
}
if (data.newPassword !== data.confirmPassword) {
return '两次密码不一致';
}
return null;
}重构要求
方向：
- [x] 减少重复代码（提取公共函数）
- [x] 添加类型定义（TypeScript）
- [x] 改进错误处理（支持返回多个错误）
必须保持：
- 功能行为完全不变
- 错误信息文案保持一致
输出要求
请提供：
- 重构后的完整代码
- 简要说明做了哪些改动
- 如何在原有表单中使用新的验证函数
## 模板三：性能优化
适用于：页面加载慢、操作卡顿、内存占用高
```markdown
## 性能问题描述
**问题现象**：[具体描述慢在哪里、卡在哪里]
**触发条件**：[什么情况下会出现这个问题]
**影响程度**：[大概延迟多久、卡顿多久]
## 相关代码
```[语言]
[粘贴可能导致性能问题的代码]优化目标
期望效果：[优化后应该达到什么程度] 度量标准：[如何判断优化成功]
已知信息
数据规模：[处理的数据量大概多少] 运行环境：[浏览器/Node.js/移动端] 已尝试的优化：[如果有的话]
约束条件
- 功能逻辑不能改变
- [其他约束]
输出要求
请提供：
- 优化后的代码
- 解释性能问题的原因
- 优化的原理和效果预估
## 模板四：样式调整
适用于：UI 美化、布局修改、响应式适配
```markdown
## 当前样式
**问题描述**：[当前界面哪里不满意]
**当前代码**：
```[css/html]
[粘贴当前样式相关代码]期望效果
描述：[用文字描述想要的效果]
参考（可选）：
- 参考网站：[URL]
- 参考图片：[描述或链接]
- 关键词：[简洁/现代/圆角/阴影/渐变/...]
具体要求
布局调整：
- [调整1]
- [调整2]
视觉效果：
- [效果1]
- [效果2]
响应式：
- 桌面端（>1024px）：[要求]
- 平板端（768-1024px）：[要求]
- 手机端（<768px）：[要求]
技术约束
使用技术：[Tailwind CSS/原生 CSS/其他] 必须兼容：[浏览器版本要求]
输出要求
请提供修改后的样式代码，并标注改动的部分。
## 模板五：代码迁移（精简版）
适用于：升级框架版本、更换技术栈
```markdown
## 迁移需求
**原技术**：[如 React Class 组件]
**目标技术**：[如 React Hooks 函数组件]
## 原代码
```[语言]
[粘贴需要迁移的代码]迁移要求
- 保持功能完全一致
- 遵循目标技术的最佳实践
- [其他要求]
输出要求
请提供迁移后的代码，并说明主要改动点。
## 精简版：快速修改模板
当你只需要做一个小改动时，可以使用这个精简版：
```markdown
请修改以下代码：
```[语言]
[代码]修改内容：[简述要改什么]
约束：
- 保持其他部分不变
- [其他约束]
## 常见填写误区
| 误区 | 问题 | 正确做法 |
|-----|------|---------|
| 不贴现有代码 | AI 无法了解上下文 | 贴出相关的代码片段 |
| 只说"优化一下" | 不知道优化什么方向 | 明确是可读性/性能/结构 |
| 忘记说"不要改" | AI 可能重构整个文件 | 明确边界，哪些不动 |
| 参考描述太抽象 | "好看一点"太模糊 | 给参考网站或具体描述 |
## 本节要点
- ✅ **功能扩展**：贴出现有代码 + 描述新功能 + 明确不能动的部分
- ✅ **代码重构**：明确重构方向 + 保证功能不变
- ✅ **性能优化**：描述问题现象 + 给出数据规模 + 设定度量标准
- ✅ **样式调整**：提供参考 + 具体描述期望效果