first commit

2026-03-06 03:36:12 +08:00
commit 4e32b3193f
64 changed files with 42394 additions and 0 deletions
--- a/docs/archive/领导演示资料/frontend-pages/系统架构图.html
+++ b/docs/archive/领导演示资料/frontend-pages/系统架构图.html
@@ -0,0 +1,435 @@
+<!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>