KTeam/kt-template-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复个人中心切页空白

Browse Source
This commit is contained in:
sunlei 2026-06-08 09:05:20 +08:00
parent 5af4b4d297
commit f25b84388c
1 changed files with 60 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
apps/web-antdv-next/src/views/_core/profile/index.vue
View File

@ -155,66 +155,68 @@ async function rotateImage(src: string, degrees: number) {
} }
</script> </script>
<template> <template>
<Profile <div class="h-full">
v-model:model-value="tabsValue" <Profile
avatar-editable v-model:model-value="tabsValue"
title="个人中心" avatar-editable
:user-info="userStore.userInfo" title="个人中心"
:tabs="tabs" :user-info="userStore.userInfo"
@avatar-click="openAvatarModal" :tabs="tabs"
> @avatar-click="openAvatarModal"
<template #content> >
<ProfileBase v-if="tabsValue === 'basic'" /> <template #content>
</template> <ProfileBase v-if="tabsValue === 'basic'" />
</Profile> </template>
</Profile>
<Modal <Modal
v-model:open="avatarModalOpen" v-model:open="avatarModalOpen"
title="更换头像" title="更换头像"
ok-text="保存头像" ok-text="保存头像"
cancel-text="取消" cancel-text="取消"
:confirm-loading="avatarSaving" :confirm-loading="avatarSaving"
:ok-button-props="{ disabled: !avatarImage }" :ok-button-props="{ disabled: !avatarImage }"
width="720px" width="720px"
@ok="saveAvatar" @ok="saveAvatar"
@after-close="resetAvatarCrop" @after-close="resetAvatarCrop"
> >
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-3"> <div class="flex flex-wrap items-center gap-3">
<Upload <Upload
accept="image/*" accept="image/*"
:max-count="1" :max-count="1"
:before-upload="preventAutoUpload" :before-upload="preventAutoUpload"
:show-upload-list="false" :show-upload-list="false"
@change="selectAvatarFile" @change="selectAvatarFile"
>
<Button>选择图片</Button>
</Upload>
<span class="text-sm text-foreground/70">
{{ avatarFileName || '请选择图片后裁切头像' }}
</span>
</div>
<div v-if="avatarImage" class="flex flex-wrap items-start gap-5">
<VCropper
ref="cropperRef"
:img="avatarImage"
aspect-ratio="1:1"
:width="420"
:height="420"
/>
<div class="flex min-w-32 flex-col gap-2">
<Button @click="rotateAvatar(-90)">向左旋转</Button>
<Button @click="rotateAvatar(90)">向右旋转</Button>
</div>
</div>
<div
v-else
class="flex h-72 items-center justify-center rounded border border-dashed text-sm text-foreground/60"
> >
<Button>选择图片</Button> 点击“选择图片”上传头像素材
</Upload>
<span class="text-sm text-foreground/70">
{{ avatarFileName || '请选择图片后裁切头像' }}
</span>
</div>
<div v-if="avatarImage" class="flex flex-wrap items-start gap-5">
<VCropper
ref="cropperRef"
:img="avatarImage"
aspect-ratio="1:1"
:width="420"
:height="420"
/>
<div class="flex min-w-32 flex-col gap-2">
<Button @click="rotateAvatar(-90)">向左旋转</Button>
<Button @click="rotateAvatar(90)">向右旋转</Button>
</div> </div>
</div> </div>
</Modal>
<div </div>
v-else
class="flex h-72 items-center justify-center rounded border border-dashed text-sm text-foreground/60"
>
点击“选择图片”上传头像素材
</div>
</div>
</Modal>
</template> </template>