添加grid模式

src/main.js

@@ -24,5 +24,8 @@ new Vue({
   router,
   store,
   i18n,
-  render: h => h(App)
+  render: h => h(App),
+  mounted() {
+    this.$store.dispatch('acrou/view/load')
+  }
 }).$mount('#app')

src/store/modules/acrou/modules/view.js

@@ -0,0 +1,69 @@
+export default {
+  namespaced: true,
+  state: {
+    // 视图模式
+    mode: "list",
+  },
+  actions: {
+    /**
+     * @description 从持久化数据读取视图模式设置
+     * @param {Object} context
+     */
+    load({ state, dispatch, commit }) {
+      // eslint-disable-next-line no-async-promise-executor
+      return new Promise(async (resolve) => {
+        // store 赋值
+        state.mode = await dispatch(
+          "acrou/db/get",
+          {
+            dbName: "sys",
+            path: "view.mode.value",
+            defaultValue: "list",
+            user: true,
+          },
+          { root: true }
+        );
+        // 应用
+        commit("set", state.mode);
+        // end
+        resolve();
+      });
+    },
+    /**
+     * @description 切换视图模式
+     * @param {Object} context
+     */
+    toggle({ state, dispatch, commit }, mode) {
+      // eslint-disable-next-line no-async-promise-executor
+      return new Promise(async (resolve) => {
+        // store 赋值
+        state.mode = mode || "list";
+        // 持久化
+        await dispatch(
+          "acrou/db/set",
+          {
+            dbName: "sys",
+            path: "view.mode.value",
+            value: state.mode,
+            user: true,
+          },
+          { root: true }
+        );
+        // 应用
+        commit("set", state.mode);
+        // end
+        resolve();
+      });
+    },
+  },
+  mutations: {
+    /**
+     * @description 设置 store 里的视图模式
+     * @param {Object} state state
+     * @param {Boolean} mode mode
+     */
+    set(state, mode) {
+      state.mode = mode;
+    },
+  },
+};

src/views/common/BreadCrumb.vue

@@ -8,14 +8,20 @@
         <div class="level-item">
           <ul>
             <li>
-              <a v-show="navs && navs.length>0" @click="go('/'+index+':/')">{{$t('index')}}</a>
+              <a
+                v-show="navs && navs.length > 0"
+                @click="go('/' + index + ':/')"
+                >{{ $t("index") }}</a
+              >
             </li>
             <li
               v-for="(item, index) in navs"
-              :class="(index+1)==navs.length?'is-active':''"
+              :class="index + 1 == navs.length ? 'is-active' : ''"
               v-bind:key="index"
             >
-              <a v-if="(index+1)==navs.length" aria-current="page" href="#">{{item.title}}</a>
+              <a v-if="index + 1 == navs.length" aria-current="page" href="#">{{
+                item.title
+              }}</a>
               <a v-else @click="go(item.path)">{{ item.title }}</a>
             </li>
           </ul>
@@ -25,11 +31,18 @@
         <div
           class="level-item"
           v-show="$route.meta.view === 'list'"
-          :title="listMode?$t('list.view.listMode'):$t('list.view.gridMode')"
+          :title="
+            mode === 'list'
+              ? $t('list.view.gridMode')
+              : $t('list.view.listMode')
+          "
           @click="changeView"
         >
           <span class="icon">
-            <i :class="'fa'+(listMode ? ' fa-th-list': ' fa-th')" aria-hidden="true"></i>
+            <i
+              :class="'fa' + (mode === 'list' ? ' fa-th' : ' fa-th-list')"
+              aria-hidden="true"
+            ></i>
           </span>
         </div>
       </div>
@@ -38,6 +51,7 @@
 </template>
 
 <script>
+import { mapState, mapActions } from "vuex";
 import { decode64 } from "@utils/AcrouUtil";
 export default {
   props: ["name"],
@@ -45,32 +59,35 @@ export default {
     return {
       navs: [],
       index: "/",
-      listMode: false
     };
   },
   mounted() {
     this.render();
   },
   watch: {
-    $route: "render"
+    $route: "render",
+  },
+  computed: {
+    ...mapState("acrou/view", ["mode"]),
   },
   methods: {
+    ...mapActions("acrou/view", ["toggle"]),
     go(path) {
       this.$router.push({
-        path: path
+        path: path,
       });
     },
     render() {
       this.index = this.$route.params.id;
-      let cmd = this.$route.params.cmd
+      let cmd = this.$route.params.cmd;
       // 如果是搜索不进行渲染
-      if (cmd === 'search') {
+      if (cmd === "search") {
         this.navs = [];
         return;
       }
-      let path = this.$route.path
+      let path = this.$route.path;
       if (cmd) {
-        path = decode64(this.$route.params.path)
+        path = decode64(this.$route.params.path);
       }
       var arr = path.trim("/").split("/");
       var p = "/";
@@ -91,16 +108,16 @@ export default {
           }
           navs.push({
             path: p,
-            title: n
+            title: n,
           });
         }
         this.navs = navs;
       }
     },
     changeView() {
-      this.listMode = !this.listMode;
-    }
-  }
+      this.toggle(this.mode === "list" ? "grid" : "list");
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/page/GoList.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
     <headmd :option="headmd" v-if="headmd.display"></headmd>
