fix:修复了个人中心,将前端的字段与后端对应,确保数据能够完全显示

This commit is contained in:
Maple 2025-07-31 15:26:28 +08:00
parent 1d96aad163
commit 54d9557a89
2 changed files with 59 additions and 55 deletions

View File

@ -1,64 +1,64 @@
/** 用户信息响应类型 */ /** 用户信息响应类型 */
export interface UserInfoResponse { export interface UserInfoResponse {
code: number; code: number
status: number; status: number
success: boolean; success: boolean
msg: string; msg: string
data: { data: {
user: UserDetail; user: UserDetail
dept: DeptDetail; dept: DeptDetail
roles: RoleDetail[]; roles: RoleDetail[]
posts: any[]; posts: any[]
}; }
} }
/** 用户详细信息 */ /** 用户详细信息 */
export interface UserDetail { export interface UserDetail {
userId: string; userId: string
account: string; account: string
name: string; name: string
status: number; status: number
userCode: string; userCode: string
userStatus: string; userStatus: string
userType: string; userType: string
mobile: string; mobile: string
createTime: string; createTime: string
avatar?: string; avatar?: string
} }
/** 部门详细信息 */ /** 部门详细信息 */
export interface DeptDetail { export interface DeptDetail {
deptId: string; deptId: string
deptName: string; deptName: string
parentId: string; parentId: string
orderNum: number; orderNum: number
leaderId: string; leaderId: string
status: string; status: string
} }
/** 角色详细信息 */ /** 角色详细信息 */
export interface RoleDetail { export interface RoleDetail {
roleId: string; roleId: string
roleName: string; roleName: string
roleCode: string | null; roleCode: string | null
roleKey: string; roleKey: string
} }
/** 用户类型 - 兼容旧版本 */ /** 用户类型 - 兼容旧版本 */
export interface UserInfo { export interface UserInfo {
id: string; id: string
username: string; username: string
nickname: string; nickname: string
gender: 0 | 1 | 2; gender: 0 | 1 | 2
email: string; email: string
phone: string; phone: string
avatar: string; avatar: string
pwdResetTime: string; pwdResetTime: string
pwdExpired: boolean; pwdExpired: boolean
registrationDate: string; registrationDate: string
deptName: string; deptName: string
roles: string[]; roles: string[]
permissions: string[]; permissions: string[]
} }
/** 路由类型 */ /** 路由类型 */

View File

@ -17,25 +17,25 @@
</template> </template>
</a-upload> </a-upload>
<div class="name"> <div class="name">
<span style="margin-right: 10px">{{ userInfo.nickname }}</span> <span style="margin-right: 10px">{{ userInfo.name }}</span>
<icon-edit :size="16" class="btn" @click="onUpdate" /> <icon-edit :size="16" class="btn" @click="onUpdate" />
</div> </div>
<div class="id"> <div class="id">
<GiSvgIcon name="id" :size="16" /> <GiSvgIcon name="id" :size="16" />
<span>{{ userInfo.id }}</span> <span>{{ userInfo.userId }}</span>
</div> </div>
</section> </section>
<footer> <footer>
<a-descriptions :column="4" size="large"> <a-descriptions :column="4" size="large">
<a-descriptions-item :span="4"> <a-descriptions-item :span="4">
<template #label> <icon-user /><span style="margin-left: 5px">用户名</span></template> <template #label> <icon-user /><span style="margin-left: 5px">用户名</span></template>
{{ userInfo.username }} {{ userInfo.account }}
<icon-man v-if="userInfo.gender === 1" style="color: #19bbf1" /> <icon-man v-if="userInfo.gender === 1" style="color: #19bbf1" />
<icon-woman v-else-if="userInfo.gender === 2" style="color: #fa7fa9" /> <icon-woman v-else-if="userInfo.gender === 2" style="color: #fa7fa9" />
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item :span="4"> <a-descriptions-item :span="4">
<template #label> <icon-phone /><span style="margin-left: 5px">手机</span></template> <template #label> <icon-phone /><span style="margin-left: 5px">手机</span></template>
{{ userInfo.phone || '暂无' }} {{ userInfo.mobile || '暂无' }}
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item :span="4"> <a-descriptions-item :span="4">
<template #label> <icon-email /><span style="margin-left: 5px">邮箱</span></template> <template #label> <icon-email /><span style="margin-left: 5px">邮箱</span></template>
@ -47,12 +47,12 @@
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item :span="4"> <a-descriptions-item :span="4">
<template #label> <icon-user-group /><span style="margin-left: 5px">角色</span></template> <template #label> <icon-user-group /><span style="margin-left: 5px">角色</span></template>
{{ userInfo.roles.join('') }} {{ userInfo.roles?.map(role => role.roleName).join(', ') || '暂无' }}
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
</footer> </footer>
</div> </div>
<div class="footer">注册于 {{ userInfo.registrationDate }}</div> <div class="footer">注册于 {{ userInfo.createTime }}</div>
</a-card> </a-card>
<a-modal v-model:visible="visible" title="上传头像" :width="width >= 400 ? 400 : '100%'" :footer="false" draggable @close="reset"> <a-modal v-model:visible="visible" title="上传头像" :width="width >= 400 ? 400 : '100%'" :footer="false" draggable @close="reset">
@ -102,19 +102,22 @@ import { uploadAvatar } from '@/apis/system'
import 'vue-cropper/dist/index.css' import 'vue-cropper/dist/index.css'
import { useUserStore } from '@/stores' import { useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar' import getAvatar from '@/utils/avatar'
import XG_DEBUG from 'xgplayer/es/utils/debug'
import config = XG_DEBUG.config
const { width } = useWindowSize() const { width } = useWindowSize()
const userStore = useUserStore() const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo) const userInfo = computed(() => userStore.userInfo)
const avatar = { const avatar = computed(() => ({
uid: '-2', uid: '-2',
name: 'avatar.png', name: 'avatar.png',
url: userInfo.value.avatar, url: userInfo.value.avatar || getAvatar(userInfo.value.avatar, undefined),
} }))
const avatarList = ref<FileItem[]>([avatar])
const fileRef = ref(reactive({ name: 'avatar.png' })) const avatarList = computed<FileItem[]>(() => [avatar.value])
const options: cropperOptions = reactive({ const fileRef = ref<File | null>(null)
const options = reactive<cropperOptions>({
img: '', img: '',
autoCrop: true, autoCrop: true,
autoCropWidth: 160, autoCropWidth: 160,
@ -128,13 +131,14 @@ const options: cropperOptions = reactive({
outputType: 'png', outputType: 'png',
}) })
const visible = ref(false) const visible = ref(false)
// //
const onBeforeUpload = (file: File): boolean => { const onBeforeUpload = (file: File): boolean => {
fileRef.value = file fileRef.value = file
const reader = new FileReader() const reader = new FileReader()
reader.readAsDataURL(file) reader.readAsDataURL(file)
reader.onload = () => { reader.onload = () => {
options.img = reader.result options.img = reader.result as string
} }
visible.value = true visible.value = true
return false return false