AIRegulation-DocAnalysis/.superpowers/brainstorm/1946-1779287418/content/design-overview.html

<h2>设计概览：法规对话模块优化路线</h2>
<p class="subtitle">Section 1 of 4 — 架构演进全图</p>

<style>
.arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.arch-box { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 16px; }
.arch-box h3 { margin: 0 0 12px; font-size: 15px; }
.pipe { display: flex; flex-direction: column; gap: 6px; }
.node { border-radius: 6px; padding: 8px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.node-ok { background: rgba(134,239,172,0.15); border: 1px solid rgba(134,239,172,0.4); }
.node-mock { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.4); }
.node-new { background: rgba(125,211,252,0.15); border: 1px solid rgba(125,211,252,0.5); }
.node-upgrade { background: rgba(253,224,71,0.15); border: 1px solid rgba(253,224,71,0.4); }
.arrow { text-align: center; font-size: 18px; opacity: 0.5; line-height: 1; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.badge-mock { background: rgba(248,113,113,0.3); color: #fca5a5; }
.badge-ok { background: rgba(134,239,172,0.3); color: #86efac; }
.badge-p1 { background: rgba(125,211,252,0.3); color: #7dd3fc; }
.badge-p2 { background: rgba(134,239,172,0.3); color: #86efac; }
.badge-p3 { background: rgba(253,224,71,0.3); color: #fde047; }
.badge-p4 { background: rgba(249,168,212,0.3); color: #f9a8d4; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.leg { display: flex; align-items: center; gap: 6px; }
.leg-dot { width: 10px; height: 10px; border-radius: 3px; }
</style>

<div class="arch-grid">
  <!-- LEFT: Current State -->
  <div class="arch-box">
    <h3>📍 当前状态</h3>
    <div class="pipe">
      <div class="node node-ok">用户提问 (RagChatPage / ChatPanel)</div>
      <div class="arrow">↓</div>

      <div class="node node-ok">
        <span>POST /agent/chat/stream</span>
        <span class="badge badge-ok">真实</span>
      </div>
      <div class="arrow">↓ ↗</div>

      <div class="node node-mock">
        <span>POST /rag/chat &amp; /compliance/chat/{id}</span>
        <span class="badge badge-mock">Mock 数据</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-ok">
        <span>Dense 向量检索（COSINE）</span>
        <span class="badge badge-ok">可用</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-ok">
        <span>LLM 生成（输出含 [1][2] 引用）</span>
        <span class="badge badge-ok">可用</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-mock">
        <span>前端显示来源面板，[1][2] 未解析</span>
        <span class="badge badge-mock">未联动</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-mock">
        <span>会话存内存（30min过期，max 100）</span>
        <span class="badge badge-mock">易丢失</span>
      </div>
    </div>
  </div>

  <!-- RIGHT: Target State -->
  <div class="arch-box">
    <h3>🎯 目标状态（4个阶段后）</h3>
    <div class="pipe">
      <div class="node node-ok">用户提问 + 法规类型/版本筛选器 (P3)</div>
      <div class="arrow">↓</div>

      <div class="node node-new">
        <span>/compliance/chat → 真实 AgentService + Segment 上下文</span>
        <span class="badge badge-p1">Phase 1</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-upgrade">
        <span>Hybrid 检索：Dense + Sparse BM25（Milvus）→ RRF 融合</span>
        <span class="badge badge-p2">Phase 2</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-upgrade">
        <span>Cross-Encoder Reranker（Top-K 精排）</span>
        <span class="badge badge-p2">Phase 2</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-ok">LLM 生成（含 [1][2] 引用编号）</div>
      <div class="arrow">↓</div>

      <div class="node node-new">
        <span>前端内联引用解析：[1] → 高亮原文跳转</span>
        <span class="badge badge-p3">Phase 3</span>
      </div>
      <div class="arrow">↓</div>

      <div class="node node-new">
        <span>会话持久化（PostgreSQL）+ 上下文压缩</span>
        <span class="badge badge-p4">Phase 4</span>
      </div>
    </div>
  </div>
</div>

<div class="legend">
  <div class="leg"><div class="leg-dot" style="background:#86efac"></div>现有功能正常</div>
  <div class="leg"><div class="leg-dot" style="background:#f87171"></div>当前有问题</div>
  <div class="leg"><div class="leg-dot" style="background:#7dd3fc"></div>Phase 1 新增/修复</div>
  <div class="leg"><div class="leg-dot" style="background:#86efac;opacity:0.6"></div>Phase 2 升级</div>
  <div class="leg"><div class="leg-dot" style="background:#fde047"></div>Phase 3 新增</div>
  <div class="leg"><div class="leg-dot" style="background:#f9a8d4"></div>Phase 4 新增</div>
</div>

<div style="margin-top:20px;padding:14px;background:rgba(255,255,255,0.05);border-radius:8px;font-size:13px;">
  <strong>关键发现：</strong> RagChatPage 已通过 <code>/agent/chat/stream</code> 使用真实服务。
  最需要修复的是 <strong>CompliancePage 的 ChatPanel</strong>（合规对话面板仍是 Mock），以及前端快速问题硬编码问题。
  Phase 2 的 BM25 稀疏向量需要重建 Milvus Collection（或添加新 field）。
</div>