mirror of
https://github.com/linshenkx/prompt-optimizer.git
synced 2026-05-06 21:50:27 +08:00
refactor(template): 优化模板管理与服务注入，增强错误处理并添加故障排除清单
- 添加模板管理故障排除清单，以帮助用户解决模板管理中遇到的常见问题。 - 统一服务注入逻辑，移除不必要的props定义，增强错误处理机制。 - 优化模板管理，统一服务注入与存储键管理。 - 更新 `TemplateSelect.vue`，移除 `services` prop，改用 `inject` 注入服务。 - 整合 `useTemplateManager`，统一模板选择保存逻辑及存储键管理。 - 新增 `storage-keys.ts`，集中管理存储键常量，避免重复定义，便于维护与遍历。 - 更新相关组件以适配新的模板管理方式，确保模板选择状态正确保存和恢复。 - 修正了模板类型错误的问题，确保在管理界面切换分类后添加的模板类型与当前显示的分类一致。 - 修复了模板管理器打开位置错误的问题，确保从不同入口打开模板管理器时，定位到正确的分类。 - 优化了模板保存和导入逻辑，增加了错误处理和提示。 - 确保所有异步模板操作都使用了 `await` 关键字，避免潜在的时序问题。 - 移除了 `usePromptOptimizer` 中 `selectedOptimizationMode` 的默认值，强制传入该参数。 - 优化了 `TemplateSelect` 组件中 `optimizationMode` prop 的处理，设为 `required`。
This commit is contained in:
linshen
130
docs/user/deployment/vercel.md
Normal file
130
docs/user/deployment/vercel.md
Normal file
@@ -0,0 +1,130 @@
|
||||
## Vercel 部署说明
|
||||
|
||||
### 部署方式对比
|
||||
|
||||
| 部署方式 | 优点 | 缺点 |
|
||||
|---------|------|------|
|
||||
| 一键部署 | 快速简便，无需额外设置 | 无法自动同步源项目更新 |
|
||||
| Fork后导入 | 可跟踪源项目更新，更易维护 | 第一次部署需要手动修复根目录设置以启用Vercel代理功能 |
|
||||
|
||||
### 推荐方式：Fork项目后导入到Vercel（推荐）
|
||||
|
||||
这种方式可以让你跟踪项目更新，便于后续同步最新功能和bug修复。
|
||||
|
||||
1. **Fork项目到自己的GitHub**
|
||||
- 访问[prompt-optimizer项目](https://github.com/linshenkx/prompt-optimizer)
|
||||
- 点击右上角的"Fork"按钮
|
||||
- 完成fork操作后，你将在自己的GitHub账号下拥有此项目的副本
|
||||
|
||||
2. **导入项目到Vercel**
|
||||
- 登录[Vercel平台](https://vercel.com/)
|
||||
- 点击"Add New..."→"Project"
|
||||
- 在"Import Git Repository"部分找到你fork的项目并点击"Import"
|
||||
- 配置项目（**注意**：此处虽然可以设置根目录，但对多模块项目无效，仍需后续手动修复）
|
||||
- 点击"Deploy"开始部署
|
||||
|
||||
|
||||
|
||||
3. **修复根目录设置（强烈建议）**
|
||||
- 通过导入部署时，虽然项目的`vercel.json`文件已包含相关修复可以让基本功能正常工作
|
||||
- 但若要启用**Vercel代理功能**（解决跨域问题的关键功能），则需手动修复根目录：
|
||||
|
||||
a. 在项目部署完成后，进入项目设置
|
||||
|
||||
b. 点击左侧菜单中的"Build and Deployment"
|
||||
|
||||
c. 在"Root Directory"部分，将输入框中的内容**清空**
|
||||
|
||||
d. 点击"Save"保存设置
|
||||
|
||||
|
||||
|
||||
4. **配置环境变量（可选）**
|
||||
- 部署完成后，进入项目设置
|
||||
- 点击"Environment Variables"
|
||||
- 添加需要的API密钥（例如`VITE_OPENAI_API_KEY`）
|
||||
- 如需添加访问限制功能：
|
||||
- 添加名为`ACCESS_PASSWORD`的环境变量
|
||||
- 设置一个安全的密码作为其值
|
||||
- 保存环境变量设置
|
||||
|
||||
5. **重新部署项目**
|
||||
- 设置保存后，需要手动触发重新部署以使修复和环境变量生效
|
||||
- 点击顶部导航栏中的"Deployments"
|
||||
- 在最新的部署记录右侧，点击"..."按钮
|
||||
- 选择"Redeploy"选项触发重新部署
|
||||
|
||||
|
||||
|
||||
6. **同步上游更新**
|
||||
- 在GitHub上打开你fork的项目
|
||||
- 如果有更新，会显示"This branch is X commits behind linshenkx:main"
|
||||
- 点击"Sync fork"按钮同步最新更改
|
||||
- Vercel会自动检测到代码变更并重新部署
|
||||
|
||||
### 替代方式：一键部署到Vercel
|
||||
|
||||
如果你只需要快速部署而不关心后续更新，可以使用一键部署方式：
|
||||
|
||||
1. 点击以下按钮直接部署到Vercel
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
|
||||
|
||||
2. 按照Vercel的引导完成部署流程
|
||||
|
||||
**优势：** 一键部署方式Vercel能自动正确识别根目录，无需手动修复，所有功能（包括Vercel代理）均可正常使用。
|
||||
|
||||
### 关于Vercel代理功能
|
||||
|
||||
Prompt Optimizer在Vercel部署时支持使用Edge Runtime代理解决跨域问题。
|
||||
|
||||
1. **确认代理功能可用**
|
||||
- 如使用一键部署：代理功能应直接可用
|
||||
- 如使用导入部署：需完成上述"修复根目录设置"和"重新部署"步骤
|
||||
- 在应用中打开"模型管理"
|
||||
- 选择目标模型->"编辑"，此时应该可以看到"使用Vercel代理"选项
|
||||
- 如果没有看到此选项，说明Vercel Function未正确部署，请检查根目录设置
|
||||
|
||||
2. **启用代理功能**
|
||||
- 勾选"使用Vercel代理"选项
|
||||
- 保存配置
|
||||
|
||||
3. **代理原理**
|
||||
- 请求流向：浏览器→Vercel Edge Runtime→模型服务提供商
|
||||
- 解决了浏览器直接访问API时的跨域限制
|
||||
- 代理功能基于Vercel Function实现，依赖于`/api`路径
|
||||
|
||||
4. **注意事项**
|
||||
- 部分模型服务提供商可能会限制来自Vercel的请求
|
||||
- 如遇限制，建议使用自部署的API中转服务
|
||||
|
||||
### 密码保护访问
|
||||
|
||||
当配置了`ACCESS_PASSWORD`环境变量后，您的站点将启用密码保护功能：
|
||||
- 访问站点时会显示密码验证页面
|
||||
- 输入正确密码后可访问应用
|
||||
- 系统会设置Cookie记住用户，一段时间内无需重复输入密码
|
||||
|
||||
### 常见问题
|
||||
|
||||
1. **部署后页面空白或报错**
|
||||
- 检查是否正确配置了环境变量
|
||||
- 查看Vercel部署日志寻找错误原因
|
||||
|
||||
2. **无法连接到模型API**
|
||||
- 确认API密钥已正确配置
|
||||
- 尝试启用Vercel代理功能
|
||||
- 检查模型服务提供商是否限制了Vercel请求
|
||||
|
||||
3. **"使用Vercel代理"选项未显示**
|
||||
- 如使用导入部署：检查是否已清空根目录设置并重新部署
|
||||
- 验证`/api/vercel-status`路径是否可访问（可通过浏览器访问`你的域名/api/vercel-status`测试）
|
||||
- 查看部署日志中是否有关于Function的错误信息
|
||||
|
||||
4. **如何更新已部署的项目**
|
||||
- 如果是fork后导入：同步fork并等待自动部署
|
||||
- 如果是一键部署：需要重新部署新版本（无法自动跟踪源项目更新）
|
||||
|
||||
5. **如何添加自定义域名**
|
||||
- 在Vercel项目设置中选择"Domains"
|
||||
- 添加并验证你的域名
|
||||
- 按照指引配置DNS记录
|
||||
130
docs/user/deployment/vercel_en.md
Normal file
130
docs/user/deployment/vercel_en.md
Normal file
@@ -0,0 +1,130 @@
|
||||
## Vercel Deployment Guide
|
||||
|
||||
### Deployment Method Comparison
|
||||
|
||||
| Deployment Method | Advantages | Disadvantages |
|
||||
|---------|------|------|
|
||||
| One-click Deployment | Quick and convenient, no additional setup required | Cannot automatically sync updates from the source project |
|
||||
| Fork and Import | Can track source project updates, easier to maintain | First deployment requires manual root directory fix to enable Vercel proxy functionality |
|
||||
|
||||
### Recommended Method: Fork the Project and Import to Vercel (Recommended)
|
||||
|
||||
This method allows you to track project updates, making it easier to sync the latest features and bug fixes.
|
||||
|
||||
1. **Fork the project to your GitHub account**
|
||||
- Visit the [prompt-optimizer project](https://github.com/linshenkx/prompt-optimizer)
|
||||
- Click the "Fork" button in the top right corner
|
||||
- After completing the fork operation, you will have a copy of this project under your GitHub account
|
||||
|
||||
2. **Import the project to Vercel**
|
||||
- Log in to the [Vercel platform](https://vercel.com/)
|
||||
- Click "Add New..." → "Project"
|
||||
- Find your forked project in the "Import Git Repository" section and click "Import"
|
||||
- Configure the project (**Note**: Although you can set the root directory here, it is ineffective for multi-module projects and will still require manual fixing later)
|
||||
- Click "Deploy" to start deployment
|
||||
|
||||
|
||||
|
||||
3. **Fix the root directory setting (Strongly recommended)**
|
||||
- When deployed through import, although the project's `vercel.json` file already contains related fixes to make basic functionality work
|
||||
- To enable **Vercel proxy functionality** (a key feature for solving cross-origin issues), you need to manually fix the root directory:
|
||||
|
||||
a. After the project is deployed, go to project settings
|
||||
|
||||
b. Click "Build and Deployment" in the left menu
|
||||
|
||||
c. In the "Root Directory" section, **clear** the content in the input box
|
||||
|
||||
d. Click "Save" to save the settings
|
||||
|
||||
|
||||
|
||||
4. **Configure environment variables (Optional)**
|
||||
- After deployment is complete, go to project settings
|
||||
- Click "Environment Variables"
|
||||
- Add the required API keys (e.g., `VITE_OPENAI_API_KEY`)
|
||||
- To add access restriction functionality:
|
||||
- Add an environment variable named `ACCESS_PASSWORD`
|
||||
- Set a secure password as its value
|
||||
- Save the environment variable settings
|
||||
|
||||
5. **Redeploy the project**
|
||||
- After saving the settings, you need to manually trigger a redeployment to make the fixes and environment variables effective
|
||||
- Click "Deployments" in the top navigation bar
|
||||
- On the right side of the latest deployment record, click the "..." button
|
||||
- Select the "Redeploy" option to trigger redeployment
|
||||
|
||||
|
||||
|
||||
6. **Sync upstream updates**
|
||||
- Open your forked project on GitHub
|
||||
- If there are updates, it will show "This branch is X commits behind linshenkx:main"
|
||||
- Click the "Sync fork" button to sync the latest changes
|
||||
- Vercel will automatically detect code changes and redeploy
|
||||
|
||||
### Alternative Method: One-click Deployment to Vercel
|
||||
|
||||
If you only need quick deployment and don't care about subsequent updates, you can use the one-click deployment method:
|
||||
|
||||
1. Click the button below to deploy directly to Vercel
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
|
||||
|
||||
2. Follow Vercel's guidance to complete the deployment process
|
||||
|
||||
**Advantage:** With one-click deployment, Vercel can automatically correctly identify the root directory, no manual fixing required, and all features (including Vercel proxy) can work normally.
|
||||
|
||||
### Password Protected Access
|
||||
|
||||
When the `ACCESS_PASSWORD` environment variable is configured, your site will enable password protection:
|
||||
- A password verification page will be displayed when accessing the site
|
||||
- Access to the application is granted after entering the correct password
|
||||
- The system will set a cookie to remember the user, eliminating the need to re-enter the password for a period of time
|
||||
|
||||
### About Vercel Proxy Functionality
|
||||
|
||||
Prompt Optimizer supports using Edge Runtime proxy to solve cross-origin issues when deployed on Vercel.
|
||||
|
||||
1. **Confirm proxy functionality is available**
|
||||
- If using one-click deployment: proxy functionality should be directly available
|
||||
- If using import deployment: you need to complete the "Fix root directory setting" and "Redeploy" steps mentioned above
|
||||
- Open "Model Management" in the application
|
||||
- Select the target model -> "Edit", at this point you should see the "Use Vercel Proxy" option
|
||||
- If you don't see this option, it means the Vercel Function is not correctly deployed, please check the root directory setting
|
||||
|
||||
2. **Enable proxy functionality**
|
||||
- Check the "Use Vercel Proxy" option
|
||||
- Save the configuration
|
||||
|
||||
3. **Proxy principle**
|
||||
- Request flow: Browser → Vercel Edge Runtime → Model service provider
|
||||
- Solves the cross-origin limitation when browsers directly access APIs
|
||||
- Proxy functionality is based on Vercel Function implementation, dependent on the `/api` path
|
||||
|
||||
4. **Notes**
|
||||
- Some model service providers may restrict requests from Vercel
|
||||
- If restrictions are encountered, it is recommended to use a self-deployed API relay service
|
||||
|
||||
### Common Issues
|
||||
|
||||
1. **Blank page or error after deployment**
|
||||
- Check if environment variables are correctly configured
|
||||
- View Vercel deployment logs to find the cause of errors
|
||||
|
||||
2. **Cannot connect to model API**
|
||||
- Confirm the API key is correctly configured
|
||||
- Try enabling Vercel proxy functionality
|
||||
- Check if the model service provider restricts Vercel requests
|
||||
|
||||
3. **"Use Vercel Proxy" option not displayed**
|
||||
- If using import deployment: check if you have cleared the root directory setting and redeployed
|
||||
- Verify if the `/api/vercel-status` path is accessible (you can test by visiting `your-domain/api/vercel-status` in a browser)
|
||||
- Check if there are any Function-related error messages in the deployment logs
|
||||
|
||||
4. **How to update a deployed project**
|
||||
- If forked and imported: sync the fork and wait for automatic deployment
|
||||
- If one-click deployed: need to redeploy the new version (cannot automatically track source project updates)
|
||||
|
||||
5. **How to add a custom domain**
|
||||
- Select "Domains" in the Vercel project settings
|
||||
- Add and verify your domain
|
||||
- Follow the guidance to configure DNS records
|
||||
Reference in New Issue
Block a user