分享界面添加：

图片预览、音乐播放、视屏播放、文本预览

src/api/file-api.js

@@ -180,7 +180,7 @@ export default {
       params
     })
   },
-  // 访问分享链接里的文件夹
+  // 预览文本文件
   previewText: function(params) {
     return request({
       url: '/preview/text',
@@ -188,4 +188,12 @@ export default {
       params
     })
   },
+  // 访问分享的文本文件
+  sharePreviewText: function(params) {
+    return request({
+      url: '/public/s/preview/text',
+      method: 'get',
+      params
+    })
+  },
 }

src/components/preview/AudioPreview.vue

@@ -48,7 +48,11 @@ export default {
       pic.addEventListener('click', this.onPicClick);
       Bus.$on('onAddAudio',(newFile,audioCoverUrl) => {
         this.show = true
-        let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
+        let url = `${process.env.VUE_APP_BASE_FILE_API}preview/${newFile.name}?jmal-token=${this.$store.state.user.token}&fileIds=${newFile.id}`
+        if(!this.$store.state.user.token){
+          url = `${process.env.VUE_APP_BASE_FILE_API}/public/s/preview/${newFile.name}?fileIds=${newFile.id}`
+        }
+        // let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
         let music = newFile.music
         let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)
         let musicOperation = {

src/components/preview/ImageViewer.vue

@@ -31,6 +31,10 @@
           return {}
         }
       },
+      shareId: {
+        type: String,
+        default: undefined
+      },
       fileList: {
         type: Array,
         default: function () {
@@ -54,32 +58,23 @@
         options: {
           initialViewIndex: 3,
           ready: function (e) {
-            console.log(e.type);
           },
           show: function (e) {
-            console.log(e.type);
           },
           shown: function (e) {
-            console.log(e.type);
           },
           hide: function (e) {
-            console.log(e.type);
           },
           hidden: function (e) {
-            console.log(e.type);
             Bus.$emit('updateImageViewerStatus',false)
           },
           view: function (e) {
-            console.log(e.type);
           },
           viewed: function (e) {
-            console.log(e.type);
           },
           zoom: function (e) {
-            console.log(e.type);
           },
           zoomed: function (e) {
-            console.log(e.type);
           }
         },
       }
@@ -91,7 +86,10 @@
           let viewIndex = 0
           this.fileList.forEach(element => {
             if(!element.isFolder && element.contentType.indexOf('image') > -1){
-              const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + element.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + element.id
+              let url = `${process.env.VUE_APP_BASE_FILE_API}preview/${element.name}?jmal-token=${this.$store.state.user.token}&fileIds=${element.id}`
+              if(this.shareId){
+                url = `${process.env.VUE_APP_BASE_FILE_API}/public/s/preview/${element.name}?fileIds=${element.id}`
+              }
               this.images.push(url)
               if(this.file.id === element.id){
                 viewIndex = this.images.length-1

src/components/preview/SimTextPreview.vue

@@ -62,6 +62,10 @@
           return {}
         }
       },
+      shareId: {
+        type: String,
+        default: undefined
+      },
       status: {
         type: Boolean,
         default: function () {
@@ -126,7 +130,7 @@
       }
     },
     watch: { //监听file的变化，进行相应的操作即可
-      file: function (a) {
+      file: function (file) {
         this.editorWidth = document.body.clientWidth * this.dialogWidth
         this.editorHieght = document.body.clientHeight * this.dialogWidth - 50
 
@@ -137,7 +141,7 @@
           dangerouslyUseHTMLString: true,
           message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
         })
-        let suffix = a.suffix
+        let suffix = file.suffix
 
         let languages = monaco.languages.getLanguages();
         const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+suffix))
@@ -152,8 +156,14 @@
         }else{
           this.options.wordWrap = ''
         }
-        api.previewText({
+        let request = 'previewText'
-          id: a.id,
+        if(this.shareId){
+          request = 'sharePreviewText'
+        }
+        api[request]({
+          shareId: this.shareId,
+          fileId: file.id,
+          id: file.id,
           username: this.$store.state.user.name
         }).then((res)=>{
             this.loading.close()

src/components/preview/VideoPreview.vue

@@ -32,6 +32,10 @@ export default {
           return {}
         }
       },
+      shareId: {
+        type: String,
+        default: undefined
+      },
       status: {
         type: Boolean,
         default: false
@@ -77,7 +81,11 @@ export default {
     watch: {
       status: function(visible){
         if(visible){
-          let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + this.file.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + this.file.id
+          let url = `${process.env.VUE_APP_BASE_FILE_API}preview/${this.file.name}?jmal-token=${this.$store.state.user.token}&fileIds=${this.file.id}`
+          if(this.shareId){
+            url = `${process.env.VUE_APP_BASE_FILE_API}/public/s/preview/${this.file.name}?fileIds=${this.file.id}`
+          }
+          // let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + this.file.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + this.file.id
           this.playerOptions.sources = [{
                         //类型
                         type: this.file.contentType,

src/views/public/share/shareList.vue

@@ -126,9 +126,9 @@
         </el-table-column>
 
         <el-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center" header-align="center">
-          <template slot-scope="scope">
+          <!--<template slot-scope="scope">-->
-            <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />
+            <!--<svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />-->
-          </template>
+          <!--</template>-->
         </el-table-column>
 
         <el-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
@@ -211,6 +211,11 @@
       <p v-if="prompt !== ''">温馨提示：</p>
       <p>{{prompt}}</p>
     </div>
+
+    <sim-text-preview :file="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>
+
     <el-pagination
       background
       layout="prev, pager, next"
@@ -239,8 +244,16 @@
   import IconFile from "@/components/Icon/IconFile";
   import AlLoading from "@/components/loading/AlLoading";
 
+  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";
+
   export default {
-    components: { IconFile, BreadcrumbFilePath,AlLoading
+    components: { IconFile, BreadcrumbFilePath,AlLoading,
+      AudioPreview, VideoPreview, ImageViewer, SimTextPreview
     },
     data() {
       return {
@@ -340,7 +353,15 @@
         generateShareLinkLoading: true,
         shareId: this.$route.query.s,
         currentDirName: '',
-        linkFailed: true
+        linkFailed: true,
+        textPreviewVisible : false,
+        textPreviewRow: {},
+        imagePreviewRow: {},
+        imagePreviewVisible : false,
+        videoPreviewRow: {},
+        videoPreviewVisible: false,
+        audioPreviewRow: {},
+        audioPreviewVisible: false,
       }
     },
     computed: {
@@ -865,6 +886,32 @@
           this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
           this.accessShareOpenDir(row.id)
         } else {
+          if(row.contentType.indexOf('image') > -1){
+            // 图片
+            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){
+            // 音频文件
+            // this.audioPreviewVisible = true
+            // this.audioPreviewRow = row
+            Bus.$emit('onAddAudio',row, this.audioCoverUrl)
+            return
+          }
+
           // 打开文件
           const fileIds = [row.id]
           const url = process.env.VUE_APP_BASE_FILE_API + '/public/s/preview/' + row.name + '?fileIds=' + fileIds