fit windows

components/ErrorLog/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div v-if="errorLogs.length>0">
-    <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
+    <el-badge
+      :is-dot="true"
+      style="line-height: 25px;margin-top: -5px;"
+      @click.native="dialogTableVisible=true"
+    >
       <el-button style="padding: 8px 10px;" size="small" type="danger">
-        <svg-icon icon-class="bug" />
+        <!-- <svg-icon icon-class="bug" /> -->
       </el-button>
     </el-badge>
 
@@ -16,30 +20,22 @@
           <template slot-scope="{row}">
             <div>
               <span class="message-title">Msg:</span>
-              <el-tag type="danger">
-                {{ row.err.message }}
-              </el-tag>
+              <el-tag type="danger">{{ row.err.message }}</el-tag>
             </div>
-            <br>
+            <br />
             <div>
-              <span class="message-title" style="padding-right: 10px;">Info: </span>
-              <el-tag type="warning">
-                {{ row.vm.$vnode.tag }} error in {{ row.info }}
-              </el-tag>
+              <span class="message-title" style="padding-right: 10px;">Info:</span>
+              <el-tag type="warning">{{ row.vm.$vnode.tag }} error in {{ row.info }}</el-tag>
             </div>
-            <br>
+            <br />
             <div>
-              <span class="message-title" style="padding-right: 16px;">Url: </span>
-              <el-tag type="success">
-                {{ row.url }}
-              </el-tag>
+              <span class="message-title" style="padding-right: 16px;">Url:</span>
+              <el-tag type="success">{{ row.url }}</el-tag>
             </div>
           </template>
         </el-table-column>
         <el-table-column label="Stack">
-          <template slot-scope="scope">
-            {{ scope.row.err.stack }}
-          </template>
+          <template slot-scope="scope">{{ scope.row.err.stack }}</template>
         </el-table-column>
       </el-table>
     </el-dialog>
@@ -48,24 +44,24 @@
 
 <script>
 export default {
-  name: 'ErrorLog',
+  name: "ErrorLog",
   data() {
     return {
       dialogTableVisible: false
-    }
+    };
   },
   computed: {
     errorLogs() {
-      return this.$store.getters.errorLogs
+      return this.$store.getters.errorLogs;
     }
   },
   methods: {
     clearAll() {
-      this.dialogTableVisible = false
-      this.$store.dispatch('errorLog/clearErrorLog')
+      this.dialogTableVisible = false;
+      this.$store.dispatch("errorLog/clearErrorLog");
     }
   }
-}
+};
 </script>
 
 <style scoped>

components/HeaderSearch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <!-- <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> -->
     <el-select
       ref="headerSearchSelect"
       v-model="search"
@@ -12,7 +12,12 @@
       class="header-search-select"
       @change="change"
     >
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
+      <el-option
+        v-for="item in options"
+        :key="item.path"
+        :value="item"
+        :label="item.title.join(' > ')"
+      />
     </el-select>
   </div>
 </template>
@@ -20,62 +25,62 @@
 <script>
 // fuse is a lightweight fuzzy-search module
 // make search results more in line with expectations
-import Fuse from 'fuse.js'
-import path from 'path'
+import Fuse from "fuse.js";
+import path from "path";
 
 export default {
-  name: 'HeaderSearch',
+  name: "HeaderSearch",
   data() {
     return {
-      search: '',
+      search: "",
       options: [],
       searchPool: [],
       show: false,
       fuse: undefined
-    }
+    };
   },
   computed: {
     routes() {
-      return this.$store.getters.permission_routes
+      return this.$store.getters.permission_routes;
     }
   },
   watch: {
     routes() {
-      this.searchPool = this.generateRoutes(this.routes)
+      this.searchPool = this.generateRoutes(this.routes);
     },
     searchPool(list) {
-      this.initFuse(list)
+      this.initFuse(list);
     },
     show(value) {
       if (value) {
-        document.body.addEventListener('click', this.close)
+        document.body.addEventListener("click", this.close);
       } else {
-        document.body.removeEventListener('click', this.close)
+        document.body.removeEventListener("click", this.close);
       }
     }
   },
   mounted() {
-    this.searchPool = this.generateRoutes(this.routes)
+    this.searchPool = this.generateRoutes(this.routes);
   },
   methods: {
     click() {
-      this.show = !this.show
+      this.show = !this.show;
       if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus();
       }
     },
     close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur();
