From 1a607c1ee18878f352dbecef432f6cf1eedfee0b Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Fri, 9 May 2025 12:09:00 +0800
Subject: [PATCH] update

---
 src/App.vue               | 819 ++++++++++++----------------------
 src/views/AIAgentView.vue | 900 +++++++++++++++++---------------------
 src/views/HomeView.vue    | 194 ++------
 3 files changed, 711 insertions(+), 1202 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5bb84d6..046841e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,149 +1,91 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import { ref, computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useUserStore } from './stores/user'
 
-const mobileMenuOpen = ref(false)
 const userStore = useUserStore()
 const isAuthenticated = computed(() => userStore.isAuthenticated)
 const userInfo = computed(() => userStore.userInfo)
-
-// 根据用户等级获取等级名称
-const userLevelName = computed(() => {
-  if (!userInfo.value) return ''
-  switch (userInfo.value.level) {
-    case 0:
-      return '普通会员'
-    case 1:
-      return 'VIP'
-    case 2:
-      return '超级VIP'
-    default:
-      return '普通会员'
-  }
-})
-
-// 根据用户等级获取等级标签的样式类
-const userLevelClass = computed(() => {
-  if (!userInfo.value) return ''
-  switch (userInfo.value.level) {
-    case 0:
-      return 'user-level-normal'
-    case 1:
-      return 'user-level-vip'
-    case 2:
-      return 'user-level-super-vip'
-    default:
-      return 'user-level-normal'
-  }
-})
-
-const toggleMobileMenu = () => {
-  mobileMenuOpen.value = !mobileMenuOpen.value
-}
-
-const closeMobileMenu = () => {
-  mobileMenuOpen.value = false
-}
+const showUserMenu = ref(false)
 
 const handleLogout = () => {
   userStore.logout()
-  mobileMenuOpen.value = false
-  // 如果当前在需要登录的页面，可以跳转到首页
   if (window.location.pathname.includes('/user')) {
     window.location.href = '/'
   }
+  showUserMenu.value = false
 }
+
+const toggleUserMenu = () => {
+  showUserMenu.value = !showUserMenu.value
+}
+
+// 点击其他地方关闭菜单
+const closeUserMenu = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.user-section')) {
+    showUserMenu.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeUserMenu)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeUserMenu)
+})
 </script>
 
 <template>
   <div class="app-container">
-    <header class="app-header">
-      <div class="header-content">
-        <!-- 左侧Logo -->
-        <div class="logo">
-          <RouterLink to="/" class="logo-link">
-            <img src="@/assets/logo.png" alt="Crypto.AI Logo" class="logo-image" />
-            Crypto.AI
+    <!-- 左侧栏 -->
+    <aside class="sidebar">
+      <div class="sidebar-content">
+        <!-- 网站标题 -->
+        <div class="site-title">
+          <span class="title-text">AI Trade</span>
+          <div class="subtitle-text">AI for Trading</div>
+        </div>
+        <!-- Agent 列表 -->
+        <div class="agent-list">
+          <RouterLink to="/" class="agent-item">
+            <span class="agent-icon">🏠</span>
+            <span class="agent-name">首页</span>
+          </RouterLink>
+          <RouterLink to="/ai-agent" class="agent-item">
+            <span class="agent-icon">🤖</span>
+            <span class="agent-name">AI 助手</span>
           </RouterLink>
         </div>
+      </div>
+    </aside>
 
-        <!-- 右侧用户区域 - 仅在桌面版显示 -->
-        <div class="user-area">
-          <!-- 未登录状态显示登录/注册链接 -->
-          <template v-if="!isAuthenticated">
-            <RouterLink to="/login" class="auth-link">登录</RouterLink>
-            <RouterLink to="/register" class="auth-link register-link">注册</RouterLink>
-          </template>
+    <!-- 右侧对话区域 -->
+    <main class="chat-container">
+      <div class="chat-content">
+        <RouterView />
+      </div>
 
