update
This commit is contained in:
aaron
parent
106bb8b64b
commit
a1a7e3f3b5
@ -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'
|
||||
|
||||
455
src/App.vue
455
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">{{
|
||||
userInfo?.nickname
|
||||
<span class="user-email-display" :title="userInfo?.mail">{{
|
||||
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">{{
|
||||
userInfo?.nickname
|
||||
<span class="user-email-display" :title="userInfo?.mail">{{
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user