上传文件至「/」

This commit is contained in:
qyyfw committed 2026-07-31 10:19:46 +08:00
1 parent 439716a947
commit 6fc4fdf9f1
1 file changed
+673
+673
View File
@@ -0,0 +1,673 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="default-src 'none'; style-src * 'unsafe-inline'; script-src * 'unsafe-inline'; img-src * data: blob:; font-src * data:; media-src * data: blob:; connect-src 'none'; form-action 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'" http-equiv="Content-Security-Policy"/>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>大型Web系统架构设计文档</title>
<!-- Tailwind CSS -->
<script src="https://image.uc.cn/s/uae/g/3n/mos-production/0915/3.4.17.js"></script>
<!-- Font Awesome -->
<script src="https://image.uc.cn/s/uae/g/3n/mos-production/fontawesome-free-7.1.0-web/js/all.min.js"></script>
<link href="https://image.uc.cn/s/uae/g/3n/mos-production/fontawesome-free-7.1.0-web/css/fontawesome.min.css" rel="stylesheet"/>
<!-- ECharts -->
<script src="https://image.uc.cn/s/uae/g/3n/mos-production/cdn-staticfile-net/echarts/5.4.3/echarts.min.js"></script>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Code Block Styling */
.code-block {
background-color: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 0.5rem;
font-family: 'Courier New', Courier, monospace;
overflow-x: auto;
position: relative;
}
.code-block::before {
content: attr(data-lang);
position: absolute;
top: 0;
right: 0;
background: #334155;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
border-bottom-left-radius: 0.5rem;
color: #94a3b8;
}
/* Active Nav Link */
.nav-link.active {
background-color: #e0e7ff;
color: #4338ca;
border-right: 3px solid #4338ca;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar Navigation -->
<aside class="w-64 bg-white border-r border-slate-200 flex-shrink-0 flex flex-col transition-all duration-300 transform hidden md:flex" id="sidebar">
<div class="p-6 border-b border-slate-100">
<h1 class="text-xl font-bold text-indigo-700 flex items-center gap-2">
<i class="fa-solid fa-layer-group"></i>
架构设计文档
</h1>
<p class="text-xs text-slate-500 mt-1">Version 1.0.0</p>
</div>
<nav class="flex-1 overflow-y-auto py-4">
<ul class="space-y-1">
<li>
<a class="nav-link flex items-center px-6 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-colors" href="#overview">
<i class="fa-solid fa-circle-info w-6"></i> 系统概述
</a>
</li>
<li>
<a class="nav-link flex items-center px-6 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-colors" href="#core-functions">
<i class="fa-solid fa-microchip w-6"></i> 核心功能设计
</a>
</li>
<li>
<a class="nav-link flex items-center px-6 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-colors" href="#hub-market">
<i class="fa-solid fa-store w-6"></i> Hub集市全流程
</a>
</li>
<li>
<a class="nav-link flex items-center px-6 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-colors" href="#standards">
<i class="fa-solid fa-ruler-combined w-6"></i> 平台标准规范
</a>
</li>
<li>
<a class="nav-link flex items-center px-6 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-colors" href="#open-source">
<i class="fa-brands fa-github w-6"></i> 开源项目集成
</a>
</li>
<li>
<a class="nav-link flex items-center px-6 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 transition-colors" href="#roadmap">
<i class="fa-solid fa-route w-6"></i> 实施路线图
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-slate-100">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">A</div>
<div>
<p class="text-sm font-medium text-slate-700">Architect Team</p>
<p class="text-xs text-slate-500">2026-07-31</p>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto relative scroll-smooth" id="main-content">
<!-- Mobile Header -->
<header class="md:hidden bg-white border-b border-slate-200 p-4 sticky top-0 z-50 flex justify-between items-center">
<span class="font-bold text-indigo-700">架构设计文档</span>
<button class="text-slate-600 focus:outline-none" id="mobile-menu-btn">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</header>
<div class="max-w-5xl mx-auto px-6 py-10 space-y-16">
<!-- 1. System Overview -->
<section class="scroll-mt-20" id="overview">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
<i class="fa-solid fa-circle-info text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">系统概述</h2>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8">
<p class="text-lg text-slate-700 leading-relaxed mb-6">
本方案旨在设计一款集成了当前市面主流AI助手优势的大型Web系统,满足三大核心目标:
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-slate-50 rounded-lg border border-slate-100">
<div class="text-indigo-600 mb-2"><i class="fa-solid fa-database"></i> 数据与进化</div>
<h3 class="font-bold text-slate-800 mb-2">核心目标 1</h3>
<p class="text-sm text-slate-600">解决上下文长文本存储与语义检索、用户数据隔离与认证、用户行为自进化。</p>
</div>
<div class="p-4 bg-slate-50 rounded-lg border border-slate-100">
<div class="text-indigo-600 mb-2"><i class="fa-solid fa-shop"></i> 生态构建</div>
<h3 class="font-bold text-slate-800 mb-2">核心目标 2</h3>
<p class="text-sm text-slate-600">构建支持技能/应用创作、发布审核、在线交易的Hub集市。</p>
</div>
<div class="p-4 bg-slate-50 rounded-lg border border-slate-100">
<div class="text-indigo-600 mb-2"><i class="fa-solid fa-compass-drafting"></i> 标准规范</div>
<h3 class="font-bold text-slate-800 mb-2">核心目标 3</h3>
<p class="text-sm text-slate-600">建立完整的平台规范与功能标准,支持开源集成与高效开发。</p>
</div>
</div>
</div>
</section>
<!-- 2. Core Functions -->
<section class="scroll-mt-20" id="core-functions">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
<i class="fa-solid fa-microchip text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">核心功能设计</h2>
</div>
<!-- Tabs Navigation -->
<div class="flex border-b border-slate-200 mb-6 overflow-x-auto">
<button class="tab-btn px-6 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 focus:outline-none" data-target="tab-context">
上下文存储
</button>
<button class="tab-btn px-6 py-3 text-sm font-medium text-slate-500 hover:text-indigo-600 border-b-2 border-transparent focus:outline-none" data-target="tab-user">
用户管理
</button>
<button class="tab-btn px-6 py-3 text-sm font-medium text-slate-500 hover:text-indigo-600 border-b-2 border-transparent focus:outline-none" data-target="tab-evolution">
自进化机制
</button>
</div>
<!-- Tab Content: Context -->
<div class="tab-content block animate-fade-in" id="tab-context">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8">
<h3 class="text-xl font-bold text-slate-800 mb-4">长文本处理层技术选型</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h4 class="font-semibold text-slate-700 mb-2"><i class="fa-solid fa-file-import mr-2"></i>文档加载与解析</h4>
<p class="text-sm text-slate-600 mb-4">使用 <strong>LlamaIndex</strong> 框架作为数据接入核心引擎,支持PDF、CSV、Notion等160+种数据源。对于复杂PDF,使用 <strong>LlamaParse</strong> 工具提取表格、公式。</p>
<h4 class="font-semibold text-slate-700 mb-2"><i class="fa-solid fa-scissors mr-2"></i>文本切分</h4>
<p class="text-sm text-slate-600 mb-4">采用递归字符分割器,按优先级 `["\n\n", "\n", "。", "!", "?", ";", ",", " ", ""]` 切割。推荐 <code class="bg-slate-100 px-1 rounded">chunk_size</code> 300-500字符,<code class="bg-slate-100 px-1 rounded">chunk_overlap</code> 50-200字符。</p>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2"><i class="fa-solid fa-database mr-2"></i>向量数据库与检索</h4>
<ul class="list-disc list-inside text-sm text-slate-600 space-y-2">
<li><strong>Embedding:</strong> 离线与在线查询必须使用同一模型,确保向量空间一致。</li>
<li><strong>存储:</strong> <strong>Milvus</strong> (大规模生产) 或 <strong>Chroma</strong> (开发测试)。</li>
<li><strong>高级检索:</strong> 结合向量检索与关键词检索 (BM25),使用 <strong>BGE-Reranker</strong> 交叉编码器进行二次打分。</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Tab Content: User -->
<div class="tab-content hidden animate-fade-in" id="tab-user">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8">
<h3 class="text-xl font-bold text-slate-800 mb-4">用户隔离层技术选型</h3>
<div class="mb-6">
<h4 class="font-semibold text-slate-700 mb-2"><i class="fa-solid fa-shield-halved mr-2"></i>认证体系</h4>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">OAuth 2.0</span>
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">JWT</span>
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">OIDC</span>
</div>
<p class="text-sm text-slate-600">采用行业标准授权框架,实现无状态认证。新项目推荐优先采用OIDC协议。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 border border-slate-200 rounded-lg">
<h5 class="font-bold text-slate-800">Keycloak</h5>
<p class="text-xs text-slate-500 mt-1">全功能IAM平台,支持SSO、SAML,适合企业级。</p>
</div>
<div class="p-4 border border-slate-200 rounded-lg">
<h5 class="font-bold text-slate-800">Clerk</h5>
<p class="text-xs text-slate-500 mt-1">专为现代前端设计,开箱即用,易于集成。</p>
</div>
<div class="p-4 border border-slate-200 rounded-lg">
<h5 class="font-bold text-slate-800">Supertokens</h5>
<p class="text-xs text-slate-500 mt-1">开源框架,强调数据自主可控。</p>
</div>
</div>
<div class="mt-6 p-4 bg-yellow-50 border border-yellow-100 rounded-lg">
<h4 class="font-semibold text-yellow-800 mb-1"><i class="fa-solid fa-building-shield mr-2"></i>多租户数据隔离</h4>
<p class="text-sm text-yellow-700">通用场景强制附加 <code class="bg-yellow-100 px-1 rounded">WHERE tenant_id = ?</code>;高合规要求提供独立数据库实例实现物理隔离。</p>
</div>
</div>
</div>
<!-- Tab Content: Evolution -->
<div class="tab-content hidden animate-fade-in" id="tab-evolution">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8">
<h3 class="text-xl font-bold text-slate-800 mb-4">自进化引擎功能设计</h3>
<div class="space-y-6">
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
<i class="fa-solid fa-book-open"></i>
</div>
<div>
<h4 class="font-bold text-slate-800">知识库动态更新</h4>
<p class="text-sm text-slate-600 mt-1">基于MD5哈希值的增量更新策略,仅当文档内容变更时才重建索引,节省90%以上计算开销。</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<div>
<h4 class="font-bold text-slate-800">Skills自适应优化</h4>
<p class="text-sm text-slate-600 mt-1">参考微软SkillOpt框架,通过"Rollout→Reflect→Edit→Gate"循环优化,候选技能需在验证集表现更优才被接受。</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
<i class="fa-solid fa-robot"></i>
</div>
<div>
<h4 class="font-bold text-slate-800">Agent行为进化</h4>
<p class="text-sm text-slate-600 mt-1">设计经验晋升路径 (LEARNINGS.md → AGENTS.md → SOUL.md),通过Hub集市引入社区插件包实现协同进化。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 3. Hub Marketplace -->
<section class="scroll-mt-20" id="hub-market">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
<i class="fa-solid fa-store text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">Hub集市全流程说明</h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Skill Market -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 lg:col-span-2">
<h3 class="text-lg font-bold text-slate-800 mb-4 border-b pb-2">技能市场全链路</h3>
<div class="relative pl-8 border-l-2 border-slate-200 space-y-8">
<!-- Step 1 -->
<div class="relative">
<div class="absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white"></div>
<h4 class="font-bold text-slate-800">1. 创作/导入</h4>
<p class="text-sm text-slate-600 mt-1">输入GitHub仓库URL,利用GitHub Actions自动构建Docker镜像并推送到托管平台,实现一键部署。</p>
</div>
<!-- Step 2 -->
<div class="relative">
<div class="absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white"></div>
<h4 class="font-bold text-slate-800">2. 发布审核 (五重保障)</h4>
<ul class="text-sm text-slate-600 mt-1 list-disc list-inside space-y-1">
<li><strong>代码扫描:</strong> 静态分析检测硬编码凭证、恶意命令。</li>
<li><strong>语义分析:</strong> LLM意图识别,判断功能一致性。</li>
<li><strong>行为分析:</strong> 沙箱环境动态运行,检测危险行为。</li>
<li><strong>文件全扫描:</strong> 全面文件检查。</li>
<li><strong>人工复核:</strong> 抽样检查后上架。</li>
</ul>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white"></div>
<h4 class="font-bold text-slate-800">3. 版本管理</h4>
<p class="text-sm text-slate-600 mt-1">Git LFS追踪模型权重,生产环境锁定commit哈希。支持Delta Lake实现数据集时间旅行与回滚。</p>
</div>
</div>
</div>
<!-- Transaction System -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<h3 class="text-lg font-bold text-slate-800 mb-4 border-b pb-2">交易与计费</h3>
<div class="space-y-4">
<div class="p-3 bg-slate-50 rounded border border-slate-100">
<h4 class="font-semibold text-sm text-slate-700">订阅计费模型</h4>
<p class="text-xs text-slate-500 mt-1">基础订阅 + Token溢出计费。支持Prorate差价计算。</p>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-600">免费版</span>
<span class="font-bold text-slate-800">10万 Token/月</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-600">基础版</span>
<span class="font-bold text-indigo-600">¥29/月 (100万)</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-600">专业版</span>
<span class="font-bold text-indigo-600">¥99/月 (500万)</span>
</div>
</div>
<div class="pt-4 border-t border-slate-100">
<h4 class="font-semibold text-sm text-slate-700 mb-2">支付集成</h4>
<div class="flex gap-2">
<span class="px-2 py-1 bg-slate-100 text-xs text-slate-600 rounded">Stripe (国际)</span>
<span class="px-2 py-1 bg-slate-100 text-xs text-slate-600 rounded">支付宝/微信</span>
</div>
</div>
</div>
</div>
</div>
<!-- API Gateway -->
<div class="mt-6 bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<h3 class="text-lg font-bold text-slate-800 mb-4"><i class="fa-solid fa-network-wired mr-2"></i>API网关与实时计量</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm text-slate-600">
<div>
<h4 class="font-bold text-slate-800 mb-2">统一调用</h4>
<p>兼容OpenAI规范,虚拟Key映射真实厂商Key,实现独立配额和模型范围控制。</p>
</div>
<div>
<h4 class="font-bold text-slate-800 mb-2">认证授权</h4>
<p>验证JWT签名及tenant_id。高安全服务间通信采用mTLS双向认证。</p>
</div>
<div>
<h4 class="font-bold text-slate-800 mb-2">限流与计量</h4>
<p>Redis+Lua实现分布式令牌桶。LSTM预测流量波形动态调整参数。异步处理账单生成。</p>
</div>
</div>
</div>
</section>
<!-- 4. Platform Standards -->
<section class="scroll-mt-20" id="standards">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
<i class="fa-solid fa-ruler-combined text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">平台标准规范</h2>
</div>
<div class="space-y-6">
<!-- API Format -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<h3 class="text-lg font-bold text-slate-800 mb-4">API格式统一标准</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold text-slate-700 mb-2">契约先行 (OpenAPI 3.0/3.1)</h4>
<p class="text-sm text-slate-600 mb-2">先定义API规范再进行开发,支持生成交互式文档、Mock服务和类型安全的服务端骨架。</p>
</div>
<div>
<h4 class="font-semibold text-slate-700 mb-2">RESTful &amp; GraphQL</h4>
<p class="text-sm text-slate-600 mb-2">资源导向URI,精准使用HTTP方法。GraphQL使用DataLoader解决N+1查询问题。</p>
</div>
</div>
<div class="mt-4">
<h4 class="font-semibold text-slate-700 mb-2">RESTful 示例</h4>
<div class="code-block text-xs" data-lang="HTTP">
GET /users/{id} (获取用户)
POST /skills (创建技能)
PUT /agents/{id} (更新Agent)
Idempotency-Key: <unique_key>
</unique_key></div>
</div>
</div>
<!-- Security -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<h3 class="text-lg font-bold text-slate-800 mb-4">安全认证规范</h3>
<div class="flex flex-wrap gap-4 mb-4">
<div class="flex items-center gap-2 px-3 py-2 bg-slate-50 rounded border border-slate-200">
<i class="fa-solid fa-user-shield text-slate-500"></i>
<span class="text-sm font-medium">OIDC (首选)</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 bg-slate-50 rounded border border-slate-200">
<i class="fa-solid fa-building text-slate-500"></i>
<span class="text-sm font-medium">SAML (传统企业)</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 bg-slate-50 rounded border border-slate-200">
<i class="fa-solid fa-lock text-slate-500"></i>
<span class="text-sm font-medium">零信任架构</span>
</div>
</div>
<p class="text-sm text-slate-600">内容安全:在模型生成Token流的同时进行动态研判,结合黑白名单、规则引擎与大模型语义理解进行交叉验证。</p>
</div>
<!-- Extensions -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<h3 class="text-lg font-bold text-slate-800 mb-4">扩展指南与工具链</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 border border-slate-200 rounded-lg hover:shadow-md transition-shadow">
<h4 class="font-bold text-slate-800">Trea (字节)</h4>
<p class="text-xs text-slate-500 mt-1">AI原生IDE,自然语言驱动开发,Figma转代码。</p>
</div>
<div class="p-4 border border-slate-200 rounded-lg hover:shadow-md transition-shadow">
<h4 class="font-bold text-slate-800">Qoder (阿里)</h4>
<p class="text-xs text-slate-500 mt-1">专家团协同开发,Leader Agent分配任务。</p>
</div>
<div class="p-4 border border-slate-200 rounded-lg hover:shadow-md transition-shadow">
<h4 class="font-bold text-slate-800">Workbuddy (腾讯)</h4>
<p class="text-xs text-slate-500 mt-1">全场景办公工作台,Ask/Craft/Plan模式。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 5. Open Source Integration -->
<section class="scroll-mt-20" id="open-source">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
<i class="fa-brands fa-github text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">开源项目集成清单</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-cubes"></i></div>
<h4 class="font-bold text-slate-800">核心框架</h4>
<p class="text-sm text-slate-600 mt-1">LlamaIndex, LangChain</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-server"></i></div>
<h4 class="font-bold text-slate-800">向量数据库</h4>
<p class="text-sm text-slate-600 mt-1">Milvus, Weaviate</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-id-card"></i></div>
<h4 class="font-bold text-slate-800">身份认证</h4>
<p class="text-sm text-slate-600 mt-1">Keycloak, Clerk</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-file-invoice-dollar"></i></div>
<h4 class="font-bold text-slate-800">计费引擎</h4>
<p class="text-sm text-slate-600 mt-1">Kill Bill</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-dharmachakra"></i></div>
<h4 class="font-bold text-slate-800">API网关</h4>
<p class="text-sm text-slate-600 mt-1">Apache APISIX, Kong</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-envelope-open-text"></i></div>
<h4 class="font-bold text-slate-800">消息队列</h4>
<p class="text-sm text-slate-600 mt-1">Kafka, RabbitMQ</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-docker"></i></div>
<h4 class="font-bold text-slate-800">容器编排</h4>
<p class="text-sm text-slate-600 mt-1">Docker, Kubernetes</p>
</div>
<!-- Card -->
<div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
<div class="text-indigo-500 mb-2"><i class="fa-solid fa-code"></i></div>
<h4 class="font-bold text-slate-800">开发工具</h4>
<p class="text-sm text-slate-600 mt-1">Trea, Qoder, Workbuddy</p>
</div>
</div>
</section>
<!-- 6. Implementation Roadmap -->
<section class="scroll-mt-20" id="roadmap">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
<i class="fa-solid fa-route text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">实施路线图</h2>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<p class="text-sm text-slate-600 mb-4">基于模块交互图的系统流转逻辑可视化。</p>
<div id="roadmapChart" style="width: 100%; height: 500px;"></div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-slate-200 pt-8 pb-12 text-center text-sm text-slate-500">
<p>© 2026 大型Web系统架构组. All rights reserved.</p>
<p class="mt-2">Generated for Development Team Delivery</p>
</footer>
</div>
</main>
</div>
<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- 1. Tab Switching Logic ---
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active classes
tabBtns.forEach(b => {
b.classList.remove('text-indigo-600', 'border-indigo-600');
b.classList.add('text-slate-500', 'border-transparent');
});
tabContents.forEach(c => c.classList.add('hidden'));
// Add active class to clicked button
btn.classList.remove('text-slate-500', 'border-transparent');
btn.classList.add('text-indigo-600', 'border-indigo-600');
// Show target content
const targetId = btn.getAttribute('data-target');
document.getElementById(targetId).classList.remove('hidden');
});
});
// --- 2. Sidebar Navigation Active State ---
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
const observerOptions = {
root: document.getElementById('main-content'),
threshold: 0.2
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.remove('active', 'bg-indigo-50', 'text-indigo-600');
link.classList.add('text-slate-600');
if (link.getAttribute('href') === `#${id}`) {
link.classList.add('active');
link.classList.remove('text-slate-600');
}
});
}
});
}, observerOptions);
sections.forEach(section => observer.observe(section));
// --- 3. Mobile Menu Toggle ---
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const sidebar = document.getElementById('sidebar');
mobileMenuBtn.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
sidebar.classList.toggle('absolute');
sidebar.classList.toggle('z-50');
sidebar.classList.toggle('h-full');
sidebar.classList.toggle('shadow-xl');
});
// --- 4. ECharts Roadmap Visualization ---
const chartDom = document.getElementById('roadmapChart');
const myChart = echarts.init(chartDom);
const graphData = {
nodes: [
{ name: '用户请求', category: 0, symbolSize: 50 },
{ name: 'API网关', category: 1, symbolSize: 60 },
{ name: '认证服务', category: 2, symbolSize: 40 },
{ name: '限流服务', category: 2, symbolSize: 40 },
{ name: '计费中间件', category: 2, symbolSize: 40 },
{ name: '核心系统', category: 1, symbolSize: 60 },
{ name: '长文本处理层', category: 3, symbolSize: 45 },
{ name: '自进化引擎', category: 3, symbolSize: 45 },
{ name: 'Hub集市', category: 1, symbolSize: 50 },
{ name: '技能仓库', category: 3, symbolSize: 40 },
{ name: '交易系统', category: 1, symbolSize: 50 },
{ name: '支付网关', category: 2, symbolSize: 40 },
{ name: '计费引擎', category: 2, symbolSize: 40 }
],
links: [
{ source: '用户请求', target: 'API网关' },
{ source: 'API网关', target: '认证服务' },
{ source: 'API网关', target: '限流服务' },
{ source: 'API网关', target: '计费中间件' },
{ source: 'API网关', target: '核心系统' },
{ source: '核心系统', target: '长文本处理层' },
{ source: '核心系统', target: '自进化引擎' },
{ source: 'Hub集市', target: '技能仓库' },
{ source: 'Hub集市', target: '交易系统' },
{ source: '交易系统', target: '支付网关' },
{ source: '交易系统', target: '计费引擎' },
{ source: '计费中间件', target: '计费引擎' },
{ source: '核心系统', target: 'Hub集市' } // Interaction
],
categories: [
{ name: '外部' },
{ name: '核心组件' },
{ name: '支撑服务' },
{ name: '功能模块' }
]
};
const option = {
title: {
text: '系统模块交互流向图',
top: 10,
left: 10
},
tooltip: {},
legend: [{
data: graphData.categories.map(function (a) {
return a.name;
}),
bottom: 10
}],
series: [
{
name: '系统架构',
type: 'graph',
layout: 'force',
data: graphData.nodes,
links: graphData.links,
categories: graphData.categories,
roam: true,
label: {
show: true,
position: 'right',
formatter: '{b}'
},
force: {
repulsion: 400,
edgeLength: 100
},
lineStyle: {
color: 'source',
curveness: 0.3
}
}
]
};
myChart.setOption(option);
// Resize chart on window resize
window.addEventListener('resize', () => {
myChart.resize();
});
});
</script>
</body>
</html>