Files
AiPaas/system_architecture_design.html
T
2026-07-31 10:19:46 +08:00

673 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>