update

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 showUserMenu = ref(false)
-// 根据用户等级获取等级名称
-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 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">
+    <aside class="sidebar">
-        <!-- 左侧Logo -->
+      <div class="sidebar-content">
-        <div class="logo">
+        <!-- 网站标题 -->
-          <RouterLink to="/" class="logo-link">
+        <div class="site-title">
-            <img src="@/assets/logo.png" alt="Crypto.AI Logo" class="logo-image" />
+          <span class="title-text">AI Trade</span>
-            Crypto.AI
+          <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">
+    <main class="chat-container">
-          <!-- 未登录状态显示登录/注册链接 -->
+      <div class="chat-content">
-          <template v-if="!isAuthenticated">
+        <RouterView />
+      </div>
+
+      <!-- 用户信息区域 -->
+      <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>
+
+        <!-- 用户菜单 -->
+        <div v-if="showUserMenu" class="user-menu">
+          <button class="menu-item" @click="handleLogout">退出登录</button>
+        </div>
+      </div>
+      <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>
-          </template>
-
-          <!-- 已登录状态显示用户信息和退出按钮 -->
-          <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>
-
-        <!-- 汉堡菜单按钮 -->
-        <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>
-    </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>
     </main>
   </div>
@@ -151,33 +93,31 @@ const handleLogout = () => {
 
 <style>
 :root {
-  --color-bg-primary: #000000;
+  --color-bg-primary: #343541;
-  --color-bg-secondary: #111111;
+  --color-bg-secondary: #202123;
-  --color-bg-elevated: #1a1a1a;
+  --color-bg-elevated: #2a2b32;
-  --color-bg-card: #0a0a0a;
+  --color-bg-card: #444654;
 
-  --color-text-primary: rgba(255, 255, 255, 1);
+  --color-text-primary: #ececf1;
-  --color-text-secondary: rgba(255, 255, 255, 0.7);
+  --color-text-secondary: #9fa6b1;
-  --color-text-tertiary: rgba(255, 255, 255, 0.5);
+  --color-text-tertiary: #565869;
-  --color-text-disabled: rgba(255, 255, 255, 0.3);
+  --color-text-disabled: #6b7280;
 
   --color-divider: rgba(255, 255, 255, 0.1);
-  --color-border: rgba(255, 255, 255, 0.15);
+  --color-border: rgba(255, 255, 255, 0.1);
-  --color-border-hover: rgba(255, 255, 255, 0.25);
+  --color-border-hover: rgba(255, 255, 255, 0.2);
 
-  --color-accent: rgba(255, 255, 255, 0.9);
+  --color-accent: #66a3ff;
-  --color-accent-hover: rgba(255, 255, 255, 1);
+  --color-accent-hover: #4d8fff;
-  --color-accent-light: rgba(255, 255, 255, 0.1);
+  --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: 0.5rem;
-  --border-radius: 8px;
+  --sidebar-width: 260px;
-  --max-content-width: 1280px;
-  --content-padding: 1rem;
 }
 
 * {
@@ -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;
+  height: 100vh;
-  padding: 0;
+  display: flex;
-  overflow-x: hidden;
+  overflow: hidden;
-  box-sizing: border-box;
-  position: relative;
 }
 
-.app-header {
+/* 左侧栏样式 */
+.sidebar {
+  width: var(--sidebar-width);
+  height: 100vh;
   background-color: var(--color-bg-secondary);
-  box-shadow: 0 1px 0 var(--color-divider);
+  border-right: 1px solid var(--color-divider);
-  height: var(--header-height);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  backdrop-filter: blur(8px);
-  width: 100vw;
-  margin: 0;
-  padding: 0;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-  left: 0;
-  right: 0;
-  position: relative;
 }
 
-.header-content {
+.sidebar-content {
-  width: 100%;
+  flex: 1;
-  max-width: var(--max-content-width);
-  margin: 0 auto;
-  padding: 0 var(--content-padding);
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: space-between;
   height: 100%;
-  position: relative;
 }
 
-.logo {
+/* 网站标题样式 */
-  font-size: 1.8rem;
+.site-title {
-  font-weight: var(--font-weight-bold);
+  padding: 2rem 1.5rem;
-  color: var(--color-text-primary);
+  text-align: center;
-  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;
   border-bottom: 1px solid var(--color-divider);
 }
 
-.mobile-nav-link:hover {
+.title-text {
-  background-color: rgba(255, 255, 255, 0.05);
+  font-size: 1.8rem;
-  color: var(--color-text-primary);
+  font-weight: 800;
-}
+  background: linear-gradient(135deg, #66a3ff 0%, #3355ff 100%);
-
+  -webkit-background-clip: text;
-.mobile-nav-link.router-link-active {
+  -webkit-text-fill-color: transparent;
-  color: var(--color-text-primary);
+  background-clip: text;
-  font-weight: var(--font-weight-bold);
+  text-fill-color: transparent;
-  border-left: 3px solid #3355ff;
+  font-family:
-}
+    'SF Pro Display',
-
+    -apple-system,
-.mobile-user-area {
+    BlinkMacSystemFont,
-  padding: 1rem 1.5rem;
+    'Segoe UI',
-  display: flex;
+    Roboto,
-  flex-direction: column;
+    sans-serif;
-  gap: 1rem;
+  letter-spacing: -0.5px;
-  margin-top: 1rem;
+  margin-bottom: 0.3rem;
-  border-top: 1px solid var(--color-border);
-}
-
-.mobile-auth-link {
-  padding: 0.8rem 0;
-  width: 100%;
-  text-align: center;
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  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;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.mobile-logout-button:hover {
-  background-color: rgba(255, 77, 77, 0.1);
-  color: #ff4d4d;
-  border-color: rgba(255, 77, 77, 0.3);
-}
-
-.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%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem 0;
-}
-
-.content-container {
-  width: 100%;
-  max-width: var(--max-content-width);
-  padding: 0 var(--content-padding);
-  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;
 }
+
+.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;
+}
+
+/* Agent 列表样式 */
+.agent-list {
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow-y: auto;
+}
+
+.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);
+}
+
+/* 修改用户信息区域样式 */
+.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);
+}
+
+.user-section:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.user-info-box {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.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%;
+  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;
+  position: relative;
 }
 
 /* 全局按钮样式 */
@@ -661,41 +410,27 @@ body {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
-/* 用户等级标签样式 */
+/* 响应式设计 */
-.user-level {
+@media (max-width: 768px) {
-  display: inline-block;
+  :root {
-  font-size: 0.75rem;
+    --sidebar-width: 100%;
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-  margin-left: 0.5rem;
-  font-weight: var(--font-weight-medium);
   }
 
-.user-level-normal {
+  .sidebar {
-  background-color: #555555;
+    position: fixed;
-  color: #ffffff;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
   }
 
-.user-level-vip {
+  .sidebar-open {
-  background-color: #ff9800;
+    transform: translateX(0);
-  color: #000000;
   }
 
-.user-level-super-vip {
+  .chat-container {
-  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;
 }
 </style>

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,61 +14,8 @@ 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>
+          <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>
@@ -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;
+  padding: 2rem;
-  margin-bottom: 4rem;
-  background-color: var(--color-bg-secondary);
-  border-radius: var(--border-radius);
   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;
-}
+  margin-top: 2rem;
-
-.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;
 }
 
 .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 {
+  .hero-section {
-    width: 100%;
+    padding: 2rem 1rem;
-    max-width: 320px;
   }
 }
 
 @media (max-width: 480px) {
-  .hero-section {
-    padding: 3rem 1rem;
-  }
-
   .hero-title {
     font-size: 2rem;
   }
+
+  .hero-section {
+    padding: 1.5rem 1rem;
+  }
 }
 </style>