feat: support route cache

src/components/Wrapper/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <section
+    class="l-flex--col c-page"
+    :class="{ margin }"
+  >
+    <div
+      class="c-page__content"
+      :class="{
+        fill, padding, background,
+        'l-flex': !vertical,
+        'l-flex--col': vertical
+      }"
+    >
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    fill: {
+      type: [Boolean, String],
+      default: false
+    },
+    background: {
+      type: [Boolean, String],
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: true
+    },
+    margin: {
+      type: [Boolean, String],
+      default: false
+    },
+    padding: {
+      type: [Boolean, String],
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-page {
+  overflow: auto;
+
+  &.margin {
+    padding: $spacing;
+  }
+
+  .c-page__content {
+    flex: none;
+    min-width: 800px;
+    min-height: 0;
+
+    &.fill {
+      flex: 1 0 0;
+    }
+
+    &.padding {
+      padding: $spacing;
+    }
+
+    &.background {
+      border-radius: $radius;
+      background-color: #fff;
+    }
+  }
+}
+</style>

src/layout/components/AppMain.vue

@@ -1,12 +1,12 @@
 <template>
-  <section class="l-flex--col has-padding c-page">
-    <transition name="fade-transform" mode="out-in">
-      <router-view
-        :key="key"
-        class="c-page__content"
-      />
-    </transition>
-  </section>
+  <transition
+    name="fade-transform"
+    mode="out-in"
+  >
+    <keep-alive :include="cacheRoutes">
+      <router-view :key="key" />
+    </keep-alive>
+  </transition>
 </template>
 
 <script>
@@ -15,6 +15,9 @@ export default {
   computed: {
     key () {
       return this.$route.path
+    },
+    cacheRoutes () {
+      return this.$store.state.cacheRoutes
     }
   }
 }
@@ -23,7 +26,7 @@ export default {
 <style lang="scss" scoped>
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .fade-transform-enter {
@@ -34,16 +37,4 @@ export default {
 .fade-transform-leave-to {
   opacity: 0;
 }
-
-.c-page {
-  overflow: auto;
-
-  &__content {
-    flex: 1;
-    min-height: 0;
-    min-width: 800px;
-    border-radius: 8px;
-    background-color: #fff;
-  }
-}
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="c-sidebar"
-  >
+  <div class="c-sidebar">
     <div class="c-sidebar__header">
       <router-link
         class="c-sidebar__logo"
@@ -61,6 +59,8 @@ export default {
   flex-direction: column;
   width: 240px;
   background-color: #fff;
+  box-shadow: 1px 0 4px rgb(0 21 41 / 8%);
+  z-index: 9;
 
   &__header {
     flex: none;
@@ -73,7 +73,7 @@ export default {
     display: inline-block;
     width: 142px;
     height: 36px;
-    background: url('~@/assets/logo.png') 0 0 / 100% 100% no-repeat;
+    background: url("~@/assets/logo.png") 0 0 / 100% 100% no-repeat;
   }
 
   &__menu {

src/layout/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="l-flex c-app">
     <sidebar class="l-flex__none" />
-    <div class="l-flex__auto l-flex--col">
+    <div class="l-flex__auto l-flex--col c-app__content">
       <navbar class="l-flex__none" />
-      <app-main class="c-app__main" />
+      <app-main class="l-flex__fill" />
     </div>
   </div>
 </template>
@@ -29,9 +29,9 @@ export default {
   height: 100%;
   width: 100%;
 
-  &__main {
-    flex: 1;
-    min-height: 0;
+  &__content {
+    position: relative;
+    overflow: hidden;
   }
 }
 </style>

src/main.js

@@ -13,6 +13,7 @@ import router from './router'
 import './icons'
 import './permission'
 
+import Wrapper from './components/Wrapper'
 import Permission from './components/Permission'
 import StatusWrapper from './components/StatusWrapper'
 import Pagination from './components/Pagination'
@@ -28,6 +29,7 @@ import {
 async function startApp () {
   Vue.use(Element)
 
+  Vue.component('Wrapper', Wrapper)
   Vue.component('Permission', Permission)
   Vue.component('StatusWrapper', StatusWrapper)
   Vue.component('Pagination', Pagination)

src/router/index.js

@@ -177,6 +177,13 @@ export const asyncRoutes = [
         component: () => import('@/views/device/index'),
         meta: { title: '设备管理' }
       },
+      {
+        name: 'device-detail',
+        path: 'device/:id',
+        component: () => import('@/views/device/detail/index'),
+        meta: { title: '设备详情', activeMenu: '/m/device' },
+        hidden: true
+      },
       {
         name: 'group',
         path: 'group',
@@ -193,7 +200,7 @@ export const asyncRoutes = [
       {
         path: '',
         name: 'logger',
-        component: () => import ('@/views/logger/index'),
+        component: () => import('@/views/logger/index'),
         meta: { title: '操作日志', icon: 'el-icon-edit-outline' }
       }
     ]
@@ -206,7 +213,7 @@ export const asyncRoutes = [
       {
         path: '',
         name: 'debug',
-        component: () => import ('@/views/debug/index'),
+        component: () => import('@/views/debug/index'),
         meta: { title: '调试', icon: 'bug' }
       }
     ]
@@ -219,13 +226,13 @@ export const asyncRoutes = [
       {
         path: 'apk',
         name: 'upgrade-apk',
-        component: () => import ('@/views/upgrade/index'),
+        component: () => import('@/views/upgrade/index'),
         meta: { title: '版本管理' }
       },
       {
         path: 'deploy',
         name: 'upgrade-deploy',
-        component: () => import ('@/views/upgrade/deploy/index'),
+        component: () => import('@/views/upgrade/deploy/index'),
         meta: { title: '发布升级' }
       }
     ]

src/scss/bem/_component.scss

@@ -43,7 +43,7 @@
     flex-direction: column;
     min-height: 0;
     padding: $spacing;
-    border-radius: 8px;
+    border-radius: $radius;
     overflow: auto;
   }
 

src/scss/bem/_utility.scss

@@ -17,6 +17,11 @@
   text-overflow: ellipsis;
 }
 
+.u-overflow-y--auto {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .u-color--primary {
   color: $primary;
 }

src/scss/helpers/_variables.scss

@@ -19,3 +19,4 @@ $error: #f56c6c;
 $error--dark: #e51414;
 
 $spacing: 16px;
+$radius: 8px;

src/store/index.js

@@ -19,7 +19,27 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 
 const store = new Vuex.Store({
   modules,
-  getters
+  getters,
+  state: {
+    cacheRoutes: []
+  },
+  mutations: {
+    UPDATE_CACHE_ROUTES (state, payload) {
+      state.cacheRoutes = payload
+    }
+  },
+  actions: {
+    addCacheRoutes ({ state, commit }, payload) {
+      const routes = new Set(state.cacheRoutes)
+      routes.add(payload)
+      commit('UPDATE_CACHE_ROUTES', [...routes])
+    },
+    delCacheRoutes ({ state, commit }, payload) {
+      const routes = new Set(state.cacheRoutes)
+      routes.delete(payload)
+      commit('UPDATE_CACHE_ROUTES', [...routes])
+    }
+  }
 })
 
 export default store

src/views/bigscreen/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <div
+  <wrapper
     v-loading="loading"
-    class="l-flex--col has-padding"
+    margin
+    padding
+    background
   >
     <div class="l-flex__none l-flex--row has-bottom-padding">
       <div class="l-flex__auto l-flex--row c-sibling-item">
@@ -162,7 +164,7 @@
         </button>
       </template>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>
@@ -407,7 +409,7 @@ export default {
   padding-top: 60%;
   color: #fff;
   font-size: 16px;
-  border-radius: 8px;
+  border-radius: $radius;
   background: rgba(0, 0, 0, 0.8) url("~@/assets/program_bg.png") center center /
     100% 100% no-repeat;
   overflow: hidden;

src/views/dashboard/components/Card.vue

@@ -82,7 +82,7 @@ export default {
   color: $black;
   font-size: 16px;
   font-weight: bold;
-  border-radius: 8px;
+  border-radius: $radius;
   background-color: #fff;
 
   &__title {

src/views/dashboard/components/Device.vue

@@ -405,7 +405,7 @@ export default {
   // height: 220px;
   color: $black;
   line-height: 1;
-  border-radius: 8px;
+  border-radius: $radius;
   background-color: #fff;
   background-size: contain;
 

src/views/dashboard/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="c-dashboard">
+  <wrapper
+    class="c-dashboard"
+    margin
+  >
     <div class="l-flex--row c-dashboard__block c-count">
       <div class="l-flex__none l-flex--row">
         设备分类：
@@ -105,7 +108,7 @@
     >
       <i class="el-icon-loading" />
     </div>
-  </div>
+  </wrapper>
 </template>
 
 <script>
@@ -275,9 +278,6 @@ export default {
 
 <style lang="scss" scoped>
 .c-dashboard {
-  flex: none;
-  background-color: transparent;
-
   &__block + &__block {
     margin-top: $spacing;
   }
@@ -287,7 +287,7 @@ export default {
   justify-content: space-between;
   padding: 8px 16px;
   font-weight: bold;
-  border-radius: 8px;
+  border-radius: $radius;
   background-color: #fff;
 
   &__item > div:first-child {

src/views/debug/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="l-flex--col c-debug has-padding">
+  <wrapper
+    class="c-debug"
+    fill
+    margin
+    padding
+    background
+  >
     <div class="l-flex__none l-flex--row has-bottom-padding">
       <div class="l-flex__auto l-flex--row c-sibling-item">
         <span>开启：</span>
@@ -39,7 +45,7 @@
         清空
       </button>
     </div>
-    <div class="l-flex__auto">
+    <div class="l-flex__auto u-overflow-y--auto">
       <div
         v-for="message in messages"
         :key="message.id"
@@ -90,7 +96,7 @@
         </button>
       </template>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>
@@ -186,6 +192,5 @@ export default {
   color: $black;
   font-size: 14px;
   line-height: 24px;
-  overflow-y: auto;
 }
 </style>

src/views/device/category/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       :curr="options"
       @pagination="getList"
@@ -89,7 +94,7 @@
         </button>
       </template>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/device/detail/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <wrapper fill />
+</template>
+<script>
+import {
+  getDevice
+} from '@/api/device'
+
+export default {
+  name: 'DeviceDetail',
+  data () {
+    return {
+      loading: false,
+      device: null
+    }
+  },
+  beforeRouteLeave (to, from, next) {
+    if (to.name !== 'device') {
+      this.$store.dispatch('delCacheRoutes', 'Device')
+    }
+    next()
+  },
+  methods: {
+    getDevice () {
+      getDevice(this.$route.id).then(({ data }) => {
+        console.log(data)
+      })
+    }
+  }
+}
+</script>
+<style lang="sass" scoped>
+</style>

src/views/device/group/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       :curr="options"
       @pagination="getList"
@@ -41,7 +46,7 @@
       <el-table-column
         label="操作"
         align="center"
-        width="180"
+        width="240"
       >
         <template v-slot="scope">
           <div
@@ -234,7 +239,7 @@
         />
       </c-table>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/device/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       ref="table"
       :curr="currOptions"
@@ -140,12 +145,6 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="remark"
-        label="备注"
-        align="center"
-        show-overflow-tooltip
-      />
       <el-table-column
         label="操作"
         align="center"
@@ -157,7 +156,7 @@
               class="c-table__btn u-pointer"
               @click.stop="toEditDevice(scope.row)"
             >
-              编辑
+              查看
             </div>
             <permission v-if="scope.row.isMaster">
               <div
@@ -218,7 +217,7 @@
             class="c-form__item"
             placeholder="请选择产品"
             :loading="fetching"
-            :disabled="isSub || !isAdd"
+            :disabled="isSub"
             @visible-change="getProducts"
           >
             <el-option
@@ -235,7 +234,6 @@
             v-model.trim="currObj.serialNumber"
             class="c-form__item"
             maxlength="50"
-            :disabled="!isAdd"
           />
         </div>
         <div class="c-form__section extra o-mac">
@@ -244,11 +242,10 @@
             v-model.trim="currObj.mac"
             class="c-form__item"
             maxlength="17"
-            :disabled="!isAdd"
           />
         </div>
         <div class="c-form__section">
-          <span class="c-form__label">备注：</span>
+          <span class="c-form__label required">地址：</span>
           <el-input
             v-model="currObj.remark"
             class="c-form__item"
@@ -298,7 +295,7 @@
         @choose="toChoose"
       />
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>
@@ -361,13 +358,11 @@ export default {
       return this.isSub ? '备份设备' : '设备'
     },
     products () {
-      return this.isAdd
-        ? this.isSub
-          ? [{ value: this.$master.productId, label: this.$master.productName }]
-          : this.loaded
-            ? this.productOptions.slice(1)
-            : []
-        : [{ value: this.currObj.productId, label: this.$productName }]
+      return this.isSub
+        ? [{ value: this.$master.productId, label: this.$master.productName }]
+        : this.loaded
+          ? this.productOptions.slice(1)
+          : []
     },
     tableData () {
       const arr = []
@@ -396,6 +391,15 @@ export default {
       return this.device?.name
     }
   },
+  beforeRouteLeave (to, from, next) {
+    if (to.name === 'device-detail') {
+      this.$store.dispatch('addCacheRoutes', 'Device')
+    }
+    next()
+  },
+  activated () {
+    this.getList()
+  },
   methods: {
     _getProducts () {
       this.fetching = true
@@ -479,10 +483,6 @@ export default {
         item.loading = false
       })
     },
-    beforeEdit ({ id, name, productId, productName, serialNumber, mac, remark }) {
-      this.$productName = productName
-      return { id, name, productId, mac, serialNumber, remark }
-    },
     afterAdd () {
       const params = this.options.params
       if (params.name && !(new RegExp(params.name).test(this.currObj.name))) {
@@ -529,6 +529,13 @@ export default {
         return false
       }
       item.mac = item.mac.toLowerCase()
+      if (!item.remark) {
+        this.$message({
+          type: 'warning',
+          message: '地址不能为空'
+        })
+        return false
+      }
       return true
     },
     close () {
@@ -542,9 +549,15 @@ export default {
       this.toAdd()
     },
     toEditDevice (item) {
-      this.isSub = !item.isMaster
-      this.$master = item.parent
-      this.toEdit(item)
+      this.$router.push({
+        name: 'device-detail',
+        params: {
+          id: item.id
+        }
+      })
+      // this.isSub = !item.isMaster
+      // this.$master = item.parent
+      // this.toEdit(item)
     },
     reloadSubDevices (item) {
       item.loaded = false
@@ -554,7 +567,7 @@ export default {
     toSave () {
       if (this.isSub) {
         if (this.check(this.currObj)) {
-          (this.isAdd ? addSubDevice(this.$master, this.currObj) : this.proxy.update(this.currObj)).then(() => {
+          addSubDevice(this.$master, this.currObj).then(() => {
             this.reloadSubDevices(this.$master)
             this.close()
           })

src/views/device/mixins/index.js

@@ -63,7 +63,7 @@ export default {
         options.loading = false
       })
     },
-    afterAdd () {},
+    afterAdd () { },
     save () {
       if (this.check(this.currObj)) {
         if (!this.isAdd && Object.keys(this.$currObj).every(key => this.currObj[key] === this.$currObj[key])) {

src/views/device/product/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       :curr="options"
       @pagination="getList"
@@ -60,7 +65,7 @@
       <el-table-column
         label="操作"
         align="center"
-        width="120"
+        width="180"
       >
         <template v-slot="scope">
           <div
@@ -158,7 +163,7 @@
         </button>
       </template>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/logger/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       :curr="options"
       @row-click="onClick"
@@ -138,20 +143,31 @@
       custom-class="c-dialog"
     >
       <div class="c-detail-grid">
-        <div class="box title">操作者</div><div class="box value">{{ log.userName }}</div>
-        <div class="box title">操作时间</div><div class="box value">{{ log.operTime }}</div>
-        <div class="box title">操作模块</div><div class="box value">{{ log.business }}</div>
-        <div class="box title">执行状态</div><div class="box value">{{ log.status }}</div>
-        <div class="box title">请求IP</div><div class="box value">{{ log.ip }}</div>
-        <div class="box title">耗时</div><div class="box value">{{ log.costTime }}ms</div>
-        <div class="box title">操作描述</div><div class="box value fill">{{ log.description }}</div>
-        <div class="box title">调用方法</div><div class="box value fill">{{ log.method }}</div>
-        <div class="box title">参数</div><div class="box value fill">{{ log.params }}</div>
-        <div class="box title">http请求方式</div><div class="box value fill">{{ log.requestMethod }}</div>
-        <div class="box title">错误原因</div><div class="box value fill">{{ log.errorMsg }}</div>
+        <div class="box title">操作者</div>
+        <div class="box value">{{ log.userName }}</div>
+        <div class="box title">操作时间</div>
+        <div class="box value">{{ log.operTime }}</div>
+        <div class="box title">操作模块</div>
+        <div class="box value">{{ log.business }}</div>
+        <div class="box title">执行状态</div>
+        <div class="box value">{{ log.status }}</div>
+        <div class="box title">请求IP</div>
+        <div class="box value">{{ log.ip }}</div>
+        <div class="box title">耗时</div>
+        <div class="box value">{{ log.costTime }}ms</div>
+        <div class="box title">操作描述</div>
+        <div class="box value fill">{{ log.description }}</div>
+        <div class="box title">调用方法</div>
+        <div class="box value fill">{{ log.method }}</div>
+        <div class="box title">参数</div>
+        <div class="box value fill">{{ log.params }}</div>
+        <div class="box title">http请求方式</div>
+        <div class="box value fill">{{ log.requestMethod }}</div>
+        <div class="box title">错误原因</div>
+        <div class="box value fill">{{ log.errorMsg }}</div>
       </div>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/login/index.vue

@@ -209,7 +209,7 @@ export default {
     color: #fff;
     font-size: 18px;
     background-color: $blue;
-    border-radius: 8px;
+    border-radius: $radius;
   }
 }
 </style>

src/views/media/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex">
+  <wrapper
+    :vertical="false"
+    fill
+    margin
+    background
+  >
     <div class="l-flex__none c-sidebar">
       <div
         class="c-sidebar__item section u-pointer"
@@ -134,7 +139,7 @@
       </c-table>
     </div>
     <preview ref="preview" />
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/remote/components/ControlPanel.vue

@@ -119,7 +119,7 @@ export default {
     width: 64px;
     height: 64px;
     font-size: 32px;
-    border-radius: 8px;
+    border-radius: $radius;
     background-color: $gray--light;
 
     &.primary {
@@ -128,7 +128,7 @@ export default {
     }
 
     &.img::after {
-      content: '';
+      content: "";
       display: inline-block;
       width: 34px;
       height: 34px;
@@ -138,32 +138,32 @@ export default {
     }
 
     &.volume::after {
-      background-image: url('~@/assets/icon_volume.png');
+      background-image: url("~@/assets/icon_volume.png");
     }
 
     &.clear::after {
-      background-image: url('~@/assets/icon_clean.png');
+      background-image: url("~@/assets/icon_clean.png");
     }
 
     &.install::after {
-      background-image: url('~@/assets/icon_install.png');
+      background-image: url("~@/assets/icon_install.png");
     }
 
     &.upgrade::after {
-      background-image: url('~@/assets/icon_upgrade.png');
+      background-image: url("~@/assets/icon_upgrade.png");
     }
 
     &.logger::after {
-      background-image: url('~@/assets/icon_logger.png');
+      background-image: url("~@/assets/icon_logger.png");
     }
 
     &.analysis::after {
-      background-image: url('~@/assets/icon_analysis.png');
+      background-image: url("~@/assets/icon_analysis.png");
     }
   }
 
   &__item:hover &__icon {
-    background-color: rgba($gray--light, .8);
+    background-color: rgba($gray--light, 0.8);
   }
 
   &__item:active &__icon {
@@ -171,7 +171,7 @@ export default {
   }
 
   &__item:hover &__icon.primary {
-    background-color: rgba($blue, .8);
+    background-color: rgba($blue, 0.8);
   }
 
   &__item:active &__icon.primary {

src/views/remote/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex">
+  <wrapper
+    :vertical="false"
+    fill
+    margin
+    background
+  >
     <div
       v-loading="loading"
       class="l-flex__none l-flex--col c-sidebar has-padding"
@@ -33,9 +38,7 @@
         </div>
       </template>
     </div>
-    <div
-      class="l-flex__auto l-flex--col has-padding"
-    >
+    <div class="l-flex__auto l-flex--col has-padding">
       <c-table
         ref="multipleTable"
         :curr="options"
@@ -232,7 +235,7 @@
       </template>
       <control-panel :device="device" />
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/review/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="l-flex--col">
+  <wrapper
+    fill
+    margin
+    background
+  >
     <el-tabs
       v-model="active"
       class="c-tabs"
@@ -76,7 +80,7 @@
         </button>
       </template>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/schedule/deploy/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex">
+  <wrapper
+    :vertical="false"
+    fill
+    margin
+    background
+  >
     <device-tree
       class="l-flex__none c-sidebar has-padding"
       @change="onChange"
@@ -83,7 +88,7 @@
         />
       </c-table>
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/schedule/history/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       ref="table"
       :curr="options"
@@ -75,7 +80,7 @@
         :schedule="scheduleId"
       />
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/schedule/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="l-flex--col">
+  <wrapper
+    fill
+    margin
+    background
+  >
     <template v-if="isExact">
       <el-tabs
         v-model="active"
@@ -244,7 +248,7 @@
       </el-dialog>
     </template>
     <router-view class="has-padding" />
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/schedule/timeline/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <div class="l-flex__none l-flex c-device-detail has-bottom-padding">
       <div class="l-flex__none c-device-detail__screen o-program" />
       <div class="l-flex__auto l-flex--col">
@@ -162,7 +167,7 @@
         @pagination="getDevices"
       />
     </div>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/upgrade/deploy/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       :curr="options"
       @pagination="getList"
@@ -255,7 +260,7 @@
         @change="onChange"
       />
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>

src/views/upgrade/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="l-flex--col has-padding">
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
     <c-table
       :curr="options"
       @pagination="getList"
@@ -256,7 +261,7 @@
         status="success"
       />
     </el-dialog>
-  </div>
+  </wrapper>
 </template>
 
 <script>
@@ -445,10 +450,10 @@ export default {
 
 <style lang="scss" scoped>
 .o-version-name::after {
-  content: '例：1.0.0'
+  content: "例：1.0.0";
 }
 
 .o-version-code::after {
-  content: '只能由小往大升'
+  content: "只能由小往大升";
 }
 </style>