修改接口

src/layout/components/AppMain2.vue

@@ -0,0 +1,130 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <router-view v-if="!$route.meta.link" :key="key" />
+      </keep-alive>
+    </transition>
+    <iframe-toggle />
+    <div class="time" id="time">{{ time }}</div>
+    <div class="date" id="date">{{ date }}</div>
+    <div class="logo"></div>
+  </section>
+</template>
+
+<script>
+import iframeToggle from "./IframeToggle/index"
+
+let getDateIntervalFun = null
+export default {
+  name: 'AppMain',
+  components: { iframeToggle },
+  data() {
+    return {
+      time: '',
+      date: ''
+    }
+  },
+  created() {
+    const getDate = () => {
+      let date = new Date()
+      let YYYY = date.getFullYear()
+      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
+      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
+      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
+      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
+      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
+      this.date = `${YYYY} - ${MM} - ${dd}`
+      this.time = `${HH} : ${mm} : ${ss}`
+    }
+    getDate()
+    getDateIntervalFun = setInterval(getDate, 1000)
+  },
+  computed: {
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews
+    },
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+.time, .date {
+  position: absolute;
+  font-size: 0.8vw;
+  color: #fcfcfc;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+
+.time {
+  top: 3.2%;
+  left: 85.8%;
+}
+
+.date {
+  top: 3.2%;
+  left: 94.1%;
+}
+.logo{
+  background-image: url("../../assets/board/logo.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 8vw;
+  height:3vw;
+  position: absolute;
+  top: 1%;
+  left: 1%;
+}
+
+.app-main {
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.fixed-header + .app-main {
+  padding-top: 50px;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header + .app-main {
+    padding-top: 84px;
+  }
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 6px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c0c0c0;
+  border-radius: 3px;
+}
+</style>

src/layout/components/Sidebar/Logo.vue

@@ -67,7 +67,8 @@ export default {
 
     & .sidebar-logo {
       width: 48px;
-      height: 48px;
+      height: 18px;
+      margin-top: 14px;
       vertical-align: middle;
       margin-right: 12px;
     }

src/layout/components/index.js

@@ -3,3 +3,4 @@ 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'
+export { default as AppMain2 } from './AppMain2'

src/layout/index2.vue

@@ -0,0 +1,111 @@
+<template>
+  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
+    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar/>
+        <tags-view v-if="needTagsView"/>
+      </div>
+      <app-main2/>
+      <right-panel>
+        <settings/>
+      </right-panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView,AppMain2 } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+import variables from '@/assets/styles/variables.scss'
+
+export default {
+  name: 'Layout',
+  components: {
+    AppMain,
+    AppMain2,
+    Navbar,
+    RightPanel,
+    Settings,
+    Sidebar,
+    TagsView
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      theme: state => state.settings.theme,
+      sideTheme: state => state.settings.sideTheme,
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    },
+    variables() {
+      return variables;
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/assets/styles/mixin.scss";
+  @import "~@/assets/styles/variables.scss";
+
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &.mobile.openSidebar {
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$base-sidebar-width});
+    transition: width 0.28s;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px);
+  }
+
+  .sidebarHide .fixed-header {
+    width: 100%;
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>

src/store/modules/permission.js

@@ -2,6 +2,7 @@ import auth from '@/plugins/auth'
 import router, { constantRoutes, dynamicRoutes } from '@/router'
 import { getRouters } from '@/api/menu'
 import Layout from '@/layout/index'
+import Layout2 from '@/layout/index2'
 import ParentView from '@/components/ParentView'
 import InnerLink from '@/layout/components/InnerLink'
 import BoardIndex from '@/layout/boardIndex'
@@ -73,7 +74,7 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
       }
     }
     if(route.name === 'Board'){
-      route.component = BoardIndex
+      route.component = Layout2
     }
     if(route.name === 'Model'){
       route.component = ModelIndex