435 lines
17 KiB
HTML
435 lines
17 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>sgClaw 架构研讨看板 (自适应排版修复版)</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--bg-color: #f4f7f9;
|
||
--blue-light: #eff6ff; --blue-border: #93c5fd; --blue-dark: #1e3a8a;
|
||
--red-light: #fef2f2; --red-border: #fca5a5; --red-dark: #7f1d1d;
|
||
--green-light: #f0fdf4; --green-border: #86efac; --green-dark: #14532d;
|
||
--conn-color: #94a3b8;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
background-color: var(--bg-color);
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
color: #334155;
|
||
line-height: 1.6;
|
||
overflow-x: hidden; /* 防止全局横向滚动 */
|
||
}
|
||
|
||
/* ================= 1. 顶部导航 ================= */
|
||
.header-nav {
|
||
position: sticky; top: 0; z-index: 1000;
|
||
height: 64px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||
display: flex; justify-content: space-between; align-items: center; padding: 0 40px;
|
||
}
|
||
.header-titles { display: flex; align-items: baseline; gap: 16px; }
|
||
.header-titles h1 { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0; }
|
||
.header-titles p { font-size: 0.9rem; color: #64748b; margin: 0; display: none; }
|
||
|
||
.jump-links { display: flex; gap: 10px; }
|
||
.jump-links a {
|
||
text-decoration: none; color: #475569; font-weight: 600; font-size: 0.85rem;
|
||
padding: 6px 12px; border-radius: 6px; background: #f1f5f9; transition: all 0.2s;
|
||
}
|
||
.jump-links a:hover { background: #e2e8f0; color: #0f172a; }
|
||
|
||
@media (min-width: 768px) {
|
||
.header-titles h1 { font-size: 1.4rem; }
|
||
.header-titles p { display: block; }
|
||
}
|
||
|
||
/* ================= 2. 首屏高管总图 (弹性高度) ================= */
|
||
.hero-screen {
|
||
/* 使用 min-height 而不是 height，避免内容过多时被裁剪 */
|
||
min-height: calc(100vh - 64px);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
padding: 40px 20px 80px; position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.hero-header { text-align: center; margin-bottom: 40px; }
|
||
.hero-header h2 { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
|
||
.hero-header p { font-size: 1rem; color: #64748b; max-width: 800px; margin: 0 auto; }
|
||
|
||
/* 核心三模块的 Flex 容器 */
|
||
.architecture-container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: stretch; /* 让三个卡片等高 */
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 模块卡片 */
|
||
.module-card {
|
||
flex: 1; /* 平分空间 */
|
||
border-radius: 20px; padding: 25px 20px;
|
||
display: flex; flex-direction: column;
|
||
border: 2px solid; background: white;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
min-width: 0; /* 防止内容撑破 flex 布局 */
|
||
}
|
||
.module-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
|
||
|
||
.mod-ui { border-color: var(--blue-border); }
|
||
.mod-ai { border-color: var(--red-border); }
|
||
.mod-biz { border-color: var(--green-border); }
|
||
|
||
.module-header { text-align: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px dashed rgba(0,0,0,0.08); }
|
||
.module-title-text { font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; }
|
||
.mod-ui .module-title-text { color: var(--blue-dark); }
|
||
.mod-ai .module-title-text { color: var(--red-dark); }
|
||
.mod-biz .module-title-text { color: var(--green-dark); }
|
||
|
||
.meta-tags { display: flex; flex-direction: column; gap: 8px; align-items: center; }
|
||
.meta-tag { padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; text-align: center; width: 100%; }
|
||
.tag-who { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
|
||
.tag-why { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; font-weight: 500;}
|
||
|
||
/* 内部组件列表 */
|
||
.comp-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
|
||
.comp-item { background: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; }
|
||
.comp-name { font-weight: 800; color: #1e293b; margin-bottom: 4px; font-size: 0.95rem; }
|
||
.comp-desc { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
|
||
|
||
/* ================= 安全的流式连接桥梁 ================= */
|
||
.connection-bridge {
|
||
flex: 0 0 70px; /* 固定宽度，不拉伸不缩小 */
|
||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.bridge-line {
|
||
position: absolute;
|
||
width: 100%; height: 4px; z-index: 1;
|
||
background: repeating-linear-gradient(90deg, var(--conn-color) 0, var(--conn-color) 8px, transparent 8px, transparent 16px);
|
||
}
|
||
|
||
.bridge-label {
|
||
position: relative; z-index: 2;
|
||
background: white; border: 2px solid var(--conn-color);
|
||
padding: 8px 12px; border-radius: 8px;
|
||
text-align: center; width: 140px; /* 固定标签宽度以保证文字排版 */
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||
}
|
||
.bridge-label.risk { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }
|
||
|
||
.bridge-main-text { font-size: 0.85rem; font-weight: 800; color: #1e293b; display: block; }
|
||
.risk .bridge-main-text { color: #b91c1c; }
|
||
.bridge-sub-text { font-size: 0.7rem; font-weight: normal; margin-top: 4px; color: #64748b; display: block; }
|
||
.risk .bridge-sub-text { color: #ef4444; }
|
||
|
||
/* 向下指示器 */
|
||
.scroll-indicator {
|
||
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
|
||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||
color: #94a3b8; font-size: 0.8rem; font-weight: 600;
|
||
}
|
||
.scroll-indicator svg { width: 20px; height: 20px; stroke: #94a3b8; animation: bounce 2s infinite; }
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||
40% { transform: translateY(-8px); }
|
||
60% { transform: translateY(-4px); }
|
||
}
|
||
|
||
/* ================= 3. 下方技术与管理视图 ================= */
|
||
.detail-sections {
|
||
max-width: 1400px; margin: 0 auto; padding: 20px 20px 80px;
|
||
display: flex; flex-direction: column; gap: 40px;
|
||
}
|
||
|
||
.section-block {
|
||
background: white; border-radius: 16px; padding: 40px 30px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||
}
|
||
|
||
.section-title { text-align: center; font-size: 1.5rem; color: #0f172a; margin-bottom: 8px; font-weight: 800; }
|
||
.section-subtitle { text-align: center; color: #64748b; margin-bottom: 30px; font-size: 0.95rem; }
|
||
|
||
/* 图表防溢出包装器 */
|
||
.mermaid-wrapper {
|
||
width: 100%;
|
||
overflow-x: auto; /* 核心：太宽时允许水平滚动，而不是撑破外框 */
|
||
padding: 10px 0;
|
||
display: flex; justify-content: center;
|
||
}
|
||
|
||
.mermaid {
|
||
min-width: 800px; /* 保证图形不至于被挤压得无法辨认 */
|
||
}
|
||
|
||
.note-box {
|
||
margin: 20px auto 0; padding: 16px 20px; background: #fff7ed; border-left: 4px solid #f97316;
|
||
border-radius: 8px; font-size: 0.9rem; color: #334155; max-width: 1000px; line-height: 1.6;
|
||
}
|
||
|
||
/* ================= 响应式布局 (适配笔记本与平板) ================= */
|
||
@media (max-width: 1024px) {
|
||
.architecture-container {
|
||
flex-direction: column; /* 小屏改为纵向排列 */
|
||
align-items: center;
|
||
}
|
||
.module-card { width: 100%; max-width: 600px; }
|
||
|
||
.connection-bridge {
|
||
flex: 0 0 80px; width: 100%;
|
||
}
|
||
.bridge-line {
|
||
width: 4px; height: 100%;
|
||
background: repeating-linear-gradient(180deg, var(--conn-color) 0, var(--conn-color) 8px, transparent 8px, transparent 16px);
|
||
}
|
||
.bridge-label { width: auto; max-width: 200px; }
|
||
.scroll-indicator { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 顶部导航悬浮栏 -->
|
||
<div class="header-nav">
|
||
<div class="header-titles">
|
||
<h1>sgClaw 架构研讨看板</h1>
|
||
<p>总图定战略与边界 · 分图定技术与接口</p>
|
||
</div>
|
||
<div class="jump-links">
|
||
<a href="#section-exec">宏观总图</a>
|
||
<a href="#section-tech">技术流向</a>
|
||
<a href="#section-time">里程碑</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= 绝佳首屏体验：高管业务总图 ================= -->
|
||
<section class="hero-screen" id="section-exec">
|
||
<div class="hero-header">
|
||
<h2>第一部分：业务全景与宏观分工</h2>
|
||
<p>明确“三大核心阵地”的作用、责任人与对接瓶颈 (Left to Right)</p>
|
||
</div>
|
||
|
||
<div class="architecture-container">
|
||
|
||
<!-- 模块 1：浏览器端 -->
|
||
<div class="module-card mod-ui">
|
||
<div class="module-header">
|
||
<div class="module-title-text">🌐 1. 浏览器交互宿主</div>
|
||
<div class="meta-tags">
|
||
<div class="meta-tag tag-who">👨💻 责任人：P4 (前端) + P2 (C++)</div>
|
||
<div class="meta-tag tag-why">提供界面输入与 Agent 执行环境</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-list">
|
||
<div class="comp-item"><div class="comp-name">UI 面板层 (P4)</div><div class="comp-desc">Side Panel 助手界面 + Skill 管理后台</div></div>
|
||
<div class="comp-item"><div class="comp-name">进程守护内核 (P2)</div><div class="comp-desc">启动、管理与保活 sgClaw 独立子进程</div></div>
|
||
<div class="comp-item"><div class="comp-name">底层能力复用 (现有)</div><div class="comp-desc">复用 70+ 核心 CDP 浏览器操纵指令</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 桥梁 1 -->
|
||
<div class="connection-bridge">
|
||
<div class="bridge-line"></div>
|
||
<div class="bridge-label risk">
|
||
<span class="bridge-main-text">⚡风险点</span>
|
||
<span class="bridge-sub-text">STDIO 跨进程通信流<br>(P2 ↔ P1a)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块 2：AI 引擎 -->
|
||
<div class="module-card mod-ai">
|
||
<div class="module-header">
|
||
<div class="module-title-text">⚙️ 2. sgClaw AI 引擎</div>
|
||
<div class="meta-tags">
|
||
<div class="meta-tag tag-who">👨💻 责任人：P1a (协议) + P1b (Rust AI)</div>
|
||
<div class="meta-tag tag-why">系统级智能中枢，负责推理与逻辑</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-list">
|
||
<div class="comp-item"><div class="comp-name">协议枢纽层 (P1a)</div><div class="comp-desc">Pipe 双向流处理、白名单指令拦截</div></div>
|
||
<div class="comp-item"><div class="comp-name">推理与记忆引擎 (P1b)</div><div class="comp-desc">ReAct 核心调度循环 + L0/1/2 记忆系统</div></div>
|
||
<div class="comp-item"><div class="comp-name">沙箱加载器 (P1b)</div><div class="comp-desc">验证签名并隔离运行外部业务 Skill</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 桥梁 2 -->
|
||
<div class="connection-bridge">
|
||
<div class="bridge-line"></div>
|
||
<div class="bridge-label">
|
||
<span class="bridge-main-text">🔄 逻辑常识支撑</span>
|
||
<span class="bridge-sub-text">提示词与技能下发<br>(P1b ↔ P3)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块 3：业务库 -->
|
||
<div class="module-card mod-biz">
|
||
<div class="module-header">
|
||
<div class="module-title-text">📦 3. 业务技能与基座</div>
|
||
<div class="meta-tags">
|
||
<div class="meta-tag tag-who">👨💻 责任人：P3 (业务) + 算法基座</div>
|
||
<div class="meta-tag tag-why">提供底层算力与具体场景业务规则</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-list">
|
||
<div class="comp-item"><div class="comp-name">黄金基准样本 (P3)</div><div class="comp-desc">人工手写测试的 15 个高可用业务场景</div></div>
|
||
<div class="comp-item"><div class="comp-name">泛化扩容技能库 (P3)</div><div class="comp-desc">通过大模型批量生成的长尾应用技能</div></div>
|
||
<div class="comp-item"><div class="comp-name">大模型底座 (内网)</div><div class="comp-desc">Minimax-M2.5/Deepseek v3.2 通用流式推理</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="scroll-indicator">
|
||
<span>向下滚动查看技术架构</span>
|
||
<svg fill="none" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 下方滚动区域：技术分图与时间线 ================= -->
|
||
<div class="detail-sections">
|
||
|
||
<!-- 技术流向图 -->
|
||
<div id="section-tech" class="section-block">
|
||
<h2 class="section-title">第二部分：技术研发架构与数据流向</h2>
|
||
<p class="section-subtitle">面向研发团队：明确模块边界、API 交互方式及底层数据流传路径</p>
|
||
|
||
<div class="mermaid-wrapper">
|
||
<div class="mermaid">
|
||
graph LR
|
||
User(["👤 用户操作"])
|
||
|
||
subgraph BROWSER["🌐 浏览器侧 (P4+P2)"]
|
||
direction TB
|
||
SidePanel("UI: AI 面板 (Vue)")
|
||
ProcessHost("Host: 进程守护")
|
||
PipeListener("IPC: Pipe 监听")
|
||
Cmd["Action: CDP 操纵指令"]
|
||
|
||
SidePanel <-->|"Window IPC"| ProcessHost
|
||
ProcessHost --> PipeListener
|
||
PipeListener -.->|"复用"| Cmd
|
||
end
|
||
|
||
subgraph SGCLAW["⚙️ sgClaw AI 引擎进程 (P1a+P1b)"]
|
||
direction TB
|
||
PipeRW("Core: Pipe 双向读写")
|
||
BrowserTool("Tool: Action 封装")
|
||
Runtime("Brain: ReAct 核心循环")
|
||
Memory[("Mem: 记忆层 (SQLite)")]
|
||
SkillLoader("Sandbox: 沙箱加载验签")
|
||
|
||
PipeRW <--> BrowserTool
|
||
BrowserTool <--> Runtime
|
||
Runtime --> Memory
|
||
Runtime --> SkillLoader
|
||
end
|
||
|
||
subgraph EXT["☁️ 远端服务与库 (P3)"]
|
||
direction TB
|
||
LLM1("LLM: Claude/GPT API")
|
||
SkillDB[/"Skill: 黄金/泛化技能库"/]
|
||
end
|
||
|
||
%% 数据流连线
|
||
User --> SidePanel
|
||
PipeListener == "⚡ 高风险卡点 (STDIO 双工流)" === PipeRW
|
||
Runtime <-->|"提示词组装"| LLM1
|
||
SkillLoader -->|"签名挂载调用"| SkillDB
|
||
BrowserTool -.->|"执行结果回调"| PipeListener
|
||
|
||
%% 颜色样式
|
||
classDef p1 fill:#fff7ed,stroke:#ea580c,stroke-width:1px
|
||
classDef p2 fill:#eff6ff,stroke:#2563eb,stroke-width:1px
|
||
classDef p3 fill:#f0fdf4,stroke:#16a34a,stroke-width:1px
|
||
|
||
class PipeRW,BrowserTool,Runtime,Memory,SkillLoader p1
|
||
class SidePanel,ProcessHost,PipeListener,Cmd p2
|
||
class LLM1,SkillDB p3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 里程碑与卡点 -->
|
||
<div id="section-time" class="section-block">
|
||
<h2 class="section-title">第三部分：关键路径与里程碑依赖</h2>
|
||
<p class="section-subtitle">面向 PM/TL：把握各干系人的研发依赖与联调卡点，控制排期风险</p>
|
||
|
||
<div class="mermaid-wrapper">
|
||
<div class="mermaid">
|
||
graph TB
|
||
subgraph W1["📌 W1 独立开发期 (Day 1-3)"]
|
||
direction LR
|
||
P1a["P1a 协议层构建"]
|
||
P2["P2 内核扩展开发"]
|
||
P1b["P1b ReAct框架"]
|
||
P3["P3 核心用例设计"]
|
||
P4["P4 面板UI开发"]
|
||
P1a ~~~ P2 ~~~ P1b ~~~ P3 ~~~ P4
|
||
end
|
||
|
||
CRIT{{"⚠️ W1 末期关键联调 (Day 4-5)\n=====================\nP1a 🤝 P2 联合打通 STDIO Pipe\n(如果阻塞，整个后续测试将无法进行)"}}
|
||
|
||
subgraph W2["🚀 W2 集成与验收期 (Day 6-10)"]
|
||
direction TB
|
||
INT1["P1b 🤝 P3\n沙箱能力与用例装载测试"]
|
||
INT2["P1a 🤝 P1b\n引擎接入浏览器动作测试"]
|
||
INT3["P2 🤝 P4\n前后端 IPC 接口贯通测试"]
|
||
TEST["🎯 全链路 E2E 测试\n跑通首批 6 个核心业务场景"]
|
||
SHIP["📦 P4 打包发版"]
|
||
|
||
INT1 --> TEST
|
||
INT2 --> TEST
|
||
INT3 --> TEST
|
||
TEST --> SHIP
|
||
end
|
||
|
||
W1 --> CRIT
|
||
CRIT -->|打通后| W2
|
||
|
||
classDef crit fill:#fef2f2,stroke:#ef4444,stroke-width:2px,color:#991b1b
|
||
class CRIT crit
|
||
</div>
|
||
</div>
|
||
<div class="note-box">
|
||
<strong>🚨 风险管控重点说明：</strong><br>
|
||
Day 4-5 的 <strong>P1a (协议层) 与 P2 (内核层) 的 Pipe 通信</strong>是整个项目的物理连通基石。如果这个桥梁不通，P1b (AI 引擎)、P3 (业务技能) 和 P4 (UI 面板) 将沦为孤岛，无法进行端到端全链路验证。建议在此节点安排 <strong>Daily Sync 重点跟进</strong>，必要时准备 HTTP 兜底预案。
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'base',
|
||
securityLevel: 'loose',
|
||
themeVariables: {
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
|
||
fontSize: '14px',
|
||
primaryColor: '#ffffff',
|
||
primaryTextColor: '#334155',
|
||
primaryBorderColor: '#cbd5e1',
|
||
lineColor: '#64748b',
|
||
secondaryColor: '#f8fafc',
|
||
tertiaryColor: '#ffffff'
|
||
},
|
||
flowchart: {
|
||
useMaxWidth: false, /* 配合外部 div 的 overflow-x 实现可滑动，而不被强行压扁 */
|
||
htmlLabels: true,
|
||
curve: 'basis',
|
||
nodeSpacing: 40,
|
||
rankSpacing: 40
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |