perf: 上传头像可支持GIF，大小扩大到10M

(cherry picked from commit 2605d50bd0)

ui/src/locales/lang/en_US/views/application-overview.ts

@@ -48,10 +48,10 @@ export default {
       upload: 'Upload',
       default: 'Default Logo',
       custom: 'Custom',
-      sizeTip: 'Suggested size 32*32, supports ico, png, size no more than 200KB',
+      sizeTip: 'Suggested size 32*32, supports jpg, png, gif, size no more than 10 M',
       cancel: 'Cancel',
       save: 'Save',
-      fileSizeExceeded: 'File size exceeds 200KB',
+      fileSizeExceeded: 'File size exceeds 10 M',
       setSuccess: 'Setting Successful',
       uploadImagePrompt: 'Please upload an image'
     },

ui/src/locales/lang/zh_CN/views/application-overview.ts

@@ -42,15 +42,15 @@ export default {
       disabledSuccess: '已禁用'
     },
     EditAvatarDialog: {
-      title: '编辑logo',
+      title: '应用头像',
       customizeUpload: '自定义上传',
       upload: '上传',
       default: '默认logo',
       custom: '自定义',
-      sizeTip: '建议尺寸 32*32，支持 ico、png，大小不超过200KB',
+      sizeTip: '建议尺寸 32*32，支持 JPG、PNG, GIF，大小不超过 10 M',
       cancel: '取消',
       save: '保存',
-      fileSizeExceeded: '文件大小超过 200KB',
+      fileSizeExceeded: '文件大小超过 10 M',
       setSuccess: '设置成功',
       uploadImagePrompt: '请上传一张图片'
     },

ui/src/views/application-overview/component/DisplaySettingDialog.vue

@@ -47,7 +47,7 @@
             }}</el-button>
             <template #tip>
               <div class="el-upload__tip info" style="margin-top: 0">
-                建议尺寸 32*32，支持 JPG、PNG，大小不超过 200 KB
+                建议尺寸 32*32，支持 JPG、PNG, GIF，大小不超过 10 M
               </div>
             </template>
           </el-upload>
@@ -84,7 +84,7 @@
             }}</el-button>
             <template #tip>
               <div class="el-upload__tip info" style="margin-top: 0">
-                建议尺寸 32*32，支持 JPG、PNG，大小不超过 200 KB
+                建议尺寸 32*32，支持 JPG、PNG, GIF，大小不超过 10 M
               </div>
             </template>
           </el-upload>
@@ -178,8 +178,8 @@ function resetForm() {
 }
 
 const onChange = (file: any, fileList: UploadFiles, attr: string) => {
-  //1、判断文件大小是否合法，文件限制不能大于 200KB
-  const isLimit = file?.size / 1024 < 200
+  //1、判断文件大小是否合法，文件限制不能大于 10 M
+  const isLimit = file?.size / 1024 / 1024 < 10
   if (!isLimit) {
     // @ts-ignore
     MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))

ui/src/views/application-overview/component/EditAvatarDialog.vue

@@ -1,9 +1,12 @@
 <template>
-  <el-dialog :title="$t('views.applicationOverview.appInfo.EditAvatarDialog.title')" v-model="dialogVisible">
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.EditAvatarDialog.title')"
+    v-model="dialogVisible"
+  >
     <el-radio-group v-model="radioType" class="radio-block mb-16">
       <div>
         <el-radio value="default">
-          <p>{{$t('views.applicationOverview.appInfo.EditAvatarDialog.default')}}</p>
+          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
           <AppAvatar
             v-if="detail?.name"
             :name="detail?.name"
@@ -16,7 +19,7 @@
       </div>
       <div class="mt-8">
         <el-radio value="custom">
-          <p>{{$t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload')}}</p>
+          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
           <div class="flex mt-8">
             <AppAvatar
               v-if="fileURL"
@@ -35,19 +38,25 @@
               accept="image/*"
               :on-change="onChange"
             >
-              <el-button icon="Upload" :disabled="radioType !== 'custom'">{{$t('views.applicationOverview.appInfo.EditAvatarDialog.upload')}}</el-button>
+              <el-button icon="Upload" :disabled="radioType !== 'custom'">{{
+                $t('views.applicationOverview.appInfo.EditAvatarDialog.upload')
+              }}</el-button>
             </el-upload>
           </div>
           <div class="el-upload__tip info mt-16">
-            {{$t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip')}}
+            {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
           </div>
         </el-radio>
       </div>
     </el-radio-group>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false"> {{$t('views.applicationOverview.appInfo.EditAvatarDialog.cancel')}}</el-button>
-        <el-button type="primary" @click="submit" :loading="loading"> {{$t('views.applicationOverview.appInfo.EditAvatarDialog.save')}}</el-button>
+        <el-button @click.prevent="dialogVisible = false">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.cancel') }}</el-button
+        >
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.save') }}</el-button
+        >
       </span>
     </template>
   </el-dialog>
@@ -94,17 +103,16 @@ const open = (data: any) => {
 }
 
 const onChange = (file: any) => {
-  //1、判断文件大小是否合法，文件限制不能大于 200KB
-  const isLimit = file?.size / 1024 < 200
+  //1、判断文件大小是否合法，文件限制不能大于 10M
+  const isLimit = file?.size / 1024 / 1024 < 10
   if (!isLimit) {
     // @ts-ignore
     MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
     return false
-  } else { 
+  } else {
     iconFile.value = file
     fileURL.value = URL.createObjectURL(file.raw)
   }
-
 }
 
 function submit() {