refactor(原型设计): 简化顶部导航结构

docs/原型设计/registration-prototype-demo.html

@@ -138,33 +138,6 @@
       border-color: #f0c6c3;
     }
 
-    .tabs {
-      display: flex;
-      gap: 2px;
-      align-items: stretch;
-      margin-left: 20px;
-    }
-
-    .tab-btn {
-      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: #eef4ff;
-      color: var(--accent);
-      border-color: #b9cdf5;
-    }
-
     .content {
       max-width: 100%;
       width: 100%;
@@ -693,26 +666,6 @@
       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;
@@ -839,26 +792,14 @@
             <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>
+            <button class="system-nav-btn" data-top-nav="home">首页</button>
+            <button class="system-nav-btn" data-top-nav="materials">资料管理</button>
+            <button class="system-nav-btn" data-top-nav="tasks">审核任务</button>
+            <button class="system-nav-btn" data-top-nav="knowledge">知识库</button>
+            <button class="system-nav-btn" data-top-nav="chat">审核智能体</button>
+            <button class="system-nav-btn" data-top-nav="history">流程留痕</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>
-          </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>
 
@@ -869,11 +810,6 @@
 
   <script>
     const data = {
-      tabs: [
-        { id: "chat", name: "主对话页" },
-        { id: "knowledge", name: "知识库页面" },
-        { id: "history", name: "处理历史页面" }
-      ],
       conversations: [
         {
           id: "conv-001",
@@ -1124,10 +1060,14 @@
       return "success";
     }
 
-    function renderTabs() {
-      document.getElementById("tabList").innerHTML = data.tabs.map(tab => `
-        <button class="tab-btn ${tab.id === activeTabId ? "active" : ""}" data-tab-id="${tab.id}">${tab.name}</button>
-      `).join("");
+    function renderTopNav() {
+      document.querySelectorAll("[data-top-nav]").forEach(item => {
+        const target = item.dataset.topNav;
+        const isActive = (activeTabId === "chat" && target === "chat")
+          || (activeTabId === "knowledge" && target === "knowledge")
+          || (activeTabId === "history" && target === "history");
+        item.classList.toggle("active", isActive);
+      });
     }
 
     function renderMetrics(items) {
@@ -1589,16 +1529,19 @@
     }
 
     function rerender() {
-      renderTabs();
+      renderTopNav();
       renderPages();
     }
 
     rerender();
 
     document.addEventListener("click", event => {
-      const tab = event.target.closest("[data-tab-id]");
-      if (tab) {
-        activeTabId = tab.dataset.tabId;
+      const topNav = event.target.closest("[data-top-nav]");
+      if (topNav) {
+        const target = topNav.dataset.topNav;
+        if (target === "chat" || target === "knowledge" || target === "history") {
+          activeTabId = target;
+        }
         rerender();
         return;
       }