修复裁剪头像代码

package.json

@@ -22,6 +22,7 @@
     "os": "^0.1.2",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
+    "vue-img-cutter": "^3.0.7",
     "vue-router": "^4.6.3",
     "vue3-pdf-app": "^1.0.3",
     "xlsx": "^0.18.5"
@@ -29,7 +30,6 @@
   "devDependencies": {
     "@types/node": "^24.10.7",
     "@vitejs/plugin-vue": "^6.0.1",
-    "sass-embedded": "^1.93.3",
     "typescript": "^5.9.3",
     "unplugin-auto-import": "^20.2.0",
     "unplugin-vue-components": "^30.0.0",

src/api/babyhealth.js

@@ -10,8 +10,8 @@ import request from "@/utils/request";
  */
 export function getBabyList() {
   return request({
-    url: "/admin/babys/list",
+    url: '/admin/baby/list',
-    method: "get",
+    method: 'get'
   });
 }
 
@@ -43,17 +43,12 @@ export function createBaby(data) {
   });
 }
 
-/**
+// 更新宝贝信息
- * 更新宝贝数据
- * @param {number} id 宝贝ID
- * @param {Object} data 更新的数据
- * @returns {Promise}
- */
 export function editBaby(id, data) {
   return request({
-    url: `/admin/babys/${id}`,
+    url: `/admin/baby/update/${id}`,
-    method: "post",
+    method: 'post',
-    data: { ...data, _method: 'PUT' }
+    data: data
   });
 }
 
