From 5c1f24af6a4738c7cd3202c9f7ec59b412f4c119 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 11 Dec 2024 11:39:27 +0800
Subject: [PATCH] perf: update template

---
 .../Apps/AccountListTable/AccountList.vue     |   8 +-
 .../ListTable/TableAction/QuickFilter.vue     |   4 +-
 src/filters/datetime.js                       |   9 ++
 src/layout/components/TabPage/index.vue       |   7 +-
 src/router/console/accounts.js                | 104 ++++++++---------
 .../AccountTemplate/AccountTemplateList.vue   |  94 ++-------------
 .../AccountTemplate/AccountTemplateTable.vue  | 100 ++++++++++++++++
 src/views/pam/Account/AccountTemplate.vue     | 108 +-----------------
 src/views/pam/Account/index.vue               |   2 +-
 src/views/pam/RiskDetect/AccountRiskList.vue  |  45 +++-----
 10 files changed, 201 insertions(+), 280 deletions(-)
 create mode 100644 src/views/accounts/AccountTemplate/AccountTemplateTable.vue

diff --git a/src/components/Apps/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
index 560fc07a2..59b673e46 100644
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -21,8 +21,8 @@
     <AccountCreateUpdate
       v-if="showAddDialog"
       :account="account"
-      :origin="origin"
       :asset="iAsset"
+      :origin="origin"
       :title="accountCreateUpdateTitle"
       :visible.sync="showAddDialog"
       @add="addAccountSuccess"
@@ -31,9 +31,9 @@
     <AccountCreateUpdate
       v-if="showAddTemplateDialog"
       :account="account"
-      :origin="origin"
       :add-template="true"
       :asset="iAsset"
+      :origin="origin"
       :title="accountCreateByTemplateTitle"
       :visible.sync="showAddTemplateDialog"
       @add="addAccountSuccess"
