解决已知问题

package.json

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

public/index.html

@@ -14,7 +14,7 @@
   <title><%= htmlWebpackPlugin.options.title %></title>
   <script>
     var authConfig = {
-      version: '1.1.0',
+      version: '1.0.0',
       roots: [
         {
           id: "0AEofxddwF4bAUk9PVA",

src/App.vue

@@ -14,7 +14,9 @@ export default {
     Layout,
   },
   data: function() {
-    return {};
+    return {
+      github: "https://github.com/Aicirou/goindex-theme-acrou",
+    };
   },
   watch: {
     "$i18n.locale": "i18nHandle",
@@ -22,11 +24,27 @@ export default {
   created() {
     this.i18nHandle(this.$i18n.locale);
   },
+  mounted() {
+    this.checkVersion();
+  },
   methods: {
     i18nHandle(val) {
       util.cookies.set("lang", val);
       document.querySelector("html").setAttribute("lang", val);
     },
+    checkVersion() {
+      let g2index_version = window.gdconfig.version;
+      let app_version = process.env.VUE_APP_G2INDEX_VERSION;
+      if (!g2index_version || app_version !== g2index_version) {
+        this.$notify({
+          title: this.$t("notify.title"),
+          dangerouslyUseHTMLString: true,
+          message: this.$t("checkVersion.tips").replace("${url}", this.github),
+          duration: 0,
+          type: "success",
+        });
+      }
+    },
   },
 };
 </script>

src/libs/util.cookies.js

@@ -13,7 +13,7 @@ cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
     expires: 1
   }
   Object.assign(currentCookieSetting, cookieSetting)
-  Cookies.set(`go2index-${process.env.APP_VERSION}-${name}`, value, currentCookieSetting)
+  Cookies.set(`go2index-${process.env.VUE_APP_VERSION}-${name}`, value, currentCookieSetting)
 }
 
 /**
@@ -21,7 +21,7 @@ cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
  * @param {String} name cookie name
  */
 cookies.get = function (name = 'default') {
-  return Cookies.get(`go2index-${process.env.APP_VERSION}-${name}`)
+  return Cookies.get(`go2index-${process.env.VUE_APP_VERSION}-${name}`)
 }
 
 /**
@@ -36,7 +36,7 @@ cookies.getAll = function () {
  * @param {String} name cookie name
  */
 cookies.remove = function (name = 'default') {
-  return Cookies.remove(`go2index-${process.env.APP_VERSION}-${name}`)
+  return Cookies.remove(`go2index-${process.env.VUE_APP_VERSION}-${name}`)
 }
 
 export default cookies

src/libs/util.db.js

@@ -3,7 +3,7 @@ import LocalStorage from 'lowdb/adapters/LocalStorage'
 import util from '@/libs/util'
 import { cloneDeep } from 'lodash'
 
-const adapter = new LocalStorage(`go2index-${process.env.APP_VERSION}`)
+const adapter = new LocalStorage(`go2index-${process.env.VUE_APP_VERSION}`)
 const db = low(adapter)
 
 db

src/locales/en.json

@@ -49,5 +49,8 @@
       "text": "Clean cache",
       "success": "Cache cleanup successful"
     }
+  },
+  "checkVersion": {
+    "tips": "New version detected, <a href='${url}'>Go to GitHub</a>"
   }
 }

src/locales/zh-chs.json

@@ -49,5 +49,8 @@
       "text": "清理缓存",
       "success": "缓存清理成功"
     }
+  },
+  "checkVersion": {
+    "tips": "检测到有新版本，<a href='${url}'>前往GitHub</a>"
   }
 }

src/locales/zh-cht.json

@@ -49,5 +49,8 @@
       "text": "清理緩存",
       "success": "緩存清理成功"
     }
+  },
+  "checkVersion": {
+    "tips": "檢測到有新版本，<a href='${url}'>前往GitHub</a>"
   }
 }

src/plugin/checkVersion.js

