替换grid view 视频文件的icon ，修复图片点击不能定位到该图

2020-05-19 18:10:44 +08:00 · 2020-05-19 18:10:44 +08:00 · a9fddbfa9e
commit a9fddbfa9e
parent d015fe2d3f
7 changed files with 81 additions and 64 deletions
--- a/buildAppJSPlugin.js
+++ b/buildAppJSPlugin.js
@ -17,14 +17,12 @@ class BuildAppJSPlugin {
        // 遍历所有编译过的资源文件，
        // 对于每个文件名称，都添加一行内容。
        for (let filename in compilation.assets) {
-          if (process.env.NODE_ENV === "production") {
-            filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
-          } else {
-            filename = "/" + filename;
-          }
-          // filename = "/" + filename;
-
          if (filename.match(".*\\.js$")) {
+            if (process.env.NODE_ENV === "production") {
+              filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
+            } else {
+              filename = "/" + filename;
+            }
            jsarr.push(filename);
          }
          if (filename.match(".*\\.css$")) {
@ -47,33 +45,32 @@ class BuildAppJSPlugin {
            .map((e) => e.css));
        }
        let content = `
-          var styles = ${JSON.stringify(cssarr)};
          var scripts = ${JSON.stringify(jsarr)};
          ${cdnjs}
-          document.write('<div id="app"></div>');
-          var title = document.getElementsByTagName('title')
-          styles.forEach((item) => {
-              let link = document.createElement('link');
-              link.href=item;
-              link.rel = 'preload';
-              link.as = 'style';
-              title[0].parentNode.insertBefore(link,title[0])
-              link = document.createElement('link');
-              link.href=item;
-              link.rel = 'stylesheet';
-              title[0].parentNode.insertBefore(link,title[0])
-          });
          scripts.forEach((item) => {
            document.write('<script src="' + item + '"></script>');
          });
        `;
+        let cssContent = ''
+        cssarr.forEach(item=>{
+          cssContent += `@import url(${item});\n`
+        })
        // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
        compilation.assets["app.js"] = {
          source: function() {
            return content;
          },
          size: function() {
-            return cssarr.length + jsarr.length;
+            return jsarr.length;
+          },
+        };
+
+        compilation.assets["style.css"] = {
+          source: function() {
+            return cssContent;
+          },
+          size: function() {
+            return cssarr.length;
          },
        };

--- a/dependencies-cdn.js
+++ b/dependencies-cdn.js
@ -18,7 +18,7 @@ module.exports = [
  // { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
  // { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' },
  { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
-  { name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_zf96psu0uo.js', css: '' },
+  { name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_axq33n6snd.js', css: '' },
  { name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' },
  { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' },
  { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css' },
--- a/public/index.html
+++ b/public/index.html
@ -43,11 +43,11 @@
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
-  <script src="/app.js"></script>
 </head>

 <body>
-
+  <div id="app"></div>
+  <script src="/app.js"></script>
 </body>

 </html>
--- a/src/assets/style/theme/acrou/index.scss
+++ b/src/assets/style/theme/acrou/index.scss
@ -1,3 +1,13 @@
+@font-face {
+  font-family: 'iconfont';  /* project id 1760192 */
+  src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot');
+  src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.svg#iconfont') format('svg');
+}
+
 body {
  overflow: hidden;
 }
--- a/src/main.js
+++ b/src/main.js
@ -17,6 +17,8 @@ import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
 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?b5880d23c0d350f0a4c8ac671320847e";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script>`);
+
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 Vue.use(VueAxios,axios)
--- a/src/views/page/GoList.vue
+++ b/src/views/page/GoList.vue
@ -8,13 +8,7 @@
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
    >
-      <list-view
-        :data="buildFiles"
-        v-if="mode === 'list'"
-        :icons="getIcon"
-        :go="go"
-        :copy="copy"
-      />
+      <list-view :data="buildFiles" v-if="mode === 'list'" :icons="getIcon" :go="go" :copy="copy" />
      <grid-view
        class="g2-content"
        :data="buildFiles"
@ -23,10 +17,7 @@
        :go="go"
        :thum="thum"
      />
-      <div
-        v-show="files.length === 0"
-        class="has-text-centered no-content"
-      ></div>
+      <div v-show="files.length === 0" class="has-text-centered no-content"></div>
      <center>
        <div :class="!busy ? 'is-hidden' : ''">
          <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
@ -34,7 +25,7 @@
        </div>
        <!-- <span v-if="page.page_token === null && files.length !== 0" class="tag">
          {{ $t("list.total") }} {{ files.length }} {{ $t("list.item") }}
-        </span> -->
+        </span>-->
      </center>
    </div>
    <div class="is-divider" :data-content="$t('list.total')+' '+files.length+' ' + $t('list.item')"></div>
@ -80,7 +71,7 @@ export default {
    Headmd: Markdown,
    Readmemd: Markdown,
  },
-  data: function() {
+  data: function () {
    return {
      busy: false,
      page: {
@ -121,7 +112,7 @@ export default {
  },
  computed: {
    ...mapState("acrou/view", ["mode"]),
-    buildFiles() {
+    buildFiles () {
      var path = this.$route.path;
      return this.files
        .map((item) => {
@ -143,22 +134,22 @@ export default {
          return a.isFolder ? -1 : 1;
        });
    },
-    images() {
+    images () {
      return this.buildFiles.filter(
        (file) => file.mimeType.indexOf("image") != -1
      );
    },
  },
-  created() {
+  created () {
    this.render();
  },
  methods: {
-    pageLoad() {
+    pageLoad () {
      if (!this.page.page_token) return;
      this.page.page_index++;
      this.render("scroll");
    },
-    render(scroll) {
+    render (scroll) {
      if (scroll) {
        this.busy = true;
      } else {
@ -210,7 +201,7 @@ export default {
          this.$router.go(-1);
        });
    },
-    checkPassword(path) {
+    checkPassword (path) {
      var pass = prompt(this.$t("list.auth"), "");
      localStorage.setItem("password" + path, pass);
      if (pass != null && pass != "") {
@ -219,7 +210,7 @@ export default {
        this.$router.go(-1);
      }
    },
-    copy(path) {
+    copy (path) {
      let origin = window.location.origin;
      path = origin + encodeURI(path);
      this.$copyText(path)
@ -237,17 +228,18 @@ export default {
          });
        });
    },
-    thum(url) {
+    thum (url) {
      return url ? `/${this.$route.params.id}:view?url=${url}` : "";
    },
-    inited(viewer) {
+    inited (viewer) {
      this.$viewer = viewer;
    },
-    go(file, target) {
+    go (file, target) {
      if (file.mimeType.indexOf("image") != -1) {
        this.viewer = true;
        this.$nextTick(() => {
-          this.$viewer.show();
+          let index = this.images.findIndex(item => item.path === file.path)
+          this.$viewer.view(index);
        });
        return;
      }
@ -279,7 +271,7 @@ export default {
        return;
      }
    },
-    renderMd(files, path) {
+    renderMd (files, path) {
      var cmd = this.$route.params.cmd;
      if (cmd) {
        return;
@ -303,7 +295,7 @@ export default {
        }
      });
    },
-    goSearchResult(file, target) {
+    goSearchResult (file, target) {
      this.loading = true;
      let cur = window.current_drive_order;
      axios
@ -328,7 +320,7 @@ export default {
          console.log(e);
        });
    },
-    getIcon(type) {
+    getIcon (type) {
      return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
    },
  },
--- a/src/views/page/components/grid/index.vue
+++ b/src/views/page/components/grid/index.vue
@ -35,12 +35,9 @@
                  : '')
            "
          >
+            <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" />
            </figure>
          </div>
          <div class="media g2-grid-view-file">
@ -75,14 +72,14 @@ export default {
      type: Function,
    },
  },
-  data: function() {
+  data: function () {
    return {};
  },
  computed: {
-    folders() {
+    folders () {
      return this.data.filter((item) => item.isFolder);
    },
-    files() {
+    files () {
      return this.data.filter((item) => !item.isFolder);
    },
  },
@ -129,16 +126,35 @@ export default {
 .g2-grid-view-play {
  &:before {
    z-index: 10;
-    background-image: url("https://cloud.jsonpop.cn/go2index/vue/play.png");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 50px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
+    background: rgba(0, 0, 0, 0.15);
+    opacity: 1;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+  i {
+    font-style: normal;
+  }
+
+  i:before {
+    z-index: 10;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    text-align: center;
+    height: 0;
+    color: hsla(0, 0%, 100%, 0.67);
+    content: "\e6f6";
+    font-size: 3rem;
+    font-family: iconfont !important;
+    line-height: 0;
  }
 }
 .iconfont {