赵忠林
775841eed3
- 添加Docker相关配置文件(.dockerignore, .env.example, .gitignore) - 实现服务端API代理功能，支持文件、模块和服务器API转发 - 创建文章详情页、栏目文章列表页和单页内容展示页面 - 集成Ant Design Vue组件库并实现SSR样式提取功能 - 定义API响应数据结构类型和应用布局组件 - 开发开发者应用中心和文章管理页面 - 实现CMS导航菜单获取和多租户切换功能
87 lines
2.7 KiB
Vue
87 lines
2.7 KiB
Vue
<template>
|
|
<div class="mx-auto max-w-screen-md px-4 py-8">
|
|
<a-card title="个人资料" :bordered="false">
|
|
<div class="flex items-center gap-4">
|
|
<a-avatar :size="64" :src="avatarUrl">
|
|
<template v-if="!avatarUrl" #icon>
|
|
<UserOutlined />
|
|
</template>
|
|
</a-avatar>
|
|
<div class="min-w-0">
|
|
<div class="text-lg font-semibold text-gray-900">
|
|
{{ user?.nickname || user?.username || '未命名用户' }}
|
|
</div>
|
|
<div class="text-gray-500">
|
|
{{ user?.phone || (user as any)?.mobile || '' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a-divider />
|
|
|
|
<a-descriptions :column="1" size="small" bordered>
|
|
<a-descriptions-item label="用户ID">{{ user?.userId }}</a-descriptions-item>
|
|
<a-descriptions-item label="账号">{{ user?.username }}</a-descriptions-item>
|
|
<a-descriptions-item label="昵称">{{ user?.nickname }}</a-descriptions-item>
|
|
<a-descriptions-item label="手机号">{{ user?.phone || (user as any)?.mobile }}</a-descriptions-item>
|
|
<a-descriptions-item label="租户ID">{{ tenantId }}</a-descriptions-item>
|
|
</a-descriptions>
|
|
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<a-button @click="navigateTo('/')">返回首页</a-button>
|
|
<a-button danger type="primary" @click="logout">退出登录</a-button>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { message } from 'ant-design-vue'
|
|
import { UserOutlined } from '@ant-design/icons-vue'
|
|
import { getUserInfo } from '@/api/layout'
|
|
import type { User } from '@/api/system/user/model'
|
|
import { getTenantId } from '@/utils/domain'
|
|
import { getToken, removeToken } from '@/utils/token-util'
|
|
|
|
const user = ref<User | null>(null)
|
|
const tenantId = computed(() => getTenantId())
|
|
const avatarUrl = computed(() => {
|
|
const candidate =
|
|
user.value?.avatarUrl ||
|
|
user.value?.avatar ||
|
|
user.value?.merchantAvatar ||
|
|
user.value?.logo ||
|
|
''
|
|
if (typeof candidate !== 'string') return ''
|
|
const normalized = candidate.trim()
|
|
if (!normalized || normalized === 'null' || normalized === 'undefined') return ''
|
|
return normalized
|
|
})
|
|
|
|
function logout() {
|
|
removeToken()
|
|
try {
|
|
localStorage.removeItem('TenantId')
|
|
localStorage.removeItem('UserId')
|
|
} catch {
|
|
// ignore
|
|
}
|
|
navigateTo('/')
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (!getToken()) {
|
|
message.error('请先登录')
|
|
await navigateTo('/login?from=/profile')
|
|
return
|
|
}
|
|
try {
|
|
user.value = await getUserInfo()
|
|
} catch (e: unknown) {
|
|
console.error(e)
|
|
message.error('获取用户信息失败')
|
|
}
|
|
})
|
|
</script>
|