前后端全面升级

cmdb-ui/src/layouts/BasicLayout.vue

@@ -23,12 +23,15 @@
       v-else-if="isSideMenu()"
       mode="inline"
       :menus="sideBarMenu"
-      :theme="navTheme"
+      theme="light"
       :collapsed="collapsed"
       :collapsible="true"
     ></side-menu>
 
-    <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
+    <a-layout
+      :class="[layoutMode, `content-width-${contentWidth}`]"
+      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }"
+    >
       <!-- layout header -->
       <global-header
         :mode="layoutMode"
@@ -40,30 +43,21 @@
       />
 
       <!-- layout content -->
-      <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
+      <a-layout-content :style="{ height: '100%', paddingBottom: '24px', paddingTop: fixedHeader ? '64px' : '0' }">
         <multi-tab v-if="multiTab"></multi-tab>
         <transition name="page-transition">
-          <route-view/>
+          <router-view v-if="alive" />
         </transition>
       </a-layout-content>
-
-      <!-- layout footer -->
-      <!-- <a-layout-footer>
-        <global-footer />
-      </a-layout-footer> -->
-
-      <!-- Setting Drawer (show in development mode) -->
-      <!--      <setting-drawer v-if="!production"></setting-drawer>-->
     </a-layout>
   </a-layout>
-
 </template>
 
 <script>
 import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin'
-import config from '@/config/defaultSettings'
+import config from '@/config/setting'
 
 import RouteView from './RouteView'
 import MultiTab from '@/components/MultiTab'
@@ -81,47 +75,53 @@ export default {
     SideMenu,
     GlobalHeader,
     GlobalFooter,
-    SettingDrawer
+    SettingDrawer,
   },