-          <!-- 已登录状态显示用户信息和退出按钮 -->
-          <template v-else>
-            <div class="user-menu">
-              <div class="user-info">
-                <span class="user-nickname">{{ userInfo?.nickname }}</span>
-                <span class="user-level" :class="userLevelClass">{{ userLevelName }}</span>
-              </div>
-              <button class="logout-button" @click="handleLogout">退出</button>
-            </div>
-          </template>
+      <!-- 用户信息区域 -->
+      <div class="user-section" v-if="isAuthenticated">
+        <div class="user-info-box" @click="toggleUserMenu">
+          <div class="user-avatar">
+            <span>{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
+          </div>
+          <span class="user-nickname">{{ userInfo?.nickname }}</span>
         </div>
 
-        <!-- 汉堡菜单按钮 -->
-        <button class="mobile-menu-toggle" @click="toggleMobileMenu" aria-label="菜单">
-          <span class="bar" :class="{ 'bar-1-active': mobileMenuOpen }"></span>
-          <span class="bar" :class="{ 'bar-2-active': mobileMenuOpen }"></span>
-          <span class="bar" :class="{ 'bar-3-active': mobileMenuOpen }"></span>
-        </button>
+        <!-- 用户菜单 -->
+        <div v-if="showUserMenu" class="user-menu">
+          <button class="menu-item" @click="handleLogout">退出登录</button>
+        </div>
       </div>
-    </header>
-
-    <!-- 移动菜单 -->
-    <div class="mobile-menu" :class="{ 'mobile-menu-open': mobileMenuOpen }">
-      <nav class="mobile-nav">
-        <RouterLink to="/" class="mobile-nav-link" @click="closeMobileMenu">首页</RouterLink>
-        <RouterLink to="/ai-agent" class="mobile-nav-link" @click="closeMobileMenu"
-          >AI Agent</RouterLink
-        >
-        <RouterLink to="/ai-feed" class="mobile-nav-link" @click="closeMobileMenu"
-          >AI分析</RouterLink
-        >
-        <!-- <RouterLink to="/ai-agent" class="mobile-nav-link" @click="closeMobileMenu">AI Agent</RouterLink> -->
-        <!-- <RouterLink to="/tools" class="mobile-nav-link" @click="closeMobileMenu">工具集合</RouterLink> -->
-      </nav>
-
-      <div class="mobile-user-area">
-        <!-- 未登录状态显示登录/注册链接 -->
-        <template v-if="!isAuthenticated">
-          <RouterLink to="/login" class="mobile-auth-link" @click="closeMobileMenu"
-            >登录</RouterLink
-          >
-          <RouterLink
-            to="/register"
-            class="mobile-auth-link mobile-register-link"
-            @click="closeMobileMenu"
-            >注册</RouterLink
-          >
-        </template>
-
-        <!-- 已登录状态显示用户信息和退出按钮 -->
-        <template v-else>
-          <div class="mobile-user-info">
-            <span class="mobile-user-nickname">{{ userInfo?.nickname }}</span>
-            <span class="user-level mobile-user-level" :class="userLevelClass">{{
-              userLevelName
-            }}</span>
-          </div>
-          <button class="mobile-logout-button" @click="handleLogout">退出</button>
-        </template>
-      </div>
-    </div>
-
-    <!-- 遮罩层 - 仅在小屏幕上显示 -->
-    <div v-if="mobileMenuOpen" class="mobile-menu-overlay" @click="closeMobileMenu"></div>
-
-    <main class="app-content">
-      <div class="content-container">
-        <RouterView />
+      <div v-else class="user-section">
+        <div class="auth-buttons">
+          <RouterLink to="/login" class="auth-link">登录</RouterLink>
+          <RouterLink to="/register" class="auth-link register-link">注册</RouterLink>
+        </div>
       </div>
     </main>
   </div>
@@ -151,33 +93,31 @@ const handleLogout = () => {
 
 <style>
 :root {
-  --color-bg-primary: #000000;
-  --color-bg-secondary: #111111;
-  --color-bg-elevated: #1a1a1a;
-  --color-bg-card: #0a0a0a;
+  --color-bg-primary: #343541;
+  --color-bg-secondary: #202123;
+  --color-bg-elevated: #2a2b32;
+  --color-bg-card: #444654;
 
-  --color-text-primary: rgba(255, 255, 255, 1);
-  --color-text-secondary: rgba(255, 255, 255, 0.7);
-  --color-text-tertiary: rgba(255, 255, 255, 0.5);
-  --color-text-disabled: rgba(255, 255, 255, 0.3);
+  --color-text-primary: #ececf1;
+  --color-text-secondary: #9fa6b1;
+  --color-text-tertiary: #565869;
+  --color-text-disabled: #6b7280;
 
   --color-divider: rgba(255, 255, 255, 0.1);
-  --color-border: rgba(255, 255, 255, 0.15);
-  --color-border-hover: rgba(255, 255, 255, 0.25);
+  --color-border: rgba(255, 255, 255, 0.1);
+  --color-border-hover: rgba(255, 255, 255, 0.2);
 
-  --color-accent: rgba(255, 255, 255, 0.9);
-  --color-accent-hover: rgba(255, 255, 255, 1);
-  --color-accent-light: rgba(255, 255, 255, 0.1);
+  --color-accent: #66a3ff;
+  --color-accent-hover: #4d8fff;
+  --color-accent-light: rgba(102, 163, 255, 0.1);
 
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
-  --font-weight-bold: 700;
+  --font-weight-bold: 600;
 
-  --header-height: 70px;
-  --border-radius: 8px;
-  --max-content-width: 1280px;
-  --content-padding: 1rem;
+  --border-radius: 0.5rem;
+  --sidebar-width: 260px;
 }
 
 * {
@@ -190,9 +130,10 @@ html,
 body,
 #app {
   width: 100%;
+  height: 100vh;
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 body {
@@ -200,418 +141,226 @@ body {
   background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
   line-height: 1.6;
-  min-height: 100vh;
-  box-sizing: border-box;
   font-weight: var(--font-weight-regular);
+  height: 100vh;
 }
 
 .app-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  position: relative;
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
 }
 
-.app-header {
+/* 左侧栏样式 */
+.sidebar {
+  width: var(--sidebar-width);
+  height: 100vh;
   background-color: var(--color-bg-secondary);
-  box-shadow: 0 1px 0 var(--color-divider);
-  height: var(--header-height);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  backdrop-filter: blur(8px);
-  width: 100vw;
-  margin: 0;
-  padding: 0;
+  border-right: 1px solid var(--color-divider);
   display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  left: 0;
-  right: 0;
-  position: relative;
+  flex-direction: column;
 }
 
-.header-content {
-  width: 100%;
-  max-width: var(--max-content-width);
-  margin: 0 auto;
-  padding: 0 var(--content-padding);
+.sidebar-content {
+  flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   height: 100%;
-  position: relative;
 }
 
-.logo {
-  font-size: 1.8rem;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-primary);
-  letter-spacing: 0.5px;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-}
-
-.logo-link {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  color: var(--color-text-primary);
-  text-decoration: none;
-  transition: opacity 0.2s ease;
-}
-
-.logo-link:hover {
-  opacity: 0.9;
-}
-
-.logo-image {
-  height: 40px;
-  width: auto;
-}
-
-/* 用户区域样式 */
-.user-area {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.auth-link {
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  font-weight: var(--font-weight-medium);
-  transition: all 0.2s ease;
-  padding: 0.5rem 1rem;
-}
-
-.auth-link:hover {
-  color: var(--color-text-primary);
-}
-
-.register-link {
-  background-color: #3355ff;
-  color: white;
-  border-radius: var(--border-radius);
-}
-
-.register-link:hover {
-  background-color: #2244ee;
-  color: white;
-}
-
-.user-menu {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-}
-
-.user-nickname {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.logout-button {
-  background-color: transparent;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  padding: 0.3rem 0.8rem;
-  border-radius: var(--border-radius);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.logout-button:hover {
-  background-color: rgba(255, 77, 77, 0.1);
-  color: #ff4d4d;
-  border-color: rgba(255, 77, 77, 0.3);
-}
-
-/* 移动菜单按钮 */
-.mobile-menu-toggle {
-  display: none;
-  background-color: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 8px;
-  width: 40px;
-  height: 40px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 110;
-}
-
-.mobile-menu-toggle:hover {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-
-.bar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  margin: 3px auto;
-  background-color: var(--color-text-primary);
-  transition: all 0.3s ease-in-out;
-}
-
-/* 汉堡菜单动画 */
-.bar-1-active {
-  transform: rotate(-45deg) translate(-5px, 5px);
-  width: 24px;
-}
-
-.bar-2-active {
-  opacity: 0;
-  transform: translateX(-10px);
-}
-
-.bar-3-active {
-  transform: rotate(45deg) translate(-5px, -5px);
-  width: 24px;
-}
-
-/* 移动菜单 */
-.mobile-menu {
-  position: fixed;
-  top: var(--header-height);
-  right: -250px;
-  width: 250px;
-  height: calc(100vh - var(--header-height));
-  background-color: var(--color-bg-elevated);
-  z-index: 100;
-  transition: right 0.3s ease;
-  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
-  border-left: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 0;
-  overflow-y: auto;
-}
-
-.mobile-menu-open {
-  right: 0;
-}
-
-.mobile-nav {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.mobile-nav-link {
-  padding: 1rem 1.5rem;
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  font-weight: var(--font-weight-medium);
-  transition: all 0.2s ease;
-  width: 100%;
-  text-align: left;
+/* 网站标题样式 */
+.site-title {
+  padding: 2rem 1.5rem;
+  text-align: center;
   border-bottom: 1px solid var(--color-divider);
 }
 
-.mobile-nav-link:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-  color: var(--color-text-primary);
+.title-text {
+  font-size: 1.8rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #66a3ff 0%, #3355ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+  font-family:
+    'SF Pro Display',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  letter-spacing: -0.5px;
+  margin-bottom: 0.3rem;
+  display: block;
 }
 
-.mobile-nav-link.router-link-active {
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-bold);
-  border-left: 3px solid #3355ff;
+.subtitle-text {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  font-weight: 400;
+  font-family:
+    'SF Pro Display',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
 }
 
-.mobile-user-area {
-  padding: 1rem 1.5rem;
+/* Agent 列表样式 */
+.agent-list {
+  flex: 1;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-  border-top: 1px solid var(--color-border);
+  gap: 0.5rem;
+  overflow-y: auto;
 }
 
-.mobile-auth-link {
-  padding: 0.8rem 0;
-  width: 100%;
-  text-align: center;
-  color: var(--color-text-secondary);
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: var(--color-text-primary);
   text-decoration: none;
+  border-radius: var(--border-radius);
+  transition: background-color 0.2s ease;
+}
+
+.agent-item:hover {
+  background-color: var(--color-bg-elevated);
+}
+
+.agent-item.router-link-active {
+  background-color: var(--color-bg-elevated);
+}
+
+.agent-icon {
+  font-size: 1.25rem;
+}
+
+.agent-name {
+  font-size: 0.95rem;
   font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius);
-  transition: all 0.2s ease;
 }
 
-.mobile-auth-link:hover {
-  color: var(--color-text-primary);
-}
-
-.mobile-register-link {
-  background-color: #3355ff;
-  color: white;
-}
-
-.mobile-register-link:hover {
-  background-color: #2244ee;
-  color: white;
-}
-
-.mobile-user-info {
-  padding: 0.5rem 0;
-  text-align: center;
-}
-
-.mobile-user-nickname {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.mobile-logout-button {
-  width: 100%;
-  padding: 0.8rem 0;
-  text-align: center;
-  background-color: transparent;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  border-radius: var(--border-radius);
-  font-size: 0.9rem;
+/* 修改用户信息区域样式 */
+.user-section {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: var(--sidebar-width);
+  background-color: var(--color-bg-elevated);
+  border-radius: 0;
+  padding: 1rem;
+  z-index: 100;
   cursor: pointer;
   transition: all 0.2s ease;
+  border-top: 1px solid var(--color-divider);
 }
 
-.mobile-logout-button:hover {
-  background-color: rgba(255, 77, 77, 0.1);
-  color: #ff4d4d;
-  border-color: rgba(255, 77, 77, 0.3);
+.user-section:hover {
+  background-color: var(--color-bg-secondary);
 }
 
-.mobile-menu-overlay {
-  display: none;
-  position: fixed;
-  top: var(--header-height);
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 90;
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.app-content {
-  flex: 1;
-  width: 100%;
+.user-info-box {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 2rem 0;
+  gap: 0.75rem;
 }
 
-.content-container {
+.user-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: #3355ff33;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  color: #3355ff;
+  font-weight: bold;
+}
+
+.user-nickname {
+  font-size: 0.95rem;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+/* 用户菜单样式 */
+.user-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 0.5rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  min-width: 120px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.menu-item {
   width: 100%;
-  max-width: var(--max-content-width);
-  padding: 0 var(--content-padding);
+  padding: 0.75rem 1rem;
+  border: none;
+  background: none;
+  color: var(--color-text-primary);
+  font-size: 0.9rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.menu-item:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .user-section {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    border-radius: 0;
+  }
+
+  .site-title {
+    padding: 1rem;
+  }
+
+  .title-text {
+    font-size: 1.5rem;
+    margin-bottom: 0.2rem;
+  }
+
+  .subtitle-text {
+    font-size: 0.8rem;
+  }
+}
+
+/* 右侧对话区域样式 */
+.chat-container {
+  flex: 1;
+  height: 100vh;
+  display: flex;
+  background-color: var(--color-bg-primary);
+  overflow: hidden;
+}
+
+.chat-content {
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-}
-
-/* 移除 footer 相关样式 */
-.app-footer,
-.footer-content,
-.footer-links,
-.footer-link,
-.discord-icon-footer {
-  display: none;
-}
-
-/* 响应式设计 */
-@media (max-width: 1280px) {
-  :root {
-    --content-padding: 2rem;
-  }
-
-  .content-container,
-  .header-content {
-    width: 100%;
-    max-width: var(--max-content-width);
-  }
-}
-
-@media (max-width: 768px) {
-  :root {
-    --content-padding: 1rem;
-    --header-height: 60px;
-  }
-
-  .header-content {
-    justify-content: space-between;
-  }
-
-  .app-header {
-    height: var(--header-height);
-    position: sticky;
-  }
-
-  .logo {
-    font-size: 1.5rem;
-  }
-
-  .logo-image {
-    height: 32px;
-  }
-
-  .app-content {
-    padding: 1rem 0;
-  }
-}
-
-@media (max-width: 600px) {
-  :root {
-    --header-height: 56px;
-  }
-
-  .logo {
-    font-size: 1.3rem;
-  }
-
-  .logo-image {
-    height: 28px;
-  }
-}
-
-@media (max-width: 480px) {
-  .mobile-menu-toggle {
-    display: flex;
-  }
-
-  .user-area {
-    display: none;
-  }
-
-  .mobile-menu-overlay {
-    display: block;
-  }
+  position: relative;
 }
 
 /* 全局按钮样式 */
@@ -661,41 +410,27 @@ body {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
-/* 用户等级标签样式 */
-.user-level {
-  display: inline-block;
-  font-size: 0.75rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-  margin-left: 0.5rem;
-  font-weight: var(--font-weight-medium);
-}
+/* 响应式设计 */
+@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 100%;
+  }
 
-.user-level-normal {
-  background-color: #555555;
-  color: #ffffff;
-}
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
 
-.user-level-vip {
-  background-color: #ff9800;
-  color: #000000;
-}
+  .sidebar-open {
+    transform: translateX(0);
+  }
 
-.user-level-super-vip {
-  background-color: #f44336;
-  color: #ffffff;
-  background-image: linear-gradient(45deg, #f44336, #ff9800);
-}
-
-.mobile-user-level {
-  margin-top: 0.25rem;
-  margin-left: 0;
-}
-
-.mobile-user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
+  .chat-container {
+    margin-left: 0;
+  }
 }
 </style>
diff --git a/src/views/AIAgentView.vue b/src/views/AIAgentView.vue
index b0c9a2f..c0091ce 100644
--- a/src/views/AIAgentView.vue
+++ b/src/views/AIAgentView.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
-import { ref, nextTick, computed, onMounted, watch } from 'vue'
+import { ref, nextTick, computed, onMounted, watch, onUnmounted } from 'vue'
 import { useUserStore } from '../stores/user'
 import { marked } from 'marked'
 
+// 配置 marked
+marked.setOptions({
+  async: false,
+})
+
+// 渲染 Markdown
+const renderMarkdown = (content: string) => {
+  return marked.parse(content)
+}
+
 // 定义Agent类型
 interface Agent {
   id: string
@@ -230,7 +240,7 @@ const sendMessage = async () => {
                 // 更新显示的工具列表
                 let toolsText = ''
                 chatHistory.value[tempMessageIndex].tools?.forEach((tool, index) => {
-                  toolsText += `${index + 1}.已使用 ${tool}\n`
+                  toolsText += `${index + 1}.调用 ${tool} 工具\n`
                 })
 
                 if (responseText) {
@@ -250,7 +260,7 @@ const sendMessage = async () => {
                 let toolsText = ''
                 if (chatHistory.value[tempMessageIndex].tools?.length) {
                   chatHistory.value[tempMessageIndex].tools?.forEach((tool, index) => {
-                    toolsText += `${index + 1}.已使用 ${tool}\n`
+                    toolsText += `${index + 1}.调用 ${tool} 工具\n`
                   })
                   chatHistory.value[tempMessageIndex].content = toolsText + '\n' + responseText
                 } else {
@@ -295,10 +305,38 @@ const sendMessage = async () => {
   }
 }
 
-// 渲染Markdown内容
-const renderMarkdown = (content: string): string => {
-  return marked.parse(content) as string
+// 添加下拉菜单状态控制
+const showAgentMenu = ref(false)
+
+// 切换下拉菜单
+const toggleAgentMenu = () => {
+  showAgentMenu.value = !showAgentMenu.value
 }
+
+// 选择Agent
+const selectAgent = (agent: Agent) => {
+  selectedAgent.value = agent
+  showAgentMenu.value = false
+}
+
+// 点击其他地方关闭菜单
+const closeAgentMenu = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.agent-selector')) {
+    showAgentMenu.value = false
+  }
+}
+
+onMounted(() => {
+  if (isAuthenticated.value) {
+    fetchAgents()
+  }
+  document.addEventListener('click', closeAgentMenu)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeAgentMenu)
+})
 </script>
 
 <template>
@@ -328,17 +366,55 @@ const renderMarkdown = (content: string): string => {
 
     <!-- 已登录用户显示聊天界面 -->
     <div v-else class="main-container">
-      <!-- 左侧Agent选择列表 -->
-      <div class="agent-sidebar">
-        <div class="agent-list">
+      <!-- 右侧聊天界面 -->
+      <div class="chat-container">
+        <div class="chat-window">
+          <div class="messages-container" ref="messagesContainer">
+            <div v-for="(message, index) in chatHistory" :key="index" class="message-wrapper">
+              <div :class="['message', message.role === 'user' ? 'user-message' : 'ai-message']">
+                <div class="message-content">
+                  <div class="message-text" v-html="renderMarkdown(message.content)"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="input-container">
+            <div class="input-wrapper">
+              <textarea
+                v-model="userInput"
+                class="message-input"
+                placeholder="请输入您的问题..."
+                @keydown.enter.prevent="sendMessage"
+                :disabled="isLoading || !isAuthenticated || !selectedAgent"
+              ></textarea>
+              <button
+                class="send-button"
+                @click="sendMessage"
+                :disabled="isLoading || !isAuthenticated || !selectedAgent"
+              >
+                <span class="send-icon">➤</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加新的 Agent 选择器 -->
+      <div class="agent-selector">
+        <button class="agent-selector-button" @click="toggleAgentMenu">
+          <span class="agent-icon">{{ selectedAgent?.icon || '🤖' }}</span>
+          <span class="agent-name">{{ selectedAgent?.name || '选择 Agent' }}</span>
+        </button>
+        <div v-if="showAgentMenu" class="agent-selector-menu">
           <div v-if="isLoadingAgents" class="agent-loading">加载中...</div>
           <template v-else>
             <div
               v-for="agent in agents"
               :key="agent.id"
-              class="agent-item"
-              :class="{ 'agent-item-active': selectedAgent?.id === agent.id }"
-              @click="selectedAgent = agent"
+              class="agent-menu-item"
+              :class="{ active: selectedAgent?.id === agent.id }"
+              @click="selectAgent(agent)"
             >
               <div class="agent-icon">{{ agent.icon }}</div>
               <div class="agent-info">
@@ -349,91 +425,6 @@ const renderMarkdown = (content: string): string => {
           </template>
         </div>
       </div>
-
-      <!-- 右侧聊天界面 -->
-      <div class="chat-container">
-        <div class="chat-header">
-          <div class="current-agent" v-if="selectedAgent">
-            <span class="agent-icon">{{ selectedAgent.icon }}</span>
-            <span class="agent-name">{{ selectedAgent.name }}</span>
-          </div>
-        </div>
-
-        <div ref="messagesContainer" class="chat-messages">
-          <div
-            v-for="(message, index) in chatHistory"
-            :key="index"
-            class="message"
-            :class="{
-              'user-message': message.role === 'user',
-              'ai-message': message.role === 'assistant',
-              'thought-message': message.role === 'thought',
-            }"
-          >
-            <div class="message-content">
-              <template v-if="message.role === 'thought'">
-                <div class="thought-content">
-                  <div v-if="message.thought?.thought" class="thought-item">
-                    <span class="thought-label">思考：</span>
-                    <span class="thought-text">{{ message.thought.thought }}</span>
-                  </div>
-                  <div v-if="message.thought?.observation" class="thought-item">
-                    <span class="thought-label">观察：</span>
-                    <span class="thought-text">{{ message.thought.observation }}</span>
-                  </div>
-                  <div v-if="message.thought?.tool" class="thought-item">
-                    <span class="thought-label">工具：</span>
-                    <span class="thought-text">{{ message.thought.tool }}</span>
-                  </div>
-                  <div v-if="message.thought?.tool_input" class="thought-item">
-                    <span class="thought-label">输入：</span>
-                    <span class="thought-text">{{ message.thought.tool_input }}</span>
-                  </div>
-                </div>
-              </template>
-              <template v-else-if="message.role === 'user'">
-                <p v-for="(line, i) in message.content.split('\n')" :key="i">
-                  {{ line }}
-                </p>
-              </template>
-              <template v-else>
-                <div v-if="message.tools && message.tools.length > 0" class="tools-list">
-                  <p v-for="(tool, toolIndex) in message.tools" :key="toolIndex">
-                    {{ toolIndex + 1 }}.已使用 {{ tool }}
-                  </p>
-                </div>
-                <div
-                  class="markdown-content"
-                  v-html="renderMarkdown(message.content.replace(/^\d+\.已使用.+\n/gm, ''))"
-                ></div>
-                <!-- 显示图片文件 -->
-                <div v-if="message.files && message.files.length > 0" class="message-files">
-                  <template
-                    v-for="(file, fileIndex) in message.files.filter((f) => f.type === 'image')"
-                    :key="fileIndex"
-                  >
-                    <img :src="file.url" :alt="'AI生成的图片'" class="message-image" />
-                  </template>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-
-        <div class="chat-input">
-          <input
-            type="text"
-            v-model="userInput"
-            @keyup.enter="sendMessage"
-            :placeholder="`向${selectedAgent?.name}提问...`"
-            class="input-field"
-            :disabled="isLoading"
-          />
-          <button class="send-button" @click="sendMessage" :disabled="isLoading">
-            {{ isLoading ? '加载中...' : '发送' }}
-          </button>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -442,11 +433,11 @@ const renderMarkdown = (content: string): string => {
 .ai-agent-view {
   width: 100%;
   height: calc(100vh - var(--header-height));
-  padding: 2rem 0;
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: #343541;
 }
 
 /* 访问限制提示样式 */
@@ -575,73 +566,11 @@ const renderMarkdown = (content: string): string => {
 .main-container {
   display: flex;
   width: 100%;
-  height: calc(100% - 4rem);
+  height: 100%;
   min-height: 0;
-  background-color: var(--color-bg-card);
-  border-radius: var(--border-radius);
+  background-color: #343541;
   overflow: hidden;
-  border: 1px solid var(--color-border);
-  margin: 0 auto;
-}
-
-.agent-sidebar {
-  width: 280px;
-  border-right: 1px solid var(--color-border);
-  background-color: var(--color-bg-elevated);
-  display: flex;
-  flex-direction: column;
-}
-
-.agent-list {
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.agent-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid var(--color-border);
-  background-color: var(--color-bg-card);
-}
-
-.agent-item:hover {
-  border-color: var(--color-border-hover);
-  transform: translateY(-1px);
-}
-
-.agent-item-active {
-  border-color: var(--color-accent);
-  background-color: var(--color-bg-elevated);
-}
-
-.agent-icon {
-  font-size: 1.75rem;
-  line-height: 1;
-}
-
-.agent-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.agent-name {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-  font-size: 1.1rem;
-}
-
-.agent-description {
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  line-height: 1.5;
+  position: relative;
 }
 
 .chat-container {
@@ -650,435 +579,410 @@ const renderMarkdown = (content: string): string => {
   flex-direction: column;
   min-width: 0;
   min-height: 0;
+  background-color: #343541;
 }
 
-.chat-header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-}
-
-.current-agent {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.current-agent .agent-icon {
-  font-size: 1.2rem;
-}
-
-.current-agent .agent-name {
-  font-size: 1.1rem;
-  font-weight: var(--font-weight-medium);
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
+.chat-window {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  min-height: 0;
+  height: 100%;
+  background-color: var(--color-bg-primary);
+  max-width: 900px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  width: 100%;
 }
 
-/* 自定义滚动条样式 - 深色系 */
-.chat-messages::-webkit-scrollbar {
-  width: 8px;
+.messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem 0.5rem;
+  scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.chat-messages::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-}
-
-.chat-messages::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-}
-
-.chat-messages::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.message {
-  max-width: 80%;
-  padding: 1rem;
-  border-radius: var(--border-radius);
-  position: relative;
+.message-wrapper {
+  margin: 0.5rem 0;
+  display: flex;
+  width: 100%;
 }
 
 .user-message {
-  align-self: flex-end;
-  background-color: #3355ff;
-  color: #ffffff;
-  font-weight: 500;
+  justify-content: flex-end;
+  width: 100%;
+  display: flex;
 }
 
 .ai-message {
-  align-self: flex-start;
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border);
-}
-
-.message-content p {
-  margin-bottom: 0.5rem;
-}
-
-.message-content p:last-child {
-  margin-bottom: 0;
-}
-
-.chat-input {
+  justify-content: flex-start;
+  width: 100%;
   display: flex;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--color-border);
 }
 
-.input-field {
-  flex: 1;
-  padding: 0.8rem 1rem;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--color-border);
+.message {
+  display: flex;
+  padding: 0;
+}
+
+.message-content {
+  display: inline-block;
+  max-width: 800px;
+  min-width: 4em;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  overflow: hidden;
+}
+
+.user-message .message-content {
+  background-color: #2563eb;
+  color: white;
+  border-radius: 1rem 1rem 0 1rem;
+}
+
+.ai-message .message-content {
+  background-color: #1f2937;
+  color: var(--color-text-primary);
+  border-radius: 1rem 1rem 1rem 0;
+}
+
+.message-text {
+  font-size: 1rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.message-text :deep(ul),
+.message-text :deep(ol) {
+  margin: 0.5em 0;
+  padding-left: 0;
+  list-style-position: inside;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.message-text :deep(li) {
+  margin: 0.25em 0;
+  padding-left: 0;
+  text-indent: 0;
+  list-style-position: inside;
+}
+
+.message-text :deep(li > p) {
+  display: inline;
+  margin: 0;
+}
+
+.input-container {
+  padding: 1.5rem 2rem;
   background-color: var(--color-bg-primary);
+  border-top: 1px solid var(--color-divider);
+}
+
+.input-wrapper {
+  /* max-width: 48rem; */
+  margin: 0 auto;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.message-input {
+  flex: 1;
+  height: 3.5rem;
+  min-height: 2.5rem;
+  max-height: 8rem;
+  padding: 0.75rem 1rem;
+  padding-right: 3rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
   color: var(--color-text-primary);
   font-size: 1rem;
+  line-height: 1rem;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s ease;
+  text-align: left;
+  overflow-y: auto;
 }
 
-.input-field:focus {
+.message-input::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 1;
+  line-height: 1rem;
+  text-align: left;
+}
+
+.message-input:focus {
   border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-accent-light);
-  outline: none;
+}
+
+.message-input:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
 .send-button {
-  background-color: #3355ff;
-  color: #ffffff;
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-accent);
   border: none;
-  border-radius: var(--border-radius);
-  padding: 0 1.2rem;
-  margin-left: 0.8rem;
-  font-weight: var(--font-weight-bold);
+  border-radius: 50%;
+  color: white;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
-.send-button:hover {
-  background-color: #2233cc;
+.send-button:hover:not(:disabled) {
+  background-color: var(--color-accent-hover);
 }
 
 .send-button:disabled {
-  background-color: #8899dd;
+  opacity: 0.7;
   cursor: not-allowed;
 }
 
-.message-files {
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.send-icon {
+  font-size: 1rem;
+  transform: rotate(270deg);
 }
 
-.message-image {
-  max-width: 100%;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--color-border);
-}
-
-.thought-message {
-  align-self: flex-start;
-  background-color: var(--color-bg-elevated);
-  border: 1px solid var(--color-border);
-  font-size: 0.9rem;
-}
-
-.thought-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.thought-item {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.thought-label {
-  color: var(--color-text-secondary);
-  font-weight: var(--font-weight-medium);
-  min-width: 3rem;
-}
-
-.thought-text {
-  color: var(--color-text-primary);
-  word-break: break-all;
-}
-
-.agent-loading {
-  padding: 1rem;
-  text-align: center;
-  color: var(--color-text-secondary);
-}
-
-.tools-list {
-  margin-bottom: 0.8rem;
-  color: var(--color-text-secondary);
-  font-size: 0.9rem;
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0.8rem;
-}
-
-.tools-list p {
-  margin-bottom: 0.3rem;
-}
-
-.markdown-content {
-  line-height: 1.7;
+:deep(.markdown-body) {
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1.6;
+  width: 100%;
   overflow-wrap: break-word;
-  word-wrap: break-word;
   word-break: break-word;
 }
 
-.markdown-content :deep(h1),
-.markdown-content :deep(h2),
-.markdown-content :deep(h3),
-.markdown-content :deep(h4) {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
-  font-weight: 600;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  padding-bottom: 0.3rem;
-}
-
-.markdown-content :deep(h1) {
-  font-size: 1.8rem;
-}
-
-.markdown-content :deep(h2) {
-  font-size: 1.5rem;
-}
-
-.markdown-content :deep(h3) {
-  font-size: 1.2rem;
-}
-
-.markdown-content :deep(p) {
-  margin-bottom: 1.2rem;
-}
-
-.markdown-content :deep(ul),
-.markdown-content :deep(ol) {
-  padding-left: 1.8rem;
-  margin-bottom: 1.2rem;
-}
-
-.markdown-content :deep(li) {
-  margin-bottom: 0.5rem;
-}
-
-.markdown-content :deep(code) {
-  background-color: rgba(255, 255, 255, 0.1);
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  color: #ff9955;
-}
-
-.markdown-content :deep(pre) {
-  background-color: rgba(0, 0, 0, 0.3);
+:deep(.markdown-body pre) {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 0.5rem;
   padding: 1rem;
-  border-radius: 4px;
-  overflow-x: auto;
   margin: 1rem 0;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-x: auto;
 }
 
-.markdown-content :deep(pre code) {
+:deep(.markdown-body code) {
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+:deep(.markdown-body pre code) {
   background-color: transparent;
   padding: 0;
-  color: #dddddd;
 }
 
-.markdown-content :deep(blockquote) {
-  border-left: 4px solid #3355ff;
-  padding-left: 1rem;
-  margin-left: 0;
-  margin-right: 0;
-  font-style: italic;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.markdown-content :deep(table) {
+:deep(.markdown-body p) {
+  margin: 0.5em 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
   width: 100%;
-  border-collapse: collapse;
-  margin: 1rem 0;
-  display: block;
-  overflow-x: auto;
+  box-sizing: border-box;
 }
 
-.markdown-content :deep(table th),
-.markdown-content :deep(table td) {
-  border: 1px solid rgba(255, 255, 255, 0.2);
+:deep(.markdown-body blockquote) {
+  border-left: 4px solid var(--color-accent);
+  margin: 0.5rem 0;
+  padding: 0.5rem 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+:deep(.markdown-body table) {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5rem 0;
+}
+
+:deep(.markdown-body th),
+:deep(.markdown-body td) {
+  border: 1px solid var(--color-border);
   padding: 0.5rem;
   text-align: left;
 }
 
-.markdown-content :deep(table th) {
-  background-color: rgba(255, 255, 255, 0.1);
+:deep(.markdown-body th) {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
-.markdown-content :deep(hr) {
-  border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  margin: 1.5rem 0;
+:deep(.markdown-body img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
 }
 
-.markdown-content :deep(a) {
-  color: #66aaff;
+:deep(.markdown-body a) {
+  color: var(--color-accent);
   text-decoration: none;
 }
 
-.markdown-content :deep(a:hover) {
+:deep(.markdown-body a:hover) {
   text-decoration: underline;
 }
 
-.markdown-content :deep(img) {
-  max-width: 100%;
-  border-radius: 4px;
-  margin: 1rem 0;
+/* 添加新的 Agent 选择器样式 */
+.agent-selector {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
 }
 
-.markdown-content :deep(strong) {
-  font-weight: 600;
+.agent-selector-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.markdown-content :deep(em) {
-  font-style: italic;
+.agent-selector-button:hover {
+  background-color: var(--color-bg-secondary);
 }
 
+.agent-selector-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  min-width: 200px;
+  max-width: 300px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.agent-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.agent-menu-item:last-child {
+  border-bottom: none;
+}
+
+.agent-menu-item:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.agent-menu-item.active {
+  background-color: var(--color-bg-secondary);
+}
+
+.agent-menu-item .agent-icon {
+  font-size: 1.25rem;
+}
+
+.agent-menu-item .agent-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-menu-item .agent-name {
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.agent-menu-item .agent-description {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+/* 移动端适配 */
 @media (max-width: 768px) {
-  .main-container {
-    flex-direction: column;
-    height: 100%;
+  .agent-selector {
+    top: 0.5rem;
+    right: 0.5rem;
   }
 
-  .agent-sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid var(--color-border);
-    max-height: 60px;
-  }
-
-  .agent-list {
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-    overflow-x: auto;
-  }
-
-  .agent-item {
-    padding: 0.5rem;
-    min-width: 120px;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .agent-icon {
-    font-size: 1.2rem;
-  }
-
-  .agent-info {
-    min-width: 0;
-  }
-
-  .agent-name {
-    font-size: 0.9rem;
-    margin-bottom: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .agent-description {
-    display: none;
-  }
-
-  .markdown-content :deep(h1) {
-    font-size: 1.5rem;
-  }
-
-  .markdown-content :deep(h2) {
-    font-size: 1.3rem;
-  }
-
-  .markdown-content :deep(h3) {
-    font-size: 1.1rem;
-  }
-
-  .markdown-content :deep(pre) {
-    padding: 0.8rem;
+  .agent-selector-menu {
+    max-width: calc(100vw - 2rem);
   }
 }
 
 @media (max-width: 480px) {
-  .agent-sidebar {
+  .agent-selector {
     max-height: 50px;
   }
 
-  .agent-list {
-    padding: 0.4rem;
-    gap: 0.4rem;
-  }
-
-  .agent-item {
+  .agent-menu-item {
     padding: 0.4rem;
     min-width: 100px;
   }
 
-  .agent-icon {
-    font-size: 1.1rem;
-  }
-
   .agent-name {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
   }
 
-  .markdown-content :deep(h1) {
-    font-size: 1.3rem;
+  .message {
+    padding: 0.75rem;
   }
 
-  .markdown-content :deep(h2) {
-    font-size: 1.2rem;
-  }
-
-  .markdown-content :deep(h3) {
-    font-size: 1rem;
-  }
-
-  .markdown-content :deep(p) {
+  .input-field {
     font-size: 0.9rem;
-  }
-
-  .markdown-content :deep(ul),
-  .markdown-content :deep(ol) {
-    padding-left: 1.2rem;
-  }
-
-  .markdown-content :deep(li) {
-    font-size: 0.9rem;
-  }
-
-  .markdown-content :deep(pre) {
-    padding: 0.6rem;
-  }
-
-  .markdown-content :deep(code) {
-    font-size: 0.85rem;
+    padding: 0.75rem;
   }
 }
+
+.message-content {
+  overflow: auto;
+  word-break: break-all;
+}
+
+.message-content pre,
+.message-content table {
+  max-width: 100%;
+  overflow-x: auto;
+  word-break: break-all;
+}
+
+.message-content ul,
+.message-content ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.message-content li {
+  margin: 0.25em 0;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a372a48..accb305 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,16 +4,7 @@ import { useUserStore } from '../stores/user'
 import { useRouter } from 'vue-router'
 
 const userStore = useUserStore()
-const router = useRouter()
 const isAuthenticated = computed(() => userStore.isAuthenticated)
-
-const goToAIAgent = () => {
-  router.push('/ai-agent')
-}
-
-const goToAIFeed = () => {
-  router.push('/ai-feed')
-}
 </script>
 
 <template>
@@ -23,63 +14,10 @@ const goToAIFeed = () => {
         <h1 class="hero-title"><span class="accent">AI Agent for Web3</span></h1>
         <p class="hero-subtitle">立刻加入，开启 Web3 + AI 新时代</p>
         <div class="hero-actions">
-          <!-- 已登录状态显示两个功能入口 -->
-          <template v-if="isAuthenticated">
-            <div class="feature-buttons">
-              <button @click="goToAIAgent" class="feature-button">
-                <div class="feature-icon">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="M12 2a10 10 0 1 0 10 10H12V2z"></path>
-                    <path d="M12 2a10 10 0 0 1 10 10h-10V2z"></path>
-                    <path d="M12 22v-10h10"></path>
-                  </svg>
-                </div>
-                <div class="feature-content">
-                  <h3>AI Agent</h3>
-                  <p>VIP专属：智能 AI 助手</p>
-                </div>
-              </button>
-
-              <button @click="goToAIFeed" class="feature-button">
-                <div class="feature-icon">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <line x1="12" y1="20" x2="12" y2="10"></line>
-                    <line x1="18" y1="20" x2="18" y2="4"></line>
-                    <line x1="6" y1="20" x2="6" y2="16"></line>
-                  </svg>
-                </div>
-                <div class="feature-content">
-                  <h3>AI行情分析</h3>
-                  <p>专业市场行情分析，深度洞察趋势</p>
-                </div>
-              </button>
-            </div>
-          </template>
-
           <!-- 未登录状态显示登录和注册按钮 -->
-          <template v-else>
-            <router-link to="/login" class="btn btn-primary"> 登录 </router-link>
-            <router-link to="/register" class="btn btn-secondary"> 注册 </router-link>
+          <template v-if="!isAuthenticated">
+            <router-link to="/login" class="btn btn-primary">登录</router-link>
+            <router-link to="/register" class="btn btn-secondary">注册</router-link>
           </template>
         </div>
 
@@ -96,41 +34,25 @@ const goToAIFeed = () => {
         </div>
       </div>
     </section>
-
-    <!-- <section class="stats-section">
-      <div class="stats-grid">
-        <div class="stat-card card">
-          <div class="stat-value">1000+</div>
-          <div class="stat-label">会员人数</div>
-        </div>
-        <div class="stat-card card">
-          <div class="stat-value">5000+</div>
-          <div class="stat-label">Agent服务次数</div>
-        </div>
-        <div class="stat-card card">
-          <div class="stat-value">99.9%</div>
-          <div class="stat-label">正常运行时间</div>
-        </div>
-      </div>
-    </section> -->
   </div>
 </template>
 
 <style scoped>
 .home-view {
   width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .hero-section {
   text-align: center;
-  padding: 4rem 2rem;
-  margin-bottom: 4rem;
-  background-color: var(--color-bg-secondary);
-  border-radius: var(--border-radius);
+  padding: 2rem;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   width: 100%;
+  max-width: 900px;
 }
 
 .hero-section::before {
@@ -140,26 +62,26 @@ const goToAIFeed = () => {
   left: 0;
   width: 100%;
   height: 100%;
-  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 50%);
+  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 70%);
 }
 
 .hero-content {
   position: relative;
   z-index: 1;
-  max-width: 900px;
-  margin: 0 auto;
 }
 
 .hero-title {
-  font-size: 3rem;
+  font-size: 3.5rem;
   font-weight: 800;
   margin-bottom: 1.5rem;
   line-height: 1.2;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(135deg, var(--color-accent) 0%, #3355ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .accent {
-  color: var(--color-accent);
   position: relative;
   display: inline-block;
 }
@@ -174,77 +96,25 @@ const goToAIFeed = () => {
   background-color: var(--color-accent-light);
   z-index: -1;
   border-radius: 4px;
+  opacity: 0.3;
 }
 
 .hero-subtitle {
-  font-size: 1rem;
+  font-size: 1.2rem;
   color: var(--color-text-secondary);
   max-width: 700px;
-  margin: 0 auto 2.5rem;
+  margin: 0 auto 3rem;
 }
 
 .hero-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  margin-top: 1.5rem;
-}
-
-.feature-buttons {
   display: flex;
   gap: 1.5rem;
-  width: 100%;
-  max-width: 800px;
   justify-content: center;
-}
-
-.feature-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  padding: 1.5rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  width: 280px;
-  text-align: center;
-}
-
-.feature-button:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  border-color: #3355ff;
-}
-
-.feature-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  background-color: rgba(51, 85, 255, 0.1);
-  border-radius: 50%;
-  margin-bottom: 1rem;
-  color: #3355ff;
-}
-
-.feature-content h3 {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: white;
-}
-
-.feature-content p {
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 0;
+  margin-top: 2rem;
 }
 
 .discord-link {
-  margin-top: 2rem;
+  margin-top: 3rem;
 }
 
 .discord-text {
@@ -303,32 +173,32 @@ const goToAIFeed = () => {
 
 @media (max-width: 768px) {
   .hero-title {
-    font-size: 2.2rem;
+    font-size: 2.5rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1rem;
+    margin-bottom: 2rem;
   }
 
   .hero-actions {
     flex-direction: column;
     align-items: center;
-  }
-
-  .feature-buttons {
-    flex-direction: column;
     gap: 1rem;
   }
 
-  .feature-button {
-    width: 100%;
-    max-width: 320px;
+  .hero-section {
+    padding: 2rem 1rem;
   }
 }
 
 @media (max-width: 480px) {
-  .hero-section {
-    padding: 3rem 1rem;
-  }
-
   .hero-title {
     font-size: 2rem;
   }
+
+  .hero-section {
+    padding: 1.5rem 1rem;
+  }
 }
 </style>