From d079bb164e49cfb6e8703ab1724f66d91241a7cb Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Thu, 15 May 2025 10:33:50 +0800
Subject: [PATCH] update

---
 docker-compose.yml     |   2 +-
 src/App.vue            | 336 ++++++++++++++++++++++++++---------------
 src/views/HomeView.vue |  18 ++-
 3 files changed, 227 insertions(+), 129 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 0f55196..9e0a132 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.13
+    image: tradus-web:1.14
     container_name: tradus-web
     ports:
       - '6000:80'
diff --git a/src/App.vue b/src/App.vue
index fc4ac3b..1a870cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouterView, useRoute } from 'vue-router'
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 import { useUserStore } from './stores/user'
 import { authApi } from './services/api'
 
@@ -17,21 +17,69 @@ const loginMode = ref('login') // 'login' 或 'register'
 
 // 获取最新用户数据
 const fetchUserInfo = async () => {
-  if (isAuthenticated.value) {
-    try {
-      await authApi.getUserInfo()
-    } catch (error) {
-      console.error('获取用户数据失败:', error)
+  if (!isAuthenticated.value) return
+
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+    if (userStore.authHeader) {
+      headers['Authorization'] = userStore.authHeader
+    }
+
+    const response = await fetch(
+      `${import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'}/user/me`,
+      {
+        method: 'GET',
+        headers,
+      },
+    )
+
+    if (!response.ok) {
+      throw new Error('获取用户信息失败')
+    }
+
+    const data = await response.json()
+    userStore.$patch((state) => {
+      state.userInfo = data
+    })
+  } catch (error) {
+    console.error('获取用户数据失败:', error)
+    // 如果获取用户信息失败，可能是 token 过期，清除登录状态
+    if (error instanceof Error && error.message.includes('401')) {
+      userStore.logout()
     }
   }
 }
 
+// 设置定期刷新用户信息（每10分钟）
+let userInfoRefreshInterval: number | undefined
+
+const startUserInfoRefresh = () => {
+  if (userInfoRefreshInterval) return
+  userInfoRefreshInterval = window.setInterval(fetchUserInfo, 10 * 60 * 1000)
+}
+
+const stopUserInfoRefresh = () => {
+  if (userInfoRefreshInterval) {
+    clearInterval(userInfoRefreshInterval)
+    userInfoRefreshInterval = undefined
+  }
+}
+
+// 处理登录状态变化
+watch(isAuthenticated, (newValue) => {
+  if (newValue) {
+    startUserInfoRefresh()
+  } else {
+    stopUserInfoRefresh()
+  }
+})
+
 // 表单数据
 const formData = ref({
   email: '',
   password: '',
-  confirmPassword: '',
-  nickname: '',
   verificationCode: '',
 })
 
@@ -39,11 +87,12 @@ const formData = ref({
 const formErrors = ref({
   email: '',
   password: '',
-  confirmPassword: '',
-  nickname: '',
   verificationCode: '',
 })
 
+// 密码显示状态
+const showPassword = ref(false)
+
 // 验证码相关状态
 const sendingCode = ref(false)
 const countdown = ref(0)
@@ -87,8 +136,6 @@ const validateForm = () => {
   formErrors.value = {
     email: '',
     password: '',
-    confirmPassword: '',
-    nickname: '',
     verificationCode: '',
   }
 
@@ -110,24 +157,8 @@ const validateForm = () => {
     isValid = false
   }
 
-  // 注册模式下的额外验证
+  // 注册模式下验证验证码
   if (loginMode.value === 'register') {
-    // 验证确认密码
-    if (!formData.value.confirmPassword) {
-      formErrors.value.confirmPassword = '请确认密码'
-      isValid = false
-    } else if (formData.value.confirmPassword !== formData.value.password) {
-      formErrors.value.confirmPassword = '两次输入的密码不一致'
-      isValid = false
-    }
-
-    // 验证昵称
-    if (!formData.value.nickname) {
-      formErrors.value.nickname = '请输入昵称'
-      isValid = false
-    }
-
-    // 验证验证码
     if (!formData.value.verificationCode) {
       formErrors.value.verificationCode = '请输入验证码'
       isValid = false
@@ -148,10 +179,13 @@ const handleSubmit = async () => {
         mail: formData.value.email,
         password: formData.value.password,
       })
+      await fetchUserInfo() // 登录成功后获取用户信息
     } else {
+      // 从邮箱中提取用户名作为昵称
+      const nickname = formData.value.email.split('@')[0]
       await authApi.register({
         mail: formData.value.email,
-        nickname: formData.value.nickname,
+        nickname: nickname,
         password: formData.value.password,
         verification_code: formData.value.verificationCode,
       })
@@ -160,6 +194,7 @@ const handleSubmit = async () => {
         mail: formData.value.email,
         password: formData.value.password,
       })
+      await fetchUserInfo() // 注册并登录成功后获取用户信息
     }
     closeAuthModal()
   } catch (error) {
@@ -177,20 +212,17 @@ const closeAuthModal = () => {
   formData.value = {
     email: '',
     password: '',
-    confirmPassword: '',
-    nickname: '',
     verificationCode: '',
   }
   formErrors.value = {
     email: '',
     password: '',
-    confirmPassword: '',
-    nickname: '',
     verificationCode: '',
   }
 }
 
 const handleLogout = () => {
+  stopUserInfoRefresh() // 退出登录时停止定时刷新
   userStore.logout()
   if (window.location.pathname.includes('/user')) {
     window.location.href = '/'
@@ -226,11 +258,15 @@ const openAuthModal = (mode: 'login' | 'register') => {
 
 onMounted(() => {
   document.addEventListener('click', closeMenus)
-  fetchUserInfo() // 获取最新用户数据
+  if (isAuthenticated.value) {
+    fetchUserInfo() // 应用初始化时获取用户信息
+    startUserInfoRefresh() // 开始定期刷新
+  }
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', closeMenus)
+  stopUserInfoRefresh() // 组件卸载时停止定时刷新
 })
 </script>
 
@@ -451,7 +487,7 @@ onUnmounted(() => {
           <form class="auth-form" @submit.prevent="handleSubmit">
             <div class="form-group">
               <label for="email">邮箱</label>
-              <div class="input-with-button" v-if="loginMode === 'register'">
+              <div class="input-container">
                 <input
                   type="email"
                   id="email"
@@ -460,6 +496,7 @@ onUnmounted(() => {
                   placeholder="请输入邮箱"
                 />
                 <button
+                  v-if="loginMode === 'register'"
                   type="button"
                   class="code-button"
                   @click="sendVerificationCode"
@@ -474,75 +511,71 @@ onUnmounted(() => {
                   }}
                 </button>
               </div>
-              <input
-                v-else
-                type="email"
-                id="email"
-                v-model="formData.email"
-                :class="{ error: formErrors.email }"
-                placeholder="请输入邮箱"
-              />
               <span class="error-message" v-if="formErrors.email">{{ formErrors.email }}</span>
             </div>
 
-            <template v-if="loginMode === 'register'">
-              <div class="form-group">
-                <label for="verification-code">验证码</label>
-                <input
-                  type="text"
-                  id="verification-code"
-                  v-model="formData.verificationCode"
-                  :class="{ error: formErrors.verificationCode }"
-                  placeholder="请输入验证码"
-                />
-                <span class="error-message" v-if="formErrors.verificationCode">{{
-                  formErrors.verificationCode
-                }}</span>
-              </div>
-
-              <div class="form-group">
-                <label for="nickname">昵称</label>
-                <input
-                  type="text"
-                  id="nickname"
-                  v-model="formData.nickname"
-                  :class="{ error: formErrors.nickname }"
-                  placeholder="请输入昵称"
-                />
-                <span class="error-message" v-if="formErrors.nickname">{{
-                  formErrors.nickname
-                }}</span>
-              </div>
-            </template>
+            <div class="form-group" v-if="loginMode === 'register'">
+              <label for="verification-code">邮件验证码</label>
+              <input
+                type="text"
+                id="verification-code"
+                v-model="formData.verificationCode"
+                :class="{ error: formErrors.verificationCode }"
+                placeholder="请输入验证码"
+              />
+              <span class="error-message" v-if="formErrors.verificationCode">
+                {{ formErrors.verificationCode }}
+              </span>
+            </div>
 
             <div class="form-group">
               <label for="password">密码</label>
-              <input
-                type="password"
-                id="password"
-                v-model="formData.password"
-                :class="{ error: formErrors.password }"
-                placeholder="请输入密码"
-              />
+              <div class="password-input-container">
+                <input
+                  :type="showPassword ? 'text' : 'password'"
+                  id="password"
+                  v-model="formData.password"
+                  :class="{ error: formErrors.password }"
+                  placeholder="请输入密码"
+                />
+                <button
+                  type="button"
+                  class="toggle-password-button"
+                  @click="showPassword = !showPassword"
+                >
+                  <svg
+                    v-if="!showPassword"
+                    viewBox="0 0 24 24"
+                    width="20"
+                    height="20"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    fill="none"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                  <svg
+                    v-else
+                    viewBox="0 0 24 24"
+                    width="20"
+                    height="20"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    fill="none"
+                  >
+                    <path
+                      d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                    />
+                    <line x1="1" y1="1" x2="23" y2="23" />
+                  </svg>
+                </button>
+              </div>
               <span class="error-message" v-if="formErrors.password">{{
                 formErrors.password
               }}</span>
             </div>
 
-            <div class="form-group" v-if="loginMode === 'register'">
-              <label for="confirm-password">确认密码</label>
-              <input
-                type="password"
-                id="confirm-password"
-                v-model="formData.confirmPassword"
-                :class="{ error: formErrors.confirmPassword }"
-                placeholder="请再次输入密码"
-              />
-              <span class="error-message" v-if="formErrors.confirmPassword">{{
-                formErrors.confirmPassword
-              }}</span>
-            </div>
-
             <button type="submit" class="submit-button" :disabled="isLoading">
               <span v-if="!isLoading">{{ loginMode === 'login' ? '登录' : '注册' }}</span>
               <span v-else class="loading-spinner"></span>
@@ -1405,6 +1438,7 @@ body {
 }
 
 .form-group input {
+  width: 100%;
   padding: 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
@@ -1412,6 +1446,8 @@ body {
   transition: all 0.2s ease;
   background-color: var(--color-bg-secondary);
   color: var(--color-text-primary);
+  height: 42px;
+  box-sizing: border-box;
 }
 
 .form-group input:focus {
@@ -1515,44 +1551,23 @@ body {
 }
 
 /* 验证码按钮样式 */
-.input-with-button {
+.input-container {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
 }
 
-.input-with-button input {
+.input-container input {
   flex: 1;
 }
 
-.code-button {
-  padding: 0 1rem;
-  border-radius: var(--border-radius);
-  background-color: var(--color-bg-elevated);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  font-size: 0.9rem;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.code-button:hover:not(:disabled) {
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-}
-
-.code-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
 @media (max-width: 480px) {
-  .input-with-button {
+  .input-container {
     flex-direction: column;
   }
 
   .code-button {
-    padding: 0.8rem;
+    width: 100%;
   }
 }
 
@@ -1633,4 +1648,85 @@ body {
 html {
   scroll-behavior: smooth;
 }
+
+.password-input-container {
+  position: relative;
+  width: 100%;
+}
+
+.password-input-container input {
+  width: 100%;
+  padding-right: 2.5rem; /* 为按钮留出空间 */
+}
+
+.toggle-password-button {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  z-index: 1;
+}
+
+.toggle-password-button:hover {
+  color: var(--color-text-primary);
+}
+
+.input-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.input-container input {
+  flex: 1;
+}
+
+@media (max-width: 480px) {
+  .input-container {
+    flex-direction: column;
+  }
+
+  .code-button {
+    width: 100%;
+  }
+}
+
+.code-button {
+  padding: 0 1rem;
+  border-radius: var(--border-radius);
+  background-color: var(--color-accent);
+  border: 1px solid var(--color-accent);
+  color: white;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+}
+
+.code-button:hover:not(:disabled) {
+  background-color: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+
+.code-button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 619abbf..25c6da7 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -16,17 +16,17 @@ const openAuthModal = (mode: 'login' | 'register') => {
   <div class="home-view">
     <section class="hero-section">
       <div class="hero-content">
-        <h1 class="hero-title"><span class="accent">tradus</span></h1>
+        <h1 class="hero-title">
+          <span class="accent">tradus</span>
+          <span class="free-tag">Alpha</span>
+        </h1>
         <p class="hero-subtitle">基于AI大语言模型的智能投研助理</p>
         <div class="hero-actions" v-if="!isAuthenticated">
           <button class="btn btn-primary" @click="openAuthModal('login')">登录</button>
           <button class="btn btn-secondary" @click="openAuthModal('register')">注册</button>
         </div>
         <div class="hero-actions" v-else>
-          <div class="btn-wrapper">
-            <RouterLink to="/ai-agents" class="btn btn-primary">开始分析</RouterLink>
-            <span class="free-tag">Beta</span>
-          </div>
+          <RouterLink to="/ai-agents" class="btn btn-primary">开始使用</RouterLink>
         </div>
       </div>
     </section>
@@ -79,7 +79,8 @@ const openAuthModal = (mode: 'login' | 'register') => {
     Roboto,
     sans-serif;
   letter-spacing: -0.5px;
-  display: block;
+  display: inline-block;
+  position: relative;
 }
 
 .accent {
@@ -202,7 +203,7 @@ const openAuthModal = (mode: 'login' | 'register') => {
 .free-tag {
   position: absolute;
   top: -10px;
-  right: -10px;
+  right: -40px;
   background-color: #ff3355;
   color: white;
   font-size: 0.7rem;
@@ -275,7 +276,8 @@ const openAuthModal = (mode: 'login' | 'register') => {
 
   .free-tag {
     top: -8px;
-    right: 20px;
+    right: -30px;
+    font-size: 0.6rem;
   }
 }
 </style>