perf: 修改 v4 表现

src/components/Table/CardTable.vue

@@ -11,6 +11,7 @@
         <el-col v-for="(d, index) in totalData" :key="index" :span="8">
           <el-card
             :body-style="{ 'text-align': 'center', 'padding': '20px' }"
+            :class="{'is-disabled': isDisabled(d)}"
             class="my-card"
             shadow="hover"
             @click.native="onView(d)"
@@ -65,6 +66,7 @@
 import TableAction from '@/components/Table/ListTable/TableAction'
 import { Pagination } from '@/components'
 import Icon from '@/components/Widgets/Icon/index.vue'
+import { mapGetters } from 'vuex'
 
 const defaultFirstPage = 1
 
@@ -109,6 +111,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['hasValidLicense']),
     tableUrl() {
       return this.tableConfig.url || ''
     }
@@ -117,6 +120,9 @@ export default {
     this.getList()
   },
   methods: {
+    isDisabled(item) {
+      return item.edition === 'enterprise' && !this.hasValidLicense
+    },
     capitalize(str) {
       return str.charAt(0).toUpperCase() + str.slice(1)
     },
@@ -189,6 +195,9 @@ export default {
       )
     },
     onView(obj) {
+      if (this.isDisabled(obj)) {
+        return
+      }
       const viewFunc = this.tableConfig.onView || this.defaultPerformView
       viewFunc(obj)
     },
@@ -217,10 +226,33 @@ export default {
 .my-card {
   margin: 0 0 20px 0;
   position: relative;
+  cursor: pointer;
+
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    .closeIcon {
+      visibility: visible;
+    }
+  }
+
+  .closeIcon {
+    float: right;
+    display: block;
+    visibility: hidden;
+
+    i {
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
 }
 
 .my-divider {
-  margin: 10px 0
+  margin: 10px 0;
 }
 
 .image {
@@ -230,6 +262,7 @@ export default {
     display: block;
     margin: 50% auto;
   }
+
   span {
     font-size: 36px;
     color: black;
@@ -254,25 +287,6 @@ export default {
   -webkit-box-orient: vertical;
 }
 
-.closeIcon {
-  float: right;
-  display: block;
-  visibility: hidden;
-
-  i {
-    font-size: 20px;
-    cursor: pointer;
-  }
-}
-
-.my-card:hover {
-  cursor: pointer;
-}
-
-.my-card:hover .closeIcon {
-  visibility: visible;
-}
-
 .enterprise {
   position: absolute;
   right: -1px;
@@ -281,7 +295,7 @@ export default {
   color: #fff;
   padding: 3px 8px 4px 9px;
   font-size: 13px;
-  border-radius: 3px 3px 3px 10px;
+  border-radius: 3px 3px 3px 8px;
 }
 
 .tag-zone {
@@ -296,5 +310,4 @@ export default {
   text-align: left;
   height: 100%;
 }
-
 </style>

src/router/console/accounts.js

@@ -1,6 +1,5 @@
 import i18n from '@/i18n/i18n'
 import empty from '@/layout/empty'
-import store from '@/store'
 
 export default [
   {
@@ -121,16 +120,13 @@ export default [
     meta: {
       title: i18n.t('Automations'),
       name: 'Automations',
-      permissions: [],
-      licenseRequired: true
+      permissions: []
     }
   },
   {
     path: 'account-push',
     component: empty,
-    hidden: () => {
-      return store.getters.hasValidLicense
-    },
+    hidden: true,
     redirect: '',
     name: 'AccountPush',
     meta: {

src/router/console/acls.js

@@ -1,6 +1,5 @@
 import i18n from '@/i18n/i18n'
 import empty from '@/layout/empty'
-import store from '@/store'
 
 const globalSubmenu = () => import('@/layout/globalOrg.vue')
 
@@ -11,15 +10,14 @@ export default [
     component: () => import('@/views/acl/index.vue'),
     meta: {
       title: i18n.t('ACLs'),
-      permissions: [],
-      licenseRequired: true
+      permissions: []
     }
   },
   {
     path: 'cmd-acls',
     component: empty,
     redirect: '',
-    hidden: () => store.getters.hasValidLicense,
+    hidden: true,
     meta: {
       title: i18n.t('CommandFilterAclList'),
       app: 'acls',

src/styles/index.scss

@@ -465,3 +465,9 @@ $tooltip-arrow-color: #c2d1e1;
     color: #1c84c6;
   }
 }
+
+.el-tooltip__popper.is-dark {
+  background: rgba(58, 60, 62, 0.9) !important;
+  color: #FFF;
+  line-height: 1.5;
+}

src/views/accounts/Automation/index.vue

@@ -33,6 +33,7 @@ export default {
             name: 'AccountChangeSecretList',
             comment: this.$t('ChangeCredentialsHelpText'),
             icon: 'change-password',
+            edition: 'enterprise',
             tags: ['ansible']
           },
           {
@@ -41,6 +42,7 @@ export default {
             name: 'AccountGatherList',
             comment: this.$t('GatherAccountsHelpText'),
             icon: 'gather-account',
+            edition: 'enterprise',
             tags: ['ansible']
           },
           {
@@ -49,6 +51,7 @@ export default {
             name: 'AccountBackupList',
             comment: this.$t('BackupAccountsHelpText'),
             icon: 'backup-account',
+            edition: 'enterprise',
             tags: ['email', 'SFTP']
           }
         ],

src/views/acl/index.vue

@@ -33,6 +33,7 @@ export default {
             name: 'AssetAclList',
             comment: this.$t('AssetLoginACLHelpText'),
             icon: 'assets',
+            edition: 'enterprise',
             tags: ['asset']
           },
           {
@@ -41,6 +42,7 @@ export default {
             name: 'ConnectMethodAclList',
             comment: this.$t('ConnectMethodACLHelpText'),
             icon: 'client',
+            edition: 'enterprise',
             tags: ['client', 'cli']
           },
           {
@@ -49,6 +51,7 @@ export default {
             name: 'UserLoginAclList',
             comment: this.$t('UserLoginACLHelpText'),
             icon: 'login',
+            edition: 'enterprise',
             tags: ['login']
           }
         ],

src/views/tickets/index.vue

@@ -1,13 +1,14 @@
 <template>
   <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu">
-    <el-badge
-      v-if="props.tab === 'AssignedTicketList'"
-      slot="badge"
-      v-slot="props"
-      :value="getBadgeValue(props)"
-      size="mini"
-      type="primary"
-    />
+    <template #badge>
+      <el-badge
+        v-if="props.tab === 'AssignedTicketList'"
+        v-slot="props"
+        :value="getBadgeValue(props)"
+        size="mini"
+        type="primary"
+      />
+    </template>
     <keep-alive>
       <component :is="config.activeMenu" />
     </keep-alive>