fix: 修复 tag 页面缓存不生效；去除页面切换动画；

Author: maslow

packages/devops-admin/src/layout/components/AppMain.vue

@@ -1,12 +1,12 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- <keep-alive> -->
+    <!-- <transition name="fade-transform" mode="out-in"> -->
+    <!-- <keep-alive> -->
 
-      <keep-alive :include="cachedViews">
-        <router-view :key="key" />
-      </keep-alive>
-    </transition>
+    <keep-alive :include="cachedViews">
+      <router-view :key="key" />
+    </keep-alive>
+    <!-- </transition> -->
   </section>
 </template>
 
@@ -40,11 +40,11 @@ export default {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 54px);
   }
 
   .fixed-header+.app-main {
-    padding-top: 84px;
+    padding-top: 54px;
   }
 }
 </style>

packages/devops-admin/src/router/async.js

@@ -10,29 +10,27 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/development/functions',
     meta: {
-      title: '开发控制台', icon: 'guide', noCache: true
+      title: '开发控制台', icon: 'guide'
     },
     children: [
       {
         path: 'functions',
         component: () => import('@/views/development/functions'),
-        name: 'FunctionManagement',
+        name: 'FunctionListPage',
         meta: {
           title: '云函数',
           icon: 'bug',
-          noCache: true,
           permissions: ['function.read']
         }
       },
       {
         path: 'functions/:id',
         component: () => import('@/views/development/function'),
-        name: 'FunctionEdit',
+        name: 'FunctionEditorPage',
         hidden: true,
         meta: {
           title: '调试云函数',
           icon: 'bug',
-          noCache: true,
           permissions: ['function.read']
         }
       },
@@ -43,31 +41,28 @@ export const asyncRoutes = [
         meta: {
           title: '云函数日志',
           icon: 'documentation',
-          noCache: true,
           permissions: ['function.read', 'function.edit', 'function.create', 'function.debug']
         }
       },
       {
         path: 'function-logs/:id',
         component: () => import('@/views/development/function_logs'),
-        name: 'FunctionLogs',
+        name: 'FunctionlogsListPage',
         hidden: true,
         meta: {
           title: '云函数日志',
           icon: 'lock',
-          noCache: true,
           permissions: ['function_logs.read', 'function.read', 'function.edit', 'function.create', 'function.debug']
         }
       },
       {
         path: 'triggers/:funcId',
         component: () => import('@/views/development/triggers'),
-        name: 'TriggerManagement',
+        name: 'TriggerListPage',
         hidden: true,
         meta: {
           title: '云函数触发器',
           icon: 'lock',
-          noCache: true,
           permissions: ['trigger.read', 'trigger.edit', 'trigger.create', 'trigger.delete']
         }
       }
@@ -78,29 +73,27 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/database/collections',
     meta: {
-      title: '数据管理', icon: 'excel', noCache: true
+      title: '数据管理', icon: 'excel', noCache: false
     },
     children: [
       {
         path: 'policies',
         component: () => import('@/views/database/policies'),
-        name: 'RuleManagement',
+        name: 'PoliciesListPage',
         meta: {
           title: '访问策略',
           icon: 'eye',
-          noCache: true,
           permissions: ['policy.read']
         }
       },
       {
         path: 'policy',
         component: () => import('@/views/database/policy'),
-        name: 'RuleManagement',
+        name: 'RuleEditorPage',
         hidden: true,
         meta: {
           title: '访问规则编辑',
-          icon: 'edit',
-          noCache: true
+          icon: 'edit'
         }
       },
       {
@@ -110,7 +103,6 @@ export const asyncRoutes = [
         meta: {
           title: '集合管理',
           icon: 'example',
-          noCache: true,
           permissions: ['database.manage', 'collections.get', 'collections.createIndex', 'collections.deleteIndex']
         }
       }
@@ -121,28 +113,26 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/system/role',
     meta: {
-      title: '成员管理', icon: 'peoples', noCache: true
+      title: '成员管理', icon: 'peoples'
     },
     children: [
       {
         path: 'admin',
         component: () => import('@/views/system/admin'),
-        name: 'AdminManagement',
+        name: 'AdminListPage',
         meta: {
           title: '开发者',
           icon: 'people',
-          noCache: true,
           permissions: ['admin.read']
         }
       },
       {
         path: 'role',
         component: () => import('@/views/system/role'),
-        name: 'RoleManagement',
+        name: 'RoleListPage',
         meta: {
           title: '角色',
           icon: 'user',
-          noCache: true,
           permissions: ['role.edit', 'role.create']
         }
       }

packages/devops-admin/src/settings.js

@@ -17,7 +17,7 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether fix the header
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * @type {boolean} true | false

packages/devops-admin/src/styles/transition.scss

@@ -14,23 +14,23 @@
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all .5s;
+  transition: all .05s;
 }
 
 .fade-transform-enter {
   opacity: 0;
-  transform: translateX(-30px);
+  transform: translateX(-10px);
 }
 
 .fade-transform-leave-to {
   opacity: 0;
-  transform: translateX(30px);
+  transform: translateX(10px);
 }
 
 /* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all .5s;
+  transition: all .2s;
 }
 
 .breadcrumb-enter,
@@ -40,7 +40,7 @@
 }
 
 .breadcrumb-move {
-  transition: all .5s;
+  transition: all .2s;
 }
 
 .breadcrumb-leave-active {

packages/devops-admin/src/views/system/admin.vue

@@ -103,7 +103,7 @@ const defaultForm = {
 }
 
 export default {
-
+  name: 'AdminListPage',
   data() {
     return {
       admin: Object.assign({}, defaultForm),

packages/devops-admin/src/views/system/role.vue

@@ -110,6 +110,7 @@ const defaultForm = {
 }
 
 export default {
+  name: 'RoleListPage',
   data() {
     return {
       role: Object.assign({}, defaultForm),