update layout

web/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "server": "vite serve --host",
+    "server:prod": "vite serve --host --port 8080",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
@@ -15,6 +16,7 @@
     "@antv/g6": "^5.0.17",
     "@vueuse/core": "^10.11.0",
     "ant-design-vue": "^4.2.3",
+    "ant-design-x-vue": "^1.0.6",
     "axios": "^1.3.4",
     "d3": "^7.8.3",
     "dayjs": "^1.11.13",

web/src/assets/icons/sidebar_left.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743006412437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1457" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M141.074286 906.496h741.851428c89.581714 0 134.582857-44.562286 134.582857-132.845714V250.331429c0-88.283429-45.001143-132.845714-134.582857-132.845715H141.074286C51.931429 117.504 6.491429 161.645714 6.491429 250.331429V773.668571c0 88.704 45.44 132.845714 134.582857 132.845715z m1.28-68.992c-42.861714 0-66.852571-22.710857-66.852572-67.291429V253.805714c0-44.580571 23.990857-67.291429 66.852572-67.291428h190.72v651.008z m739.291428-651.008c42.422857 0 66.852571 22.710857 66.852572 67.291429V770.194286c0 44.580571-24.429714 67.291429-66.852572 67.291428h-481.28V186.496z m-630.857143 159.012571c12.854857 0 24.429714-11.574857 24.429715-24.009142 0-12.854857-11.574857-23.990857-24.429715-23.990858h-92.16c-12.836571 0-23.990857 11.136-23.990857 23.990858 0 12.434286 11.154286 24.009143 24.009143 24.009142z m0 110.994286c12.854857 0 24.429714-11.574857 24.429715-24.429714 0-12.854857-11.574857-23.588571-24.429715-23.588572h-92.16c-12.836571 0-23.990857 10.733714-23.990857 23.588572 0 12.854857 11.154286 24.429714 24.009143 24.429714z m0 110.573714c12.854857 0 24.429714-10.715429 24.429715-23.588571 0-12.836571-11.574857-23.990857-24.429715-23.990857h-92.16c-12.836571 0-23.990857 11.154286-23.990857 24.009143s11.154286 23.570286 24.009143 23.570285z" p-id="1458" fill="#2c2c2c"></path></svg>

web/src/assets/icons/sidebar_right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743006443448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1794" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M141.074286 906.496h741.851428c89.581714 0 134.582857-44.562286 134.582857-132.845714V250.331429c0-88.283429-45.001143-132.845714-134.582857-132.845715H141.074286C51.931429 117.504 6.491429 161.645714 6.491429 250.331429V773.668571c0 88.704 45.44 132.845714 134.582857 132.845715z m1.28-68.992c-42.861714 0-66.852571-22.710857-66.852572-67.291429V253.805714c0-44.580571 23.990857-67.291429 66.852572-67.291428h482.139428v651.008z m739.291428-651.008c42.422857 0 66.852571 22.710857 66.852572 67.291429V770.194286c0 44.580571-24.429714 67.291429-66.852572 67.291428H691.785143V186.496z m-107.574857 159.012571h91.721143c13.275429 0 24.429714-11.574857 24.429714-24.009142 0-12.854857-11.154286-23.990857-24.429714-23.990858h-91.721143c-12.854857 0-24.429714 11.136-24.429714 23.990858 0 12.434286 11.574857 24.009143 24.429714 24.009142z m0 110.994286h91.721143c13.275429 0 24.429714-11.574857 24.429714-24.429714 0-12.854857-11.154286-23.588571-24.429714-23.588572h-91.721143c-12.854857 0-24.429714 10.733714-24.429714 23.588572 0 12.854857 11.574857 24.429714 24.429714 24.429714z m0 110.573714h91.721143c13.275429 0 24.429714-10.715429 24.429714-23.588571 0-12.836571-11.154286-23.990857-24.429714-23.990857h-91.721143c-12.854857 0-24.429714 11.154286-24.429714 24.009143s11.574857 23.570286 24.429714 23.570285z" p-id="1795"></path></svg>

web/src/views/AgentView.vue

@@ -1,31 +1,8 @@
 <template>
   <div class="chat-container">
-    <div class="conversations" :class="{ 'is-open': state.isSidebarOpen }">
-      <div class="actions">
-        <span class="header-title">可用智能体</span>
-        <div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
-      </div>
-      <div class="conversation-list">
-        <div class="conversation"
-          v-for="(agent, name) in agents"
-          :key="name"
-          :class="{ active: currentAgent?.name === name }"
-          @click="selectAgent(name)">
-          <div class="conversation__title"><RobotOutlined /> &nbsp;{{ agent.name }}</div>
-          <div class="conversation__description">{{ agent.description }}</div>
-        </div>
-      </div>
-    </div>
     <div class="chat">
       <div class="chat-header">
         <div class="header__left">
