添加图片懒加载，图片预览，优化grid view mode

package-lock.json

@@ -12226,6 +12226,22 @@
       "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1585683718911&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz",
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4="
     },
+    "v-viewer": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/v-viewer/download/v-viewer-1.5.1.tgz",
+      "integrity": "sha1-lIBNg4FMylZuaRM5/h5keTSG8gA=",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "dependencies": {
+        "throttle-debounce": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-2.1.0.tgz",
+          "integrity": "sha1-JX5kjwpWvZ5U/g8TLEq4YR304dU="
+        }
+      }
+    },
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz",
@@ -12263,6 +12279,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/viewerjs/download/viewerjs-1.5.0.tgz?cache=0&sync_timestamp=1574486727393&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fviewerjs%2Fdownload%2Fviewerjs-1.5.0.tgz",
+      "integrity": "sha1-3r6pSSGJ+kEiPMVn3pFdeUNYmdA="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
@@ -12503,6 +12524,11 @@
       "resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
       "integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
     },
+    "vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz",
+      "integrity": "sha1-TfUKJxvem3TDyveiKNbgr1DVaC8="
+    },
     "vue-loader": {
       "version": "15.9.1",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.1.tgz?cache=0&sync_timestamp=1584584267698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.1.tgz",

package.json

@@ -22,11 +22,13 @@
     "markdown-it": "^10.0.0",
     "node-sass": "^4.14.0",
     "sass-loader": "^8.0.2",
+    "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.17.3",
     "vue-infinite-scroll": "^2.0.2",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.1.6",
     "vue2-ace-editor": "0.0.15",
     "vuex": "^3.4.0"

src/layout/viewmode/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <span
+    class="icon"
+    v-show="$route.meta.view === 'list'"
+    :title="
+      mode === 'list' ? $t('list.view.gridMode') : $t('list.view.listMode')
+    "
+    @click="toggleMode"
+  >
+    <i
+      :class="'fa' + (mode === 'list' ? ' fa-th' : ' fa-th-list')"
+      aria-hidden="true"
+    ></i>
+  </span>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState("acrou/view", ["mode"]),
+  },
+  methods: {
+    ...mapActions("acrou/view", ["toggle"]),
+    toggleMode() {
+      this.toggle(this.mode === "list" ? "grid" : "list");
+    },
+  },
+};
+</script>

src/main.js

@@ -12,6 +12,9 @@ import i18n from './i18n'
 import store from '@/store/index'
 import VueClipboard from 'vue-clipboard2'
 import infiniteScroll from 'vue-infinite-scroll'
+import VueLazyload from 'vue-lazyload'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 import "@/assets/style/theme/register.scss"
 
 Vue.config.productionTip = false
@@ -19,6 +22,11 @@ Vue.use(ElementUI)
 Vue.use(VueAxios,axios)
 Vue.use(VueClipboard)
 Vue.use(infiniteScroll)