-    <div class="golist" v-loading="loading">
-      <table
-        class="table is-hoverable"
+    <div
+      class="golist"
+      v-loading="loading"
       v-infinite-scroll="pageLoad"
       infinite-scroll-disabled="busy"
       infinite-scroll-distance="10"
     >
+      <table class="table is-hoverable" v-if="mode === 'list'">
         <thead>
           <tr>
             <th
@@ -39,11 +40,6 @@
               <svg class="iconfont" aria-hidden="true">
                 <use :xlink:href="getIcon(file.mimeType)" />
               </svg>
-              <!-- <span class="icon">
-                <figure class="image is-24x24">
-                  <img :src="file.thumbnailLink" />
-                </figure>
-              </span>-->
               {{ file.name }}
               <span class="has-text-grey g2-file-desc">{{
                 file.description
@@ -83,6 +79,13 @@
           </tr>
         </tbody>
       </table>
+      <grid-view
+        class="g2-content"
+        :data="buildFiles"
+        v-if="mode !== 'list'"
+        :getIcon="getIcon"
+        :go="go"
+      />
       <div
         v-show="files.length === 0"
         class="has-text-centered no-content"
@@ -110,10 +113,13 @@ import {
   checkView,
 } from "@utils/AcrouUtil";
 import axios from "@/utils/axios";
+import { mapState } from "vuex";
+import GridView from "./components/grid";
 import Markdown from "../common/Markdown";
 export default {
   name: "GoList",
   components: {
+    GridView,
     Headmd: Markdown,
     Readmemd: Markdown,
   },
@@ -156,6 +162,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("acrou/view", ["mode"]),
     columns() {
       return [
         { name: this.$t("list.title.file"), style: "" },
@@ -181,7 +188,7 @@ export default {
       return this.files.map((item) => {
         var p = path + checkoutPath(item.name, item);
         let isFolder = item.mimeType === "application/vnd.google-apps.folder";
-        let size = isFolder ? '-' : formatFileSize(item.size);
+        let size = isFolder ? "-" : formatFileSize(item.size);
         return {
           path: p,
           ...item,

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="g2-grid-view">
+    <div class="columns is-multiline">
+      <div
+        class="column is-one-quarter"
+        v-for="(file, index) in imgData"
+        :key="index"
+        @click="
+          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="media">
+            <div class="content">
+              <svg class="iconfont" aria-hidden="true">
+                <use :xlink:href="getIcon(file.mimeType)" />
+              </svg>
+              {{ file.name }}
+            </div>
+          </div>
+        </div>
+        <div class="card g2-view-box" v-if="!file.isFolder">
+          <div class="card-image">
+            <figure class="image is-square">
+              <img
+                v-if="file.thumbnailLink"
+                :src="thum(file.thumbnailLink)"
+                alt="Placeholder image"
+              />
+            </figure>
+          </div>
+          <div class="media">
+            <div class="content">
+              <svg class="iconfont" aria-hidden="true">
+                <use :xlink:href="getIcon(file.mimeType)" />
+              </svg>
+              {{ file.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GridView",
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    getIcon: {
+      type: Function,
+    },
+    go: {
+      type: Function,
+    },
+  },
+  data: function() {
+    return {};
+  },
+  computed: {
+    imgData() {
+      //   return this.data.filter((file) => file.mimeType.indexOf("image/") != -1);
+      //   return this.data.filter((file) => !file.isFolder);
+      return this.data;
+    },
+  },
+  methods: {
+    thum(url) {
+      return url ? `/${this.$route.params.id}:view?url=${url}` : "";
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.g2-grid-view {
+  margin-bottom: 2rem;
+}
+.media-left {
+  margin-right: 0.5rem;
+}
+.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  font-size: 14px;
+}
+.column {
+  cursor: pointer;
+}
+.g2-view-box {
+  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 {
+  padding: 10px;
+}
+.iconfont {
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+}
+</style>