@@ -200,13 +200,13 @@ export default {
             {
               label: '僵尸账号',
               filter: {
-                risk: 'zombie'
+                risk: 'long_time_no_login'
               }
             },
             {
               label: '幽灵账号',
               filter: {
-                risk: 'ghost'
+                risk: 'new_found'
               }
             },
             {
diff --git a/src/components/Table/ListTable/TableAction/QuickFilter.vue b/src/components/Table/ListTable/TableAction/QuickFilter.vue
index 4e55d519a..fc812b3a8 100644
--- a/src/components/Table/ListTable/TableAction/QuickFilter.vue
+++ b/src/components/Table/ListTable/TableAction/QuickFilter.vue
@@ -15,7 +15,9 @@
                   @click="handleFilterClick(option)"
                 >
                   {{ option.label }}
-                  <span v-if="option.hasCount">({{ getCount(option) }}) </span>
+                  <span v-if="option.hasCount">
+                    (<span v-async="getCount(option)">-</span>)
+                  </span>
                   <!--                  <i class="el-icon-circle-check" />-->
                 </span>
               </div>
diff --git a/src/filters/datetime.js b/src/filters/datetime.js
index 3e656bbb5..548dd0951 100644
--- a/src/filters/datetime.js
+++ b/src/filters/datetime.js
@@ -5,3 +5,12 @@ Vue.filter('date', function(value) {
   return toSafeLocalDateStr(value)
 })
 
+Vue.filter('async', async(asyncFn, args) => {
+  if (typeof asyncFn === 'function') {
+    return await asyncFn(args)
+  } else if (typeof asyncFn === 'object' && asyncFn.then) {
+    return await asyncFn
+  } else {
+    return asyncFn
+  }
+})
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index e0721a6b3..b119c2a7f 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -16,11 +16,10 @@
           <el-tab-pane
             :key="item.name"
             :disabled="item.disabled"
-            :label-content="item.labelContent"
             :name="item.name"
           >
             <span slot="label">
-              <i v-if="item.icon" :class="item.icon" class="fa pre-icon " />
+              <Icon v-if="item.icon" :icon="item.icon" class="pre-icon" />
               {{ toSentenceCase(item.title) }}
               <slot :tab="item.name" name="badge" />
               <el-tooltip
@@ -60,12 +59,14 @@
 
 <script>
 import Page from '../Page/'
+import Icon from '@/components/Widgets/Icon'
 import { toSentenceCase } from '@/utils/common'
 
 export default {
   name: 'TabPage',
   components: {
-    Page
+    Page,
+    Icon
   },
   props: {
     submenu: {
diff --git a/src/router/console/accounts.js b/src/router/console/accounts.js
index 68b6b4fe2..844ef9c1a 100644
--- a/src/router/console/accounts.js
+++ b/src/router/console/accounts.js
@@ -67,57 +67,57 @@ export default [
         }
       }
     ]
+  },
+  {
+    path: 'account-template',
+    component: empty,
+    redirect: {
+      name: 'AccountTemplateList'
+    },
+    meta: {
+      title: i18n.t('AccountTemplate'),
+      app: 'accounts',
+      icon: 'template',
+      permissions: ['accounts.view_accounttemplate']
+    },
+    children: [
+      {
+        path: '',
+        name: 'AccountTemplateList',
+        component: () => import('@/views/accounts/AccountTemplate/AccountTemplateList'),
+        meta: {
+          menuTitle: i18n.t('MenuAccountTemplates'),
+          title: i18n.t('AccountTemplateList'),
+          permissions: ['accounts.view_accounttemplate']
+        }
+      },
+      {
+        path: 'create',
+        component: () => import('@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'),
+        name: 'AccountTemplateCreate',
+        meta: {
+          title: i18n.t('CreateAccountTemplate'),
+          action: 'create'
+        },
+        hidden: true
+      },
+      {
+        path: ':id/update',
+        component: () => import('@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'),
+        name: 'AccountTemplateUpdate',
+        meta: {
+          title: i18n.t('UpdateAccountTemplate'),
+          action: 'update'
+        },
+        hidden: true
+      }
+      // {
+      //   path: ':id',
+      //   component: () => import('@/views/accounts/AccountTemplate/AccountTemplateDetail/Application.vue'),
+      //   name: 'AccountTemplateDetail',
+      //   meta: { title: i18n.t('AccountTemplate') },
+      //   hidden: true
+      // }
+    ]
   }
-  // {
-  //   path: 'account-template',
-  //   component: empty,
-  //   redirect: {
-  //     name: 'AccountTemplateList'
-  //   },
-  //   meta: {
-  //     title: i18n.t('AccountTemplate'),
-  //     app: 'accounts',
-  //     icon: 'template',
-  //     permissions: ['accounts.view_accounttemplate']
-  //   },
-  //   children: [
-  //     {
-  //       path: '',
-  //       name: 'AccountTemplateList',
-  //       component: () => import('@/views/accounts/AccountTemplate/AccountTemplateList'),
-  //       meta: {
-  //         menuTitle: i18n.t('MenuAccountTemplates'),
-  //         title: i18n.t('AccountTemplateList'),
-  //         permissions: ['accounts.view_accounttemplate']
-  //       }
-  //     },
-  //     {
-  //       path: 'create',
-  //       component: () => import('@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'),
-  //       name: 'AccountTemplateCreate',
-  //       meta: {
-  //         title: i18n.t('CreateAccountTemplate'),
-  //         action: 'create'
-  //       },
-  //       hidden: true
-  //     },
-  //     {
-  //       path: ':id/update',
-  //       component: () => import('@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'),
-  //       name: 'AccountTemplateUpdate',
-  //       meta: {
-  //         title: i18n.t('UpdateAccountTemplate'),
-  //         action: 'update'
-  //       },
-  //       hidden: true
-  //     },
-  //     {
-  //       path: ':id',
-  //       component: () => import('@/views/accounts/AccountTemplate/AccountTemplateDetail/Application.vue'),
-  //       name: 'AccountTemplateDetail',
-  //       meta: { title: i18n.t('AccountTemplate') },
-  //       hidden: true
-  //     }
-  //   ]
-  // }
 ]
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateList.vue b/src/views/accounts/AccountTemplate/AccountTemplateList.vue
index a325e2cec..2730ea13d 100644
--- a/src/views/accounts/AccountTemplate/AccountTemplateList.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateList.vue
@@ -1,100 +1,20 @@
 <template>
-  <div>
-    <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
-    <ViewSecret
-      v-if="showViewSecretDialog"
-      :account="account"
-      :show-password-record="false"
-      :url="secretUrl"
-      type="template"
-      :visible.sync="showViewSecretDialog"
-    />
-  </div>
+  <Page>
+    <AccountTemplateTable />
+  </Page>
 </template>
 
 <script>
-import { GenericListPage } from '@/layout/components'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
-import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
+import AccountTemplateTable from './AccountTemplateTable.vue'
+import { Page } from '@/layout/components'
 
 export default {
   name: 'AccountTemplateList',
   components: {
-    GenericListPage,
-    ViewSecret
+    Page, AccountTemplateTable
   },
   data() {
-    const vm = this
-    return {
-      showViewSecretDialog: false,
-      account: {},
-      secretUrl: '',
-      tableConfig: {
-        url: '/api/v1/accounts/account-templates/',
-        columns: null,
-        columnsExclude: ['spec_info', 'password_rules', 'push_params'],
-        columnsShow: {
-          min: ['name', 'actions'],
-          default: ['name', 'username', 'secret_type', 'has_secret', 'privileged', 'actions']
-        },
-        columnsMeta: {
-          privileged: {
-            width: '120px',
-            formatterArgs: {
-              showText: false,
-              showFalse: false
-            }
-          },
-          has_secret: {
-            formatterArgs: {
-              showFalse: false,
-              showText: false
-            }
-          },
-          actions: {
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasUpdate: true,
-              hasDelete: true,
-              hasClone: this.hasClone,
-              moreActionsTitle: this.$t('More'),
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('View'),
-                  can: this.$hasPerm('accounts.view_accounttemplatesecret'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    vm.secretUrl = `/api/v1/accounts/account-template-secrets/${row.id}/`
-                    vm.account = row
-                    vm.showViewSecretDialog = false
-                    setTimeout(() => {
-                      vm.showViewSecretDialog = true
-                    })
-                  }
-                }
-              ]
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasRefresh: true,
-        hasExport: this.$hasPerm('accounts.view_accounttemplatesecret'),
-        hasMoreActions: false,
-        hasLabelSearch: true,
-        exportOptions: {
-          url: '/api/v1/accounts/account-template-secrets/',
-          mfaVerifyRequired: true,
-          tips: this.$t('AccountExportTips')
-        },
-        createRoute: () => {
-          return {
-            name: 'AccountTemplateCreate'
-          }
-        }
-      }
-    }
+    return {}
   }
 }
 </script>
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateTable.vue b/src/views/accounts/AccountTemplate/AccountTemplateTable.vue
new file mode 100644
index 000000000..05d0c2849
--- /dev/null
+++ b/src/views/accounts/AccountTemplate/AccountTemplateTable.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ViewSecret
+      v-if="showViewSecretDialog"
+      :account="account"
+      :show-password-record="false"
+      :url="secretUrl"
+      :visible.sync="showViewSecretDialog"
+      type="template"
+    />
+  </div>
+</template>
+
+<script>
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
+import ListTable from '@/components/Table/ListTable/index.vue'
+
+export default {
+  name: 'AccountTemplateTable',
+  components: {
+    ListTable,
+    ViewSecret
+  },
+  data() {
+    const vm = this
+    return {
+      showViewSecretDialog: false,
+      account: {},
+      secretUrl: '',
+      tableConfig: {
+        url: '/api/v1/accounts/account-templates/',
+        columns: null,
+        columnsExclude: ['spec_info', 'password_rules', 'push_params'],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: ['name', 'username', 'secret_type', 'has_secret', 'privileged', 'actions']
+        },
+        columnsMeta: {
+          privileged: {
+            width: '120px',
+            formatterArgs: {
+              showText: false,
+              showFalse: false
+            }
+          },
+          has_secret: {
+            formatterArgs: {
+              showFalse: false,
+              showText: false
+            }
+          },
+          actions: {
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: true,
+              hasDelete: true,
+              hasClone: this.hasClone,
+              moreActionsTitle: this.$t('More'),
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('View'),
+                  can: this.$hasPerm('accounts.view_accounttemplatesecret'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    vm.secretUrl = `/api/v1/accounts/account-template-secrets/${row.id}/`
+                    vm.account = row
+                    vm.showViewSecretDialog = false
+                    setTimeout(() => {
+                      vm.showViewSecretDialog = true
+                    })
+                  }
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasRefresh: true,
+        hasExport: this.$hasPerm('accounts.view_accounttemplatesecret'),
+        hasMoreActions: false,
+        hasLabelSearch: true,
+        exportOptions: {
+          url: '/api/v1/accounts/account-template-secrets/',
+          mfaVerifyRequired: true,
+          tips: this.$t('AccountExportTips')
+        },
+        createRoute: () => {
+          return {
+            name: 'AccountTemplateCreate'
+          }
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/pam/Account/AccountTemplate.vue b/src/views/pam/Account/AccountTemplate.vue
index bb1b4ded2..bc92c26d9 100644
--- a/src/views/pam/Account/AccountTemplate.vue
+++ b/src/views/pam/Account/AccountTemplate.vue
@@ -1,14 +1,6 @@
 <template>
   <div>
-    <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
-    <ViewSecret
-      v-if="showViewSecretDialog"
-      :account="account"
-      :show-password-record="false"
-      :url="secretUrl"
-      type="template"
-      :visible.sync="showViewSecretDialog"
-    />
+    <AccountTemplateTable />
 
     <Drawer v-if="showTableUpdateDrawer" :title="drawerTitle" @close-drawer="showTableUpdateDrawer = !showTableUpdateDrawer">
       <component :is="currentTemplate" />
@@ -17,114 +9,24 @@
 </template>
 
 <script>
-import { GenericListPage } from '@/layout/components'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
-
-import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
 import Drawer from '@/components/Drawer/index.vue'
+import AccountTemplateTable from '@/views/accounts/AccountTemplate/AccountTemplateTable.vue'
 // import AccountTemplateDetail from '@/views/accounts/AccountTemplate/AccountTemplateDetail/index.vue'
 
 export default {
   name: 'AccountTemplateList',
   components: {
+    AccountTemplateTable,
     Drawer,
-    ViewSecret,
-    GenericListPage,
     AccountTemplateUpdate: () => import('@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue')
   },
   data() {
-    const vm = this
     return {
-      showViewSecretDialog: false,
-      showTableUpdateDrawer: false,
       currentTemplate: null,
+      showTableUpdateDrawer: false,
       drawerTitle: '',
       account: {},
-      secretUrl: '',
-      tableConfig: {
-        url: '/api/v1/accounts/account-templates/',
-        columns: null,
-        columnsExclude: ['spec_info', 'password_rules', 'push_params'],
-        columnsShow: {
-          min: ['name', 'actions'],
-          default: ['name', 'username', 'secret_type', 'has_secret', 'privileged', 'actions']
-        },
-        columnsMeta: {
-          name: {
-            formatterArgs: {
-              can: true,
-              isPam: true,
-              getRoute: ({ row }) => ({
-                name: 'AccountTemplateDetail',
-                params: { id: row.id },
-                query: { type: 'pam' }
-              })
-            }
-          },
-          privileged: {
-            width: '120px',
-            formatterArgs: {
-              showText: false,
-              showFalse: false
-            }
-          },
-          has_secret: {
-            formatterArgs: {
-              showFalse: false,
-              showText: false
-            }
-          },
-          actions: {
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              isPam: true,
-              moreActionsTitle: this.$t('More'),
-              updateRoute: 'AccountTemplateUpdate',
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('View'),
-                  can: this.$hasPerm('accounts.view_accounttemplatesecret'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    vm.secretUrl = `/api/v1/accounts/account-template-secrets/${row.id}/`
-                    vm.account = row
-                    vm.showViewSecretDialog = false
-                    setTimeout(() => {
-                      vm.showViewSecretDialog = true
-                    })
-                  }
-                }
-              ],
-              onUpdate: ({ row }) => {
-                this.$route.params.id = row.id
-
-                this.$route.query.type = 'pam'
-
-                this.currentTemplate = 'AccountTemplateUpdate'
-                this.showTableUpdateDrawer = true
-              }
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasRefresh: true,
-        hasExport: this.$hasPerm('accounts.view_accounttemplatesecret'),
-        hasMoreActions: false,
-        hasLabelSearch: true,
-        exportOptions: {
-          url: '/api/v1/accounts/account-template-secrets/',
-          mfaVerifyRequired: true,
-          tips: this.$t('AccountExportTips')
-        },
-        createRoute: () => {
-          return {
-            name: 'AccountTemplateCreate',
-            isPam: true
-          }
-        }
-      }
+      secretUrl: ''
     }
   }
 }
diff --git a/src/views/pam/Account/index.vue b/src/views/pam/Account/index.vue
index b06c21f96..c42d9dc92 100644
--- a/src/views/pam/Account/index.vue
+++ b/src/views/pam/Account/index.vue
@@ -37,7 +37,7 @@ export default {
           {
             name: 'AccountTemplateList',
             title: this.$t('AccountTemplate'),
-            icon: 'fa-copy',
+            icon: 'template',
             component: () => import('@/views/pam/Account/AccountTemplate.vue')
           }
         ]
diff --git a/src/views/pam/RiskDetect/AccountRiskList.vue b/src/views/pam/RiskDetect/AccountRiskList.vue
index 6b933dc4a..295987ffc 100644
--- a/src/views/pam/RiskDetect/AccountRiskList.vue
+++ b/src/views/pam/RiskDetect/AccountRiskList.vue
@@ -3,7 +3,7 @@
     <AssetTreeTable
       ref="AssetTreeTable"
       :header-actions="headerActions"
-      :quick-filters="quickFilters"
+      :quick-summary="quickSummary"
       :table-config="tableConfig"
       :tree-setting="treeSetting"
     />
@@ -49,7 +49,6 @@ export default {
             name: this.$t('Check'),
             icon: 'scan',
             callback: (node) => {
-              console.log('Discovery it: ', node)
               vm.detectDialog.asset = node.id
               setTimeout(() => {
                 vm.detectDialog.visible = true
@@ -58,36 +57,24 @@ export default {
           }
         ]
       },
-      quickFilters: [
+      quickSummary: [
         {
-          label: '快速过滤',
-          options: [
-            {
-              label: '未同步到资产',
-              value: ''
-            },
-            {
-              label: this.$t('最近一个月'),
-              value: ''
-            }
-          ]
+          title: '最近一周发现',
+          filter: {
+            'days': '7'
+          }
         },
         {
-          label: this.$t('最近发现'),
-          options: [
-            {
-              label: '最近一天 (20)',
-              value: ''
-            },
-            {
-              label: '最近一周 (300)',
-              value: ''
-            },
-            {
-              label: '最近一个月 (600)',
-              value: ''
-            }
-          ]
+          title: '最近一月发现',
+          filter: {
+            'days': '30'
+          }
+        },
+        {
+          title: '待处理',
+          filter: {
+            status: '0'
+          }
         }
       ],
       batchResolveDialog: {