+Vue.use(VueLazyload,{
+  // error: 'dist/error.png',
+  loading: 'https://cloud.jsonpop.cn/go2index/vue/airplane.gif'
+})
+Vue.use(Viewer)
 
 new Vue({
   router,

src/views/common/BreadCrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <nav
-      class="breadcrumb is-hidden-mobile is-hidden-touch level g2-breadcrumb"
+      class="breadcrumb level g2-breadcrumb is-hidden-mobile is-hidden-touch"
       aria-label="breadcrumbs"
     >
       <div class="level-left">
@@ -28,22 +28,8 @@
         </div>
       </div>
       <div class="level-right">
-        <div
+        <div class="level-item">
-          class="level-item"
+          <view-mode />
-          v-show="$route.meta.view === 'list'"
-          :title="
-            mode === 'list'
-              ? $t('list.view.gridMode')
-              : $t('list.view.listMode')
-          "
-          @click="changeView"
-        >
-          <span class="icon">
-            <i
-              :class="'fa' + (mode === 'list' ? ' fa-th' : ' fa-th-list')"
-              aria-hidden="true"
-            ></i>
-          </span>
         </div>
       </div>
     </nav>
@@ -51,10 +37,13 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import ViewMode from "@/layout/viewmode";
 import { decode64 } from "@utils/AcrouUtil";
 export default {
   props: ["name"],
+  components: {
+    ViewMode,
+  },
   data: function() {
     return {
       navs: [],
@@ -67,11 +56,7 @@ export default {
   watch: {
     $route: "render",
   },
-  computed: {
-    ...mapState("acrou/view", ["mode"]),
-  },
   methods: {
-    ...mapActions("acrou/view", ["toggle"]),
     go(path) {
       this.$router.push({
         path: path,
@@ -114,9 +99,6 @@ export default {
         this.navs = navs;
       }
     },
-    changeView() {
-      this.toggle(this.mode === "list" ? "grid" : "list");
-    },
   },
 };
 </script>

src/views/common/Navbar.vue

@@ -71,6 +71,9 @@
             <i class="fab fa-github"></i>
           </a>
           <header-setting />
+          <a class="navbar-item is-hidden-desktop" @click.stop="$refs.viewMode.toggleMode">
+            <view-mode ref="viewMode"/>
+          </a>
         </div>
       </div>
     </div>
@@ -80,10 +83,12 @@
 <script>
 import headerLocales from "@/layout/header-aside/components/header-locales";
 import headerSetting from "@/layout/header-aside/components/header-setting";
+import ViewMode from "@/layout/viewmode";
 export default {
   components: {
     headerLocales,
     headerSetting,
+    ViewMode,
   },
   created() {
     this.siteName = document.getElementsByTagName("title")[0].innerText;
@@ -107,7 +112,8 @@ export default {
       currgd: {},
       gds: [],
       isActive: false,
-      eyes: 'data:image/png;base64,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'
+      eyes:
+        "data:image/png;base64,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",
     };
   },
   methods: {

src/views/page/GoList.vue

@@ -85,6 +85,7 @@
         v-if="mode !== 'list'"
         :getIcon="getIcon"
         :go="go"
+        :thum="thum"
       />
       <div
         v-show="files.length === 0"
@@ -102,6 +103,24 @@
     </div>
     <hr />
     <readmemd :option="readmemd" v-if="readmemd.display"></readmemd>
+
+    <viewer
+      v-if="images && images.length > 0"
+      :images="images"
+      class="is-hidden"
+      ref="viewer"
+      :options="{ toolbar: true, url: 'data-source' }"
+      @inited="inited"
+    >
+      <img
+        v-for="image in images"
+        :src="thum(image.thumbnailLink)"
+        :data-source="image.path"
+        :key="image.path"
+        :alt="image.name"
+        class="image"
+      />
+    </viewer>
   </div>
 </template>
 
@@ -185,18 +204,30 @@ export default {
     },
     buildFiles() {
       var path = this.$route.path;
-      return this.files.map((item) => {
+      return this.files
-        var p = path + checkoutPath(item.name, item);
+        .map((item) => {
-        let isFolder = item.mimeType === "application/vnd.google-apps.folder";
+          var p = path + checkoutPath(item.name, item);
-        let size = isFolder ? "-" : formatFileSize(item.size);
+          let isFolder = item.mimeType === "application/vnd.google-apps.folder";
-        return {
+          let size = isFolder ? "-" : formatFileSize(item.size);
-          path: p,
+          return {
-          ...item,
+            path: p,
-          modifiedTime: formatDate(item.modifiedTime),
+            ...item,
-          size: size,
+            modifiedTime: formatDate(item.modifiedTime),
-          isFolder: isFolder,
+            size: size,
-        };
+            isFolder: isFolder,
-      });
+          };
+        })
+        .sort((a, b) => {
+          if (a.isFolder && b.isFolder) {
+            return 0;
+          }
+          return a.isFolder ? -1 : 1;
+        });
+    },
+    images() {
+      return this.buildFiles.filter(
+        (file) => file.mimeType.indexOf("image") != -1
+      );
     },
   },
   created() {
@@ -287,7 +318,19 @@ export default {
           });
         });
     },
+    thum(url) {
+      return url ? `/${this.$route.params.id}:view?url=${url}` : "";
+    },
+    inited(viewer) {
+      this.$viewer = viewer;
+    },
     go(file, target) {
+      if (file.mimeType.indexOf("image") != -1) {
+        this.$viewer.show();
+        // const viewer = this.$el.querySelector(".images").$viewer;
+        // viewer.show();
+        return;
+      }
       let path = file.path;
       let cmd = this.$route.params.cmd;
       if (cmd && cmd === "search") {

src/views/page/GoVideo.vue

@@ -20,31 +20,35 @@
           <span class="icon">
             <i class="fa fa-play-circle" aria-hidden="true"></i>
           </span>
-          {{$t('page.video.play')}} /
+          {{ $t("page.video.play") }} /
           <span class="icon">
             <i class="fa fa-download" aria-hidden="true"></i>
           </span>
-          {{$t('page.video.download')}}
+          {{ $t("page.video.download") }}
         </p>
       </header>
       <div class="card-content">
         <div class="content">
           <div class="field">
-            <label class="label">{{$t('page.video.link')}}</label>
+            <label class="label">{{ $t("page.video.link") }}</label>
             <div class="control">
               <input class="input" type="text" :value="videourl" />
             </div>
           </div>
           <div class="columns is-mobile is-multiline has-text-centered">
-            <div class="column" v-for="(item,index) in players" v-bind:key="index">
+            <div
+              class="column"
+              v-for="(item, index) in players"
+              v-bind:key="index"
+            >
               <p class="heading">
-                <a :href="item.scheme+(item.name==='Thunder'?getThunder:videourl)">
+                <a :href="item.scheme">
                   <figure class="image is-48x48" style="margin: 0 auto;">
                     <img class="icon" :src="item.icon" />
                   </figure>
                 </a>
               </p>
-              <p class>{{item.name}}</p>
+              <p class>{{ item.name }}</p>
             </div>
           </div>
         </div>
@@ -56,65 +60,87 @@
 <script>
 import { decode64 } from "@utils/AcrouUtil";
 export default {
-  data: function () {
+  data: function() {
     return {
       apiurl: "",
       videourl: "",
-      players: [
-        {
-          name: "IINA",
-          icon: "https://www.iina.io/images/iina-icon-60.png",
-          scheme: "iina://weblink?url="
-        },
-        {
-          name: "PotPlayer",
-          icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
-          scheme: "potplayer://"
-        },
-        {
-          name: "VLC",
-          icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
-          scheme: "vlc://"
-        },
-        {
-          name: "Thunder",
-          icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
-          scheme: "thunder://"
-        },
-        {
-          name: "MXPlayer",
-          icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
-          scheme: "intent:"
-        },
-        {
-          name: "nPlayer",
-          icon: "https://cloud.jsonpop.cn/go2index/player/nplayer.png",
-          scheme: "nplayer-"
-        }
-      ]
     };
   },
   methods: {
-    render () {
+    render() {
       // 便于开发环境调试
       this.videourl = window.location.origin + encodeURI(this.url);
       this.apiurl =
         "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
-    }
+    },
   },
-  activated () {
+  activated() {
     this.render();
   },
   computed: {
-    url () {
+    url() {
       if (this.$route.params.path) {
         return decode64(this.$route.params.path);
       }
-      return ''
+      return "";
     },
-    getThunder () {
+    players() {
+      return [
+        {
+          name: "IINA",
+          icon: "https://www.iina.io/images/iina-icon-60.png",
+          scheme: "iina://weblink?url=" + this.videourl,
+        },
+        {
+          name: "PotPlayer",
+          icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
+          scheme: "potplayer://" + this.videourl,
+        },
+        {
+          name: "VLC",
+          icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
+          scheme: "vlc://" + this.videourl,
+        },
+        {
+          name: "Thunder",
+          icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
+          scheme: "thunder://" + this.getThunder,
+        },
+        {
+          name: "Aria2",
+          icon: "https://cloud.jsonpop.cn/go2index/player/aria2.png",
+          scheme: 'javascript:alert("暂未实现")',
+        },
+        {
+          name: "nPlayer",
+          icon: "https://cloud.jsonpop.cn/go2index/player/nplayer.png",
+          scheme: "nplayer-" + this.videourl,
+        },
+        {
+          name: "MXPlayer(Free)",
+          icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
+          scheme:
+            "intent:" +
+            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",
+          scheme:
+            "intent:" +
+            this.videourl +
+            "#Intent;package=com.mxtech.videoplayer.pro;S.title=" +
+            this.title +
+            ";end",
+        },
+      ];
+    },
+    getThunder() {
       return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
-    }
+    },
-  }
+  },
 };
-</script>
+</script>

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

@@ -3,16 +3,11 @@
     <div class="columns is-multiline">
       <div
         class="column is-one-quarter"
-        v-for="(file, index) in imgData"
+        v-for="(file, index) in folders"
-        :key="index"
+        :key="'folder_' + index"
-        @click="
+        @click="go(file)"
-          go(
-            file,
-            file.mimeType !== 'application/vnd.google-apps.folder' ? 'view' : ''
-          )
-        "
       >
-        <div class="card g2-view-box g2-grid-folder" v-if="file.isFolder">
+        <div class="card g2-grid-view-card g2-grid-view-folder">
           <div class="media">
             <div class="content">
               <svg class="iconfont" aria-hidden="true">
@@ -22,12 +17,21 @@
             </div>
           </div>
         </div>
-        <div class="card g2-view-box" v-if="!file.isFolder">
+      </div>
+    </div>
+    <div class="columns is-multiline">
+      <div
+        class="column is-one-quarter"
+        v-for="(file, index) in files"
+        :key="'file_' + index"
+        @click="go(file, 'view')"
+      >
+        <div class="card g2-grid-view-card">
           <div class="card-image">
             <figure class="image is-square">
               <img
                 v-if="file.thumbnailLink"
-                :src="thum(file.thumbnailLink)"
+                v-lazy="thum(file.thumbnailLink)"
                 alt="Placeholder image"
               />
             </figure>
@@ -60,22 +64,22 @@ export default {
     go: {
       type: Function,
     },
+    thum: {
+      type: Function,
+    },
   },
   data: function() {
     return {};
   },
   computed: {
-    imgData() {
+    folders() {
-      //   return this.data.filter((file) => file.mimeType.indexOf("image/") != -1);
+      return this.data.filter((item) => item.isFolder);
-      //   return this.data.filter((file) => !file.isFolder);
+    },
-      return this.data;
+    files() {
-    },
+      return this.data.filter((item) => !item.isFolder);
-  },
-  methods: {
-    thum(url) {
-      return url ? `/${this.$route.params.id}:view?url=${url}` : "";
     },
   },
+  methods: {},
 };
 </script>
 <style lang="scss" scoped>
@@ -95,14 +99,14 @@ export default {
 .column {
   cursor: pointer;
 }
-.g2-view-box {
+.g2-grid-view-card {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
   border-radius: 1rem;
   &:hover {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
   }
 }
-.g2-grid-folder {
+.g2-grid-view-folder {
   padding: 10px;
 }
 .iconfont {