From c96ea307873ea583f5dad1aeafe4214255be003b Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sun, 5 Mar 2023 23:09:39 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E5=88=86=E4=BA=AB=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=A0=E5=85=A5=E6=8F=90=E5=8F=96=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/public/share/shareList.vue | 1715 ++++++++++++++------------
 1 file changed, 915 insertions(+), 800 deletions(-)

diff --git a/src/views/public/share/shareList.vue b/src/views/public/share/shareList.vue
index 708d71d..bce0bda 100644
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@@ -5,12 +5,12 @@
     </transition>
     <div class="share-h">
       <div class="share-header">
-          <div class="share-header-content logo">
-              <Logo v-model="netdiskLogo" width="35"></Logo>
-              <span>{{ netdiskName }}</span>
-          </div>
+        <div class="share-header-content logo">
+          <Logo v-model="netdiskLogo" width="35"></Logo>
+          <span>{{ netdiskName }}</span>
+        </div>
         <div class="share-header-content sharer">
-          <span><span class="user">{{sharer.showName}}</span>的分享</span>
+          <span><span class="user">{{ sharer.showName }}</span>的分享</span>
           <el-avatar :src="sharerAvatarUrl"></el-avatar>
         </div>
       </div>
@@ -19,7 +19,8 @@
         <transition-group name="breadcrumb">
           <el-breadcrumb-item v-for="(item,index) in pathList" :key="item.index">
             <span v-if="index===0">当前位置:</span>
-            <breadcrumb-file-path :pathList="pathList" :item="item" :index="index" @clickLink="handleLink"></breadcrumb-file-path>
+            <breadcrumb-file-path :pathList="pathList" :item="item" :index="index"
+                                  @clickLink="handleLink"></breadcrumb-file-path>
           </el-breadcrumb-item>
         </transition-group>
         <div class="search-content">
@@ -39,7 +40,9 @@
       <div class="popper-arrow"></div>
       <ul v-for="item in menus" :key="item.label">
         <li class="menu-option" @click="menusOperations(item.operation)">
-          <label class="menuitem"><svg-icon :icon-class="item.iconClass" /><span class="menuitem text">{{ item.label }}</span>
+          <label class="menuitem">
+            <svg-icon :icon-class="item.iconClass"/>
+            <span class="menuitem text">{{ item.label }}</span>
           </label>
         </li>
       </ul>
@@ -47,7 +50,7 @@
 
     <!--list布局-->
     <el-table
-      v-show="!grid && !linkFailed"
+      v-show="!grid && !linkFailed && !showShareCode"
       ref="fileListTable"
       v-loading="tableLoading"
       style="width: 100%;margin: 20px 0 0 0;"
@@ -88,19 +91,20 @@
         </el-table-column>
 
         <el-table-column
-        v-if="index === 2"
-        :key="index"
-        :show-overflow-tooltip="true"
-        max-width="200"
-        :index="index"
-        :prop="item.name"
-        :label="item.label"
-        :sortable="item.sortable"
-        @click.stop="fileClick(scope.row)"
+          v-if="index === 2"
+          :key="index"
+          :show-overflow-tooltip="true"
+          max-width="200"
+          :index="index"
+          :prop="item.name"
+          :label="item.label"
+          :sortable="item.sortable"
+          @click.stop="fileClick(scope.row)"
         >
           <template slot-scope="scope">
             <el-col v-if="scope.row.index === editingIndex" :span="10">
-              <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)">
+              <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true"
+                        @keyup.enter.native="rowRename(renameFileName, scope.row)">
               </el-input>
               <el-button
                 v-loading="renameLoading"
@@ -122,16 +126,19 @@
           </template>
         </el-table-column>
 
-        <el-table-column v-if="index === 3  && showUpdateDateItem" :key="index" width="50" :index="index" align="center" header-align="center">
+        <el-table-column v-if="index === 3  && showUpdateDateItem" :key="index" width="50" :index="index" align="center"
+                         header-align="center">
         </el-table-column>
 
-        <el-table-column v-if="index === 4 && showUpdateDateItem" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
+        <el-table-column v-if="index === 4 && showUpdateDateItem" :key="index" width="50" :prop="item.name"
+                         :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
           <!-- 使用组件, 并传值到组件中 -->
           <template slot="header">
-            <svg-icon v-if="item.name !== ''" class="button-class" icon-class="more" @click="moreOperation($event)" />
+            <svg-icon v-if="item.name !== ''" class="button-class" icon-class="more" @click="moreOperation($event)"/>
           </template>
           <template slot-scope="scope">
-            <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="more" @click="moreClick(scope.row,$event)" />
+            <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="more"
+                      @click="moreClick(scope.row,$event)"/>
           </template>
         </el-table-column>
 
@@ -148,7 +155,7 @@
           header-align="left"
         >
           <template slot-scope="scope">
-            <span>{{formatSize(scope.row.size)}}</span>
+            <span>{{ formatSize(scope.row.size) }}</span>
           </template>
         </el-table-column>
 
@@ -165,25 +172,27 @@
           header-align="left"
         >
           <template slot-scope="scope">
-            <span>{{scope.row.updateDate}}</span>
+            <span>{{ scope.row.updateDate }}</span>
           </template>
         </el-table-column>
       </template>
     </el-table>
 
     <!--grid布局-->
-    <div v-show="grid && !linkFailed" v-loading="tableLoading"
+    <div v-show="grid && !linkFailed && !showShareCode" v-loading="tableLoading"
          element-loading-text="文件加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="#f6f7fa88">
       <div class="checkbox-group-header">
-        <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox()" v-model="allChecked">{{indexList.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}}</van-checkbox>
+        <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox()" v-model="allChecked">
+          {{ indexList.length > 0 ? '已选择 ' + this.tableHead[2].label : "选择" }}
+        </van-checkbox>
         <el-divider></el-divider>
       </div>
 
       <van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup">
         <van-grid square :column-num="gridColumnNum" :gutter="10" :border="false">
-          <van-grid-item v-for="(item,index) in fileList" ref="gridItem"  :key="item.id"
+          <van-grid-item v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
           >
             <div class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
                  :style="{'background': indexList.includes(index)?'#baebff91':'','cursor':indexList.length>0?'default':'pointer'}"
@@ -192,24 +201,47 @@
                  @click="gridItemClick(item,$event)"
                  @contextmenu.prevent="rowContextmenu(item)"
             >
-              <van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)" class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
-              <div class="grid-item-icon"><icon-file :item="item" :image-url="imageUrl" :grid="true" :grid-width="gridColumnWidth" :public="true"></icon-file></div>
-              <span class="grid-item-text">{{item.name}}</span>
+              <van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)"
+                            class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
+              <div class="grid-item-icon">
+                <icon-file :item="item" :image-url="imageUrl" :grid="true" :grid-width="gridColumnWidth"
+                           :public="true"></icon-file>
+              </div>
+              <span class="grid-item-text">{{ item.name }}</span>
             </div>
           </van-grid-item>
         </van-grid>
       </van-checkbox-group>
     </div>
-    <div v-if="linkFailed" class="share-header">
+    <div v-if="linkFailed && !showShareCode" class="share-header">
       <p v-if="prompt !== ''">温馨提示：</p>