-  data () {
+  data() {
     return {
       production: config.production,
-      collapsed: false
+      collapsed: false,
+      alive: true,
     }
   },
   computed: {
     ...mapState({
       // 动态主路由
-      mainMenu: state => state.permission.addRouters
+      mainMenu: state => state.routes.appRoutes,
     }),
-    contentPaddingLeft () {
+    contentPaddingLeft() {
       if (!this.fixSidebar || this.isMobile()) {
         return '0'
       }
       if (this.sidebarOpened) {
-        return '256px'
+        return '200px'
       }
       return '80px'
     },
-    sideBarMenu () {
+    sideBarMenu() {
       const sideMenus = this.mainMenu.filter(item => this.$route.path.startsWith(item.path))
       if (sideMenus.length > 1) {
         return sideMenus.find(item => item.path !== '/').children
       } else {
         return sideMenus[0].children
       }
+    },
+  },
+  provide() {
+    return {
+      reloadBoard: this.reload,
     }
   },
   watch: {
-    sidebarOpened (val) {
+    sidebarOpened(val) {
       this.collapsed = !val
-    }
+    },
   },
-  created () {
+  created() {
     this.setMenuData()
     this.collapsed = !this.sidebarOpened
   },
-  mounted () {
+  mounted() {
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
       this.$nextTick(() => {
@@ -134,37 +134,41 @@ export default {
   },
   methods: {
     ...mapActions(['setSidebar']),
-    toggle () {
+    toggle() {
       this.collapsed = !this.collapsed
       this.setSidebar(!this.collapsed)
       triggerWindowResizeEvent()
     },
-    setMenuData () {
-
+    setMenuData() {},
+    reload() {
+      this.alive = false
+      this.$nextTick(() => {
+        this.alive = true
+      })
     },
-    paddingCalc () {
+    paddingCalc() {
       let left = ''
       if (this.sidebarOpened) {
-        left = this.isDesktop() ? '256px' : '80px'
+        left = this.isDesktop() ? '200px' : '80px'
       } else {
-        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
+        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
       }
       return left
     },
-    menuSelect () {
+    menuSelect() {
       if (!this.isDesktop()) {
         this.collapsed = false
       }
     },
-    drawerClose () {
+    drawerClose() {
       this.collapsed = false
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="less">
-@import url('../components/global.less');
+@import url('../style/global.less');
 
 /*
  * The following styles are auto-applied to elements with

cmdb-ui/src/layouts/PageView.vue

@@ -1,7 +1,13 @@
 <template>
   <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
     <!-- pageHeader , route meta :true on hide -->
-    <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
+    <page-header
+      v-if="!$route.meta.hiddenHeaderContent"
+      :isShowBreadcrumb="isShowBreadcrumb"
+      :title="pageTitle"
+      :logo="logo"
+      :avatar="avatar"
+    >
       <slot slot="action" name="action"></slot>
       <slot slot="content" name="headerContent"></slot>
       <div slot="content" v-if="!this.$slots.headerContent && description">
@@ -15,9 +21,9 @@
           </template>
         </div>
       </div>
-      <slot slot="extra" name="extra">
+      <slot slot="extra" name="extra" v-if="extra">
         <div class="extra-img">
-          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
+          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage" />
         </div>
       </slot>
       <div slot="pageMenu">
@@ -31,7 +37,7 @@
         </div>
         <div class="page-menu-tabs" v-if="tabs && tabs.items">
           <!-- @change="callback" :activeKey="activeKey" -->
-          <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
+          <a-tabs :tabBarStyle="{ margin: 0 }" :activeKey="tabs.active()" @change="tabs.callback">
             <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
           </a-tabs>
         </div>
@@ -58,52 +64,60 @@ import PageHeader from '@/components/PageHeader'
 export default {
   name: 'PageView',
   components: {
-    PageHeader
+    PageHeader,
   },
   props: {
     avatar: {
       type: String,
-      default: null
+      default: null,
     },
     title: {
       type: [String, Boolean],
-      default: true
+      default: true,
     },
     logo: {
       type: String,
-      default: null
+      default: null,
     },
     directTabs: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
+    extra: {
+      type: Boolean,
+      default: true,
+    },
+    isShowBreadcrumb: {
+      type: Boolean,
+      default: true,
+    },
   },
-  data () {
+  data() {
     return {
       pageTitle: null,
       description: null,
       linkList: [],
       extraImage: '',
       search: false,
-      tabs: {}
+      tabs: {},
     }
   },
   computed: {
     ...mapState({
-      multiTab: state => state.app.multiTab
-    })
+      multiTab: state => state.app.multiTab,
+    }),
   },
-  mounted () {
+  mounted() {
     this.tabs = this.directTabs
     this.getPageMeta()
   },
-  updated () {
+  updated() {
     this.getPageMeta()
   },
   methods: {
-    getPageMeta () {
+    getPageMeta() {
       // eslint-disable-next-line
-      this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
+      this.pageTitle = typeof this.title === 'string' || !this.title ? this.title : this.$route.meta.title
 
       const content = this.$refs.content
       if (content) {
@@ -117,65 +131,65 @@ export default {
           this.tabs = content.tabs
         }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-  .content {
-    margin: 24px 24px 0;
-    .link {
-      margin-top: 16px;
-      &:not(:empty) {
-        margin-bottom: 16px;
+.content {
+  margin: 24px 24px 0;
+  .link {
+    margin-top: 16px;
+    &:not(:empty) {
+      margin-bottom: 16px;
+    }
+    a {
+      margin-right: 32px;
+      height: 24px;
+      line-height: 24px;
+      display: inline-block;
+      i {
+        font-size: 24px;
+        margin-right: 8px;
+        vertical-align: middle;
       }
-      a {
-        margin-right: 32px;
+      span {
         height: 24px;
         line-height: 24px;
         display: inline-block;
-        i {
-          font-size: 24px;
-          margin-right: 8px;
-          vertical-align: middle;
-        }
-        span {
-          height: 24px;
-          line-height: 24px;
-          display: inline-block;
-          vertical-align: middle;
-        }
+        vertical-align: middle;
       }
     }
   }
-  .page-menu-search {
-    text-align: center;
-    margin-bottom: 16px;
-  }
-  .page-menu-tabs {
-    margin-top: 48px;
-  }
+}
+.page-menu-search {
+  text-align: center;
+  margin-bottom: 16px;
+}
+.page-menu-tabs {
+  margin-top: 48px;
+}
 
+.extra-img {
+  margin-top: -60px;
+  text-align: center;
+  width: 195px;
+
+  img {
+    width: 100%;
+  }
+}
+
+.mobile {
   .extra-img {
-    margin-top: -60px;
+    margin-top: 0;
     text-align: center;
-    width: 195px;
+    width: 96px;
 
     img {
       width: 100%;
     }
   }
-
-  .mobile {
-    .extra-img{
-      margin-top: 0;
-      text-align: center;
-      width: 96px;
-
-      img{
-        width: 100%;
-      }
-    }
-  }
+}
 </style>

cmdb-ui/src/layouts/RouteView.vue

@@ -23,7 +23,7 @@ export default {
     // 这里增加了 multiTab 的判断，当开启了 multiTab 时
     // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
     // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
-    if (!getters.multiTab && !!meta.keepAlive) {
+    if (!getters.multiTab && !meta.keepAlive) {
       return notKeep
     }
     return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep

cmdb-ui/src/layouts/UserLayout.vue

@@ -4,11 +4,12 @@
       <div class="top">
         <div class="header">
           <a href="/">
-            <span class="title">CMDB</span>
+            <img src="~@/assets/logo.png" class="logo" alt="logo">
+            <span class="title">OneOps</span>
           </a>
         </div>
         <div class="desc">
-          {{ $t('login.subTitle') }}
+          自动化统一运维平台
         </div>
       </div>