分享界面添加：

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

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

@@ -6,7 +6,7 @@
       <video-player class="video-player vjs-custom-skin"
         ref="videoPlayer"
         :playsinline="true"
-        :options="playerOptions">              
+        :options="playerOptions">
       </video-player>
     </div>
     <div role="button" @click="close" class="viewer-button viewer-close" data-viewer-action="mix"></div>
@@ -32,6 +32,10 @@ export default {
           return {}
         }
       },
+      shareId: {
+        type: String,
+        default: undefined
+      },
       status: {
         type: Boolean,
         default: false
@@ -43,15 +47,15 @@ export default {
       return {
         playerOptions: {
                     //播放速度
-                    playbackRates: [0.5, 1.0, 1.5, 2.0], 
+                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                     //如果true,浏览器准备好时开始回放。
-                    autoplay: true, 
+                    autoplay: true,
                     // 默认情况下将会消除任何音频。
-                    muted: false, 
+                    muted: false,
                     // 导致视频一结束就重新开始。
-                    loop: false, 
+                    loop: false,
                     // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-                    preload: 'auto', 
+                    preload: 'auto',
                     language: 'zh-CN',
                      // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                     aspectRatio: '16:9',
@@ -59,7 +63,7 @@ export default {
                     fluid: true,
                     sources: [],
                     //你的封面地址
-                    poster: '', 
+                    poster: '',
                      //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
                     controlBar: {
@@ -67,17 +71,21 @@ export default {
                         durationDisplay: true,
                         remainingTimeDisplay: true,
                         //全屏按钮
-                        fullscreenToggle: true  
+                        fullscreenToggle: true
                     }
                 },
         show: this.status,
         url: '',
-      }  
+      }
     },
     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,
@@ -127,4 +135,4 @@ export default {
 .block {
   width: 900px;
 }
-</style>
+</style>

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