优化页面显示，支持自定义播放器，调整cdn地址动态配置

buildAppJSPlugin.js

@@ -32,17 +32,17 @@ class BuildAppJSPlugin {
         cssarr = cssarr.sort(function (a) {
           return a.indexOf("app.");
         });
-        var cdnjs = ''
+        var cdnjs = "";
         if (process.env.NODE_ENV === "production") {
           cssarr = cdn.css.concat(cssarr);
           cdnjs = `var cdnjs = ${JSON.stringify(cdn.js)};
           cdnjs.forEach((item) => {
             document.write('<script src="' + item + '"></script>');
-          });`
+          });`;
         } else {
-          cssarr = cssarr.concat(cdnDependencies
-            .filter((e) => e.name === "")
-            .map((e) => e.css));
+          cssarr = cssarr.concat(
+            cdnDependencies.filter((e) => e.name === "").map((e) => e.css)
+          );
         }
         let content = `
           var scripts = ${JSON.stringify(jsarr)};
@@ -51,10 +51,10 @@ class BuildAppJSPlugin {
             document.write('<script src="' + item + '"></script>');
           });
         `;
-        let cssContent = ''
-        cssarr.forEach(item=>{
-          cssContent += `@import url(${item});\n`
-        })
+        let cssContent = "";
+        cssarr.forEach((item) => {
+          cssContent += `@import url(${item});\n`;
+        });
         // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
         compilation.assets["app.js"] = {
           source: function () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go2index-theme-acrou",
-  "version": "2.0.0",
+  "version": "2.0.5bate",
   "g2index": "1.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",

public/index.html

@@ -42,6 +42,9 @@
         // 是否显示文件/文件夹描述（默认不显示）
         // Show file/folder description or not (not shown by default)
         desc: true,
+      },
+      player: {
+          api: "https://api.jsonpop.cn/demo/blplyaer/?url="
       }
     }
     window.gdconfig = JSON.parse(JSON.stringify({ version: authConfig.version, themeOptions: themeOptions }));

src/assets/style/theme/acrou/index.scss

@@ -83,7 +83,7 @@ body {
 }
 
 .no-content {
-  background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
+  background: url(#{$cdnPath}images/no-data.png) no-repeat 50% 50%;
   height: 240px;
   line-height: 240px;
   text-align: center;

src/main.js

@@ -22,14 +22,13 @@ import "@/assets/style/theme/register.scss";
 document.write(
   `<script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?6be1011f95a1bfcdb2179fe2ae6e58fe";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s)})();</script>`
 );
-
 Vue.config.productionTip = false;
+Vue.prototype.$cdnpath = cdnpath;
 Vue.use(ElementUI);
 Vue.use(VueAxios, axios);
-Vue.use(cdnpath);
 Vue.use(VueClipboard);
 Vue.use(VueLazyload, {
-  loading: cdnpath("/images/airplane.gif"),
+  loading: cdnpath("images/airplane.gif"),
 });
 Vue.use(Viewer);
 

src/views/page/GoVideo.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="content g2-content">
-    <div class="video-content">
+    <div v-if="player && player.api" class="video-content">
       <iframe
         width="100%"
         height="100%"
-        :src="apiurl"
+        :src="apiUrl"
         frameborder="0"
         border="0"
         marginwidth="0"
@@ -14,6 +14,9 @@
         allowfullscreen="true"
       ></iframe>
     </div>
+    <video v-else style="width:100%;" preload controls>
+      <source :src="videoUrl" type="video/mp4" />
+    </video>
     <div class="card">
       <header class="card-header">
         <p class="card-header-title">
@@ -32,7 +35,7 @@
           <div class="field">
             <label class="label">{{ $t("page.video.link") }}</label>
             <div class="control">
-              <input class="input" type="text" :value="videourl" />
+              <input class="input" type="text" :value="videoUrl" />
             </div>
           </div>
           <div class="columns is-mobile is-multiline has-text-centered">
