From a2f35cbeb2b7edaeaa8e57ee3284e8e424a35739 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 26 Mar 2026 03:24:24 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E9=A2=9C=E8=89=B2=E5=92=8C=E5=B8=83=E5=B1=80=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB=E6=80=A7=E5=92=8C=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/extensions.less           |  73 ++++++++++-
 web/src/components/AgentChatComponent.vue    |  23 +++-
 web/src/components/SubAgentsComponent.vue    | 126 +++++++++++--------
 web/src/components/ToolsManagerComponent.vue |  36 +-----
 web/src/layouts/AppLayout.vue                |   2 +-
 5 files changed, 161 insertions(+), 99 deletions(-)

diff --git a/web/src/assets/css/extensions.less b/web/src/assets/css/extensions.less
index 0b0e603b..45b46a64 100644
--- a/web/src/assets/css/extensions.less
+++ b/web/src/assets/css/extensions.less
@@ -53,7 +53,7 @@
   border-radius: @radius;
   cursor: pointer;
   transition: all 0.2s;
-  border: 1px solid var(--gray-50);
+  border: 1px solid var(--gray-100);
   background-color: var(--gray-0);
 
   &:hover {
@@ -81,7 +81,7 @@
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      color: var(--gray-400);
+      color: var(--gray-700);
       font-size: 14px; // For emoji icons
     }
 
@@ -104,7 +104,7 @@
 
   .item-desc {
     font-size: 12px;
-    color: var(--gray-400);
+    color: var(--gray-700);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -117,7 +117,7 @@
     }
 
     .item-name {
-      color: var(--gray-900);
+      color: var(--main-700);
     }
   }
 }
@@ -131,7 +131,7 @@
 
 .item-meta {
   font-size: 12px;
-  color: var(--gray-500);
+  color: var(--gray-700);
 }
 
 .list-separator {
@@ -400,3 +400,66 @@
   pointer-events: none;
   transition: opacity 0.2s;
 }