@@ -117,7 +112,7 @@ export function getUserList() {
  */
 export function getUserDetail(id) {
   return request({
-    url: `/admin/babyhealthUser/${id}`,
+    url: `/admin/babyhealthUser/detail/${id}`,
     method: "get",
   });
 }
@@ -129,7 +124,7 @@ export function getUserDetail(id) {
  */
 export function createUser(data) {
   return request({
-    url: "/admin/babyhealthUser",
+    url: "/admin/babyhealthUser/create",
     method: "post",
     data: data,
     headers: {
@@ -146,7 +141,7 @@ export function createUser(data) {
  */
 export function updateUser(id, data) {
   return request({
-    url: `/admin/babyhealthUser/${id}`,
+    url: `/admin/babyhealthUser/update/${id}`,
     method: "post",
     data: data,
     headers: {
@@ -162,7 +157,7 @@ export function updateUser(id, data) {
  */
 export function deleteUser(id) {
   return request({
-    url: `/admin/babyhealthUser/${id}`,
+    url: `/admin/babyhealthUser/delete/${id}`,
     method: "delete",
   });
 }

src/types/vue-cropper.d.ts

@@ -0,0 +1,4 @@
+declare module 'vue-cropper' {
+  import { Component } from 'vue'
+  export const VueCropper: Component
+}

src/views/apps/babyhealth/babys/components/bindParents.vue

@@ -298,7 +298,7 @@ const handleSubmit = async () => {
 };
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .baby-info-display {
   display: flex;
   align-items: center;

src/views/apps/babyhealth/babys/components/edit.vue

@@ -1,37 +1,44 @@
 <template>
-  <el-dialog
+  <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑宝贝' : '添加宝贝'" width="600px" :close-on-click-modal="false"
-    v-model="dialogVisible"
+    @close="handleClose">
-    :title="isEdit ? '编辑宝贝' : '添加宝贝'"
-    width="600px"
-    :close-on-click-modal="false"
-    @close="handleClose"
-  >
     <div class="dialog-content">
-      <!-- 头像上传区域 -->
-      <div class="avatar-section">
-        <el-upload
-          :show-file-list="false"
-          :before-upload="beforeAvatarUpload"
-          :http-request="uploadFile"
-          class="avatar-uploader"
-        >
-          <el-image
-            v-if="formData.avatar"
-            :src="getEnvUrl(formData.avatar)"
-            class="avatar-preview"
-            fit="cover"
-            :preview-src-list="[getEnvUrl(formData.avatar)]"
-            :initial-index="0"
-          />
-          <div v-else class="avatar-placeholder">
-            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
-            <span class="avatar-tip">点击上传头像</span>
-          </div>
-        </el-upload>
-      </div>
 
       <!-- 表单区域 -->
       <el-form ref="editFormRef" :model="formData" :rules="formRules" label-width="100px">
+        <el-form-item label="头像" prop="avatar">
+          <div class="preview-image">
+            <img v-if="formData.avatar" :src="getEnvUrl(formData.avatar)" class="preview-img" />
+            <div v-else class="no-preview">
+              <el-icon>
+                <Picture />
+              </el-icon>
+              <span>头像预览</span>
+            </div>
+          </div>
+
+          <!-- 裁剪区域 -->
+          <div class="cutter-container">
+            <img-cutter ref="imgCutterRef" :img="formData.avatar ? getEnvUrl(formData.avatar) : ''" :cutWidth="400"
+              :cutHeight="400" :rate="'1:1'" :fixedNumber="[1, 1]" :fixed="true" :fixedBox="true" :original="false"
+              :autoCrop="true" :autoCropWidth="300" :autoCropHeight="300" :centerBox="true" :showChooseBtn="true"
+              :boxWidth="300" :boxHeight="300" @cutDown="handleCut" class="img-cutter-wrapper">
+              <template #cut>
+                <div style="padding: 20px; text-align: center;">
+                  <el-button type="primary" size="small" @click="handleCropClick">确认裁剪</el-button>
+                </div>
+              </template>
+              <template #placeholder>
+                <div class="avatar-uploader">
+                  <el-icon class="avatar-uploader-icon">
+                    <Plus />
+                  </el-icon>
+                  <span class="upload-text">点击上传头像</span>
+                </div>
+              </template>
+            </img-cutter>
+          </div>
+        </el-form-item>
+
         <el-form-item label="姓名" prop="name">
           <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
         </el-form-item>
@@ -48,43 +55,23 @@
         </el-form-item>
 
         <el-form-item label="出生日期" prop="birth">
-          <el-date-picker
+          <el-date-picker v-model="formData.birth" type="date" placeholder="选择出生日期" style="width: 100%"
-            v-model="formData.birth"
+            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
-            type="date"
-            placeholder="选择出生日期"
-            style="width: 100%"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-          />
         </el-form-item>
 
         <el-form-item label="身高" prop="height">
-          <el-input
+          <el-input v-model="formData.height" :min="0" :max="200" :precision="1" :step="0.5" controls-position="right"
-            v-model="formData.height"
+            style="width: 100%">
-                :min="0"
-                :max="200"
-                :precision="1"
-                :step="0.5"
-                controls-position="right"
-                style="width: 100%"
-          >
             <template #append>CM</template>
           </el-input>
         </el-form-item>
 
         <el-form-item label="体重" prop="weight">
-          <el-input
+          <el-input v-model="formData.weight" :min="0" :max="50" :precision="2" :step="0.01" controls-position="right"
-            v-model="formData.weight"
+            style="width: 100%">
-            :min="0"
-            :max="50"
-                :precision="2"
-                :step="0.01"
-                controls-position="right"
-                style="width: 100%"
-          >
             <template #append>KG</template>
-        </el-input>
+          </el-input>
-      </el-form-item>
+        </el-form-item>
 
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="formData.status">
@@ -99,16 +86,37 @@
       <el-button @click="handleClose">取消</el-button>
       <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
     </template>
+
   </el-dialog>
+
+  <!-- <ImgCutter :cutWidth="300" :cutHeight="300" :tool="true" V-on:cutDown="handleCut" /> -->
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue';
+import { ref, reactive, watch, nextTick } from 'vue';
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
-import { Plus } from '@element-plus/icons-vue';
+import { Plus, Picture } from '@element-plus/icons-vue';
 import { createBaby, editBaby } from '@/api/babyhealth';
 import { uploadAvatar } from '@/api/file';
 
+import ImgCutter from 'vue-img-cutter';
+
+// 定义 ImgCutter 实例类型
+interface ImgCutterInstance {
+  chooseImg: () => void;
+  resetCrop: () => void;
+  crop: () => void;
+}
+
+// 定义裁剪数据结构类型
+interface CroppedData {
+  blob: Blob;
+  dataURL: string;
+  file: File;
+  fileName: string;
+  index: number | null;
+}
+
 interface BabyFormData {
   id: number;
   name: string;
@@ -121,6 +129,16 @@ interface BabyFormData {
   status: number;
 }
 
+
+const imgCutterRef = ref<ImgCutterInstance | null>(null);
+
+// 处理裁剪按钮点击
+const handleCropClick = () => {
+  if (imgCutterRef.value) {
+    (imgCutterRef.value as any).crop();
+  }
+};
+
 const props = defineProps<{
   visible: boolean;
   editData?: BabyFormData;
@@ -134,7 +152,48 @@ const emit = defineEmits<{
 const dialogVisible = ref(false);
 const loading = ref(false);
 const editFormRef = ref<FormInstance>();
-const fileList = ref<any[]>([]);
+const cropDialogVisible = ref(false);
+const croppingImage = ref('');
+let selectedFile: File | null = null;
+// 图片大小限制 (5MB)
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
+
+// 支持的图片类型
+const SUPPORTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
+
+// 处理裁剪完成
+const handleCut = async (data: CroppedData) => {
+  try {
+    // 创建FormData
+    const uploadFormData = new FormData();
+    uploadFormData.append('file', data.file);
+    uploadFormData.append('cate', 'baby_avatar');
+
+    // 上传裁剪后的图片
+    const response = await uploadAvatar(uploadFormData);
+
+    if (response.code === 200 || response.code === 201) {
+      const avatarUrl = response.data.url || response.data.path || '';
+      formData.avatar = avatarUrl;
+
+      if (response.code === 201) {
+        ElMessage.info("文件已存在，使用已有图片");
+      } else {
+        ElMessage.success("头像上传成功");
+      }
+    } else {
+      ElMessage.error(response.msg || "上传失败");
+    }
+  } catch (error) {
+    console.error('上传失败:', error);
+    ElMessage.error("上传失败，请重试");
+  } finally {
+    // 清理
+    croppingImage.value = '';
+    selectedFile = null;
+  }
+};
+
 
 const formData = reactive<BabyFormData>({
   id: 0,
@@ -175,7 +234,6 @@ const resetForm = () => {
     avatar: '',
     status: 1
   });
-  fileList.value = [];
 };
 
 // 关闭对话框
@@ -199,86 +257,12 @@ watch(() => props.editData, (data) => {
   if (data) {
     isEdit.value = true;
     Object.assign(formData, data);
-    if (data.avatar) {
-      fileList.value = [
-        {
-          name: 'avatar',
-          url: data.avatar
-        }
-      ];
-    } else {
-      fileList.value = [];
-    }
   } else {
     isEdit.value = false;
     resetForm();
   }
 }, { immediate: true });
 
-// 头像上传前校验
-const beforeAvatarUpload = (file: any) => {
-  const isImage = file.type.startsWith('image/');
-  const isLt5M = file.size / 1024 / 1024 < 5;
-
-  if (!isImage) {
-    ElMessage.error('仅支持图片格式');
-    return false;
-  }
-
-  if (!isLt5M) {
-    ElMessage.error('图片大小不能超过5MB');
-    return false;
-  }
-
-  return true;
-};
-
-// 上传文件到服务器
-const uploadFile = async (options: any) => {
-  const { file } = options;
-  const uploadFormData = new FormData();
-  uploadFormData.append('file', file);
-
-  try {
-    // 使用uploadAvatar接口上传文件
-    const response = await uploadAvatar(uploadFormData, { cate: 'baby_avatar' });
-
-    if (response.code === 200 || response.code === 201) {
-      // 更新宝贝头像
-      const avatarUrl = response.data.url || response.data.path || '';
-      formData.avatar = avatarUrl;
-
-      if (response.code === 201) {
-        ElMessage.info("文件已存在，使用已有图片");
-      } else {
-        ElMessage.success("头像上传成功");
-      }
-    } else {
-      ElMessage.error(response.msg || "上传失败");
-    }
-  } catch (error) {
-    console.error('上传失败:', error);
-    ElMessage.error("上传失败，请重试");
-  }
-};
-
-// 上传相关
-const handleUploadChange = (file: any) => {
-  if (file.raw) {
-    const isImage = file.raw.type.startsWith('image/');
-    const isLt5M = file.raw.size / 1024 / 1024 < 5;
-    if (!isImage || !isLt5M) {
-      fileList.value = [];
-      ElMessage.error(isImage ? '图片大小不能超过5MB' : '仅支持图片格式');
-      return;
-    }
-  }
-};
-
-const handleRemove = (file: any) => {
-  fileList.value = [];
-  formData.avatar = '';
-};
 
 // 提交表单
 const handleSubmit = async () => {
@@ -288,24 +272,9 @@ const handleSubmit = async () => {
     if (valid) {
       loading.value = true;
       try {
-        // 如果有新上传的图片，先上传
-        if (fileList.value.length > 0 && fileList.value[0].raw) {
-          const uploadFormData = new FormData();
-          uploadFormData.append('file', fileList.value[0].raw);
-          uploadFormData.append('cate', 'baby');
-
-          const uploadRes = await uploadAvatar(uploadFormData);
-          if ((uploadRes.code === 200 || uploadRes.code === 201) && uploadRes.data?.url) {
-            formData.avatar = uploadRes.data.url;
-          } else {
-            ElMessage.error('图片上传失败');
-            return;
-          }
-        }
-
         let res;
         if (formData.id) {
-          // 编辑 - 使用普通对象，PUT请求
+          // 编辑
           const submitData: Record<string, any> = {};
           Object.keys(formData).forEach(key => {
             if (key !== 'id' && formData[key as keyof BabyFormData] !== undefined && formData[key as keyof BabyFormData] !== null) {
@@ -314,7 +283,7 @@ const handleSubmit = async () => {
           });
           res = await editBaby(formData.id, submitData);
         } else {
-          // 新增 - 使用 FormData
+          // 新增
           const submitData = new FormData();
           Object.keys(formData).forEach(key => {
             if (key !== 'id' && formData[key as keyof BabyFormData] !== undefined && formData[key as keyof BabyFormData] !== null) {
@@ -328,7 +297,7 @@ const handleSubmit = async () => {
           ElMessage.success(formData.id ? '编辑成功' : '添加成功');
           dialogVisible.value = false;
           resetForm();
-          emit('success'); // 通知父组件刷新列表
+          emit('success');
         } else {
           ElMessage.error(res.msg || (formData.id ? '编辑失败' : '添加失败'));
         }
@@ -343,84 +312,117 @@ const handleSubmit = async () => {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="less" scoped>
 .dialog-content {
-  display: flex;
+  padding: 20px 10px;
-  flex-direction: column;
 }
 
-.avatar-section {
+.preview-image {
-  display: flex;
+  width: 168px;
-  justify-content: center;
+  height: 168px;
-  align-items: center;
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.avatar-preview {
-  width: 120px;
-  height: 120px;
   border-radius: 8px;
-  object-fit: cover;
+  background: #fff;
-  display: block;
+  display: flex;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px dashed var(--el-border-color);
+  margin-right: 30px;
 
-  :deep(img) {
+  .preview-img {
-    width: 100%;
+    max-width: 100%;
-    height: 100%;
+    max-height: 100%;
-    border-radius: 8px;
+    object-fit: contain;
+  }
+
+  .no-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 48px;
+      margin-bottom: 8px;
+      color: var(--el-text-color-placeholder);
+    }
+
+    span {
+      font-size: 14px;
+    }
   }
 }
 
-.avatar-uploader {
+.avatar-section {
-  :deep(.el-upload) {
+  margin-bottom: 24px;
-    border: 2px dashed var(--el-border-color);
+
-    border-radius: 8px;
+  .cutter-container {
+    max-width: 500px;
+  }
+
+  :deep(.avatar-uploader) {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
-    transition: all 0.3s;
+    transition: var(--el-transition-duration-fast);
-    width: 120px;
+    width: 200px;
-    height: 120px;
+    height: 200px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: var(--el-fill-color-light);
+    margin: 0 auto;
 
     &:hover {
       border-color: var(--el-color-primary);
-      transform: scale(1.05);
       box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
     }
+
+    .avatar-uploader-icon {
+      font-size: 32px;
+      color: var(--el-text-color-placeholder);
+      margin-bottom: 8px;
+    }
+
+    .upload-text {
+      color: var(--el-text-color-secondary);
+      font-size: 14px;
+    }
+  }
+
+  .img-cutter-wrapper {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    overflow: hidden;
+    width: 100%;
+
+    :deep(.img-cutter) {
+      width: 100%;
+      margin: 0;
+      max-width: none;
+
+      .cut-btn {
+        display: none;
+      }
+
+      .cut-box {
+        width: 100% !important;
+        height: 350px !important;
+      }
+
+      .cut-container {
+        width: 100% !important;
+        height: 350px !important;
+      }
+
+      .cut-preview-box {
+        width: 100% !important;
+        height: 100% !important;
+      }
+    }
   }
 }
-
-.avatar-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 16px;
-  text-align: center;
-
-  .avatar-uploader-icon {
-    font-size: 32px;
-    color: var(--el-text-color-placeholder);
-    margin-bottom: 8px;
-  }
-
-  .avatar-tip {
-    font-size: 12px;
-    color: var(--el-text-color-placeholder);
-  }
-}
-
-:deep(.el-upload-list__item-thumbnail) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
 </style>

src/views/apps/babyhealth/babys/index.vue

@@ -231,7 +231,7 @@ onMounted(() => {
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .babys-container {
   background: var(--el-bg-color);
   border-radius: 12px;

src/views/apps/babyhealth/users/components/preview.vue

@@ -158,7 +158,7 @@ defineExpose({
 fetchRoles();
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .user-preview {
   padding: 20px;
 

src/views/apps/babyhealth/users/components/userEdit.vue

@@ -9,41 +9,32 @@
 
       <!-- 密码 -->
       <el-form-item label="密码" prop="password" v-if="isAdd">
-        <el-input
+        <el-input v-model="form.password" type="password" autocomplete="new-password" show-password
-          v-model="form.password"
+          :placeholder="isAdd ? '请输入密码（至少6位）' : '留空则不修改密码'" />
-          type="password"
-          autocomplete="new-password"
-          show-password
-          :placeholder="isAdd ? '请输入密码（至少6位）' : '留空则不修改密码'"
-        />
       </el-form-item>
 
       <!-- 确认密码 -->
       <el-form-item label="确认密码" prop="confirmPassword" v-if="isAdd">
-        <el-input
+        <el-input v-model="form.confirmPassword" type="password" autocomplete="new-password" show-password
-          v-model="form.confirmPassword"
+          :placeholder="isAdd ? '请再次输入密码' : '留空则不修改密码'" />
-          type="password"
-          autocomplete="new-password"
-          show-password
-          :placeholder="isAdd ? '请再次输入密码' : '留空则不修改密码'"
-        />
       </el-form-item>
 
       <el-divider></el-divider>
       <div class="form-title">个人信息</div>
       <!-- 头像 -->
       <el-form-item label="头像">
-        <el-upload
+        <el-upload class="avatar-uploader" :show-file-list="false" :action="uploadUrl" :headers="uploadHeaders"
-          class="avatar-uploader"
+          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-          :show-file-list="false"
-          :before-upload="beforeAvatarUpload"
-          :http-request="uploadFile"
-        >
           <img v-if="form.avatar" :src="getAvatarUrl(form.avatar)" class="avatar" />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          <el-icon v-else class="avatar-uploader-icon">
+            <Plus />
+          </el-icon>
         </el-upload>
       </el-form-item>
 
+      <!-- 裁剪对话框 -->
+      <CropImage ref="cropImageRef" @confirm="handleCropConfirm" />
+
       <!-- 姓名 -->
       <el-form-item label="姓名">
         <el-input v-model="form.name" placeholder="请输入姓名" />
@@ -60,13 +51,8 @@
 
       <!-- 生日 -->
       <el-form-item label="生日">
-        <el-date-picker
+        <el-date-picker v-model="form.birth" type="date" placeholder="请选择日期" style="width: 100%"
-          v-model="form.birth"
+          value-format="YYYY-MM-DD" />
-          type="date"
-          placeholder="请选择日期"
-          style="width: 100%"
-          value-format="YYYY-MM-DD"
-        />
       </el-form-item>
 
       <!-- 电话 -->
@@ -81,11 +67,7 @@
 
       <!-- 状态 -->
       <el-form-item label="状态">
-        <el-select
+        <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
-          v-model="form.status"
-          placeholder="请选择状态"
-          style="width: 100%"
-        >
           <el-option label="启用" :value="1" />
           <el-option label="禁用" :value="0" />
         </el-select>
@@ -226,7 +208,7 @@ watch(visible, (newVal) => {
 // 监听 statusDict 变化，用于调试
 watch(
   () => props.statusDict,
-  (newVal) => {},
+  (newVal) => { },
   { immediate: true, deep: true }
 );
 
@@ -239,35 +221,30 @@ const uploadHeaders = {
 // 拼接头像完整URL
 const getAvatarUrl = (url: string) => {
   if (!url) return '';
-  // 如果已经是完整URL,直接返回
   if (url.startsWith('http://') || url.startsWith('https://')) {
     return url;
   }
-  // 拼接API地址
   return `${import.meta.env.VITE_API_BASE_URL}${url}`;
 };
 
-// 头像上传前校验
+// 头像上传前校验 - 只校验格式,打开裁剪对话框
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  const isImage = rawFile.type.startsWith("image/");
+  const isImage = rawFile.type.startsWith('image/');
-  const isLt5M = rawFile.size / 1024 / 1024 < 5;
+  const isLt2M = rawFile.size / 1024 / 1024 < 2;
 
   if (!isImage) {
-    ElMessage.error("只能上传图片文件！");
+    ElMessage.error('只能上传图片文件！');
     return false;
   }
-  
+  if (!isLt2M) {
-  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 2MB!');
-    ElMessage.error("图片大小不能超过5MB！");
     return false;
   }
-  
   return true;
 };
 
-// 上传文件到服务器
+// 上传文件到服务器(裁剪后调用)
-const uploadFile = async (options: any) => {
+const uploadFile = async (file: File) => {
-  const { file } = options;
   const formData = new FormData();
   formData.append('file', file);
 
@@ -275,11 +252,9 @@ const uploadFile = async (options: any) => {
     // 使用uploadAvatar接口上传文件
     const response = await uploadAvatar(formData, { cate: 'user_avatar' });
 
-    if (response.code === 200) {
+    if (response.code === 200 || response.code === 201) {
       // 更新用户头像
       form.value.avatar = response.data.url || response.data.path || '';
-      // 调用更新用户信息接口保存头像URL
-      await updateUser(form.value.id, { avatar: form.value.avatar });
       ElMessage.success("头像上传成功");
     } else {
       ElMessage.error(response.msg || "上传失败");
@@ -290,13 +265,18 @@ const uploadFile = async (options: any) => {
   }
 };
 
+// 裁剪确认后的处理
+const handleCropConfirm = async (file: File) => {
+  await uploadFile(file);
+};
+
 // 头像上传成功
-const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+const handleAvatarSuccess = (response: any) => {
-  if (response.code === 200) {
+  if (response.code === 200 || response.code === 201) {
-    form.value.avatar = response.data.avatar || '';
+    form.value.avatar = response.data.url || response.data.path || '';
-    ElMessage.success("头像上传成功");
+    ElMessage.success('头像上传成功');
   } else {
-    ElMessage.error(response.msg || "上传失败");
+    ElMessage.error(response.msg || '上传失败');
   }
 };
 
@@ -498,7 +478,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .form-title {
   font-size: 16px;
   font-weight: 600;
@@ -514,7 +494,7 @@ defineExpose({
     display: block;
   }
 
-  :deep(.el-upload) {
+  .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
     cursor: pointer;
@@ -525,15 +505,17 @@ defineExpose({
     &:hover {
       border-color: var(--el-color-primary);
     }
-  }
 
-  .avatar-uploader-icon {
+    .avatar-uploader-icon {
-    font-size: 28px;
+      font-size: 28px;
-    color: #8c939d;
+      color: #8c939d;
-    width: 100px;
+      width: 100px;
-    height: 100px;
+      height: 100px;
-    text-align: center;
+      text-align: center;
-    line-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
 </style>