perf: 添加iframe预览配置

public/resource/epubjs/epub.css

@@ -0,0 +1,282 @@
+body {
+  margin: 0;
+  background: #fafafa;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #333;
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  min-height: 800px;
+}
+
+#title {
+  width: 900px;
+  min-height: 18px;
+  margin: 10px auto;
+  text-align: center;
+  font-size: 16px;
+  color: #E2E2E2;
+  font-weight: 400;
+}
+
+#title:hover {
+  color: #777;
+}
+
+#viewer.spreads {
+  width: 900px;
+  height: 600px;
+  box-shadow: 0 0 4px #ccc;
+  border-radius: 5px;
+  padding: 0;
+  position: relative;
+  margin: 10px auto;
+  background: white url('ajax-loader.gif') center center no-repeat;
+  top: calc(50vh - 400px);
+}
+
+#viewer.spreads .epub-view > iframe {
+  background: white;
+}
+
+#viewer.scrolled {
+  overflow: hidden;
+  width: 800px;
+  margin: 0 auto;
+  position: relative;
+  background: url('ajax-loader.gif') center center no-repeat;
+  box-shadow: 0 0 4px #ccc;
+  padding: 20px;
+  background: white;
+}
+
+#viewer.scrolled .epub-view > iframe {
+  background: white;
+}
+
+#prev {
+  left: 0;
+}
+
+#next {
+  right: 0;
+}
+
+#toc {
+  display: block;
+  margin: 10px auto;
+}
+
+@media (min-width: 1000px) {
+  #viewer.spreads:after {
+    position: absolute;
+    width: 1px;
+    border-right: 1px #000 solid;
+    height: 90%;
+    z-index: 1;
+    left: 50%;
+    margin-left: -1px;
+    top: 5%;
+    opacity: .15;
+    box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
+    content:  "";
+  }
+
+  #viewer.spreads.single:after {
+    display: none;
+  }
+
+  #prev {
+    left: 40px;
+  }
+
+  #next {
+    right: 40px;
+  }
+}
+
+.arrow {
+  position: fixed;
+  top: 50%;
+  margin-top: -32px;
+  font-size: 64px;
+  color: #E2E2E2;
+  font-family: arial, sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  text-decoration: none;
+}
+
+.navlink {
+  margin: 14px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: #ccc;
+}
+
+.arrow:hover, .navlink:hover {
+  color: #777;
+}
+
+.arrow:active, .navlink:hover {
+  color: #000;
+}
+
+#book-wrapper {
+  width: 480px;
+  height: 640px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  margin: 28px auto;
+  background: #fff;
+  border-radius: 0 5px 5px 0;
+  position: absolute;
+}
+
+#book-viewer {
+  width: 480px;
+  height: 660px;
+  margin: -30px auto;
+  -moz-box-shadow:      inset 10px 0 20px rgba(0,0,0,.1);
+  -webkit-box-shadow:   inset 10px 0 20px rgba(0,0,0,.1);
+  box-shadow:           inset 10px 0 20px rgba(0,0,0,.1);
+}
+
+#book-viewer iframe {
+  padding: 40px 40px;
+}
+
+#controls {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  width: 400px;
+  margin-left: -200px;
+  text-align: center;
+  display: none;
+}
+
+#controls > input[type=range] {
+  width: 400px;
+}
+
+#navigation {
+  width: 400px;
+  height: 100vh;
+  position: absolute;
+  overflow: auto;
+  top: 0;
+  left: 0;
+  background: #777;
+  -webkit-transition: -webkit-transform .25s ease-out;
+  -moz-transition: -moz-transform .25s ease-out;
+  -ms-transition: -moz-transform .25s ease-out;
+  transition: transform .25s ease-out;
+
+}
+
+#navigation.fixed {
+  position: fixed;
+}
+
+#navigation h1 {
+  width: 200px;
+  font-size: 16px;
+  font-weight: normal;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+#navigation h2 {
+  font-size: 14px;
+  font-weight: normal;
+  color: #B0B0B0;
+  margin-bottom: 20px;
+}
+
+#navigation ul {
+  padding-left: 36px;
+  margin-left: 0;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  width: 340px;
+}
+
+#navigation ul li {
+  list-style: decimal;
+  margin-bottom: 10px;
+  color: #cccddd;
+  font-size: 12px;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+#navigation ul li a {
+  color: #ccc;
+  text-decoration: none;
+}
+
+#navigation ul li a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+
+#navigation ul li a.active {
+  color: #fff;
+}
+
+#navigation #cover {
+  display: block;
+  margin: 24px auto;
+}
+
+#navigation #closer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 12px;
+  color: #cccddd;
+  width: 24px;
+}
+
+#navigation.closed {
+  -webkit-transform: translate(-400px, 0);
+  -moz-transform: translate(-400px, 0);
+  -ms-transform: translate(-400px, 0);
+  transform: translate(-400px, 0);
+}
+
+svg {
+  display: block;
+}
+
+.close-x {
+  stroke: #cccddd;
+  fill: transparent;
+  stroke-linecap: round;
+  stroke-width: 5;
+}
+
+.close-x:hover {
+  stroke: #fff;
+}
+
+#opener {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  stroke: #E2E2E2;
+  fill: #E2E2E2;
+
+}
+
+#opener:hover {
+  stroke: #777;
+  fill: #777;
+}

