增加个人中心
This commit is contained in:
@@ -115,8 +115,8 @@ mvn spring-boot:run
|
||||
```
|
||||
|
||||
## 路径别名说明
|
||||
- `@gold` - 前端项目根目录的别名，指向 `frontend/app/web-gold/src`
|
||||
- 例如：`import tokenManager from '@gold/utils/token-manager'` 等价于 `import tokenManager from 'frontend/app/web-gold/src/utils/token-manager'`
|
||||
- @gold：前端项目根目录核心别名，固定指向 frontend/app/web-gold/src
|
||||
- 强制示例：import tokenManager from '@gold/utils/token-manager' 指向 frontend/app/web-gold/src/utils/token-manager
|
||||
|
||||
## 重要提醒
|
||||
1. **OSS配额检查**: 文件上传前必须检查用户/系统配额
|
||||
|
||||
@@ -5,7 +5,6 @@ import router from '@/router'
|
||||
import { getUserInfo,clearUserInfoCache } from './userinfo'
|
||||
|
||||
const SERVER_BASE = API_BASE.APP_MEMBER
|
||||
const TIK_BASE = API_BASE.APP_TIK
|
||||
|
||||
/**
|
||||
* 保存token
|
||||
@@ -201,7 +200,7 @@ export function getUserInfoAuth() {
|
||||
* @returns {Promise<Object>} 用户档案
|
||||
*/
|
||||
export async function getUserProfile() {
|
||||
const { data } = await api.get(`${TIK_BASE}/muye/member-profile/get`)
|
||||
const { data } = await api.get(`/webApi/api/tik/muye/member-profile/get`)
|
||||
return data
|
||||
}
|
||||
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -105,7 +105,8 @@ function buildRoutesFromNav(config) {
|
||||
const hiddenRoutes = [
|
||||
{ path: 'trends/heat', name: '热度分析', component: () => import('../views/trends/Heat.vue'), meta: { hidden: true } },
|
||||
{ path: 'material/mix-task', name: '混剪任务', component: () => import('../views/material/MixTaskList.vue'), meta: { hidden: true } },
|
||||
{ path: 'material/group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue'), meta: { hidden: true } }
|
||||
{ path: 'material/group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue'), meta: { hidden: true } },
|
||||
{ path: 'user/profile', name: '个人中心', component: () => import('../views/user/Profile.vue'), meta: { hidden: true } }
|
||||
]
|
||||
|
||||
hiddenRoutes.forEach(route => {
|
||||
|
||||
@@ -15,6 +15,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
const userId = ref('')
|
||||
const nickname = ref('')
|
||||
const avatar = ref('')
|
||||
const mobile = ref('')
|
||||
|
||||
// 档案数据（来自 MemberUserProfile）
|
||||
const profile = ref(null)
|
||||
@@ -33,6 +34,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
userId: userId.value,
|
||||
nickname: nickname.value,
|
||||
avatar: avatar.value,
|
||||
mobile: mobile.value,
|
||||
profile: profile.value,
|
||||
}))
|
||||
|
||||
@@ -47,6 +49,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
userId.value = saved.userId || ''
|
||||
nickname.value = saved.nickname || ''
|
||||
avatar.value = saved.avatar || ''
|
||||
mobile.value = saved.mobile || ''
|
||||
profile.value = saved.profile || null
|
||||
}
|
||||
|
||||
@@ -60,6 +63,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
userId.value = String(data.userId || data.id || '')
|
||||
nickname.value = data.nickname || ''
|
||||
avatar.value = data.avatar || ''
|
||||
mobile.value = data.mobile || ''
|
||||
}
|
||||
|
||||
// 获取用户信息
|
||||
@@ -70,6 +74,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
userId.value = String(userInfo.id || userInfo.userId || '')
|
||||
nickname.value = userInfo.nickname || ''
|
||||
avatar.value = userInfo.avatar || ''
|
||||
mobile.value = userInfo.mobile || ''
|
||||
isLoggedIn.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -102,6 +107,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
userId.value = ''
|
||||
nickname.value = ''
|
||||
avatar.value = ''
|
||||
mobile.value = ''
|
||||
profile.value = null
|
||||
|
||||
await remove(STORAGE_KEY)
|
||||
@@ -113,6 +119,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
userId,
|
||||
nickname,
|
||||
avatar,
|
||||
mobile,
|
||||
profile,
|
||||
remainingPoints,
|
||||
remainingStorage,
|
||||
|
||||
385
frontend/app/web-gold/src/views/user/Profile.vue
Normal file
385
frontend/app/web-gold/src/views/user/Profile.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import {
|
||||
UserOutlined,
|
||||
DatabaseOutlined,
|
||||
WalletOutlined,
|
||||
PayCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
SafetyCertificateOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 存储空间数据
|
||||
const GB_TO_MB = 1024
|
||||
const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
|
||||
const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
|
||||
const storagePercent = computed(() => {
|
||||
if (totalStorage.value === 0) return 0
|
||||
return Math.min(100, (usedStorage.value / totalStorage.value) * 100)
|
||||
})
|
||||
|
||||
// 格式化函数
|
||||
function formatStorage(mb) {
|
||||
if (mb >= 1024) {
|
||||
return (mb / 1024).toFixed(1) + ' GB'
|
||||
}
|
||||
return Math.round(mb) + ' MB'
|
||||
}
|
||||
|
||||
function formatMoney(amount) {
|
||||
return amount?.toFixed(2) || '0.00'
|
||||
}
|
||||
|
||||
function formatCredits(credits) {
|
||||
return credits?.toLocaleString() || '0'
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '未设置'
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}).replace(/\//g, '-')
|
||||
}
|
||||
|
||||
// 脱敏手机号
|
||||
function maskMobile(mobile) {
|
||||
if (!mobile) return '未设置'
|
||||
return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (userStore.isLoggedIn) {
|
||||
// 获取用户基本信息和档案信息
|
||||
if (!userStore.mobile) {
|
||||
await userStore.fetchUserInfo()
|
||||
}
|
||||
if (!userStore.profile) {
|
||||
await userStore.fetchUserProfile()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">个人中心</h1>
|
||||
<p class="page-subtitle">管理您的账户信息和资源使用情况</p>
|
||||
</div>
|
||||
|
||||
<a-row :gutter="[24, 24]">
|
||||
<!-- 左侧：用户信息卡片 -->
|
||||
<a-col :xs="24" :lg="8">
|
||||
<a-card class="user-card" :bordered="false">
|
||||
<div class="user-info-header">
|
||||
<div class="avatar-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
<h2 class="user-name">{{ userStore.displayName }}</h2>
|
||||
<div class="user-id">ID: {{ userStore.userId || '未设置' }}</div>
|
||||
<div class="user-role-badge">普通用户</div>
|
||||
</div>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<div class="user-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">注册时间</span>
|
||||
<span class="detail-value">{{ formatDate(userStore.profile?.registerTime || userStore.profile?.createTime) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">绑定手机</span>
|
||||
<span class="detail-value">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 右侧：资源统计与活动 -->
|
||||
<a-col :xs="24" :lg="16">
|
||||
<!-- 资源概览卡片 -->
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :xs="24" :sm="12" :md="8">
|
||||
<a-card class="stat-card" :bordered="false">
|
||||
<div class="stat-icon-wrapper blue">
|
||||
<DatabaseOutlined />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">存储空间</div>
|
||||
<div class="stat-value">{{ formatStorage(usedStorage) }} <span class="stat-unit">/ {{ formatStorage(totalStorage) }}</span></div>
|
||||
<a-progress
|
||||
:percent="storagePercent"
|
||||
:show-info="false"
|
||||
:stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }"
|
||||
size="small"
|
||||
class="stat-progress"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :md="8">
|
||||
<a-card class="stat-card" :bordered="false">
|
||||
<div class="stat-icon-wrapper purple">
|
||||
<WalletOutlined />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">剩余积分</div>
|
||||
<div class="stat-value">{{ formatCredits(userStore.remainingPoints) }}</div>
|
||||
<div class="stat-desc">用于AI生成消耗</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :md="8">
|
||||
<a-card class="stat-card" :bordered="false">
|
||||
<div class="stat-icon-wrapper orange">
|
||||
<PayCircleOutlined />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">账户余额</div>
|
||||
<div class="stat-value">¥{{ formatMoney(userStore.totalRecharge) }}</div>
|
||||
<div class="stat-desc">累计充值金额</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 最近活动/设置占位 -->
|
||||
<a-card title="最近活动" :bordered="false" class="activity-card mt-6">
|
||||
<template #extra>
|
||||
<a href="#">查看全部</a>
|
||||
</template>
|
||||
<a-list item-layout="horizontal" :data-source="[]">
|
||||
<template #renderItem="{ item }">
|
||||
<!-- 这里是空列表，暂时留白 -->
|
||||
</template>
|
||||
<div class="empty-state">
|
||||
<ClockCircleOutlined class="empty-icon" />
|
||||
<p>暂无最近活动记录</p>
|
||||
</div>
|
||||
</a-list>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* User Card */
|
||||
.user-card {
|
||||
text-align: center;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
background: var(--color-bg-container, #fff);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user-info-header {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid rgba(var(--primary-color-rgb, 24, 144, 255), 0.1);
|
||||
}
|
||||
|
||||
.user-avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
border: 4px solid rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.user-id {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.user-role-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--color-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Stat Cards */
|
||||
.stat-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.blue {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.purple {
|
||||
background: rgba(114, 46, 209, 0.1);
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.orange {
|
||||
background: rgba(250, 173, 20, 0.1);
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-third);
|
||||
}
|
||||
|
||||
.stat-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-third);
|
||||
}
|
||||
|
||||
.stat-progress {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: var(--color-text-third);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 24px;
|
||||
color: #52c41a;
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@ import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
|
||||
*/
|
||||
@Tag(name = "用户 APP - 会员档案")
|
||||
@RestController
|
||||
@RequestMapping("/api/muye/member-profile")
|
||||
@RequestMapping("/api/tik/muye/member-profile")
|
||||
@Validated
|
||||
public class AppMemberUserProfileController {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user