我要构建一个 [用一两句话描述你的产品]。

目标用户：[谁会用这个产品，什么场景下用]
核心功能：[最重要的 2-3 个功能，不要贪多]
技术约束：[你已经确定要用的技术，比如 Next.js、Supabase、已有的代码库等]
我的水平：[诚实说明你的技术背景，比如"熟悉前端，后端一般"]

作为资深全栈架构师，请帮我规划：

1. 技术栈推荐：考虑开发速度优先、成本控制、一人可维护
2. 项目目录结构：给出完整的项目树
3. 数据模型：用 TypeScript interface 描述核心实体
4. API 设计：列出主要接口的路径、方法和功能简述
5. 开发里程碑：MVP 做什么、V1 做什么、V2 做什么
6. 潜在风险：可能会遇到什么坑，怎么规避

先给规划，我确认后再开始实现。

进入 Debug 模式。规则：先分析原因，不要直接写代码。

## 错误信息
[粘贴完整的错误信息，包括堆栈跟踪]

## 相关代码
[粘贴你认为相关的代码，不要太多也不要太少]

## 我已经尝试过
[列出你试过的方案，避免 AI 给出重复建议]
- 方案 A：xxx，结果是 xxx
- 方案 B：xxx，结果是 xxx

## 上下文
[可选：框架版本、运行环境等可能相关的信息]

---

请分析并回答：

1. 直接原因：这个错误信息在告诉我什么？
2. 根本原因：为什么会触发这个错误？
3. 影响范围：这个问题可能影响到哪些其他功能？
4. 解决方案：列出 2-3 种可行的解决思路，各有什么优缺点
5. 推荐方案：你推荐哪种，理由是什么？

等我选定方案后，再给出具体的代码修改。

这个文件需要重构，请帮我规划。

## 当前状态
- 文件路径：[xxx.ts]
- 行数：[xxx 行]
- 主要问题：[描述你觉得乱的地方，比如：职责太多、重复代码、逻辑嵌套太深]

## 重构原则
1. 功能完全不变，重构后行为要和现在一样
2. 渐进式修改，每一步都要能跑通，方便回滚
3. 保持现有 API 接口不变，避免影响调用方

## 当前代码
[粘贴完整代码]

---

请先给出重构计划：

1. 会创建哪些新文件？每个文件的职责是什么？
2. 现有代码会怎么拆分？哪些去哪个文件？
3. 文件之间的依赖关系？
4. 建议的执行顺序？先改什么后改什么？
5. 有没有什么风险需要注意？

等我确认计划后，再开始逐步重构。每完成一步要确保代码可运行。

请审查以下代码。你是有 10 年经验的高级工程师，对代码质量要求严格。

## 审查重点

安全性：
- SQL 注入、XSS、CSRF 风险
- 敏感信息是否泄露（API Key、密码等）
- 权限校验是否完整

性能：
- 是否有 N+1 查询问题
- 是否有不必要的重渲染（React）
- 是否可能导致内存泄漏

可维护性：
- 命名是否清晰
- 函数是否太长
- 是否有重复代码可以抽象

边界情况：
- 空值处理是否完善
- 错误处理是否到位
- 并发情况是否考虑

## 代码
[粘贴你要审查的代码]

---

请按严重程度分类输出：

🔴 严重问题（必须修复，否则可能出事）
🟡 警告（建议修复，影响质量或维护）
🟢 建议（可选优化，锦上添花）

每个问题请说明：
1. 具体是哪行代码
2. 问题是什么
3. 为什么是问题
4. 怎么修复

请优化这个组件的视觉效果，让它看起来更专业。

## 设计规范
- 框架：[React + Tailwind CSS / Vue + UnoCSS / 其他]
- 风格：[现代简洁 / 活泼鲜艳 / 商务正式]
- 参考：[如果有，放一个你喜欢的网站截图或描述]

## 优化要求

交互状态：
- hover / focus / active 状态要有反馈
- 过渡动画自然不生硬

