From c303a2fcc61bd089cafc333ee74f73b77d97e15b Mon Sep 17 00:00:00 2001
From: bruce <sunzhiye01@outlook.com>
Date: Wed, 3 Jun 2026 23:24:16 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=8E=9F=E5=9E=8B=E8=AE=BE=E8=AE=A1):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BA=E8=93=9D=E7=99=BD=E5=8A=A9=E6=89=8B?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../原型设计/registration-prototype-demo.html | 379 ++++++++++++++----
 1 file changed, 304 insertions(+), 75 deletions(-)

diff --git a/docs/原型设计/registration-prototype-demo.html b/docs/原型设计/registration-prototype-demo.html
index 06be666..549573b 100644
--- a/docs/原型设计/registration-prototype-demo.html
+++ b/docs/原型设计/registration-prototype-demo.html
@@ -6,22 +6,24 @@
   <title>审核 Agent 原型演示站</title>
   <style>
     :root {
-      --bg: #f7f8fa;
+      --bg: #f4f7fc;
       --panel: #ffffff;
-      --panel-soft: #fbfbfc;
-      --ink: #111827;
-      --muted: #6b7280;
-      --line: #e5e7eb;
-      --line-strong: #d1d5db;
-      --accent: #1f2937;
-      --accent-soft: #f3f4f6;
+      --panel-soft: #f8fbff;
+      --ink: #1f2f46;
+      --muted: #7c8ba5;
+      --line: #dfE8f5;
+      --line-strong: #c9d8ee;
+      --accent: #3a73d9;
+      --accent-soft: #eaf2ff;
+      --nav-bg: #ffffff;
+      --sidebar-bg: linear-gradient(180deg, #edf4ff 0%, #e7f0ff 36%, #eef4ff 100%);
       --success: #166534;
       --success-bg: #ecfdf3;
       --warning: #92400e;
       --warning-bg: #fff7ed;
       --danger: #b42318;
       --danger-bg: #fef3f2;
-      --shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
+      --shadow: 0 10px 28px rgba(52, 89, 152, 0.08);
       --radius-lg: 12px;
       --radius-md: 10px;
       --radius-sm: 8px;
@@ -60,37 +62,40 @@
       position: sticky;
       top: 0;
       z-index: 10;
-      background: rgba(255, 255, 255, 0.94);
+      background: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--line);
     }
 
     .topbar-inner {
-      max-width: 1480px;
+      max-width: 100%;
       margin: 0 auto;
-      padding: 18px 24px 14px;
-      display: grid;
-      gap: 14px;
+      padding: 0 18px;
+      display: flex;
+      align-items: stretch;
+      justify-content: space-between;
+      gap: 20px;
+      min-height: 64px;
     }
 
     .brand-row {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      gap: 16px;
+      gap: 18px;
+      min-width: 0;
     }
 
     .brand h1 {
       margin: 0;
-      font-size: 22px;
+      font-size: 18px;
       line-height: 1.2;
       font-weight: 700;
     }
 
     .brand p {
-      margin: 6px 0 0;
+      margin: 4px 0 0;
       color: var(--muted);
-      font-size: 13px;
+      font-size: 12px;
     }
 
     .summary-row {
@@ -135,31 +140,36 @@
 
     .tabs {
       display: flex;
-      gap: 8px;
-      border-top: 1px solid var(--line);
-      padding-top: 14px;
+      gap: 2px;
+      align-items: stretch;
+      margin-left: 20px;
     }
 
     .tab-btn {
-      padding: 10px 16px;
-      border-radius: 999px;
-      border: 1px solid transparent;
+      padding: 0 20px;
+      min-height: 64px;
+      border-radius: 0;
+      border-top: 0;
+      border-left: 0;
+      border-right: 0;
+      border-bottom: 2px solid transparent;
       color: var(--muted);
       background: transparent;
       font-weight: 600;
+      position: relative;
     }
 
     .tab-btn.active {
-      background: var(--accent);
-      color: #fff;
-      border-color: var(--accent);
+      background: #eef4ff;
+      color: var(--accent);
+      border-color: #b9cdf5;
     }
 
     .content {
-      max-width: 1480px;
+      max-width: 100%;
       width: 100%;
-      margin: 0 auto;
-      padding: 24px;
+      margin: 0;
+      padding: 18px;
     }
 
     .page {
@@ -173,9 +183,9 @@
 
     .agent-layout {
       display: grid;
-      grid-template-columns: 280px minmax(0, 1fr) 320px;
+      grid-template-columns: 302px minmax(0, 1fr) 340px;
       gap: 18px;
-      min-height: calc(100vh - 170px);
+      min-height: calc(100vh - 100px);
     }
 
     .panel {
@@ -242,9 +252,9 @@
     }
 
     .history-item.active {
-      border-color: var(--line-strong);
-      background: #fff;
-      box-shadow: inset 0 0 0 1px #d1d5db;
+      border-color: #b9cdf5;
+      background: linear-gradient(180deg, #eef4ff 0%, #e5efff 100%);
+      box-shadow: inset 0 0 0 1px #c7d8f4;
     }
 
     .history-item strong,
@@ -272,10 +282,74 @@
 
     .conversation-shell {
       display: grid;
-      grid-template-rows: auto auto 1fr auto;
+      grid-template-rows: auto auto auto 1fr auto;
       min-height: 100%;
     }
 
+    .hero-center {
+      padding: 54px 24px 24px;
+      text-align: center;
+      display: grid;
+      gap: 18px;
+      justify-items: center;
+    }
+
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      border-radius: 999px;
+      background: var(--accent);
+      color: #fff;
+      font-size: 13px;
+      box-shadow: 0 10px 20px rgba(58, 115, 217, 0.18);
+    }
+
+    .hero-center h2 {
+      margin: 0;
+      font-size: 28px;
+      line-height: 1.35;
+      color: #17315f;
+    }
+
+    .hero-center p {
+      max-width: 760px;
+      margin: 0;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.9;
+    }
+
+    .hero-tags {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .hero-note-row {
+      display: grid;
+      grid-template-columns: 1.4fr 0.8fr;
+      gap: 12px;
+      width: min(880px, 100%);
+    }
+
+    .hero-note-card {
+      padding: 16px;
+      border-radius: 14px;
+      border: 1px solid #d8e4f8;
+      background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
+      text-align: left;
+    }
+
+    .hero-note-card strong {
+      display: block;
+      margin-bottom: 8px;
+      color: #2453a6;
+      font-size: 14px;
+    }
+
     .prompt-rail {
       padding: 14px 18px 0;
       display: flex;
@@ -286,9 +360,9 @@
     .prompt-chip {
       padding: 8px 12px;
       border-radius: 999px;
-      border: 1px solid var(--line);
-      background: #fff;
-      color: var(--muted);
+      border: 1px solid #dbe6fb;
+      background: #eef4ff;
+      color: #4a73b8;
       font-size: 12px;
     }
 
@@ -308,12 +382,12 @@
     }
 
     .node-item.active {
-      border-color: var(--line-strong);
-      background: #f9fafb;
+      border-color: #bfd2f5;
+      background: #eef4ff;
     }
 
     .conversation-board {
-      padding: 18px;
+      padding: 12px 18px 18px;
       display: grid;
       gap: 14px;
       align-content: start;
@@ -330,16 +404,18 @@
 
     .message.user {
       margin-left: auto;
-      background: #f9fafb;
+      background: #eef4ff;
+      border-color: #d6e2f8;
     }
 
     .message.agent {
       margin-right: auto;
+      background: #ffffff;
     }
 
     .message.system {
       margin-right: auto;
-      background: #fcfcfd;
+      background: #f8fbff;
     }
 
     .message-head {
@@ -363,19 +439,22 @@
 
     .composer {
       border-top: 1px solid var(--line);
-      padding: 16px 18px 18px;
+      padding: 18px;
       display: grid;
       gap: 12px;
+      background: linear-gradient(180deg, rgba(244,247,252,0) 0%, #f7faff 100%);
     }
 
     .composer-box {
-      min-height: 100px;
-      border: 1px solid var(--line);
-      border-radius: var(--radius-md);
+      min-height: 58px;
+      border: 1px solid #d7e3f8;
+      border-radius: 999px;
       background: #fff;
-      padding: 14px;
+      padding: 16px 20px;
       color: var(--muted);
-      line-height: 1.7;
+      line-height: 1.4;
+      display: flex;
+      align-items: center;
     }
 
     .composer-actions,
@@ -396,14 +475,14 @@
       padding: 10px 14px;
       font-size: 13px;
       font-weight: 600;
-      border: 1px solid var(--line);
+      border: 1px solid #d4def2;
       background: #fff;
-      color: var(--ink);
+      color: #345383;
     }
 
     .primary-btn {
-      background: var(--accent);
-      border-color: var(--accent);
+      background: linear-gradient(180deg, #4f86e8 0%, #336fd7 100%);
+      border-color: #336fd7;
       color: #fff;
     }
 
@@ -423,10 +502,10 @@
     }
 
     .upload-box {
-      border: 1px dashed var(--line-strong);
+      border: 1px dashed #c8d8f2;
       border-radius: var(--radius-md);
       padding: 16px;
-      background: #fcfcfd;
+      background: linear-gradient(180deg, #f9fbff 0%, #f1f6ff 100%);
       display: grid;
       gap: 12px;
     }
@@ -452,8 +531,8 @@
     }
 
     .ability-card.active {
-      border-color: var(--line-strong);
-      background: #f9fafb;
+      border-color: #bfd2f5;
+      background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
     }
 
     .metric-grid {
@@ -586,11 +665,110 @@
     .search-input {
       padding: 11px 14px;
       border-radius: 10px;
-      border: 1px solid var(--line);
+      border: 1px solid #d4def2;
       background: #fff;
       color: var(--ink);
     }
 
+    .system-nav {
+      display: flex;
+      align-items: stretch;
+      gap: 2px;
+      margin-left: 26px;
+    }
+
+    .system-nav-btn {
+      min-height: 64px;
+      padding: 0 16px;
+      display: inline-flex;
+      align-items: center;
+      color: #3b4e6d;
+      border-bottom: 2px solid transparent;
+      font-size: 15px;
+    }
+
+    .system-nav-btn.active {
+      background: #eef4ff;
+      color: var(--accent);
+      border-color: #c5d7f6;
+    }
+
+    .topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      color: var(--muted);
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    .user-badge {
+      width: 34px;
+      height: 34px;
+      display: inline-grid;
+      place-items: center;
+      border-radius: 50%;
+      background: #e8edf7;
+      color: #5b6f8d;
+      font-weight: 700;
+    }
+
+    .history-panel {
+      background: var(--sidebar-bg);
+      border-color: #dbe7fb;
+      overflow: hidden;
+    }
+
+    .history-panel .panel-head,
+    .history-panel .panel-body {
+      border-bottom-color: rgba(201, 216, 238, 0.9);
+    }
+
+    .history-toolbar {
+      display: grid;
+      gap: 12px;
+    }
+
+    .search-shell {
+      padding: 10px 12px;
+      border-radius: 10px;
+      border: 1px solid #d5e1f5;
+      background: rgba(255,255,255,0.86);
+      color: #8a98b3;
+      font-size: 13px;
+    }
+
+    .history-caption {
+      padding: 10px 12px;
+      border-radius: 10px;
+      background: rgba(215, 229, 255, 0.72);
+      color: #4b73b5;
+      font-size: 13px;
+      text-align: center;
+      font-weight: 600;
+    }
+
+    .history-footer {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid rgba(201, 216, 238, 0.9);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .history-avatar {
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      background: linear-gradient(180deg, #5d8ee9 0%, #3c74db 100%);
+      color: #fff;
+      display: grid;
+      place-items: center;
+      font-weight: 700;
+      box-shadow: 0 8px 18px rgba(58, 115, 217, 0.2);
+    }
+
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(4px); }
       to { opacity: 1; transform: translateY(0); }
@@ -604,6 +782,10 @@
       .kb-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
+
+       .system-nav {
+        display: none;
+      }
     }
 
     @media (max-width: 1080px) {
@@ -618,6 +800,10 @@
       .kb-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
+
+      .hero-note-row {
+        grid-template-columns: 1fr;
+      }
     }
 
     @media (max-width: 720px) {
@@ -627,6 +813,11 @@
         padding-right: 16px;
       }
 
+      .topbar-inner,
+      .brand-row {
+        flex-wrap: wrap;
+      }
+
       .metric-grid,
       .kb-grid {
         grid-template-columns: 1fr;
@@ -647,12 +838,26 @@
             <h1>试剂盒临床注册文件准备与审核 Agent</h1>
             <p>以对话为核心的人机协同审核原型，聚焦上传、知识库、留痕与结构化结论。</p>
           </div>
+          <nav class="system-nav">
+            <button class="system-nav-btn">首页</button>
+            <button class="system-nav-btn">资料管理</button>
+            <button class="system-nav-btn">审核任务</button>
+            <button class="system-nav-btn">知识库</button>
+            <button class="system-nav-btn active">审核智能体</button>
+            <button class="system-nav-btn">流程留痕</button>
+          </nav>
+        </div>
+        <div class="topbar-right">
           <div class="summary-row">
             <span class="chip">批次：SUB-20260603-001</span>
             <span class="chip">产品：新型冠状病毒 2019-nCoV 核酸检测试剂盒</span>
-            <span class="status-tag danger">当前结论：正式导出受阻</span>
+            <span class="status-tag danger">正式导出受阻</span>
           </div>
+          <span>admin1</span>
+          <span class="user-badge">A</span>
         </div>
+      </div>
+      <div class="topbar-inner" style="min-height:auto; padding-top:0; padding-bottom:0;">
         <div class="tabs" id="tabList"></div>
       </div>
     </header>
@@ -1011,35 +1216,59 @@
       return `
         <section class="page ${activeTabId === "chat" ? "active" : ""}" data-page="chat">
           <div class="agent-layout">
-            <aside class="panel">
+            <aside class="panel history-panel">
               <div class="panel-head">
-                <div>
-                  <h3>对话历史</h3>
-                  <p>按批次管理会话，适合保留多轮审核上下文。</p>
+                <div class="history-toolbar" style="width:100%;">
+                  <button class="primary-btn" style="width:100%; justify-content:center;">+ 新对话</button>
+                  <div class="search-shell">搜索会话...</div>
+                  <div class="history-caption">对话记录</div>
                 </div>
               </div>
               <div class="panel-body">
+                <div class="muted" style="margin-bottom:12px; color:#6f81a2; font-weight:600;">更早</div>
                 <div class="history-list">
                   ${renderHistoryList(data.conversations)}
                 </div>
+                <div class="history-footer">
+                  <div class="history-avatar">A</div>
+                  <div>
+                    <strong style="display:block; font-size:14px;">admin1</strong>
+                    <div class="muted" style="color:#5da96f;">在线</div>
+                  </div>
+                </div>
               </div>
             </aside>
 
             <section class="panel conversation-shell">
-              <div class="panel-head">
+              <div class="hero-center">
+                <span class="hero-badge">审核智能助手</span>
+                <h2>试剂盒临床注册资料智能工作台</h2>
+                <p>面向注册申报资料准备、审核与整改协同场景，提供资料上传、目录汇总、完整性检查、字段抽取、一致性核查和导出建议的一站式 Agent 对话入口。</p>
+                <div class="hero-tags">
+                  <span class="prompt-chip">自动汇总文件夹目录与页数</span>
+                  <span class="prompt-chip">执行法规完整性检查</span>
+                  <span class="prompt-chip">抽取字段并生成字段池</span>
+                  <span class="prompt-chip">解释冲突字段原因</span>
+                  <span class="prompt-chip">给出整改与导出建议</span>
+                </div>
+                <div class="hero-note-row">
+                  <div class="hero-note-card">
+                    <strong>推荐提问方式</strong>
+                    <div class="muted">建议说明统计范围、资料对象和输出目标，例如“请自动汇总这个资料包的目录、页数与章节点，并标出待复核异常”。</div>
+                  </div>
+                  <div class="hero-note-card">
+                    <strong>当前数据权限</strong>
+                    <div class="muted">可查询当前批次资料、知识库法规规则、已入库模板与历史处理记录。</div>
+                  </div>
+                </div>
+              </div>
+              <div class="panel-head" style="border-top:1px solid var(--line);">
                 <div>
                   <h2>${conversation.title}</h2>
                   <p>对话中穿插节点结果，点击节点可以快速定位审核阶段。</p>
                 </div>
                 <span class="status-tag ${statusClass(conversation.status)}">${conversation.status}</span>
               </div>
-              <div class="prompt-rail">
-                <span class="prompt-chip">自动汇总文件夹文件目录与页数</span>
-                <span class="prompt-chip">执行法规完整性检查</span>
-                <span class="prompt-chip">抽取字段并生成字段池</span>
-                <span class="prompt-chip">解释冲突字段原因</span>
-                <span class="prompt-chip">给出导出建议与整改责任人</span>
-              </div>
               <div class="node-strip">
                 ${renderNodeStrip(conversation.nodes)}
               </div>
@@ -1049,9 +1278,9 @@
               <div class="composer">
                 <div class="composer-box">在这里继续输入指令，例如：“先自动汇总目录与页数，再按法规要求执行完整性检查，并输出缺失项和法规依据。”</div>
                 <div class="composer-actions">
-                  <button class="primary-btn">发送给 Agent</button>
+                  <button class="secondary-btn">上传附件</button>
                   <button class="secondary-btn">插入模板提示词</button>
-                  <button class="ghost-btn">生成结构化结论</button>
+                  <button class="primary-btn">发送给 Agent</button>
                 </div>
               </div>
             </section>