sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加个人中心

Browse Source
This commit is contained in:
shenaowei
2026-02-23 02:27:32 +08:00
parent 5b3047f675
commit af23c8779e
8 changed files with 434 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/app/web-gold/src/components/TopNav.vue
View File

@@ -13,34 +13,7 @@ const styles = {
// const route = useRoute()
const userStore = useUserStore()
const showLogin = ref(false)
const testLoading = ref(false)
// 测试按钮点击事件
const handleTest = async () => {
if (testLoading.value) return
testLoading.value = true
try {
// 调用一键测试接口（升级会员 + 初始化OSS）
const res = await TestService.testAll({
vipLevel: 1,
totalStorage: 10 * 1024 * 1024 * 1024, // 10GB
totalQuota: 10000
})
if (res.code === 0) {
message.success('测试成功！已升级会员并创建OSS目录', 3)
console.log('OSS初始化信息:', res.data)
} else {
message.error(res.msg || '测试失败', 3)
}
} catch (error) {
console.error('测试失败:', error)
message.error(error?.response?.data?.msg || error?.message || '测试失败', 3)
} finally {
testLoading.value = false
}
}
// 计算是否应该显示用户组件
// 判断用户是否有用户名，有用户名说明用户信息已加载完成
@@ -69,15 +42,7 @@ const shouldShowUser = computed(() => {
<!-- 左侧可放 logo 或其他内容 -->
</div>
<div class="flex items-center gap-4 pr-[35px]">
<!-- 测试按钮（仅开发环境显示） -->
<button
v-if="shouldShowUser"
class="btn-test-nav"
:disabled="testLoading"
@click="handleTest"
>
{{ testLoading ? '测试中...' : '测试' }}
</button>
<template v-if="shouldShowUser">
<UserDropdown />

421
frontend/app/web-gold/src/components/UserDropdown.vue
View File

@@ -1,51 +1,19 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue'
const router = useRouter()
const userStore = useUserStore()
const showDropdown = ref(false)
// 存储空间数据（后端单位 GB，前端展示转换为 MB）
const GB_TO_MB = 1024
const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
const availableStorage = computed(() => userStore.remainingStorage * GB_TO_MB)
const storagePercent = computed(() => {
if (totalStorage.value === 0) return 0
return (usedStorage.value / totalStorage.value) * 100
})
// 格式化存储空间显示
function formatStorage(mb) {
if (mb >= 1024) {
return (mb / 1024).toFixed(1) + ' GB'
const handleMenuClick = ({ key }) => {
if (key === 'profile') {
router.push('/user/profile')
} else if (key === 'logout') {
handleLogout()
}
return Math.round(mb) + ' MB'
}
// 格式化金额
function formatMoney(amount) {
return amount.toFixed(2)
}
// 格式化积分
function formatCredits(credits) {
return credits.toLocaleString()
}
// 处理鼠标进入
function handleMouseEnter() {
showDropdown.value = true
}
// 处理鼠标离开
function handleMouseLeave() {
showDropdown.value = false
}
// 处理退出登录
async function handleLogout() {
try {
await userStore.logout()
@@ -54,22 +22,10 @@ async function handleLogout() {
console.error('退出登录失败:', error)
}
}
// 挂载时获取档案数据
onMounted(async () => {
if (userStore.isLoggedIn && !userStore.profile) {
await userStore.fetchUserProfile()
}
})
</script>
<template>
<div
class="user-dropdown-wrapper"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<!-- 圆形头像 -->
<a-dropdown placement="bottomRight" :trigger="['click', 'hover']">
<div class="user-avatar-container">
<img
v-if="userStore.displayAvatar"
@@ -81,119 +37,32 @@ onMounted(async () => {
{{ userStore.displayName?.charAt(0) || 'U' }}
</div>
</div>
<!-- 下拉菜单 -->
<transition name="dropdown-fade">
<div v-if="showDropdown" class="user-dropdown">
<!-- 箭头指示器 -->
<div class="dropdown-arrow"></div>
<div class="dropdown-header">
<div class="header-avatar">
<img
v-if="userStore.displayAvatar"
class="avatar-large"
:src="userStore.displayAvatar"
alt="avatar"
/>
<div v-else class="avatar-large-placeholder">
{{ userStore.displayName?.charAt(0) || 'U' }}
</div>
</div>
<div class="header-info">
<div class="user-name-row">
<span class="user-name">{{ userStore.displayName }}</span>
</div>
<div class="user-id">ID: {{ userStore.userId || '未设置' }}</div>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-content">
<!-- 可用空间 -->
<div class="info-item">
<div class="info-label">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
<rect x="2" y="4" width="12" height="10" rx="1" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
<path d="M5 4V2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2V4" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
</svg>
<span>可用空间</span>
</div>
<div class="info-value">
{{ formatStorage(availableStorage) }}
</div>
</div>
<!-- 存储进度条 -->
<div class="storage-progress">
<div class="progress-bar">
<div
class="progress-fill"
:style="{ width: storagePercent + '%' }"
></div>
</div>
<div class="progress-text">
<span>{{ formatStorage(usedStorage) }}</span>
<span>/</span>
<span>{{ formatStorage(totalStorage) }}</span>
</div>
</div>
<!-- 剩余积分 -->
<div class="info-item">
<div class="info-label">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
<path d="M8 4V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
</svg>
<span>剩余积分</span>
</div>
<div class="info-value credits-value">
{{ formatCredits(userStore.remainingPoints) }}
</div>
</div>
<!-- 累计充值 -->
<div class="info-item">
<div class="info-label">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
<path d="M8 5V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
</svg>
<span>累计充值</span>
</div>
<div class="info-value balance-value">
¥{{ formatMoney(userStore.totalRecharge) }}
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-footer">
<button class="action-btn" @click="handleLogout">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M5 2H2C1.44772 2 1 2.44772 1 3V11C1 11.5523 1.44772 12 2 12H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M9 10L13 7L9 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 7H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span>退出登录</span>
</button>
</div>
</div>
</transition>
</div>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="profile">
<template #icon>
<UserOutlined />
</template>
个人中心
</a-menu-item>
<a-menu-divider />
<a-menu-item key="logout" danger>
<template #icon>
<LogoutOutlined />
</template>
退出登录
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
<style scoped>
.user-dropdown-wrapper {
position: relative;
display: inline-block;
}
.user-avatar-container {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
transition: transform 0.2s ease;
}
@@ -206,252 +75,32 @@ onMounted(async () => {
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-border);
border: 2px solid var(--color-border, #e5e7eb);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar:hover {
border-color: var(--color-primary);
box-shadow: var(--glow-primary);
border-color: var(--color-primary, #1890ff);
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.user-avatar-placeholder {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
background: linear-gradient(135deg, var(--color-primary, #1890ff), var(--color-blue, #36cfc9));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 16px;
border: 2px solid var(--color-border);
border: 2px solid var(--color-border, #e5e7eb);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar-placeholder:hover {
border-color: var(--color-primary);
box-shadow: var(--glow-primary);
}
.user-dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 320px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), var(--shadow-inset-card);
z-index: 1000;
overflow: hidden;
animation: slideDown 0.2s ease-out;
}
.dropdown-arrow {
position: absolute;
top: -6px;
right: 20px;
width: 12px;
height: 12px;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
transform: rotate(45deg);
z-index: 1;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-header {
padding: 20px;
display: flex;
gap: 12px;
align-items: center;
}
.header-avatar {
flex-shrink: 0;
}
.avatar-large {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-primary);
box-shadow: var(--glow-primary);
}
.avatar-large-placeholder {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 24px;
border: 2px solid var(--color-primary);
box-shadow: var(--glow-primary);
}
.header-info {
flex: 1;
min-width: 0;
}
.user-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.user-name {
font-size: 16px;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-id {
font-size: 12px;
color: var(--color-text-secondary);
}
.dropdown-divider {
height: 1px;
background: var(--color-border);
margin: 0;
}
.dropdown-content {
padding: 16px 20px;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
}
.info-item:not(:last-child) {
border-bottom: 1px solid var(--color-border);
}
.info-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-text-secondary);
}
.info-icon {
color: var(--color-text-secondary);
opacity: 0.6;
}
.info-value {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
.credits-value {
color: var(--color-primary);
}
.balance-value {
color: var(--color-accent);
}
.storage-progress {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
border-radius: 3px;
transition: width 0.3s ease;
box-shadow: 0 0 8px var(--color-primary-glow);
}
.progress-text {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--color-text-secondary);
}
.dropdown-footer {
padding: 12px 20px;
}
.action-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
color: var(--color-text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.action-btn:hover {
background: var(--color-bg);
border-color: var(--color-accent);
color: var(--color-accent);
}
.action-btn svg {
width: 14px;
height: 14px;
}
/* 下拉动画 */
.dropdown-fade-enter-active,
.dropdown-fade-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-fade-enter-from,
.dropdown-fade-leave-to {
opacity: 0;
transform: translateY(-8px);
border-color: var(--color-primary, #1890ff);
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style>