update

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.0.26
+    image: tradus-web:1.0.27
     container_name: tradus-web
     ports:
       - '6000:80'

src/App.vue

@@ -12,6 +12,17 @@ const showUserMenu = ref(false)
 const showLoginModal = ref(false)
 const loginMode = ref('login') // 'login' 或 'register'
 
+// 获取最新用户数据
+const fetchUserInfo = async () => {
+  if (isAuthenticated.value) {
+    try {
+      await authApi.getUserInfo()
+    } catch (error) {
+      console.error('获取用户数据失败:', error)
+    }
+  }
+}
+
 // 表单数据
 const formData = ref({
   email: '',
@@ -212,6 +223,7 @@ const openAuthModal = (mode: 'login' | 'register') => {
 
 onMounted(() => {
   document.addEventListener('click', closeMenus)
+  fetchUserInfo() // 获取最新用户数据
 })
 
 onUnmounted(() => {
@@ -285,7 +297,15 @@ onUnmounted(() => {
             <div class="user-avatar">
               <span>{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
             </div>
-            <span class="user-nickname">{{ userInfo?.nickname }}</span>
+            <div class="user-info-details">
+              <span class="user-nickname" :title="userInfo?.nickname">{{
+                userInfo?.nickname
+              }}</span>
+              <div class="user-points" v-if="userInfo?.points !== undefined">
+                <span class="points-icon">✦</span>
+                <span class="points-value">{{ userInfo.points }} 积分</span>
+              </div>
+            </div>
             <svg
               class="dropdown-icon"
               viewBox="0 0 24 24"
@@ -329,7 +349,15 @@ onUnmounted(() => {
             <div class="user-avatar">
               <span>{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
             </div>
-            <span class="user-nickname">{{ userInfo?.nickname }}</span>
+            <div class="user-info-details">
+              <span class="user-nickname" :title="userInfo?.nickname">{{
+                userInfo?.nickname
+              }}</span>
+              <div class="user-points" v-if="userInfo?.points !== undefined">
+                <span class="points-icon">✦</span>
+                <span class="points-value">{{ userInfo.points }} 积分</span>
+              </div>
+            </div>
             <svg
               class="dropdown-icon"
               viewBox="0 0 24 24"
@@ -589,6 +617,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow-y: auto;
 }
 
 /* 网站标题样式 */
@@ -691,6 +720,7 @@ body {
   transition: all 0.2s ease;
   border-top: 1px solid var(--color-divider);
   box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+  display: none; /* 隐藏旧版用户信息栏 */
 }
 
 .user-section:hover {
@@ -739,65 +769,81 @@ body {
   background-color: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
-  min-width: 140px;
+  min-width: 160px;
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   z-index: 1100;
+  animation: menuSlideIn 0.25s ease;
+  transform-origin: bottom right;
+}
+
+@keyframes menuSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .menu-item {
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: 0.9rem 1.25rem;
   border: none;
   background: none;
   color: var(--color-text-primary);
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   text-align: left;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
+  border-left: 3px solid transparent;
 }
 
 .menu-item:hover {
   background-color: var(--color-bg-hover);
   color: var(--color-accent);
+  border-left-color: var(--color-accent);
 }
 
-/* 移动端适配 */
+.menu-item .menu-icon {
-@media (max-width: 768px) {
+  color: var(--color-text-secondary);
-  .user-section {
+  transition: all 0.2s ease;
-    width: 100%;
+}
-    left: 0;
-    bottom: 0;
-    border-radius: 0;
-  }
 
-  .site-title {
+.menu-item:hover .menu-icon {
-    padding: 1rem;
+  color: var(--color-accent);
-  }
+  transform: translateX(2px);
+}
 
-  .title-text {
+/* 移动端用户菜单样式 */
-    font-size: 1.5rem;
+.user-menu.mobile {
-    margin-bottom: 0.2rem;
+  position: absolute;
-  }
+  bottom: 100%;
+  left: 1rem;
+  right: 1rem;
+  margin-bottom: 0.5rem;
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  z-index: 1100;
+  animation: mobilMenuSlideIn 0.25s ease;
+}
 
-  .subtitle-text {
+@keyframes mobilMenuSlideIn {
-    font-size: 0.8rem;
+  from {
+    opacity: 0;
+    transform: translateY(8px);
   }
-
+  to {
-  .agent-item {
+    opacity: 1;
-    padding: 0.875rem 1rem;
+    transform: translateY(0);
-  }
-
-  .agent-icon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .agent-name {
-    font-size: 0.9rem;
   }
 }
 
@@ -918,11 +964,12 @@ body {
 .mobile-user-info {
   display: none;
   padding: 1rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
   margin-top: auto;
   background-color: var(--color-bg-primary);
   position: relative;
   z-index: 1100;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .mobile-user-info .user-info-box {
@@ -932,89 +979,75 @@ body {
   cursor: pointer;
   padding: 0.75rem;
   border-radius: var(--border-radius);
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid transparent;
 }
 
-.mobile-user-info .user-info-box:hover {
+.mobile-user-info .user-info-box:hover,
+.mobile-user-info .user-info-box:active {
   background-color: var(--color-bg-hover);
+  border-color: rgba(51, 85, 255, 0.1);
 }
 
 .mobile-user-info .user-avatar {
-  width: 2.5rem;
+  width: 2.75rem;
-  height: 2.5rem;
+  height: 2.75rem;
   border-radius: 50%;
-  background: var(--color-bg-hover);
+  background: linear-gradient(135deg, var(--color-accent) 0%, rgba(51, 85, 255, 0.8) 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1rem;
+  font-size: 1.1rem;
-  color: var(--color-accent);
+  color: white;
   font-weight: bold;
-  box-shadow: 0 2px 8px rgba(51, 85, 255, 0.2);
+  box-shadow: 0 3px 10px rgba(51, 85, 255, 0.25);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-info-details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0.15rem 0;
 }
 
 .mobile-user-info .user-nickname {
   font-size: 1rem;
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
-  flex: 1;
+  margin-bottom: 0.2rem;
-}
+  display: block;
-
+  text-overflow: ellipsis;
-/* 移动端用户菜单样式 */
-.user-menu.mobile {
-  position: absolute;
-  bottom: 100%;
-  left: 1rem;
-  right: 1rem;
-  margin-bottom: 0.5rem;
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
-  z-index: 1100;
+  max-width: 100%;
 }
 
-.mobile-auth-link {
+.mobile-user-info .user-points {
-  display: block;
+  font-size: 0.85rem;
-  padding: 0.75rem 1rem;
-  color: var(--color-text-primary);
-  text-decoration: none;
-  border-radius: var(--border-radius);
-  transition: all 0.2s ease;
-  text-align: center;
-  margin: 0.5rem 0;
-  background-color: var(--color-bg-hover);
-}
-
-.mobile-auth-link:hover {
-  background-color: var(--color-bg-active);
-  color: var(--color-accent);
-}
-
-/* 箭头动画 */
-.mobile-user-info .dropdown-icon {
   color: var(--color-text-secondary);
-  transition: transform 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
 }
 
-.mobile-user-info .user-info-box:hover .dropdown-icon {
+.mobile-user-info .user-points::before {
-  color: var(--color-text-primary);
+  content: none;
 }
 
-.mobile-user-info .user-info-box[aria-expanded='true'] .dropdown-icon {
+.mobile-user-info .points-icon {
-  transform: rotate(180deg);
+  color: var(--color-accent);
+  font-size: 0.9rem;
 }
 
-@media (max-width: 768px) {
+.mobile-user-info .points-value {
-  .mobile-user-info {
+  white-space: nowrap;
-    display: block;
+}
-  }
 
-  /* 移除旧的退出按钮样式 */
+/* 移除旧的退出按钮样式 */
-  .logout-button {
+.logout-button {
   display: none;
-  }
 }
 
 /* 响应式设计 */
@@ -1024,6 +1057,34 @@ body {
     z-index: 1001;
   }
 
+  .desktop-user-info {
+    display: none !important;
+  }
+
+  .mobile-user-info {
+    display: block !important;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--color-bg-primary);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    z-index: 10;
+    padding: 1rem;
+  }
+
+  .modal-container {
+    width: 95%;
+  }
+
+  .modal-header {
+    padding: 1.25rem;
+  }
+
+  .modal-content {
+    padding: 1.25rem;
+  }
+
   .sidebar {
     position: fixed;
     left: -100%;
@@ -1037,6 +1098,17 @@ body {
     box-shadow: none;
     transform: translateX(0);
     opacity: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sidebar-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    padding-bottom: 80px; /* 为底部的用户信息留出空间 */
   }
 
   .sidebar-open {
@@ -1076,13 +1148,6 @@ body {
     filter: brightness(0.95);
   }
 
-  .mobile-user-info {
-    display: block;
-    animation: slideUp 0.3s ease;
-    background-color: var(--color-bg-primary);
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-  }
-
   @keyframes slideUp {
     from {
       transform: translateY(20px);
@@ -1094,10 +1159,6 @@ body {
     }
   }
 
-  .user-section {
-    display: none;
-  }
-
   .agent-item {
     transform: translateX(-10px);
     opacity: 0;
@@ -1130,10 +1191,11 @@ body {
   flex-direction: column;
   padding: 1.25rem;
   margin-top: auto;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
   background-color: var(--color-bg-secondary);
   position: relative;
   z-index: 1100;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .desktop-user-info .user-info-box {
@@ -1141,35 +1203,47 @@ body {
   align-items: center;
   gap: 1rem;
   cursor: pointer;
-  padding: 0.5rem;
+  padding: 0.75rem;
   border-radius: var(--border-radius);
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid transparent;
 }
 
 .desktop-user-info .user-info-box:hover {
   background-color: var(--color-bg-hover);
+  border-color: rgba(51, 85, 255, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .desktop-user-info .user-avatar {
-  width: 2.75rem;
+  width: 3rem;
-  height: 2.75rem;
+  height: 3rem;
   border-radius: 50%;
-  background: var(--color-bg-hover);
+  background: linear-gradient(135deg, var(--color-accent) 0%, rgba(51, 85, 255, 0.8) 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
-  color: var(--color-accent);
+  color: white;
   font-weight: bold;
-  box-shadow: 0 2px 8px rgba(51, 85, 255, 0.2);
+  box-shadow: 0 3px 10px rgba(51, 85, 255, 0.25);
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  border: 2px solid rgba(255, 255, 255, 0.2);
 }
 
-.desktop-user-info .user-nickname {
+.desktop-user-info .user-info-box:hover .user-avatar {
-  font-size: 1rem;
+  transform: scale(1.05) rotate(5deg);
-  font-weight: var(--font-weight-medium);
+  box-shadow: 0 5px 15px rgba(51, 85, 255, 0.35);
+}
+
+.desktop-user-info .user-info-box:hover .user-nickname {
+  color: var(--color-accent);
+}
+
+.desktop-user-info .user-info-box:hover .user-points {
   color: var(--color-text-primary);
-  flex: 1;
 }
 
 .dropdown-icon {
@@ -1203,17 +1277,6 @@ body {
   color: var(--color-accent);
 }
 
-/* 移动端适配 */
-@media (max-width: 768px) {
-  .desktop-user-info {
-    display: none;
-  }
-
-  .mobile-user-info {
-    display: block;
-  }
-}
-
 /* 认证按钮样式 */
 .auth-button {
   width: 100%;
@@ -1386,21 +1449,6 @@ body {
   }
 }
 
-/* 移动端适配 */
-@media (max-width: 768px) {
-  .modal-container {
-    width: 95%;
-  }
-
-  .modal-header {
-    padding: 1.25rem;
-  }
-
-  .modal-content {
-    padding: 1.25rem;
-  }
-}
-
 /* 表单错误样式 */
 .form-group input.error {
   border-color: #ff4d4f;
@@ -1487,4 +1535,46 @@ body {
     padding: 0.8rem;
   }
 }
+
+.desktop-user-info .user-info-details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0.25rem 0;
+}
+
+.desktop-user-info .user-nickname {
+  font-size: 1.05rem;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  margin-bottom: 0.3rem;
+  transition: all 0.2s ease;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.desktop-user-info .user-points {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  transition: all 0.2s ease;
+}
+
+.desktop-user-info .user-points::before {
+  content: none;
+}
+
+.desktop-user-info .points-icon {
+  color: var(--color-accent);
+  font-size: 0.9rem;
+}
+
+.desktop-user-info .points-value {
+  white-space: nowrap;
+}
 </style>

src/services/api.ts

@@ -70,6 +70,37 @@ export const authApi = {
 
     return authData
   },
+
+  // 获取用户最新数据
+  async getUserInfo() {
+    const userStore = useUserStore()
+    if (!userStore.isAuthenticated) {
+      throw new Error('用户未登录')
+    }
+
+    const response = await fetch(`${apiBaseUrl}/user/me`, {
+      method: 'GET',
+      headers: {
+        Authorization: userStore.authHeader,
+      },
+    })
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        userStore.logout()
+        throw new Error('登录已过期，请重新登录')
+      }
+      const errorData = await response.json().catch(() => ({}))
+      throw new Error(errorData.detail || `请求失败: ${response.status}`)
+    }
+
+    const userData = await response.json()
+
+    // 更新用户信息
+    userStore.updateUserInfo(userData)
+
+    return userData
+  },
 }
 
 // 创建带有认证头的请求函数

src/stores/user.ts

@@ -7,6 +7,7 @@ export interface UserInfo {
   nickname: string
   level: number
   create_time: string
+  points?: number
 }
 
 export interface AuthResponse {
@@ -42,6 +43,14 @@ export const useUserStore = defineStore('user', () => {
     localStorage.setItem('user_info', JSON.stringify(authResponse.user_info))
   }
 
+  // 更新用户信息
+  function updateUserInfo(newUserInfo: UserInfo) {
+    userInfo.value = newUserInfo
+
+    // 更新本地存储
+    localStorage.setItem('user_info', JSON.stringify(newUserInfo))
+  }
+
   // 登出
   function logout() {
     accessToken.value = null
@@ -63,6 +72,7 @@ export const useUserStore = defineStore('user', () => {
     isAuthenticated,
     authHeader,
     setAuth,
+    updateUserInfo,
     logout,
   }
 })

src/views/AIAgentView.vue

@@ -673,7 +673,7 @@ const getIconPath = (agent: Agent) => {
 }
 
 .input-container {
-  padding: 0.5rem 0.5rem 5.5rem 0.5rem;
+  padding: 0.5rem 0.5rem 2rem 0.5rem;
   background-color: var(--color-bg-primary);
   width: 100%;
   max-width: 900px;

src/views/HomeView.vue

@@ -24,7 +24,10 @@ const openAuthModal = (mode: 'login' | 'register') => {
           <button class="btn btn-secondary" @click="openAuthModal('register')">注册</button>
         </div>
         <div class="hero-actions" v-else>
+          <div class="btn-wrapper">
             <RouterLink to="/ai-agent" class="btn btn-primary">开始提问</RouterLink>
+            <span class="free-tag">Beta</span>
+          </div>
         </div>
       </div>
     </section>
@@ -192,6 +195,37 @@ const openAuthModal = (mode: 'login' | 'register') => {
   height: 20px;
 }
 
+.btn-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.free-tag {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  background-color: #ff3355;
+  color: white;
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(255, 51, 85, 0.3);
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 @media (max-width: 768px) {
   .hero-section {
     padding: 4rem 1.5rem;
@@ -235,5 +269,14 @@ const openAuthModal = (mode: 'login' | 'register') => {
   .btn {
     width: 100%;
   }
+
+  .btn-wrapper {
+    width: 100%;
+  }
+
+  .free-tag {
+    top: -8px;
+    right: 20px;
+  }
 }
 </style>