+      this.options = [];
+      this.show = false;
     },
     change(val) {
-      this.$router.push(val.path)
-      this.search = ''
-      this.options = []
+      this.$router.push(val.path);
+      this.search = "";
+      this.options = [];
       this.$nextTick(() => {
-        this.show = false
-      })
+        this.show = false;
+      });
     },
     initFuse(list) {
       this.fuse = new Fuse(list, {
@@ -85,58 +90,67 @@ export default {
         distance: 100,
         maxPatternLength: 32,
         minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
+        keys: [
+          {
+            name: "title",
+            weight: 0.7
+          },
+          {
+            name: "path",
+            weight: 0.3
+          }
+        ]
+      });
     },
     // Filter out the routes that can be displayed in the sidebar
     // And generate the internationalized title
-    generateRoutes(routes, basePath = '/', prefixTitle = []) {
-      let res = []
+    generateRoutes(routes, basePath = "/", prefixTitle = []) {
+      let res = [];
 
       for (const router of routes) {
         // skip hidden router
-        if (router.hidden) { continue }
+        if (router.hidden) {
+          continue;
+        }
 
         const data = {
           path: path.resolve(basePath, router.path),
           title: [...prefixTitle]
-        }
+        };
 
         if (router.meta && router.meta.title) {
-          data.title = [...data.title, router.meta.title]
+          data.title = [...data.title, router.meta.title];
 
-          if (router.redirect !== 'noRedirect') {
+          if (router.redirect !== "noRedirect") {
             // only push the routes with title
             // special case: need to exclude parent router without redirect
-            res.push(data)
+            res.push(data);
           }
         }
 
         // recursive child routes
         if (router.children) {
-          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          const tempRoutes = this.generateRoutes(
+            router.children,
+            data.path,
+            data.title
+          );
           if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes]
+            res = [...res, ...tempRoutes];
           }
         }
       }
-      return res
+      return res;
     },
     querySearch(query) {
-      if (query !== '') {
-        this.options = this.fuse.search(query)
+      if (query !== "") {
+        this.options = this.fuse.search(query);
       } else {
-        this.options = []
+        this.options = [];
       }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

components/Screenfull/index.vue

@@ -1,58 +1,58 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+    <!-- <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> -->
   </div>
 </template>
 
 <script>
-import screenfull from 'screenfull'
+import screenfull from "screenfull";
 
 export default {
-  name: 'Screenfull',
+  name: "Screenfull",
   data() {
     return {
       isFullscreen: false
-    }
+    };
   },
   mounted() {
-    this.init()
+    this.init();
   },
   beforeDestroy() {
-    this.destroy()
+    this.destroy();
   },
   methods: {
     click() {
       if (!screenfull.enabled) {
         this.$message({
-          message: 'you browser can not work',
-          type: 'warning'
-        })
-        return false
+          message: "you browser can not work",
+          type: "warning"
+        });
+        return false;
       }
-      screenfull.toggle()
+      screenfull.toggle();
     },
     change() {
-      this.isFullscreen = screenfull.isFullscreen
+      this.isFullscreen = screenfull.isFullscreen;
     },
     init() {
       if (screenfull.enabled) {
-        screenfull.on('change', this.change)
+        screenfull.on("change", this.change);
       }
     },
     destroy() {
       if (screenfull.enabled) {
-        screenfull.off('change', this.change)
+        screenfull.off("change", this.change);
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>
 .screenfull-svg {
   display: inline-block;
   cursor: pointer;
-  fill: #5a5e66;;
+  fill: #5a5e66;
   width: 20px;
   height: 20px;
   vertical-align: 10px;

components/SizeSelect/index.vue

@@ -1,12 +1,17 @@
 <template>
   <el-dropdown trigger="click" @command="handleSetSize">
     <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
+      <!-- <svg-icon class-name="size-icon" icon-class="size" /> -->
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
+      <el-dropdown-item
+        v-for="item of sizeOptions"
+        :key="item.value"
+        :disabled="size===item.value"
+        :command="item.value"
+      >
         {{
-          item.label }}
+        item.label }}
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -17,41 +22,40 @@ export default {
   data() {
     return {
       sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
+        { label: "Default", value: "default" },
+        { label: "Medium", value: "medium" },
+        { label: "Small", value: "small" },
+        { label: "Mini", value: "mini" }
       ]
-    }
+    };
   },
   computed: {
     size() {
-      return this.$store.getters.size
+      return this.$store.getters.size;
     }
   },
   methods: {
     handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
+      this.$ELEMENT.size = size;
+      this.$store.dispatch("app/setSize", size);
+      this.refreshView();
       this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
+        message: "Switch Size Success",
+        type: "success"
+      });
     },
     refreshView() {
       // In order to make the cached page re-rendered
-      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
+      this.$store.dispatch("tagsView/delAllCachedViews", this.$route);
 
-      const { fullPath } = this.$route
+      const { fullPath } = this.$route;
 
       this.$nextTick(() => {
         this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
+          path: "/redirect" + fullPath
+        });
+      });
     }
   }
-
-}
+};
 </script>

layouts/components/index.js

@@ -1,5 +1,16 @@
-export { default as AppMain } from './AppMain'
-export { default as Navbar } from './Navbar'
-export { default as Settings } from './Settings'
-export { default as Sidebar } from './Sidebar/index.vue'
-export { default as TagsView } from './TagsView/index.vue'
+import AppMain from "./AppMain.vue"
+import Navbar from "./Navbar.vue"
+import Settings from "./Settings/index.vue"
+import Sidebar from "./Sidebar/index.vue"
+import TagsView from "./TagsView/index.vue"
+
+export default {
+
+}
+export {
+  AppMain,
+  Navbar,
+  Settings,
+  Sidebar,
+  TagsView
+}

layouts/default.vue

@@ -1,13 +1,13 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container" />
+    <Sidebar class="sidebar-container" />
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
+        <Navbar />
         <!-- <tags-view v-if="needTagsView" /> -->
       </div>
-      <app-main />
+      <AppMain />
       <!-- <nuxt /> -->
     </div>
   </div>
@@ -15,8 +15,13 @@
 
 <script>
 import RightPanel from "@/components/RightPanel";
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
-import ResizeMixin from "./mixin/ResizeHandler";
+import {
+  AppMain,
+  Navbar,
+  Settings,
+  Sidebar,
+  TagsView
+} from "./components/index";
 import { mapState } from "vuex";
 
 // import "../styles/index.scss"; // global css
@@ -30,7 +35,7 @@ export default {
     Sidebar,
     TagsView
   },
-  mixins: [ResizeMixin],
+  mixins: [],
   computed: {
     ...mapState({
       sidebar: state => state.app.sidebar,