feat(vercel): 密码保护功能实现

- 使用 Next.js Middleware
- 添加自适应语言的验证页面

README.md

@@ -12,7 +12,7 @@
 ![GitHub forks](https://img.shields.io/github/forks/linshenkx/prompt-optimizer?style=flat)
 [![Deploy with Vercel](https://img.shields.io/badge/Vercel-indigo?style=flat&logo=vercel)](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)
+[在线体验](https://prompt.always200.com) | [快速开始](#快速开始) | [常见问题](#常见问题) | [开发文档](dev.md) | [Vercel部署指南](docs/vercel.md) ([密码保护](docs/vercel-password-protection_zh.md)) | [Chrome插件](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna)
 
 </div>
 
@@ -54,7 +54,9 @@ Prompt Optimizer是一个强大的AI提示词优化工具，帮助你编写更
    - 然后在Vercel中导入该项目
    - 可跟踪源项目更新，便于同步最新功能和修复
   
-更多详细的部署步骤和注意事项，请查看 [Vercel部署指南](docs/vercel.md)
+更多详细的部署步骤和注意事项，请查看：
+- [Vercel部署指南](docs/vercel.md)
+- [Vercel密码保护指南](docs/vercel-password-protection_zh.md)
 
 ### 3. 安装Chrome插件
 1. 从Chrome商店安装（由于审批较慢，可能不是最新的）：[Chrome商店地址](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna)
@@ -169,6 +171,7 @@ pnpm dev:fresh        # 完整重置并重新启动开发环境
 - [项目状态](docs/project-status.md) - 当前进度和计划
 - [产品需求](docs/prd.md) - 产品需求文档
 - [Vercel部署指南](docs/vercel.md) - Vercel部署详细说明
+- [Vercel密码保护指南](docs/vercel-password-protection_zh.md) - Vercel密码保护详细说明
 
 
 ## Star History

README_EN.md

@@ -54,7 +54,9 @@ Method 2: Fork the project and import to Vercel (Recommended):
    - 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)
+For more detailed deployment steps and important notes, please check:
+- [Vercel Deployment Guide](docs/vercel_en.md)
+- [Vercel Password Protection Guide](docs/vercel-password-protection.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)
@@ -169,6 +171,7 @@ For detailed project status, see [Project Status Document](docs/project-status.m
 - [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
+- [Vercel Password Protection Guide](docs/vercel-password-protection.md) - Detailed instructions for Vercel password protection
 
 ## Star History
 

api/auth.js

@@ -0,0 +1,63 @@
+export default function handler(req, res) {
+  // 设置CORS头
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  
+  if (req.method === 'OPTIONS') {
+    res.status(200).end();
+    return;
+  }
+
+  const accessPassword = process.env.ACCESS_PASSWORD;
+  
+  // 如果没有设置密码，直接返回成功
+  if (!accessPassword) {
+    return res.status(200).json({ 
+      success: true, 
+      message: 'No password protection configured' 
+    });
+  }
+
+  if (req.method === 'POST') {
+    const { password, action } = req.body;
+    
+    if (action === 'verify') {
+      if (password === accessPassword) {
+        // 设置Cookie以记住用户身份验证状态
+        const maxAge = 60 * 60 * 24 * 7; // 7天
+        res.setHeader('Set-Cookie', [
+          `vercel_access_token=${accessPassword}; HttpOnly; Path=/; Max-Age=${maxAge}; SameSite=Strict${process.env.NODE_ENV === 'production' ? '; Secure' : ''}`
+        ]);
+        
+        return res.status(200).json({ 
+          success: true, 
+          message: 'Authentication successful' 
+        });
+      } else {
+        return res.status(401).json({ 
+          success: false, 
+          message: 'Invalid password' 
+        });
+      }
+    }
+  }
+
+  if (req.method === 'GET') {
+    const { action } = req.query;
+    
+    if (action === 'logout') {
+      // 清除Cookie
+      res.setHeader('Set-Cookie', [
+        'vercel_access_token=; HttpOnly; Path=/; Max-Age=0; SameSite=Strict'
+      ]);
+      
+      return res.status(200).json({ 
+        success: true, 
+        message: 'Logged out successfully' 
+      });
+    }
+  }
+
+  res.status(405).json({ error: 'Method not allowed' });
+} 

docs/scratchpad.md

@@ -301,4 +301,90 @@
 - 2024-03-05: 增加提示词迭代功能
 - 2024-03-03: 优化界面布局和UI
 - 2024-03-01: 增加测试输入输出区域，重构API管理
-- 2024-02-26: 项目初始化，完成从LangChain迁移到原生SDK
+- 2024-02-26: 项目初始化，完成从LangChain迁移到原生SDK
+
+## 任务：优化Vercel密码保护实现 - 2024-03-25
+
+### 目标
+用户反馈希望简化密码保护功能，减少对web模块的侵入，实现类似basic认证的弹窗体验
+
+### 计划步骤
+[x] 1. 移除侵入性认证组件
+    - 预期结果：完全恢复web模块原始状态
+    - 实际结果：成功移除AuthGuard.vue和main.js中的认证检查
+    - 完成时间：15分钟
+
+[x] 2. 创建页面守卫API函数
+    - 预期结果：拦截所有页面请求，实现认证检查
+    - 实际结果：创建api/page-guard.js，成功拦截并提供弹窗界面
+    - 完成时间：30分钟
+
+[x] 3. 更新Vercel配置
+    - 预期结果：通过vercel.json重写规则实现拦截
+    - 实际结果：成功配置重写规则，所有请求都经过page-guard
+    - 完成时间：10分钟
+
+[x] 4. 简化auth.js API
+    - 预期结果：移除不必要的check接口
+    - 实际结果：简化API结构，保留验证和登出功能
+    - 完成时间：5分钟
+
+[x] 5. 更新文档
+    - 预期结果：反映新的非侵入性实现
+    - 实际结果：更新中英文文档，强调非侵入性特点
+    - 完成时间：20分钟
+
+[x] 6. 测试验证
+    - 预期结果：构建成功，测试通过
+    - 实际结果：所有测试通过(205个测试)，构建成功
+    - 完成时间：5分钟
+
+### 问题记录
+1. 页面拦截实现
+   - 原因：用户希望减少对web模块的侵入
+   - 解决方案：使用Vercel的重写规则拦截所有请求
+   - 经验总结：Vercel Edge Functions可以很好地实现页面级别的拦截
+
+2. 弹窗样式设计
+   - 原因：要实现类似basic认证的体验
+   - 解决方案：在page-guard中内嵌完整的HTML和CSS
+   - 经验总结：自包含的样式避免了与主应用样式的冲突
+
+### 里程碑
+- [x] 完全非侵入性实现
+- [x] 类似basic认证的用户体验
+- [x] 保持服务端密码验证安全性
+- [x] 文档更新完成
+
+### 技术要点
+1. **非侵入性设计**：
+   - 所有逻辑集中在api/文件夹和vercel.json
+   - web模块完全不受影响
+   - 可以通过简单删除api文件夹禁用功能
+
+2. **Vercel重写规则**：
+   - 使用`"/(.*)" -> "/api/page-guard"`拦截所有请求
+   - 在API函数中判断认证状态决定返回内容
+
+3. **安全考虑**：
+   - 密码验证仍在服务端进行
+   - 使用HttpOnly cookies存储认证状态
+   - 客户端无法绕过密码验证逻辑
+
+4. **用户体验**：
+   - 弹窗样式模仿basic认证
+   - 认证成功后自动刷新页面
+   - 支持ESC键聚焦密码输入框
+
+### 最佳实践总结
+1. **Vercel密码保护架构**：
+   - 使用API Functions + 重写规则实现页面级保护
+   - 保持与主应用的完全解耦
+   - 服务端验证确保安全性
+
+2. **文档管理**：
+   - 同时维护中英文文档
+   - 详细记录技术实现和安全限制
+   - 提供故障排除指南
+
+总结：成功实现了用户要求的非侵入性密码保护，用户体验类似basic认证，同时保持了安全性。整个重构过程顺利，测试全部通过。

docs/vercel-password-protection.md

@@ -0,0 +1,58 @@
+# Vercel Deployment Password Protection
+
+This document explains how to enable and use the password protection feature for your Vercel deployment. This feature uses Next.js Middleware and Vercel API Functions with an elegant authentication page to restrict access to your deployed application.
+
+## How it Works
+
+When password protection is enabled, users attempting to access your Vercel deployment will be intercepted by middleware:
+- If they are not authenticated, they will see an elegant password verification page.
+- If they enter the correct password, they will be granted access to the application. A cookie is set in their browser to remember their session, so they won't need to re-enter the password for a certain period (e.g., 7 days) or until they clear their cookies.
+- If they enter an incorrect password, they will be shown an error message and prompted to try again.
+- The verification page automatically displays in either Chinese or English based on the user's browser language settings.
+
+This protection works entirely through Next.js Middleware and Vercel API without modifying the main web application code.
+
+## Setup Instructions
+
+1. **Set the Access Password Environment Variable:**
+   * Go to your project settings in Vercel.
+   * Navigate to "Settings" -> "Environment Variables".
+   * Create a new environment variable named `ACCESS_PASSWORD`.
+   * Set its value to the password you want to use for accessing the site. Choose a strong, unique password.
+   * Ensure the variable is available to all environments you wish to protect (Production, Preview, Development).
+   * When you add or change environment variables, Vercel will prompt you to redeploy your project. Follow the prompts to complete the redeployment.
+
+2. **Accessing Your Protected Site:**
+   * Once the `ACCESS_PASSWORD` is set and the project has redeployed, try accessing your Vercel deployment URL.
+   * You should see a password verification page.
+   * Enter the password you configured in the `ACCESS_PASSWORD` environment variable.
+   * Upon successful authentication, the page will reload and show the main application.
+
+## Technical Details
+
+- **Technology Used:** 
+  - Next.js Middleware (`middleware.js`) for intercepting all page requests and serving the verification page
+  - Vercel API Functions (`/api/auth.js`) for server-side password verification
+  - Language-adaptive verification page (automatically displays in Chinese or English based on browser language)
+- **Cookie Name:** `vercel_access_token` (This cookie stores the access password. It's HttpOnly, Secure in production, and SameSite=Strict).
+- **Password Storage:** The actual password is only stored as an environment variable in your Vercel project settings. It is not hardcoded in the application.
+- **Bypassing Protection:** If the `ACCESS_PASSWORD` environment variable is not set or is empty, the password protection will be bypassed, and the site will be publicly accessible. This allows for easy disabling of the feature if needed.
+- **Non-invasive Implementation:** This protection is completely independent of the main web application code. All logic is contained in the `middleware.js` and `api/auth.js` files.
+- **Security Note:** This is a presentation-layer protection that can be bypassed by users who disable JavaScript or directly access API endpoints. For stronger security, consider using Vercel's built-in password protection feature.
+- **Multi-language Support:** The verification page automatically detects the browser's `accept-language` header to display a Chinese interface for Chinese users and an English interface for users of other languages.
+
+## Troubleshooting
+
+- **Password verification page doesn't appear:**
+  * Ensure the `ACCESS_PASSWORD` environment variable is correctly set in Vercel and that the project has finished redeploying.
+  * Check the browser console for any errors related to the middleware or authentication API.
+  * Verify that the `/api/auth` endpoint is working by accessing it directly.
+- **Incorrect password error, even with the correct password:**
+  * Double-check the value of the `ACCESS_PASSWORD` environment variable for typos or extra spaces.
+  * Try clearing your browser cookies for the site and attempting again.
+  * Check the browser network tab to see if the API call is successful.
+- **Language display issues:**
+  * If the verification page language doesn't match your browser settings, confirm that your browser has the correct preferred language settings.
+  * You can switch the display language of the verification page by modifying your browser's language settings.
+
+For further assistance, please check the project's main README or open an issue in the repository.

docs/vercel-password-protection_zh.md

@@ -0,0 +1,58 @@
+# Vercel 部署密码保护
+
+本文档说明如何为您的 Vercel 部署启用和使用密码保护功能。此功能使用 Next.js Middleware 和 Vercel API 函数，通过美观的身份验证页面来限制对您已部署应用程序的访问。
+
+## 工作原理
+
+启用密码保护后，尝试访问您的 Vercel 部署的用户将被中间件拦截：
+- 如果他们未经身份验证，将看到一个美观的密码验证页面。
+- 如果他们输入正确的密码，他们将被授予访问应用程序的权限。一个 Cookie 会被设置在他们的浏览器中以记住他们的会话，因此他们在一段时间内（例如 7 天）或直到他们清除 Cookie 之前无需重新输入密码。
+- 如果他们输入错误的密码，他们将看到错误消息并被提示重试。
+- 验证页面会根据用户浏览器语言设置自动选择显示中文或英文界面。
+
+此保护完全通过 Next.js Middleware 和 Vercel API 实现，无需修改主要的 web 应用程序代码。
+
+## 设置说明
+
+1. **设置访问密码环境变量：**
+   * 进入您在 Vercel 中的项目设置。
+   * 导航到"Settings"->"Environment Variables"。
+   * 创建一个名为 `ACCESS_PASSWORD` 的新环境变量。
+   * 将其值设置为您希望用于访问站点的密码。选择一个强壮且唯一的密码。
+   * 确保该变量在您希望保护的所有环境（生产、预览、开发）中都可用。
+   * 当您添加或更改环境变量时，Vercel 会提示您重新部署项目。请按照提示完成重新部署。
+
+2. **访问受保护的站点：**
+   * 一旦设置了 `ACCESS_PASSWORD` 并且项目已重新部署，请尝试访问您的 Vercel 部署 URL。
+   * 您应该会看到一个密码验证页面。
+   * 输入您在 `ACCESS_PASSWORD` 环境变量中配置的密码。
+   * 成功验证后，页面将重新加载并显示主应用程序。
+
+## 技术细节
+
+- **所用技术：** 
+  - Next.js Middleware（`middleware.js`）用于拦截所有页面请求并提供验证页面
+  - Vercel API 函数（`/api/auth.js`）用于服务端密码验证
+  - 自适应语言的验证页面（根据浏览器语言自动显示中文或英文）
+- **Cookie 名称：** `vercel_access_token`（此 Cookie 存储访问密码。它是 HttpOnly，在生产环境中是 Secure，并且 SameSite=Strict）。
+- **密码存储：** 实际密码仅作为环境变量存储在您的 Vercel 项目设置中。它没有硬编码在应用程序中。
+- **绕过保护：** 如果未设置 `ACCESS_PASSWORD` 环境变量或该变量为空，则密码保护将被绕过，站点将公开访问。这允许在需要时轻松禁用该功能。
+- **非侵入性实现：** 此保护完全独立于主要的 web 应用程序代码。所有逻辑都包含在 `middleware.js` 和 `api/auth.js` 文件中。
+- **安全说明：** 这是表现层保护，可以被禁用 JavaScript 或直接访问 API 端点的用户绕过。如需更强的安全性，请考虑使用 Vercel 的内置密码保护功能。
+- **多语言支持：** 验证页面会自动检测浏览器的 `accept-language` 请求头，为中文用户显示中文界面，为其他语言用户显示英文界面。
+
+## 故障排除
+
+- **密码验证页面未出现：**
+  * 确保在 Vercel 中正确设置了 `ACCESS_PASSWORD` 环境变量，并且项目已完成重新部署。
+  * 检查浏览器控制台中是否有与中间件或身份验证 API 相关的任何错误。
+  * 通过直接访问 `/api/auth` 端点来验证它是否正常工作。
+- **即使使用正确的密码也提示密码错误：**
+  * 仔细检查 `ACCESS_PASSWORD` 环境变量的值是否有拼写错误或多余的空格。
+  * 尝试清除站点的浏览器 Cookie，然后重试。
+  * 检查浏览器网络选项卡以查看 API 调用是否成功。
+- **语言显示问题：**
+  * 如果验证页面语言与您的浏览器设置不符，请确认您的浏览器已正确设置首选语言。
+  * 您可以通过修改浏览器的语言设置来切换验证页面的显示语言。
+
+如需进一步帮助，请查看项目的主 README 文件或在存储库中提交问题。

middleware.js

@@ -0,0 +1,323 @@
+export const config = {
+  matcher: [
+    /*
+     * 匹配除以下路径之外的所有路径:
+     * - api routes (以 /api/ 开头)
+     * - 静态文件 (以 . 结尾)
+     * - 其他静态资源
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico|assets/|.*\\.).*)' 
+  ],
+};
+
+export default function middleware(request) {
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+
+  // 访问环境变量
+  const accessPassword = process.env.ACCESS_PASSWORD;
+  
+  // 如果没有设置密码，直接允许访问
+  if (!accessPassword) {
+    return; // 什么都不返回，表示继续处理请求
+  }
+
+  // 检查认证状态
+  const cookieHeader = request.headers.get('cookie');
+  let authenticated = false;
+  
+  if (cookieHeader) {
+    const cookies = cookieHeader.split(';');
+    const accessTokenCookie = cookies.find(cookie => 
+      cookie.trim().startsWith('vercel_access_token=')
+    );
+    
+    if (accessTokenCookie) {
+      const accessToken = accessTokenCookie.split('=')[1];
+      authenticated = accessToken === accessPassword;
+    }
+  }
+  
+  // 如果已认证，允许访问
+  if (authenticated) {
+    return; // 什么都不返回，表示继续处理请求
+  }
+
+  // 获取浏览器语言设置
+  const acceptLanguage = request.headers.get('accept-language') || '';
+  const preferChinese = acceptLanguage.includes('zh');
+
+  // 未认证，返回认证页面
+  return new Response(generateAuthPage(preferChinese), {
+    status: 200,
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-cache, no-store, must-revalidate',
+    },
+  });
+}
+
+function generateAuthPage(isChinese = true) {
+  // 语言文本对象
+  const text = {
+    title: isChinese ? '访问验证 - Prompt Optimizer' : 'Access Verification - Prompt Optimizer',
+    heading: 'Prompt Optimizer',
+    subtitle: isChinese ? '此站点受密码保护' : 'This site is password protected',
+    passwordLabel: isChinese ? '访问密码' : 'Access Password',
+    passwordPlaceholder: isChinese ? '请输入访问密码' : 'Enter access password',
+    submitButton: isChinese ? '验证并访问' : 'Verify & Access',
+    loading: isChinese ? '验证中，请稍候...' : 'Verifying, please wait...',
+    footer: isChinese ? '安全访问控制 | Powered by Vercel' : 'Secure Access Control | Powered by Vercel',
+    errorNetwork: isChinese ? '网络错误，请重试' : 'Network error, please try again',
+  };
+
+  return `
+<!DOCTYPE html>
+<html lang="${isChinese ? 'zh-CN' : 'en'}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${text.title}</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+        }
+        
+        .auth-modal {
+            background: white;
+            padding: 2.5rem;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+            animation: fadeIn 0.3s ease-out;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .logo {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: #667eea;
+        }
+        
+        h1 {
+            font-size: 1.5rem;
+            color: #333;
+            margin-bottom: 0.5rem;
+        }
+        
+        .subtitle {
+            color: #666;
+            margin-bottom: 2rem;
+            font-size: 0.9rem;
+        }
+        
+        .form-group {
+            margin-bottom: 1.5rem;
+            text-align: left;
+        }
+        
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #333;
+            font-weight: 500;
+        }
+        
+        input[type="password"] {
+            width: 100%;
+            padding: 0.75rem;
+            border: 2px solid #e1e5e9;
+            border-radius: 6px;
+            font-size: 1rem;
+            transition: border-color 0.3s;
+        }
+        
+        input[type="password"]:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        
+        .submit-btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        
+        .submit-btn:hover:not(:disabled) {
+            background: #5a6fd8;
+        }
+        
+        .submit-btn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        
+        .error-message {
+            color: #e74c3c;
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            display: none;
+            padding: 0.5rem;
+            background: #ffeaea;
+            border-radius: 4px;
+            border-left: 4px solid #e74c3c;
+        }
+        
+        .loading {
+            display: none;
+            margin-top: 1rem;
+            color: #667eea;
+        }
+        
+        .footer {
+            margin-top: 2rem;
+            padding-top: 1rem;
+            border-top: 1px solid #eee;
+            font-size: 0.8rem;
+            color: #999;
+        }
+    </style>
+</head>
+<body>
+    <div class="auth-modal">
+        <div class="logo">🚀</div>
+        <h1>${text.heading}</h1>
+        <p class="subtitle">${text.subtitle}</p>
+        
+        <form id="authForm">
+            <div class="form-group">
+                <label for="password">${text.passwordLabel}</label>
+                <input 
+                    type="password" 
+                    id="password" 
+                    name="password" 
+                    required 
+                    placeholder="${text.passwordPlaceholder}"
+                    autocomplete="current-password"
+                >
+            </div>
+            
+            <button type="submit" class="submit-btn" id="submitBtn">
+                <span id="btnText">${text.submitButton}</span>
+            </button>
+            
+            <div class="error-message" id="errorMessage"></div>
+            <div class="loading" id="loading">${text.loading}</div>
+        </form>
+        
+        <div class="footer">
+            ${text.footer}
+        </div>
+    </div>
+
+    <script>
+        const form = document.getElementById('authForm');
+        const submitBtn = document.getElementById('submitBtn');
+        const btnText = document.getElementById('btnText');
+        const errorMessage = document.getElementById('errorMessage');
+        const loading = document.getElementById('loading');
+        const passwordInput = document.getElementById('password');
+        
+        // 语言设置
+        const isChinese = document.documentElement.lang === 'zh-CN';
+        const errorMessages = {
+            network: '${text.errorNetwork}',
+            invalidPassword: isChinese ? '密码错误，请重试' : 'Invalid password, please try again'
+        };
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const password = passwordInput.value.trim();
+            if (!password) return;
+
+            // 显示加载状态
+            submitBtn.disabled = true;
+            btnText.style.display = 'none';
+            loading.style.display = 'block';
+            errorMessage.style.display = 'none';
+
+            try {
+                console.log('开始验证密码');
+                const response = await fetch('/api/auth', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        action: 'verify',
+                        password: password
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    // 认证成功，刷新页面
+                    window.location.reload();
+                } else {
+                    // 认证失败
+                    console.log('认证失败', { message: data.message });
+                    errorMessage.textContent = data.message || errorMessages.invalidPassword;
+                    errorMessage.style.display = 'block';
+                    passwordInput.value = '';
+                    passwordInput.focus();
+                }
+            } catch (error) {
+                console.error('认证请求失败:', error);
+                errorMessage.textContent = errorMessages.network;
+                errorMessage.style.display = 'block';
+            } finally {
+                // 恢复按钮状态
+                submitBtn.disabled = false;
+                btnText.style.display = 'inline';
+                loading.style.display = 'none';
+            }
+        });
+
+        // 密码输入框获得焦点
+        passwordInput.focus();
+
+        // 清除错误信息当用户开始输入
+        passwordInput.addEventListener('input', () => {
+            errorMessage.style.display = 'none';
+        });
+        
+        // 按ESC键聚焦到密码输入框
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                passwordInput.focus();
+                errorMessage.style.display = 'none';
+            }
+        });
+    </script>
+</body>
+</html>`;
+}