赵忠林
5e26fdc7fb
- 添加 .dockerignore 和 .env.example 配置文件 - 添加 .gitignore 忽略规则配置 - 创建服务端代理API路由（_file、_modules、_server） - 集成 Ant Design Vue 组件库并配置SSR样式提取 - 定义API响应类型封装 - 创建基础布局组件（blank、console） - 实现应用中心页面和组件（AppsCenter） - 添加文章列表测试页面 - 配置控制台导航菜单结构 - 实现控制台头部组件 - 创建联系页面表单
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>
|