update

docker-compose.yml

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

src/App.vue

@@ -2,18 +2,21 @@
 import { RouterView, useRoute } from 'vue-router'
 import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 import { useUserStore } from './stores/user'
+import { useThemeStore } from './stores/theme'
 import { authApi, http } from './services/api'
 
 const route = useRoute()
 const isStandalonePage = computed(() => route.meta.standalone)
 
 const userStore = useUserStore()
+const themeStore = useThemeStore()
 const isAuthenticated = computed(() => userStore.isAuthenticated)
 const userInfo = computed(() => userStore.userInfo)
 const showMobileMenu = ref(false)
 const showUserMenu = ref(false)
 const showLoginModal = ref(false)
 const showResetPasswordModal = ref(false)
+const showUserInfoModal = ref(false)
 const loginMode = ref('login') // 'login' 或 'register'
 
 // 获取用户信息
@@ -354,6 +357,7 @@ const handleLogout = () => {
   }
   showMobileMenu.value = false
   showUserMenu.value = false
+  showUserInfoModal.value = false
 }
 
 const toggleMobileMenu = () => {
@@ -371,9 +375,6 @@ const closeMenus = (event: MouseEvent) => {
   if (!target.closest('.mobile-menu') && !target.closest('.menu-button')) {
     showMobileMenu.value = false
   }
-  if (!target.closest('.user-info-box') && !target.closest('.user-menu')) {
-    showUserMenu.value = false
-  }
 }
 
 const openAuthModal = (mode: 'login' | 'register') => {
@@ -403,6 +404,23 @@ const openResetPasswordModal = () => {
   showResetPasswordModal.value = true
 }
 
+// 打开用户信息模态框
+const openUserInfoModal = () => {
+  showUserInfoModal.value = true
+  showUserMenu.value = false
+  showMobileMenu.value = false
+}
+
+// 关闭用户信息模态框
+const closeUserInfoModal = () => {
+  showUserInfoModal.value = false
+}
+
+// 切换主题
+const toggleTheme = () => {
+  themeStore.toggleTheme()
+}
+
 onMounted(() => {
   document.addEventListener('click', closeMenus)
   if (isAuthenticated.value) {
@@ -520,21 +538,17 @@ onUnmounted(() => {
 
         <!-- 桌面端用户信息 -->
         <div class="desktop-user-info" v-if="isAuthenticated">
-          <div class="user-info-box" @click.stop="toggleUserMenu" :aria-expanded="showUserMenu">
+          <div class="user-info-box" @click.stop="openUserInfoModal">
             <div class="user-avatar">
-              <span>{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
+              <span>{{ userInfo?.mail?.charAt(0)?.toUpperCase() || 'U' }}</span>
             </div>
             <div class="user-info-details">
-              <span class="user-nickname" :title="userInfo?.nickname">{{
+              <span class="user-email-display" :title="userInfo?.mail">{{
-                userInfo?.nickname
+                userInfo?.mail || '未设置邮箱'
               }}</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"
+              class="info-icon"
               viewBox="0 0 24 24"
               width="16"
               height="16"
@@ -542,28 +556,12 @@ onUnmounted(() => {
               stroke-width="2"
               fill="none"
             >
-              <polyline points="6 9 12 15 18 9" />
+              <circle cx="12" cy="12" r="3"></circle>
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+              ></path>
             </svg>
           </div>
-          <!-- 用户菜单 -->
-          <div class="user-menu" v-if="showUserMenu" @click.stop>
-            <button class="menu-item" @click="handleLogout">
-              <svg
-                class="menu-icon"
-                viewBox="0 0 24 24"
-                width="16"
-                height="16"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-              >
-                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-                <polyline points="16 17 21 12 16 7" />
-                <line x1="21" y1="12" x2="9" y2="12" />
-              </svg>
-              退出登录
-            </button>
-          </div>
         </div>
         <div class="desktop-user-info" v-else>
           <button class="auth-button" @click="openAuthModal('login')">登录</button>
@@ -572,21 +570,17 @@ onUnmounted(() => {
 
         <!-- 移动端用户信息 -->
         <div class="mobile-user-info" v-if="isAuthenticated">
-          <div class="user-info-box" @click.stop="toggleUserMenu" :aria-expanded="showUserMenu">
+          <div class="user-info-box" @click.stop="openUserInfoModal">
             <div class="user-avatar">
-              <span>{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
+              <span>{{ userInfo?.mail?.charAt(0)?.toUpperCase() || 'U' }}</span>
             </div>
             <div class="user-info-details">
-              <span class="user-nickname" :title="userInfo?.nickname">{{
+              <span class="user-email-display" :title="userInfo?.mail">{{
-                userInfo?.nickname
+                userInfo?.mail || '未设置邮箱'
               }}</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"
+              class="info-icon"
               viewBox="0 0 24 24"
               width="16"
               height="16"
@@ -594,28 +588,12 @@ onUnmounted(() => {
               stroke-width="2"
               fill="none"
             >
-              <polyline points="6 9 12 15 18 9" />
+              <circle cx="12" cy="12" r="3"></circle>
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+              ></path>
             </svg>
           </div>
-          <!-- 用户菜单 -->
-          <div class="user-menu mobile" v-if="showUserMenu" @click.stop>
-            <button class="menu-item" @click="handleLogout">
-              <svg
-                class="menu-icon"
-                viewBox="0 0 24 24"
-                width="16"
-                height="16"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-              >
-                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-                <polyline points="16 17 21 12 16 7" />
-                <line x1="21" y1="12" x2="9" y2="12" />
-              </svg>
-              退出登录
-            </button>
-          </div>
         </div>
         <div class="mobile-user-info" v-else>
           <button class="auth-button" @click="openAuthModal('login')">登录</button>
@@ -895,6 +873,113 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- 用户信息模态框 -->
+    <div class="modal-overlay" v-if="showUserInfoModal" @click="closeUserInfoModal">
+      <div class="user-info-modal-container" @click.stop>
+        <div class="modal-header">
+          <h2>个人信息</h2>
+          <button class="close-button" @click="closeUserInfoModal">
+            <svg
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              stroke="currentColor"
+              stroke-width="2"
+              fill="none"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+
+        <div class="user-info-modal-content">
+          <!-- 用户头像和基本信息 -->
+          <div class="user-profile-section">
+            <div class="user-avatar-large">
+              <span>{{ userInfo?.mail?.charAt(0)?.toUpperCase() || 'U' }}</span>
+            </div>
+            <div class="user-basic-info">
+              <h3 class="user-display-name">{{ userInfo?.mail || '未设置邮箱' }}</h3>
+            </div>
+          </div>
+
+          <!-- 设置选项 -->
+          <div class="settings-section">
+            <div class="setting-item">
+              <div class="setting-info">
+                <div class="setting-title">主题模式</div>
+                <div class="setting-description">选择您偏好的界面主题</div>
+              </div>
+              <div class="theme-toggle">
+                <button
+                  class="theme-option"
+                  :class="{ active: themeStore.currentTheme === 'light' }"
+                  @click="themeStore.setTheme('light')"
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    width="16"
+                    height="16"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    fill="none"
+                  >
+                    <circle cx="12" cy="12" r="5"></circle>
+                    <line x1="12" y1="1" x2="12" y2="3"></line>
+                    <line x1="12" y1="21" x2="12" y2="23"></line>
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                    <line x1="1" y1="12" x2="3" y2="12"></line>
+                    <line x1="21" y1="12" x2="23" y2="12"></line>
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                  </svg>
+                  浅色
+                </button>
+                <button
+                  class="theme-option"
+                  :class="{ active: themeStore.currentTheme === 'dark' }"
+                  @click="themeStore.setTheme('dark')"
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    width="16"
+                    height="16"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    fill="none"
+                  >
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                  </svg>
+                  深色
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="modal-actions">
+            <button class="logout-button" @click="handleLogout">
+              <svg
+                viewBox="0 0 24 24"
+                width="18"
+                height="18"
+                stroke="currentColor"
+                stroke-width="2"
+                fill="none"
+              >
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                <polyline points="16 17 21 12 16 7" />
+                <line x1="21" y1="12" x2="9" y2="12" />
+              </svg>
+              退出登录
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -2052,4 +2137,252 @@ html {
 .forgot-password-link:hover {
   text-decoration: underline;
 }
+
+/* 用户信息模态框样式 */
+.user-info-modal-container {
+  background-color: var(--color-bg-primary);
+  border-radius: var(--border-radius);
+  width: 90%;
+  max-width: 480px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+  animation: modalSlideIn 0.3s ease;
+  overflow: hidden;
+}
+
+.user-info-modal-content {
+  padding: 0;
+}
+
+.user-profile-section {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.user-avatar-large {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  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.8rem;
+  font-weight: bold;
+  color: white;
+  box-shadow: 0 4px 12px rgba(51, 85, 255, 0.2);
+}
+
+.user-basic-info {
+  flex: 1;
+}
+
+.user-display-name {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.user-email {
+  font-size: 0.95rem;
+  margin: 0 0 0.75rem 0;
+  color: var(--color-text-secondary);
+}
+
+.user-points-display {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.user-points-display .points-icon {
+  font-size: 1.2rem;
+  color: var(--color-accent);
+}
+
+.user-points-display .points-text {
+  color: var(--color-text-primary);
+}
+
+.settings-section {
+  padding: 1.5rem 2rem;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.setting-description {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+}
+
+.theme-toggle {
+  display: flex;
+  gap: 0.5rem;
+  background-color: var(--color-bg-secondary);
+  border-radius: 8px;
+  padding: 0.25rem;
+}
+
+.theme-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.theme-option:hover {
+  background-color: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.theme-option.active {
+  background-color: var(--color-accent);
+  color: white;
+}
+
+.theme-option svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+}
+
+.modal-actions {
+  padding: 1.5rem 2rem;
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-bg-secondary);
+}
+
+.logout-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  background-color: #ff4757;
+  color: white;
+  border: none;
+  border-radius: var(--border-radius);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.logout-button:hover {
+  background-color: #ff3742;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
+}
+
+.logout-button svg {
+  stroke: currentColor;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .user-info-modal-container {
+    width: 95%;
+    max-width: none;
+  }
+
+  .user-profile-section {
+    padding: 1.5rem;
+    gap: 1rem;
+  }
+
+  .user-avatar-large {
+    width: 3.5rem;
+    height: 3.5rem;
+    font-size: 1.5rem;
+  }
+
+  .user-display-name {
+    font-size: 1.3rem;
+  }
+
+  .settings-section {
+    padding: 1.25rem 1.5rem;
+  }
+
+  .modal-actions {
+    padding: 1.25rem 1.5rem;
+  }
+
+  .setting-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .theme-toggle {
+    align-self: stretch;
+  }
+
+  .theme-option {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+/* 更新info-icon样式 */
+.info-icon {
+  color: var(--color-text-secondary);
+  transition: all 0.2s ease;
+}
+
+.user-info-box:hover .info-icon {
+  color: var(--color-accent);
+  transform: rotate(90deg);
+}
+
+/* 用户邮箱显示样式 */
+.user-email-display {
+  font-size: 0.9rem;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: all 0.2s ease;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.desktop-user-info .user-info-box:hover .user-email-display {
+  color: var(--color-accent);
+}
+
+.mobile-user-info .user-info-box:hover .user-email-display {
+  color: var(--color-accent);
+}
 </style>