From 7542a2f48879289b15362038281e87b39c48ca0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=AC=E6=98=8E?=
 <83812544+Ed1s0nZ@users.noreply.github.com>
Date: Thu, 18 Dec 2025 23:46:46 +0800
Subject: [PATCH] Add files via upload

---
 web/static/css/style.css | 69 ++++++++++++++++++++++++++++++++++++----
 web/static/js/chat.js    | 10 +++++-
 web/templates/index.html | 17 ++++++----
 3 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index 3de42179..486a291e 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -543,9 +543,48 @@ header {
 }
 
 .attack-chain-btn {
-    color: var(--text-primary);
-    border-color: var(--border-color);
-    background: var(--bg-primary);
+    color: var(--text-secondary);
+    border: none;
+    background: transparent;
+    padding: 6px 10px;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    box-shadow: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.attack-chain-btn svg {
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.conversation-header .attack-chain-btn {
+    background: transparent;
+    border: none;
+    backdrop-filter: none;
+    color: var(--text-secondary);
+}
+
+.conversation-header .attack-chain-btn:hover {
+    background: rgba(0, 102, 255, 0.06);
+    color: var(--accent-color);
+    transform: none;
+    border: none;
+}
+
+.conversation-header .attack-chain-btn:hover svg {
+    opacity: 1;
+}
+
+.conversation-header .attack-chain-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text-muted);
 }
 
 /* 用户菜单样式 */
@@ -618,15 +657,16 @@ header {
 
 .attack-chain-btn:not(:disabled):hover {
     background: var(--bg-tertiary);
-    border-color: var(--accent-color);
+    border: none;
     color: var(--accent-color);
+    transform: none;
 }
 
 .attack-chain-btn:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
-    border-color: var(--border-color);
-    background: var(--bg-secondary);
+    border: none;
+    background: transparent;
     color: var(--text-muted);
 }
 
@@ -839,6 +879,21 @@ header {
     height: 100%;
 }
 
+/* 会话顶部栏样式 */
+.conversation-header {
+    background: transparent;
+    padding: 8px 24px;
+    flex-shrink: 0;
+    border-bottom: none;
+}
+
+.conversation-header-content {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+}
+
 .chat-messages {
     flex: 1;
     overflow-y: auto;
diff --git a/web/static/js/chat.js b/web/static/js/chat.js
index 1fae288c..17bbe443 100644
--- a/web/static/js/chat.js
+++ b/web/static/js/chat.js
@@ -1312,11 +1312,16 @@ let isAttackChainLoading = false; // 防止重复加载
 // 添加攻击链按钮
 function addAttackChainButton(conversationId) {
     const attackChainBtn = document.getElementById('attack-chain-btn');
-    if (!attackChainBtn) {
+    const conversationHeader = document.getElementById('conversation-header');
+    
+    if (!attackChainBtn || !conversationHeader) {
         return;
     }
 
     if (conversationId) {
+        // 显示会话顶部栏
+        conversationHeader.style.display = 'block';
+        
         const isRunning = typeof isConversationTaskRunning === 'function'
             ? isConversationTaskRunning(conversationId)
             : false;
@@ -1330,6 +1335,9 @@ function addAttackChainButton(conversationId) {
             attackChainBtn.onclick = () => showAttackChain(conversationId);
         }
     } else {
+        // 隐藏会话顶部栏
+        conversationHeader.style.display = 'none';
+        
         attackChainBtn.disabled = true;
         attackChainBtn.title = '请选择一个对话以查看攻击链';
         attackChainBtn.onclick = null;
diff --git a/web/templates/index.html b/web/templates/index.html
index 1c76556e..bcc12301 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -36,12 +36,6 @@
                 <div class="header-right">
                     <p class="header-subtitle">AI 驱动的自动化安全测试平台</p>
                     <div class="header-actions">
-                        <button id="attack-chain-btn" class="attack-chain-btn" title="请选择一个对话以查看攻击链" disabled>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M10.5 13.5l3-3M8 8H5a4 4 0 1 0 0 8h3m8-8h3a4 4 0 0 1 0 8h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                            </svg>
-                            <span>攻击链</span>
-                        </button>
                         <div class="user-menu-container">
                             <button class="user-avatar-btn" onclick="toggleUserMenu()" title="用户菜单">
                                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -133,6 +127,17 @@
 
                         <!-- 对话界面 -->
                         <div class="chat-container">
+                            <!-- 会话顶部栏（只在有会话选中时显示） -->
+                            <div id="conversation-header" class="conversation-header" style="display: none;">
+                                <div class="conversation-header-content">
+                                    <button id="attack-chain-btn" class="attack-chain-btn" title="查看攻击链" disabled>
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M10.5 13.5l3-3M8 8H5a4 4 0 1 0 0 8h3m8-8h3a4 4 0 0 1 0 8h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        </svg>
+                                        <span>攻击链</span>
+                                    </button>
+                                </div>
+                            </div>
                             <div id="active-tasks-bar" class="active-tasks-bar"></div>
                             <div id="chat-messages" class="chat-messages"></div>
                             <div class="chat-input-container">