⚡ 底层架构优化

src/components/basic-container/main.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="basic-container">
+  <div class="basic-container"
+       :class="{'basic-container--block':block}">
     <el-card>
       <slot></slot>
     </el-card>
@@ -7,9 +8,15 @@
 </template>
 
 <script>
-export default {
+  export default {
-  name: "basicContainer"
+    name: "basicContainer",
-};
+    props: {
+      block: {
+        type: Boolean,
+        default: false
+      }
+    }
+  };
 </script>
 
 <style lang="scss">
@@ -17,6 +24,12 @@ export default {
   padding: 10px 6px;
   border-radius: 10px;
   box-sizing: border-box;
+  &--block {
+    height: 100%;
+    .el-card {
+      height: 100%;
+    }
+  }
   .el-card {
     width: 100%;
   }

src/components/iframe/main.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import {mapGetters} from "vuex";
-import NProgress from "nprogress"; // progress bar
+  import NProgress from "nprogress"; // progress bar
-import "nprogress/nprogress.css"; // progress bar style
+  import "nprogress/nprogress.css"; // progress bar style
-export default {
+  export default {
     name: "AvueIframe",
     data() {
       return {
@@ -18,7 +18,7 @@ export default {
       };
     },
     created() {
-    NProgress.configure({ showSpinner: false });
+      NProgress.configure({showSpinner: false});
     },
     mounted() {
       this.load();
@@ -26,10 +26,10 @@ export default {
     },
     props: ["routerPath"],
     watch: {
-    $route: function() {
+      $route: function () {
         this.load();
       },
-    routerPath: function() {
+      routerPath: function () {
         // 监听routerPath变化，改变src路径
         this.urlPath = this.getUrlPath();
       }
@@ -108,22 +108,22 @@ export default {
           };
         }
       },
-    getUrlPath: function() {
+      getUrlPath: function () {
         //获取 iframe src 路径
         let url = window.location.href;
         url = url.replace("/myiframe", "");
         return url;
       }
     }
-};
+  };
 </script>
 
 <style lang="scss">
-.iframe {
+  .iframe {
     width: 100%;
     height: 100%;
     border: 0;
     overflow: hidden;
     box-sizing: border-box;
-}
+  }
 </style>

src/lang/en.js

@@ -96,6 +96,7 @@ export default {
     color: 'color'
   },
   tagsView: {
+    search: 'Search',
     menu: 'menu',
     closeOthers: 'Close Others',
     closeAll: 'Close All'

src/lang/zh.js

@@ -95,6 +95,7 @@ export default {
     color: '换色'
   },
   tagsView: {
+    search: '搜索',
     menu: '更多',
     closeOthers: '关闭其它',
     closeAll: '关闭所有'

src/page/index/sidebar/index.vue

@@ -3,7 +3,8 @@
     <logo></logo>
     <el-scrollbar style="height:100%">
       <div v-if="validatenull(menu)"
-           class="avue-sidebar--tip">{{$t('menuTip')}}</div>
+           class="avue-sidebar--tip">{{$t('menuTip')}}
+      </div>
       <el-menu unique-opened
                :default-active="nowTagValue"
                mode="vertical"
@@ -20,12 +21,13 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import {mapGetters} from "vuex";
-import logo from "../logo";
+  import logo from "../logo";
-import sidebarItem from "./sidebarItem";
+  import sidebarItem from "./sidebarItem";
-export default {
+
+  export default {
     name: "sidebar",
-  components: { sidebarItem, logo },
+    components: {sidebarItem, logo},
     data() {
       return {};
     },
@@ -37,13 +39,14 @@ export default {
     },
     computed: {
       ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen"]),
-    nowTagValue: function() {
+      nowTagValue: function () {
         return this.$router.$avueRouter.getValue(this.$route);
       }
     },
-  mounted() {},
+    mounted() {
+    },
     methods: {}
-};
+  };
 </script>
 <style lang="scss" scoped>
 </style>

src/page/index/sidebar/sidebarItem.vue

@@ -39,10 +39,11 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
+  import {mapGetters} from "vuex";
-import { validatenull } from "@/util/validate";
+  import {validatenull} from "@/util/validate";
-import config from "./config.js";
+  import config from "./config.js";
-export default {
+
+  export default {
     name: "sidebarItem",
     data() {
       return {
@@ -70,8 +71,10 @@ export default {
         type: Boolean
       }
     },
-  created() {},
+    created() {
-  mounted() {},
+    },
+    mounted() {
+    },
     computed: {
       ...mapGetters(["roles"]),
       labelKey() {
@@ -110,20 +113,19 @@ export default {
       validatenull(val) {
         return validatenull(val);
       },
-    open(item) {
+      open (item) {
         if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
         this.$router.$avueRouter.group = item.group;
         this.$router.$avueRouter.meta = item.meta;
         this.$router.push({
           path: this.$router.$avueRouter.getPath({
             name: item[this.labelKey],
-          src: item[this.pathKey],
+            src: item[this.pathKey]
-          i18n: (item.meta || {}).i18n
+          }, item.meta),
-        }),
           query: item.query
         });
       }
     }
-};
+  };
 </script>
 

src/page/index/tags.vue

@@ -133,9 +133,8 @@
         this.$router.push({
           path: this.$router.$avueRouter.getPath({
             name: tag.label,
-            src: tag.value,
+            src: tag.value
-            i18n: tag.meta.i18n
+          }, tag.meta),
-          }),
           query: tag.query
         });
       },

src/page/index/top/top-lang.vue

@@ -4,22 +4,27 @@
     <i class="icon-zhongyingwen"></i>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item :disabled="language==='zh'"
-                        command="zh">中文</el-dropdown-item>
+                        command="zh">中文
+      </el-dropdown-item>
       <el-dropdown-item :disabled="language==='en'"
-                        command="en">English</el-dropdown-item>
+                        command="en">English
+      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import {mapGetters} from "vuex";
-export default {
+
+  export default {
     name: "top-lang",
     data() {
       return {};
     },
-  created() {},
+    created() {
-  mounted() {},
+    },
+    mounted() {
+    },
     computed: {
       ...mapGetters(["language", "tag"])
     },
@@ -37,7 +42,7 @@ export default {
         this.$router.$avueRouter.setTitle(title);
       }
     }
-};
+  };
 </script>
 
 <style lang="scss" scoped>

src/page/index/top/top-menu.vue

@@ -26,8 +26,9 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import {mapGetters} from "vuex";
-export default {
+
+  export default {
     name: "top-menu",
     data() {
       return {
@@ -76,12 +77,11 @@ export default {
           this.$router.push({
             path: this.$router.$avueRouter.getPath({
               name: itemActive.label,
-            src: itemActive.path,
+              src: itemActive.path
-            i18n: itemActive.meta.i18n
+            }, itemActive.meta)
-          })
           });
         });
       }
     }
-};
+  };
 </script>

src/page/index/top/top-search.vue

@@ -88,9 +88,8 @@
         this.$router.push({
           path: this.$router.$avueRouter.getPath({
             name: item[this.labelKey],
-            src: item[this.pathKey],
+            src: item[this.pathKey]
-            i18n: (item.meta || {}).i18n
+          }, item.meta),
-          }),
           query: item.query
         });
       }

