style: 优化头像裁剪框样式

continew-admin-ui/pnpm-lock.yaml

@@ -60,7 +60,7 @@ dependencies:
     version: 3.3.4
   vue-cropper:
     specifier: ^1.0.9
-    version: 1.0.9
+    version: 1.1.1
   vue-echarts:
     specifier: ^6.6.1
     version: 6.6.1(echarts@5.4.3)(vue@3.3.4)
@@ -9872,6 +9872,10 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vue-cropper@1.1.1:
+    resolution: {integrity: sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A==}
+    dev: false
+
   /vue-demi@0.13.11(vue@3.3.4):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}

continew-admin-ui/src/components/tab-bar/index.vue

@@ -74,7 +74,7 @@
         overflow: hidden;
         .tags-wrap {
           padding: 4px 0;
-          height: 48px;
+          height: 42px;
           white-space: nowrap;
           overflow-x: auto;
 

continew-admin-ui/src/views/system/user/center/components/user-panel.vue

@@ -20,56 +20,49 @@
           </a-avatar>
         </template>
       </a-upload>
-
+      <a-modal
-      <div class="main">
+        :title="$t('userCenter.panel.avatar.upload')"
-        <a-modal
+        :visible="visible"
-          :visible="cropperVisible"
+        :width="400"
-          width="40%"
+        :footer="false"
-          :footer="false"
+        unmount-on-close
-          unmount-on-close
+        render-to-body
-          render-to-body
+        @cancel="handleCancel"
-          @cancel="handleCropperCancel"
+      >
-        >
+        <a-row>
-          <a-row>
+          <a-col :span="14" style="width: 200px; height: 200px">
-            <a-col :span="14">
+            <vue-cropper
-              <div style="width: 370px; height: 370px">
+              ref="cropperRef"
-                <!-- 头像裁剪框 -->
+              :img="options.img"
-                <vue-cropper
+              :info="true"
-                  ref="cropper"
+              :auto-crop="options.autoCrop"
-                  :info="true"
+              :auto-crop-width="options.autoCropWidth"
-                  :img="options.img"
+              :auto-crop-height="options.autoCropHeight"
-                  :full="options.full"
+              :fixed-box="options.fixedBox"
-                  :fixed="options.fixed"
+              :fixed="options.fixed"
-                  :fixed-box="options.fixedBox"
+              :full="options.full"
-                  :can-move="options.canMove"
+              :center-box="options.centerBox"
-                  :center-box="options.centerBox"
+              :can-move="options.canMove"
-                  :auto-crop="options.autoCrop"
+              :output-type="options.outputType"
-                  :auto-crop-width="options.autoCropWidth"
+              :output-size="options.outputSize"
-                  :auto-crop-height="options.autoCropHeight"
+              @real-time="handleRealTime"
-                  :output-type="options.outputType"
+            />
-                  :output-size="options.outputSize"
+          </a-col>
-                  @realTime="realTime"
+          <a-col :span="10" style="display: flex; justify-content: center">
-                />
+            <div :style="previewStyle">
+              <div :style="previews.div">
+                <img :src="previews.url" :style="previews.img" alt="" />
               </div>
-            </a-col>
+            </div>
-            <a-col :span="6">
+          </a-col>
-              <!-- 实时预览 -->
+        </a-row>
-              <div :style="previewStyle">
+        <div style="text-align: center; padding-top: 30px">
-                <div :style="previews.div">
-                  <img :src="previews.url" :style="previews.img" alt="" />
-                </div>
-              </div>
-            </a-col>
-          </a-row>
-          <br />
           <a-space>
-            <a-button type="primary" @click="handleUpload">提交</a-button>
+            <a-button type="primary" @click="handleUpload">确定</a-button>
-            <a-button type="outline" @click="handleCropperCancel"
+            <a-button @click="handleCancel">取消</a-button>
-              >取消</a-button
-            >
           </a-space>
-        </a-modal>
+        </div>
-      </div>
+      </a-modal>
 
       <a-descriptions
         :column="2"
@@ -122,19 +115,18 @@
   import { reactive, ref, getCurrentInstance } from 'vue';
   import { FileItem } from '@arco-design/web-vue';
   import { uploadAvatar, cropperOptions } from '@/api/system/user-center';
-  import getAvatar from '@/utils/avatar';
   import { useUserStore } from '@/store';
+  import getAvatar from '@/utils/avatar';
   import { VueCropper } from 'vue-cropper';
   import 'vue-cropper/dist/index.css';
 
-  const fileRef = ref(reactive({ name: 'avatar.png' }));
-  const previews: any = ref({});
-  const previewStyle: any = ref({});
-  const cropperVisible = ref(false);
-  const cropper = ref();
   const { proxy } = getCurrentInstance() as any;
   const userStore = useUserStore();
-
+  const cropperRef = ref();
+  const visible = ref(false);
+  const previews: any = ref({});
+  const previewStyle: any = ref({});
+  const fileRef = ref(reactive({ name: 'avatar.png' }));
   const avatar = {
     uid: '-2',
     name: 'avatar.png',
@@ -143,15 +135,15 @@
   const avatarList = ref<FileItem[]>([avatar]);
 
   const options: cropperOptions = reactive({
-    autoCrop: true,
-    autoCropWidth: 200,
-    autoCropHeight: 200,
-    canMove: true,
-    centerBox: true,
-    full: false,
-    fixed: false,
-    fixedBox: false,
     img: '',
+    autoCrop: true,
+    autoCropWidth: 160,
+    autoCropHeight: 160,
+    fixedBox: true,
+    fixed: true,
+    full: false,
+    centerBox: true,
+    canMove: true,
     outputSize: 1,
     outputType: 'png',
   });
@@ -168,46 +160,47 @@
     reader.onload = () => {
       options.img = reader.result;
     };
-    cropperVisible.value = true;
+    visible.value = true;
     return false;
   };
 
   /**
    * 关闭裁剪框
    */
-  const handleCropperCancel = () => {
+  const handleCancel = () => {
     fileRef.value = { name: '' };
     options.img = '';
-    cropperVisible.value = false;
+    visible.value = false;
   };
 
   /**
    * 上传头像
    */
   const handleUpload = () => {
-    cropper.value.getCropBlob((data: string | Blob) => {
+    cropperRef.value.getCropBlob((data: string | Blob) => {
       const formData = new FormData();
       formData.append('avatarFile', data, fileRef.value?.name);
       uploadAvatar(formData).then((res) => {
         userStore.avatar = res.data.avatar;
         avatarList.value[0].url = getAvatar(res.data.avatar, undefined);
         proxy.$message.success(res.msg);
-        handleCropperCancel();
+        handleCancel();
       });
     });
   };
 
   /**
    * 实时预览
-   * @param data data
+   *
+   * @param data data 预览图像
    */
-  const realTime = (data: any) => {
+  const handleRealTime = (data: any) => {
     previewStyle.value = {
       width: `${data.w}px`,
       height: `${data.h}px`,
       overflow: 'hidden',
       margin: '0',
-      zoom: 0.8,
+      zoom: 100 / data.h,
       borderRadius: '50%',
     };
     previews.value = data;
@@ -231,8 +224,4 @@
       font-size: 14px;
     }
   }
-
-  .main {
-    position: relative;
-  }
 </style>

continew-admin-ui/src/views/system/user/center/locale/en-US.ts

@@ -6,6 +6,7 @@ export default {
 
   // user-panel
   'userCenter.panel.avatar': 'Avatar',
+  'userCenter.panel.avatar.upload': 'Upload Avatar',
   'userCenter.panel.label.nickname': 'Nick Name :',
   'userCenter.panel.label.gender': 'Gender :',
   'userCenter.panel.label.phone': 'Phone :',

continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts

@@ -6,6 +6,7 @@ export default {
 
   // user-panel
   'userCenter.panel.avatar': '头像',
+  'userCenter.panel.avatar.upload': '上传头像',
   'userCenter.panel.label.nickname': '昵称 :',
   'userCenter.panel.label.gender': '性别 :',
   'userCenter.panel.label.phone': '手机号码 :',