public/resource/epubjs/viewer.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>EPUB.js Spreads Example</title>
+
+  <script src="./jszip@3.10.1.min.js"></script>
+  <script src="./epubjs@0.3.88.min.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="./epub.css">
+
+</head>
+<body>
+<!-- <div id="title"></div> -->
+<select id="toc"></select>
+<div id="viewer" class="spreads"></div>
+<a id="prev" href="#prev" class="arrow">‹</a>
+<a id="next" href="#next" class="arrow">›</a>
+
+<script>
+  var params =
+    URLSearchParams &&
+    new URLSearchParams(document.location.search.substring(1))
+  var url =
+    params && params.get("url") && decodeURIComponent(params.get("url"))
+  var currentSectionIndex =
+    params && params.get("loc") ? params.get("loc") : undefined
+  let blob = fetch(url).then((res) => res.blob())
+  var book = ePub(
+    blob.then((blob) => blob.arrayBuffer()),
+    {
+      restore: true,
+      reload: true,
+      spreads: true,
+    }
+  )
+  var rendition = book.renderTo("viewer", {
+    width: "100%",
+    height: 600,
+    spread: "always",
+  })
+
+  rendition.display(currentSectionIndex);
+
+  book.ready.then(function() {
+
+    var next = document.getElementById("next");
+
+    next.addEventListener("click", function(e){
+      book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
+      e.preventDefault();
+    }, false);
+
+    var prev = document.getElementById("prev");
+    prev.addEventListener("click", function(e){
+      book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
+      e.preventDefault();
+    }, false);
+
+    var keyListener = function(e){
+
+      // Left Key
+      if ((e.keyCode || e.which) == 37) {
+        book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
+      }
+
+      // Right Key
+      if ((e.keyCode || e.which) == 39) {
+        book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
+      }
+
+    };
+
+    rendition.on("keyup", keyListener);
+    document.addEventListener("keyup", keyListener, false);
+
+  })
+
+  var title = document.getElementById("title");
+
+  rendition.on("rendered", function(section){
+    var current = book.navigation && book.navigation.get(section.href);
+
+    if (current) {
+      var $select = document.getElementById("toc");
+      var $selected = $select.querySelector("option[selected]");
+      if ($selected) {
+        $selected.removeAttribute("selected");
+      }
+
+      var $options = $select.querySelectorAll("option");
+      for (var i = 0; i < $options.length; ++i) {
+        let selected = $options[i].getAttribute("ref") === current.href;
+        if (selected) {
+          $options[i].setAttribute("selected", "");
+        }
+      }
+    }
+
+  });
+
+  rendition.on("relocated", function(location){
+    console.log(location);
+
+    var next = book.package.metadata.direction === "rtl" ?  document.getElementById("prev") : document.getElementById("next");
+    var prev = book.package.metadata.direction === "rtl" ?  document.getElementById("next") : document.getElementById("prev");
+
+    if (location.atEnd) {
+      next.style.visibility = "hidden";
+    } else {
+      next.style.visibility = "visible";
+    }
+
+    if (location.atStart) {
+      prev.style.visibility = "hidden";
+    } else {
+      prev.style.visibility = "visible";
+    }
+
+  });
+
+  rendition.on("layout", function(layout) {
+    let viewer = document.getElementById("viewer");
+
+    if (layout.spread) {
+      viewer.classList.remove('single');
+    } else {
+      viewer.classList.add('single');
+    }
+  });
+
+  window.addEventListener("unload", function () {
+    console.log("unloading");
+    this.book.destroy();
+  });
+
+  book.loaded.navigation.then(function(toc){
+    var $select = document.getElementById("toc"),
+      docfrag = document.createDocumentFragment();
+
+    toc.forEach(function(chapter) {
+      var option = document.createElement("option");
+      option.textContent = chapter.label;
+      option.setAttribute("ref", chapter.href);
+
+      docfrag.appendChild(option);
+    });
+
+    $select.appendChild(docfrag);
+
+    $select.onchange = function(){
+      var index = $select.selectedIndex,
+        url = $select.options[index].getAttribute("ref");
+      rendition.display(url);
+      return false;
+    };
+
+  });
+
+
+
+
+</script>
+
+</body>
+</html>

src/api/setting-api.js