-          <div
-            v-if="!state.isSidebarOpen"
-            class="nav-btn"
-            @click="state.isSidebarOpen = true"
-          >
-            <MenuOutlined />
-          </div>
           <a-dropdown>
             <div class="current-agent nav-btn">
               <RobotOutlined />&nbsp;
@@ -43,7 +20,8 @@
         </div>
         <div class="header__right">
           <div class="nav-btn text" @click="state.isRightSidebarOpen = !state.isRightSidebarOpen">
-            <SettingOutlined /> <span class="text">设置</span>
+            <!-- <SettingOutlined /> <span class="text">设置</span> -->
+            <img src="@/assets/icons/sidebar_right.svg" class="nav-btn-icon" alt="设置" />
           </div>
         </div>
       </div>
@@ -205,7 +183,6 @@ const marked = new Marked(
 
 // UI状态
 const state = reactive({
-  isSidebarOpen: true,
   isRightSidebarOpen: false,
   showOptions: false,
 });
@@ -747,6 +724,12 @@ const loadState = () => {
   if (savedThreadId) {
     threadId.value = savedThreadId;
   }
+
+  // 从localStorage加载右侧边栏状态
+  const savedRightSidebarState = localStorage.getItem('agent-right-sidebar-open');
+  if (savedRightSidebarState !== null) {
+    state.isRightSidebarOpen = JSON.parse(savedRightSidebarState);
+  }
 };
 
 // 保存状态到localStorage
@@ -785,17 +768,6 @@ onMounted(async () => {
   if (messages.value.length > 0) {
     messages.value = prepareMessageHistory(messages.value);
   }
-
-  // 从localStorage加载侧边栏状态
-  const savedSidebarState = localStorage.getItem('agent-sidebar-open');
-  if (savedSidebarState !== null) {
-    state.isSidebarOpen = JSON.parse(savedSidebarState);
-  }
-
-  const savedRightSidebarState = localStorage.getItem('agent-right-sidebar-open');
-  if (savedRightSidebarState !== null) {
-    state.isRightSidebarOpen = JSON.parse(savedRightSidebarState);
-  }
 });
 
 // 监听消息变化自动滚动
@@ -845,110 +817,6 @@ const toggleToolCall = (toolCallId) => {
   position: relative;
 }
 
-.conversations {
-  width: 230px;
-  max-width: 230px;
-  border-right: 1px solid var(--main-light-3);
-  background-color: var(--bg-sider);
-  transition: all 0.3s ease;
-  white-space: nowrap; /* 防止文本换行 */
-  overflow: hidden; /* 确保内容不溢出 */
-
-  &.is-open {
-    width: 230px;
-  }
-
-  &:not(.is-open) {
-    width: 0;
-    padding: 0;
-    overflow: hidden;
-  }
-
-  & .actions {
-    height: var(--header-height);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    z-index: 9;
-    border-bottom: 1px solid var(--main-light-3);
-
-    .header-title {
-      font-weight: bold;
-      user-select: none;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .action {
-      font-size: 1.2rem;
-      width: 2.5rem;
-      height: 2.5rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 8px;
-      color: var(--gray-800);
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--main-light-3);
-      }
-    }
-  }
-
-  .conversation-list {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    max-height: 100%;
-  }
-
-  .conversation-list .conversation {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    cursor: pointer;
-    width: 100%;
-    user-select: none;
-    transition: background-color 0.2s ease-in-out;
-    border-bottom: 1px solid var(--main-light-3);
-    overflow: hidden;
-
-    &__title {
-      color: var(--gray-700);
-      white-space: nowrap; /* 禁止换行 */
-      overflow: hidden;    /* 超出部分隐藏 */
-      text-overflow: ellipsis; /* 显示省略号 */
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
-
-    &__description {
-      color: var(--gray-600);
-      font-size: 12px;
-      white-space: normal;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    &.active {
-      border-right: 3px solid var(--main-500);
-      background-color: var(--main-light-4);
-
-      & .conversation__title {
-        color: var(--main-800);
-      }
-    }
-
-    &:not(.active):hover {
-      background-color: var(--main-light-3);
-    }
-  }
-}
-
 /* 右侧侧边栏样式 */
 .right-sidebar {
   width: 350px;
@@ -1104,6 +972,11 @@ const toggleToolCall = (toolCallId) => {
     &:hover {
       background-color: var(--main-light-3);
     }
+
+    .nav-btn-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
   }
 }
 
@@ -1582,27 +1455,12 @@ const toggleToolCall = (toolCallId) => {
 }
 
 @media (max-width: 520px) {
-  .conversations,
   .right-sidebar {
     position: absolute;
     z-index: 101;
     width: 300px;
     height: 100%;
     box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
-  }
-
-  .conversations {
-    border-radius: 0 16px 16px 0;
-    left: 0;
-
-    &:not(.is-open) {
-      width: 0;
-      padding: 0;
-      overflow: hidden;
-    }
-  }
-
-  .right-sidebar {
     border-radius: 16px 0 0 16px;
     right: 0;