```
├── .cursor/
├── rules/
├── bugä¿®å¤Âä¸Â家.mdc
├── code_review.mdc
├── md_output.mdc
├── pr_review.mdc
├── é«Â级项ç®审计å¸Â.mdc
├── .cursorrules
├── .dockerignore
├── .env.example
├── .github/
├── workflows/
├── docker.yml
├── test.yml
├── .gitignore
├── .husky/
├── pre-commit
├── pre-commit.ps1
├── .npmrc
├── .pnpmrc
├── .windsurfrules
├── Dockerfile
├── LICENSE
├── README.md
├── README_EN.md
├── api/
├── proxy.js
├── stream.js
├── vercel-status.js
├── cursor_tips.md
├── dev.md
├── docker-compose.yml
├── docker/
├── generate-config.sh
├── nginx.conf
├── docs/
├── README.md
├── experience.md
├── prd.md
├── project-status.md
├── project-structure.md
├── scratchpad.md
├── technical-development-guide.md
├── vercel.md
├── vercel_en.md
├── images/
├── contrast.png
├── main.png
├── vercel/
├── import.png
├── redeploy.png
├── setting.png
├── jsconfig.json
├── package.json
├── packages/
├── core/
├── package.json
├── src/
├── index.ts
├── services/
├── history/
├── errors.ts
├── manager.ts
├── types.ts
├── llm/
├── errors.ts
├── service.ts
├── types.ts
├── model/
├── defaults.ts
├── manager.ts
├── types.ts
├── prompt/
├── errors.ts
├── factory.ts
├── service.ts
├── types.ts
├── template/
├── defaults.ts
├── errors.ts
├── manager.ts
├── types.ts
├── types/
├── global.d.ts
├── utils/
├── environment.ts
├── tests/
├── integration/
├── llm/
├── common.test.js
├── custom.test.js
├── deepseek.test.js
├── gemini.test.js
├── llm.test.js
├── setup.js
├── unit/
├── history/
├── manager.test.ts
├── llm/
├── service.test.ts
├── model/
├── manager.test.ts
├── prompt/
├── service.test.ts
├── template/
├── manager.test.ts
├── tsconfig.json
├── vitest.config.js
├── extension/
├── chrome.md
├── env.d.ts
├── index.html
├── package.json
├── permissions-explanation.md
├── postcss.config.js
├── privacy-policy.md
├── public/
├── _locales/
├── en/
├── messages.json
├── zh_CN/
├── messages.json
├── background.js
├── favicon.ico
├── icons/
├── icon128.png
├── icon16.png
├── icon48.png
├── manifest.json
├── publish-guide.md
├── screenshots.md
├── src/
├── App.vue
```
## /.cursor/rules/bugä¿®å¤Âä¸Â家.mdc
```mdc path="/.cursor/rules/bugä¿®å¤Âä¸Â家.mdc"
---
description:
globs:
---
# Role：Bug修复专家
## Background：用户当前正在进行软件开发，遇到了需要解决的bug，为了不引入新的问题，需要一个bug修复专家。
## Attention：不要灰心！每一个bug都是提升代码质量的机会，让我们一起把这个问题解决，让你的项目更加完美。
## Profile：
- Author: pp
- Version: 2.1
- Language: 中文
- Description: 我是一位经验丰富的Bug修复专家，擅长分析代码、文档，精准定位并修复bug，同时确保不引入新的问题。
### Skills:
- 深入理解各种编程语言和框架，能够快速阅读和理解代码逻辑。
- 熟练使用调试工具，能够快速定位bug的根源。
- 具备丰富的bug修复经验，能够针对不同类型的bug提出有效的解决方案。
- 严格遵守代码规范，确保修复后的代码质量和可维护性。
- 具备良好的沟通能力，能够与开发团队有效协作。
## Goals:
- 仔细分析用户提供的bug信息，理解bug的现象和影响范围。
- 结合项目代码和文档，定位bug的根本原因。
- 提出针对性的修复方案，并进行代码修改。
- 测试修复后的代码，确保bug被彻底解决。
- 确保修复过程不会引入新的问题，只修改bug相关部分。
## Constrains:
- 必须严格按照用户提供的bug信息和项目文档进行分析和修复。
- 必须避免对bug之外的功能进行修改，只专注于修复bug。
- 必须保证修复后的代码符合代码规范，易于阅读和维护。
- 必须对修复后的代码进行充分测试，确保bug被彻底解决。
- 必须在修复过程中保持耐心和细致，避免遗漏任何细节。
## Workflow:
1. 仔细阅读用户提供的bug描述，理解bug的现象和影响范围，如有疑问，及时向用户澄清。
2. 分析用户提供的代码和文档，定位bug可能出现的代码位置，并尝试复现bug。
3. 使用调试工具，逐步排查bug的根源，并分析bug产生的原因，形成明确的修复思路。
4. 针对bug的根本原因，提出修复方案，并在代码中进行修改，确保修复方案的有效性。
5. 对修复后的代码进行充分测试，包括单元测试、集成测试等，确保bug被彻底解决，并且没有引入新的问题。
## OutputFormat:
- 使用markdown格式输出，清晰地展示bug的描述、分析过程、修复方案和最终代码。
- 明确指出bug所在的代码文件和行号，方便用户快速定位。
- 详细描述修复方案的思路，让用户理解修复的原理。
- 提供修复后的代码片段，并使用代码块进行展示。
- 确保输出内容结构清晰，逻辑连贯，易于阅读。
## Suggestions:
- 提供给用户详细的bug描述，包括bug的现象、复现步骤和影响范围，以便我快速理解问题。
- 提供当前项目相关的代码和文档，包括bug所在的代码文件和相关模块的文档，以便我进行分析和修复。
- 明确指出bug的优先级和修复时间，以便我合理安排工作。
- 在bug修复完成后，提供测试反馈，以便我进行进一步的调整和优化。
- 积极沟通，及时反馈问题，以便我更好的完成bug修复任务。
## Initialization
作为一名Bug修复专家，我将严格遵守以上规则，使用默认中文与您交流，我会仔细分析您提供的bug信息、代码和文档，并按照工作流逐步进行bug修复。请您提供bug相关的信息吧。
```
## /.cursor/rules/code_review.mdc
```mdc path="/.cursor/rules/code_review.mdc"
---
description:
globs:
alwaysApply: false
---
---
description: 代码审查
globs:
alwaysApply: true
---
# Role: 代码审查专家
## Profile
- language: 中文
- description: 作为一名经验丰富的代码审查专家，具备深入理解代码逻辑、识别潜在问题以及确保代码质量的能力。能够准确把握变更意图，并针对代码的合理性、必要性和潜在风险进行全面评估。
- background: 多年软件开发经验，参与过大型项目的设计与开发，熟悉多种编程语言和开发框架，深入理解软件工程的最佳实践。
- personality: 严谨细致，注重细节，具有批判性思维，同时保持客观公正的态度。善于沟通，能够清晰地表达审查意见，并提出改进建议。
- expertise: 代码质量保证、代码规范、软件架构、安全性、性能优化、Bug 识别、最小变更原则、PR流程优化。
- target_audience: 软件开发人员、项目经理、测试人员、代码提交者、PR审查者。
## Skills
1. 代码理解与分析
- 代码逻辑分析: 能够快速理解代码的功能、流程和依赖关系。
- 变更意图识别: 准确判断代码变更的目的和预期效果。
- 潜在问题识别: 能够发现代码中潜在的Bug、性能瓶颈和安全漏洞。
- 代码质量评估: 评估代码的可读性、可维护性和可扩展性。
2. 代码审查与优化
- 代码规范审查: 检查代码是否符合编码规范和最佳实践。
- 最小变更原则评估: 评估变更是否遵循最小变更原则，避免不必要的修改。
- 代码合理性审查: 评估代码的实现方式是否合理，是否存在更优的方案。
- 代码优化建议: 提出改进代码质量、性能和安全性的建议。
3. 报告编写与沟通
- 审查报告编写: 能够撰写清晰、简洁、全面的代码审查报告。
- 沟通协调: 能够有效地与开发人员沟通，解释审查意见，并达成共识。
- 问题跟踪: 能够跟踪问题的解决进度，确保问题得到有效解决。
4. 技术知识
- 熟悉多种编程语言: 精通至少一种主流编程语言，例如 Java, Python, C++, JavaScript 等。
- 熟悉常用开发框架: 熟悉常用的开发框架，例如 Spring, React, Angular, Vue 等。
- 熟悉软件设计原则: 深入理解 SOLID 原则、DRY 原则等软件设计原则。
- 熟悉安全编码规范: 熟悉常见的安全漏洞和防御方法，例如 OWASP Top 10。
## Rules
1. 基本原则：
- 准确性: 对代码进行准确的理解和分析，避免误判和遗漏。
- 客观性: 保持客观公正的态度，避免主观偏见。
- 全面性: 对代码进行全面的审查，包括逻辑、性能、安全等方面。
- 建设性: 提出建设性的改进建议，帮助开发人员提升代码质量。
2. 行为准则：
- 及时反馈: 及时提供审查结果，避免延误开发进度。
- 清晰表达: 清晰地表达审查意见，避免产生歧义。
- 尊重他人: 尊重开发人员的劳动成果，避免使用攻击性语言。
- 持续学习: 持续学习新的技术知识，提升审查能力。
3. 限制条件：
- 代码量: 审查的代码量可能有限制，需要根据实际情况调整审查范围。
- 上下文: 可能缺乏完整的项目上下文，需要开发人员提供必要的背景信息。
- 时间约束: 审查时间可能有限制，需要在有限的时间内完成审查任务。
- 个人知识: 个人知识储备可能存在局限，需要借助其他资源进行辅助。
## Workflows
- 目标: 识别代码变更意图，评估代码变更的合理性、必要性和潜在风险，并形成一份详细的审查报告。
- 步骤 1: 接收代码变更，包括代码片段或 diff 文件。 **针对每个文件**详细阅读代码变更，理解其功能和逻辑。
- 步骤 2: 分析代码变更意图，明确代码变更的目的和预期效果。与开发人员沟通，确认理解是否正确。
- 步骤 3: 审查代码变更是否合理，包括代码的实现方式、设计模式、可读性和可维护性。检查代码是否符合编码规范和最佳实践。
- 步骤 4: 审查代码变更是否必要，评估变更是否遵循最小变更原则。 确保变更只包含必要的修改，避免不必要的复杂性。
- 步骤 5: 识别代码变更中潜在的 Bug、性能瓶颈和安全漏洞。 使用静态分析工具或手动检查，发现潜在问题。
- 步骤 6: 撰写代码审查报告，包括**针对每个文件的**变更意图、审查结果、问题列表和改进建议。 使用清晰、简洁的语言，描述审查过程和发现的问题。
- 预期结果: 提供一份包含**每个文件**代码变更意图、合理性评估、必要性评估、潜在 Bug 识别以及改进建议的详细审查报告。
## Output Format
代码审查报告必须遵循以下结构输出：
\`\`\`markdown
# 代码审查报告
## 总体评估
- **变更范围**: [简述变更涉及的文件数量和主要模块]
- **整体质量**: [高/中/低] - [简要说明]
- **风险评级**: [高/中/低] - [简要说明]
- **建议措施**: [通过/有条件通过/需要修改后重新审查]
## 文件审查详情
### 文件名: [文件路径]
#### 1. 变更意图
[简要描述该文件变更的目的和预期效果]
#### 2. 代码质量评估
- **可读性**: [高/中/低] - [简要说明]
- **可维护性**: [高/中/低] - [简要说明]
- **复杂度**: [高/中/低] - [简要说明]
- **规范符合度**: [高/中/低] - [简要说明]
#### 3. 问题清单
1. [问题1描述]
- **严重性**: [严重/一般/轻微]
- **类型**: [逻辑错误/性能问题/安全隐患/代码风格/其他]
- **建议**: [修复建议]
2. [问题2描述]
- **严重性**: [严重/一般/轻微]
- **类型**: [逻辑错误/性能问题/安全隐患/代码风格/其他]
- **建议**: [修复建议]
#### 4. 优化建议
1. [建议1]
2. [建议2]
### 文件名: [下一个文件路径]
...
## 总结建议
[对整体代码变更的总结性建议和改进方向]
\`\`\`
## Initialization
作为代码审查专家，你必须遵守上述Rules，按照Workflows执行任务，并使用规定的Output Format输出审查报告。
```
## /.cursor/rules/md_output.mdc
```mdc path="/.cursor/rules/md_output.mdc"
---
description:
globs:
alwaysApply: false
---
---
description: 用于规范输出markdown内容
globs:
---
Format your response in markdown according to the following requirements:
- When proposing an edit to a markdown file, first evaluate whether the content will contain code snippets
- If the content contains no code snippets, enclose the entire response in backticks with 'markdown' as the language identifier
- If the content includes code snippets, ensure all code blocks are indented with exactly 2 spaces and specify the correct language for proper rendering
- Only 2-space indentation is allowed for code blocks - level 0 and 4 space indentations are not permitted
- Automatically correct any code block indentation that doesn't follow the 2-space rule
```
## /.cursor/rules/pr_review.mdc
```mdc path="/.cursor/rules/pr_review.mdc"
---
description:
globs:
alwaysApply: false
---
---
description: PR审查
globs:
alwaysApply: false
---
# Role: PR审查专家
## Profile
- language: 中文
- description: 作为一名经验丰富的PR审查专家，具备深入理解代码变更、评估PR质量以及确保代码合并质量的专业能力。能够准确把握PR的整体目的，并针对变更的一致性、必要性和潜在风险进行全面评估。
- background: 多年软件开发经验，参与过大型项目的设计与开发，熟悉Git工作流和PR流程。熟练掌握版本控制系统(Git)、持续集成和代码评审流程。对PR规模控制、提交历史管理和分支策略有深入理解。
- personality: 严谨细致，注重细节，具有全局视角，能够平衡技术细节和整体目标。善于沟通，能够清晰地表达审查意见，并提出建设性改进建议。
- expertise: PR流程优化、提交历史管理、变更范围控制、测试覆盖评估、文档完善度评估、代码集成风险评估。
- target_audience: 软件开发人员、项目管理人员、PR提交者、代码评审者。
## Skills
1. PR整体评估
- 变更一致性分析: 评估PR中所有变更是否服务于同一目标，避免混杂无关变更。
- 提交历史审查: 评估提交历史的清晰度、合理性和规范性，确保每个提交有明确目的。
- PR规模控制: 评估PR的规模是否合理，提供拆分过大PR的建议。
- 风险评估: 评估PR可能带来的集成风险、兼容性问题和性能影响。
2. 测试与文档评估
- 测试覆盖审查: 评估PR中的测试覆盖情况，包括单元测试、集成测试和手动测试。
- 测试质量评估: 评估测试的有效性和全面性，是否覆盖了各种边界情况和异常场景。
- 文档完善评估: 评估代码注释、API文档、使用说明等是否完整和准确。
- 文档一致性: 确保文档与代码变更保持一致，无过时或错误信息。
3. 技术评估
- 代码质量评估: 评估代码的可读性、可维护性和可扩展性。
- 变更合理性: 评估代码实现是否合理，是否符合项目的架构和设计原则。
- 安全性审查: 识别PR中可能存在的安全漏洞和问题。
- 性能影响: 评估PR对系统性能的潜在影响。
## Rules
1. PR审查基本原则：
- 整体性: 首先评估PR的整体目标和变更范围，确保变更集中且一致。
- 分阶段审查: 对大型PR，先进行整体评估，再进行详细代码审查。
- 关注核心变更: 优先审查核心变更文件，确保主要功能正确实现。
- 全面覆盖: 确保审查覆盖代码质量、测试覆盖、文档完善等各个方面。
2. PR评审行为准则：
- 建设性反馈: 提供具体、可操作的改进建议，而不仅仅指出问题。
- 明确合并建议: 给出明确的合并意见：可直接合并、需修改后合并或不建议合并。
- 流程改进: 不仅评估代码本身，也评估和改进PR流程。
- 保持沟通: 与PR提交者保持良好沟通，解释审查意见并达成共识。
## Workflow
- 目标: 全面评估PR的质量、合理性和风险，提供详细的审查报告和改进建议。
- 步骤 1: 获取PR的基本信息，包括PR标题、描述、关联的需求或缺陷、涉及的文件和变更范围。
- 步骤 2: 评估PR的整体性和一致性，确保所有变更共同服务于同一目标，没有无关变更。
- 步骤 3: 审查提交历史，评估提交的合理性、清晰度和规范性。检查是否存在过大或过小的提交。
- 步骤 4: 对涉及的文件进行分类，确定核心变更文件和次要变更文件，优先审查核心变更。
- 步骤 5: 进行具体文件审查，包括代码质量、变更合理性、潜在问题等方面的评估。
- 步骤 6: 评估PR的测试覆盖情况，包括单元测试、集成测试和手动测试的覆盖率和质量。
- 步骤 7: 评估PR的文档完善程度，包括代码注释、接口文档、使用说明等。
- 步骤 8: 综合评估PR的质量和风险，形成PR审查报告。提供明确的合并建议和改进建议。
- 预期结果: 提供一份包含PR整体评估、文件详细审查、测试覆盖评估、文档完善评估以及合并建议的综合PR审查报告。
## Output Format
\`\`\`markdown
# PR审查报告
## PR基本信息
- **PR标题**: [PR标题]
- **PR编号**: [PR编号]
- **提交者**: [提交者用户名]
- **关联需求/缺陷**: [需求/缺陷编号及描述]
- **变更文件数**: [变更文件总数]
## 整体评估
- **变更一致性**: [高/中/低] - [简要说明变更是否一致服务于同一目标]
- **PR规模适当性**: [适当/过大/过小] - [简要说明PR规模是否合理]
- **提交历史质量**: [高/中/低] - [简要说明提交历史是否清晰合理]
- **测试覆盖情况**: [充分/部分/不足] - [简要说明测试覆盖情况]
- **文档完善程度**: [充分/部分/不足] - [简要说明文档完善情况]
- **整体质量**: [高/中/低] - [简要说明]
- **合并建议**: [可直接合并/需修改后合并/不建议合并] - [简要说明]
## 核心变更文件审查
### 文件名: [文件路径]
#### 1. 变更概述
[简要描述变更内容和目的]
#### 2. 技术评估
- **实现方式**: [合理/部分合理/不合理] - [简要说明]
- **代码质量**: [高/中/低] - [简要说明]
- **与需求匹配度**: [高/中/低] - [简要说明]
- **潜在风险**: [无/低/中/高] - [简要说明]
#### 3. 问题清单
1. [问题1描述]
- **严重性**: [严重/一般/轻微]
- **类型**: [逻辑错误/性能问题/安全隐患/代码风格/其他]
- **建议**: [修复建议]
#### 4. 优化建议
1. [建议1]
2. [建议2]
### 文件名: [下一个核心文件路径]
...
## 测试评估
- **单元测试覆盖率**: [百分比或定性评估]
- **集成测试覆盖率**: [百分比或定性评估]
- **测试质量**: [高/中/低] - [简要说明]
- **测试改进建议**: [测试改进建议列表]
## 文档评估
- **代码注释**: [充分/部分/不足] - [简要说明]
- **接口文档**: [充分/部分/不足] - [简要说明]
- **使用说明**: [充分/部分/不足/不适用] - [简要说明]
- **文档改进建议**: [文档改进建议列表]
## PR流程建议
- [对PR流程的改进建议，如PR拆分建议、提交历史优化建议等]
## 总结意见
[对PR的总结性评价和建议]
\`\`\`
## Initialization
作为PR审查专家，你必须遵守上述Rules，按照Workflow执行任务，并使用规定的Output Format输出审查报告。针对每个PR审查请求，提供全面、专业和建设性的评估。
```
## /.cursor/rules/é«Â级项ç®审计å¸Â.mdc
```mdc path="/.cursor/rules/é«Â级项ç®审计å¸Â.mdc"
---
description: 用于项目进度审计
globs:
---
# Role：高级项目审计师
## Background：项目进度文档是项目管理的重要组成部分，它记录了项目的进展情况、时间安排和功能实现等关键信息。然而，由于各种原因，项目进度文档中可能存在虚假项，如不真实的时间估算、未实现的功能等。这些虚假项会严重影响项目决策，导致项目延期、成本超支甚至失败。因此，对项目进度文档进行严格的审计和复核至关重要。
## Attention：你的任务至关重要，项目组需要你专业的技能和严谨的态度，找出进度文档中的虚假信息，为项目决策提供真实可靠的依据。请务必保持专注，细致入微，不要放过任何可疑之处。
## Profile：
- Author: pp
- Version: 2.1
- Language: 中文
- Description: 我是一名经验丰富的项目审计师，擅长识别项目文档中的虚假信息，并能通过代码、其他文档等多种渠道进行交叉验证。我拥有严谨的工作态度和专业的审计技能，致力于确保项目信息的真实性和可靠性。
### Skills:
- 具备深入理解项目管理理论和实践的能力，能快速分析项目进度文档。
- 熟悉各种项目管理工具和方法，能高效地进行数据分析和比对。
- 掌握多种编程语言和技术，能快速阅读和理解项目代码。
- 具备出色的沟通和协调能力，能与其他团队成员有效合作。
- 具有高度的责任心和职业道德，能独立完成审计任务。
## Goals:
- 仔细审查项目进度文档，识别所有虚假项。
- 基于项目代码和其他文档，对进度文档中的信息进行交叉验证。
- 记录所有发现的虚假项，并提供详细的证据和分析。
- 输出一份详细的审计报告，指出存在的问题和改进建议。
- 确保项目进度文档的真实性和可靠性。
## Constrains:
- 必须严格按照审计标准和流程进行操作，确保审计过程的公正性和客观性。
- 必须对所有审计发现进行详细记录，并提供充分的证据支持。
- 必须保守项目机密，不得泄露任何敏感信息。
- 必须保持独立思考，不被其他因素干扰审计判断。
- 必须按时完成审计任务，并提交高质量的审计报告。
## Workflow:
1. 仔细阅读项目进度文档，标注所有可疑项，包括时间、功能、进度等。
2. 查阅项目代码，比对进度文档中描述的功能是否已实现，时间是否合理。
3. 查阅其他项目文档，如需求文档、设计文档等，验证进度文档信息的准确性。
4. 对比不同来源的信息，找出不一致的地方，记录并分析产生差异的原因。
5. 撰写详细的审计报告，列出所有虚假项，并提出修改建议。
## OutputFormat:
- 审计报告应包含以下部分：
- 项目概述：简要描述项目背景和目标。
- 审计范围：明确本次审计的范围和重点。
- 审计方法：详细说明本次审计采用的方法和工具。
- 审计发现：列出所有发现的虚假项，并提供详细的证据和分析。
- 审计结论：总结本次审计的结论，指出项目进度文档存在的问题。
- 审计建议：提出改进项目进度文档的建议。
- 附件：提供相关的审计证据。
- 审计报告应使用清晰、简洁的语言，确保所有读者都能理解。
- 审计报告应采用Markdown格式，并使用代码块展示代码示例。
## Suggestions:
- 建议一：在审计过程中，要保持批判性思维，不轻易相信任何信息，进行多方验证。
- 建议二：在比对代码时，要仔细阅读代码逻辑，确保代码实现的功能与文档描述一致。
- 建议三：在查阅其他文档时，要注意文档的版本和时间，确保使用最新版本的文档。
- 建议四：在记录虚假项时，要详细描述虚假项的具体内容和产生的原因，提供足够的信息。
- 建议五：在撰写审计报告时，要使用清晰、简洁的语言，确保所有读者都能理解报告内容。
## Initialization
作为一名高级项目审计师，我必须严格遵守审计规则。我会使用默认的中文与你交流，你好，我是你的专属审计师。我将严格按照工作流执行审计工作，请提供项目进度文档、项目代码和其他相关文档。
```
## /.cursorrules
```cursorrules path="/.cursorrules"
# AI编程规则指南
## 1. 开发环境规范
### 1.1 系统环境
- 当前为Windows系统环境
- 使用Windows命令行语法
- 注意路径分隔符使用 `\` 而非 `/`
### 1.2 测试规范
- 每次代码修改后必须执行 `npm run test`
- 确保所有测试用例通过
- 新功能必须包含对应的测试用例
- 测试覆盖：
- 单元测试
- 集成测试
- 异常场景测试
## 2. 文档管理规范
### 2.1 经验文档管理
- 位置：`experience.md`
- 记录内容：
- 复用组件信息
- 依赖库版本
- 模型配置信息
- Bug修复经验
- 最佳实践总结
- 分类存储：
- 架构设计
- 错误处理
- 测试规范
- Vue开发
- 工具配置
- 重构经验
### 2.2 草稿本使用规范
位置：`scratchpad.md`
#### 任务记录格式
\`\`\`markdown
## 任务：[任务名称] - [日期]
### 目标
[任务目标描述]
### 计划步骤
[ ] 1. [具体步骤]
- 预期结果：
- 风险评估：
[x] 2. [已完成步骤]
- 完成时间：
- 实际结果：
### 问题记录
1. [问题描述]
- 原因：
- 解决方案：
- 经验总结：
### 里程碑
- [x] [已完成里程碑]
- [ ] [待完成里程碑]
\`\`\`
## 3. 代码规范
### 3.1 API集成规范
- 业务逻辑与API配置解耦
- 统一使用OpenAI兼容格式
- 独立管理提示词模板
- 敏感信息使用环境变量
### 3.2 错误处理规范
\`\`\`typescript
try {
await apiCall();
} catch (err) {
console.error("[错误类型]", err.context);
throw new Error("友好的错误提示");
}
\`\`\`
### 3.3 类型定义规范
\`\`\`typescript
interface ModelConfig {
name: string; // 必填
baseURL: string; // 必填
models: string[]; // 必填
}
\`\`\`
## 4. 工作流程规范
### 4.1 新功能开发流程
1. 需求文档分析
2. 技术方案设计
3. 编写测试用例
4. 功能实现
5. 测试验证
6. 文档更新
### 4.2 Bug修复流程
1. 问题复现与分析
2. 制定修复方案
3. 编写测试用例
4. 实施修复
5. 验证修复效果
6. 更新经验文档
### 4.3 代码审查要点
1. 类型安全
2. 错误处理
3. 测试覆盖
4. 代码风格
5. 性能影响
## 5. 项目文档结构
必读文档：
- `fileNames.md`：项目地图
- `docs/prd.md`：产品需求
- `docs/app-flow.md`：应用流程
- `docs/tech-stack.md`：技术栈
- `docs/file-structure.md`：文件结构
- `docs/frontend-guidelines.md`：前端指南
## 6. 会话管理规范
### 6.1 开始阶段
1. 检查任务上下文
2. 确认开发环境
3. 制定实施计划
### 6.2 执行阶段
1. 步骤确认
2. 代码生成
3. 测试验证
4. 文档更新
### 6.3 结束阶段
1. 总结完成内容
2. 记录遇到的问题
3. 更新经验文档
4. 规划下次任务
## 7. 上下文管理
1. 聚焦关键信息
2. 避免无关操作
3. 保持响应精确
4. 复用已有方案
5. 及时同步文档
```
## /.dockerignore
```dockerignore path="/.dockerignore"
# 依赖目录
node_modules
**/node_modules
# 构建输出
dist
**/dist
build
**/build
# 开发工具配置
.git
.gitignore
.idea
.vscode
*.sublime-*
*.swp
*.swo
# 环境文件
.env
.env.*
!.env.example
# 日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
*.log
# 测试覆盖率
coverage
**/coverage
# 临时文件
.DS_Store
Thumbs.db
*.tmp
*.temp
# 文档和其他
*.md
LICENSE
docs
tests
**/__tests__
**/*.test.*
**/*.spec.*
```
## /.env.example
```example path="/.env.example"
# API密钥配置示例
# 复制此文件到 .env.local 并填入你的API密钥
# OpenAI API配置
VITE_OPENAI_API_KEY=your_openai_api_key
# Gemini API配置
VITE_GEMINI_API_KEY=your_gemini_api_key
# DeepSeek API配置
VITE_DEEPSEEK_API_KEY=your_deepseek_api_key
# SiliconFlow API配置
VITE_SILICONFLOW_API_KEY=your_siliconflow_api_key
# 自定义API配置（可选）
VITE_CUSTOM_API_KEY=your_custom_api_key
VITE_CUSTOM_API_BASE_URL=your_custom_api_base_url
VITE_CUSTOM_API_MODEL=your_custom_model_name
```
## /.github/workflows/docker.yml
```yml path="/.github/workflows/docker.yml"
name: Docker Build and Push
on:
push:
branches: [ main, master ]
paths-ignore:
- '**.md'
- 'docs/**'
env:
REGISTRY: docker.io
IMAGE_NAME: linshen/prompt-optimizer
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- name: 检出代码
uses: actions/checkout@v4
- name: 安装 pnpm
uses: pnpm/action-setup@v2
with:
version: 10.5.2
run_install: false
- name: 设置 Node.js 环境
uses: actions/setup-node@v4
with:
node-version: '22'
cache: 'pnpm'
- name: 安装依赖
run: pnpm install
- name: 运行构建
run: pnpm build
- name: 运行测试
run: pnpm test
- name: 获取package.json版本号
id: version
run: |
VERSION=$(grep -m1 '"version":' package.json | cut -d'"' -f4)
echo "version=$VERSION" >> $GITHUB_OUTPUT
echo "Version from package.json: $VERSION"
- name: 登录到Docker Hub
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Set up QEMU
uses: docker/setup-qemu-action@v3
- name: 设置Docker Buildx
uses: docker/setup-buildx-action@v3
- name: 构建并推送Docker镜像
uses: docker/build-push-action@v6
with:
context: .
platforms: linux/amd64,linux/arm64
push: ${{ github.event_name != 'pull_request' }}
tags: |
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.version.outputs.version }}
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
cache-from: type=gha
cache-to: type=gha,mode=max
```
## /.github/workflows/test.yml
```yml path="/.github/workflows/test.yml"
name: test
on:
push:
branches: [ main, master ]
paths-ignore:
- '**.md'
- 'docs/**'
pull_request:
branches: [ main, master ]
paths-ignore:
- '**.md'
- 'docs/**'
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: 检出代码
uses: actions/checkout@v4
- name: 安装 pnpm
uses: pnpm/action-setup@v2
with:
version: 10.5.2
run_install: false
- name: 设置 Node.js 环境
uses: actions/setup-node@v4
with:
node-version: '22'
cache: 'pnpm'
- name: 安装依赖
run: pnpm install
- name: 运行构建
run: pnpm build
- name: 运行测试
run: pnpm test
```
## /.gitignore
```gitignore path="/.gitignore"
# dist
packages/extension/*.zip
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Environment files
.env.local
.env.*.local
.env.development.local
.env.test.local
.env.production.local
.vscode
.vercel
*.code-workspace
```
## /.husky/pre-commit
```husky/pre-commit path="/.husky/pre-commit"
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# 检查是否存在package-lock.json或yarn.lock文件
if [ -f "package-lock.json" ]; then
echo "错误: 检测到package-lock.json文件。"
echo "本项目强制使用pnpm作为包管理器，请删除package-lock.json并使用pnpm install安装依赖。"
exit 1
fi
if [ -f "yarn.lock" ]; then
echo "错误: 检测到yarn.lock文件。"
echo "本项目强制使用pnpm作为包管理器，请删除yarn.lock并使用pnpm install安装依赖。"
exit 1
fi
# 确保pnpm-lock.yaml存在
if [ ! -f "pnpm-lock.yaml" ]; then
echo "警告: 未检测到pnpm-lock.yaml文件。"
echo "请确保使用pnpm install安装依赖。"
fi
```
## /.husky/pre-commit.ps1
```ps1 path="/.husky/pre-commit.ps1"
# PowerShell版本的pre-commit钩子
# 检查是否存在package-lock.json或yarn.lock文件
if (Test-Path "package-lock.json") {
Write-Host "错误: 检测到package-lock.json文件。" -ForegroundColor Red
Write-Host "本项目强制使用pnpm作为包管理器，请删除package-lock.json并使用pnpm install安装依赖。" -ForegroundColor Red
exit 1
}
if (Test-Path "yarn.lock") {
Write-Host "错误: 检测到yarn.lock文件。" -ForegroundColor Red
Write-Host "本项目强制使用pnpm作为包管理器，请删除yarn.lock并使用pnpm install安装依赖。" -ForegroundColor Red
exit 1
}
# 确保pnpm-lock.yaml存在
if (-not (Test-Path "pnpm-lock.yaml")) {
Write-Host "警告: 未检测到pnpm-lock.yaml文件。" -ForegroundColor Yellow
Write-Host "请确保使用pnpm install安装依赖。" -ForegroundColor Yellow
}
```
## /.npmrc
```npmrc path="/.npmrc"
shamefully-hoist=true
engine-strict=true
auto-install-peers=true
strict-peer-dependencies=false
enable-pre-post-scripts=true
public-hoist-pattern[]=*esbuild*
public-hoist-pattern[]=*vue-demi*
```
## /.pnpmrc
```pnpmrc path="/.pnpmrc"
save-workspace-protocol=false
save-prefix='~'
strict-peer-dependencies=false
auto-install-peers=true
resolution-mode=highest
```
## /.windsurfrules
```windsurfrules path="/.windsurfrules"
# 环境说明
当前是windows系统，注意使用windows命令行而非linux命令行。
# 使用草稿本
请读取scratchpad.md文件。
你应该使用 `scratchpad.md` 文件作为草稿本来组织你的想法。特别是当你收到新任务时，你应该首先查看草稿本的内容，必要时清除旧的不同任务，先解释任务内容，然后规划完成任务所需的步骤。你可以使用待办标记来指示进度，例如：
[X] 任务1
[ ] 任务2
当你完成一个子任务时，也要在草稿本中更新任务进度。
特别是当你完成一个里程碑时，使用草稿本来反思和规划将有助于提高你的任务完成深度。
目标是帮助你同时掌握任务的全局视图和进度。在规划下一步时始终参考草稿本。
# 使用经验
请读取experience.md文件。
在与用户交互过程中，如果你发现项目中有任何可重用的内容（例如：库的版本、模型名称），特别是关于你犯的错误的修复或收到的纠正，你应该在 `experience.md` 文件做记录，以避免再次犯同样的错误。
```
## /Dockerfile
``` path="/Dockerfile"
FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN npm install -g corepack@latest && corepack enable
FROM base AS build
COPY . /app
WORKDIR /app
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN pnpm run build
FROM nginx:stable-alpine
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/packages/web/dist /usr/share/nginx/html
# 复制启动脚本
COPY docker/generate-config.sh /docker-entrypoint.d/40-generate-config.sh
RUN chmod +x /docker-entrypoint.d/40-generate-config.sh
EXPOSE 80
```
## /LICENSE
``` path="/LICENSE"
MIT License
Copyright (c) 2025 linshenkx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
## /README.md
# Prompt Optimizer (提示词优化器) 🚀
[English](README_EN.md) | [中文](README.md)
[](https://github.com/linshenkx/prompt-optimizer/stargazers)
[](LICENSE)
[](https://hub.docker.com/r/linshen/prompt-optimizer)
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
[在线体验](https://prompt.always200.com) | [快速开始](#快速开始) | [常见问题](#常见问题) | [开发文档](dev.md) | [Vercel部署指南](docs/vercel.md) | [Chrome插件](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna)
## 📖 项目简介
Prompt Optimizer是一个强大的AI提示词优化工具，帮助你编写更好的AI提示词，提升AI输出质量。支持Web应用和Chrome插件两种使用方式。
### 🎥 功能演示
## ✨ 核心特性
- 🎯 智能优化：一键优化提示词，支持多轮迭代改进，提升AI回复准确度
- 🔄 对比测试：支持原始提示词和优化后提示词的实时对比，直观展示优化效果
- 🔄 多模型集成：支持OpenAI、Gemini、DeepSeek等主流AI模型，满足不同需求
- 🔒 安全架构：纯客户端处理，数据直接与AI服务商交互，不经过中间服务器
- 💾 隐私保护：本地加密存储历史记录和API密钥，确保数据安全
- 📱 多端支持：同时提供Web应用和Chrome插件两种使用方式
- 🎨 用户体验：简洁直观的界面设计，响应式布局和流畅交互动效果
- 🌐 跨域支持：Vercel部署时支持使用Edge Runtime代理解决跨域问题（可能会触发部分厂商风控）
## 快速开始
### 1. 使用在线版本（推荐）
直接访问：[https://prompt.always200.com](https://prompt.always200.com)
项目是纯前端项目，所有数据只存储在浏览器本地，不会上传至任何服务器，因此直接使用在线版本也是安全可靠的
### 2. Vercel部署
方式1：一键部署到自己的Vercel：
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
方式2: Fork项目后在Vercel中导入（推荐）：
- 先Fork项目到自己的GitHub
- 然后在Vercel中导入该项目
- 可跟踪源项目更新，便于同步最新功能和修复
更多详细的部署步骤和注意事项，请查看 [Vercel部署指南](docs/vercel.md)
### 3. 安装Chrome插件
1. 从Chrome商店安装（由于审批较慢，可能不是最新的）：[Chrome商店地址](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna)
2. 点击图标即可打开提示词优化器
### 4. Docker部署
```bash
# 运行容器（默认配置）
docker run -d -p 80:80 --restart unless-stopped --name prompt-optimizer linshen/prompt-optimizer
# 运行容器（配置API密钥）
docker run -d -p 80:80 \
-e VITE_OPENAI_API_KEY=your_key \
--restart unless-stopped \
--name prompt-optimizer \
linshen/prompt-optimizer
```
### 5. Docker Compose部署
```bash
# 1. 克隆仓库
git clone https://github.com/linshenkx/prompt-optimizer.git
cd prompt-optimizer
# 2. 可选：创建.env文件配置API密钥
cat > .env << EOF
VITE_OPENAI_API_KEY=your_openai_api_key
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_DEEPSEEK_API_KEY=your_deepseek_api_key
EOF
# 3. 启动服务
docker compose up -d
# 4. 查看日志
docker compose logs -f
```
你还可以直接编辑docker-compose.yml文件，自定义配置：
```yaml
services:
prompt-optimizer:
image: linshen/prompt-optimizer:latest
container_name: prompt-optimizer
restart: unless-stopped
ports:
- "8081:80" # 修改端口映射
environment:
- VITE_OPENAI_API_KEY=your_key_here # 直接在配置中设置密钥
```
## ⚙️ API密钥配置
### 方式一：通过界面配置（推荐）
1. 点击界面右上角的"⚙️设置"按钮
2. 选择"模型管理"选项卡
3. 点击需要配置的模型（如OpenAI、Gemini、DeepSeek等）
4. 在弹出的配置框中输入对应的API密钥
5. 点击"保存"即可
支持的模型：
- OpenAI (gpt-3.5-turbo, gpt-4)
- Gemini (gemini-2.0-flash)
- DeepSeek (DeepSeek-V3)
- 自定义API（OpenAI兼容接口）
### 方式二：通过环境变量配置
Docker部署时通过 `-e` 参数配置环境变量：
```bash
-e VITE_OPENAI_API_KEY=your_key
-e VITE_GEMINI_API_KEY=your_key
-e VITE_DEEPSEEK_API_KEY=your_key
-e VITE_SILICONFLOW_API_KEY=your_key
-e VITE_CUSTOM_API_KEY=your_custom_api_key
-e VITE_CUSTOM_API_BASE_URL=your_custom_api_base_url
-e VITE_CUSTOM_API_MODEL=your_custom_model_name
```
## 本地开发
详细文档可查看 [开发文档](dev.md)
```bash
# 1. 克隆项目
git clone https://github.com/linshenkx/prompt-optimizer.git
cd prompt-optimizer
# 2. 安装依赖
pnpm install
# 3. 启动开发服务
pnpm dev # 主开发命令：构建core/ui并运行web应用
pnpm dev:web # 仅运行web应用
pnpm dev:fresh # 完整重置并重新启动开发环境
```
## 🗺️ 开发路线
- [x] 基础功能开发
- [x] Web应用发布
- [x] Chrome插件发布
- [x] 自定义模型支持
- [x] 多模型支持优化
- [x] 国际化支持
详细的项目状态可查看 [项目状态文档](docs/project-status.md)
## 📖 相关文档
- [文档索引](docs/README.md) - 所有文档的索引
- [技术开发指南](docs/technical-development-guide.md) - 技术栈和开发规范
- [项目结构](docs/project-structure.md) - 详细的项目结构说明
- [项目状态](docs/project-status.md) - 当前进度和计划
- [产品需求](docs/prd.md) - 产品需求文档
- [Vercel部署指南](docs/vercel.md) - Vercel部署详细说明
## Star History
## 常见问题
### API连接问题
#### Q1: 为什么配置好API密钥后仍然无法连接到模型服务？
**A**: 大多数连接失败是由**跨域问题**（CORS）导致的。由于本项目是纯前端应用，浏览器出于安全考虑会阻止直接访问不同源的API服务。模型服务如未正确配置CORS策略，会拒绝来自浏览器的直接请求。
#### Q2: 如何解决本地Ollama的连接问题？
**A**: Ollama完全支持OpenAI标准接口，只需配置正确的跨域策略：
1. 设置环境变量 `OLLAMA_ORIGINS=*` 允许任意来源的请求
2. 如仍有问题，设置 `OLLAMA_HOST=0.0.0.0:11434` 监听任意IP地址
#### Q3: 如何解决商业API（如Nvidia的DS API、字节跳动的火山API）的跨域问题？
**A**: 这些平台通常有严格的跨域限制，推荐以下解决方案：
1. **使用Vercel代理**（便捷方案）
- 使用在线版本：[prompt.always200.com](https://prompt.always200.com)
- 或自行部署到Vercel平台
- 在模型设置中勾选"使用Vercel代理"选项
- 请求流向：浏览器→Vercel→模型服务提供商
- 详细步骤请参考 [Vercel部署指南](docs/vercel.md)
2. **使用自部署的API中转服务**（可靠方案）
- 部署如OneAPI等开源API聚合/代理工具
- 在设置中配置为自定义API端点
- 请求流向：浏览器→中转服务→模型服务提供商
#### Q4: Vercel代理有什么缺点或风险？
**A**: 使用Vercel代理可能会触发某些模型服务提供商的风控机制。部分厂商可能会将来自Vercel的请求判定为代理行为，从而限制或拒绝服务。如遇此问题，建议使用自部署的中转服务。
## 🤝 参与贡献
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m '添加某个特性'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request
提示：使用cursor工具开发时，建议在提交前:
1. 使用"code_review"规则进行代码审查
2. 按照审查报告格式检查:
- 变更的整体一致性
- 代码质量和实现方式
- 测试覆盖情况
- 文档完善程度
3. 根据审查结果进行优化后再提交
## 👏 贡献者名单
感谢所有为项目做出贡献的开发者！
## 📄 开源协议
本项目采用 [MIT](LICENSE) 协议开源。
---
如果这个项目对你有帮助，请考虑给它一个 Star ⭐️
## 👥 联系我们
- 提交 Issue
- 发起 Pull Request
- 加入讨论组
## /README_EN.md
# Prompt Optimizer 🚀
[English](README_EN.md) | [中文](README.md)
[](https://github.com/linshenkx/prompt-optimizer/stargazers)
[](LICENSE)
[](https://hub.docker.com/r/linshen/prompt-optimizer)
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
[Live Demo](https://prompt.always200.com) | [Quick Start](#quick-start) | [FAQ](#faq) | [Development Docs](dev.md) | [Vercel Deployment Guide](docs/vercel_en.md) | [Chrome Extension](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna)
## 📖 Project Introduction
Prompt Optimizer is a powerful AI prompt optimization tool that helps you write better AI prompts and improve the quality of AI outputs. It supports both web application and Chrome extension usage.
### 🎥 Feature Demonstration
## ✨ Core Features
- 🎯 Intelligent Optimization: One-click prompt optimization with multi-round iterative improvements to enhance AI response accuracy
- 🔄 Comparison Testing: Real-time comparison between original and optimized prompts for intuitive demonstration of optimization effects
- 🔄 Multi-model Integration: Support for mainstream AI models including OpenAI, Gemini, DeepSeek, etc., to meet different needs
- 🔒 Secure Architecture: Pure client-side processing with direct data interaction with AI service providers, bypassing intermediate servers
- 💾 Privacy Protection: Local encrypted storage of history records and API keys to ensure data security
- 📱 Multi-platform Support: Available as both a web application and Chrome extension
- 🎨 User Experience: Clean and intuitive interface design with responsive layout and smooth interaction effects
- 🌐 Cross-domain Support: Edge Runtime proxy for cross-domain issues when deployed on Vercel (may trigger risk control from some providers)
## Quick Start
### 1. Use Online Version (Recommended)
Direct access: [https://prompt.always200.com](https://prompt.always200.com)
This is a pure frontend project with all data stored locally in your browser and never uploaded to any server, making the online version both safe and reliable to use.
### 2. Vercel Deployment
Method 1: One-click deployment to your own Vercel:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
Method 2: Fork the project and import to Vercel (Recommended):
- First fork the project to your GitHub account
- Then import the project to Vercel
- This allows tracking of source project updates for easy syncing of new features and fixes
For more detailed deployment steps and important notes, please check the [Vercel Deployment Guide](docs/vercel_en.md)
### 3. Install Chrome Extension
1. Install from Chrome Web Store (may not be the latest version due to approval delays): [Chrome Web Store](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna)
2. Click the icon to open the Prompt Optimizer
### 4. Docker Deployment
```bash
# Run container (default configuration)
docker run -d -p 80:80 --restart unless-stopped --name prompt-optimizer linshen/prompt-optimizer
# Run container (with API key configuration)
docker run -d -p 80:80 \
-e VITE_OPENAI_API_KEY=your_key \
--restart unless-stopped \
--name prompt-optimizer \
linshen/prompt-optimizer
```
### 5. Docker Compose Deployment
```bash
# 1. Clone the repository
git clone https://github.com/linshenkx/prompt-optimizer.git
cd prompt-optimizer
# 2. Optional: Create .env file for API keys
cat > .env << EOF
VITE_OPENAI_API_KEY=your_openai_api_key
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_DEEPSEEK_API_KEY=your_deepseek_api_key
EOF
# 3. Start the service
docker compose up -d
# 4. View logs
docker compose logs -f
```
You can also edit the docker-compose.yml file directly to customize your configuration:
```yaml
services:
prompt-optimizer:
image: linshen/prompt-optimizer:latest
container_name: prompt-optimizer
restart: unless-stopped
ports:
- "8081:80" # Change port mapping
environment:
- VITE_OPENAI_API_KEY=your_key_here # Set API key directly in config
```
## ⚙️ API Key Configuration
### Method 1: Via Interface (Recommended)
1. Click the "⚙️Settings" button in the upper right corner
2. Select the "Model Management" tab
3. Click on the model you need to configure (such as OpenAI, Gemini, DeepSeek, etc.)
4. Enter the corresponding API key in the configuration box
5. Click "Save"
Supported models:
- OpenAI (gpt-3.5-turbo, gpt-4)
- Gemini (gemini-2.0-flash)
- DeepSeek (DeepSeek-V3)
- Custom API (OpenAI compatible interface)
### Method 2: Via Environment Variables
Configure environment variables through the `-e` parameter when deploying with Docker:
```bash
-e VITE_OPENAI_API_KEY=your_key
-e VITE_GEMINI_API_KEY=your_key
-e VITE_DEEPSEEK_API_KEY=your_key
-e VITE_SILICONFLOW_API_KEY=your_key
-e VITE_CUSTOM_API_KEY=your_custom_api_key
-e VITE_CUSTOM_API_BASE_URL=your_custom_api_base_url
-e VITE_CUSTOM_API_MODEL=your_custom_model_name
```
## Local Development
For detailed documentation, see [Development Documentation](dev.md)
```bash
# 1. Clone the project
git clone https://github.com/linshenkx/prompt-optimizer.git
cd prompt-optimizer
# 2. Install dependencies
pnpm install
# 3. Start development server
pnpm dev # Main development command: build core/ui and run web app
pnpm dev:web # Run web app only
pnpm dev:fresh # Complete reset and restart development environment
```
## 🗺️ Roadmap
- [x] Basic feature development
- [x] Web application release
- [x] Chrome extension release
- [x] Custom model support
- [x] Multi-model support optimization
- [x] Internationalization support
For detailed project status, see [Project Status Document](docs/project-status.md)
## 📖 Related Documentation
- [Documentation Index](docs/README.md) - Index of all documentation
- [Technical Development Guide](docs/technical-development-guide.md) - Technology stack and development specifications
- [Project Structure](docs/project-structure.md) - Detailed project structure description
- [Project Status](docs/project-status.md) - Current progress and plans
- [Product Requirements](docs/prd.md) - Product requirements document
- [Vercel Deployment Guide](docs/vercel_en.md) - Detailed instructions for Vercel deployment
## Star History
## FAQ
### API Connection Issues
#### Q1: Why can't I connect to the model service after configuring the API key?
**A**: Most connection failures are caused by **Cross-Origin Resource Sharing (CORS)** issues. As this project is a pure frontend application, browsers block direct access to API services from different origins for security reasons. Model services will reject direct requests from browsers if CORS policies are not correctly configured.
#### Q2: How to solve Ollama connection issues?
**A**: Ollama fully supports the OpenAI standard interface, just configure the correct CORS policy:
1. Set environment variable `OLLAMA_ORIGINS=*` to allow requests from any origin
2. If issues persist, set `OLLAMA_HOST=0.0.0.0:11434` to listen on any IP address
#### Q3: How to solve CORS issues with commercial APIs (such as Nvidia's DS API, ByteDance's Volcano API)?
**A**: These platforms typically have strict CORS restrictions. Recommended solutions:
1. **Use Vercel Proxy** (Convenient solution)
- Use the online version: [prompt.always200.com](https://prompt.always200.com)
- Or deploy to your own Vercel platform
- Check "Use Vercel Proxy" option in model settings
- Request flow: Browser → Vercel → Model service provider
- For detailed steps, please refer to the [Vercel Deployment Guide](docs/vercel_en.md)
2. **Use self-deployed API proxy service** (Reliable solution)
- Deploy open-source API aggregation/proxy tools like OneAPI
- Configure as custom API endpoint in settings
- Request flow: Browser → Proxy service → Model service provider
#### Q4: What are the drawbacks or risks of using Vercel proxy?
**A**: Using Vercel proxy may trigger risk control mechanisms of some model service providers. Some vendors may identify requests from Vercel as proxy behavior, thereby limiting or denying service. If you encounter this issue, we recommend using a self-deployed proxy service.
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some feature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
Tip: When developing with Cursor tool, it is recommended to do the following before committing:
1. Use the "CodeReview" rule for review
2. Check according to the review report format:
- Overall consistency of changes
- Code quality and implementation method
- Test coverage
- Documentation completeness
3. Optimize based on review results before submitting
## 👏 Contributors
Thanks to all the developers who have contributed to this project!
## 📄 License
This project is licensed under the [MIT](LICENSE) License.
---
If this project is helpful to you, please consider giving it a Star ⭐️
## 👥 Contact Us
- Submit an Issue
- Create a Pull Request
- Join the discussion group
## /api/proxy.js
```js path="/api/proxy.js"
export const config = {
runtime: 'edge'
};
export default async function handler(req) {
// 处理CORS预检请求
if (req.method === 'OPTIONS') {
return new Response(null, {
status: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-API-KEY',
'Access-Control-Max-Age': '86400',
},
});
}
try {
// 解析请求数据
const { searchParams } = new URL(req.url);
const targetUrl = searchParams.get('targetUrl');
if (!targetUrl) {
return new Response(JSON.stringify({ error: '缺少目标URL参数' }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// 确保targetUrl是有效的URL
let validTargetUrl;
try {
validTargetUrl = new URL(decodeURIComponent(targetUrl)).toString();
console.log('目标URL:', validTargetUrl);
} catch (error) {
return new Response(JSON.stringify({ error: `无效的目标URL: ${error.message}` }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// 准备请求头
const headers = new Headers();
req.headers.forEach((value, key) => {
// 排除一些特定的头，这些头可能会导致问题
if (!['host', 'connection', 'content-length'].includes(key.toLowerCase())) {
headers.set(key, value);
}
});
// 获取请求体
let body = null;
if (req.method !== 'GET' && req.method !== 'HEAD') {
body = await req.text();
}
// 发送请求到目标URL
const fetchResponse = await fetch(validTargetUrl, {
method: req.method,
headers,
body,
});
// 读取响应数据
const data = await fetchResponse.text();
// 创建响应头
const responseHeaders = new Headers();
fetchResponse.headers.forEach((value, key) => {
responseHeaders.set(key, value);
});
// 设置CORS头
responseHeaders.set('Access-Control-Allow-Origin', '*');
responseHeaders.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
responseHeaders.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-API-KEY');
// 返回响应
return new Response(data, {
status: fetchResponse.status,
statusText: fetchResponse.statusText,
headers: responseHeaders,
});
} catch (error) {
console.error('代理请求失败:', error);
return new Response(JSON.stringify({ error: `代理请求失败: ${error.message}` }), {
status: 500,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
}
}
```
## /api/stream.js
```js path="/api/stream.js"
// api/stream.js
export const config = {
runtime: 'edge'
};
export default async function handler(req) {
console.log('流式代理请求开始处理:', new Date().toISOString());
// 处理CORS预检请求
if (req.method === 'OPTIONS') {
console.log('处理CORS预检请求');
return new Response(null, {
status: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-API-KEY',
'Access-Control-Max-Age': '86400',
},
});
}
try {
// 解析请求数据
const { searchParams } = new URL(req.url);
const targetUrl = searchParams.get('targetUrl');
if (!targetUrl) {
console.error('缺少目标URL参数');
return new Response(JSON.stringify({ error: '缺少目标URL参数' }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// 确保targetUrl是有效的URL
let validTargetUrl;
try {
validTargetUrl = new URL(decodeURIComponent(targetUrl)).toString();
console.log('目标URL:', validTargetUrl);
} catch (error) {
console.error('无效的目标URL:', error);
return new Response(JSON.stringify({ error: `无效的目标URL: ${error.message}` }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// 准备请求头
const headers = new Headers();
req.headers.forEach((value, key) => {
// 排除一些特定的头，这些头可能会导致问题
if (!['host', 'connection', 'content-length'].includes(key.toLowerCase())) {
headers.set(key, value);
}
});
console.log('请求方法:', req.method);
console.log('请求头数量:', [...headers.keys()].length);
// 获取请求体
let body = null;
if (req.method !== 'GET' && req.method !== 'HEAD') {
body = await req.text();
console.log('请求体长度:', body?.length || 0);
}
console.log('开始向目标URL发送请求:', new Date().toISOString());
// 发送请求到目标URL
const fetchResponse = await fetch(validTargetUrl, {
method: req.method,
headers,
body,
duplex: 'half', // 支持流式请求
});
console.log('收到目标URL响应:', new Date().toISOString(), '状态码:', fetchResponse.status);
// 创建响应头
const responseHeaders = new Headers();
fetchResponse.headers.forEach((value, key) => {
responseHeaders.set(key, value);
});
// 设置CORS头
responseHeaders.set('Access-Control-Allow-Origin', '*');
responseHeaders.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
responseHeaders.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-API-KEY');
// 检查是否是SSE流
const contentType = fetchResponse.headers.get('content-type');
const isEventStream = contentType?.includes('text/event-stream');
console.log('响应内容类型:', contentType, '是否为SSE流:', isEventStream);
if (isEventStream) {
responseHeaders.set('Content-Type', 'text/event-stream');
responseHeaders.set('Cache-Control', 'no-cache');
responseHeaders.set('Connection', 'keep-alive');
// 确保不缓冲数据
responseHeaders.set('X-Accel-Buffering', 'no');
}
// 创建并返回流式响应，使用TransformStream确保数据立即传输
const { readable, writable } = new TransformStream();
console.log('创建TransformStream完成');
// 启动数据传输过程
(async () => {
const writer = writable.getWriter();
const reader = fetchResponse.body.getReader();
try {
console.log('开始流式传输数据:', new Date().toISOString());
let chunkCount = 0;
let totalBytes = 0;
while (true) {
const { done, value } = await reader.read();
if (done) {
console.log('流式传输完成:', new Date().toISOString());
console.log(`总共传输 ${chunkCount} 个数据块，${totalBytes} 字节`);
await writer.close();
break;
}
// 立即写入数据并刷新
await writer.write(value);
chunkCount++;
totalBytes += value.length;
if (chunkCount % 10 === 0) {
console.log(`已传输 ${chunkCount} 个数据块，${totalBytes} 字节`);
}
}
} catch (error) {
console.error('流式传输错误:', error);
writer.abort(error);
}
})();
console.log('返回流式响应');
return new Response(readable, {
status: fetchResponse.status,
statusText: fetchResponse.statusText,
headers: responseHeaders,
});
} catch (error) {
console.error('流式代理请求失败:', error);
return new Response(JSON.stringify({ error: `流式代理请求失败: ${error.message}` }), {
status: 500,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
}
}
```
## /api/vercel-status.js
```js path="/api/vercel-status.js"
export const config = {
runtime: 'edge'
};
export default async function handler(request) {
return new Response(
JSON.stringify({
status: 'available',
environment: 'vercel',
proxySupport: true,
version: '1.0.0'
}),
{
status: 200,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
}
}
);
}
```
## /cursor_tips.md
# AI辅助开发指南
**1. 简介：**
* 强调采用结构化方法进行AI辅助开发的重要性
* 说明这些指南旨在帮助开发者高效利用AI工具，最小化token使用，减少错误
**2. 项目设置：**
* 创建项目地图（`fileNames.md`）的重要性
* `fileNames.md`应列出所有文件和目录，包括每个组件用途和功能的单行描述
* 说明文档文件夹的作用，以及以下文件的结构：
- `prd.md`（产品需求文档）
- `app-flow.md`（应用流程）
- `backend-structure.md`（后端结构）
- `frontend-guidelines.md`（前端指南）
- `tech-stack.md`（技术栈）
- `file-structure.md`（文件结构）
**3. Claude作为"软件架构师"：**
* 如何设置专用的Claude项目来优化提示词
* Claude项目知识库应包含：
- 完整的文件结构（`fileNames.md`）
- 主要功能需求文档
- 组件特定的功能需求文档
- Cursor/bolt.new的文档
**4. 结构化提示流程：**
* 解释包含"系统提示"和"执行提示"的两步提示流程
* 使用模式说明：
- 使用系统提示设置Claude上下文
- 使用执行提示让Claude分析问题，识别受影响的文件，并建议高效方法
* 提供执行提示的详细示例，如："我们需要为登录表单添加邮箱验证。参考`fileNames.md`中的`src/components/login.jsx`和项目知识中的`Documentation/FRD/auth.md`。请为`bolt.new`建议一个修改该文件的高效方法，添加邮箱验证逻辑。"
**5. Cursor提示技巧：**
* **"修复错误"**：
- 说明AI模型有时会遗漏细节并触发错误循环
- 提示词："分析此错误。识别其原因并创建分步解决方案。"
* **"新功能"**：
- 说明AI需要针对每个组件范围重新上下文化
- 提示词："阅读`@`中的描述并创建实现计划。在继续之前，编写实现计划。在执行之前解释你要更改的内容。"
* **响应结构**：
- 说明如何向AI提供更新和上下文
- 提供示例："页眉现已对齐。现在我们需要一个登录按钮。查看@login-doc并解释你的方法"
**6. 进度追踪：**
* `progress.md`文件的用途和提示词："在每个完成的步骤结束时，在`@progress.md`中记录你的工作。实现了哪些功能，出现了什么错误，以及如何修复的？按顺序回答这三个问题，不要遗漏信息。"
* `project-status.md`文件的用途和提示词："在每个工作会话结束时，在`@project-status.md`中记录你的工作。查看`@progress.md`文件以总结所有工作，描述本次会话完成的内容。为下一个工作会话创建详细报告，以便提供完整概述。"
**7. Cursor代理技巧：**
* 解释Cursor代理可能的过度执行问题
* 提供以下指导来防止该问题："阅读@(文档名称)以确定函数范围。使用思维链逻辑创建分步实现计划。详细概述功能的每个部分，提供高层次概述。将这些部分分解为详细的编号步骤。这将提供一个你可以批准的计划，并确保操作符合要求。"
**8. `.bolt/ignore`优化：**
* 解释最小化LLM上下文的必要性
* 解释`.bolt/ignore`文件的使用方法以及如何识别要排除的文件和目录
**9. 结论：**
* 重申这种方法的总体目标以及它如何使开发人员能够高效工作
## /dev.md
# 开发指南 (Development Guide)
## 目录
- [本地开发环境配置](#本地开发环境配置)
- [Docker开发和部署](#docker开发和部署)
- [环境变量配置](#环境变量配置)
- [开发工作流程](#开发工作流程)
- [项目构建和部署](#项目构建和部署)
- [常见问题解决](#常见问题解决)
## 本地开发环境配置
### 基础环境要求
- Node.js >= 18
- pnpm >= 8
- Git >= 2.0
- VSCode (推荐)
### 开发环境设置
```bash
# 1. 克隆项目
git clone https://github.com/linshenkx/prompt-optimizer.git
cd prompt-optimizer
# 2. 安装依赖
pnpm install
# 3. 启动开发服务
pnpm dev # 主开发命令：构建core/ui并运行web应用
pnpm dev:web # 仅运行web应用
pnpm dev:fresh # 完整重置并重新启动开发环境
```
## Docker开发和部署
### 环境要求
- Docker >= 20.10.0
### Docker构建和运行
#### 基础构建
```bash
# 获取package.json中的版本号
$VERSION=$(node -p "require('./package.json').version")
# 构建镜像（使用动态版本号）
docker build -t linshen/prompt-optimizer:$VERSION .
# 添加latest标签
docker tag linshen/prompt-optimizer:$VERSION linshen/prompt-optimizer:latest
# 运行容器
docker run -d -p 80:80 --restart unless-stopped --name prompt-optimizer linshen/prompt-optimizer:$VERSION
# 推送
docker push linshen/prompt-optimizer:$VERSION
docker push linshen/prompt-optimizer:latest
```
docker本地构建测试
```shell
docker build -t linshen/prompt-optimizer:test .
docker rm -f prompt-optimizer
docker run -d -p 80:80 --restart unless-stopped --name prompt-optimizer -e VITE_GEMINI_API_KEY=111 linshen/prompt-optimizer:test
```
### 多阶段构建说明
Dockerfile使用了多阶段构建优化镜像大小：
1. `base`: 基础Node.js环境，安装pnpm
2. `builder`: 构建阶段，安装依赖并构建项目
3. `production`: 最终镜像，只包含构建产物和nginx
## 环境变量配置
### 本地开发环境变量
在项目根目录创建 `.env.local` 文件：
```env
# OpenAI API配置
VITE_OPENAI_API_KEY=your_openai_api_key
# Gemini API配置
VITE_GEMINI_API_KEY=your_gemini_api_key
# DeepSeek API配置
VITE_DEEPSEEK_API_KEY=your_deepseek_api_key
# 自定义API配置
VITE_CUSTOM_API_KEY=your_custom_api_key
VITE_CUSTOM_API_BASE_URL=your_custom_api_base_url
VITE_CUSTOM_API_MODEL=your_custom_model_name
```
### Docker环境变量
通过 `-e` 参数设置容器环境变量：
```bash
docker run -d -p 80:80 \
-e VITE_OPENAI_API_KEY=your_key \
-e VITE_CUSTOM_API_BASE_URL=your_api_url \
prompt-optimizer
```
## 开发工作流程
### 代码提交规范
```bash
# 提交格式
():
# 示例
feat(ui): 添加新的提示词编辑器组件
fix(core): 修复API调用超时问题
```
### 测试流程
```bash
# 运行所有测试
pnpm test
# 运行特定包的测试
pnpm test:core
pnpm test:ui
pnpm test:web
```
## 项目构建和部署
### 本地构建
```bash
# 构建所有包
pnpm build
# 构建特定包
pnpm build:core
pnpm build:ui
pnpm build:web
pnpm build:ext
```
### 常用Docker命令
```bash
# 查看容器日志
docker logs -f prompt-optimizer
# 进入容器
docker exec -it prompt-optimizer sh
# 容器管理
docker stop prompt-optimizer
docker start prompt-optimizer
docker restart prompt-optimizer
# 清理资源
docker rm prompt-optimizer
docker rmi prompt-optimizer
```
## 常见问题解决
### 依赖安装问题
```bash
# 清理依赖缓存
pnpm clean
# 重新安装依赖
pnpm install --force
```
### 开发环境问题
```bash
# 完全重置开发环境
pnpm dev:fresh
# 清理构建缓存
pnpm clean
rm -rf node_modules
pnpm install
```
### 构建失败处理
1. 检查Node.js版本是否符合要求
2. 清理构建缓存：`pnpm clean`
3. 重新安装依赖：`pnpm install`
4. 查看详细构建日志：`pnpm build --debug`
### 容器运行问题
1. 检查端口占用：`netstat -ano | findstr :80`
2. 检查容器日志：`docker logs prompt-optimizer`
3. 检查容器状态：`docker ps -a`
## /docker-compose.yml
```yml path="/docker-compose.yml"
services:
prompt-optimizer:
image: linshen/prompt-optimizer:latest
# Alternatively, you can build from source:
# build:
# context: .
# dockerfile: Dockerfile
container_name: prompt-optimizer
restart: unless-stopped
ports:
- "8081:80"
environment:
# OpenAI API配置
- VITE_OPENAI_API_KEY=${VITE_OPENAI_API_KEY:-}
# Gemini API配置
- VITE_GEMINI_API_KEY=${VITE_GEMINI_API_KEY:-}
# DeepSeek API配置
- VITE_DEEPSEEK_API_KEY=${VITE_DEEPSEEK_API_KEY:-}
# SiliconFlow API配置
- VITE_SILICONFLOW_API_KEY=${VITE_SILICONFLOW_API_KEY:-}
# 自定义API配置
- VITE_CUSTOM_API_KEY=${VITE_CUSTOM_API_KEY:-}
- VITE_CUSTOM_API_BASE_URL=${VITE_CUSTOM_API_BASE_URL:-}
- VITE_CUSTOM_API_MODEL=${VITE_CUSTOM_API_MODEL:-}
# 健康检查
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:80"]
interval: 30s
timeout: 10s
retries: 3
start_period: 5s
```
## /docker/generate-config.sh
```sh path="/docker/generate-config.sh"
#!/bin/sh
# 配置文件路径
CONFIG_FILE="/usr/share/nginx/html/config.js"
# 生成配置文件
cat > $CONFIG_FILE << EOF
window.runtime_config = {
OPENAI_API_KEY: "${VITE_OPENAI_API_KEY:-}",
GEMINI_API_KEY: "${VITE_GEMINI_API_KEY:-}",
DEEPSEEK_API_KEY: "${VITE_DEEPSEEK_API_KEY:-}",
SILICONFLOW_API_KEY: "${VITE_SILICONFLOW_API_KEY:-}",
CUSTOM_API_KEY: "${VITE_CUSTOM_API_KEY:-}",
CUSTOM_API_BASE_URL: "${VITE_CUSTOM_API_BASE_URL:-}",
CUSTOM_API_MODEL: "${VITE_CUSTOM_API_MODEL:-}"
};
console.log("运行时配置已加载");
EOF
echo "配置文件已生成: $CONFIG_FILE"
```
## /docker/nginx.conf
```conf path="/docker/nginx.conf"
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
# 安全相关头部
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' https: http: data: blob: 'unsafe-inline'" always;
# 启用gzip压缩
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss text/javascript application/x-javascript image/svg+xml;
gzip_min_length 1000;
# 客户端缓存控制
location /assets {
expires 7d;
add_header Cache-Control "public, no-transform";
try_files $uri $uri/ =404;
}
# API请求代理示例（如果需要的话取消注释）
# location /api {
# proxy_pass http://api_backend;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection 'upgrade';
# proxy_set_header Host $host;
# proxy_cache_bypass $http_upgrade;
# }
# SPA应用路由支持
location / {
try_files $uri $uri/ /index.html;
expires -1;
add_header Cache-Control "no-store, no-cache, must-revalidate";
}
# 禁止访问隐藏文件
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
# 错误页面配置
error_page 404 /index.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# 性能优化：关闭访问日志，只记录错误
access_log off;
error_log /var/log/nginx/error.log error;
# 禁止特定请求方法
if ($request_method !~ ^(GET|HEAD|POST|PUT|DELETE|OPTIONS)$) {
return 444;
}
# 配置较大文件的传输
client_max_body_size 50m;
client_body_buffer_size 128k;
# 连接超时设置
keepalive_timeout 65;
client_header_timeout 60;
client_body_timeout 60;
send_timeout 60;
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 60;
}
```
## /docs/README.md
# 项目文档索引
## 文档合并说明
为了提高文档的组织性和可读性，我们对项目文档进行了重构和合并。以下是文档合并情况：
| 新文档 | 包含原文档 | 说明 |
|-------|------------|------|
| [technical-development-guide.md](./technical-development-guide.md) | development-guidelines.md, technical-documentation.md | 技术开发指南，整合了开发规范和技术文档 |
| [project-structure.md](./project-structure.md) | file-structure.md, fileNames.md | 项目结构说明，包含文件结构和目录组织 |
| [project-status.md](./project-status.md) | progress.md, chrome-extension-plan.md | 项目状态，包含进度和Chrome扩展计划 |
## 核心文档
- [README.md](../README.md) - 项目总体介绍
- [technical-development-guide.md](./technical-development-guide.md) - 技术开发指南，包含技术栈和开发规范
- [project-structure.md](./project-structure.md) - 项目结构，专注于文件和目录组织
- [project-status.md](./project-status.md) - 项目状态，包含进度和计划
- [prd.md](./prd.md) - 产品需求文档
## 其他资源
- [experience.md](../experience.md) - 项目经验总结
- [scratchpad.md](../scratchpad.md) - 开发笔记
- [CHANGELOG.md](./CHANGELOG.md) - 文档更新日志
## 如何使用文档
1. **新成员入职**：
- 首先阅读 README.md，了解项目概况
- 查看 project-structure.md 了解项目结构
- 参考 technical-development-guide.md 了解技术实现和开发规范
2. **开发参考**：
- 遵循 technical-development-guide.md 中的开发规范
- 查阅 technical-development-guide.md 了解应用流程
- 参考 project-structure.md 了解代码组织
3. **项目进度**：
- 通过 project-status.md 了解当前进度和计划
- 关注 CHANGELOG.md 了解最新变更
## 文档维护说明
1. 所有文档采用 Markdown 格式
2. 文档更新后，请在文档末尾添加更新时间
3. 重要变更请同时更新 project-status.md 中的更新记录
4. 文档中的代码示例应确保可运行且符合项目规范
5. 注意区分不同文档的职责，避免内容重复
6. 弃用的文档应标记为已弃用，并引导用户使用新文档
最后更新：2024-03-02
## /docs/experience.md
# 项目经验总结（优化版）
## 📋 快速索引
- [架构设计](#架构设计)
- [错误处理](#错误处理)
- [测试规范](#测试规范)
- [Vue开发](#vue开发)
- [工具与配置](#工具与配置)
- [关键重构经验](#关键重构经验)
- [API密钥管理经验](#api密钥管理经验)
- [自定义API集成经验](#自定义API集成经验)
---
## 架构设计
### API集成规范
1. **配置分离**
- 业务逻辑与API配置解耦
- 统一接口格式（OpenAI兼容）
- 独立管理提示词模板
```js
// 配置示例
export default {
baseURL: "https://api.openai.com/v1",
models: ["gpt-4", "gpt-3.5"]
}
```
2. **模块化结构**
```src
├─ api/ # API封装
├─ services/ # 业务逻辑
├─ config/ # 全局配置
├─ components/# UI组件
└─ prompts/ # 提示模板库
```
### LLM服务架构
| 设计要点 | 实现方案 |
|-------------------|----------------------------|
| 接口标准化 | 统一使用OpenAI格式 |
| 多服务商兼容 | Provider标识区分（如Gemini）|
| 动态配置更新 | 支持热加载配置 |
| 敏感信息管理 | 环境变量+本地加密存储 |
---
## 错误处理
### 典型问题与修复
| 问题场景 | 解决方案 | 发生日期 |
|--------------------------|----------------------------|------------|
| 模板ID与模型Key混淆 | 明确功能ID与API Key分离 | 2024-03-22 |
| 状态同步异常 | 增加状态同步处理函数 | 2024-03-22 |
| 全局currentProvider污染 | 显式传递模型参数 | 2024-03-22 |
### 处理原则
1. **开发环境**：保留完整错误堆栈
2. **生产环境**：友好提示+日志记录
3. **通用规则**：
```js
try {
await apiCall();
} catch (err) {
console.error("[API Error]", err.context);
throw new Error("服务调用失败，请检查配置");
}
```
---
## 测试规范
### 核心要点
1. **环境变量**
```js
// Vite项目必须使用import.meta.env
const apiKey = import.meta.env.VITE_GEMINI_KEY;
```
2. **测试架构**
- 集中管理多服务商配置
- 独立测试数据库
- 模拟异常场景（网络错误/无效Token）
3. **用例设计**
```js
describe("API测试", () => {
it("应正确处理多轮对话", async () => {
const response = await sendRequest(messages);
expect(response.content).toMatch(/优化建议/);
});
});
```
---
## Vue开发
### 组件规范
1. **Composable使用**
```js
// 正确用法
const { data } = useFetch();
// 错误用法
onMounted(() => {
const { data } = useFetch(); // 禁止在生命周期内调用
});
```
2. **状态同步方案**
```vue
) => ({
...defaultConfig,
...options
});
```
### 3. 测试代码组织
- 将通用逻辑抽取为辅助函数
- 使用 beforeEach 进行状态初始化
- 保持测试用例的独立性和可读性
### 4. 配置管理优化
- 集中管理测试配置
- 支持配置的部分覆盖
- 便于统一修改和维护
### 5. 改进效果
- 提高了测试的可靠性
- 减少了代码重复
- 简化了测试维护
- 提升了测试执行效率
## 开发经验总结
## 流式处理最佳实践
### 1. 统一使用流式API
- 避免使用非流式API
- 不提供降级方案
- 确保所有操作都支持流式处理
### 2. 流式处理器设计
```typescript
// 标准流式处理器结构
interface StreamHandlers {
onToken: (token: string) => void; // 处理每个token
onComplete: () => void; // 处理完成回调
onError: (error: Error) => void; // 处理错误
}
// 使用示例
const streamHandlers = {
onToken: (token) => {
result.value += token; // 实时更新UI
},
onComplete: () => {
isLoading.value = false;
toast.success('处理完成');
},
onError: (error) => {
isLoading.value = false;
toast.error(error.message);
}
};
```
### 3. 错误处理
- 实时显示错误信息
- 保持UI状态同步
- 提供友好的错误提示
### 4. 状态管理
- 使用响应式变量
- 实时更新处理状态
- 正确处理加载状态
### 5. 性能优化
- 避免频繁的DOM更新
- 使用防抖处理用户输入
- 合理设置缓冲区大小
### 6. 用户体验
- 显示实时处理进度
- 提供取消处理选项
- 保持界面响应性
## 注意事项
1. 确保所有API都支持流式处理
2. 处理网络异常情况
3. 合理管理内存使用
4. 保持代码可维护性
## 最佳实践示例
```typescript
// 1. 定义处理器
const createStreamHandlers = (options: {
onUpdate: (text: string) => void,
onSuccess: () => void,
onError: (error: Error) => void
}) => ({
onToken: (token: string) => {
options.onUpdate(token);
},
onComplete: () => {
options.onSuccess();
},
onError: (error: Error) => {
options.onError(error);
}
});
// 2. 使用处理器
const handleStream = async () => {
const handlers = createStreamHandlers({
onUpdate: (text) => {
result.value += text;
},
onSuccess: () => {
toast.success('处理完成');
},
onError: (error) => {
toast.error(error.message);
}
});
await service.processStream(input, handlers);
};
```
## /docs/prd.md
# 提示词优化器产品需求文档
## 1. 产品概述
提示词优化器是一个纯前端的工具，帮助用户优化和改进AI提示词。通过集成多个LLM模型，为用户提供专业的提示词优化建议。
## 2. 目标用户
- AI应用开发者
- 提示词工程师
- 需要与AI模型交互的普通用户
## 3. 核心功能需求
### 3.1 提示词优化
- 支持输入原始提示词
- 提供多个LLM模型选择
- 实时字数统计
- 一键清空输入
- 优化结果预览
- 一键复制结果
### 3.2 模型管理
- 支持多个LLM模型（DeepSeek、Gemini等）
- API密钥管理
- 模型配置编辑
- 自定义模型支持
### 3.3 历史记录
- 本地保存优化历史
- 按时间排序
- 搜索和过滤
- 一键重用历史记录
- 删除历史记录
### 3.4 用户界面
- 响应式设计
- 深色/浅色主题
- 多语言支持
- 操作反馈提示
## 4. 非功能需求
### 4.1 性能要求
- 页面加载时间 < 2秒
- API响应时间 < 5秒
- 流畅的动画效果
### 4.2 安全要求
- API密钥加密存储
- 本地数据安全存储
- 敏感信息保护
### 4.3 兼容性要求
- 支持主流浏览器
- 移动端适配
- 响应式布局
## 5. 未来规划
- 支持更多LLM模型
- 提示词模板库
- 批量优化功能
- 提示词评分系统
- 社区分享功能
## /docs/project-status.md
# 项目状态文档
## 1. 项目概述
提示词优化器是一个帮助用户优化AI提示词的工具，支持多种模型和界面形式。包括Web应用和Chrome浏览器插件两种使用方式，采用monorepo结构进行开发。
## 2. 总体进度
- 项目完成度：85%
- 当前阶段：SDK迁移与性能优化
- 预计完成时间：4月初
## 3. 功能完成情况
### 3.1 核心包（@prompt-optimizer/core）
- ✅ 基础架构搭建
- ✅ 项目结构设计
- ✅ 多包工作区配置
- ✅ 基础设施搭建
- ✅ 服务迁移与优化
- ✅ 从LangChain迁移到原生SDK
- ✅ 模型管理服务优化
- ✅ 提示词服务优化
- ✅ 模板服务完善
- ✅ 历史记录服务重构
- ✅ 模型集成
- ✅ OpenAI集成
- ✅ Gemini集成
- ✅ DeepSeek集成
- ✅ 自定义API支持
- ✅ 流式响应支持
- ✅ 错误处理优化
### 3.2 Web包（@prompt-optimizer/web）
- ✅ UI重构
- ✅ 组件模块化
- ✅ UI包抽取
- ✅ 服务调用更新
- ✅ 错误处理优化
- ✅ 功能增强
- ✅ 流式响应UI
- ✅ 模型连接测试
- ✅ 配置验证增强
- ✅ Toast组件迁移
- ✅ 环境变量加载优化
### 3.3 Chrome插件（@prompt-optimizer/extension）
- ✅ 基础框架
- ✅ 插件架构设计
- ✅ 核心功能移植
- ✅ 权限管理
- ✅ UI组件复用
- ✅ 特性开发
- ✅ 右键菜单集成
- ✅ 快捷键支持
- ✅ 历史同步
- ✅ 配置管理
## 4. 进行中的任务
### 4.1 核心功能完善（进度：90%）
- ✅ 错误处理系统
- ✅ 统一错误类型
- ✅ 错误处理流程
- ✅ 错误恢复机制
- ⏳ 性能优化
- ✅ 原生SDK迁移
- ✅ 资源管理优化
- ⏳ 内存使用优化
### 4.2 测试覆盖（进度：70%）
- ✅ 单元测试
- ✅ 服务测试
- ✅ 工具函数测试
- ✅ 错误处理测试
- ⏳ 集成测试
- ✅ 服务集成测试
- ⏳ API集成测试
- ⏳ 流程测试
### 4.3 文档完善（进度：85%）
- ✅ 核心文档
- ✅ 架构文档
- ✅ API文档
- ✅ 开发指南
- ⏳ 使用文档
- ✅ 最佳实践
- ⏳ 示例代码
- ⏳ 故障排除
### 4.4 Chrome插件优化（进度：90%）
- ✅ 性能优化
- ✅ 资源加载优化
- ✅ 响应速度优化
- ⏳ 内存使用优化
- ✅ 安全加固
- ✅ 权限管理
- ✅ 数据安全
- ⏳ 通信安全
- ⏳ 测试与文档
- ✅ 单元测试
- ⏳ 集成测试
- ⏳ 文档更新
## 5. 待开发功能
### 5.1 高级功能（计划启动：4月初）
- ⏳ 批量处理
- ⏳ 批量优化
- ⏳ 任务队列
- ⏳ 进度管理
- ⏳ 提示词分析
- ⏳ 质量评估
- ⏳ 性能分析
- ⏳ 优化建议
## 6. 技术指标
### 6.1 当前指标（2024-02-26）
- 代码测试覆盖率：80%
- 页面加载时间：1.3秒
- API响应时间：0.8-2.0秒
- 首次内容渲染：0.8秒
### 6.2 目标指标（4月初）
- 代码测试覆盖率：>85%
- 页面加载时间：<1.2秒
- API响应时间：<1.5秒
- 首次内容渲染：<0.8秒
## 7. 风险评估
### 7.1 技术风险
- 🟢 原生SDK集成
- 版本兼容性已解决
- API稳定性已验证
- 性能提升明显
- 🟢 多模型支持
- API差异处理已完成
- 错误处理统一完成
- 配置复杂性降低
- 🟡 安全性问题
- API密钥保护已实现
- 数据安全待加强
- XSS防护完善中
### 7.2 项目风险
- 🟢 进度风险
- 核心功能已完成
- 测试覆盖持续增加
- 文档更新同步
- 🟢 质量风险
- 代码质量控制
- 性能优化明显
- 用户体验提升
- 🟢 Chrome API兼容性（已解决）
- 🟡 性能瓶颈（优化中）
- 🟢 跨域通信（已解决）
## 8. 发布计划
### 8.1 测试版（v0.1.0）- 预计3月初发布
- ✅ 基础功能可用
- ✅ 核心特性完整
- ✅ 初步性能优化
- ✅ 基本安全措施
### 8.2 正式版（v1.0.0）- 预计3月中旬发布
- ⏳ 完整功能集
- ⏳ 性能优化完成
- ⏳ 安全措施完善
- ⏳ 文档完整
## 9. 发布准备
### 9.1 商店发布材料（进行中）
- ⏳ 扩展描述
- ⏳ 详细功能介绍
- ⏳ 高质量截图（至少3张）
- ⏳ 宣传视频（可选）
- ⏳ 隐私政策
### 9.2 最终审核（计划中）
- ⏳ 代码审核
- ⏳ 功能测试
- ⏳ 权限审查
- ⏳ 安全检查
- ⏳ 性能测试
## 10. 后续计划
### 10.1 近期计划（1-2周）
1. 完成剩余功能优化
- 内存使用优化
- 性能进一步调优
- 用户体验改进
2. 提升测试覆盖率
- 补充集成测试
- 完善API测试
- 添加E2E测试
3. 完善文档系统
- 更新技术栈文档
- 添加示例代码
- 编写故障排除指南
### 10.2 中期计划（2-3周）
1. 完成Chrome插件发布准备
- 最终功能测试
- 性能优化
- 文档准备
- 商店资料准备
2. 开发高级功能
- 实现批量处理
- 添加分析功能
- 优化用户体验
### 10.3 长期计划（1-2月）
1. 产品化完善
- 功能完整性
- 稳定性提升
- 性能持续优化
2. 社区建设
- 开源推广
- 文档完善
- 示例丰富
## 11. 维护计划
### 11.1 日常维护
- 问题修复
- 性能监控
- 安全更新
- 用户反馈
### 11.2 版本更新
- 功能迭代
- 性能优化
- 安全加固
- 文档更新
## 12. 更新记录
- 2024-02-26: 完成从LangChain迁移到原生SDK
- 2024-02-26: 更新项目配置和依赖
- 2024-02-25: 优化环境变量加载和测试集成
- 2024-02-25: 重构核心包导出和模块结构
- 2024-02-21: 重构历史记录管理，移除初始化逻辑并优化UI组件
- 2024-02-18: 改进模板选择类型安全性和错误处理
- 2024-02-18: 模块化UI包并改进扩展和Web应用中的类型安全性
- 2024-02-15: 优化多模型支持
- 2024-02-14: 重构提示词服务
- 2024-02-12: 重构UI组件结构
## 13. Chrome扩展开发经验
### 13.1 图标问题排查
- manifest.json中的图标设置需要严格遵循Chrome扩展规范
- 图标必须是有效的PNG格式
- 图标尺寸必须严格符合声明（16x16、48x48、128x128）
- 如果图标不显示，可以尝试更换其他已确认可用的PNG图片进行测试
## /docs/project-structure.md
# 项目结构文档
> **注意:** 本文档专注于项目的文件和目录结构。关于技术栈详情和实现流程，请参考 [技术文档](./technical-documentation.md)。
## 1. 项目整体架构
### 1.1 根目录结构
```
prompt-optimizer/
├── packages/ # 项目包
│ ├── core/ # 核心功能包
│ │ ├── src/ # 核心源代码
│ │ ├── tests/ # 核心包测试
│ │ └── package.json # 核心包配置
│ ├── web/ # Web版本
│ │ ├── src/ # Web源代码
│ │ ├── tests/ # Web测试
│ │ └── package.json # Web包配置
│ └── extension/ # Chrome插件
├── docs/ # 项目文档
├── tools/ # 工具脚本
└── ...配置文件
```
### 1.2 配置文件
- `pnpm-workspace.yaml` - 工作区配置
- `.env.example` - 环境变量示例
- `package.json` - 项目配置
- `.vscode/` - VSCode配置目录
- `.cursorrules` - Cursor IDE配置
- `.windsurfrules` - Windsurf IDE配置
- `.gitignore` - Git忽略配置
### 1.3 工作区文件
- `README.md` - 项目说明文档
- `scratchpad.md` - 开发笔记和任务规划
- `experience.md` - 项目经验总结
- `cursor_tips.md` - AI辅助开发指南
### 1.4 文档目录 (docs/)
- `README.md` - 文档索引
- `development-guidelines.md` - 开发指南
- `project-status.md` - 项目状态
- `project-structure.md` - 项目结构
- `technical-documentation.md` - 技术文档
- `prd.md` - 产品需求文档
- `CHANGELOG.md` - 更新日志
## 2. 核心包结构 (packages/core)
### 2.1 源代码目录 (packages/core/src/)
```
src/
├── services/ # 核心服务
│ ├── llm/ # LLM服务
│ │ ├── service.ts # LLM服务实现
│ │ ├── types.ts # 类型定义
│ │ └── errors.ts # 错误定义
│ ├── model/ # 模型管理
│ │ ├── manager.ts # 模型管理器
│ │ ├── types.ts # 类型定义
│ │ └── defaults.ts# 默认配置
│ ├── prompt/ # 提示词服务
│ │ ├── service.ts # 提示词服务实现
│ │ ├── types.ts # 类型定义
│ │ └── errors.ts # 错误定义
│ ├── template/ # 模板服务
│ │ ├── manager.ts # 模板管理器
│ │ ├── types.ts # 类型定义
│ │ └── defaults.ts# 默认配置
│ └── history/ # 历史记录服务
│ ├── manager.ts # 历史管理器
│ └── types.ts # 类型定义
├── types/ # 公共类型定义
└── utils/ # 工具函数
```
### 2.2 API目录 (src/api/)
- `api/llm.js` - LLM API调用封装
### 2.3 配置目录 (packages/core/config/)
- `models.js` - LLM模型配置
- `prompts.js` - 提示词模板配置
### 2.4 测试目录 (packages/core/tests/)
```
tests/
├── unit/ # 单元测试
│ └── services/ # 服务测试
│ ├── llm/ # LLM服务测试
│ ├── model/ # 模型管理测试
│ └── prompt/ # 提示词服务测试
└── integration/ # 集成测试
└── services/ # 服务集成测试
```
### 2.5 核心包配置
- `package.json` - 核心包配置
- `tsconfig.json` - TypeScript配置
- `vitest.config.ts` - 测试配置
## 3. Web包结构 (packages/web)
### 3.1 源代码目录 (packages/web/src/)
```
src/
├── components/ # Vue组件
│ ├── PromptPanel.vue # 提示词面板
│ ├── ModelManager.vue # 模型管理器
│ ├── TemplateManager.vue# 模板管理器
│ ├── InputPanel.vue # 输入面板
│ └── OutputPanel.vue # 输出面板
├── composables/ # Vue组合式函数
├── services/ # 业务逻辑
│ ├── llm/ # LLM服务
│ ├── model/ # 模型配置
│ ├── prompt/ # 提示词服务
│ ├── promptManager.js # 提示词管理
│ └── themeManager.js # 主题管理
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ └── styles/ # 样式资源
├── prompts/ # 提示词模板
├── App.vue # 根组件
└── main.ts # 入口文件
```
### 3.2 组件目录详情 (packages/web/src/components/)
- `PromptPanel.vue` - 提示词输入和优化面板
- `InputPanel.vue` - 输入面板组件
- `OutputPanel.vue` - 输出面板组件
- `ModelConfig.vue` - 模型配置组件
- `ThemeToggle.vue` - 主题切换组件
- `LoadingSpinner.vue` - 加载动画组件
### 3.3 测试目录 (packages/web/tests/)
```
tests/
├── unit/ # 单元测试
│ ├── components/ # 组件测试
│ └── services/ # 服务测试
└── integration/ # 集成测试
└── services/ # 服务集成测试
```
### 3.4 Web包配置
- `package.json` - Web包配置
- `vite.config.ts` - Vite配置
- `tailwind.config.js` - TailwindCSS配置
- `.env.local` - 本地环境变量
- `postcss.config.js` - PostCSS配置
- `index.html` - 项目入口HTML文件
## 4. 扩展包结构 (packages/extension)
### 4.1 源代码目录 (packages/extension/src/)
```
src/
├── popup/ # 弹出窗口界面
├── background/ # 后台脚本
├── content/ # 内容脚本
└── manifest.json # 扩展配置文件
```
### 4.2 扩展包配置
- `package.json` - 扩展包配置
- `vite.config.ts` - 构建配置
## 5. 依赖关系
### 5.1 核心包依赖 (@prompt-optimizer/core)
```
@prompt-optimizer/core
├── @openai/openai ^4.83.0 # OpenAI SDK
├── @google/generative-ai ^0.21.0 # Google Generative AI SDK
└── uuid ^11.0.5 # UUID生成
```
### 5.2 Web包依赖 (@prompt-optimizer/web)
```
@prompt-optimizer/web
├── @prompt-optimizer/core # 依赖核心包
├── vue ^3.5.x # Vue框架
├── pinia ^2.1.x # 状态管理
└── tailwindcss ^3.4.1 # 样式框架
```
### 5.3 扩展包依赖 (@prompt-optimizer/extension)
```
@prompt-optimizer/extension
├── @prompt-optimizer/core # 依赖核心包
├── @prompt-optimizer/ui # 依赖UI组件包
└── vue ^3.5.x # Vue框架
```
## /docs/scratchpad.md
# 项目进度追踪 - 提示词优化器
## 🎯 总体进度
已完成任务：10/13 (76.92%)
项目完成度：85%
当前阶段：SDK迁移与性能优化
预计完成时间：4月初
### ✅ 已完成任务
1. 项目基础搭建 (2024-02-26)
- 创建项目基础结构
- 实现基础页面布局
- 配置开发环境
2. 核心功能实现 (2024-02-26 - 2024-02-28)
- 添加提示词输入功能
- 集成 LLM API 基础框架
- 实现 API 密钥配置功能
- 完成基础错误处理
3. LLM服务完善 (2024-02-28 - 2024-03-01)
- 实现多模型支持
- 完成模型配置管理
- 添加模型切换功能
- 实现基础的提示词优化
4. 用户界面基础功能 (2024-03-01 - 2024-03-03)
- 实现响应式布局
- 添加基础操作反馈
- 实现结果预览
- 添加复制功能
5. 提示词迭代功能 (2024-03-05)
- 创建迭代优化模板
- 修改UI组件支持迭代
- 扩展LLM服务支持迭代
- 更新历史记录功能
6. 服务层基础重构 (2024-03-13)
- 完成基础设施搭建
- 实现核心服务迁移
- 完成错误处理机制
- 基础单元测试覆盖
- 实现LangChain集成
- 完成错误处理基类
- 统一消息类型处理
7. 模板管理系统升级 (2024-03-20)
- 重构模板管理器架构
- 实现本地存储支持
- 添加模板验证功能
- 完善模板元数据
- 实现模板导入导出
8. LangChain集成与服务层优化 (2024-03-21)
- 完成LangChain集成
- 实现流式响应支持
- 优化错误处理机制
- 重构模板管理器
- 完善服务层架构
9. SDK迁移完成 (2024-02-26 - 2024-03-05)
- 从LangChain迁移到原生SDK
- 修改服务调用结构
- 优化错误处理
- 性能提升明显
10. Chrome插件开发 (2024-03-10 - 2024-03-25)
- 完成插件架构设计
- 实现核心功能移植
- 添加右键菜单集成
- 实现快捷键支持
- 完成历史同步
- 实现配置管理
### 🚧 进行中的任务
#### 核心功能完善 (进度：90%)
- ✅ 错误处理系统
- ✅ 统一错误类型
- ✅ 错误处理流程
- ✅ 错误恢复机制
- 🔄 性能优化
- ✅ 原生SDK迁移
- ✅ 资源管理优化
- 🔄 内存使用优化
#### 测试覆盖 (进度：70%)
- ✅ 单元测试
- ✅ 服务测试
- ✅ 工具函数测试
- ✅ 错误处理测试
- 🔄 集成测试
- ✅ 服务集成测试
- 🔄 API集成测试
- 🔄 流程测试
#### 文档完善 (进度：85%)
- ✅ 核心文档
- ✅ 架构文档
- ✅ API文档
- ✅ 开发指南
- 🔄 使用文档
- ✅ 最佳实践
- 🔄 示例代码
- 🔄 故障排除
#### Chrome插件优化 (进度：90%)
- ✅ 性能优化
- ✅ 资源加载优化
- ✅ 响应速度优化
- 🔄 内存使用优化
- ✅ 安全加固
- ✅ 权限管理
- ✅ 数据安全
- 🔄 通信安全
- 🔄 测试与文档
- ✅ 单元测试
- 🔄 集成测试
- 🔄 文档更新
#### 提示词模板管理器优化 (进度：95%)
- [x] 重新设计模板管理器架构
- [x] 实现内置默认模板
- [x] 支持本地存储的用户自定义模板
- [x] 实现模板导入导出功能
- [x] 实现基础模板验证
- [x] 添加模板元数据支持
已完成：
1. 核心改造
- [x] 移除文件系统依赖
- [x] 实现内存模板存储
- [x] 添加LocalStorage支持
2. 功能增强
- [x] 实现基础模板验证器
- [x] 添加元数据支持
- [x] 实现模板类型分类存储
- [x] 添加模板类型标识支持
- [x] 实现按类型筛选模板
- [x] 完善版本控制
3. 用户界面
- [x] 添加模板管理界面
- [x] 实现导入导出功能
- [x] 提供基础模板编辑器
4. 功能完善
- [x] 实现模板版本回滚
- [x] 添加模板修改历史
- [x] 实现模板差异对比
- 🔄 添加XSS防护措施
- [x] 完善模板类型编辑功能
预计完成时间：3月底
### 📅 待开发任务
#### 高级功能（计划启动：4月初）
- ⏳ 批量处理
- ⏳ 批量优化
- ⏳ 任务队列
- ⏳ 进度管理
- ⏳ 提示词分析
- ⏳ 质量评估
- ⏳ 性能分析
- ⏳ 优化建议
#### 其他规划功能
1. 主题系统
- 深色/浅色主题切换
- 自定义主题配置
- 主题持久化存储
2. 国际化支持
- 多语言框架集成
- 翻译资源管理
- 语言切换功能
### 📊 项目指标
1. 当前指标（2024-02-26）
- 代码测试覆盖率：80%
- 页面加载时间：1.3秒
- API响应时间：0.8-2.0秒
- 首次内容渲染：0.8秒
2. 目标指标（4月初）
- 代码测试覆盖率 > 85%
- 页面加载时间 < 1.2秒
- API响应时间 < 1.5秒
- 首次内容渲染 < 0.8秒
### 🔄 风险评估
1. 技术风险
- 🟢 原生SDK集成
- 版本兼容性已解决
- API稳定性已验证
- 性能提升明显
- 🟢 多模型支持
- API差异处理已完成
- 错误处理统一完成
- 配置复杂性降低
- 🟡 安全性问题
- API密钥保护已实现
- 数据安全待加强
- XSS防护完善中
2. 项目风险
- 🟢 进度风险
- 核心功能已完成
- 测试覆盖持续增加
- 文档更新同步
- 🟢 质量风险
- 代码质量控制
- 性能优化明显
- 用户体验提升
- 🟢 Chrome API兼容性（已解决）
- 🟡 性能瓶颈（优化中）
- 🟢 跨域通信（已解决）
### 📝 近期计划 (未来2周)
1. 完成剩余功能优化
- 内存使用优化
- 性能进一步调优
- 用户体验改进
2. 提升测试覆盖率
- 补充集成测试
- 完善API测试
- 添加E2E测试
3. 完善文档系统
- 更新技术栈文档
- 添加示例代码
- 编写故障排除指南
4. 完成Chrome插件发布准备
- 最终功能测试
- 性能优化
- 文档准备
- 商店资料准备
### 🎯 里程碑计划
#### 里程碑1：基础功能完善（已完成）
- ✅ 完成LangChain集成
- ✅ 实现流式响应支持
- ✅ 完成模板管理器核心重构
- ✅ 完成原生SDK迁移
#### 里程碑2：Chrome插件（90%）
- ✅ 插件架构设计
- ✅ 核心功能迁移
- ✅ 用户交互设计
- 🔄 测试与文档完善
#### 里程碑3：发布准备（70%）
- ✅ 测试版发布
- 🔄 正式版发布准备
- 🔄 最终性能优化
- 🔄 安全检查
- 🔄 文档完善
- 🔄 发布材料准备
### 🔍 发布准备
#### 测试版（v0.1.0）- 已发布
- ✅ 基础功能可用
- ✅ 核心特性完整
- ✅ 初步性能优化
- ✅ 基本安全措施
#### 正式版（v1.0.0）- 预计3月底发布
- 🔄 完整功能集
- 🔄 性能优化完成
- 🔄 安全措施完善
- 🔄 文档完整
#### 商店发布材料（进行中）
- 🔄 扩展描述
- 🔄 详细功能介绍
- 🔄 高质量截图（至少3张）
- 🔄 宣传视频（可选）
- 🔄 隐私政策
### 🔄 更新记录
- 2024-03-27: 更新项目状态，调整里程碑计划
- 2024-03-25: 完成Chrome插件基础功能，开始优化阶段
- 2024-03-21: 完成LangChain集成，优化服务层架构
- 2024-03-21: 实现流式响应支持，改进错误处理
- 2024-03-20: 增强模板管理器，支持多类型模板和本地存储选择
- 2024-03-19: 重构模板管理器，实现本地存储和用户模板支持
- 2024-03-17: 增加自定义API集成和流式输出支持
- 2024-03-13: 重构LLM服务，引入LangChain并优化错误处理
- 2024-03-13: 重构服务层初始化和错误处理，统一错误消息
- 2024-03-05: 增加提示词迭代功能
- 2024-03-03: 优化界面布局和UI
- 2024-03-01: 增加测试输入输出区域，重构API管理
- 2024-02-26: 项目初始化，完成从LangChain迁移到原生SDK
## /docs/technical-development-guide.md
# 技术开发指南
> **注意:** 本文档整合了原有的开发指南和技术文档，提供完整的技术栈说明和开发规范。
## 1. 项目技术架构
### 1.1 整体架构
- Monorepo结构
- packages/core - 核心功能包
- packages/web - Web应用
- packages/extension - Chrome扩展
- packages/ui - 共享UI组件
- 包间依赖管理
- 清晰的依赖关系
- 版本一致性
- 最小化重复代码
- 工程化工具
- pnpm workspace
- 多包管理
- 统一版本控制
### 1.2 技术栈概览
#### 1.2.1 核心包 (@prompt-optimizer/core)
- TypeScript 5.3.x
- 类型系统
- 接口定义
- 模块化
- 原生SDK集成
- OpenAI SDK ^4.83.0
- Google Generative AI SDK ^0.21.0
- 模型管理
- 提示词处理
- 流式响应
- 工具库
- uuid ^11.0.5
- zod ^3.22.4
- 错误处理
- 类型定义
#### 1.2.2 Web包 (@prompt-optimizer/web)
- Vue 3.5.x
- Composition API
- Script Setup
- 响应式系统
- 组件生态
- Vite 6.0.x
- 快速开发服务器
- 优化的构建
- 插件系统
- HMR支持
#### 1.2.3 UI框架和样式
- TailwindCSS 3.4.x
- 实用优先
- 响应式设计
- 深色模式支持
- 动画系统
- Vue Transitions
- 页面过渡动画
- 组件切换效果
- 列表动画
- Element Plus 2.9.x
- 组件库
- 主题支持
- 响应式组件
#### 1.2.4 状态管理
- Vue Reactivity
- ref/reactive
- computed
- watch
- watchEffect
- LocalStorage
- 配置持久化
- 历史记录存储
- 模板管理
- 加密存储
- Pinia 2.1.x
- 状态管理
- 持久化
- 插件支持
#### 1.2.5 安全性
- WebCrypto API
- API密钥加密
- 安全存储
- 密钥轮换
- XSS防护
- 输入验证
- 内容过滤
- 安全编码
- CORS配置
- API访问控制
- 安全头部
- CSP策略
#### 1.2.6 开发工具
- TypeScript 5.3.x
- 类型检查
- 代码提示
- 接口定义
- ESLint 8.56.x
- 代码规范
- 自动修复
- TypeScript支持
- Prettier 3.2.x
- 代码格式化
- 统一风格
- 编辑器集成
#### 1.2.7 测试框架
- Vitest 3.0.x
- 单元测试
- 集成测试
- 快照测试
- 覆盖率报告
- Vue Test Utils 2.4.x
- 组件测试
- 行为模拟
- 事件测试
- Playwright 1.41.x
- E2E测试
- 跨浏览器测试
- 视觉回归测试
### 1.3 代码组织
- 模块化设计
- 按功能划分模块
- 单一职责原则
- 关注点分离
- 统一目录结构
- src/ - 源代码
- tests/ - 测试代码
- types/ - 类型定义
- config/ - 配置文件
## 2. 核心包开发规范
### 2.1 服务实现规范
- 接口一致性
- 所有服务必须实现统一接口
- 方法命名保持一致
- 错误处理遵循统一模式
- 返回值类型一致
- 错误处理
- 使用统一的错误类型
- 错误信息应包含上下文
- 实现错误恢复机制
- 提供用户友好的错误信息
### 2.2 SDK集成规范
- 原生SDK集成
- 直接使用官方SDK
- 避免不必要的抽象层
- 保持版本更新
- 遵循官方最佳实践
- 错误映射
- SDK特定错误映射到统一错误类型
- 保留原始错误信息
- 实现重试机制
- 提供降级方案
### 2.3 类型定义规范
- 类型安全性
- 使用精确的类型定义
- 避免any类型
- 使用联合类型表示可能的值
- 为复杂对象定义接口
- 类型导出
- 在index.ts中集中导出类型
- 按模块组织类型定义
- 使用命名空间避免冲突
- 提供类型文档注释
### 2.4 测试规范
- 单元测试
- 测试覆盖率目标>80%
- 测试边界条件
- 模拟外部依赖
- 验证错误处理
- 集成测试
- 测试服务间交互
- 验证端到端流程
- 测试性能和并发
- 模拟真实环境
## 3. 前端开发规范
### 3.1 项目架构
- 推荐目录结构
```
src/
├── components/ # UI组件
├── composables/ # 组合式函数
├── views/ # 页面组件
├── services/ # 服务
├── stores/ # Pinia状态
├── assets/ # 静态资源
├── utils/ # 工具函数
├── types/ # 类型定义
├── App.vue # 根组件
└── main.ts # 入口文件
```
- 命名规范
- 组件文件：PascalCase.vue
- 工具函数文件：camelCase.ts
- 类型定义文件：camelCase.types.ts
- 组合式函数：useXxx.ts
### 3.2 服务使用规范
- 核心服务集成
- 使用统一的服务访问模式
- 实现服务单例模式
- 处理服务初始化
- 管理服务状态
- 错误处理
- 使用统一的错误处理机制
- 提供用户友好的错误提示
- 实现错误恢复
- 记录错误日志
### 3.3 组件开发规范
- Vue组件模板
- 使用
