Melow97/RedoubtAI

# Redoubt — 设计预览 工作名称：**Redoubt**（尚未最终确定）。状态：**设计预览阶段** —— 绝大部分为静态 HTML/CSS/JS，外加一个真实的后端功能（聊天，见下文）以及下面提到的几个其他真正具备功能的模块。 ## 页面 | 文件 | 用途 | |---|---| | `index.html` | 营销/推介着陆页（hero 区、功能、定价、巨型页脚） | | `welcome-screen.html` | 着陆后的登录界面（OAuth 按钮 + 邮箱继续） | | `chat-interface.html` | 登录后的 AI 聊天 UI —— 侧边栏、对话区、Connectors 面板以及 `+` 工具菜单 | | `upgrade-plans.html` | Free 与 Pro 计划对比弹窗 | 所有文件都是自包含的（无需构建步骤，无依赖）—— 在本地直接打开，或者拖放到 Vercel/Netlify 即可按原样部署。 `chat-interface.html` 链接到了 `customization.html` 和 `business.html`，它们尚未包含在本次提交中 —— 准备好后将它们添加到这些文件旁边，导航链接就会自动识别它们。 ## 聊天输入框 `+` 工具菜单 聊天输入框的 `+` 按钮会打开一个小型浮层，包含： - **添加照片和文件** —— 打开真实的文件选择器；选中的文件将在输入框上方显示为可移除的标签块（图片会生成缩略图预览）。 - **截屏** —— 使用浏览器的 `getDisplayMedia` 屏幕捕获 API 抓取用户共享内容的真实画面，并将其作为缩略图标签块附加。如果浏览器不支持或用户拒绝了权限提示，则会回退显示为 toast 提示消息。 - **网页搜索** / **研究模式** —— 可切换的模式开关；开启时，它们会在输入框上方显示为可取消的胶囊状标签（目前仅为 UI 状态，尚未连接到后端）。 - **Connectors** —— 打开现有的完整 Connectors 浏览弹窗，以查看和切换已集成的应用列表（GitHub、Slack、GitLab 等）。 ## 品牌系统 **主题：** 浅色（白色背景）。 **颜色** | Token | Hex | 用途 | |---|---|---| | Background | `#FFFFFF` | 基础页面背景 | | Panel | `#F6F7FA` | 卡片、侧边栏、凸起表面 | | Panel 2 | `#EEF0F4` | 略深的 Panel 变体 | | Panel 3 | `#E5E8EF` | 最深的 Panel 变体（聊天输入框、hover 状态） | | Cyan (baseline/primary) | `#1C9A8D` | 主要强调色、“正常”信号、CTA | | Amber (warning) | `#C97F0F` | 升级/审核中状态 | | Red (alert) | `#D93B3F` | 标记的异常、高严重性 | | Violet | `#6B5ECF` | 代码/漏洞扫描图标 | | Coral | `#E2603F` | 钓鱼检测图标 | | Text | `#0B1220` | 主要文本 | **字体排印** - 标题：`Space Grotesk` (600/700) - 正文：`Inter` (400/500/600) - 数据/标签/等宽：`JetBrains Mono` **Logo：** 带有 lambda (Λ) 标记的斯巴达重装步兵盾牌，以 cyan 强调色渲染。 ## 真实 AI 回答（聊天现已连接至 Claude） `chat-interface.html` 打开时为空白，并将真实消息发送到 `api/chat.js` —— 这是一个调用了 Claude API (Anthropic) 并启用网页搜索的 serverless 函数，因此它可以回答依赖于实时信息（比分、新闻、任何对时间敏感的内容）的问题，而不仅仅局限于训练知识。注意：**GitHub Pages 无法运行此功能** —— 它仅支持纯静态。聊天界面在那里依然可以加载，但发送的每条消息都会显示“此处无后端”的提示。请部署到 Vercel（或 Netlify）以获取真实回答： 1. 在 [console.anthropic.com](https://console.anthropic.com) 获取 API key。 2. 将此代码库导入 [Vercel](https://vercel.com/new) —— 无需构建设置，它会自动检测静态站点以及 `api/` 函数。 3. 在 Vercel 项目的 **Settings → Environment Variables** 中，添加 `ANTHROPIC_API_KEY` 及你的 key。切勿将其提交至 git 或粘贴到聊天中 —— 这是它唯一应该存在的地方。 4. 重新部署。你的 Vercel URL 现在可以在 `chat-interface.html` 中提供真实回答了。 如需本地测试，请将 `.env.example` 复制到 `.env.local`，填入你的 key，并运行 `vercel dev`（或任何将 `api/chat.js` 挂载至 `/api/chat` 的 Node 服务器）。 ## 真实 Stripe 结账与自动授予 Pro 访问权限 本项目没有真实的用户身份验证 —— 登录仅限邮箱，无密码。支付操作会将该邮箱标记为 Pro；再次输入同一邮箱即可解锁。设置步骤： 1. **添加 Redis 存储** —— Vercel 项目 → **Storage** 标签页 → 添加 **Redis** 集成（Marketplace，免费层级）。这将自动注入 `UPSTASH_REDIS_REST_URL` 和 `UPSTASH_REDIS_REST_TOKEN` —— 无需你自己复制/粘贴。 2. **创建 Payment Link** —— Stripe Dashboard（在 **Test mode** 下开始）→ Payment Links → 为 Pro 计划创建链接。将生成的公开 URL 粘贴到 `index.html` 和 `upgrade-plans.html` 中的 `STRIPE_PAYMENT_LINK` 里（这是一个公开的结账 URL，并非密钥 —— 可直接手动编辑）。 3. **添加 webhook** —— Stripe Dashboard → Developers → Webhooks → Add endpoint，URL 填写 `https:///api/stripe-webhook`，监听 `checkout.session.completed` 和 `customer.subscription.deleted`。一旦 endpoint 创建完成，Stripe 会显示一个签名密钥（`whsec_...`）。 4. 在 Vercel 的 **Settings → Environment Variables** 中，添加 `STRIPE_SECRET_KEY`（Stripe Dashboard → Developers → API keys）和 `STRIPE_WEBHOOK_SECRET`（来自步骤 3）。两者都是真实的密钥 —— 仅限环境变量，切勿放入 git，切勿放入聊天。 5. 重新部署。现在通过 Payment Link 付款会在 Redis 中将该邮箱标记为 Pro；在登录界面输入同一邮箱将显示 Pro 徽章并解锁受升级限制的 UI。 `api/stripe-webhook.js` 在写入任何内容之前，会验证每个请求上的 Stripe 签名（已针对伪造/篡改的 payload 进行过测试 —— 两者均被拒绝），因此如果没有来自 Stripe 的真实签名事件，请求是无法自行授予 Pro 权限的。 ## 用量限制 + 管理员邮件警报 聊天请求按邮箱和自然月在 Redis（与 Stripe 计划查询相同的存储）中进行计量：Free 每月 50,000 个 token，Pro 每月 2,000,000 个 —— 编辑 `api/chat.js` 中的 `PLAN_LIMITS` 即可更改这两个数字。一旦有人达到限制，`/api/chat` 将返回明确的 403 错误，而不是调用模型。聊天页面右下角的一个小型环形徽章会显示实时用量（在发送第一条消息前隐藏，鼠标悬停可查看确切数字和百分比），随着使用量增加，颜色会从 cyan 渐变为 amber 再到 red。 两项管理员通知通过 [Resend](https://resend.com) 进行连接： - **新 Pro 注册** —— 在某人付款的那一刻由 Stripe webhook 触发。 - **高用量警报** —— 在每个账单周期内，当账户首次超过其计划额度的 80% 时触发（通过 Redis 中的标记进行跟踪，因此不会在随后的每条消息中重复触发）。 设置：在 resend.com 获取 key，然后在 Vercel 的环境变量中添加 `RESEND_API_KEY` 和 `ADMIN_EMAIL`（接收警报的邮箱）。`RESEND_FROM_EMAIL` 为可选 —— 默认使用 Resend 的共享测试地址，该地址可立即使用但不适合真实的业务生产量；准备好处理真实业务量时，请在 Resend 中验证你自己的发送域名。将 `RESEND_API_KEY`/`ADMIN_EMAIL` 留空只会静默跳过发送邮件 —— 没有任何其他功能依赖它们。 ## 明确不在范围内（设计使然） 不对具有攻击性的工具进行实时执行（密码破解、无限制网络扫描、SQL 注入执行、站点克隆）。DNS/IP 查询、WHOIS 以及 SSL 证书检查属于公共数据查询，包含在内没有问题；但任何针对目标执行操作的工具均不包含在内。 ## 实时预览（GitHub Pages） 位于 `.github/workflows/pages.yml` 的工作流会在每次推送时将此站点发布到 GitHub Pages。一次性设置（我无法通过 git 直接切换此项）： 1. 转到此代码库的 **Settings → Pages**。 2. 在 **Build and deployment → Source** 下，选择 **GitHub Actions**（而非“Deploy from a branch”）。 3. 推送任何内容（或从 **Actions** 标签页重新运行“Deploy static site to GitHub Pages”工作流）—— 一旦完成，Actions 标签页将显示类似 `https://.github.io//` 的 URL。 此后，每次推送都会自动更新同一个实时 URL，并且所有内部链接（登录 → 聊天 → 升级等）的工作方式与本地完全一致，因为它们是相同的静态文件。 ## 后续步骤 1. 添加 `business.html` 和 `customization.html` 以完善导航 2. 确定最终产品名称（域名 + 商标检查） 3. 将 `+` 菜单中的 Web 搜索 / 研究模式开关接入实际的聊天请求中（目前它们仅是 UI 状态 —— 无论开关状态如何，后端始终允许模型使用网页搜索） 4. 接入 DNS/IP 查询作为第一个真实的后端功能 5. 添加真实的 Stripe 结账功能（参见 `index.html` / `upgrade-plans.html` 中的 `STRIPE_PAYMENT_LINK`）

标签：AI助手, AV绕过, FastAPI, Syscall, Web开发, 前端设计, 后端开发, 网络安全, 隐私保护