@@ -1,6 +1,20 @@
 import request from '@/utils/request'
 
 export default {
+  getPreviewConfig(params) {
+    return request({
+      url: '/cloud/setting/preview/config',
+      method: 'get',
+      params
+    })
+  },
+  updatePreviewConfig(data) {
+    return request({
+      url: '/cloud/setting/preview/config',
+      method: 'put',
+      data
+    })
+  },
   getTranscodeConfig(params) {
     return request({
       url: '/cloud/setting/transcode/config',

src/components/ShowFile/ShowFile.vue

@@ -1112,17 +1112,6 @@ export default {
       fileHandler: {},
       iframePreviewVisible: false,
       audioPreviewRow: {},
-      fileHandlers: {
-        "pdf": {
-          "PDF.js": "https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url",
-        },
-        "epub": {
-          "EPUB.js": "https://alist-org.github.io/static/epub.js/viewer.html?url=$e_url",
-        },
-        "dwg": {
-          "kkPreview": "http://192.168.0.233:8012/onlinePreview?url=$eb_url",
-        }
-      },
       audioPreviewVisible: false,
       drawer: false,
       rowStyleExecuting: false,
@@ -4247,12 +4236,12 @@ export default {
           this.$emit('selectedFile', selectFile)
           return
         }
-        const fileHandler = this.hasIframePreview(row.suffix, this.fileHandlers)
+        const fileHandler = this.hasIframePreview(row.suffix, this.$store.getters.iframePreviewConfig)
         if (fileHandler !== null) {
           // iframe 预览
           this.iframePreviewVisible = true
           this.iframePreviewRow = row
-          this.fileHandler = {}
+          this.fileHandler = fileHandler
           return
         }
         if (row.contentType.startsWith('image')) {

src/components/preview/IframeContentPreview.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="iframe-content">
-      <iframe ref="iframeContent" name="Iframe Content Preview" :title="file.name" :src="url"></iframe>
+      <iframe ref="iframeContent" name="Iframe Content Preview" :title="file.name" :src="url" sandbox="allow-scripts allow-forms allow-same-origin allow-popups"></iframe>
     </div>
   </div>
 </template>
@@ -55,7 +55,6 @@ export default {
   methods: {
     iframeLoad() {
       if (this.fileHandler) {
-        console.log('this.fileHandler', this.fileHandler);
         for (let service in this.fileHandler) {
           const urlTemplate = this.fileHandler[service]
           if (!urlTemplate) {
@@ -70,7 +69,6 @@ export default {
             this.url = urlTemplate.replace('$eb_url', encodeURIComponent(this.base64EncodeUnicode(url)))
             this.services.push({label: service, value: this.url})
           }
-          console.log('services', this.services)
         }
       } else {
         this.url = undefined
@@ -112,6 +110,7 @@ export default {
 <style lang="scss" scoped>
 .top-bar {
   width: 100%;
+  top: 0;
   position: absolute;
   display: flex;
   flex-wrap: nowrap;

src/components/preview/IframePreview.vue

@@ -58,7 +58,7 @@ export default {
     },
     fileHandler: {
       type: Object,
-      default: undefined
+      default: {}
     },
     shareId: {
       type: String,
@@ -127,7 +127,7 @@ export default {
       }
     },
     getType(suffix) {
-      if (this.fileHandler.length > 0) {
+      if (Object.keys(this.fileHandler).length > 0) {
         return 'other'
       }
       if (this.file.contentType.indexOf('office') > -1) {

src/store/getters.js

@@ -7,6 +7,7 @@ const getters = {
   name: state => state.user.name,
   showName: state => state.user.showName,
   newVersion: state => state.user.newVersion,
+  iframePreviewConfig: state => state.user.iframePreviewConfig,
   userId: state => state.user.userId,
   userInfo: state => state.user.userInfo,
   menuList: state => state.user.menuList,

src/store/modules/user.js

@@ -33,7 +33,8 @@ const getDefaultState = () => {
     menuList: [],
     netdiskName: '',
     netdiskLogo: '',
-    newVersion: ''
+    newVersion: '',
+    iframePreviewConfig: {}
   }
 }
 
@@ -75,6 +76,9 @@ const mutations = {
   },
   SET_NEW_VERSION:(state,newVersion) => {
     state.newVersion = newVersion;
+  },
+  SET_IFRAME_PREVIEW:(state, iframePreviewConfig) => {
+    state.iframePreviewConfig = iframePreviewConfig;
   }
 }
 
@@ -147,7 +151,7 @@ const actions = {
           // reject('Verification failed, please Login again.')
         }
 
-        const { id, username, showName, avatar, netdiskName, netdiskLogo, newVersion} = data
+        const { id, username, showName, avatar, netdiskName, netdiskLogo, newVersion, iframe} = data
 
         commit('SET_NAME', username)
         commit('SET_SHOW_NAME', showName)
@@ -156,6 +160,11 @@ const actions = {
         commit('SET_USER_INFO', data)
         commit('SET_NETDISK_NAME', netdiskName)
         commit('SET_NETDISK_LOGO', netdiskLogo)
+        if (iframe) {
+          commit('SET_IFRAME_PREVIEW', JSON.parse(iframe))
+        } else {
+          commit('SET_IFRAME_PREVIEW', {})
+        }
         if (newVersion) {
           commit('SET_NEW_VERSION', newVersion)
         } else {

src/views/setting/cloudManager.vue

@@ -75,8 +75,13 @@
               <transcode-config></transcode-config>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="LDAP认证" name="4" class="setting-tab-panel">
+          <el-tab-pane label="预览配置" name="4" class="setting-tab-panel">
             <div v-if="activeName === '4'">
+              <preview-config></preview-config>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="LDAP认证" name="5" class="setting-tab-panel">
+            <div v-if="activeName === '5'">
               <ldap-config></ldap-config>
             </div>
           </el-tab-pane>
@@ -93,6 +98,7 @@ import settingApi, { getSetting } from "@/api/setting-api";
 import Logo from "@/components/Logo";
 import getPageTitle from "@/utils/get-page-title";
 import UploadImageInput from "@/components/input/UploadImageInput.vue";
+import PreviewConfig from '@/views/setting/cloudSetting/previewConfig.vue'
 import {mapGetters, mapState} from "vuex";
 import store from "@/store";
 import TaskProgress from "@/components/TaskProgress/index.vue";
@@ -101,7 +107,7 @@ import TranscodeConfig from "@/views/setting/cloudSetting/transcodeConfig.vue";
 import OfficeConfig from "@/views/setting/cloudSetting/officeConfig.vue";
 
 export default {
-  components: {OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
+  components: { PreviewConfig, OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
   data() {
     return {
       activeName: '1',

src/views/setting/cloudSetting/previewConfig.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="container">
+    <el-form :rules="rules" ref="previewConfigForm" :model="configFormData" label-width="120px" size="small"
+             style="width: 860px" autocomplete="off">
+      <el-form-item label="iframe 预览" prop="iframe">
+        <span class="form-instruction"><a href="https://alist.nn.ci/zh/config/preview.html#iframe-%E9%A2%84%E8%A7%88" target="_blank"><svg-icon icon-class="wailian"/>参考Alist的iframe预览 </a> </span>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 2}"
+          :placeholder="defaultIframeConfig"
+          v-model="configFormData.iframe">
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" v-loading="saveConfigLoading" @click="submitForm">保存配置</el-button>
+        <el-button type="warning" @click="resetConfig">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import settingApi from '@/api/setting-api'
+
+export default {
+  name: 'PreviewConfig',
+  props: {
+    data: {
+      type: Array,
+      default: [],
+    },
+  },
+  computed: {},
+  data() {
+    const validateIframeFormat = async (rule, value, callback) => {
+      if (!value) {
+        callback()
+      } else {
+        try {
+          this.configFormData.iframe = JSON.stringify(JSON.parse(value), null, 4)
+        } catch (e) {
+          callback(new Error('json格式错误'))
+        }
+        callback()
+      }
+    }
+    return {
+      saveConfigLoading: false,
+      defaultIframeConfig: '{\n' +
+        '    "pdf": {\n' +
+        '        "PDF.js": "/pdf.js/web/viewer.html?file=$e_url"\n' +
+        '    },\n' +
+        '    "epub": {\n' +
+        '        "epub.js": "/resource/epubjs/viewer.html?url=$e_url"\n' +
+        '    }\n' +
+        '}',
+      configFormData: {
+        iframe: '',
+      },
+      rules: {
+        iframe: [
+          { required: false, validator: validateIframeFormat, trigger: 'submit'}
+        ],
+      }
+    }
+  },
+  mounted() {
+    this.getPreviewConfig()
+  },
+  methods: {
+    getPreviewConfig() {
+      settingApi.getPreviewConfig().then(res => {
+        this.configFormData = res.data
+      })
+    },
+    submitForm() {
+      this.$refs.previewConfigForm.validate((valid) => {
+        if (valid) {
+          this.saveConfig()
+        } else {
+          return false
+        }
+      });
+    },
+    resetConfig() {
+      this.configFormData.iframe = this.defaultIframeConfig
+    },
+    saveConfig() {
+      this.saveConfigLoading = true
+      settingApi.updatePreviewConfig(this.configFormData).then(() => {
+        this.saveConfigLoading = false
+        this.$message.success('保存成功')
+        this.$store.dispatch('user/getInfo')
+      }).catch(() => {
+        this.saveConfigLoading = false
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 0 !important;
+}
+</style>