-      <p>{{prompt}}</p>
+      <p>{{ prompt }}</p>
     </div>
 
-    <sim-text-preview :file.sync="textPreviewRow" :shareId="shareId" :status.sync="textPreviewVisible"></sim-text-preview>
-    <image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
+    <div v-if="showShareCode" class="share-content">
+      <div class="share-icon">
+        <icon-file class="share-icon-font" :item="shareData" :grid="true" :details="true" :image-url="imageUrl"></icon-file>
+      </div>
+      <div class="share-filename">
+        <span>{{ shareData.fileName }}</span>
+      </div>
+      <div class="share-code">
+        <el-input v-model="extractionCode" placeholder="请输入提取码" clearable></el-input>
+      </div>
+      <div class="share-code-valid">
+        <el-button type="primary" :disabled="extractionCode.length === 0">查看文件</el-button>
+      </div>
+    </div>
+
+    <sim-text-preview :file.sync="textPreviewRow" :shareId="shareId"
+                      :status.sync="textPreviewVisible"></sim-text-preview>
+    <image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow"
+                  :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
     <office-preview :file="officePreviewRow" :shareId="shareId" :status.sync="officePreviewVisible"></office-preview>
-    <el-divider class="grid-divider" content-position="center"><i class="el-icon-folder-opened"></i>&nbsp;{{summaries}}</el-divider>
+    <el-divider v-if="!showShareCode" class="grid-divider" content-position="center"><i
+      class="el-icon-folder-opened"></i>&nbsp;{{ summaries }}
+    </el-divider>
     <el-pagination
       background
       layout="prev, pager, next"
@@ -226,818 +258,901 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
-  import { formatTime, formatSize } from '@/utils/number'
-  import Bus from '@/assets/js/bus'
-  import api from '@/api/file-api'
-  import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
-  import IconFile from "@/components/Icon/IconFile";
-  import AlLoading from "@/components/loading/AlLoading";
+import {mapGetters} from 'vuex'
+import {formatTime, formatSize} from '@/utils/number'
+import Bus from '@/assets/js/bus'
+import api from '@/api/file-api'
+import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
+import IconFile from "@/components/Icon/IconFile";
+import AlLoading from "@/components/loading/AlLoading";
 
-  import { suffix } from '@/utils/file-type'
+import {suffix} from '@/utils/file-type'
 