src/permission.js

@@ -12,6 +12,8 @@ NProgress.configure({showSpinner: false});
 const lockPage = store.getters.website.lockPage; //锁屏页
 router.beforeEach((to, from, next) => {
   const meta = to.meta || {};
+  const isMenu = meta.menu === undefined ? to.query.menu : meta.menu;
+  store.commit('SET_IS_MENU', isMenu === undefined);
   if (getToken()) {
     if (store.getters.isLock && to.path != lockPage) { //如果系统激活锁屏，全部跳转到锁屏页
       next({path: lockPage})

src/router/avue-router.js

@@ -9,6 +9,7 @@ RouterPlugin.install = function (vue, router, store, i18n) {
   this.$vue = new vue({i18n});
 
   function isURL(s) {
+    if (s.includes('html')) return true;
     return /^http[s]?:\/\/.*/.test(s)
   }
 
@@ -55,7 +56,7 @@ RouterPlugin.install = function (vue, router, store, i18n) {
     getPath: function (params) {
       let {src} = params;
       let result = src || '/';
-      if (src.includes("http") || src.includes("https")) {
+      if (isURL(src)) {
         result = `/myiframe/urlPath?${objToform(params)}`;
       }
       return result;

src/store/getters.js

@@ -11,6 +11,7 @@ const getters = {
   screen: state => state.common.screen,
   isLock: state => state.common.isLock,
   isFullScren: state => state.common.isFullScren,
+  isMenu: state => state.common.isMenu,
   lockPasswd: state => state.common.lockPasswd,
   tagList: state => state.tags.tagList,
   tagWel: state => state.tags.tagWel,

src/store/modules/common.js

@@ -11,6 +11,7 @@ const common = {
     language: getStore({name: 'language'}) || 'zh',
     isCollapse: false,
     isFullScren: false,
+    isMenu: true,
     isShade: false,
     screen: -1,
     isLock: getStore({name: 'isLock'}) || false,
@@ -45,6 +46,9 @@ const common = {
     SET_FULLSCREN: (state) => {
       state.isFullScren = !state.isFullScren;
     },
+    SET_IS_MENU: (state, menu) => {
+      state.isMenu = menu;
+    },
     SET_LOCK: (state) => {
       state.isLock = true;
       setStore({

src/styles/media.scss

@@ -58,6 +58,7 @@
   height: calc(100% - 64px);
   box-sizing: border-box;
   overflow: hidden;
+  transition: all 0.5s;
   background: #f0f2f5;
   z-index: 1026;
 
@@ -68,7 +69,7 @@
 }
 
 .avue-view {
-  padding: 10px !important;
+  padding: 0 10px !important;
   width: 100%;
   box-sizing: border-box;
 }

vue.config.js

@@ -26,9 +26,9 @@ module.exports = {
     proxy: {
       '/api': {
         //本地服务接口地址
-        //target: 'http://localhost',
+        target: 'http://localhost',
         //远程演示服务地址
-        target: 'https://saber.bladex.vip/api',
+        //target: 'https://saber.bladex.vip/api',
         ws: true,
         pathRewrite: {
           '^/api': '/'