@@ -62,16 +65,16 @@ import { decode64 } from "@utils/AcrouUtil";
 export default {
   data: function() {
     return {
-      apiurl: "",
-      videourl: "",
+      apiUrl: "",
+      player: window.themeOptions.player,
+      videoUrl: "",
     };
   },
   methods: {
     render() {
       // 便于开发环境调试
-      this.videourl = window.location.origin + encodeURI(this.url);
-      this.apiurl =
-        "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
+      this.videoUrl = window.location.origin + encodeURI(this.url);
+      this.apiUrl = this.player.api + this.videoUrl;
     },
   },
   activated() {
@@ -88,50 +91,50 @@ export default {
       return [
         {
           name: "IINA",
-          icon: "https://www.iina.io/images/iina-icon-60.png",
-          scheme: "iina://weblink?url=" + this.videourl,
+          icon: this.$cdnpath("images/player/iina.png"),
+          scheme: "iina://weblink?url=" + this.videoUrl,
         },
         {
           name: "PotPlayer",
-          icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
-          scheme: "potplayer://" + this.videourl,
+          icon: this.$cdnpath("images/player/potplayer.png"),
+          scheme: "potplayer://" + this.videoUrl,
         },
         {
           name: "VLC",
-          icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
-          scheme: "vlc://" + this.videourl,
+          icon: this.$cdnpath("images/player/vlc.png"),
+          scheme: "vlc://" + this.videoUrl,
         },
         {
           name: "Thunder",
-          icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
+          icon: this.$cdnpath("images/player/thunder.png"),
           scheme: "thunder://" + this.getThunder,
         },
         {
           name: "Aria2",
-          icon: "https://cloud.jsonpop.cn/go2index/player/aria2.png",
+          icon: this.$cdnpath("images/player/aria2.png"),
           scheme: 'javascript:alert("暂未实现")',
         },
         {
           name: "nPlayer",
-          icon: "https://cloud.jsonpop.cn/go2index/player/nplayer.png",
-          scheme: "nplayer-" + this.videourl,
+          icon: this.$cdnpath("images/player/nplayer.png"),
+          scheme: "nplayer-" + this.videoUrl,
         },
         {
           name: "MXPlayer(Free)",
-          icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
+          icon: this.$cdnpath("images/player/mxplayer.png"),
           scheme:
             "intent:" +
-            this.videourl +
+            this.videoUrl +
             "#Intent;package=com.mxtech.videoplayer.ad;S.title=" +
             this.title +
             ";end",
         },
         {
           name: "MXPlayer(Pro)",
-          icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
+          icon: this.$cdnpath("images/player/mxplayer.png"),
           scheme:
             "intent:" +
-            this.videourl +
+            this.videoUrl +
             "#Intent;package=com.mxtech.videoplayer.pro;S.title=" +
             this.title +
             ";end",
@@ -139,7 +142,7 @@ export default {
       ];
     },
     getThunder() {
-      return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
+      return Buffer.from("AA" + this.videoUrl + "ZZ").toString("base64");
     },
   },
 };

src/views/page/components/grid/index.vue

@@ -37,7 +37,14 @@
           >
             <i></i>
             <figure class="image is-square">
-              <img v-if="file.thumbnailLink" v-lazy="thum(file.thumbnailLink)" :alt="file.name" />
+              <img
+                v-if="file.thumbnailLink"
+                v-lazy="thum(file.thumbnailLink)"
+                :alt="file.name"
+              />
+              <svg v-else class="file-icon iconfont" aria-hidden="true">
+                <use :xlink:href="getIcon(file.mimeType)" />
+              </svg>
             </figure>
           </div>
           <div class="media g2-grid-view-file">
@@ -107,10 +114,20 @@ export default {
   //   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
   border-radius: 0.5rem;
-  .card-image img {
+  .card-image {
+    img {
       border-top-left-radius: 0.5rem;
       border-top-right-radius: 0.5rem;
     }
+    .file-icon {
+      width: 64px;
+      height: 64px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
   &:hover {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.05);
   }

vue.config.js

@@ -1,18 +1,26 @@
 const path = require("path");
 const cdnDependencies = require("./dependencies-cdn");
 const BuildAppJSPlugin = require("./buildAppJSPlugin");
-const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const CompressionWebpackPlugin = require("compression-webpack-plugin");
 
 function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
 // 增加环境变量
-process.env.VUE_APP_VERSION = require('./package.json').version
-process.env.VUE_APP_G2INDEX_VERSION = require('./package.json').g2index
+process.env.VUE_APP_VERSION = require("./package.json").version;
+process.env.VUE_APP_G2INDEX_VERSION = require("./package.json").g2index;
+
+process.env.VUE_APP_CDN_PATH =
+  process.env.VUE_APP_CDN_PATH.replace(
+    "@master",
+    "@" + process.env.VUE_APP_VERSION
+  ) || "/";
 
 // 基础路径 注意发布之前要先修改这里
 let publicPath = process.env.VUE_APP_CDN_PATH || "/";
+let cdnPath = process.env.VUE_APP_CDN_PATH;
+const isProd = process.env.NODE_ENV === "production";
 
 // 设置不参与构建的库
 let externals = {};
@@ -28,23 +36,30 @@ const cdn = {
 module.exports = {
   publicPath,
   lintOnSave: true,
-
+  css: {
+    loaderOptions: {
+      // 设置 scss 公用变量文件
+      sass: {
+        prependData: `$cdnPath: "${isProd ? cdnPath : "/"}";`,
+      },
+    },
+  },
   configureWebpack: (config) => {
-    const configNew = {}
-    if (process.env.NODE_ENV === 'production') {
-      configNew.externals = externals
+    const configNew = {};
+    if (isProd) {
+      configNew.externals = externals;
       configNew.plugins = [
         // gzip
         new CompressionWebpackPlugin({
-          filename: '[path].gz[query]',
-          test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
+          filename: "[path].gz[query]",
+          test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
           threshold: 10240,
           minRatio: 0.8,
-          deleteOriginalAssets: false
-        })
-      ]
+          deleteOriginalAssets: false,
+        }),
+      ];
     }
-    return configNew
+    return configNew;
   },
 
   chainWebpack: (config) => {
@@ -53,7 +68,7 @@ module.exports = {
      * 添加 CDN 参数到 htmlWebpackPlugin 配置中
      */
     config.plugin("html").tap((args) => {
-      if (process.env.NODE_ENV === "production") {
+      if (isProd) {
         args[0].cdn = cdn;
       } else {
         args[0].cdn = {
@@ -61,12 +76,11 @@ module.exports = {
           css: cdnDependencies.filter((e) => e.name === "").map((e) => e.css),
         };
       }
-      args[0].inject = false
+      args[0].inject = false;
       return args;
     });
     // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
-    config.resolve
-      .symlinks(true)
+    config.resolve.symlinks(true);
     config.resolve.alias
       .set("@", resolve("src"))
       .set("@assets", resolve("src/assets"))