-  import SimTextPreview from "@/components/preview/SimTextPreview";
-  import ImageViewer from "@/components/preview/ImageViewer";
-  import VideoPreview from "@/components/preview/VideoPreview";
-  import AudioPreview from "@/components/preview/AudioPreview";
-  import fileConfig from "@/utils/file-config";
-  import Clipboard from "clipboard";
-  import OfficePreview from "@/components/preview/OfficePreview";
-  import Logo from "@/components/Logo";
-  export default {
-    components: {
-      Logo,
-      OfficePreview, IconFile, BreadcrumbFilePath,AlLoading,
-      AudioPreview, VideoPreview, ImageViewer, SimTextPreview
-    },
-    data() {
-      return {
-        prompt: '文件分享已被撤销',// 文件分享已被撤销
-        isLoading: true,
-        imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
-        fileMenuActive: '',
-        path: this.$route.query.path,
-        showNewFolder: false,
-        isShowNewFolder: false,
-        listModeSearch: false,
-        newFolderName: '新建文件夹',
-        renameFileName: '',
-        searchFileName: '',
-        pathList: [],
-        fileList: [],
-        pagination: {
-          fileId: false,
-          pageIndex: 1,
-          pageSize: 256,
-          total: 0,
-          pageSizes: [10,20,30,40,50]
+import SimTextPreview from "@/components/preview/SimTextPreview";
+import ImageViewer from "@/components/preview/ImageViewer";
+import VideoPreview from "@/components/preview/VideoPreview";
+import AudioPreview from "@/components/preview/AudioPreview";
+import fileConfig from "@/utils/file-config";
+import Clipboard from "clipboard";
+import OfficePreview from "@/components/preview/OfficePreview";
+import Logo from "@/components/Logo";
+
+export default {
+  components: {
+    Logo,
+    OfficePreview, IconFile, BreadcrumbFilePath, AlLoading,
+    AudioPreview, VideoPreview, ImageViewer, SimTextPreview
+  },
+  data() {
+    return {
+      prompt: '文件分享已被撤销',// 文件分享已被撤销
+      isLoading: true,
+      imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
+      fileMenuActive: '',
+      path: this.$route.query.path,
+      showNewFolder: false,
+      isShowNewFolder: false,
+      listModeSearch: false,
+      newFolderName: '新建文件夹',
+      renameFileName: '',
+      searchFileName: '',
+      pathList: [],
+      fileList: [],
+      pagination: {
+        fileId: false,
+        pageIndex: 1,
+        pageSize: 256,
+        total: 0,
+        pageSizes: [10, 20, 30, 40, 50]
+      },
+      indexList: [],
+      clientHeight: 500,
+      // 表头数据
+      tableHead: [
+        {
+          name: '', label: '', index: 0
         },
-        indexList: [],
-        clientHeight: 500,
-        // 表头数据
-        tableHead: [
-          {
-            name: '', label: '', index: 0
-          },
-          {
-            name: '', label: '', index: 1
-          },
-          {
-            name: 'name', label: '名称', sortable: true, index: 2
-          },
-          {
-            name: '', label: '', index: 3
-          },
-          {
-            name: '', label: '', more: true, index: 4
-          },
-          {
-            name: 'size', label: '大小', sortable: true, index: 5
-          },
-          {
-            name: 'updateDate', label: '修改日期', sortable: true, index: 6
-          }
-        ],
-        isJustHideMenus: false,
-        menusIsMultiple: false,
-        menus: [],
-        singleMenus: [
-          { iconClass: 'menu-open', label: '打开', operation: 'open' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-fuzhi', label: '复制下载连接', operation: 'copyDownloadUrl' },
-        ],
-        singleMenusEdit: [
-          { iconClass: 'menu-open', label: '打开', operation: 'open' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-fuzhi', label: '复制下载连接', operation: 'copyDownloadUrl' },
-        ],
-        multipleMenus: [
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-        ],
-        multipleRightMenus: [
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-        ],
-        rowContextData: {},
-        selectRowData: [],
-        tableLoading: false,
-        newFolderLoading: false,
-        renameLoading: false,
-        menuTriangle: '', // 三角菜单
-        cellMouseIndex: -1,
-        editingIndex: -1,
-        dialogMoveOrCopyVisible: false,
-        directoryTreeData: [],
-        selectTreeNode: {},
-        directoryTreeProps: {
-          label: 'name',
-          children: 'children',
-          isLeaf: 'isLeaf'
+        {
+          name: '', label: '', index: 1
         },
-
-        dragLoop: null,
-        positionX:0,
-        positionY:0,
-        grid: false,
-        vmode: 'list',
-        gridColumnNum: -1,
-        gridColumnWidth: 120,
-        gridHoverItemIndex: -1,
-        gridHoverIntermediate: -1,
-        allChecked: false,
-        summaries: '',
-        shareDialog: false,
-        shareLink: '',
-        shareFileName: '',
-        generateShareLinkLoading: true,
-        shareId: this.$route.query.s,
-        currentDirName: '',
-        linkFailed: true,
-        textPreviewVisible : false,
-        textPreviewRow: {},
-        imagePreviewRow: {},
-        imagePreviewVisible : false,
-        videoPreviewRow: {},
-        videoPreviewVisible: false,
-        officePreviewRow: {},
-        officePreviewVisible: false,
-        audioPreviewRow: {},
-        audioPreviewVisible: false,
-        showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
-        showSizeItem: this.$pc,// 列表模式下是否显示文件大小
-        sharer: {},//分享者信息
-        sharerAvatarUrl: '',
-        netdiskName: 'JmalCloud',
-        netdiskLogo: ''
-      }
-    },
-    computed: {
-      ...mapGetters([
-        'name'
-      ]),
-      netdiskLogo() {
-        if (this.$store.state.user.netdiskLogo) {
-          return this.$store.state.user.netdiskLogo
+        {
+          name: 'name', label: '名称', sortable: true, index: 2
+        },
+        {
+          name: '', label: '', index: 3
+        },
+        {
+          name: '', label: '', more: true, index: 4
+        },
+        {
+          name: 'size', label: '大小', sortable: true, index: 5
+        },
+        {
+          name: 'updateDate', label: '修改日期', sortable: true, index: 6
         }
-        return ''
+      ],
+      isJustHideMenus: false,
+      menusIsMultiple: false,
+      menus: [],
+      singleMenus: [
+        {iconClass: 'menu-open', label: '打开', operation: 'open'},
+        {iconClass: 'menu-download', label: '下载', operation: 'download'},
+        {iconClass: 'menu-fuzhi', label: '复制下载连接', operation: 'copyDownloadUrl'},
+      ],
+      singleMenusEdit: [
+        {iconClass: 'menu-open', label: '打开', operation: 'open'},
+        {iconClass: 'menu-download', label: '下载', operation: 'download'},
+        {iconClass: 'menu-fuzhi', label: '复制下载连接', operation: 'copyDownloadUrl'},
+      ],
+      multipleMenus: [
+        {iconClass: 'menu-download', label: '下载', operation: 'download'},
+      ],
+      multipleRightMenus: [
+        {iconClass: 'menu-download', label: '下载', operation: 'download'},
+      ],
+      rowContextData: {},
+      selectRowData: [],
+      tableLoading: false,
+      newFolderLoading: false,
+      renameLoading: false,
+      menuTriangle: '', // 三角菜单
+      cellMouseIndex: -1,
+      editingIndex: -1,
+      dialogMoveOrCopyVisible: false,
+      directoryTreeData: [],
+      selectTreeNode: {},
+      directoryTreeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      },
+
+      dragLoop: null,
+      positionX: 0,
+      positionY: 0,
+      grid: false,
+      vmode: 'list',
+      gridColumnNum: -1,
+      gridColumnWidth: 120,
+      gridHoverItemIndex: -1,
+      gridHoverIntermediate: -1,
+      allChecked: false,
+      summaries: '',
+      shareDialog: false,
+      shareLink: '',
+      shareFileName: '',
+      generateShareLinkLoading: true,
+      shareId: this.$route.query.s,
+      currentDirName: '',
+      linkFailed: true,
+      textPreviewVisible: false,
+      textPreviewRow: {},
+      imagePreviewRow: {},
+      imagePreviewVisible: false,
+      videoPreviewRow: {},
+      videoPreviewVisible: false,
+      officePreviewRow: {},
+      officePreviewVisible: false,
+      audioPreviewRow: {},
+      audioPreviewVisible: false,
+      showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
+      showSizeItem: this.$pc,// 列表模式下是否显示文件大小
+      sharer: {},//分享者信息
+      sharerAvatarUrl: '',
+      netdiskName: 'JmalCloud',
+      netdiskLogo: '',
+      showShareCode: false,
+      shareData: {},
+      extractionCode: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name'
+    ]),
+    netdiskLogo() {
+      if (this.$store.state.user.netdiskLogo) {
+        return this.$store.state.user.netdiskLogo
       }
-    },
-    created() {
+      return ''
+    }
+  },
+  created() {
+    this.getFileList()
+  },
+  mounted() {
+    Bus.$on('fileSuccess', () => {
       this.getFileList()
-    },
-    mounted() {
-      Bus.$on('fileSuccess', () => {
-        this.getFileList()
-      })
-      Bus.$on('clickMore', (selectRowData) => {
-        this.selectRowData = selectRowData
-        this.preliminaryRowData()
-      })
+    })
+    Bus.$on('clickMore', (selectRowData) => {
+      this.selectRowData = selectRowData
+      this.preliminaryRowData()
+    })
 
-      if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.goBack, false);
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL);
+      window.addEventListener('popstate', this.goBack, false);
+    }
+
+
+    const that = this
+    window.onresize = function temp() {
+      that.loadClientHeight()
+    }
+
+    // 加载布局
+    if (this.$route.query.vmode) {
+      this.vmode = this.$route.query.vmode
+      this.grid = this.vmode !== 'list';
+    }
+
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.goBack, false)
+  },
+  directives: {
+    // 注册一个局部的自定义指令 v-focus
+    focus: {
+      // 指令的定义
+      inserted: function (el) {
+        // 聚焦元素
+        el.querySelector('input').focus()
       }
-
-
-      const that = this
-      window.onresize = function temp() {
-        that.loadClientHeight()
-      }
-
-      // 加载布局
-      if(this.$route.query.vmode){
-        this.vmode = this.$route.query.vmode
-        this.grid = this.vmode !== 'list';
-      }
-
     },
-    destroyed() {
-      window.removeEventListener('popstate', this.goBack, false)
-    },
-    directives: {
-      // 注册一个局部的自定义指令 v-focus
-      focus: {
-        // 指令的定义
-        inserted: function (el) {
-          // 聚焦元素
-          el.querySelector('input').focus()
-        }
-      },
-      resize: { // 指令的名称
-        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
-          let width = '', height = '';
-          function isReize() {
-            const style = document.defaultView.getComputedStyle(el);
-            if (width !== style.width || height !== style.height) {
-              binding.value();  // 关键
-            }
-            width = style.width;
-            height = style.height;
+    resize: { // 指令的名称
+      bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+        let width = '', height = '';
+
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value();  // 关键
           }
-          el.__vueSetInterval__ = setInterval(isReize, 300);
-        },
-        unbind(el) {
-          clearInterval(el.__vueSetInterval__);
+          width = style.width;
+          height = style.height;
         }
+
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__);
+      }
+    }
+  },
+  methods: {
+    loadClientHeight() {
+      this.clientHeight = document.documentElement.clientHeight - 200
+    },
+    gridItemHover(item, index) {
+      this.gridHoverItemIndex = index;
+      this.gridHoverIntermediate = index;
+    },
+    gridItemOut(item, index) {
+      this.gridHoverIntermediate = -1
+      const _this = this
+      setTimeout(function () {
+        if (_this.gridHoverIntermediate !== _this.gridHoverItemIndex) {
+          _this.gridHoverItemIndex = -1;
+        }
+      }, 10)
+    },
+    clickGridItemCheckBox(item, index) {
+      // 同步列表的checkbox
+      if (this.indexList.includes(index)) {
+        this.$refs.fileListTable.toggleRowSelection(item, true)
       }
     },
-    methods: {
-      loadClientHeight(){
-        this.clientHeight = document.documentElement.clientHeight - 200
-      },
-      gridItemHover(item,index) {
-        this.gridHoverItemIndex = index;
-        this.gridHoverIntermediate = index;
-      },
-      gridItemOut(item,index) {
-        this.gridHoverIntermediate = -1
-        const _this = this
-        setTimeout(function () {
-          if(_this.gridHoverIntermediate !== _this.gridHoverItemIndex){
-            _this.gridHoverItemIndex = -1;
-          }
-        },10)
-      },
-      clickGridItemCheckBox(item,index) {
-        // 同步列表的checkbox
-        if(this.indexList.includes(index)){
-          this.$refs.fileListTable.toggleRowSelection(item, true)
+    clickGridAllCheckBox() {
+      if (this.indexList.length !== this.fileList.length) {
+        this.$refs.checkboxGroup.toggleAll(true);
+      } else {
+        this.$refs.checkboxGroup.toggleAll();
+        this.$refs.fileListTable.clearSelection();
+      }
+    },
+    gridItemClick(row, e) {
+      const elPath = e.path || (e.composedPath && e.composedPath())
+      let findIndex = elPath.findIndex(el => el.className === 'grid-item-checkbox van-checkbox')
+      if (findIndex > -1) {
+        return
+      }
+      if (this.indexList.length < 1) {
+        if (row.index !== this.editingIndex) {
+          this.fileClick(row)
+          this.editingIndex = -1
         }
-      },
-      clickGridAllCheckBox() {
-        if(this.indexList.length !== this.fileList.length){
-          this.$refs.checkboxGroup.toggleAll(true);
-        }else{
-          this.$refs.checkboxGroup.toggleAll();
-          this.$refs.fileListTable.clearSelection();
-        }
-      },
-      gridItemClick(row, e) {
-        const elPath = e.path || (e.composedPath && e.composedPath())
-        let findIndex = elPath.findIndex(el => el.className === 'grid-item-checkbox van-checkbox')
-        if (findIndex > -1){
-          return
-        }
-        if (this.indexList.length < 1) {
-          if (row.index !== this.editingIndex) {
-            this.fileClick(row)
-            this.editingIndex = -1
-          }
+      } else {
+        if (this.indexList.includes(row.index)) {
+          this.$refs.fileListTable.toggleRowSelection(row, false)
         } else {
-          if(this.indexList.includes(row.index)){
-            this.$refs.fileListTable.toggleRowSelection(row,false)
-          }else{
-            this.$refs.fileListTable.toggleRowSelection(row,true)
-          }
+          this.$refs.fileListTable.toggleRowSelection(row, true)
         }
-      },
-      containerResize() {
-        let clientWidth = document.querySelector(".dashboard-container").clientWidth
-        this.gridColumnNum = Math.round((clientWidth-10)/135)
-        this.gridColumnWidth = (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5
-      },
-      // 格式化最近时间
-      formatTime(time) {
-        return formatTime(time)
-      },
-      // 格式化文件大小
-      formatSize(size) {
-        return formatSize(size)
-      },
-      // 浏览器的返回事件
-      goBack(){
-        const linkIndex = this.pathList.length-3
-        this.handleLink(this.pathList[linkIndex],linkIndex)
-      },
-      handleLink(item, index) {
-        if(index === 0){
-          this.pathList.splice(this.pathList.findIndex((v,i) => i === index + 1), this.pathList.length - (index + 1))
-          this.getFileList(null,true);
-          this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
-        }
-        if(item && item.fileId){
-          this.accessShareOpenDir(item.fileId)
-          this.pathList.splice(this.pathList.findIndex((v,i) => i === index + 1), this.pathList.length - (index + 1))
-        }
-      },
-      // 切换布局
-      changeVmode(){
-        this.grid = !this.grid
-        this.vmode = 'list'
-        if(this.grid){
-          this.vmode = 'grid'
-        }
-        let f = ''
+      }
+    },
+    containerResize() {
+      let clientWidth = document.querySelector(".dashboard-container").clientWidth
+      this.gridColumnNum = Math.round((clientWidth - 10) / 135)
+      this.gridColumnWidth = (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5
+    },
+    // 格式化最近时间
+    formatTime(time) {
+      return formatTime(time)
+    },
+    // 格式化文件大小
+    formatSize(size) {
+      return formatSize(size)
+    },
+    // 浏览器的返回事件
+    goBack() {
+      const linkIndex = this.pathList.length - 3
+      this.handleLink(this.pathList[linkIndex], linkIndex)
+    },
+    handleLink(item, index) {
+      if (index === 0) {
+        this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
+        this.getFileList(null, true);
         this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
-      },
-      accessShareOpenDir(fileId) {
-        this.tableLoading = true
-        api.accessShareOpenDir({
-          share: this.shareId,
-          fileId: fileId,
-          pageIndex: this.pagination.pageIndex,
-          pageSize: this.pagination.pageSize
-        }).then(res => {
-          this.isLoading = false
-          this.fileList = res.data
-          this.loadClientHeight()
-          this.listModeSearch = true
-          this.pagination.fileId = fileId
-          this.pagination['total'] = res.count
-          this.$nextTick(()=>{
-            this.containerResize()
-            this.tableLoading = false
-            this.linkFailed = false
-          })
-        }).catch(e => {})
-      },
-      getFileList(pagination,overload) {
-        this.tableLoading = true
-        api.accessShare({
-          share:this.shareId,
-          pageIndex: this.pagination.pageIndex,
-          pageSize: this.pagination.pageSize
-        }).then(res => {
-          this.isLoading = false
-          if(Object.getPrototypeOf(res.data) === String.prototype){
-            this.prompt = '该链接已失效'
-          }else{
+      }
+      if (item && item.fileId) {
+        this.accessShareOpenDir(item.fileId)
+        this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
+      }
+    },
+    // 切换布局
+    changeVmode() {
+      this.grid = !this.grid
+      this.vmode = 'list'
+      if (this.grid) {
+        this.vmode = 'grid'
+      }
+      let f = ''
+      this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
+    },
+    accessShareOpenDir(fileId) {
+      this.tableLoading = true
+      api.accessShareOpenDir({
+        share: this.shareId,
+        fileId: fileId,
+        pageIndex: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize
+      }).then(res => {
+        this.isLoading = false
+        this.fileList = res.data
+        this.loadClientHeight()
+        this.listModeSearch = true
+        this.pagination.fileId = fileId
+        this.pagination['total'] = res.count
+        this.$nextTick(() => {
+          this.containerResize()
+          this.tableLoading = false
+          this.linkFailed = false
+        })
+      }).catch(e => {
+      })
+    },
+    getFileList(pagination, overload) {
+      this.tableLoading = true
+      api.accessShare({
+        share: this.shareId,
+        pageIndex: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize
+      }).then(res => {
+        this.isLoading = false
+        if (Object.getPrototypeOf(res.data) === String.prototype) {
+          this.prompt = '该链接已失效'
+        } else {
+          let userId = null
+          if (res.data.isPrivacy) {
+            this.showShareCode = true
+            userId = res.data.userId
+            this.shareData = res.data
+            console.log('shareData', this.shareData)
+          } else {
             this.fileList = res.data
-            this.fileList.map((item,index) => {
+            this.fileList.map((item, index) => {
               item.index = index
             })
-            if(this.fileList.length > 0) {
-              api.getSharer({userId: this.fileList[0].userId}).then(res => {
-                this.sharer = res.data
-                this.sharerAvatarUrl = window.location.origin + this.imageUrl + res.data.avatar
-                if (this.sharer.netdiskName) {
-                  this.netdiskName = this.sharer.netdiskName
-                }
-                if (this.sharer.netdiskLogo) {
-                  this.netdiskLogo = this.sharer.netdiskLogo
-                }
-                this.$store.dispatch('user/setLogo', {netdiskName: this.netdiskName, netdiskLogo: this.netdiskLogo})
-              })
-            }
-            this.loadClientHeight()
-            this.listModeSearch = false
-            this.listModeSearchOpenDir = false
-            this.pagination['total'] = res.count
-            this.$nextTick(()=>{
-              this.containerResize()
-              this.tableLoading = false
-              this.linkFailed = false
-            })
-            if(!pagination){
-              const pathList = this.fileList[0].path.split('/');
-              this.currentDirName = pathList[pathList.length-2]
-            }
-            this.$nextTick(()=>{
-              this.containerResize()
-              this.tableLoading = false
-              this.linkFailed = false
-              if(!pagination){
-                // 打开文件夹
-                const item = {}
-                item['folder'] = this.currentDirName
-                item['index'] = this.pathList.length
-                if(!overload){
-                  this.pathList.push(item)
-                }
-              }
-            })
-          }
-        }).catch(() => {
-          this.tableLoading = false
-          this.linkFailed = true
-        })
-      },
-      currentChange(pageIndex) {
-        this.pagination.pageIndex = pageIndex
-        if(this.pagination.fileId){
-          this.accessShareOpenDir(this.pagination.fileId)
-        }else{
-          this.getFileList(true)
-        }
-      },
-      getSummaries(param) {
-        // 合计
-        const sums = []
-        sums[2] = this.getShowSumFileAndFolder(this.fileList)
-        this.summaries = sums[2]
-        return sums
-      },
-      // 统计文件和文件夹大小
-      getShowSumFileAndFolder(fileList) {
-        let folderSize = 0
-        let fileSize = 0
-        let totalSize = 0
-        fileList.forEach((fileInfo) => {
-          if (fileInfo.isFolder) {
-            folderSize += 1
-          } else {
-            fileSize += 1
-          }
-          totalSize += fileInfo.size
-        })
-        let folderSum = ''
-        if (folderSize > 0) {
-          folderSum = folderSize + '个文件夹'
-        }
-        let fileSum = ''
-        if (fileSize > 0) {
-          fileSum = fileSize + '个文件'
-        }
-        return folderSum + ' ' + fileSum + this.getShowSumSize(totalSize)
-      },
-      // 计算总大小
-      getShowSumSize(totalSize) {
-        let sizeSum = ''
-        if (totalSize > 0) {
-          sizeSum = '  共'
-        }
-        if (totalSize < 1024) {
-          sizeSum += totalSize + 'B'
-        } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
-          sizeSum += (totalSize / 1024).toFixed(2) + 'K'
-        } else if (totalSize >= 1024 * 1024 && totalSize < 1024 * 1024 * 1024) {
-          sizeSum += (totalSize / (1024 * 1024)).toFixed(2) + 'M'
-        } else {
-          sizeSum += (totalSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
-        }
-        return sizeSum
-      },
-      // 收集选中的index值作为数组 传递给rowRed判断变换样式
-      handleSelectionChange(row) {
-        // 选中的值
-        this.selectRowData = row
-        let selectTotalSize = 0
-        this.indexList = []
-        for (const item of row) {
-          selectTotalSize += item.size
-          this.indexList.push(item.index)
-        }
-
-        row.forEach(r => {
-          this.$refs.fileListTable.toggleRowSelection(r,true)
-        });
-
-        const item_name = this.tableHead[2]
-        const item_more = this.tableHead[4]
-        const item_size = this.tableHead[5]
-        const item_date = this.tableHead[6]
-        if (this.selectRowData.length > 0) {
-          const sumFileAndFolder = this.getShowSumFileAndFolder(row)
-          const sizeSum = this.getShowSumSize(selectTotalSize)
-          item_name.label = sumFileAndFolder
-          item_name.sortable = false
-          item_more.name = 'more'
-          item_size.label = sizeSum
-          item_size.sortable = false
-          item_date.label = ''
-          item_date.sortable = false
-          this.menusIsMultiple = true
-          this.rowContextData = row[0]
-        } else {
-          item_name.label = '名称'
-          item_name.sortable = true
-          item_more.name = ''
-          item_size.label = '大小'
-          item_size.sortable = true
-          item_date.label = '修改日期'
-          item_date.sortable = true
-        }
-        if(this.indexList.length === this.fileList.length){
-          this.allChecked = true
-        }else{
-          this.allChecked = false
-        }
-      },
-      // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
-      rowRed({ row, column, rowIndex, columnIndex }) {
-        if (this.indexList.length < 1 && columnIndex === 2 && this.cellMouseIndex === rowIndex) {
-          return { cursor: 'pointer', color: "#19ACF9" }
-        }
-        for (let i = 0; i < this.indexList.length; i++) {
-          if (rowIndex === this.indexList[i]) {
-            return { backgroundColor: '#baebff91', cursor: 'default' }
-          }
-        }
-      },
-      // 动态添加index到row里面去
-      tableRowClassName({ row, rowIndex }) {
-        row.index = rowIndex
-      },
-      // 选择某行预备数据
-      preliminaryRowData(row) {
-        if (row) {
-          this.rowContextData = row
-        }
-        const isFavorite = this.rowContextData.isFavorite
-      },
-      // 单元格hover进入时时间
-      cellMouseEnter(row) {
-        if(this.editingIndex === -1){
-          if (this.indexList.length < 1) {
-            this.cellMouseIndex = row.index
-          }
-        }
-      },
-      // 单元格hover退出时时间
-      cellMouseLeave() {
-        this.cellMouseIndex = -1
-      },
-      // 单元格点击事件
-      cellClick(row, column) {
-        clearTimeout(this.Loop);
-        if(this.editingIndex === -1) {
-          const columnIndex = column.index
-          if (columnIndex === 0) {
-            // 点击选中
-            this.$refs.fileListTable.toggleRowSelection(row)
-          }
-          if (columnIndex === 2) {
-            if (this.indexList.length < 1) {
-              if (row.index !== this.editingIndex) {
-                this.fileClick(row)
-                this.editingIndex = -1
-              }
+            if (this.fileList.length > 0) {
+              userId = this.fileList[0].userId
             }
           }
-          if (columnIndex === 4) {
-            // // 单个操作
+          if (userId !== null) {
+            this.getSharer(userId)
           }
-          if (this.indexList.length > 0 && columnIndex > 0) {
-            this.$refs.fileListTable.toggleRowSelection(row)
+          if (this.fileList.length > 0) {
+            this.loadShareFileList(pagination, overload, res.count)
           }
         }
-      },
-      // 更多操作(多选)
-      moreOperation(event) {
-        this.menusIsMultiple = true
-        this.menus = this.multipleMenus
-        this.showOperationMenus(event)
-      },
-      // 更多操作(单选)
-      moreClick(row, event) {
-        this.menusIsMultiple = false
-        if(row.contentType && row.contentType.includes("text")){
-          this.menus = this.singleMenusEdit
-        }else{
-          this.menus = this.singleMenus
-        }
-        // this.showOperationMenus(event)
-        this.preliminaryRowData(row)
-        this.showOperationMenus(event)
-      },
-      // 鼠标右击
-      rowContextmenu(row) {
-        if (this.indexList.includes(row.index)) {
-          this.menusIsMultiple = true
-          this.menus = this.multipleRightMenus
-        } else {
-          this.menusIsMultiple = false
-          if(row.contentType && row.contentType.includes("text")){
-            this.menus = this.singleMenusEdit
-          }else{
-            this.menus = this.singleMenus
-          }
-          this.preliminaryRowData(row)
-        }
-        event.preventDefault()
-        this.menuTriangle = ''
-        const e = {}
-        e.pageX = event.pageX + 5
-        e.pageY = event.pageY + 2
-        e.clientX = event.clientX + 5
-        e.clientY = event.clientY + 2
-        this.$refs.contextShow.showMenu(event)
-      },
-      // 显示操作菜单
-      showOperationMenus(event) {
-        const e = {}
-        if (document.body.scrollHeight - event.pageY > 400) {
-          this.menuTriangle = 'menu-triangle-top'
-          e.pageX = event.pageX - 78
-          e.pageY = event.pageY + 30
-          e.clientX = event.clientX + 78
-          e.clientY = event.clientY + 30
-        } else {
-          this.menuTriangle = 'menu-triangle-bottom'
-          e.pageX = event.pageX - 78
-          e.pageY = event.pageY - 350
-          e.clientX = event.clientX + 78
-          e.clientY = event.clientY - 350
-        }
-        if (!this.isJustHideMenus) {
-          this.$refs.contextShow.showMenu(e)
-        }
-      },
-      show() {
-      },
-      hide() {
-        const that = this
-        this.isJustHideMenus = true
-        setTimeout(function() {
-          that.isJustHideMenus = false
-        }, 100)
-      },
-      // 菜单操作
-      menusOperations(operation) {
-        switch (operation) {
-          case 'open':
-            this.fileClick(this.rowContextData)
-            break
-          case 'download':
-            this.downloadFile()
-            break
-          case 'copyDownloadUrl':
-            this.downloadFile(true)
-            break
-        }
-        this.$refs.contextShow.hideMenu()
-      },
-      downloadFile(copy) {
-        let totalSize = 0
-        if(this.indexList.length > 0){
-          this.selectRowData.forEach(item => {
-            totalSize += item.size
-          })
-        }else{
-          totalSize = this.rowContextData.size
-        }
-        if (totalSize > 0) {
-          let fileIds = [];
-          if (this.menusIsMultiple) {
-            this.selectRowData.forEach(value => {
-              fileIds.push(value.id)
-            })
-          } else {
-            fileIds.push(this.rowContextData.id)
-          }
-          if (fileIds.length > 1 || this.rowContextData.isFolder){
-            if(copy){
-              this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
-            } else {
-              fileConfig.publicPackageDownload(this.shareId, fileIds)
-            }
-            return
-          }
-          if(copy){
-            if (this.rowContextData.isShare) {
-              this.copyDownloadLink(window.location.origin + fileConfig.previewUrl(this.sharer.username, this.rowContextData))
-            } else {
-              this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
-            }
-          } else {
-            fileConfig.publicDownload( this.shareId, this.rowContextData)
-          }
-        } else {
-          this.$message({
-            message: '所选文件为空',
-            type: 'warning'
-          });
-        }
-      },
-      // 复制下载连接
-      copyDownloadLink(url) {
-        let clipboard = new Clipboard('.menu-option', {
-          text: function (){
-            return url
-          }
-        })
-        clipboard.on('success', e => {
-          this.$message({message: '复制成功',type: 'success',duration: 1000});
-          // 释放内存
-          clipboard.destroy()
-        })
-        clipboard.on('error', e => {
-          // 不支持复制
-          this.$message({message: '该浏览器不支持自动复制',type: 'warning',duration: 1000});
-          clipboard.destroy()
-        })
-      },
-      // 点击文件或文件夹
-      fileClick(row) {
-        window.shareId = this.shareId
-        if (row.isFolder) {
+      }).catch(() => {
+        this.tableLoading = false
+        this.linkFailed = true
+        this.isLoading = false
+      })
+    },
+    loadShareFileList(pagination, overload, resCount) {
+      this.loadClientHeight()
+      this.listModeSearch = false
+      this.listModeSearchOpenDir = false
+      this.pagination['total'] = resCount
+      this.$nextTick(() => {
+        this.containerResize()
+        this.tableLoading = false
+        this.linkFailed = false
+      })
+      if (!pagination) {
+        const pathList = this.fileList[0].path.split('/');
+        this.currentDirName = pathList[pathList.length - 2]
+      }
+      this.$nextTick(() => {
+        this.containerResize()
+        this.tableLoading = false
+        this.linkFailed = false
+        if (!pagination) {
           // 打开文件夹
           const item = {}
-          item['folder'] = row.name
-          item['fileId'] = row.id
+          item['folder'] = this.currentDirName
           item['index'] = this.pathList.length
-          this.pathList.push(item)
-          this.pagination.pageIndex = 1
-          this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
-          this.accessShareOpenDir(row.id)
-        } else {
-          if(row.contentType.startsWith('image')){
-            // 图片
-            this.imagePreviewVisible = true
-            this.imagePreviewRow = row
-            return
+          if (!overload) {
+            this.pathList.push(item)
           }
-          if(suffix.simText.includes(row.suffix)){
-            // 文本文件
-            this.textPreviewRow = row
-            this.textPreviewVisible = true
-            return
-          }
-          if(row.contentType.indexOf('video') > -1){
-            // 视频文件
-            this.videoPreviewVisible = true
-            this.videoPreviewRow = row
-            return
-          }
-          // 音频文件
-          if(row.contentType.indexOf('audio') > -1){
-            Bus.$emit('onAddAudio',row, this.audioCoverUrl)
-            return
-          }
-          // office文件
-          if (row.contentType.indexOf('office') > -1 || ['pdf','csv','drawio','mind'].includes(row.suffix)) {
-            // office文件
-            this.officePreviewVisible = true
-            this.officePreviewRow = row
-            return
-          }
-          // 打开文件
-          fileConfig.publicPreview(row.id, this.shareId)
         }
+      })
+    },
+    getSharer(userId) {
+      api.getSharer({userId: userId}).then(res => {
+        this.sharer = res.data
+        console.log('this.sharer', this.sharer)
+        this.sharerAvatarUrl = window.location.origin + this.imageUrl + res.data.avatar
+        if (this.sharer.netdiskName) {
+          this.netdiskName = this.sharer.netdiskName
+        }
+        if (this.sharer.netdiskLogo) {
+          this.netdiskLogo = this.sharer.netdiskLogo
+        }
+        this.$store.dispatch('user/setLogo', {netdiskName: this.netdiskName, netdiskLogo: this.netdiskLogo})
+      })
+    },
+    currentChange(pageIndex) {
+      this.pagination.pageIndex = pageIndex
+      if (this.pagination.fileId) {
+        this.accessShareOpenDir(this.pagination.fileId)
+      } else {
+        this.getFileList(true)
+      }
+    },
+    getSummaries(param) {
+      // 合计
+      const sums = []
+      sums[2] = this.getShowSumFileAndFolder(this.fileList)
+      this.summaries = sums[2]
+      return sums
+    },
+    // 统计文件和文件夹大小
+    getShowSumFileAndFolder(fileList) {
+      let folderSize = 0
+      let fileSize = 0
+      let totalSize = 0
+      fileList.forEach((fileInfo) => {
+        if (fileInfo.isFolder) {
+          folderSize += 1
+        } else {
+          fileSize += 1
+        }
+        totalSize += fileInfo.size
+      })
+      let folderSum = ''
+      if (folderSize > 0) {
+        folderSum = folderSize + '个文件夹'
+      }
+      let fileSum = ''
+      if (fileSize > 0) {
+        fileSum = fileSize + '个文件'
+      }
+      return folderSum + ' ' + fileSum + this.getShowSumSize(totalSize)
+    },
+    // 计算总大小
+    getShowSumSize(totalSize) {
+      let sizeSum = ''
+      if (totalSize > 0) {
+        sizeSum = '  共'
+      }
+      if (totalSize < 1024) {
+        sizeSum += totalSize + 'B'
+      } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
+        sizeSum += (totalSize / 1024).toFixed(2) + 'K'
+      } else if (totalSize >= 1024 * 1024 && totalSize < 1024 * 1024 * 1024) {
+        sizeSum += (totalSize / (1024 * 1024)).toFixed(2) + 'M'
+      } else {
+        sizeSum += (totalSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
+      }
+      return sizeSum
+    },
+    // 收集选中的index值作为数组 传递给rowRed判断变换样式
+    handleSelectionChange(row) {
+      // 选中的值
+      this.selectRowData = row
+      let selectTotalSize = 0
+      this.indexList = []
+      for (const item of row) {
+        selectTotalSize += item.size
+        this.indexList.push(item.index)
+      }
+
+      row.forEach(r => {
+        this.$refs.fileListTable.toggleRowSelection(r, true)
+      });
+
+      const item_name = this.tableHead[2]
+      const item_more = this.tableHead[4]
+      const item_size = this.tableHead[5]
+      const item_date = this.tableHead[6]
+      if (this.selectRowData.length > 0) {
+        const sumFileAndFolder = this.getShowSumFileAndFolder(row)
+        const sizeSum = this.getShowSumSize(selectTotalSize)
+        item_name.label = sumFileAndFolder
+        item_name.sortable = false
+        item_more.name = 'more'
+        item_size.label = sizeSum
+        item_size.sortable = false
+        item_date.label = ''
+        item_date.sortable = false
+        this.menusIsMultiple = true
+        this.rowContextData = row[0]
+      } else {
+        item_name.label = '名称'
+        item_name.sortable = true
+        item_more.name = ''
+        item_size.label = '大小'
+        item_size.sortable = true
+        item_date.label = '修改日期'
+        item_date.sortable = true
+      }
+      if (this.indexList.length === this.fileList.length) {
+        this.allChecked = true
+      } else {
+        this.allChecked = false
+      }
+    },
+    // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
+    rowRed({row, column, rowIndex, columnIndex}) {
+      if (this.indexList.length < 1 && columnIndex === 2 && this.cellMouseIndex === rowIndex) {
+        return {cursor: 'pointer', color: "#19ACF9"}
+      }
+      for (let i = 0; i < this.indexList.length; i++) {
+        if (rowIndex === this.indexList[i]) {
+          return {backgroundColor: '#baebff91', cursor: 'default'}
+        }
+      }
+    },
+    // 动态添加index到row里面去
+    tableRowClassName({row, rowIndex}) {
+      row.index = rowIndex
+    },
+    // 选择某行预备数据
+    preliminaryRowData(row) {
+      if (row) {
+        this.rowContextData = row
+      }
+      const isFavorite = this.rowContextData.isFavorite
+    },
+    // 单元格hover进入时时间
+    cellMouseEnter(row) {
+      if (this.editingIndex === -1) {
+        if (this.indexList.length < 1) {
+          this.cellMouseIndex = row.index
+        }
+      }
+    },
+    // 单元格hover退出时时间
+    cellMouseLeave() {
+      this.cellMouseIndex = -1
+    },
+    // 单元格点击事件
+    cellClick(row, column) {
+      clearTimeout(this.Loop);
+      if (this.editingIndex === -1) {
+        const columnIndex = column.index
+        if (columnIndex === 0) {
+          // 点击选中
+          this.$refs.fileListTable.toggleRowSelection(row)
+        }
+        if (columnIndex === 2) {
+          if (this.indexList.length < 1) {
+            if (row.index !== this.editingIndex) {
+              this.fileClick(row)
+              this.editingIndex = -1
+            }
+          }
+        }
+        if (columnIndex === 4) {
+          // // 单个操作
+        }
+        if (this.indexList.length > 0 && columnIndex > 0) {
+          this.$refs.fileListTable.toggleRowSelection(row)
+        }
+      }
+    },
+    // 更多操作(多选)
+    moreOperation(event) {
+      this.menusIsMultiple = true
+      this.menus = this.multipleMenus
+      this.showOperationMenus(event)
+    },
+    // 更多操作(单选)
+    moreClick(row, event) {
+      this.menusIsMultiple = false
+      if (row.contentType && row.contentType.includes("text")) {
+        this.menus = this.singleMenusEdit
+      } else {
+        this.menus = this.singleMenus
+      }
+      // this.showOperationMenus(event)
+      this.preliminaryRowData(row)
+      this.showOperationMenus(event)
+    },
+    // 鼠标右击
+    rowContextmenu(row) {
+      if (this.indexList.includes(row.index)) {
+        this.menusIsMultiple = true
+        this.menus = this.multipleRightMenus
+      } else {
+        this.menusIsMultiple = false
+        if (row.contentType && row.contentType.includes("text")) {
+          this.menus = this.singleMenusEdit
+        } else {
+          this.menus = this.singleMenus
+        }
+        this.preliminaryRowData(row)
+      }
+      event.preventDefault()
+      this.menuTriangle = ''
+      const e = {}
+      e.pageX = event.pageX + 5
+      e.pageY = event.pageY + 2
+      e.clientX = event.clientX + 5
+      e.clientY = event.clientY + 2
+      this.$refs.contextShow.showMenu(event)
+    },
+    // 显示操作菜单
+    showOperationMenus(event) {
+      const e = {}
+      if (document.body.scrollHeight - event.pageY > 400) {
+        this.menuTriangle = 'menu-triangle-top'
+        e.pageX = event.pageX - 78
+        e.pageY = event.pageY + 30
+        e.clientX = event.clientX + 78
+        e.clientY = event.clientY + 30
+      } else {
+        this.menuTriangle = 'menu-triangle-bottom'
+        e.pageX = event.pageX - 78
+        e.pageY = event.pageY - 350
+        e.clientX = event.clientX + 78
+        e.clientY = event.clientY - 350
+      }
+      if (!this.isJustHideMenus) {
+        this.$refs.contextShow.showMenu(e)
+      }
+    },
+    show() {
+    },
+    hide() {
+      const that = this
+      this.isJustHideMenus = true
+      setTimeout(function () {
+        that.isJustHideMenus = false
+      }, 100)
+    },
+    // 菜单操作
+    menusOperations(operation) {
+      switch (operation) {
+        case 'open':
+          this.fileClick(this.rowContextData)
+          break
+        case 'download':
+          this.downloadFile()
+          break
+        case 'copyDownloadUrl':
+          this.downloadFile(true)
+          break
+      }
+      this.$refs.contextShow.hideMenu()
+    },
+    downloadFile(copy) {
+      let totalSize = 0
+      if (this.indexList.length > 0) {
+        this.selectRowData.forEach(item => {
+          totalSize += item.size
+        })
+      } else {
+        totalSize = this.rowContextData.size
+      }
+      if (totalSize > 0) {
+        let fileIds = [];
+        if (this.menusIsMultiple) {
+          this.selectRowData.forEach(value => {
+            fileIds.push(value.id)
+          })
+        } else {
+          fileIds.push(this.rowContextData.id)
+        }
+        if (fileIds.length > 1 || this.rowContextData.isFolder) {
+          if (copy) {
+            this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
+          } else {
+            fileConfig.publicPackageDownload(this.shareId, fileIds)
+          }
+          return
+        }
+        if (copy) {
+          if (this.rowContextData.isShare) {
+            this.copyDownloadLink(window.location.origin + fileConfig.previewUrl(this.sharer.username, this.rowContextData))
+          } else {
+            this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
+          }
+        } else {
+          fileConfig.publicDownload(this.shareId, this.rowContextData)
+        }
+      } else {
+        this.$message({
+          message: '所选文件为空',
+          type: 'warning'
+        });
+      }
+    },
+    // 复制下载连接
+    copyDownloadLink(url) {
+      let clipboard = new Clipboard('.menu-option', {
+        text: function () {
+          return url
+        }
+      })
+      clipboard.on('success', e => {
+        this.$message({message: '复制成功', type: 'success', duration: 1000});
+        // 释放内存
+        clipboard.destroy()
+      })
+      clipboard.on('error', e => {
+        // 不支持复制
+        this.$message({message: '该浏览器不支持自动复制', type: 'warning', duration: 1000});
+        clipboard.destroy()
+      })
+    },
+    // 点击文件或文件夹
+    fileClick(row) {
+      window.shareId = this.shareId
+      if (row.isFolder) {
+        // 打开文件夹
+        const item = {}
+        item['folder'] = row.name
+        item['fileId'] = row.id
+        item['index'] = this.pathList.length
+        this.pathList.push(item)
+        this.pagination.pageIndex = 1
+        this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
+        this.accessShareOpenDir(row.id)
+      } else {
+        if (row.contentType.startsWith('image')) {
+          // 图片
+          this.imagePreviewVisible = true
+          this.imagePreviewRow = row
+          return
+        }
+        if (suffix.simText.includes(row.suffix)) {
+          // 文本文件
+          this.textPreviewRow = row
+          this.textPreviewVisible = true
+          return
+        }
+        if (row.contentType.indexOf('video') > -1) {
+          // 视频文件
+          this.videoPreviewVisible = true
+          this.videoPreviewRow = row
+          return
+        }
+        // 音频文件
+        if (row.contentType.indexOf('audio') > -1) {
+          Bus.$emit('onAddAudio', row, this.audioCoverUrl)
+          return
+        }
+        // office文件
+        if (row.contentType.indexOf('office') > -1 || ['pdf', 'csv', 'drawio', 'mind'].includes(row.suffix)) {
+          // office文件
+          this.officePreviewVisible = true
+          this.officePreviewRow = row
+          return
+        }
+        // 打开文件
+        fileConfig.publicPreview(row.id, this.shareId)
       }
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  @import "src/styles/home-index";
-  /*.el-breadcrumb {*/
-    /*margin: 50px;*/
-  .dashboard-container {
-    min-width: 1024px;
-    margin: 10px 0;
-  }
-  .header-location {
-    display: block;
-    height: 1px;
-    width: 100%;
-    margin: 0px 0;
+@import "src/styles/home-index";
+/*.el-breadcrumb {*/
+/*margin: 50px;*/
+.dashboard-container {
+  min-width: 1024px;
+  margin: 10px 0;
+}
+
+.header-location {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 0px 0;
+}
+
+.search-class {
+  padding: 3px;
+}
+
+.share-h {
+  padding: 0 15px;
+}
+
+.share-header {
+  height: 45px;
+
+  .logo {
+    font-size: 20px;
   }
 
-  .search-class {
-    padding: 3px;
-  }
-  .share-h {
-    padding: 0 15px;
-  }
-  .share-header {
-    height: 45px;
-    .logo {
-      font-size: 20px;
+  .share-header-content {
+    display: flex;
+    align-items: center;
+
+    svg {
+      font-size: 2rem;
     }
-    .share-header-content {
-      display: flex;
-      align-items: center;
-      svg {
-        font-size: 2rem;
-      }
-      span {
-        margin-left: 10px;
-      }
-    }
-    .sharer {
-      font-size: 14px;
-      float: right;
-      top: 10px;
-      margin-top: -34px;
-      >>>.el-avatar {
-        margin: 0 0 0 10px;
-      }
-      .user {
-        font-weight: 600;
-      }
+
+    span {
+      margin-left: 10px;
     }
   }
-  >>>.el-table{
-    &::before {
-      width: auto;
+
+  .sharer {
+    font-size: 14px;
+    float: right;
+    top: 10px;
+    margin-top: -34px;
+
+    > > > .el-avatar {
+      margin: 0 0 0 10px;
     }
-    .el-table__footer-wrapper {
-      display: none;
+
+    .user {
+      font-weight: 600;
     }
   }
-  .grid-divider {
-    height: 0;
-    text-align: center;
+}
+
+> > > .el-table {
+  &::before {
     width: auto;
-    >>>.el-divider__text {
-    }
-    >>>.el-divider__text.is-center {
-      position: relative;
-    }
   }
-  .newFileMenu li>.menuitem>.text {
-    margin-left: 10px;
+
+  .el-table__footer-wrapper {
+    display: none;
   }
+}
+
+.grid-divider {
+  height: 0;
+  text-align: center;
+  width: auto;
+
+  > > > .el-divider__text {
+  }
+
+  > > > .el-divider__text.is-center {
+    position: relative;
+  }
+}
+
+.newFileMenu li > .menuitem > .text {
+  margin-left: 10px;
+}
+
+.share-content {
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.share-icon {
+  margin: 20px 0 20px 0;
+  >>> .icon-favorite {
+    display: none;
+  }
+  >>> .icon-share {
+    display: none;
+  }
+  .share-icon-font >>> .svg-icon {
+    font-size: 8rem;
+  }
+}
+
+.share-filename {
+  margin: 25px 0 50px 0;
+}
+
+.share-code {
+  >>> .el-input {
+    width: 200px;
+  }
+}
+
+.share-code-valid {
+  margin-top: 20px;
+  >>> .el-button {
+    width: 200px;
+  }
+}
+
 </style>