From dbb385fe768492f1bd8803ddff9cbd2682a235c0 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 4 Dec 2023 18:08:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=8A=E6=AC=A1=E9=9D=9E?=
 =?UTF-8?q?=E5=AF=B9=E8=B1=A1=E5=AD=98=E5=82=A8=E6=96=87=E4=BB=B6=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8=E8=BE=83=E5=B0=8F=E7=9A=84=E5=88=87?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EmptyFile/index.vue            |  14 +-
 src/components/ShowFile/ShowFile.vue          |   9 +
 .../SimpleUploader/globalUploader.vue         | 176 ++++++++++++------
 3 files changed, 130 insertions(+), 69 deletions(-)

diff --git a/src/components/EmptyFile/index.vue b/src/components/EmptyFile/index.vue
index e35969f..cbe5e0f 100644
--- a/src/components/EmptyFile/index.vue
+++ b/src/components/EmptyFile/index.vue
@@ -47,18 +47,14 @@
 <style lang="scss" scoped>
   .container {
     width: 100%;
-    /*min-height: calc(100vh - 50px);*/
+    min-height: calc(100vh - 101px);
   }
   .share-empty {
-    /*height: 30%;*/
-    /*width: 50%;*/
     color: #6e6e6e;
-    margin: 20%;
-    /*left: 50%;*/
-    /*position: absolute;*/
-    /*top: 50%;*/
-    /*left: 50%;*/
-    /*margin: -15% 0 0 -25%;*/
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
  }
  .share-empty-icon {
    width: 268px;
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index c88f20c..1028937 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -2629,6 +2629,15 @@ export default {
       this.highlightNewFile()
       // 设置挂载文件的用户名(文件的所有者)
       this.setMountFileOwner()
+      // 存储类型
+      let storageType = 'Object'
+      if (this.fileList.length > 0) {
+        const pathRegex = /([a-zA-Z]:\\[^*|"<>?\n]*)|(\/[^*|"<>?\n]*)/;
+        if (!pathRegex.test(this.fileList[0].id)) {
+          storageType = 'File'
+        }
+      }
+      Bus.$emit('storageTypeChange', storageType)
     },
     // 设置挂载文件的用户名(文件的所有者)
     setMountFileOwner() {
diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue
index b6eb16e..89d53bd 100755
--- a/src/components/SimpleUploader/globalUploader.vue
+++ b/src/components/SimpleUploader/globalUploader.vue
@@ -2,6 +2,7 @@
   <div id="global-uploader">
     <!-- 上传 -->
     <uploader
+      v-if="showUploader"
       ref="uploader"
       :options="options"
       :file-status-text="statusText"
@@ -20,22 +21,41 @@
         <span>上传文件到当前目录下</span>
       </uploader-drop>
 
-      <uploader-btn id="global-uploader-btn" ref="uploadBtn" :attrs="attrs">选择文件</uploader-btn>
+      <uploader-btn id="global-uploader-btn" ref="uploadBtn" :attrs="attrs"
+        >选择文件</uploader-btn
+      >
 
-      <uploader-btn id="folder-uploader-btn" ref="folderBtn" :directory="true">选择文件夹</uploader-btn>
+      <uploader-btn id="folder-uploader-btn" ref="folderBtn" :directory="true"
+        >选择文件夹</uploader-btn
+      >
 
       <uploader-list v-show="panelShow">
-        <div slot-scope="props" class="file-panel" :class="{'collapse': collapse}" :style="filePanel">
+        <div
+          slot-scope="props"
+          class="file-panel"
+          :class="{ collapse: collapse }"
+          :style="filePanel"
+        >
           <div class="file-title">
             <h2 class="files-title">文件列表</h2>
             <div class="operate">
-              <el-button v-if="fileListLength > 0" type="text" class="button-collapse" @click="shrink">
+              <el-button
+                v-if="fileListLength > 0"
+                type="text"
+                class="button-collapse"
+                @click="shrink"
+              >
                 <i class="iconfont el-icon-position"></i>
               </el-button>
               <!--<el-button type="text" class="button-collapse" :title="collapse ? '展开':'折叠' " @click="fileListShow">-->
               <!--<i class="iconfont" :class="collapse ? 'el-icon-circle-plus-outline': 'el-icon-remove-outline'"></i>-->
               <!--</el-button>-->
-              <el-button type="text" class="button-collapse" title="关闭" @click="close">
+              <el-button
+                type="text"
+                class="button-collapse"
+                title="关闭"
+                @click="close"
+              >
                 <i class="iconfont el-icon-circle-close"></i>
               </el-button>
             </div>
@@ -43,20 +63,30 @@
 
           <ul class="file-list">
             <li v-for="file in props.fileList" :key="file.id">
-              <uploader-file ref="files" :class="'file_' + file.id" :file="file" :list="true"></uploader-file>
+              <uploader-file
+                ref="files"
+                :class="'file_' + file.id"
+                :file="file"
+                :list="true"
+              ></uploader-file>
             </li>
-            <div v-if="!props.fileList.length" class="no-file"><i class="iconfont icon-empty-file"></i> 暂无待上传文件
+            <div v-if="!props.fileList.length" class="no-file">
+              <i class="iconfont icon-empty-file"></i> 暂无待上传文件
             </div>
           </ul>
         </div>
       </uploader-list>
-
     </uploader>
 
-    <div class="process-area" id="drag-ball" @click="expand" :style="processAreaClass">
+    <div
+      class="process-area"
+      id="drag-ball"
+      @click="expand"
+      :style="processAreaClass"
+    >
       <div class="process-anime">
-        <div class="cube-a" :style="{'top': -process-65+'%'}"></div>
-        <div class="cube-b" :style="{'top': -process-65+'%'}"></div>
+        <div class="cube-a" :style="{ top: -process - 65 + '%' }"></div>
+        <div class="cube-b" :style="{ top: -process - 65 + '%' }"></div>
 
         <div v-if="process < 100" class="process-info">
           <div class="process">{{ process }}%</div>
@@ -66,14 +96,17 @@
         <div v-if="process >= 100" class="done">
           <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
             <!--"M 14.1 27.2 l 7.1 7.2 l 16.7 -16.8"-->
-            <path d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>
+            <path
+              d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8"
+              class="checkmark__check"
+              style="fill: transparent;"
+            ></path>
             <!--<path v-if="pc" d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>-->
             <!--<path v-if="!pc" d="M 15.5 20.2 l 3.5 3.6 l 7.7 -7.8" class="checkmark__check" style="fill: transparent;"></path>-->
           </svg>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -96,6 +129,7 @@ export default {
   components: {},
   data() {
     return {
+      showUploader: true,
       username: this.$store.state.user.name,
       options: {
         target: api.simpleUploadURL,
@@ -121,11 +155,11 @@ export default {
         },
         parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
           return parsedTimeRemaining
-            .replace(/\syears?/, '年')
-            .replace(/\days?/, '天')
-            .replace(/\shours?/, '小时')
-            .replace(/\sminutes?/, '分钟')
-            .replace(/\sseconds?/, '秒')
+              .replace(/\syears?/, '年')
+              .replace(/\days?/, '天')
+              .replace(/\shours?/, '小时')
+              .replace(/\sminutes?/, '分钟')
+              .replace(/\sseconds?/, '秒')
         },
         headers: {
           'jmal-token': this.$store.state.user.token,
@@ -161,12 +195,7 @@ export default {
       dragoverLoop: null,
       successMsg: null,
       enableDragUplaod: false,// 是否启用拖拽上传
-    }
-  },
-  computed: {
-    // Uploader实例
-    uploader() {
-      return this.$refs.uploader.uploader
+      uploader: null,
     }
   },
   watch: {
@@ -219,6 +248,20 @@ export default {
       that.dragover = false
     }, false);
 
+    Bus.$on('storageTypeChange', storageType => {
+      if (storageType === 'File') {
+        if (this.options.chunkSize === 1024 * 1024) {
+          return
+        }
+        this.updateChunkSize(1024 * 1024)
+      } else {
+        if (this.options.chunkSize === 5 * 1024 * 1024) {
+          return
+        }
+        this.updateChunkSize(5 * 1024 * 1024)
+      }
+    })
+
     Bus.$on('fileListScrollTop', fileListScrollTop => {
       this.fileListScrollTop = fileListScrollTop
     })
@@ -245,11 +288,7 @@ export default {
         this.shrink()
       }
     })
-
-    this.$nextTick(() => {
-      window.uploader = this.$refs.uploader.uploader
-    })
-
+    this.initUploader()
   },
   destroyed() {
     Bus.$off('openUploader')
@@ -257,6 +296,26 @@ export default {
     Bus.$off('uploadFileListBack')
   },
   methods: {
+    initUploader() {
+      this.$nextTick(() => {
+        this.uploader = this.$refs.uploader.uploader
+        window.uploader = this.uploader
+      })
+    },
+    updateChunkSize(chunkSize) {
+      // 更新 options
+      this.options.chunkSize = chunkSize;
+      console.log('updateChunkSize', chunkSize)
+      // 重新渲染 uploader 组件
+      this.showUploader = false;
+      this.$nextTick(() => {
+        this.showUploader = true;
+        this.$nextTick(() => {
+          this.uploader = this.$refs.uploader.uploader
+          window.uploader = this.uploader
+        });
+      });
+    },
     onDragenter(e) {
       this.params = {
         currentDirectory: this.$route.query.path || '/',
@@ -310,10 +369,6 @@ export default {
       })
     },
     onFileProgress(rootFile, file, chunk) {
-      // const fileList = window.uploader.fileList
-      // fileList.forEach(file => {
-      //   file.currentSpeed
-      // })
       this.netSpeed = formatNetSpeed(file.currentSpeed)
       this.process = Math.trunc(window.uploader.progress() * 100)
       if (this.process === -10 || this.process === 100 || this.fileListLength === 0) {
@@ -659,7 +714,7 @@ export default {
   .file-panel {
     background-color: #fff;
     border: 1px solid #e2e2e2;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 
     right: 2%;
     bottom: 2%;
@@ -671,8 +726,8 @@ export default {
     background-size: 100% 100%;
     border-radius: 7px 7px 0 0;
     position: fixed;
-    -webkit-transition: all .5s ease-in-out 0s;
-    transition: all .5s ease-in-out 0s;
+    -webkit-transition: all 0.5s ease-in-out 0s;
+    transition: all 0.5s ease-in-out 0s;
 
     ul {
       white-space: nowrap;
@@ -680,7 +735,7 @@ export default {
       overflow-x: auto;
       overflow-y: hidden;
       padding: 0 0.1rem;
-      margin-bottom: -.2rem;
+      margin-bottom: -0.2rem;
       overflow: -moz-scrollbars-none;
       overflow: -moz-scrollbars-none;
     }
@@ -732,7 +787,7 @@ export default {
 
     &.collapse {
       .file-title {
-        background-color: #E7ECF2;
+        background-color: #e7ecf2;
       }
     }
   }
@@ -745,49 +800,49 @@ export default {
     font-size: 16px;
   }
 
-  > > > .uploader-file-icon {
+  > .uploader-file-icon {
     &:before {
-      content: '' !important;
+      content: "" !important;
     }
 
     background: url(./images/file.svg);
 
-    &[icon=image] {
+    &[icon="image"] {
       background: url(./images/image.svg);
     }
 
-    &[icon=video] {
+    &[icon="video"] {
       background: url(./images/video.svg);
     }
 
-    &[icon=document] {
+    &[icon="document"] {
       background: url(./images/docment.svg);
     }
 
-    &[icon=audio] {
+    &[icon="audio"] {
       background: url(./images/audio.svg);
     }
 
-    &[icon=folder] {
+    &[icon="folder"] {
       background: url(./images/folder.svg);
     }
   }
 
-  > > > .uploader-file-actions > span {
+  > .uploader-file-actions > span {
     margin-right: 6px;
   }
 }
 
-> > > .uploader-file-status {
+> .uploader-file-status {
   width: 32%;
   text-indent: 20px;
 }
 
-> > > .uploader-file-meta {
+> .uploader-file-meta {
   width: 0;
 }
 
-> > > .uploader-file-icon {
+> .uploader-file-icon {
   width: 32px;
   height: 32px;
   display: inline-block;
@@ -796,7 +851,7 @@ export default {
   margin-right: 8px;
 }
 
-> > > .uploader-file-actions > span {
+> .uploader-file-actions > span {
   margin-right: 6px;
   margin-left: 8px;
 }
@@ -812,7 +867,6 @@ export default {
   clip: rect(0, 0, 0, 0);
 }
 
-
 .process-area {
   right: 66px;
   bottom: 66px;
@@ -829,8 +883,8 @@ export default {
   position: fixed;
   /*animation: load-process-area .5s 1 linear forwards;*/
   /*transition: all .5s;*/
-  -webkit-transition: all .5s ease-in-out 0s;
-  transition: all .5s ease-in-out 0s;
+  -webkit-transition: all 0.5s ease-in-out 0s;
+  transition: all 0.5s ease-in-out 0s;
 }
 
 .process-area .process-info {
@@ -846,7 +900,7 @@ export default {
 }
 
 .process-area .process-info .net-speed {
-  font-size: .7rem;
+  font-size: 0.7rem;
   white-space: nowrap;
 }
 
@@ -866,13 +920,13 @@ export default {
 .process-anime .cube-a {
   position: absolute;
   left: 50%;
-  background: rgba(53, 53, 53, .3);
+  background: rgba(53, 53, 53, 0.3);
   width: 130px;
   height: 130px;
   border-radius: 50px;
   animation: fx-rotate 15s infinite linear;
   transform-origin: 50% 50%;
-  transition: .5s;
+  transition: 0.5s;
 }
 
 .process-anime .cube-b {
@@ -884,7 +938,7 @@ export default {
   border-radius: 50px;
   animation: fx-rotate 10s infinite reverse linear;
   transform-origin: 50% 50%;
-  transition: .5s;
+  transition: 0.5s;
 }
 
 /**成功**/
@@ -906,7 +960,8 @@ export default {
   stroke: #fff;
   stroke-miterlimit: 10;
   box-shadow: inset 0 0 0 #fdda65;
-  animation: fill-data .4s ease-in-out .4s forwards, scale-data .3s ease-in-out .9s both;
+  animation: fill-data 0.4s ease-in-out 0.4s forwards,
+    scale-data 0.3s ease-in-out 0.9s both;
 }
 
 .process-anime .done .checkmark__check {
@@ -914,7 +969,7 @@ export default {
   transform-origin: 50% 50%;
   stroke-dasharray: 48;
   stroke-dashoffset: 48;
-  animation: stroke-data .3s cubic-bezier(.65, 0, .45, 1) .8s forwards;
+  animation: stroke-data 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
 }
 
 @keyframes fx-rotate {
@@ -927,7 +982,8 @@ export default {
 }
 
 @keyframes scale-data {
-  0%, 100% {
+  0%,
+  100% {
     transform: none;
   }
   50% {