From 04ee276331202d67e9f62c8889d3e38845ea1cd8 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Tue, 1 Apr 2025 22:16:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/agents/registry.py                    |   9 ++
 src/routers/chat_router.py                |   6 +-
 web/src/components/AgentChatComponent.vue |   1 +
 web/src/views/AgentView.vue               | 169 +++++++++++++++++++---
 4 files changed, 158 insertions(+), 27 deletions(-)

diff --git a/src/agents/registry.py b/src/agents/registry.py
index 1db2621d..0da6b8bb 100644
--- a/src/agents/registry.py
+++ b/src/agents/registry.py
@@ -60,6 +60,15 @@ class BaseAgent():
     def __init__(self, **kwargs):
         self.check_requirements()
 
+    @classmethod
+    def get_info(cls):
+        return {
+            "name": cls.name,
+            "description": cls.description,
+            "config_schema": cls.config_schema.to_dict(),
+            "requirements": cls.requirements if hasattr(cls, "requirements") else [],
+        }
+
     def check_requirements(self):
         if not hasattr(self, "requirements") or not self.requirements:
             return
diff --git a/src/routers/chat_router.py b/src/routers/chat_router.py
index 5c5d8360..e02d49b8 100644
--- a/src/routers/chat_router.py
+++ b/src/routers/chat_router.py
@@ -124,11 +124,7 @@ async def call(query: str = Body(...), meta: dict = Body(None)):
 
 @chat.get("/agent")
 async def get_agent():
-    agents = [{
-        "name": agent.name,
-        "description": agent.description,
-        "config_schema": agent.config_schema.to_dict()
-    } for agent in agent_manager.agents.values()]
+    agents = [agent.get_info() for agent in agent_manager.agents.values()]
     return {"agents": agents}
 
 @chat.post("/agent/{agent_name}")
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index b2ebee56..9a5c5e1a 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -3,6 +3,7 @@
     <div class="chat">
       <div class="chat-header">
         <div class="header__left">
+          <slot name="header-left" class="nav-btn"></slot>
           <div class="newchat nav-btn" @click="resetThread" :disabled="isProcessing">
             <PlusCircleOutlined /> <span class="text">新对话</span>
           </div>
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 050b917d..72f78ae5 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -1,37 +1,73 @@
 <template>
   <div class="agent-view">
-    <div class="sidebar">
-      <h2 class="sidebar-title">智能体列表</h2>
-      <div class="agent-list">
-        <div v-for="(agent, name) in agents"
-             :key="name"
-             class="agent-item"
-             :class="{ active: selectedAgentId === name }"
-             @click="selectAgent(name)">
-          <a-avatar :style="{ backgroundColor: getAgentColor(name) }">
-            <template #icon><RobotOutlined /></template>
-          </a-avatar>
-          <div class="agent-info">
-            <div class="agent-name">{{ agent.name }}</div>
-            <div class="agent-desc">{{ agent.short_description || '智能助手' }}</div>
+    <div class="sidebar" :class="{ 'is-open': state.isSidebarOpen }">
+      <h2 class="sidebar-title">
+        智能体列表
+          <div class="toggle-sidebar" @click="toggleSidebar">
+            <img src="@/assets/icons/sidebar_left.svg" class="iconfont icon-20" alt="设置" />
+          </div>
+      </h2>
+      <div class="agent-info">
+        <a-select
+          v-model:value="selectedAgentId"
+          class="agent-list"
+          style="width: 100%"
+          @change="selectAgent"
+        >
+          <a-select-option
+            v-for="(agent, name) in agents"
+            :key="name"
+            :value="name"
+          >
+            {{ agent.name }}
+          </a-select-option>
+        </a-select>
+        <p style="padding: 0 4px;">
+          {{ agents[selectedAgentId]?.description }}
+        </p>
+
+        <!-- 添加requirements显示部分 -->
+        <div v-if="agents[selectedAgentId]?.requirements && agents[selectedAgentId]?.requirements.length > 0" class="requirements-section">
+          <h3>所需环境变量:</h3>
+          <div class="requirements-list">
+            <a-tag v-for="req in agents[selectedAgentId].requirements" :key="req">
+              {{ req }}
+            </a-tag>
           </div>
         </div>
       </div>
     </div>
     <div class="content">