视觉层次：
- 主要信息突出，次要信息弱化
- 间距、对齐要舒服

响应式：
- 手机端要能正常显示和操作

细节：
- 圆角、阴影、颜色要协调
- 不要过度设计，保持简洁

## 当前代码
[粘贴你的组件代码]

---

请直接给出优化后的完整代码，并简要说明你做了哪些改动。

为以下代码生成文档。

## 文档类型
[选择一种：API 参考文档 / 组件使用文档 / README]

## 格式要求
- Markdown 格式
- 代码示例必须可运行
- 每个参数/Props 要有类型说明和描述
- 如有必要，加上使用注意事项

## 风格要求
- 面向 [初学者 / 中级开发者]
- 语言：[中文 / 英文]
- 简洁但完整，不啰嗦

## 代码
[粘贴你的代码]

---

请生成完整的文档。

为这个函数生成完整的测试用例。

## 测试框架
[Jest / Vitest / Mocha / 其他]

## 函数代码
[粘贴函数代码]

## 测试要求

覆盖范围：
- 正常输入的预期输出
- 边界情况（空值、极值、特殊字符等）
- 异常输入的错误处理
- 如果涉及异步，要测试成功和失败情况

测试风格：
- 使用 describe/it 组织结构
- 测试描述用自然语言，清晰说明在测什么
- 每个测试只验证一件事

---

请生成完整的测试文件代码。

帮我分析这个需求，转化为可执行的功能规格。

## 原始需求
[用户或老板说的原话，通常是模糊的]

## 产品背景
[简单描述产品是什么、目标用户是谁]

---

请帮我：

1. **需求澄清**：这个需求可能有哪些歧义？列出你的理解和假设
2. **用例拆分**：拆分成具体的用户故事（作为...我想要...以便于...）
3. **边界定义**：什么在范围内，什么在范围外
4. **验收标准**：每个用例怎么判断"做完了"
5. **技术考量**：实现这个需求需要注意什么
6. **待确认问题**：有哪些问题需要回去和需求方确认

输出为 Markdown 格式。

请解释这段代码，像给一个聪明但不熟悉这个领域的程序员讲解。

## 代码
[粘贴代码]

## 我的背景
[说明你熟悉什么、不熟悉什么]

---

请解释：

1. 这段代码整体在做什么？（一句话概括）
2. 逐行/逐块解释每部分的作用
3. 为什么要这样写？有没有其他写法？
4. 这段代码有什么巧妙之处或常见陷阱？
5. 如果我想自己写类似的代码，关键点是什么？

用简单的语言，避免术语堆砌。如果必须用术语，要解释。

目标：我要去 [网站名称] [完成什么任务]

背景：
- 项目文件夹里有 [相关资料文件，比如 content.md、images/]
- [任何特殊情况说明]

方法：使用 Playwright MCP 控制浏览器

执行规则：
- 如果需要登录，使用谷歌登录
- 如果需要上传图片，使用 images/ 文件夹里的图片
- 如果遇到付款页面，停下来通知我
- 如果遇到验证码，停下来通知我
- 完成后截图保存结果

请开始执行。

请深度分析以下问题。

不要给表面的、泛泛的回答。我需要的是：
- 本质洞察，而非表象罗列
- 深入分析，而非广度覆盖
- 独特观点，而非常规复述

允许你表达不确定性。如果某些方面你不确定，可以说"这方面我不确定，但可能是..."

问题：
[你的问题]

---

请先理清问题的结构，然后逐层深入分析。

请把这段代码从 [原语言/框架] 翻译到 [目标语言/框架]。

## 原代码
[粘贴代码]

## 翻译要求
- 功能和行为要完全一致
- 使用目标语言/框架的惯用写法（idiomatic）
- 保持代码结构清晰
- 如果原代码有问题，也一起修复

## 目标环境
- 版本：[目标语言/框架的版本]
- 其他约束：[如有]

---

请给出翻译后的完整代码，并说明翻译过程中做了哪些调整。