perf: 显示上传文件大小

src/components/Widgets/Term/index.vue

@@ -12,7 +12,7 @@
             type="default"
             @click="item.callback()"
           >
-            <i :class="item.icon" />
+            <svg-icon :icon-class="item.icon" />
           </el-button>
         </el-tooltip>
       </div>
@@ -37,7 +37,8 @@ export default {
     },
     xtermConfig: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -56,21 +57,21 @@ export default {
       toolbar: [
         {
           tip: this.$tc('ops.ScrollToTop'),
-          icon: 'fa fa-arrow-up',
+          icon: 'arrow-up',
           callback: () => {
             this.xterm.scrollToTop()
           }
         },
         {
           tip: this.$tc('ops.ScrollToBottom'),
-          icon: 'fa fa-arrow-down',
+          icon: 'arrow-down',
           callback: () => {
             this.xterm.scrollToBottom()
           }
         },
         {
           tip: this.$tc('ops.ClearScreen'),
-          icon: 'fa fa-refresh',
+          icon: 'refresh',
           callback: () => {
             this.xterm.reset()
           }

src/i18n/langs/en.json

@@ -1180,7 +1180,10 @@
     "Transfer": "Transfer",
     "UploadDir": "Upload Directory",
     "RequiredUploadFile": "Please upload files！",
-    "DuplicateFileExists": "Duplicate file exists"
+    "DuplicateFileExists": "Duplicate file exists",
+    "NoFiles": "No Files",
+    "uploadFileLthHelpText": "Only files smaller than 200MB can be uploaded",
+    "FileSizeExceedsLimit": "File size exceeds limit"
   },
   "perms": {
     "": "",

src/i18n/langs/ja.json

@@ -1178,7 +1178,10 @@
     "Transfer": "ファイルを転送する",
     "UploadDir": "アップロードディレクトリ",
     "RequiredUploadFile": "ファイルをアップロードしてください！",
-    "DuplicateFileExists": "重複したファイルが存在する"
+    "DuplicateFileExists": "重複したファイルが存在する",
+    "NoFiles": "まだファイルがありません",
+    "uploadFileLthHelpText": "200MB 未満のファイルのみアップロードできます",
+    "FileSizeExceedsLimit": "ファイルサイズが制限を超えています"
   },
   "perms": {
     "": "",

src/i18n/langs/zh.json

@@ -1167,7 +1167,10 @@
     "Transfer": "传输",
     "UploadDir": "上传目录",
     "RequiredUploadFile": "请上传文件！",
-    "DuplicateFileExists": "存在同名文件"
+    "DuplicateFileExists": "存在同名文件",
+    "NoFiles": "暂无文件",
+    "uploadFileLthHelpText": "只能上传小于200MB文件",
+    "FileSizeExceedsLimit": "文件大小超出限制"
   },
   "perms": {
     "": "",

src/icons/svg/arrow-down.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 42V6" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M36 30L24 42L12 30" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/icons/svg/arrow-up.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 6V42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 18L24 6L36 18" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/utils/common.js

@@ -407,4 +407,12 @@ export const pageScroll = _.throttle((id) => {
   }
 }, 200)
 
+export function formatFileSize(bytes) {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
 export { BASE_URL }

src/views/ops/File/index.vue

@@ -55,6 +55,10 @@
                 <div class="el-upload__text">
                   {{ $t('common.imExport.dragUploadFileInfo') }}
                 </div>
+                <br>
+                <span>
+                  {{ $t('ops.uploadFileLthHelpText') }}
+                </span>
               </el-upload>
               <el-progress v-if="ShowProgress" :percentage="progressLength" />
             </el-card>
@@ -94,6 +98,7 @@ import { TreeTable } from '@/components'
 import Term from '@/components/Widgets/Term'
 import Page from '@/layout/components/Page'
 import { createJob, getJob, getTaskDetail, JobUploadFile } from '@/api/ops'
+import { formatFileSize } from '@/utils/common'
 
 export default {
   name: 'BulkTransfer',
@@ -197,6 +202,7 @@ export default {
   mounted() {
     this.enableWS()
     this.initData()
+    this.handleFileList(null, [])
   },
   methods: {
     async initData() {
@@ -294,7 +300,7 @@ export default {
       return { hosts, nodes }
     },
     truncateFileName(fullName) {
-      const maxLength = 140 // 显示的最大字符数
+      const maxLength = 130 // 显示的最大字符数
       if (fullName.length <= maxLength) {
         return fullName
       }
@@ -302,14 +308,28 @@ export default {
       const secondPart = fullName.slice(-maxLength / 2)
       return firstPart + '...' + secondPart
     },
-    renderSameFile(file, fileList) {
+    handleFileList(file, fileList) {
       const filenameList = fileList.map((file) => file.name)
       const filenameCount = _.countBy(filenameList)
-      // 找出同名文件
       this.$nextTick(() => {
+        const emptyFileTip = document.getElementsByClassName('empty-file-tip')
+        if (emptyFileTip.length > 0) {
+          emptyFileTip[0].style = 'display:none'
+        }
         const fileElementList = document.getElementsByClassName('el-upload-list__item-name')
         if (fileElementList && fileElementList.length > 0) {
           for (const ele of fileElementList) {
+            // 显示文件大小
+            if (file.name === ele.outerText) {
+              ele.insertAdjacentHTML('beforeend',
+                `<i style="color: #1ab394;float: right;font-weight:normal">${formatFileSize(file.size)}</i>`)
+            }
+            // 文件大小超出限制
+            if (file.size > 200 * 1024 * 1024) {
+              this.$message.error(this.$tc('ops.FileSizeExceedsLimit'))
+              ele.style = 'background-color:var(--color-danger)'
+            }
+            // 同名文件提示
             if (filenameCount[ele.outerText] > 1) {
               this.$message.error(this.$tc('ops.DuplicateFileExists'))
               ele.style = 'background-color:var(--color-danger)'
@@ -317,13 +337,18 @@ export default {
               ele.style = ''
             }
           }
+        } else {
+          const emptyFileElementList = document.getElementsByClassName('el-upload-list--text')[0]
+          const text = this.$tc('ops.NoFiles')
+          emptyFileElementList.insertAdjacentHTML('afterbegin',
+            `<div class="empty-file-tip" style="color: #c5c9cc;font-size: 18px;display: flex;justify-content: center;align-items: center;height: 100%">${text}</div>`)
         }
       })
     },
     onFileChange(file, fileList) {
       file.name = this.truncateFileName(file.name)
       this.files = fileList
-      this.renderSameFile(file, fileList)
+      this.handleFileList(file, fileList)
     },
     execute() {
       const { hosts, nodes } = this.getSelectedNodesAndHosts()
@@ -469,11 +494,9 @@ export default {
     list-style: none;
     width: 100%;
     height: 180px;
-  }
-
-  > > > .el-upload-list:not(:empty) {
     border: 1px dashed #d9d9d9;
     overflow-y: auto;
+    font-weight: 500;
   }
 }
 </style>