+
+/* Detail sections - shared between Tools and SubAgents */
+.detail-section-container {
+  padding: 16px;
+  flex: 1;
+  overflow-y: auto;
+
+  .detail-section {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--gray-700);
+      margin-bottom: 8px;
+
+      svg {
+        color: var(--gray-500);
+      }
+    }
+
+    .section-content {
+      font-size: 13px;
+      color: var(--gray-600);
+      line-height: 1.6;
+
+      &.description {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      &.meta-info {
+        .meta-item {
+          display: flex;
+          gap: 12px;
+          font-size: 13px;
+          color: var(--gray-600);
+          margin-bottom: 4px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .meta-label {
+            color: var(--gray-500);
+            min-width: 60px;
+          }
+
+          .meta-value {
+            color: var(--gray-700);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 3aeb060a..b9246a09 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -63,6 +63,10 @@
             <MessageCirclePlus v-else class="nav-btn-icon" size="16" />
             <span class="text">新对话</span>
           </div>
+          <a-divider
+            v-if="currentThread?.title && currentThread.title !== '新的对话'"
+            type="vertical"
+          />
           <div
             v-if="currentThread?.title && currentThread.title !== '新的对话'"
             class="conversation-title"
@@ -135,7 +139,7 @@
 
               <!-- 打招呼区域 - 在输入框上方 -->
               <div v-if="!conversations.length" class="chat-examples-input">
-                <h1>👋 您好，我是{{ currentAgentName }}！</h1>
+                <h1>{{ randomGreeting }}</h1>
               </div>
 
               <div v-if="showStartAgentSegment" class="agent-segment-wrapper">
@@ -276,6 +280,7 @@ const {
 } = storeToRefs(agentStore)
 const { organization } = storeToRefs(infoStore)
 
+
 // ==================== LOCAL CHAT & UI STATE ====================
 const userInput = ref('')
 const sendCooldownActive = ref(false)
@@ -285,6 +290,18 @@ const useRunsApi =
   import.meta.env.VITE_USE_RUNS_API === 'true' &&
   localStorage.getItem('force_legacy_stream') !== 'true'
 
+// 预设的打招呼文本
+const greetingMessages = [
+  '👋 您好，有什么可以帮您？',
+  '👋 你好！有什么想聊的吗？',
+  '👋 嘿，有什么我可以帮助你的？',
+  '👋 欢迎！今天想讨论什么话题？',
+  '👋 你好呀，随时为你服务！'
+]
+
+// 随机选择一个打招呼文本
+const randomGreeting = greetingMessages[Math.floor(Math.random() * greetingMessages.length)]
+
 // 从智能体元数据获取示例问题
 const exampleQuestions = computed(() => {
   const agentId = currentAgentId.value
@@ -1630,8 +1647,8 @@ watch(currentChatId, (threadId, oldThreadId) => {
     }
 
     .conversation-title {
-      font-size: 14px;
-      font-weight: 500;
+      font-size: 15px;
+      font-weight: 400;
       color: var(--text-primary);
       max-width: 200px;
       overflow: hidden;
diff --git a/web/src/components/SubAgentsComponent.vue b/web/src/components/SubAgentsComponent.vue
index 5a6473fe..55356365 100644
--- a/web/src/components/SubAgentsComponent.vue
+++ b/web/src/components/SubAgentsComponent.vue
@@ -89,61 +89,80 @@
             </div>
           </div>
 
-          <!-- Tab 导航 -->
-          <a-tabs v-model:activeKey="detailTab" class="detail-tabs">
-            <a-tab-pane key="general">
-              <template #tab>
-                <span class="tab-title"><Info :size="14" />信息</span>
-              </template>
-              <div class="tab-content">
-                <div class="info-grid">
-                  <div class="info-item" v-if="currentAgent.description">
-                    <label>描述</label>
-                    <span>{{ currentAgent.description }}</span>
-                  </div>
-                  <div class="info-item" v-if="currentAgent.model">
-                    <label>模型覆盖</label>
-                    <span>{{ currentAgent.model }}</span>
-                  </div>
-                  <div class="info-item" v-if="currentAgent.tools && currentAgent.tools.length > 0">
-                    <label>工具</label>
-                    <span>
-                      <a-tag v-for="tool in currentAgent.tools" :key="tool" size="small">
-                        {{ tool }}
-                      </a-tag>
-                    </span>
-                  </div>
-                  <div class="info-item" v-if="currentAgent.is_builtin">
-                    <label>类型</label>
-                    <span><a-tag color="blue">内置</a-tag></span>
-                  </div>
-                  <div class="info-item">
-                    <label>创建时间</label>
-                    <span>{{ formatTime(currentAgent.created_at) }}</span>
-                  </div>
-                  <div class="info-item">
-                    <label>更新时间</label>
-                    <span>{{ formatTime(currentAgent.updated_at) }}</span>
-                  </div>
-                  <div class="info-item" v-if="currentAgent.created_by">
-                    <label>创建人</label>
-                    <span>{{ currentAgent.created_by }}</span>
-                  </div>
-                </div>
+          <div class="detail-section-container">
+            <div class="detail-section">
+              <div class="section-header">
+                <MessageSquare :size="14" />
+                <span>系统提示词</span>
               </div>
-            </a-tab-pane>
-
-            <a-tab-pane key="prompt">
-              <template #tab>
-                <span class="tab-title"><MessageSquare :size="14" />系统提示词</span>
-              </template>
-              <div class="tab-content">
+              <div class="section-content">
                 <div class="code-panel">
                   <pre class="code-panel-pre">{{ currentAgent.system_prompt }}</pre>
                 </div>
               </div>
-            </a-tab-pane>
-          </a-tabs>
+            </div>
+
+            <div class="detail-section" v-if="currentAgent.description">
+              <div class="section-header">
+                <FileText :size="14" />
+                <span>描述</span>
+              </div>
+              <div class="section-content description">
+                {{ currentAgent.description }}
+              </div>
+            </div>
+
+            <div class="detail-section" v-if="currentAgent.model">
+              <div class="section-header">
+                <Cpu :size="14" />
+                <span>模型覆盖</span>
+              </div>
+              <div class="section-content">
+                {{ currentAgent.model }}
+              </div>
+            </div>
+
+            <div class="detail-section" v-if="currentAgent.tools && currentAgent.tools.length > 0">
+              <div class="section-header">
+                <Wrench :size="14" />
+                <span>工具</span>
+              </div>
+              <div class="section-content">
+                <a-tag v-for="tool in currentAgent.tools" :key="tool">{{ tool }}</a-tag>
+              </div>
+            </div>
+
+            <div class="detail-section" v-if="currentAgent.is_builtin">
+              <div class="section-header">
+                <Info :size="14" />
+                <span>类型</span>
+              </div>
+              <div class="section-content">
+                <a-tag color="blue">内置</a-tag>
+              </div>
+            </div>
+
+            <div class="detail-section">
+              <div class="section-header">
+                <Clock :size="14" />
+                <span>元信息</span>
+              </div>
+              <div class="section-content meta-info">
+                <div class="meta-item">
+                  <span class="meta-label">创建时间</span>
+                  <span class="meta-value">{{ formatTime(currentAgent.created_at) }}</span>
+                </div>
+                <div class="meta-item">
+                  <span class="meta-label">更新时间</span>
+                  <span class="meta-value">{{ formatTime(currentAgent.updated_at) }}</span>
+                </div>
+                <div class="meta-item" v-if="currentAgent.created_by">
+                  <span class="meta-label">创建人</span>
+                  <span class="meta-value">{{ currentAgent.created_by }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </template>
       </div>
     </div>
@@ -207,7 +226,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import { Search, Bot, Pencil, Trash2, Info, MessageSquare } from 'lucide-vue-next'
+import { Search, Bot, Pencil, Trash2, Info, MessageSquare, FileText, Cpu, Wrench, Clock } from 'lucide-vue-next'
 import { subagentApi } from '@/apis/subagent_api'
 import { toolApi } from '@/apis/tool_api'
 import { formatFullDateTime } from '@/utils/time'
@@ -219,7 +238,6 @@ const error = ref(null)
 const subagents = ref([])
 const searchQuery = ref('')
 const currentAgent = ref(null)
-const detailTab = ref('general')
 const availableTools = ref([])
 
 // 表单相关
@@ -271,10 +289,9 @@ const fetchSubAgents = async () => {
           currentAgent.value = null
         }
       }
-      // 默认选中第一项（切换到 tab 且当前未选中时）
+      // 默认选中第一项
       if (!currentAgent.value && subagents.value.length > 0) {
         currentAgent.value = getSortedSubAgents(subagents.value)[0]
-        detailTab.value = 'general'
       }
     } else {
       error.value = result.message || '获取列表失败'
@@ -310,7 +327,6 @@ const handleModelSelect = (spec) => {
 // 选择 SubAgent
 const selectAgent = (agent) => {
   currentAgent.value = agent
-  detailTab.value = 'general'
 }
 
 // 显示添加模态框
diff --git a/web/src/components/ToolsManagerComponent.vue b/web/src/components/ToolsManagerComponent.vue
index 99da3ba0..cde3464d 100644
--- a/web/src/components/ToolsManagerComponent.vue
+++ b/web/src/components/ToolsManagerComponent.vue
@@ -78,7 +78,7 @@
             </div>
           </div>
 
-          <div class="tool-detail">
+          <div class="detail-section-container">
             <div class="detail-section">
               <div class="section-header">
                 <FileText :size="14" />
@@ -238,40 +238,6 @@ defineExpose({
   }
 }
 
-.tool-detail {
-  padding: 16px;
-  flex: 1;
-  overflow-y: auto;
-
-  .detail-section {
-    margin-bottom: 20px;
-
-    .section-header {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--gray-700);
-      margin-bottom: 8px;
-
-      svg {
-        color: var(--gray-500);
-      }
-    }
-
-    .section-content {
-      &.description {
-        font-size: 13px;
-        color: var(--gray-600);
-        line-height: 1.6;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-    }
-  }
-}
-
 .args-table {
   :deep(.ant-table) {
     font-size: 12px;
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 88abd222..d7fc0eda 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -321,7 +321,7 @@ div.header,
     border: 1px solid transparent;
     border-radius: 12px;
     background-color: transparent;
-    color: var(--gray-1000);
+    color: var(--gray-700);
     font-size: 20px;
     transition:
       background-color 0.2s ease-in-out,