增加视图模式切换demo

src/views/common/BreadCrumb.vue

@@ -1,44 +1,66 @@
 <template>
-  <nav class="breadcrumb is-hidden-mobile is-hidden-touch" aria-label="breadcrumbs">
-    <ul>
-      <li>
-        <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':''"
-        v-bind:key="index"
-      >
-        <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>
-  </nav>
+  <div>
+    <nav
+      class="breadcrumb is-hidden-mobile is-hidden-touch level g2-breadcrumb"
+      aria-label="breadcrumbs"
+    >
+      <div class="level-left">
+        <div class="level-item">
+          <ul>
+            <li>
+              <a @click="go('/'+index+':/')">{{$t('index')}}</a>
+            </li>
+            <li
+              v-for="(item,index) in navs"
+              :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-else @click="go(item.path)">{{item.title}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="level-right">
+        <div
+          class="level-item"
+          v-show="$route.meta.view==='list'"
+          :title="$route.meta.view==='list'?'列表视图':'网格视图'"
+          @click="changeView"
+        >
+          <span class="icon">
+            <i :class="'fa'+(listMode ? ' fa-th': ' fa-th-list')" aria-hidden="true"></i>
+          </span>
+        </div>
+      </div>
+    </nav>
+  </div>
 </template>
 
 <script>
 import { decode64 } from "@utils/AcrouUtil";
 export default {
   props: ["name"],
-  data: function() {
+  data: function () {
     return {
       navs: [],
-      index: "/"
+      index: "/",
+      listMode: true
     };
   },
-  mounted() {
+  mounted () {
     this.render();
   },
   watch: {
     $route: "render"
   },
   methods: {
-    go(path) {
+    go (path) {
       this.$router.push({
         path: path
       });
     },
-    render() {
+    render () {
       this.index = this.$route.params.id;
       let cmd = this.$route.params.cmd
       // 如果是搜索不进行渲染
@@ -47,7 +69,7 @@ export default {
         return;
       }
       let path = this.$route.path
-      if(cmd){
+      if (cmd) {
         path = decode64(this.$route.params.path)
       }
       var arr = path.trim("/").split("/");
@@ -74,7 +96,29 @@ export default {
         }
         this.navs = navs;
       }
+    },
+    changeView () {
+      this.listMode = !this.listMode;
     }
   }
 };
 </script>
+<style lang="scss" scoped>
+.g2-breadcrumb {
+  border-bottom: 2px solid whitesmoke;
+  height: 100%;
+  padding: 0 0.75em;
+}
+.level-right {
+  .level-item {
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    &:hover {
+      border: 1px dotted transparent;
+      background: rgba(0, 0, 0, 0.12);
+      text-decoration: none;
+    }
+  }
+}
+</style>

src/views/common/Footer.vue

@@ -10,7 +10,9 @@
             >goindex-theme-acrou</a>
             <span class="tag is-light">
               MIT &nbsp;
-              <i class="fab fa-github"></i>
+              <span class="icon">
+                <i class="fab fa-github"></i>
+              </span>
             </span>
           </div>
         </div>
@@ -23,7 +25,7 @@
 export default {
   props: {},
   watch: {},
-  data: function() {
+  data: function () {
     return {
       content: ""
     };