wangjia
3ae96ef229
覆盖前端五端/后端/MySQL/弹性节点拓扑/Web安全/安全总纲，遵循 design/ 设计系统视觉呈现。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
154 lines
9.9 KiB
HTML
154 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>总览 · 穿山甲架构设计</title>
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="site-header"><div class="inner">
|
||
<a class="brand" href="index.html"><img src="assets/logo-mark.svg" alt="Pangolin"><span><span class="zh">穿山甲 · 架构设计</span><br><span class="en">Pangolin Architecture</span></span></a>
|
||
<nav class="site-nav">
|
||
<a href="index.html" class="active">总览</a>
|
||
<a href="01-frontend.html">01 前端</a>
|
||
<a href="02-backend.html">02 后端</a>
|
||
<a href="03-database.html">03 数据库</a>
|
||
<a href="04-infra.html">04 网络拓扑</a>
|
||
<a href="05-web-security.html">05 Web 安全</a>
|
||
<a href="06-security.html">06 安全总纲</a>
|
||
</nav>
|
||
<button class="theme-btn" id="themeBtn" title="切换深浅主题"><i data-lucide="moon"></i></button>
|
||
</div></header>
|
||
|
||
<main class="doc">
|
||
|
||
<div class="doc-hero">
|
||
<div class="overline">Architecture Design · v1.0</div>
|
||
<h1>穿山甲 整体架构设计</h1>
|
||
<p class="lede">极简、轻量、亲和的跨平台网络加速应用。本设计覆盖前端五端（移动 / iPad / 桌面 / 官网 / 用户中心）、Go 控制面、MySQL 数据层、弹性节点拓扑、Web 安全与灾备、以及贯穿全局的安全与断网应对策略。UI 实现以 <code>design/ui_kits/</code> React 原型为像素基准，100% 还原既有设计系统。</p>
|
||
<div class="doc-meta"><span>2026-06-11</span><span>依据 design/ + plan/ + server/ARCHITECTURE.md v0.1</span></div>
|
||
</div>
|
||
|
||
<section id="decisions">
|
||
<h2><span class="num">§1</span>关键架构决策</h2>
|
||
<div class="tbl-wrap"><table>
|
||
<thead><tr><th>领域</th><th>决策</th><th>理由 / 相对蓝本的变化</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>数据面协议</strong></td><td>sing-box：VLESS + Vision + <strong>REALITY</strong> 主线，<strong>Hysteria2</strong> 备线（端口跳跃）</td><td>替换蓝本 v0.1 的 WireGuard——WG 协议特征明显，在目标网络环境必被识别阻断；plan/ phase-0~3 已实测选定 REALITY。API 契约形状保留，仅 <code>connect</code> 语义适配（见 02 章）。</td></tr>
|
||
<tr><td><strong>数据库</strong></td><td><strong>MySQL 8.x</strong>（InnoDB / utf8mb4）+ Redis</td><td>按本次要求替换蓝本的 Postgres；schema 全量移植并做类型适配（见 03 章）。</td></tr>
|
||
<tr><td><strong>移动 / iPad / 桌面客户端</strong></td><td><strong>Flutter</strong>（共享 ~90% UI 代码）+ sing-box libbox 内核；iPad = 移动端工程宽度 ≥900 自适应切侧栏分栏（像素基准 <code>ui_kits/tablet/</code>）</td><td><code>design/flutter/</code> 起步包即为此准备；原生 VPN 壳（NetworkExtension / VpnService / TUN）性能与稳定性最优。</td></tr>
|
||
<tr><td><strong>官网</strong></td><td><strong>Astro</strong> SSG → Cloudflare Pages 多镜像</td><td>纯静态、秒级整站复制到新域名，抗封锁；<code>ui_kits/website</code> JSX 近乎逐字迁移。</td></tr>
|
||
<tr><td><strong>Web 用户中心</strong></td><td><strong>Next.js</strong>（React）</td><td><code>ui_kits/usercenter</code> 本身是 React——组件直接复用，还原保真度最高。</td></tr>
|
||
<tr><td><strong>节点拓扑</strong></td><td>三层弹性拓扑（入口 / 中转 / 落地）+ 节点生命周期状态机 + 一键/自动换节点换 IP</td><td>补全 plan/ 中"IP 轮换自动化"的具体设计：判封探针、多厂商 VPS 池、目录版本灰度（见 04 章）。</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</section>
|
||
|
||
<section id="topology">
|
||
<h2><span class="num">§2</span>系统全景</h2>
|
||
<div class="diagram">
|
||
<div class="flow">
|
||
<div class="fbox accent"><b>移动 App</b><span>Flutter · iOS/Android/iPad</span></div>
|
||
<div class="fbox accent"><b>桌面客户端</b><span>Flutter · Win/macOS</span></div>
|
||
<div class="fbox accent"><b>用户中心</b><span>Next.js</span></div>
|
||
<div class="fbox accent"><b>官网</b><span>Astro · 静态</span></div>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="farr">│ HTTPS（域名池 + CDN 前置 + IP 直连兜底）</div>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="fbox"><b>CDN / 域名池</b><span>Cloudflare · 源站隐藏</span></div>
|
||
<div class="farr">→</div>
|
||
<div class="fbox accent"><b>API 控制面</b><span>Go 单体 · 模块分包</span></div>
|
||
<div class="farr">→</div>
|
||
<div class="fbox"><b>MySQL 8</b><span>主数据 · 加密异地备份</span></div>
|
||
<div class="fbox"><b>Redis</b><span>验证码/限流/节点状态</span></div>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="fbox ghost"><b>发卡店 Webhook</b><span>激活码入库（签名）</span></div>
|
||
<div class="farr">→ 控制面 ←</div>
|
||
<div class="fbox ghost"><b>管理端</b><span>内网 · 白名单 + 2FA</span></div>
|
||
<div class="fbox ghost"><b>探针系统</b><span>多 ISP 拨测 · 判封</span></div>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="farr">│ mTLS gRPC（节点注册 / 心跳 / 凭证下发 / 回收）</div>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="fbox"><b>入口节点池</b><span>消耗品 IP · 可秒换</span></div>
|
||
<div class="farr">→</div>
|
||
<div class="fbox"><b>中转层（可选）</b><span>隧道转发</span></div>
|
||
<div class="farr">→</div>
|
||
<div class="fbox"><b>落地节点池</b><span>精品 IP · 稳定出口</span></div>
|
||
<div class="fnote">用户流量（REALITY / Hysteria2）只走数据面，绝不经过 API；节点零用户库。</div>
|
||
</div>
|
||
<div class="cap">控制面 / 数据面彻底分离 · 节点目录带版本灰度 · 任一节点被封不影响全局</div>
|
||
</div>
|
||
<p class="muted">四条铁律（继承蓝本 §0）：① 控制面/数据面分离；② App 内无支付，资金流全部外部化为激活码；③ 节点可秒级灰度，客户端缓存最后一份可用目录兜底；④ 最小数据原则——不记录浏览内容与目的地，仅保留计费所需的字节数/分钟数。</p>
|
||
</section>
|
||
|
||
<section id="chapters">
|
||
<h2><span class="num">§3</span>章节导航</h2>
|
||
<div class="grid3">
|
||
<a class="chapter-card" href="01-frontend.html">
|
||
<div class="ic"><i data-lucide="smartphone"></i></div>
|
||
<span class="no">01</span><b>前端架构</b>
|
||
<p>五端技术栈选型、100% 还原策略（令牌 / 像素基准 / 验收清单）、客户端断网弹性。</p>
|
||
</a>
|
||
<a class="chapter-card" href="02-backend.html">
|
||
<div class="ic"><i data-lucide="server"></i></div>
|
||
<span class="no">02</span><b>后端设计</b>
|
||
<p>Go 模块化单体、API 契约 v1（遵循设计蓝本）、激活码 / 试用 / 广告解锁关键流程。</p>
|
||
</a>
|
||
<a class="chapter-card" href="03-database.html">
|
||
<div class="ic"><i data-lucide="database"></i></div>
|
||
<span class="no">03</span><b>数据库</b>
|
||
<p>MySQL 8 全量 schema（蓝本移植 + 拓扑扩展）、Redis 键设计、备份与恢复策略。</p>
|
||
</a>
|
||
<a class="chapter-card" href="04-infra.html">
|
||
<div class="ic"><i data-lucide="network"></i></div>
|
||
<span class="no">04</span><b>机器与网络拓扑</b>
|
||
<p>三层弹性拓扑、节点生命周期状态机、一键/自动换节点换 IP、判封探针与调度。</p>
|
||
</a>
|
||
<a class="chapter-card" href="05-web-security.html">
|
||
<div class="ic"><i data-lucide="shield"></i></div>
|
||
<span class="no">05</span><b>Web 安全与灾备</b>
|
||
<p>CDN 前置与源站隐藏、域名池、备份体系、被封应对 Runbook、应急广播。</p>
|
||
</a>
|
||
<a class="chapter-card" href="06-security.html">
|
||
<div class="ic"><i data-lucide="lock"></i></div>
|
||
<span class="no">06</span><b>安全总纲</b>
|
||
<p>威胁模型总表、身份隔离红线、无日志口径、密码学口径、断网应对策略矩阵。</p>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="sources">
|
||
<h2><span class="num">§4</span>设计依据与文档关系</h2>
|
||
<div class="tbl-wrap"><table>
|
||
<thead><tr><th>来源</th><th>角色</th><th>本设计如何使用</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>design/CLAUDE.md</code> + <code>colors_and_type.css</code></td><td>设计铁律与令牌真相源</td><td>13 条铁律作为前端验收清单；套餐口径（§7）为所有界面/接口数字的单一来源。</td></tr>
|
||
<tr><td><code>design/ui_kits/*</code></td><td>像素验收标准</td><td>各端实现逐屏对照 React 原型（含新增 <code>tablet/</code> iPad kit），差异即缺陷。</td></tr>
|
||
<tr><td><code>design/server/ARCHITECTURE.md</code>（v0.1）</td><td>后端蓝本</td><td>API 契约、数据模型、激活码流程全部继承；数据面协议与 DB 选型按本设计修订。</td></tr>
|
||
<tr><td><code>plan/phase-0~3</code> + <code>plan/security-运营安全.md</code></td><td>实施路线与威胁模型</td><td>协议选型（REALITY/Hy2）、IP 分级（消耗品/精品池）、身份隔离红线全部纳入。</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
<div class="callout"><b>套餐口径（引用 design/CLAUDE.md §7，改数字先改那里）</b>
|
||
注册享 7 天免费试用（不限时长与节点）→ 之后免费版 1 个基础节点 + 每日 10 分钟 + 每日使用前看激励视频解锁；PRO ¥25/月（年付 ¥20/月），80+ 线路，5 台设备；团队版 ¥99/月 10 席位。收款走外部渠道（发卡店 / USDT TRC20 / Telegram / LINE / 邮箱），App 与官网内无支付表单。</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<nav class="pager">
|
||
<a class="next" href="01-frontend.html"><span>下一章</span><b>01 前端架构 →</b></a>
|
||
</nav>
|
||
|
||
<footer class="colophon">穿山甲 · Pangolin — 内部架构设计文档 · 遵循 design/ 设计系统 · 2026-06</footer>
|
||
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
<script src="assets/doc.js"></script>
|
||
</body>
|
||
</html>
|