feat: 图片裁剪组件 & 头像上传

apps/web-antd/src/views/_core/profile/index.vue

@@ -23,7 +23,7 @@ onMounted(loadProfile);
   <Page>
     <div class="flex flex-col gap-[16px] lg:flex-row">
       <!-- 左侧 -->
-      <ProfilePanel :profile="profile" />
+      <ProfilePanel :profile="profile" @upload-finish="loadProfile" />
       <!-- 右侧 -->
       <SettingPanel v-if="profile" :profile="profile" @reload="loadProfile" />
     </div>

apps/web-antd/src/views/_core/profile/profile-panel.vue

@@ -1,22 +1,42 @@
 <script setup lang="ts">
 import type { UserProfile } from '#/api/system/profile/model';
 
+import { computed } from 'vue';
+
 import {
-  Avatar,
   Card,
   Descriptions,
   DescriptionsItem,
   Tag,
+  Tooltip,
 } from 'ant-design-vue';
 
-defineProps<{ profile?: UserProfile }>();
+import { userUpdateAvatar } from '#/api/system/profile';
+import { CropperAvatar } from '#/components/cropper';
+
+const props = defineProps<{ profile?: UserProfile }>();
+
+defineEmits<{
+  // 头像上传完毕
+  uploadFinish: [];
+}>();
+
+const avatar = computed(() => props.profile?.user.avatar ?? '');
 </script>
 
 <template>
   <Card :loading="!profile" class="h-full lg:w-1/3">
     <div v-if="profile" class="flex flex-col items-center gap-[24px]">
       <div class="flex flex-col items-center gap-[20px]">
-        <Avatar :size="96" :src="profile.user.avatar" />
+        <Tooltip title="点击上传头像">
+          <CropperAvatar
+            :show-btn="false"
+            :upload-api="userUpdateAvatar"
+            :value="avatar"
+            width="120"
+            @change="$emit('uploadFinish')"
+          />
+        </Tooltip>
         <div class="flex flex-col items-center gap-[8px]">
           <span class="text-foreground text-xl font-bold">
             {{ profile.user.nickName ?? '未知' }}