feat: 功能
This commit is contained in:
@@ -226,6 +226,10 @@ async function handleLoginSuccess(info) {
|
||||
credits: userInfo.credits ?? 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 登录成功后获取完整的用户信息
|
||||
await userStore.fetchUserInfo()
|
||||
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { setDevToken, getDevToken } from '@/utils/token-manager'
|
||||
import { setDevToken, getDevToken } from '@gold/utils/token-manager'
|
||||
|
||||
const token = ref('')
|
||||
const isVisible = ref(true)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import LoginModal from '@/components/LoginModal.vue'
|
||||
import TokenInput from '@/components/TokenInput.vue'
|
||||
import UserDropdown from '@/components/UserDropdown.vue'
|
||||
|
||||
const styles = {
|
||||
background: 'var(--color-surface)',
|
||||
@@ -12,6 +12,17 @@ const styles = {
|
||||
const userStore = useUserStore()
|
||||
const showLogin = ref(false)
|
||||
|
||||
// 计算是否应该显示用户组件
|
||||
// 判断用户是否有用户名，有用户名说明用户信息已加载完成
|
||||
// 使用 userStore.displayName 作为响应式依赖，确保用户信息变化时更新
|
||||
const shouldShowUser = computed(() => {
|
||||
// 检查用户是否有用户名（nickname 或 wechatNickname）
|
||||
// 有用户名说明用户信息已加载，可以显示用户组件
|
||||
const hasUserName = !!userStore.displayName && userStore.displayName !== '未命名用户'
|
||||
|
||||
return hasUserName
|
||||
})
|
||||
|
||||
// function go(path) {
|
||||
// router.push(path)
|
||||
// }
|
||||
@@ -28,11 +39,9 @@ const showLogin = ref(false)
|
||||
<!-- 左侧可放 logo 或其他内容 -->
|
||||
</div>
|
||||
<div class="flex items-center gap-4 pr-[35px]">
|
||||
<!-- Token 输入（仅开发/测试环境） -->
|
||||
<TokenInput />
|
||||
|
||||
<template v-if="userStore.isLoggedIn && userStore.displayAvatar">
|
||||
<img class="w-8 h-8 rounded-full" :src="userStore.displayAvatar" alt="avatar" />
|
||||
<template v-if="shouldShowUser">
|
||||
<UserDropdown />
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn-primary-nav" @click="showLogin = true">免费试用</button>
|
||||
|
||||
510
frontend/app/web-gold/src/components/UserDropdown.vue
Normal file
510
frontend/app/web-gold/src/components/UserDropdown.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const showDropdown = ref(false)
|
||||
|
||||
// 计算会员状态
|
||||
const isVip = computed(() => userStore.vipLevel > 0)
|
||||
const vipLevelText = computed(() => {
|
||||
if (userStore.vipLevel === 0) return '普通用户'
|
||||
if (userStore.vipLevel === 1) return 'VIP会员'
|
||||
if (userStore.vipLevel === 2) return '高级VIP'
|
||||
return `VIP${userStore.vipLevel}`
|
||||
})
|
||||
|
||||
// 计算存储空间（根据VIP等级设置不同总空间）
|
||||
const totalStorage = computed(() => {
|
||||
// VIP等级越高，总空间越大
|
||||
if (userStore.vipLevel >= 2) return 50 * 1024 // 50GB
|
||||
if (userStore.vipLevel === 1) return 20 * 1024 // 20GB
|
||||
return 10 * 1024 // 10GB (普通用户)
|
||||
})
|
||||
|
||||
const usedStorage = computed(() => {
|
||||
// 根据credits估算已用空间（这里可以根据实际业务逻辑调整）
|
||||
// 假设每1000积分对应100MB存储使用
|
||||
const estimatedFromCredits = (userStore.credits / 1000) * 100
|
||||
// 默认已用30%，但不超过总空间的80%
|
||||
const defaultUsed = totalStorage.value * 0.3
|
||||
return Math.min(Math.max(defaultUsed, estimatedFromCredits), totalStorage.value * 0.8)
|
||||
})
|
||||
|
||||
const availableStorage = computed(() => totalStorage.value - usedStorage.value)
|
||||
const storagePercent = computed(() => (usedStorage.value / totalStorage.value) * 100)
|
||||
|
||||
// 格式化存储空间显示
|
||||
function formatStorage(mb) {
|
||||
if (mb >= 1024) {
|
||||
return (mb / 1024).toFixed(1) + ' GB'
|
||||
}
|
||||
return Math.round(mb) + ' MB'
|
||||
}
|
||||
|
||||
// 格式化余额
|
||||
function formatBalance(balance) {
|
||||
return balance.toFixed(2)
|
||||
}
|
||||
|
||||
// 格式化积分
|
||||
function formatCredits(credits) {
|
||||
return credits.toLocaleString()
|
||||
}
|
||||
|
||||
// 处理鼠标进入
|
||||
function handleMouseEnter() {
|
||||
showDropdown.value = true
|
||||
}
|
||||
|
||||
// 处理鼠标离开
|
||||
function handleMouseLeave() {
|
||||
showDropdown.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="user-dropdown-wrapper"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<!-- 圆形头像 -->
|
||||
<div class="user-avatar-container">
|
||||
<img
|
||||
v-if="userStore.displayAvatar"
|
||||
class="user-avatar"
|
||||
:src="userStore.displayAvatar"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div v-else class="user-avatar-placeholder">
|
||||
{{ userStore.displayName?.charAt(0) || 'U' }}
|
||||
</div>
|
||||
<!-- VIP标识 -->
|
||||
<div v-if="isVip" class="vip-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M6 0L7.5 4.5L12 6L7.5 7.5L6 12L4.5 7.5L0 6L4.5 4.5L6 0Z" fill="#FFD700"/>
|
||||
</svg>
|
||||
</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>
|
||||
<span v-if="isVip" class="vip-tag">{{ vipLevelText }}</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">
|
||||
<path d="M8 0L10 6L16 8L10 10L8 16L6 10L0 8L6 6L8 0Z" fill="currentColor" opacity="0.6"/>
|
||||
</svg>
|
||||
<span>会员状态</span>
|
||||
</div>
|
||||
<div class="info-value" :class="{ 'vip-text': isVip }">
|
||||
{{ vipLevelText }}
|
||||
</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">
|
||||
<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.credits) }}
|
||||
</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">
|
||||
¥{{ formatBalance(userStore.balance) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<div class="dropdown-footer">
|
||||
<button class="action-btn" @click="userStore.logout">
|
||||
<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>
|
||||
|
||||
<style scoped>
|
||||
.user-dropdown-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user-avatar-container {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.user-avatar-container:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--color-border);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
|
||||
.user-avatar-placeholder {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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: 16px;
|
||||
border: 2px solid var(--color-border);
|
||||
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);
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--color-surface);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--color-border);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.vip-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.vip-text {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user