@@ -0,0 +1,16 @@
+import { Notification } from 'element-ui';
+
+export default function check() {
+  let g2index_verison = window.gdconfig.g2index_verison;
+  if (!g2index_verison || process.env.G2INDEX_VERSION !== g2index_verison) {
+    Notification.success({
+      title: "通知",
+      dangerouslyUseHTMLString: true,
+      message: `
+        检测到有新版本，<a href="https://github.com/Aicirou/goindex-theme-acrou">前往GitHub</a></br>
+        New version detected, <a href="https://github.com/Aicirou/goindex-theme-acrou">Go to GitHub</a>
+      `,
+      duration: 0
+    });
+  }
+}

src/router/routes.js

@@ -7,7 +7,7 @@ const meta = {
 }
 
 const frameIn = [{
-    path: "/:id::cmd(text)/:path",
+    path: "/:id(\\d)::cmd(text)/:path",
     component: _import("page/GoText"),
     meta: {
       ...meta,
@@ -15,7 +15,7 @@ const frameIn = [{
     }
   },
   {
-    path: "/:id::cmd(pdf)/:path",
+    path: "/:id(\\d)::cmd(pdf)/:path",
     component: _import("page/GoPdf"),
     meta: {
       ...meta,
@@ -23,7 +23,7 @@ const frameIn = [{
     }
   },
   {
-    path: "/:id::cmd(video)/:path",
+    path: "/:id(\\d)::cmd(video)/:path",
     component: _import("page/GoVideo"),
     meta: {
       ...meta,
@@ -31,7 +31,7 @@ const frameIn = [{
     }
   },
   {
-    path: "/:id::cmd(image)/:path",
+    path: "/:id(\\d)::cmd(image)/:path",
     component: _import("page/GoImg"),
     meta: {
       ...meta,
@@ -39,7 +39,7 @@ const frameIn = [{
     }
   },
   {
-    path: "/:id::cmd(search)(/?q=)*",
+    path: "/:id(\\d)::cmd(search)(/?q=)*",
     component: _import("page/GoList"),
     meta: {
       ...meta,
@@ -47,7 +47,7 @@ const frameIn = [{
     }
   },
   {
-    path: "/:id:/:path*",
+    path: "/:id(\\d):/:path*",
     component: _import("page/GoList"),
     meta: {
       ...meta,

src/views/page/GoList.vue

@@ -8,77 +8,13 @@
       infinite-scroll-disabled="busy"
       infinite-scroll-distance="10"
     >
-      <table class="table is-hoverable" v-if="mode === 'list'">
+      <list-view
-        <thead>
+        :data="buildFiles"
-          <tr>
+        v-if="mode === 'list'"
-            <th
+        :icons="getIcon"
-              v-for="(column, index) in columns"
+        :go="go"
-              v-bind:key="index"
+        :copy="copy"
-              :class="column.class"
+      />
-              :style="column.style"
-            >
-              {{ column.name }}
-              <span class="caret-wrapper">
-                <i class="sort-caret ascending"></i>
-                <i class="sort-caret descending"></i>
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(file, index) in buildFiles" v-bind:key="index">
-            <td
-              @click="
-                go(
-                  file,
-                  file.mimeType !== 'application/vnd.google-apps.folder'
-                    ? 'view'
-                    : ''
-                )
-              "
-            >
-              <svg class="iconfont" aria-hidden="true">
-                <use :xlink:href="getIcon(file.mimeType)" />
-              </svg>
-              {{ file.name }}
-              <span class="has-text-grey g2-file-desc">{{
-                file.description
-              }}</span>
-            </td>
-            <td class="is-hidden-mobile is-hidden-touch">
-              {{ file.modifiedTime }}
-            </td>
-            <td class="is-hidden-mobile is-hidden-touch">{{ file.size }}</td>
-            <td class="is-hidden-mobile is-hidden-touch">
-              <span class="icon" @click.stop="copy(file.path)">
-                <i
-                  class="fa fa-copy faa-shake animated-hover"
-                  :title="$t('list.opt.copy')"
-                  aria-hidden="true"
-                ></i>
-              </span>
-              <span class="icon" @click.stop="go(file, '_blank')">
-                <i
-                  class="fa fa-external-link faa-shake animated-hover"
-                  :title="$t('list.opt.newTab')"
-                  aria-hidden="true"
-                ></i>
-              </span>
-              <span
-                class="icon"
-                @click.stop="go(file, 'down')"
-                v-if="file.mimeType !== 'application/vnd.google-apps.folder'"
-              >
-                <i
-                  class="fa fa-download faa-shake animated-hover"
-                  aria-hidden="true"
-                  :title="$t('list.opt.download')"
-                ></i>
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
       <grid-view
         class="g2-content"
         :data="buildFiles"
@@ -105,7 +41,7 @@
     <readmemd :option="readmemd" v-if="readmemd.display"></readmemd>
 
     <viewer
-      v-if="images && images.length > 0"
+      v-if="viewer && images && images.length > 0"
       :images="images"
       class="is-hidden"
       ref="viewer"
@@ -133,11 +69,13 @@ import {
 } from "@utils/AcrouUtil";
 import axios from "@/utils/axios";
 import { mapState } from "vuex";
+import ListView from "./components/list";
 import GridView from "./components/grid";
 import Markdown from "../common/Markdown";
 export default {
   name: "GoList",
   components: {
+    ListView,
     GridView,
     Headmd: Markdown,
     Readmemd: Markdown,
@@ -151,6 +89,7 @@ export default {
       },
       files: [],
       loading: true,
+      viewer: false,
       icon: {
         "application/vnd.google-apps.folder": "icon-morenwenjianjia",
         "video/mp4": "icon-mp",
@@ -182,26 +121,6 @@ export default {
   },
   computed: {
     ...mapState("acrou/view", ["mode"]),
-    columns() {
-      return [
-        { name: this.$t("list.title.file"), style: "" },
-        {
-          name: this.$t("list.title.moditime"),
-          style: "width:20%",
-          class: "is-hidden-mobile is-hidden-touch",
-        },
-        {
-          name: this.$t("list.title.size"),
-          style: "width:10.5%",
-          class: "is-hidden-mobile is-hidden-touch",
-        },
-        {
-          name: this.$t("list.title.operation"),
-          style: "width:13.5%",
-          class: "is-hidden-mobile is-hidden-touch",
-        },
-      ];
-    },
     buildFiles() {
       var path = this.$route.path;
       return this.files
@@ -326,9 +245,10 @@ export default {
     },
     go(file, target) {
       if (file.mimeType.indexOf("image") != -1) {
-        this.$viewer.show();
+        this.viewer = true;
-        // const viewer = this.$el.querySelector(".images").$viewer;
+        this.$nextTick(() => {
-        // viewer.show();
+          this.$viewer.show();
+        });
         return;
       }
       let path = file.path;
@@ -342,7 +262,8 @@ export default {
         return;
       }
       if (target === "down") {
-        location.href = path;
+        let temp_path = this.$route.params.path ? this.$route.params.path : "";
+        location.href = `/${this.$route.params.id}:down/${temp_path}/${file.name}`;
         return;
       }
       if (target === "view") {

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

@@ -27,16 +27,23 @@
         @click="go(file, 'view')"
       >
         <div class="card g2-grid-view-card">
-          <div class="card-image">
+          <div
+            :class="
+              'card-image' +
+                (file.mimeType.indexOf('video') != -1
+                  ? ' g2-grid-view-play'
+                  : '')
+            "
+          >
             <figure class="image is-square">
               <img
                 v-if="file.thumbnailLink"
                 v-lazy="thum(file.thumbnailLink)"
-                alt="Placeholder image"
+                :alt="file.name"
               />
             </figure>
           </div>
-          <div class="media">
+          <div class="media g2-grid-view-file">
             <div class="content">
               <svg class="iconfont" aria-hidden="true">
                 <use :xlink:href="getIcon(file.mimeType)" />
@@ -100,15 +107,40 @@ export default {
   cursor: pointer;
 }
 .g2-grid-view-card {
-  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.05), 0 0 1px rgba(0, 0, 0, 0.1);
-  border-radius: 1rem;
+  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 {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
   &:hover {
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+  .g2-grid-view-file {
+    .content {
+      padding: 8px;
+    }
   }
 }
 .g2-grid-view-folder {
   padding: 10px;
 }
+.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: "";
+  }
+}
 .iconfont {
   width: 1.5em;
   height: 1.5em;

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

@@ -0,0 +1,112 @@
+<template>
+  <table class="table is-hoverable">
+    <thead>
+      <tr>
+        <th
+          v-for="(column, index) in columns"
+          v-bind:key="index"
+          :class="column.class"
+          :style="column.style"
+        >
+          {{ column.name }}
+          <span class="caret-wrapper">
+            <i class="sort-caret ascending"></i>
+            <i class="sort-caret descending"></i>
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(file, index) in data" v-bind:key="index">
+        <td
+          @click="
+            go(
+              file,
+              file.mimeType !== 'application/vnd.google-apps.folder'
+                ? 'view'
+                : ''
+            )
+          "
+        >
+          <svg class="iconfont" aria-hidden="true">
+            <use :xlink:href="icons(file.mimeType)" />
+          </svg>
+          {{ file.name }}
+          <span class="has-text-grey g2-file-desc">{{ file.description }}</span>
+        </td>
+        <td class="is-hidden-mobile is-hidden-touch">
+          {{ file.modifiedTime }}
+        </td>
+        <td class="is-hidden-mobile is-hidden-touch">{{ file.size }}</td>
+        <td class="is-hidden-mobile is-hidden-touch">
+          <span class="icon" @click.stop="copy(file.path)">
+            <i
+              class="fa fa-copy faa-shake animated-hover"
+              :title="$t('list.opt.copy')"
+              aria-hidden="true"
+            ></i>
+          </span>
+          <span class="icon" @click.stop="go(file, '_blank')">
+            <i
+              class="fa fa-external-link faa-shake animated-hover"
+              :title="$t('list.opt.newTab')"
+              aria-hidden="true"
+            ></i>
+          </span>
+          <span
+            class="icon"
+            @click.stop="go(file, 'down')"
+            v-if="file.mimeType !== 'application/vnd.google-apps.folder'"
+          >
+            <i
+              class="fa fa-download faa-shake animated-hover"
+              aria-hidden="true"
+              :title="$t('list.opt.download')"
+            ></i>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    icons: {
+      type: Function,
+    },
+    go: {
+      type: Function,
+    },
+    copy: {
+      type: Function,
+    },
+  },
+  computed: {
+    columns() {
+      return [
+        { name: this.$t("list.title.file"), style: "" },
+        {
+          name: this.$t("list.title.moditime"),
+          style: "width:20%",
+          class: "is-hidden-mobile is-hidden-touch",
+        },
+        {
+          name: this.$t("list.title.size"),
+          style: "width:10.5%",
+          class: "is-hidden-mobile is-hidden-touch",
+        },
+        {
+          name: this.$t("list.title.operation"),
+          style: "width:13.5%",
+          class: "is-hidden-mobile is-hidden-touch",
+        },
+      ];
+    },
+  },
+};
+</script>

vue.config.js

@@ -8,7 +8,8 @@ function resolve(dir) {
 }
 
 // 增加环境变量
-process.env.APP_VERSION = require('./package.json').version
+process.env.VUE_APP_VERSION = require('./package.json').version
+process.env.VUE_APP_G2INDEX_VERSION = require('./package.json').g2index
 
 // 基础路径 注意发布之前要先修改这里
 let publicPath = process.env.VUE_APP_PUBLIC_PATH || "/";