-      <AgentChatComponent :agent-id="selectedAgentId" />
+      <AgentChatComponent :agent-id="selectedAgentId">
+        <template #header-left>
+          <div class="toggle-sidebar nav-btn" @click="toggleSidebar" v-if="!state.isSidebarOpen">
+            <img src="@/assets/icons/sidebar_left.svg" class="iconfont icon-20" alt="设置" />
+          </div>
+        </template>
+      </AgentChatComponent>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { RobotOutlined } from '@ant-design/icons-vue';
+import { ref, onMounted, reactive, watch } from 'vue';
+import { RobotOutlined, MenuFoldOutlined, MenuUnfoldOutlined, CloseOutlined } from '@ant-design/icons-vue';
 import AgentChatComponent from '@/components/AgentChatComponent.vue';
 
 // 状态
 const agents = ref({});
 const selectedAgentId = ref(null);
+const state = reactive({
+  isSidebarOpen: JSON.parse(localStorage.getItem('agent-sidebar-open') || 'true'),
+});
+
+// 监听侧边栏状态变化并保存到localStorage
+watch(
+  () => state.isSidebarOpen,
+  (newValue) => {
+    localStorage.setItem('agent-sidebar-open', JSON.stringify(newValue));
+  }
+);
 
 // 获取智能体列表
 const fetchAgents = async () => {
@@ -53,6 +89,11 @@ const fetchAgents = async () => {
   }
 };
 
+// 切换侧边栏
+const toggleSidebar = () => {
+  state.isSidebarOpen = !state.isSidebarOpen;
+};
+
 // 选择智能体
 const selectAgent = (agentId) => {
   selectedAgentId.value = agentId;
@@ -91,15 +132,22 @@ onMounted(async () => {
   width: 100%;
   height: 100vh;
   overflow: hidden;
+  --agent-sidebar-width: 230px;
 }
 
 .sidebar {
-  width: 230px;
-  max-width: 230px;
+  width: 0;
+  max-width: var(--agent-sidebar-width);
   border-right: 1px solid var(--main-light-3);
   background-color: var(--bg-sider);
-  padding: 16px;
+  box-sizing: content-box;
   overflow-y: auto;
+  transition: width 0.3s ease;
+  overflow: hidden;
+
+  &.is-open {
+    width: var(--agent-sidebar-width);
+  }
 }
 
 .sidebar-title {
@@ -110,12 +158,50 @@ onMounted(async () => {
   padding-bottom: 1rem;
   font-size: 1rem;
   border-bottom: 1px solid var(--main-light-3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  margin: 0;
+}
+
+.toggle-sidebar {
+  cursor: pointer;
+
+  &.nav-btn {
+    height: 2.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    color: var(--gray-900);
+    cursor: pointer;
+    font-size: 15px;
+    width: auto;
+    padding: 0.5rem 1rem;
+    transition: background-color 0.3s;
+    overflow: hidden;
+
+    .text {
+      margin-left: 10px;
+    }
+
+    &:hover {
+      background-color: var(--main-light-3);
+    }
+
+    .nav-btn-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
 }
 
 .agent-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  margin-bottom: 1rem;
 }
 
 .agent-item {
@@ -136,8 +222,8 @@ onMounted(async () => {
 }
 
 .agent-info {
-  margin-left: 12px;
-  overflow: hidden;
+  padding: 16px;
+  min-width: calc(var(--agent-sidebar-width) - 16px);
 }
 
 .agent-name {
@@ -159,6 +245,45 @@ onMounted(async () => {
   flex: 1;
   overflow: hidden;
 }
+
+// 添加requirements相关样式
+.requirements-section {
+  margin-top: 16px;
+  border-top: 1px solid var(--main-light-3);
+  padding-top: 12px;
+
+  h3 {
+    font-size: 14px;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+}
+
+.requirements-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  .ant-tag {
+    user-select: all;
+  }
+}
+
+@media (max-width: 520px) {
+  .sidebar {
+    position: absolute;
+    z-index: 101;
+    width: 0;
+    height: 100%;
+    border-radius: 0 16px 16px 0;
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
+
+    &.is-open {
+      width: var(--agent-sidebar-width);
+      padding: 16px;
+    }
+  }
+}
 </style>