style: Optimized style

Merge branch 'pam' of github.com:jumpserver/lina into pam
perf: update name space
2025-11-10 03:42:21 +00:00 · 2024-12-05 10:25:13 +08:00 · 2024-12-04 18:34:42 +08:00 · 2024-12-04 18:34:10 +08:00 · 2024-12-04 16:30:19 +08:00 · 2024-12-02 19:10:29 +08:00
304 changed files with 8462 additions and 3811 deletions
--- a/.github/workflows/.github/workflows/llm-code-review.yml
+++ b/.github/workflows/.github/workflows/llm-code-review.yml
@@ -1,28 +0,0 @@
-name: LLM Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  llm-code-review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fit2cloud/LLM-CodeReview-Action@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
-          LANGUAGE: English
-          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
-          MODEL: qwen2-1.5b-instruct
-          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
-          top_p: 1
-          temperature: 1
-          # max_tokens: 10000
-          MAX_PATCH_LENGTH: 10000 
-          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
-          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
--- a/.github/workflows/llm-code-review.yml
+++ b/.github/workflows/llm-code-review.yml
@@ -1,28 +0,0 @@
-name: LLM Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  llm-code-review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fit2cloud/LLM-CodeReview-Action@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
-          LANGUAGE: English
-          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
-          MODEL: qwen2-1.5b-instruct
-          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
-          top_p: 1
-          temperature: 1
-          # max_tokens: 10000
-          MAX_PATCH_LENGTH: 10000 
-          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
-          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
    "normalize.css": "7.0.0",
    "npm": "^7.8.0",
    "nprogress": "0.2.0",
-    "path-to-regexp": "3.3.0",
+    "path-to-regexp": "2.4.0",
    "v-sanitize": "^0.0.13",
    "vue": "2.6.10",
    "vue-codemirror": "4.0.6",
@@ -117,10 +117,10 @@
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "0.7.2",
-    "serve-static": "^1.16.0",
+    "serve-static": "^1.13.2",
    "strip-ansi": "^7.1.0",
    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.2",
+    "svgo": "1.2.4",
    "vue-i18n-extract": "^1.1.1",
    "vue-template-compiler": "2.6.10"
  },
--- a/public/index.html
+++ b/public/index.html
@@ -2,37 +2,70 @@
 <html>
  <head>
    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta http-equiv="Expires" content="0">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Cache-control" content="no-cache">
-    <meta http-equiv="Cache" content="no-cache">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta content="0" http-equiv="Expires">
+    <meta content="no-cache" http-equiv="Pragma">
+    <meta content="no-cache" http-equiv="Cache-control">
+    <meta content="no-cache" http-equiv="Cache">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title><%= webpackConfig.name %></title>
-    <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
+    <link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
+    <style>
+        #loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: white;
+            z-index: 9999;
+        }
+
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top-color: #3498db;
+            animation: spin 1s infinite linear;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <script>
-      window.onload = function() {
-        if (location.pathname === '/') {
-           location.pathname = '/ui/'
-        }
-        const pathname = window.location.pathname
-        if (pathname.startsWith('/core')) {
-            return
-        }
-        if(pathname.indexOf('/ui') === -1) {
-          window.location.href = window.location.origin + '/ui/#' + pathname
-        }
-        if (pathname.startsWith('/ui/#/chat')) {
-          window.location.href = window.location.origin + pathname
-        }
+      window.onload = function () {
+          if (location.pathname === '/') {
+              location.pathname = '/ui/'
+          }
+          const pathname = window.location.pathname
+          if (pathname.startsWith('/core')) {
+              return
+          }
+          if (pathname.indexOf('/ui') === -1) {
+              window.location.href = window.location.origin + '/ui/#' + pathname
+          }
+          if (pathname.startsWith('/ui/#/chat')) {
+              window.location.href = window.location.origin + pathname
+          }
      }
    </script>
-    <div id="app"></div>
+    <div id="app">
+    </div>
+    <div id="loading">
+      <div class="spinner"></div>
+    </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/api/ops.js
+++ b/src/api/ops.js
@@ -53,7 +53,7 @@ export function createJob(form) {
  })
 }

-export function stopJob(form) {
+export function StopJob(form) {
  return request({
    url: '/api/v1/ops/job-executions/stop/',
    method: 'post',
@@ -71,10 +71,3 @@ export function JobUploadFile(form) {
  })
 }

-export function auditUpdateJob(id, form) {
-  return request({
-    url: `/api/v1/audits/jobs/${id}/`,
-    method: 'patch',
-    data: form
-  })
-}
--- a/src/api/settings.js
+++ b/src/api/settings.js
@@ -15,7 +15,6 @@ export function testEmailSetting(data) {
    data: data
  })
 }
-
 export function importLicense(formData) {
  return request({
    url: '/api/v1/xpack/license/import',
@@ -26,7 +25,6 @@ export function importLicense(formData) {
    data: formData
  })
 }
-
 export function testLdapSetting(data, refresh = true) {
  let url = '/api/v1/settings/ldap/testing/config/'
  if (refresh) {
@@ -98,17 +96,9 @@ export function getPublicSettings(isOpen) {
    method: 'get'
  })
 }
-
 export function getLogo() {
  return request({
    url: '/api/v1/xpack/interface/setting/',
    method: 'get'
  })
 }
-
-export function getPreference() {
-  return request({
-    url: '/api/v1/users/preference/?category=luna',
-    method: 'get'
-  })
-}
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -163,7 +163,8 @@ export const accountFieldsMeta = (vm) => {
          !automation.ansible_enabled ||
          !vm.$hasPerm('accounts.push_account') ||
          (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
-          vm.addTemplate
+          vm.addTemplate ||
+          !formValue.secret_reset
      }
    },
    params: {
--- a/src/components/Apps/AccountCreateUpdateForm/index.vue
+++ b/src/components/Apps/AccountCreateUpdateForm/index.vue
@@ -65,7 +65,8 @@ export default {
        [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
        [this.$t('Secret'), [
          'secret_type', 'password', 'ssh_key', 'token',
-          'access_key', 'passphrase', 'api_key'
+          'access_key', 'passphrase', 'api_key',
+          'secret_reset'
        ]],
        [this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
      ],
--- a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -1,6 +1,6 @@
-<template>
+<template v-if="iVisible">
  <Dialog
-    v-if="iVisible"
+    v-if="origin !== 'pam'"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :show-cancel="false"
@@ -21,15 +21,33 @@
      @edit="editAccount"
    />
  </Dialog>
+
+  <Drawer
+    v-else
+    :title="title"
+    @close-drawer="iVisible = false"
+  >
+    <AccountCreateUpdateForm
+      v-if="!loading"
+      ref="form"
+      :account="account"
+      :add-template="addTemplate"
+      :asset="asset"
+      @add="addAccount"
+      @edit="editAccount"
+    />
+  </Drawer>
 </template>

 <script>
+import Drawer from '@/components/Drawer/index.vue'
 import Dialog from '@/components/Dialog/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'

 export default {
  name: 'CreateAccountDialog',
  components: {
+    Drawer,
    Dialog,
    AccountCreateUpdateForm
  },
@@ -55,6 +73,10 @@ export default {
      default: function() {
        return this.$t('AddAccount')
      }
+    },
+    origin: {
+      type: String,
+      default: ''
    }
  },
  data() {
@@ -106,6 +128,8 @@ export default {
        }
      }).catch(error => {
        this.iVisible = true
+        console.log(this.iVisible)
+        console.log(this.origin)
        this.handleResult(null, error)
      })
    },
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -1,6 +1,11 @@
 <template>
  <div>
-    <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :quick-filters="quickFilters"
+      :table-config="tableConfig"
+    />
    <ViewSecret
      v-if="showViewSecretDialog"
      :account="account"
@@ -16,6 +21,7 @@
    <AccountCreateUpdate
      v-if="showAddDialog"
      :account="account"
+      :origin="origin"
      :asset="iAsset"
      :title="accountCreateUpdateTitle"
      :visible.sync="showAddDialog"
@@ -25,6 +31,7 @@
    <AccountCreateUpdate
      v-if="showAddTemplateDialog"
      :account="account"
+      :origin="origin"
      :add-template="true"
      :asset="iAsset"
      :title="accountCreateByTemplateTitle"
@@ -49,7 +56,9 @@

 <script>
 import ListTable from '@/components/Table/ListTable/index.vue'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import {
+  ActionsFormatter, PlatformFormatter, SecretViewerFormatter
+} from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
@@ -89,7 +98,7 @@ export default {
    },
    hasClone: {
      type: Boolean,
-      default: false
+      default: true
    },
    asset: {
      type: Object,
@@ -119,7 +128,7 @@ export default {
    columnsDefault: {
      type: Array,
      default: () => ([
-        'name', 'username', 'asset', 'date_updated'
+        'name', 'username', 'secret', 'asset', 'platform', 'date_updated', 'connect'
      ])
    },
    headerExtraActions: {
@@ -129,6 +138,10 @@ export default {
    extraQuery: {
      type: Object,
      default: () => ({})
+    },
+    origin: {
+      type: String,
+      default: ''
    }
  },
  data() {
@@ -145,6 +158,131 @@ export default {
      iAsset: this.asset,
      account: {},
      secretUrl: '',
+      quickFilters: [
+        {
+          label: '最近(7天)',
+          options: [
+            {
+              label: '最近发现',
+              filter: {
+                latest_discovery: '1'
+              }
+            },
+            {
+              label: '最近被登录',
+              filter: {
+                latest_accessed: '1'
+              }
+            },
+            {
+              label: '最近修改',
+              filter: {
+                latest_updated: '1'
+              }
+            },
+            {
+              label: '最近改密',
+              filter: {
+                latest_secret_changed: '1'
+              }
+            },
+            {
+              label: '最近改密失败',
+              filter: {
+                latest_secret_changed_failed: '1'
+              }
+            }
+          ]
+        },
+        {
+          label: '风险账号',
+          options: [
+            {
+              label: '僵尸账号',
+              filter: {
+                risk: 'zombie'
+              }
+            },
+            {
+              label: '幽灵账号',
+              filter: {
+                risk: 'ghost'
+              }
+            },
+            {
+              label: '弱密码',
+              filter: {
+                risk: 'week_password'
+              }
+            },
+            {
+              label: '空密码',
+              filter: {
+                has_secret: 'false'
+              }
+            },
+            {
+              label: '长时间未改密',
+              filter: {
+                long_time_no_change_secret: 'true'
+              }
+            },
+            {
+              label: '长时间未验证',
+              filter: {
+                long_time_no_verify: 'true'
+              }
+            }
+          ]
+        },
+        {
+          label: '账号类型',
+          options: [
+            {
+              label: '全部',
+              filter: {
+                category: ''
+              }
+            },
+            {
+              label: ' 主机',
+              filter: {
+                category: 'host'
+              }
+            },
+            {
+              label: '数据库',
+              filter: {
+                category: 'database'
+              }
+            },
+            {
+              label: '云',
+              filter: {
+                category: 'cloud'
+              }
+            },
+            {
+              label: '网络设备',
+              filter: {
+                category: 'device'
+              }
+            },
+            {
+              label: 'Web',
+              filter: {
+                category: 'website'
+              }
+            },
+            {
+              label: '其他',
+              filter: {
+                category: 'custom'
+              }
+            }
+          ]
+        }
+      ],
      tableConfig: {
        url: this.url,
        permissions: {
@@ -153,6 +291,7 @@ export default {
        },
        extraQuery: this.extraQuery,
        columnsExclude: ['spec_info'],
+        columnsAdd: ['secret', 'platform', 'connect'],
        columnsShow: {
          min: ['name', 'username', 'actions'],
          default: this.columnsDefault
@@ -172,6 +311,27 @@ export default {
              }
            }
          },
+          secret: {
+            formatter: SecretViewerFormatter,
+            formatterArgs: {
+              secretFrom: 'api',
+              hasDownload: false,
+              actionLeft: true
+            }
+          },
+          connect: {
+            label: this.$t('Connect'),
+            width: '80px',
+            formatter: () => {
+              return (
+                <span className='connect'>
+                  <el-button type='primary' size='mini' plain>
+                    <i className='fa fa-desktop'/>
+                  </el-button>
+                </span>
+              )
+            }
+          },
          asset: {
            formatter: function(row) {
              const to = {
@@ -185,6 +345,13 @@ export default {
              }
            }
          },
+          platform: {
+            label: this.$t('Platform'),
+            formatter: PlatformFormatter,
+            formatterArgs: {
+              platformAttr: 'asset.platform'
+            }
+          },
          username: {
            width: '120px'
          },
@@ -217,7 +384,8 @@ export default {
            formatterArgs: {
              hasUpdate: false, // can set function(row, value)
              hasDelete: false, // can set function(row, value)
-              hasClone: this.hasClone,
+              hasClone: false,
+              canClone: true,
              moreActionsTitle: this.$t('More'),
              extraActions: [
                {
@@ -255,7 +423,7 @@ export default {
                },
                {
                  name: 'Test',
-                  title: this.$t('Test'),
+                  title: this.$t('验证密文'),
                  can: ({ row }) =>
                    !this.$store.getters.currentOrgIsRoot &&
                    this.$hasPerm('accounts.verify_account') &&
@@ -283,6 +451,26 @@ export default {
                      this.$message.success(this.$tc('ClearSuccessMsg'))
                    })
                  }
+                },
+                {
+                  name: 'SecretHistory',
+                  title: '密文历史'
+                },
+                {
+                  name: 'CopyToOther',
+                  title: '复制到其他资产',
+                  type: 'primary',
+                  divided: true
+                },
+                {
+                  name: 'MoveToOther',
+                  title: '移动到其他资产',
+                  type: 'primary'
+                },
+                {
+                  name: 'Clone',
+                  title: this.$t('Duplicate'),
+                  divided: true
                }
              ]
            }
@@ -350,8 +538,8 @@ export default {
            icon: 'fa-link',
            can: ({ selectedRows }) => {
              return selectedRows.length > 0 &&
-                  ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                  !this.$store.getters.currentOrgIsRoot
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                !this.$store.getters.currentOrgIsRoot
            },
            callback: function({ selectedRows }) {
              const ids = selectedRows.map(v => {
@@ -511,4 +699,5 @@ export default {
 .cell a {
  color: var(--color-info);
 }
+
 </style>
--- a/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
+++ b/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
@@ -4,7 +4,7 @@

 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'

 export default {
  components: {
@@ -33,7 +33,7 @@ export default {
          columnsMeta: {
            secret: {
              label: this.$t('Password'),
-              formatter: ShowKeyCopyFormatter,
+              formatter: SecretViewerFormatter,
              formatterArgs: {
                hasDownload: false,
                name: this.account.name
--- a/src/components/Apps/AccountListTable/ViewSecret.vue
+++ b/src/components/Apps/AccountListTable/ViewSecret.vue
@@ -18,7 +18,7 @@
          <span>{{ account['username'] }}</span>
        </el-form-item>
        <el-form-item :label="secretTypeLabel">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
            :cell-value="secretInfo.secret"
            :col="{ formatterArgs: {
              name: account['name'],
@@ -60,7 +60,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'

 export default {
@@ -68,7 +68,7 @@ export default {
  components: {
    Dialog,
    PasswordHistoryDialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
  },
  props: {
    account: {
--- a/src/components/Apps/AssetTreeTable/index.vue
+++ b/src/components/Apps/AssetTreeTable/index.vue
@@ -32,10 +32,6 @@ export default {
      type: String,
      default: '/api/v1/assets/assets/'
    },
-    typeUrl: {
-      type: String,
-      default: '/api/v1/assets/nodes/category/tree/'
-    },
    nodeUrl: {
      type: String,
      default: '/api/v1/assets/nodes/'
@@ -109,9 +105,9 @@ export default {
              showAssets: false,
              showSearch: false,
              customTreeHeaderName: this.$t('TypeTree'),
-              url: this.typeUrl,
+              url: '/api/v1/assets/nodes/category/tree/',
              nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
-              treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
              callback: {
                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
              }
--- a/src/components/Apps/ChangeSecret/RecordViewSecret.vue
+++ b/src/components/Apps/ChangeSecret/RecordViewSecret.vue
@@ -12,7 +12,7 @@
    >
      <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
        <el-form-item :label="$tc('OldSecret')">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
            :cell-value="secretInfo.old_secret"
            :col="{ formatterArgs: {
              name: 'old_secret'
@@ -20,7 +20,7 @@
          />
        </el-form-item>
        <el-form-item :label="$tc('NewSecret')">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
            :cell-value="secretInfo.new_secret"
            :col="{ formatterArgs: {
              name: 'new_secret'
@@ -34,13 +34,13 @@

 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'

 export default {
  name: 'RecordViewSecret',
  components: {
    Dialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
  },
  props: {
    visible: {
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="16" :sm="24">
+      <el-col :md="16" :sm="24" class="resource-activity">
        <IBox :title="title" class="block" v-bind="$attrs">
          <el-timeline>
            <el-timeline-item
--- a/src/components/Apps/UserConfirmDialog/index.vue
+++ b/src/components/Apps/UserConfirmDialog/index.vue
@@ -8,7 +8,7 @@
    :visible.sync="visible"
    class="dialog-content"
    v-bind="$attrs"
-    width="740px"
+    width="600px"
    @confirm="visible = false"
    v-on="$listeners"
  >
@@ -52,21 +52,11 @@
      <el-row :gutter="24" style="margin: 0 auto;">
        <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
          <el-input
-            v-if="subTypeSelected !== 'face'"
            v-model="secretValue"
            :placeholder="inputPlaceholder"
            :show-password="showPassword"
            @keyup.enter.native="handleConfirm"
          />
-
-          <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
-            :src="faceCaptureUrl"
-            allow="camera"
-            sandbox="allow-scripts allow-same-origin"
-            style="width: 100%; height: 800px;border: none;"
-          />
-
          <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
            <el-button
              :disabled="smsBtnDisabled"
@@ -82,24 +72,9 @@
      </el-row>
      <el-row :gutter="24" style="margin: 10px auto;">
        <el-col :md="24" :sm="24">
-          <el-button
-            v-if="subTypeSelected!=='face'"
-            class="confirm-btn"
-            size="mini"
-            type="primary"
-            @click="handleConfirm"
-          >
+          <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
            {{ this.$t('Confirm') }}
          </el-button>
-          <el-button
-            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
-            class="confirm-btn"
-            size="mini"
-            type="primary"
-            @click="handleFaceCapture"
-          >
-            开始人脸识别
-          </el-button>
        </el-col>
      </el-row>
    </div>
@@ -138,10 +113,7 @@ export default {
      visible: false,
      callback: null,
      cancel: null,
-      processing: false,
-      isFaceCaptureVisible: false,
-      faceToken: null,
-      faceCaptureUrl: null
+      processing: false
    }
  },
  computed: {
@@ -157,10 +129,6 @@ export default {
  },
  methods: {
    handleSubTypeChange(val) {
-      if (val !== 'face') {
-        this.isFaceCaptureVisible = false
-      }
-
      this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
      this.smsWidth = val === 'sms' ? 6 : 0
    },
@@ -224,29 +192,6 @@ export default {
        this.$message.error(this.$tc('FailedToSendVerificationCode'))
      })
    },
-    startFaceCapture() {
-      const url = '/api/v1/authentication/face/context/'
-      this.$axios.post(url).then(data => {
-        const token = data['token']
-        this.faceCaptureUrl = '/facelive/capture?token=' + token
-        this.isFaceCaptureVisible = true
-
-        const timer = setInterval(() => {
-          this.$axios.get(url + `?token=${token}`).then(data => {
-            if (data['is_finished']) {
-              clearInterval(timer)
-              this.isFaceCaptureVisible = false
-              this.handleConfirm()
-            }
-          })
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToStartFaceCapture'))
-      })
-    },
-    handleFaceCapture() {
-      this.startFaceCapture()
-    },
    handleConfirm() {
      if (this.confirmTypeRequired === 'relogin') {
        return this.logout()
@@ -269,8 +214,6 @@ export default {
        })
      }).catch((err) => {
        this.$message.error(err.message || this.$tc('ConfirmFailed'))
-        this.faceCaptureUrl = null
-        this.isFaceCaptureVisible = false
      })
    }
  }
@@ -278,21 +221,21 @@ export default {
 </script>

 <style lang="scss" scoped>
-.dialog-content ::v-deep .el-dialog__footer {
-  padding: 0;
-}
-
-.dialog-content ::v-deep .el-dialog {
-  padding: 8px;
-
-  .el-dialog__body {
-    padding-top: 30px;
-    padding-bottom: 30px;
+  .dialog-content ::v-deep .el-dialog__footer {
+    padding: 0;
  }
-}

-.confirm-btn {
-  width: 100%;
-  line-height: 20px;
-}
+  .dialog-content ::v-deep .el-dialog {
+    padding: 8px;
+
+    .el-dialog__body {
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+  }
+
+  .confirm-btn {
+    width: 100%;
+    line-height: 20px;
+  }
 </style>
--- a/src/components/Apps/VariableCreateUpdateForm/index.vue
+++ b/src/components/Apps/VariableCreateUpdateForm/index.vue
@@ -1,133 +0,0 @@
-<template>
-  <AutoDataForm
-    ref="AutoDataForm"
-    class="variable-add"
-    :submit-btn-text="submitBtnText"
-    v-bind="$data"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-
-export default {
-  name: 'VariableCreateForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    variable: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    const defaultValidator = (rule, value, callback) => {
-      if (this.defaultValueRequired && !value) {
-        callback(new Error(this.$t('FieldRequiredError')))
-      } else {
-        callback()
-      }
-    }
-    return {
-      defaultValueRequired: false,
-      submitBtnText: this.$t('Confirm'),
-      url: '/api/v1/ops/variables/',
-      form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
-      fields: [
-        ['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
-      ],
-      fieldsMeta: {
-        text_default_value: {
-          label: this.$t('DefaultValue'),
-          hidden: (formValue) => {
-            return formValue.type !== 'text'
-          },
-          rules: [{ validator: defaultValidator }],
-          helpTip: this.$t('DefaultValueTip'),
-          el: {
-            type: 'input'
-          }
-        },
-        select_default_value: {
-          label: this.$t('DefaultValue'),
-          helpTip: this.$t('DefaultValueTip'),
-          hidden: (formValue) => {
-            return formValue.type !== 'select'
-          },
-          rules: [{ validator: defaultValidator }],
-          el: { type: 'input' }
-        },
-        extra_args: {
-          hidden: (formValue) => {
-            return formValue.type !== 'select'
-          },
-          el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
-          rules: [
-            {
-              validator: (rule, value, callback) => {
-                try {
-                  const lines = value.split('\n')
-                  const regex = /^[^:]+:[^:]+$/
-                  for (const line of lines) {
-                    if (!regex.test(line.trim())) {
-                      callback(new Error(this.$t('ExtraArgsFormatError')))
-                    }
-                  }
-                } catch (e) {
-                  callback(new Error(this.$t('ExtraArgsFormatError')))
-                }
-                callback()
-              }
-            }
-          ]
-        },
-        required: {
-          on: {
-            change: ([event], updateForm) => {
-              this.defaultValueRequired = event
-            }
-          }
-        }
-      },
-      hasSaveContinue: false,
-      method: 'get'
-    }
-  },
-  mounted() {
-    this.defaultValueRequired = this.variable?.required || false
-  },
-  methods: {
-    confirm(form) {
-      if (this.variable?.name) {
-        this.$emit('edit', form)
-      } else {
-        this.$emit('add', form)
-      }
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.variable-add {
-  ::v-deep .el-form-item {
-    margin-bottom: 5px;
-
-    .help-block {
-      margin-bottom: 5px;
-    }
-  }
-
-  ::v-deep .form-group-header {
-    .hr-line-dashed {
-      margin: 5px 0;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>
--- a/src/components/Apps/VariableSetForm/index.vue
+++ b/src/components/Apps/VariableSetForm/index.vue
@@ -1,74 +0,0 @@
-<template>
-  <AutoDataForm
-    ref="AutoDataForm"
-    class="variable-set"
-    :submit-btn-text="submitBtnText"
-    v-bind="$data"
-    :fields="fields"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-
-export default {
-  name: 'VariableSetForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    formData: {
-      type: Array,
-      default: () => ([])
-    },
-    queryParam: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      submitBtnText: this.$t('Confirm'),
-      // 防止缓存form remoteMeta
-      url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
-      form: {},
-      hasSaveContinue: false,
-      method: 'get',
-      hasReset: false
-    }
-  },
-  computed: {
-    fields() {
-      return [['', this.formData.map(item => item.var_name)]]
-    }
-  },
-  methods: {
-    confirm(form) {
-      this.$emit('confirm', form)
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.variable-set {
-  ::v-deep .el-form-item {
-    margin-bottom: 5px;
-
-    .help-block {
-      margin-bottom: 5px;
-    }
-  }
-
-  ::v-deep .form-group-header {
-    .hr-line-dashed {
-      margin: 5px 0;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>
--- a/src/components/Cards/DetailCard/ItemValue.vue
+++ b/src/components/Cards/DetailCard/ItemValue.vue
@@ -78,7 +78,7 @@ export default {
        formatterData = data
      }
      return (
-        <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
+        <span>{formatterData}</span>
      )
    }
    if (this.value instanceof Array) {
@@ -92,7 +92,7 @@ export default {
      )
    }
    return (
-      <span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
+      <span title={this.displayValue}>{this.displayValue}</span>
    )
  }
 }
--- a/src/components/Cards/SummaryCard/index.vue
+++ b/src/components/Cards/SummaryCard/index.vue
@@ -1,21 +1,20 @@
 <template>
-  <el-card shadow="never">
-    <div slot="header" class="summary-header">
-      <span class="header-title">{{ title }}</span>
+  <div>
+    <div class="summary-header">
+      <span class="title">{{ title }}</span>
    </div>
    <slot>
-      <h1 class="no-margins">
-        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
-        <router-link v-else :to="body.route">
-          <span>{{ body.count }}</span>
-        </router-link>
-      </h1>
-      <small>{{ body.comment }}</small>
+      <h3 class="no-margins ">
+        <span class="num" @click="handleClick">
+          {{ iCount }}
+        </span>
+      </h3>
    </slot>
-  </el-card>
+  </div>
 </template>

 <script>
+
 export default {
  name: 'SummaryCard',
  props: {
@@ -23,56 +22,85 @@ export default {
      type: String,
      default: ''
    },
-    rightSideLabel: {
-      type: Object,
-      default: () => ({})
-    },
    body: {
      type: Object,
      default: () => ({})
+    },
+    count: {
+      type: [Number, String],
+      default: 0
+    },
+    route: {
+      type: [String, Object],
+      default: ''
+    },
+    callback: {
+      type: Function,
+      default: () => {
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iCount() {
+      return this.body.count || this.count
+    },
+    iRoute() {
+      return this.body.route || this.route
+    },
+    iDisabled() {
+      return this.body.disabled === undefined ? this.disabled : this.body.disabled
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.iDisabled) {
+        return
+      }
+      if (this.iRoute) {
+        this.$router.push(this.iRoute)
+        return
+      }
+      this.callback.bind(this)()
+      this.$emit('click')
    }
  }
 }
 </script>

 <style lang="scss" scoped>
-  .pull-right {
-    float: right !important;
-  }
+.summary-header {
+  //color: var(--color-icon-primary);

-  .header-title {
-    font-size: 14px;
-    margin: 0 0 7px;
+  .title {
+    font-style: normal;
    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    line-height: 1.2;
  }
+}

-  .right-side ::v-deep .el-tag {
-    font-weight: 600;
-    padding: 3px 8px;
-    text-shadow: none;
-    line-height: 1;
-  }
+.no-margins {
+  margin: 0 !important;

-  h1 {
-    font-size: 30px;
-    font-weight: 100;
-  }
+  .num {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 40px;
+    color: var(--color-text-primary);
+    cursor: pointer;

-  .el-card__body {
-    background-color: #ffffff;
-    color: inherit;
-    padding: 15px 20px 20px 20px !important;
-    border-color: #e7eaec;
-    border-image: none;
-    border-style: solid solid none;
-    border-width: 1px 0;
-  }
-
-  .no-margins {
-    margin: 0 !important;
-  }
-
-  .disabled-link {
-    color: #428bca;
+    &:hover {
+      color: var(--color-primary);
+    }
  }
+}
 </style>
--- a/src/components/DataActions/index.vue
+++ b/src/components/DataActions/index.vue
@@ -29,7 +29,13 @@
            >
              {{ option.group }}
            </div>
-            <el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
+            <el-tooltip
+              :key="option.name"
+              :content="option.tip"
+              :disabled="!option.tip"
+              :open-delay="500"
+              placement="top"
+            >
              <el-dropdown-item
                :key="option.name"
                :command="[option, action]"
@@ -252,7 +258,10 @@ $color-drop-menu-border: #e4e7ed;
    display: flex;
    align-items: center;
    padding: 2px 6px;
-    color: $btn-text-color;
+
+    &:not(.is-plain) {
+      color: $btn-text-color;
+    }

    * {
      vertical-align: baseline !important;
--- a/src/components/Dialog/ProcessingDialog.vue
+++ b/src/components/Dialog/ProcessingDialog.vue
@@ -0,0 +1,62 @@
+<template>
+  <Dialog
+    :visible="iVisible"
+    height="300"
+    title="Processing"
+    width="300"
+  >
+    <div id="load">
+      <div class="spinner" />
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from './index.vue'
+
+export default {
+  name: 'ProcessingDialog',
+  components: { Dialog },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+    width: 100px;
+    height: 100px;
+    border: 5px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: #3498db;
+    animation: spin 1s infinite linear;
+}
+
+#load {
+  display: flex;
+  justify-content: center;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>
--- a/src/components/Dialog/Secret.vue
+++ b/src/components/Dialog/Secret.vue
@@ -0,0 +1,96 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="700px"
+    @close="onClose"
+    @confirm="visible = false"
+  >
+    <el-alert type="warning" :closable="false">
+      {{ warningText }}
+      <div class="secret">
+        <div class="row">
+          <span class="col">ID:</span>
+          <span class="value">{{ keyInfo.id }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
+        </div>
+        <div class="row">
+          <span class="col">Secret:</span>
+          <span class="value">{{ keyInfo.secret }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
+        </div>
+      </div>
+    </el-alert>
+  </Dialog>
+</template>
+
+<script>
+import i18n from '@/i18n/i18n'
+import { copy } from '@/utils/common'
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  name: 'Secret',
+  components: {
+    Dialog
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => i18n.t('CreateAccessKey')
+    },
+    warningText: {
+      type: String,
+      default: () => i18n.t('ApiKeyWarning')
+    }
+  },
+  data() {
+    return {
+      keyInfo: { id: '', secret: '' },
+      visible: false
+    }
+  },
+  methods: {
+    show(data) {
+      this.keyInfo = data
+      this.visible = true
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    handleCopy(value) {
+      copy(value)
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+ .secret {
+  color: #2b2f3a;
+  margin-top: 20px;
+}
+
+.row {
+  margin-bottom: 10px;
+}
+
+.col {
+  width: 100px;
+  text-align: left;
+  display: inline-block;
+}
+
+.copy-icon {
+  margin-left: 5px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.value {
+  font-weight: 600;
+}
+</style>
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -123,7 +123,6 @@ export default {

    &__body {
      padding: 20px 30px;
-      font-size: 13px;

      &:has(.el-table) {
        background: #f3f3f4;
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-drawer
+    ref="drawer"
+    size="61.8%"
+    direction="rtl"
+    custom-class="drawer"
+    :title="title"
+    :before-close="handleClose"
+    :visible.sync="dialog"
+    :wrapper-closable="true"
+  >
+    <div class="drawer__content">
+      <slot name="default" />
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('AddAccount')
+      }
+    }
+  },
+  data() {
+    return {
+      dialog: true,
+      loading: false,
+      formLabelWidth: '80px'
+    }
+  },
+  methods: {
+    handleClose(done) {
+      this.$emit('close-drawer')
+      done()
+    },
+    cancelForm() {
+      this.loading = false
+      this.dialog = false
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+::v-deep .drawer {
+  min-width: 565px;
+
+  .el-drawer__header {
+    margin-bottom: 20px;
+
+    span {
+      font-size: 16px;
+      font-weight: 800;
+      color: var(--color-text-primary);
+    }
+  }
+
+  .el-drawer__body {
+
+    .drawer__content {
+      height: 100%;
+
+      .el-form {
+        position: relative;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: column;
+        justify-content: flex-start;
+        margin: unset !important;
+        padding-right: 50px;
+        height: 100%;
+
+        .el-form-item {
+          margin: 5px 0 5px 0;
+        }
+
+        .form-buttons {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          padding: 0 10px 0 10px;
+
+          .el-form-item__content {
+            width: 100%;
+            display: flex;
+            margin: unset !important;
+            justify-content: center;
+
+            .el-button {
+              width: 50%;
+              border-radius: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/components/Form/AutoDataForm/index.vue
+++ b/src/components/Form/AutoDataForm/index.vue
@@ -7,7 +7,7 @@
    v-bind="$attrs"
    v-on="$listeners"
  >
-    <div
+    <span
      v-for="(group, i) in groups"
      :key="'group-'+group.name"
      :slot="'id:'+group.name"
@@ -18,7 +18,7 @@
        :index="i"
        :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
      />
-    </div>
+    </span>
  </DataForm>
 </template>

--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
 import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
-import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot, toSentenceCase } from '@/utils/common'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
+import TransferSelect from '@/components/Form/FormFields/TransferSelect.vue'
 import i18n from '@/i18n/i18n'

 export class FormFieldGenerator {
@@ -64,8 +64,9 @@ export class FormFieldGenerator {
        }
        break
      case 'boolean':
-        type = ''
-        field.component = Switcher
+        type = 'checkbox'
+        // field.component = Switcher
+        // field.type = 'checkbox'
        break
      case 'list':
        type = 'input'
@@ -134,6 +135,9 @@ export class FormFieldGenerator {
      case 'comment':
        field.el.type = 'textarea'
        break
+      case 'users':
+        field.component = TransferSelect
+        field.el.label = field.label
    }
    return field
  }
--- a/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
+++ b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
@@ -17,7 +17,7 @@
        placement="right"
        popper-class="help-tips"
      >
-        <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
+        <div slot="content" v-sanitize="data.helpTip" /> <!-- Noncompliant -->
        <i class="fa fa-question-circle-o help-tip-icon" />
      </el-tooltip>
    </template>
@@ -71,6 +71,7 @@
          <el-tooltip v-if="opt.tip" :content="opt.tip" :open-delay="500" placement="top">
            <i class="el-icon-warning-outline" />
          </el-tooltip>
+          <span v-if="data.helpText">{{ data.helpText }}</span>
        </el-checkbox>
        <!-- WARNING: radio 用 label 属性来表示 value 的含义 -->
        <!-- FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
@@ -87,7 +88,7 @@
        </el-radio>
      </template>
    </custom-component>
-    <div v-if="data.helpText" class="help-block">
+    <div v-if="data.helpText" :class="data.type" class="help-block">
      <el-alert
        v-if="data.helpText.startsWith('!')"
        :closable="false"
@@ -315,6 +316,10 @@ export default {
  ::v-deep .el-alert__icon {
    font-size: 16px
  }
+
+  &.checkbox {
+    //display: inline;
+  }
 }

 .help-tip-icon {
@@ -322,9 +327,4 @@ export default {
    cursor: pointer;
  }
 }
-
-.help-tip-content {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
 </style>
--- a/src/components/Form/FormFields/CodeEditor.vue
+++ b/src/components/Form/FormFields/CodeEditor.vue
@@ -245,7 +245,7 @@ export default {
      },
      set(val) {
        this.$emit('update:value', val)
-        this.$emit('input', val)
+        this.$emit('change', val)
      }
    },
    iOptions() {
--- a/src/components/Form/FormFields/CronTab/Crontab.vue
+++ b/src/components/Form/FormFields/CronTab/Crontab.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Day.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Day.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Month.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Month.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Result.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Result.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Week.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Week.vue
--- a/src/components/Form/FormFields/CronTab/index.vue
+++ b/src/components/Form/FormFields/CronTab/index.vue
--- a/src/components/Form/FormFields/InputWithUnit.vue
+++ b/src/components/Form/FormFields/InputWithUnit.vue
@@ -15,7 +15,6 @@ export default {
  },
  data() {
    return {
-      defaultValue: 24,
      displayMapper: {
        'second': this.$t('Second'), // 'sec' is the default value of 'unit
        'min': this.$t('Minute'), // 'min' is the default value of 'unit
--- a/src/components/Form/FormFields/PasswordInput.vue
+++ b/src/components/Form/FormFields/PasswordInput.vue
@@ -5,7 +5,9 @@
    v-bind="iAttrs"
    @input="handleInput"
    v-on="$listeners"
-  />
+  >
+    hello
+  </Password>
 </template>

 <script>
--- a/src/components/Form/FormFields/PasswordRule.vue
+++ b/src/components/Form/FormFields/PasswordRule.vue
@@ -48,29 +48,28 @@ export default {
            type: 'input-number',
            el: {
              min: 8,
-              max: 36,
-              size: 'mini'
+              max: 30
            }
          },
          {
            id: 'uppercase',
            label: this.$t('Uppercase'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'lowercase',
            label: this.$t('Lowercase'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'digit',
            label: this.$t('Digit'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'symbol',
            label: this.$t('SpecialSymbol'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'exclude_symbols',
--- a/src/components/Form/FormFields/ProtocolSelector/index.vue
+++ b/src/components/Form/FormFields/ProtocolSelector/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="showSetting ? 'show-setting' : 'hide-setting'">
+  <div v-if="!loading" :class="showSetting ? 'show-setting' : 'hide-setting'">
    <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
      <el-input
        v-model="item.port"
@@ -114,7 +114,8 @@ export default {
      name: '',
      items: [],
      currentProtocol: {},
-      showDialog: false
+      showDialog: false,
+      loading: false
    }
  },
  computed: {
@@ -143,8 +144,10 @@ export default {
  watch: {
    choices: {
      handler(value, oldValue) {
+        this.loading = true
        setTimeout(() => {
          this.setDefaultItems(value)
+          this.loading = false
        },)
      },
      deep: true,
--- a/src/components/Form/FormFields/UpdateToken.vue
+++ b/src/components/Form/FormFields/UpdateToken.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="update-token">
    <el-button v-show="!isShow" icon="el-icon-edit" type="text" @click="isShow=true">
      {{ text }}
    </el-button>
@@ -8,14 +8,19 @@
      v-model.trim="curValue"
      :placeholder="placeholder"
      :type="type"
-      autocomplete="new-password"
+      class="password-input"
      show-password
      @change="onChange"
    />
+    <el-button size="small" type="text" @click="randomPassword">
+      <i class="fa fa-retweet" />
+    </el-button>
  </div>
 </template>

 <script>
+import { randomString } from '@/utils/string'
+
 export default {
  props: {
    value: {
@@ -55,7 +60,24 @@ export default {
  methods: {
    onChange(e) {
      this.$emit('input', this.curValue)
+    },
+    randomPassword() {
+      this.curValue = randomString(24, true)
+      this.$emit('input', this.curValue)
    }
  }
 }
 </script>
+<style lang='scss' scoped>
+.password-input {
+  width: calc(100% - 50px);
+}
+
+.update-token {
+  i {
+    color: var(--color-text-secondary);
+    font-size: 14px;
+  }
+}
+
+</style>
--- a/src/components/Form/FormFields/UploadField.vue
+++ b/src/components/Form/FormFields/UploadField.vue
@@ -8,7 +8,7 @@
    <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
    <input v-model="value" hidden type="text" v-on="$listeners">
    <div>
-      <img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
+      <img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
    </div>
  </div>
 </template>
--- a/src/components/Form/FormFields/UserPassword.vue
+++ b/src/components/Form/FormFields/UserPassword.vue
@@ -42,7 +42,7 @@ export default {
        patterns.push([/\d/, i18n.t('NUMBER_REQUIRED')])
      }
      if (passwordRule['SECURITY_PASSWORD_SPECIAL_CHAR']) {
-        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？_+-]")
+        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        patterns.push([pattern, i18n.t('SPECIAL_CHAR_REQUIRED')])
      }
      for (const [pattern, msg] of patterns) {
--- a/src/components/QuickActions/index.vue
+++ b/src/components/QuickActions/index.vue
@@ -39,22 +39,6 @@ export default {
 </script>

 <style scoped>
-  html:lang(en) .quick-actions ::v-deep button {
-    width: 80px;
-  }
-
-  html:lang(ja) .quick-actions ::v-deep button {
-    width: 100px;
-  }
-
-  html:lang(zh-tw) .quick-actions ::v-deep button {
-    width: 65px;
-  }
-
-  html:lang(zh-cn) .quick-actions ::v-deep button {
-    width: 65px;
-  }
-
  .quick-actions ::v-deep table {
    width: 100%;
  }
@@ -74,6 +58,7 @@ export default {
  .quick-actions ::v-deep button {
    padding: 4px 5px;
    font-size: 13px;
+    width: 65px;

    span {
      overflow: hidden;
--- a/src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
+++ b/src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
@@ -3,7 +3,7 @@
    v-if="showColumnSettingPopover"
    :cancel-title="$tc('RestoreDefault')"
    :destroy-on-close="true"
-    :title="$tc('ListPreference')"
+    :title="$tc('TableSetting')"
    :visible.sync="showColumnSettingPopover"
    top="10%"
    width="50%"
--- a/src/components/Table/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -348,6 +348,8 @@ export default {

      let configColumns = config.columns || allColumnNames
      const columnsExclude = config.columnsExclude || []
+      const columnsAdd = config.columnsAdd || []
+      configColumns = configColumns.concat(columnsAdd)
      configColumns = configColumns.filter(item => !columnsExclude.includes(item))

      // 解决后端 API 返回字段中包含 actions 的问题;
--- a/src/components/Table/CardTable/SmallCard.vue
+++ b/src/components/Table/CardTable/SmallCard.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <CardTable
+      ref="table"
+      :columns="3"
+      :sub-component="subComponent"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script type="text/jsx">
+import CardTable from '@/components/Table/CardTable'
+import CardPanel from './components/CardPanel.vue'
+
+export default {
+  name: 'SmallCard',
+  components: {
+    CardTable
+  },
+  data() {
+    return {
+      subComponent: CardPanel
+    }
+  },
+  methods: {
+    reloadTable() {
+      this.$refs.table.reloadTable()
+    }
+  }
+}
+</script>
--- a/src/components/Table/CardTable/components/CardPanel.vue
+++ b/src/components/Table/CardTable/components/CardPanel.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="account-panel">
+    <el-row :gutter="20">
+      <el-col :span="21">
+        <div class="title">
+          <span>{{ object.name }}</span>
+        </div>
+      </el-col>
+      <el-col v-if="iActions.length !== 0" :span="3" @click.native="handleClick($event)">
+        <el-dropdown>
+          <el-link :underline="false" type="primary">
+            <i class="el-icon-more el-icon--right" style="color: var(--color-text-primary)" />
+          </el-link>
+          <el-dropdown-menu default="dropdown">
+            <el-dropdown-item
+              v-for="action in iActions"
+              :key="action.name"
+              :disabled="action.disabled"
+              @click.native="action.callback(object)"
+            >
+              <i v-if="action.icon" :class="action.icon" /> {{ action.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+    <el-divider />
+    <el-row :gutter="20" class="panel-content">
+      <el-col :span="6" class="panel-image">
+        <el-image :src="imageUrl" fit="contain" />
+      </el-col>
+      <el-col :span="18" class="panel-info">
+        <InfoPanel
+          v-for="(obj, index) in getInfos(object)"
+          :key="index"
+          :content="obj.content"
+          :title="obj.title"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import InfoPanel from './InfoPanel'
+
+export default {
+  name: 'CardPanel',
+  components: {
+    InfoPanel
+  },
+  props: {
+    tableConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    object: {
+      type: Object,
+      required: true
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    infos: {
+      type: Array,
+      default: () => []
+    },
+    getImage: {
+      type: Function,
+      default: (obj) => ''
+    },
+    getInfos: {
+      type: Function,
+      default: (obj) => []
+    },
+    handleUpdate: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      defaultActions: [
+        {
+          id: 'update',
+          name: this.$tc('Update'),
+          icon: 'el-icon-edit',
+          callback: this.handleUpdate,
+          disabled: this.isDisabled('change')
+        },
+        {
+          id: 'delete',
+          name: this.$tc('Delete'),
+          icon: 'el-icon-delete',
+          callback: this.handleDelete,
+          disabled: this.isDisabled('delete')
+        }
+      ]
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.getImage(this.object)
+    },
+    iActions() {
+      const mergedActions = new Map()
+      this.defaultActions.forEach(a => {
+        mergedActions.set(a.id, { ...a })
+      })
+      this.actions.forEach(a => {
+        mergedActions.set(a.id, { ...a })
+      })
+      return Array.from(mergedActions.values())
+    }
+  },
+  methods: {
+    isDisabled(action) {
+      const app = this.tableConfig.permissions?.app
+      const resource = this.tableConfig.permissions?.resource
+      return !this.$hasPerm(`${app}.${action}_${resource}`)
+    },
+    handleClick(event) {
+      event.stopPropagation()
+    },
+    handleDelete() {
+      const url = this.tableConfig.url
+      this.$confirm(this.$tc('DeleteConfirmMessage'), this.$tc('Delete'), {
+        confirmButtonText: this.$tc('Confirm'),
+        cancelButtonText: this.$tc('Cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$axios.delete(`${url}${this.object.id}/`).then(() => {
+          this.$message({
+            type: 'success',
+            message: this.$tc('DeleteSuccess')
+          })
+          this.$emit('refresh')
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.account-panel {
+  display: flex;
+  flex-direction: column;
+  //height: 100%;
+  cursor: pointer;
+
+  .title {
+    text-align: left;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-content {
+    display: flex;
+    height: 100px;
+    padding: 10px 0;
+
+    .panel-image {
+      margin: auto 5px;
+    }
+  }
+
+  .el-divider--horizontal {
+    margin: 5px 0;
+  }
+}
+</style>
--- a/src/components/Table/CardTable/components/InfoPanel.vue
+++ b/src/components/Table/CardTable/components/InfoPanel.vue
@@ -1,9 +1,7 @@
 <template>
  <div class="panel-item">
-    <span class="item-label">{{ title }} </span>
-    <el-link :underline="false" class="item-value">
-      <span class="content">{{ content }}</span>
-    </el-link>
+    <div class="item-label">{{ title }}</div>
+    <div class="text-info" :title="content">{{ content }}</div>
  </div>
 </template>

@@ -38,14 +36,18 @@ export default {

 .panel-item {
  text-align: left;
-  padding: 5px 0;
+  padding: 3px 0;
  line-height: 20px;
-  @include textOverflow;

  .item-label {
    text-align: left;
-    display: inline-block;
-    width: 100px;
+  }
+  .item-label::after {
+    content: ':';
+    margin-left: 1px;
+  }
+  .text-info {
+    @include textOverflow;
  }
 }

--- a/src/components/Table/CardTable/index.vue
+++ b/src/components/Table/CardTable/index.vue
@@ -10,7 +10,7 @@
      <IBox v-if="totalData.length === 0">
        <el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
      </IBox>
-      <el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" style="min-width: 335px;">
+      <el-col v-for="(d, index) in totalData" :key="index" :lg="24 / columns" :md="12" :sm="24" style="min-width: 335px;">
        <el-card
          :body-style="{ 'text-align': 'center', 'padding': '15px' }"
          :class="{'is-disabled': isDisabled(d)}"
@@ -19,7 +19,14 @@
          @click.native="onView(d)"
        >
          <keep-alive>
-            <component :is="subComponent" v-if="subComponent" :object="d" @refresh="getList" />
+            <component
+              :is="subComponent"
+              v-if="subComponent"
+              :object="d"
+              :table-config="tableConfig"
+              v-bind="subComponentProps"
+              @refresh="getList"
+            />
            <slot v-else :index="index" :item="d">
              <span v-if="d.edition === 'enterprise'" class="enterprise">
                {{ $t('Enterprise') }}
@@ -85,6 +92,10 @@ export default {
  },
  props: {
    // 定义 table 的配置
+    columns: {
+      type: Number,
+      default: 3
+    },
    tableConfig: {
      type: Object,
      default: () => ({})
@@ -100,6 +111,10 @@ export default {
    subComponent: {
      type: Object,
      default: () => null
+    },
+    subComponentProps: {
+      type: Object,
+      default: () => ({})
    }
  },
  data() {
--- a/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
@@ -7,14 +7,14 @@
    <template v-else>
      <el-table
        ref="table"
-        v-loading="tableLoading"
+        v-loading="loading"
        :data="data"
        :row-class-name="rowClassName"
        v-bind="tableAttrs"
        @select="selectStrategy.onSelect"
        v-on="$listeners"
        @selection-change="selectStrategy.onSelectionChange"
-        @select-all="handleSelectAll($event, canSelect)"
+        @select-all="selectStrategy.onSelectAll($event, canSelect)"
        @sort-change="onSortChange"
      >
        <!--TODO 不用jsx写, 感觉template逻辑有点不清晰了-->
@@ -749,7 +749,7 @@ export default {
      page: defaultFirstPage,
      // https://github.com/ElemeFE/element/issues/1153
      total: null,
-      tableLoading: false,
+      loading: false,
      // 多选项的数组
      selected: [],

@@ -940,11 +940,11 @@ export default {
    },
    getListFromStaticData({ loading = true } = {}) {
      if (loading) {
-        this.tableLoading = true
+        this.loading = true
      }
      if (!this.hasPagination) {
        this.data = this.totalData
-        this.tableLoading = false
+        this.loading = false
        if (this.isTree) {
          this.data = this.tree2Array(this.data, this.expandAll)
        }
@@ -957,7 +957,7 @@ export default {
      const end = (page + pageOffset) * this.size
      this.$log.debug(`page: ${page}, size: ${this.size}, start: ${start}, end: ${end}`)
      this.data = this.totalData.slice(start, end)
-      this.tableLoading = false
+      this.loading = false
      this.data = this.tree2Array(this.data, this.expandAll)
      return this.data
    },
@@ -983,7 +983,7 @@ export default {
        queryUtil.stringify(query, '=', '&')

      // 请求开始
-      this.tableLoading = loading
+      this.loading = loading

      // 存储query记录, 便于后面恢复
      if (this.saveQuery) {
@@ -1023,7 +1023,7 @@ export default {
            this.total === 0 &&
            (_isEmpty(formValue) || _values(formValue).every(isFalsey))

-          this.tableLoading = false
+          this.loading = false
          /**
           * 请求返回, 数据更新后触发
           * @property {object} data - table的数据
@@ -1043,7 +1043,7 @@ export default {
           */
          this.$emit('error', err)
          this.total = 0
-          this.tableLoading = false
+          this.loading = false
        })
    },
    search(attrs, reset) {
@@ -1106,14 +1106,6 @@ export default {
      this.page = val
      this.getList()
    },
-    handleSelectAll(selection, selectable = () => true) {
-      this.tableLoading = true
-      try {
-        this.selectStrategy.onSelectAll(selection, selectable)
-      } finally {
-        this.tableLoading = false
-      }
-    },
    /**
     * 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否
     *
--- a/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js
+++ b/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js
@@ -34,14 +34,12 @@ class StrategyNormal extends StrategyAbstract {
  onSelectionChange(val) {
    this.elDataTable.selected = val
  }
-
  /**
   * toggleRowSelection和clearSelection的表现与el-table一致
   */
  toggleRowSelection(...args) {
    return this.elTable.toggleRowSelection(...args)
  }
-
  clearSelection() {
    return this.elTable.clearSelection()
  }
@@ -52,12 +50,12 @@ class StrategyNormal extends StrategyAbstract {
 */
 class StrategyPersistSelection extends StrategyAbstract {
  /**
-   * el-table 的 selection-change 事件不适用于开启跨页保存的情况。
-   * 比如，当开启 persistSelection时，发生以下两个场景：
+   * el-table的selection-change事件不适用于开启跨页保存的情况。
+   * 比如，当开启persistSelection时，发生以下两个场景：
   * 1. 用户点击翻页
   * 2. 用户点击行首的切换全选项按钮，清空当前页多选项数据
-   * 其中场景 1 应该保持 selected 不变；而场景 2 只应该从 selected 移除当前页所有行，保留其他页面的多选状态。
-   * 但 el-table 的 selection-change 事件在两个场景中无差别发生，所以这里不处理这个事件
+   * 其中场景1应该保持selected不变；而场景2只应该从selected移除当前页所有行，保留其他页面的多选状态。
+   * 但el-table的selection-change事件在两个场景中无差别发生，所以这里不处理这个事件
   */

  /**
@@ -65,19 +63,13 @@ class StrategyPersistSelection extends StrategyAbstract {
   */
  onSelect(selection, row) {
    const isChosen = selection.indexOf(row) > -1
-
    this.toggleRowSelection(row, isChosen)
  }
  /**
   * 用户切换当前页的多选
   */
  onSelectAll(selection, selectable = () => true) {
-    // 获取当前所有已选择的项
-    const selectedRows = this.elDataTable.data.filter(r => selection.includes(r))
-
-    // 判断是否已全选
-    const isSelected = this.elDataTable.data.every(r => selectable(r) && selectedRows.includes(r))
-
+    const isSelected = !!selection.length
    this.elDataTable.data.forEach(r => {
      if (selectable(r)) {
        this.toggleRowSelection(r, isSelected)
@@ -91,42 +83,33 @@ class StrategyPersistSelection extends StrategyAbstract {
  toggleRowSelection(row, isSelected) {
    const { id, selected } = this.elDataTable
    const foundIndex = selected.findIndex(r => r[id] === row[id])
-
    if (typeof isSelected === 'undefined') {
      isSelected = foundIndex <= -1
    }
-
    if (isSelected && foundIndex === -1) {
      selected.push(row)
    } else if (!isSelected && foundIndex > -1) {
      selected.splice(foundIndex, 1)
    }
-
    this.elDataTable.$emit('toggle-row-selection', isSelected, row)
    this.updateElTableSelection()
  }
-
  clearSelection() {
    this.elDataTable.selected = []
    this.updateElTableSelection()
  }
-
  /**
   * 将selected状态同步到el-table中
   */
  updateElTableSelection() {
    const { data, id, selected } = this.elDataTable
-
    // 历史勾选的行已经不在当前页了，所以要将当前页的行数据和selected合并
    const mergeData = _.uniqWith([...data, ...selected], _.isEqual)
-
    mergeData.forEach(r => {
      const isSelected = !!selected.find(r2 => r[id] === r2[id])
-
      if (!this.elTable) {
        return
      }
-
      this.elTable.toggleRowSelection(r, isSelected)
    })
  }
--- a/src/components/Table/ListTable/QuickFilter.vue
+++ b/src/components/Table/ListTable/QuickFilter.vue
@@ -0,0 +1,263 @@
+<template>
+  <div v-if="filters || summary" :class="isExpand ? 'expand': 'shrink' " class="quick-filter">
+    <div v-show="isExpand" class="quick-filter-wrap">
+      <div v-if="filters" class="quick-filter-zone">
+        <div v-for="category in iFilters" :key="category.label" class="item-zone">
+          <div>
+            <h5>{{ category.label }}</h5>
+            <div class="filter-options">
+              <span
+                v-for="option in category.options"
+                :key="option.label"
+                :class="option.active ? 'active' : ''"
+                class="item"
+                @click="handleFilterClick(option)"
+              >
+                {{ option.label }}
+                <i class="el-icon-circle-check" />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="summary" class="summary-zone">
+        <span v-for="item of iSummary" :key="item.title" class="summary-block">
+          <SummaryCard
+            :class="item.active ? 'active' : ''"
+            :count="item.count"
+            :title="item.title"
+            @click="handleFilterClick(item)"
+          />
+        </span>
+      </div>
+    </div>
+    <div class="expand-bar-wrap">
+      <div class="expand-bar" @click="toggle">
+        <i :class="isExpand ? 'expand': 'shrink' " class="fa fa-angle-double-up" />
+        <span v-show="!isExpand"> 展开过滤器 </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SummaryCard from '@/components/Cards/SummaryCard'
+
+export default {
+  name: 'QuickFilter',
+  components: { SummaryCard },
+  props: {
+    filters: {
+      type: Array,
+      default: () => []
+    },
+    summary: {
+      type: Array,
+      default: null
+    },
+    expand: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isExpand: this.expand,
+      iFilters: this.cleanFilters(),
+      iSummary: this.cleanSummary(),
+      filtered: {},
+      activeFilters: []
+    }
+  },
+  computed: {},
+  watch: {
+    isExpand(val) {
+      this.$emit('expand', val)
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    cleanSummary() {
+      if (!this.summary) {
+        return []
+      }
+      return this.summary.map(item => {
+        return {
+          category: 'summary',
+          label: item.title,
+          ...item,
+          filter: item.filter || {},
+          active: false
+        }
+      })
+    },
+    cleanFilters() {
+      if (!this.filters) {
+        return []
+      }
+      return this.filters.map(category => {
+        return {
+          ...category,
+          options: category.options.map(option => {
+            return {
+              category: category.label,
+              ...option,
+              active: false,
+              filter: option.filter || {}
+            }
+          })
+        }
+      })
+    },
+    toggle() {
+      this.isExpand = !this.isExpand
+    },
+    handleFilterClick(option) {
+      if (!option.active) {
+        this.activeFilters = this.activeFilters.filter(item => {
+          const conflict = Object.keys(item.filter).some(key => {
+            return Object.keys(option.filter).includes(key)
+          })
+          if (conflict) {
+            item.active = false
+          }
+          return !conflict
+        })
+        this.activeFilters.push(option)
+      } else {
+        this.activeFilters = this.activeFilters.filter(item => {
+          return item.label !== option.label && item.category !== option.category
+        })
+      }
+      option.active = !option.active
+      this.activeFilters.forEach(item => {
+        this.filtered = { ...item.filter }
+      })
+      this.$emit('filter', this.filtered)
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+ .quick-filter {
+   background: white;
+   padding: 10px 10px 10px 20px;
+   margin-bottom: 10px;
+   display: flex;
+   place-content: stretch flex-end;
+   justify-content: center;
+   align-content: stretch;
+   box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
+
+   &.shrink {
+     background: inherit;
+     padding: 0;
+     margin-bottom: 0;
+     box-shadow: none;
+   }
+
+   .quick-filter-wrap {
+     display: inline-block;
+     width: calc(100% - 70px);
+
+     .summary-zone {
+       padding-top: 10px;
+       display: flex;
+       justify-content: space-between;
+     }
+
+     .summary-block {
+       .active {
+         ::v-deep .no-margins .num {
+           color: var(--color-primary);
+
+           &::after {
+             content: "\e720";
+             font-family: element-icons !important;
+             font-size: 13px;
+             line-height: 1;
+           }
+         }
+       }
+     }
+
+     .quick-filter-zone {
+       display: flex;
+       justify-content: flex-start;
+       flex-wrap: wrap; /* 允许 item-zone 换行 */
+       gap: 10px;
+
+       h5 {
+         font-weight: 600;
+         text-transform: uppercase;
+         font-size: 12px;
+         margin-bottom: .5rem;
+         line-height: 1.2;
+         display: inline-block;
+       }
+
+       .item-zone {
+         margin-right: 30px;
+         margin-bottom: 5px;
+       }
+
+       .item {
+         display: inline-block;
+         margin-right: 5px;
+         color: #303133;
+         font-size: 12px;
+         cursor: pointer;
+
+         i {
+           visibility: hidden;
+           margin-left: -3px;
+         }
+
+         &.active {
+           color: var(--color-primary);
+           font-weight: 500;
+
+           i {
+             visibility: visible;
+           }
+         }
+
+         &:hover {
+           color: var(--color-primary);
+         }
+       }
+
+       ul {
+         list-style: none outside none;
+         margin-block-start: 0;
+         padding-left: 0;
+       }
+     }
+   }
+ }
+
+ .filter-options {
+   display: block;
+ }
+
+ .expand-bar-wrap {
+   margin: auto 0;
+   min-width: 60px;
+
+   .expand-bar {
+     float: right;
+     display: block;
+     cursor: pointer;
+
+     i {
+       padding: 5px;
+
+       &.shrink {
+         transform: rotate(180deg);
+       }
+     }
+   }
+ }
+
+</style>
--- a/src/components/Table/ListTable/TableAction/LeftSide.vue
+++ b/src/components/Table/ListTable/TableAction/LeftSide.vue
@@ -1,25 +1,37 @@
 <template>
-  <DataActions
-    v-if="hasLeftActions && iActions.length > 0"
-    :actions="iActions"
-    class="header-action"
-    v-bind="$attrs"
-  />
+  <div>
+    <DataActions
+      v-if="hasLeftActions && iActions.length > 0"
+      :actions="iActions"
+      class="header-action"
+      v-bind="$attrs"
+    />
+
+    <Drawer v-if="showDrawer" @close-drawer="handleCloseDrawer">
+      <component :is="dynamicTemplateComponent" />
+    </Drawer>
+  </div>
 </template>

 <script>
-import i18n from '@/i18n/i18n'
-import DataActions from '@/components/DataActions/index.vue'
-import { createSourceIdCache } from '@/api/common'
 import { cleanActions } from './utils'
+import { createSourceIdCache } from '@/api/common'
 import { getErrorResponseMsg } from '@/utils/common'

+import i18n from '@/i18n/i18n'
+import Drawer from '@/components/Drawer/index.vue'
+import DataActions from '@/components/DataActions/index.vue'
+import AccountTemplateCreate from '@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'
+
 const defaultTrue = { type: [Boolean, Function, String], default: true }
 const defaultFalse = { type: [Boolean, Function, String], default: false }
+
 export default {
  name: 'LeftSide',
  components: {
-    DataActions
+    Drawer,
+    DataActions,
+    AccountTemplateCreate
  },
  props: {
    hasLeftActions: defaultTrue,
@@ -90,6 +102,8 @@ export default {
  data() {
    const vm = this
    return {
+      showDrawer: false,
+      dynamicTemplateComponent: null,
      defaultMoreActions: [
        {
          title: this.$t('DeleteSelected'),
@@ -194,6 +208,7 @@ export default {
  methods: {
    handleCreate() {
      let route
+
      if (typeof this.createRoute === 'string') {
        route = { name: this.createRoute }
        route.name = this.createRoute
@@ -202,14 +217,27 @@ export default {
      } else if (typeof this.createRoute === 'object') {
        route = this.createRoute
      }
+
      this.$log.debug('handle create')
+
      if (this.createInNewPage) {
        const { href } = this.$router.resolve(route)
        window.open(href, '_blank')
      } else {
+        if (route.isPam) {
+          this.showDrawer = true
+          this.dynamicTemplateComponent = route.name
+
+          return
+        }
+
        this.$router.push(route)
      }
    },
+    handleCloseDrawer() {
+      this.showDrawer = false
+      this.dynamicTemplateComponent = null
+    },
    defaultBulkDeleteCallback({ selectedRows, reloadTable }) {
      const msg = this.$t('DeleteWarningMsg') + ' ' + selectedRows.length + ' ' + this.$t('Rows') + ' ?'
      const title = this.$tc('Info')
@@ -248,3 +276,17 @@ export default {
  }
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep .ibox {
+  height: 100% !important;
+  margin: unset !important;
+  border: unset !important;
+
+  .el-card__body {
+    padding-top: unset !important;
+    padding-bottom: unset !important;
+    height: 100% !important;
+  }
+}
+</style>
--- a/src/components/Table/ListTable/TableAction/RightSide.vue
+++ b/src/components/Table/ListTable/TableAction/RightSide.vue
@@ -106,7 +106,7 @@ export default {
        {
          name: 'actionSetting',
          icon: 'system-setting',
-          tip: this.$t('ListPreference'),
+          tip: this.$t('TableSetting'),
          has: this.hasColumnSetting,
          callback: this.handleTableSettingClick.bind(this)
        },
@@ -185,7 +185,6 @@ export default {
  display: flex;
  align-items: center;
  justify-content: center;
-  padding-left: 10px;
  height: 30px;
  line-height: 30px;

--- a/src/components/Table/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="device" class="table-header clearfix">
+  <div :class="device" class="table-header clearfix container">
    <slot name="header">
      <LeftSide
        v-if="hasLeftActions"
@@ -10,6 +10,7 @@
        v-on="$listeners"
        @init-actions-done="handleActionsDone"
      />
+
      <RightSide
        v-if="hasRightActions"
        :selected-rows="selectedRows"
@@ -18,6 +19,7 @@
        v-bind="$attrs"
        v-on="$listeners"
      />
+
      <div :class="searchClass" class="search">
        <LabelSearch
          v-if="hasLabelSearch"
@@ -158,7 +160,7 @@ $headerHeight: 30px;
 .table-header {
  .left-side {
    display: block;
-    float: left;
+    //float: left;

    ::v-deep .action-item.el-dropdown > .el-button {
      height: 100%;
@@ -166,13 +168,14 @@ $headerHeight: 30px;
  }

  .right-side {
-    float: right;
+    //float: right;
    height: 30px;
  }

  .search {
    display: flex;
    flex-direction: row;
+    justify-content: flex-end;

    .right-side-item.action-search {
      border: 1px solid var(--color-border);
@@ -181,65 +184,60 @@ $headerHeight: 30px;
  }

  .search.left {
-    float: left;
    padding: 0 !important;
+    gap: 10px;
  }

  .search.right {
-    float: right;
+    display: flex;
+    flex-wrap: wrap;
+    padding-right: 10px;
  }
 }

+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px 0;
+
+  &.mobile {
+    justify-content: flex-start;
+
+    .left-side {
+      gap: 0;
+    }
+
+    .search {
+      justify-content: flex-start;
+      gap: 10px;
+    }
+  }
+}
+
+.left-side {
+  order: 1;
+}
+
+.search {
+  order: 2;
+  flex-grow: 1; /* This allows it to grow and fill available space */
+}
+
+.right-side {
+  order: 3;
+}
+
+/* When .left-side is not present, adjust the layout */
+.container:not(:has(.left-side)) .search {
+  margin-right: auto; /* Pushes .search to the left */
+  justify-content: flex-start;
+}
+
 .export-item {
  display: block;
  padding: 5px 20px;
 }

-.mobile .search {
-  display: inherit;
-}
-
-.mobile .search .datepicker {
-  margin-left: 0;
-}
-
-.mobile .search.right {
-  clear: both;
-  float: none;
-  padding-top: 10px;
-
-  .label-search {
-    margin-right: 0;
-
-    ::v-deep .el-button.label-button {
-      border: 1px solid var(--color-border);
-    }
-
-    ::v-deep .label-cascader {
-      display: block;
-      width: 100%;
-    }
-  }
-}
-
-.mobile .search.right .action-search {
-  display: inline-block;
-  width: 100%;
-  margin-top: 5px;
-}
-
-.mobile .right-side {
-  padding-top: 3px;
-}
-
-@media (max-width: 481px) {
-  .mobile .right-side {
-    float: left;
-    margin-left: -15px;
-  }
-
-  .mobile .left-side {
-    width: 100%;
-  }
-}
 </style>
--- a/src/components/Table/ListTable/index.vue
+++ b/src/components/Table/ListTable/index.vue
@@ -1,5 +1,6 @@
 <template>
  <div>
+    <QuickFilter :filters="quickFilters" :summary="quickSummary" @filter="filter" />
    <TableAction
      v-if="hasActions"
      :date-pick="handleDateChange"
@@ -31,11 +32,13 @@ import IBox from '../../IBox/index.vue'
 import TableAction from './TableAction/index.vue'
 import Emitter from '@/mixins/emitter'
 import AutoDataTable from '../AutoDataTable/index.vue'
+import QuickFilter from './QuickFilter.vue'
 import { getDayEnd, getDaysAgo } from '@/utils/time'

 export default {
  name: 'ListTable',
  components: {
+    QuickFilter,
    AutoDataTable,
    TableAction,
    IBox
@@ -51,6 +54,14 @@ export default {
    headerActions: {
      type: Object,
      default: () => ({})
+    },
+    quickFilters: {
+      type: Array,
+      default: () => null
+    },
+    quickSummary: {
+      type: Array,
+      default: () => null
    }
  },
  data() {
@@ -208,6 +219,25 @@ export default {
    })
  },
  methods: {
+    handleQuickFilter(option) {
+      if (option.route) {
+        this.$router.push(option.route)
+        return
+      }
+      if (option.filter) {
+        const filter = { ...option.filter }
+        if (option.active) {
+          for (const key in filter) {
+            filter[key] = ''
+          }
+        }
+        this.filter(option.filter)
+        return
+      }
+      if (option.callback) {
+        option.callback(option.active)
+      }
+    },
    handleActionInitialDone() {
      setTimeout(() => {
        this.actionInit = true
--- a/src/components/Table/TableFormatters/ActionsFormatter.vue
+++ b/src/components/Table/TableFormatters/ActionsFormatter.vue
@@ -135,7 +135,7 @@ export default {
      {
        name: 'clone',
        title: this.$t('Duplicate'),
-        type: 'info',
+        type: 'primary',
        has: colActions.hasClone,
        can: colActions.canClone,
        callback: colActions.onClone,
--- a/src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue
+++ b/src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue
@@ -0,0 +1,158 @@
+<template>
+  <span class="conform-td">
+    <span v-if="iValue === '0'">
+      <el-dropdown trigger="click" @command="handleRisk">
+        <el-button class="confirm action" size="mini">
+          <i class="fa fa-check" />
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="item of iActions" :key="item.name" :command="item.name">
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-tooltip :content="$tc('Ignore')" :open-delay="400">
+        <el-button class="ignore action" size="mini">
+          <svg-icon icon-class="ignore" />
+        </el-button>
+      </el-tooltip>
+    </span>
+    <el-tooltip v-else :content="iLabel" :open-delay="400" class="platform-status">
+      <span v-if="iValue === '1' ">
+        <i class="fa fa-check color-primary" />
+      </span>
+      <span v-else>
+        <svg-icon icon-class="ignore" />
+      </span>
+    </el-tooltip>
+    <ProcessingDialog :visible="processing" />
+  </span>
+</template>
+
+<script>
+import BaseFormatter from './base.vue'
+import ProcessingDialog from '@/components/Dialog/ProcessingDialog.vue'
+
+export default {
+  name: 'ConfirmOrIgnoreFormatter',
+  components: { ProcessingDialog },
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          confirm: ({ row, cellValue }) => {
+          },
+          ignore: ({ row, cellValue }) => {
+          },
+          remove: ({ row, cellValue }) => {
+          },
+          confirmIcon: 'fa fa-check'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
+      processing: false
+    }
+  },
+  computed: {
+    iValue() {
+      if (this.cellValueIsLabelChoice()) {
+        return this.cellValue.value
+      } else {
+        return this.cellValue
+      }
+    },
+    iLabel() {
+      if (this.cellValueIsLabelChoice()) {
+        return this.cellValue.label
+      } else {
+        return this.cellValue
+      }
+    },
+    iActions() {
+      return this.getActions()
+    }
+  },
+  methods: {
+    handleRemove() {
+      this.formatterArgs.remove({ row: this.row, cellValue: this.cellValue })
+    },
+    handleRisk(cmd) {
+      const data = {
+        asset: this.row.asset.id,
+        username: this.row.username,
+        action: cmd,
+        risk: ''
+      }
+      this.processing = true
+      this.$axios.post(`/api/v1/accounts/account-risks/handle/`, data).then(() => {
+        if (cmd === 'add_account') {
+          this.row.present = true
+        }
+        this.row.status = { 'value': '1' }
+      }).finally(() => {
+        setTimeout(() => {
+          this.processing = false
+        }, 500)
+      })
+    },
+    getActions() {
+      const actions = [
+        // {
+        //   name: 'disable_account',
+        //   label: this.$t('Disable remote account'),
+        //   has: this.row.remote_present
+        // },
+        {
+          name: 'delete_remote',
+          label: this.$t('Delete remote account'),
+          has: this.row.remote_present
+        },
+        {
+          name: 'add_account',
+          label: this.$t('Add account'),
+          has: !this.row.present
+        }
+      ]
+      return actions.filter(action => {
+        return action.has
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+.action.el-button--mini {
+  cursor: pointer;
+  padding: 1px 4px;
+
+  &.confirm {
+    ::v-deep i {
+      color: var(--color-primary);
+    }
+  }
+
+  &.remove {
+    ::v-deep i {
+      color: var(--color-danger);
+    }
+  }
+
+  &.ignore {
+    ::v-deep svg.svg-icon {
+    }
+  }
+}
+
+.action.ignore {
+  margin-left: 2px;
+}
+
+</style>
--- a/src/components/Table/TableFormatters/LabelsFormatter.vue
+++ b/src/components/Table/TableFormatters/LabelsFormatter.vue
@@ -131,16 +131,6 @@ export default {
    }
  },
  computed: {},
-  watch: {
-    cellValue: {
-      handler(newValue) {
-        if (newValue) {
-          this.initial = this.formatterArgs.getLabels(this.cellValue)
-          this.iLabels = [...this.initial]
-        }
-      }
-    }
-  },
  mounted() {
    this.initial = this.formatterArgs.getLabels(this.cellValue)
    this.iLabels = [...this.initial]
--- a/src/components/Table/TableFormatters/PlatformFormatter.vue
+++ b/src/components/Table/TableFormatters/PlatformFormatter.vue
@@ -0,0 +1,60 @@
+<template>
+  <span class="platform-td">
+    <span class="icon-zone">
+      <img :src="icon" alt="icon" class="asset-icon">
+    </span>
+    <span class="platform-name">{{ value.name }}</span>
+  </span>
+</template>
+
+<script>
+import BaseFormatter from './base.vue'
+import { loadPlatformIcon } from '@/utils/jms'
+
+export default {
+  name: 'PlatformFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          platformAttr: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    icon() {
+      return loadPlatformIcon(this.value.name, this.value.type)
+    },
+    value() {
+      if (!this.formatterArgs.platformAttr) {
+        return this.cellValue
+      } else {
+        return _.get(this.row, this.formatterArgs.platformAttr)
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+.icon-zone {
+  display: inline-block;
+  width: 1.5em;
+}
+
+.asset-icon {
+  height: 1.5em;
+  vertical-align: -0.2em;
+  fill: currentColor;
+}
+</style>
--- a/src/components/Table/TableFormatters/SecretViewerFormatter.vue
+++ b/src/components/Table/TableFormatters/SecretViewerFormatter.vue
@@ -1,8 +1,24 @@
 <template>
  <div class="content">
+    <span v-if="realValue" :class="formatterArgs.actionLeft ? 'left' : 'right'" class="action">
+      <template v-for="(item, index) in iActions">
+        <el-tooltip
+          v-if="item.has"
+          :key="index"
+          :content="item.tooltip"
+          :open-delay="500"
+          effect="dark"
+          placement="top"
+        >
+          <i :class="[item.class, item.icon]" class="fa" @click="item.action()" />
+        </el-tooltip>
+      </template>
+    </span>
    <el-tooltip
      v-if="!isEdit"
      :content="currentValue"
+      :disabled="!isShow"
+      :open-delay="500"
      placement="top"
    >
      <pre class="text" style="cursor: pointer">{{ currentValue }}</pre>
@@ -16,21 +32,6 @@
      size="small"
      @blur="onEditBlur"
    />
-
-    <span v-if="realValue" class="action">
-      <template v-for="(item, index) in iActions">
-        <el-tooltip
-          v-if="item.has"
-          :key="index"
-          :content="item.tooltip"
-          effect="dark"
-          open-delay="500"
-          placement="top"
-        >
-          <i :class="[item.class, item.icon]" class="fa" @click="item.action()" />
-        </el-tooltip>
-      </template>
-    </span>
  </div>
 </template>

@@ -39,7 +40,7 @@ import { copy, downloadText } from '@/utils/common'
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'

 export default {
-  name: 'ShowKeyCopyFormatter',
+  name: 'SecretViewerFormatter',
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
@@ -51,7 +52,9 @@ export default {
          hasDownload: true,
          hasCopy: true,
          hasEdit: true,
-          defaultShow: false
+          defaultShow: false,
+          secretFrom: 'cellValue', // fromCellValue or api,
+          actionLeft: false
        }
      }
    }
@@ -61,7 +64,8 @@ export default {
      isEdit: false,
      realValue: this.cellValue,
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs || {}),
-      isShow: false
+      isShow: false,
+      getIt: false
    }
  },
  computed: {
@@ -107,6 +111,9 @@ export default {
          tooltip: this.$t('Copy')
        }
      ]
+      if (this.formatterArgs.actionLeft) {
+        actions.reverse()
+      }
      return actions
    },
    currentValue() {
@@ -117,20 +124,45 @@ export default {
      }
    }
  },
+  watch: {
+    cellValue: {
+      handler: function(val) {
+        this.realValue = val
+      },
+      immediate: true
+    }
+  },
  mounted() {
    this.isShow = this.formatterArgs.defaultShow
+    if (this.formatterArgs.secretFrom !== 'cellValue') {
+      this.realValue = '--'
+    }
  },
  methods: {
-    onShow() {
-      this.isShow = !this.isShow
+    async getAccountSecret() {
+      if (this.formatterArgs.secretFrom === 'cellValue' || this.getIt) {
+        return
+      }
+      const res = await this.$axios.get(`/api/v1/accounts/account-secrets/${this.row.id}/`)
+      this.realValue = res.secret
    },
-    onCopy() {
+    async onShow() {
+      await this.getAccountSecret()
+      this.isShow = !this.isShow
+      setTimeout(() => {
+        this.isShow = false
+      }, 10000)
+    },
+    async onCopy() {
+      await this.getAccountSecret()
      copy(this.realValue)
    },
-    onDownload() {
+    async onDownload() {
+      await this.getAccountSecret()
      downloadText(this.realValue, this.name + '.txt')
    },
-    onEdit() {
+    async onEdit() {
+      await this.getAccountSecret()
      this.isEdit = !this.isEdit
      if (this.isEdit) {
        this.$nextTick(() => {
@@ -146,7 +178,7 @@ export default {
 </script>
 <style lang="scss" scoped>
  .content {
-    display: flex;
+    display: inline-block;
    width: 100%;
    overflow: hidden;
    //white-space: nowrap;
@@ -155,6 +187,7 @@ export default {

    .text {
      flex: 1;
+      display: inline;
      margin: 0;
      padding: 0;
      overflow: hidden;
@@ -163,13 +196,17 @@ export default {
    }

    .action {
-      float: right;
-      font-size: 15px;
+      font-size: 13px;
      cursor: pointer;
-      margin-left: 5px;
+      margin-left: 1px;
+      display: inline;
+
+      &.right {
+        float: right;
+      }

      .fa {
-        margin-right: 10px;
+        margin-right: 5px;

        &:hover {
          color: var(--color-primary);
--- a/src/components/Table/TableFormatters/SwitchFormatter.vue
+++ b/src/components/Table/TableFormatters/SwitchFormatter.vue
@@ -24,9 +24,6 @@ export default {
          },
          isDisplay(row) {
            return true
-          },
-          callback({ row }) {
-            return null
          }
        }
      }
@@ -52,11 +49,10 @@ export default {
  methods: {
    onChange(val) {
      this.$axios.patch(this.patchUrl, this.patchData).then(res => {
-        this.formatterArgs.callback(this.row)
-        this.$message.success(this.$t('UpdateSuccessMsg'))
+        this.$message.success(this.$t('updateSuccessMsg'))
      }).catch(err => {
        this.value = !val
-        this.$message.error(this.$t('UpdateErrorMsg' + ' ' + err))
+        this.$message.error(this.$t('updateErrorMsg' + ' ' + err))
      })
    }
  }
--- a/src/components/Table/TableFormatters/base.vue
+++ b/src/components/Table/TableFormatters/base.vue
@@ -47,6 +47,11 @@ export default {
    return {
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    }
+  },
+  methods: {
+    cellValueIsLabelChoice() {
+      return typeof this.cellValue === 'object' && this.cellValue['value'] !== undefined
+    }
  }
 }
 </script>
--- a/src/components/Table/TableFormatters/index.js
+++ b/src/components/Table/TableFormatters/index.js
@@ -6,7 +6,7 @@ import ActionsFormatter from './ActionsFormatter.vue'
 import DeleteActionFormatter from './DeleteActionFormatter.vue'
 import DateFormatter from './DateFormatter.vue'
 import AccountShowFormatter from './GrantedAccountShowFormatter.vue'
-import ShowKeyCopyFormatter from './ShowKeyCopyFormatter.vue'
+import SecretViewerFormatter from './SecretViewerFormatter.vue'
 import DialogDetailFormatter from './DialogDetailFormatter.vue'
 import EditableInputFormatter from './EditableInputFormatter.vue'
 import StatusFormatter from './StatusFormatter.vue'
@@ -18,6 +18,8 @@ import ProtocolsFormatter from './ProtocolsFormatter.vue'
 import TagChoicesFormatter from './TagChoicesFormatter.vue'
 import SwitchFormatter from './SwitchFormatter.vue'
 import AccountInfoFormatter from './AccountInfoFormatter.vue'
+import PlatformFormatter from './PlatformFormatter.vue'
+import DiscoverConfirmFormatter from './DiscoverConfirmFormatter.vue'

 export default {
  DetailFormatter,
@@ -27,7 +29,7 @@ export default {
  DeleteActionFormatter,
  DateFormatter,
  AccountShowFormatter,
-  ShowKeyCopyFormatter,
+  SecretViewerFormatter,
  DialogDetailFormatter,
  ArrayFormatter,
  EditableInputFormatter,
@@ -39,7 +41,9 @@ export default {
  TagChoicesFormatter,
  LabelsFormatter,
  SwitchFormatter,
-  AccountInfoFormatter
+  PlatformFormatter,
+  AccountInfoFormatter,
+  DiscoverConfirmFormatter
 }

 export {
@@ -50,7 +54,7 @@ export {
  DeleteActionFormatter,
  DateFormatter,
  AccountShowFormatter,
-  ShowKeyCopyFormatter,
+  SecretViewerFormatter,
  DialogDetailFormatter,
  ArrayFormatter,
  EditableInputFormatter,
@@ -62,5 +66,7 @@ export {
  TagChoicesFormatter,
  LabelsFormatter,
  SwitchFormatter,
+  PlatformFormatter,
+  DiscoverConfirmFormatter,
  AccountInfoFormatter
 }
--- a/src/components/Table/TagSearch/index.vue
+++ b/src/components/Table/TagSearch/index.vue
@@ -202,10 +202,9 @@ export default {
            label: current.label,
            value: valueDecode
          }
-
          if (curChildren.length > 0) {
            for (const item of curChildren) {
-              if (valueDecode === String(item.value)) {
+              if (valueDecode === item.value) {
                searchFieldOption.valueLabel = item.label
                break
              }
@@ -235,12 +234,10 @@ export default {
        delete routeFilter.search
      }
      const asFilterTags = _.cloneDeep(this.filterTags)
-      setTimeout(() => {
-        this.filterTags = {
-          ...asFilterTags,
-          ...routeFilter
-        }
-      }, 100)
+      this.filterTags = {
+        ...asFilterTags,
+        ...routeFilter
+      }
    },
    getValueLabel(key, value) {
      for (const field of this.options) {
--- a/src/components/Table/TreeTable/index.vue
+++ b/src/components/Table/TreeTable/index.vue
@@ -43,6 +43,8 @@
              :key="componentKey"
              ref="ListTable"
              :header-actions="headerActions"
+              :quick-filters="quickFilters"
+              :quick-summary="quickSummary"
              :table-config="iTableConfig"
              v-on="$listeners"
            />
@@ -243,7 +245,7 @@ $origin-color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border: 1px solid #DCDFE6;
-  background-color: #fff;
+  background-color: #f3f3f3;
  border-radius: 2px;
  cursor: pointer;
  height: 30px;
--- a/src/components/Tree/AutoDataZTree/index.vue
+++ b/src/components/Tree/AutoDataZTree/index.vue
@@ -1,15 +1,22 @@
 <template>
  <DataZTree ref="dataztree" :setting="treeSetting" class="data-z-tree" v-on="$listeners">
-    <slot v-if="treeSetting.hasRightMenu" slot="rMenu">
-      <li v-if="treeSetting.showCreate" id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
-        <i class="fa fa-plus-square-o" /> {{ this.$t('CreateNode') }}
-      </li>
-      <li v-if="treeSetting.showUpdate" id="m_edit" class="rmenu" tabindex="-1" @click="editTreeNode">
-        <i class="fa fa-pencil-square-o" /> {{ this.$t('RenameNode') }}
-      </li>
-      <li v-if="treeSetting.showDelete" id="m_del" class="rmenu" tabindex="-1" @click="removeTreeNode">
-        <i class="fa fa-minus-square" /> {{ this.$t('DeleteNode') }}
-      </li>
+    <slot slot="rMenu">
+      <div v-if="menu && menu.length > 0">
+        <span v-for="item in menu" :key="item.id">
+          <li
+            v-if="hasMenuItem(item)"
+            :id="item.id"
+            :key="item.id"
+            :class="{ 'disabled': checkDisabled(item) }"
+            class="rmenu"
+            tabindex="-1"
+            @click="onMenuItemClick(item)"
+          >
+            <Icon :icon="item.icon" class="icon" /> {{ item.name }}
+          </li>
+          <li v-if="item.divided" class="divider" />
+        </span>
+      </div>
      <slot name="rMenu" />
    </slot>
  </DataZTree>
@@ -17,13 +24,15 @@

 <script>
 import DataZTree from '../DataZTree/index.vue'
+import Icon from '@/components/Widgets/Icon'
 import $ from '@/utils/jquery-vendor'
 import { mapGetters } from 'vuex'

 export default {
  name: 'AutoDataZTree',
  components: {
-    DataZTree
+    DataZTree,
+    Icon
  },
  props: {
    setting: {
@@ -34,7 +43,32 @@ export default {
  },
  data() {
    return {
+      defaultMenu: [
+        {
+          id: 'm_create',
+          name: this.$t('CreateNode'),
+          icon: 'fa-plus-square-o',
+          callback: this.createTreeNode,
+          has: () => this.setting.showCreate
+        },
+        {
+          id: 'm_edit',
+          name: this.$t('RenameNode'),
+          icon: 'fa-pencil-square-o',
+          callback: this.editTreeNode,
+          has: () => this.setting.showUpdate
+        },
+        {
+          id: 'm_del',
+          name: this.$t('DeleteNode'),
+          icon: 'fa-minus-square',
+          callback: this.removeTreeNode,
+          has: () => this.setting.showDelete
+        }
+      ],
      defaultSetting: {
+        showDefaultMenu: true,
+        showMenu: false,
        showCreate: true,
        showDelete: true,
        showUpdate: true,
@@ -80,12 +114,49 @@ export default {
    },
    rMenu() {
      return this.$refs.dataztree.rMenu
+    },
+    menu() {
+      let menu = []
+      if (this.setting.showDefaultMenu) {
+        menu = menu.concat(this.defaultMenu)
+      }
+      if (this.setting.menu && this.setting.menu.length > 0) {
+        menu = menu.concat(this.setting.menu)
+      }
+      return menu
    }
  },
  beforeDestroy() {
    $('body').unbind('mousedown')
  },
  methods: {
+    checkDisabled(item) {
+      let disabled = item.disabled
+      if (typeof disabled === 'function') {
+        disabled = disabled(this.currentNode)
+      }
+      if (typeof disabled === 'undefined') {
+        disabled = false
+      }
+      return disabled
+    },
+    hasMenu(node) {
+      return false
+    },
+    hasMenuItem(item) {
+      let has = item.has
+      if (typeof has === 'function') {
+        has = has(this.currentNode)
+      }
+      if (typeof has === 'undefined') {
+        has = true
+      }
+      return has
+    },
+    onMenuItemClick(item) {
+      item.callback(this.currentNode)
+      this.hideRMenu()
+    },
    onAsyncSuccess(event, treeId, treeNode, msg) {
      const nodes = JSON.parse(msg)
      nodes.forEach((node) => {
@@ -115,7 +186,7 @@ export default {
      if (this.rMenu) this.rMenu.css({ 'visibility': 'hidden' })
      $('body').unbind('mousedown', this.onBodyMouseDown)
    },
-    // Request URL: http://localhost/api/v1/assets/assets/?node_id=d8212328-538d-41a6-bcfd-1e8cc7e3aed4&show_current_asset=null&draw=2&limit=15&offset=0&_=1587022917769
+    // Request URL: http://localhost/api/v1/assets/assets/?node_id=ID&show_current_asset=null&draw=2&limit=15&offset=0&_=1587022917769
    onSelected: function(event, treeNode) {
      const show_current_asset = this.$cookie.get('show_current_asset') || '0'
      if (!this.setting.url) {
@@ -191,6 +262,8 @@ export default {
      const offset = $(`#${zTreeID}`).offset()
      const scrollTop = document.querySelector('.treebox')?.scrollTop
      x -= offset.left
+      x = x < 0 ? 0 : x
+
      // Tmp
      y -= (offset.top + scrollTop) / 3 - 10
      x += document.body.scrollLeft
@@ -199,15 +272,22 @@ export default {
      if (y + $(`#${rMenuID} ul`).height() >= window.innerHeight) {
        y -= $(`#${rMenuID} ul`).height()
      }
+      y = y < 0 ? 0 : y

      this.rMenu.css({ 'top': y + 'px', 'left': x + 'px', 'visibility': 'visible' })
      $(`#${rMenuID} ul`).show()
      $('body').bind('mousedown', this.onBodyMouseDown)
    },
    onRightClick: function(event, treeId, treeNode) {
-      if (!this.setting.showMenu) {
+      let showMenu = this.setting.showMenu
+      if (typeof showMenu === 'function') {
+        showMenu = showMenu(treeNode)
+      }
+      if (!showMenu) {
        return
      }
+      this.currentNode = treeNode
+      this.currentNodeId = treeNode.meta.data.id
      // 屏蔽收藏资产
      if (treeNode?.id === '-12') {
        return
@@ -321,9 +401,14 @@ export default {
  background-color: #f5f7fa;
 }

+.icon {
+  width: 15px;
+  display: inline-block;
+}
+
 .data-z-tree {
  ::v-deep {
-    .fa {
+    .icon {
      width: 10px;
      margin-right: 3px;
    }
--- a/src/components/Tree/DataZTree/components/ZTree/index.vue
+++ b/src/components/Tree/DataZTree/components/ZTree/index.vue
@@ -29,6 +29,7 @@
        <a id="tree-refresh"><i class="fa fa-refresh" /></a>
      </div>
    </div>
+
    <div :id="iRMenuID" class="rMenu">
      <ul class="dropdown-menu menu-actions">
        <slot name="rMenu" />
@@ -49,8 +50,7 @@ import axiosRetry from 'axios-retry'

 const defaultObject = {
  type: Object,
-  default: () => {
-  }
+  default: () => ({})
 }
 export default {
  name: 'ZTree',
@@ -90,6 +90,12 @@ export default {
    window.removeEventListener('resize', this.updateTreeHeight)
  },
  methods: {
+    onMenuClick(menu) {
+      if (menu.disabled) {
+        return
+      }
+      menu.callback()
+    },
    updateTreeHeight: _.debounce(function() {
      const tree = document.getElementById(this.iZTreeID)
      if (!tree) {
@@ -106,8 +112,8 @@ export default {
        }
      }
      // 使用 table 的高度
-      const ztreeRect = tree.getBoundingClientRect()
-      tree.style.height = `calc(100vh - ${ztreeRect.top}px - 30px - 25px)`
+      const zTreeRect = tree.getBoundingClientRect()
+      tree.style.height = `calc(100vh - ${zTreeRect.top}px - 30px - 25px)`
    }, 100),
    async initTree(refresh = false) {
      const vm = this
@@ -156,9 +162,6 @@ export default {
      if (this.treeSetting.showMenu) {
        this.rMenu = $(`#${this.iRMenuID}`)
      }
-      if (this.treeSetting?.otherMenu) {
-        $('.menu-actions').append(this.otherMenu)
-      }
    },
    onSearch() {
      this.showTreeSearch = !this.showTreeSearch
@@ -435,6 +438,24 @@ div.rMenu li {
  list-style: none outside none;
 }

+.menu-item {
+    font-size: 12px;
+    padding: 0 16px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+    height: 24px;
+    line-height: 24px;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    i {
+      width: 15px;
+    }
+}
+
 .dropdown-menu {
  border: medium none;
  min-width: 160px;
@@ -451,7 +472,8 @@ div.rMenu li {
  text-shadow: none;
  top: 100%;
  z-index: 1000;
-  height: 300px;
+  max-height: 320px;
+  min-height: 150px;
  overflow: auto;
 }

--- a/src/components/const.js
+++ b/src/components/const.js
@@ -1,4 +1,7 @@
 import i18n from '@/i18n/i18n'
+import CronTab from '@/components/Form/FormFields/CronTab/index.vue'
+import InputWithUnit from '@/components/Form/FormFields/InputWithUnit.vue'
+import store from '@/store'

 export const strMatchValues = ['exact', 'not', 'in', 'contains', 'startswith', 'endswith', 'regex']
 export const typeMatchMapper = {
@@ -26,3 +29,49 @@ export const attrMatchOptions = [
  { label: i18n.t('GreatEqualThan'), value: 'gte' },
  { label: i18n.t('LessEqualThan'), value: 'lte' }
 ]
+
+export const crontab = {
+  type: 'cronTab',
+  component: CronTab,
+  label: i18n.t('Crontab'),
+  hidden: (formValue) => {
+    return formValue.is_periodic === false
+  },
+  helpText: i18n.t('CrontabHelpText'),
+  helpTip: i18n.t('CrontabHelpTip')
+}
+
+const validatorInterval = (rule, value, callback) => {
+  if (parseInt(value) < 1) {
+    return callback(new Error(i18n.t('EnsureThisValueIsGreaterThanOrEqualTo1')))
+  }
+  callback()
+}
+
+export const interval = {
+  label: i18n.t('Interval'),
+  hidden: (formValue) => {
+    return formValue.is_periodic === false
+  },
+  component: InputWithUnit,
+  el: {
+    unit: 'hour'
+  },
+  rules: [
+    { validator: validatorInterval }
+  ]
+}
+
+export const is_periodic = {
+  type: 'checkbox',
+  hidden: (formValue) => {
+    return !store.getters.hasValidLicense
+  }
+}
+
+export const periodicMeta = {
+  is_periodic,
+  interval,
+  crontab
+}
+
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -30,7 +30,7 @@ export { default as AccountListTable } from './Apps/AccountListTable/AccountList
 export { default as AssetRelationCard } from './Apps/AssetRelationCard'
 export { default as UserConfirmDialog } from './Apps/UserConfirmDialog'
 export { default as Announcement } from './Widgets/Announcement'
-export { default as CronTab } from './Form/CronTab'
+export { default as CronTab } from './Form/FormFields/CronTab'
 export { default as Pagination } from './Table/Pagination'
 export { default as Tooltip } from './Widgets/Tooltip'
 export { default as ResourceActivity } from './Apps/ResourceActivity'
--- a/src/i18n/utils.js
+++ b/src/i18n/utils.js
@@ -1,17 +1,12 @@
 import VueCookie from 'vue-cookie'
-import store from '@/store'

-export function getLangCode(withInternalCode = false) {
+export function getLangCode() {
  const cookieLang = VueCookie.get('django_language')
-  let lang = cookieLang || navigator.language.toLowerCase()
-  if (withInternalCode) {
-    const languages = store.getters.publicSettings['LANGUAGES']
-    for (const langObj of languages) {
-      if (langObj['other_codes'].indexOf(lang) > -1) {
-        lang = langObj['code']
-        break
-      }
-    }
+  const browserLang = navigator.systemLanguage || navigator.language || navigator.userLanguage
+  let lang = cookieLang || browserLang || 'en'
+  lang = lang.replace('-', '_')
+  if (lang !== 'zh_hant') {
+    lang = lang.slice(0, 2)
  }
  return lang
 }
--- a/src/icons/svg/activity.svg
+++ b/src/icons/svg/activity.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="138px" height="134px" viewBox="0 0 138 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>activity</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="activity" fill="#3E3A39" fill-rule="nonzero">
+            <path d="M125.454545,123.012 C125.454545,123.30102 125.310273,123.469176 125.435727,123.484941 L12.7900909,123.553255 C12.7399091,123.521725 12.5454545,123.332549 12.5454545,123.012 L12.5454545,44.6614118 L125.454545,44.6614118 L125.454545,123.012 Z M12.5454545,18.865098 C12.5454545,18.5813333 12.6709091,18.4131765 12.5642727,18.386902 L37.6363636,18.386902 L37.6363636,21.0196078 C37.6363636,23.9218101 40.4447593,26.2745098 43.9090909,26.2745098 C47.3734225,26.2745098 50.1818182,23.9218101 50.1818182,21.0196078 L50.1818182,18.3921569 L87.8181818,18.3921569 L87.8181818,21.0196078 C87.8181818,23.9218101 90.6265775,26.2745098 94.0909091,26.2745098 C97.5552407,26.2745098 100.363636,23.9218101 100.363636,21.0196078 L100.363636,18.3921569 L125.260091,18.3921569 C125.385308,18.5275639 125.454545,18.6938135 125.454545,18.865098 L125.454545,34.1568627 L12.5454545,34.1568627 L12.5454545,18.865098 Z M125.423182,7.88235294 L100.363636,7.88235294 L100.363636,5.25490196 C100.363636,2.35269975 97.5552407,0 94.0909091,0 C90.6265775,0 87.8181818,2.35269975 87.8181818,5.25490196 L87.8181818,7.88235294 L50.1818182,7.88235294 L50.1818182,5.25490196 C50.1818182,2.35269975 47.3734225,0 43.9090909,0 C40.4447593,0 37.6363636,2.35269975 37.6363636,5.25490196 L37.6363636,7.88235294 L12.489,7.88235294 C5.60154545,7.88235294 0,12.811451 0,18.865098 L0,123.017255 C0,129.076157 5.60781818,134 12.4952727,134 L125.504727,134 C132.392182,134 138,129.076157 138,123.017255 L138,18.865098 C138,12.8061961 132.360818,7.87709804 125.423182,7.87709804 L125.423182,7.88235294 Z" id="形状"></path>
+            <path d="M44.3,76.5714286 L94.7,76.5714286 C98.1793939,76.5714286 101,74.2049337 101,71.2857143 C101,68.3664949 98.1793939,66 94.7,66 L44.3,66 C40.8206061,66 38,68.3664949 38,71.2857143 C38,74.2049337 40.8206061,76.5714286 44.3,76.5714286 M44.3,103 L94.7,103 C98.1793939,103 101,100.633505 101,97.7142857 C101,94.7950663 98.1793939,92.4285714 94.7,92.4285714 L44.3,92.4285714 C40.8206061,92.4285714 38,94.7950663 38,97.7142857 C38,100.633505 40.8206061,103 44.3,103" id="形状"></path>
+        </g>
+    </g>
+</svg>
--- a/src/icons/svg/backup.svg
+++ b/src/icons/svg/backup.svg
@@ -0,0 +1,7 @@
+<svg t="1730795663037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="53312" width="200" height="200">
+    <path d="M81.4592 150.4768c-44.544 0-80.6912 35.0208-80.6912 78.2848v712.704c0 43.2128 36.1472 78.2848 80.6912 78.2848h686.6432c44.5952 0 80.7424-35.072 80.7424-78.336v-71.8848h90.3168c44.544 0 80.6912-35.0208 80.6912-78.2848V78.5408c0-43.2128-36.1472-78.2848-80.6912-78.2848H252.416c-44.544 0-80.6912 35.072-80.6912 78.336v71.8848H81.4592zM848.896 800.3584V228.7616c0-43.264-36.1472-78.336-80.7424-78.336H243.0976V69.2736h710.144v731.136h-104.448zM72.0896 941.4656V219.648h705.4336v731.136H72.0896v-9.3184z"
+          fill="#333333" p-id="53313"></path>
+    <path d="M215.1936 716.8a35.1232 35.1232 0 0 0-35.6352 34.6112c0 19.1488 15.9232 34.6112 35.6352 34.6112h203.3664a35.1232 35.1232 0 0 0 35.6864-34.6112 35.1232 35.1232 0 0 0-35.6864-34.56H215.1936z m0-186.9824a35.1232 35.1232 0 0 0-35.6352 34.56c0 19.0976 15.9232 34.6112 35.6352 34.6112h389.4272a35.1232 35.1232 0 0 0 35.6352-34.6112 35.1232 35.1232 0 0 0-35.6352-34.56H215.1936z m0-180.224a35.1232 35.1232 0 0 0-35.6352 34.56c0 19.1488 15.9232 34.6112 35.6352 34.6112h389.4272a35.1232 35.1232 0 0 0 35.6352-34.6112 35.1232 35.1232 0 0 0-35.6352-34.56H215.1936z"
+          fill="#333333" p-id="53314"></path>
+</svg>
--- a/src/icons/svg/change-password.svg
+++ b/src/icons/svg/change-password.svg
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="44px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg"
->
-    <path d="M30.2706254,38.229976 C30.2706254,39.3606857 29.7535516,39.817019 28.4764414,39.817019 L5.16450885,39.817019 C3.87961144,39.817019 3.36253758,39.3606857 3.36253758,38.229976 L3.36253758,25.2564058 C3.36253758,24.1256961 3.88116889,23.6678054 5.16450885,23.6678054 L26.9080879,23.6678054 L26.9080879,20.3052678 L3.6179596,20.3052678 C1.39859136,20.3052678 0,21.7038592 0,23.9232274 L0,39.5600395 C0,41.7794077 1.39859136,43.1779991 3.6179596,43.1779991 L30.0229907,43.1779991 C32.2330142,43.1779991 33.6316056,41.7794077 33.6316056,39.5600395 L33.6316056,29.0488 L30.269068,29.0488 L30.269068,38.229976 L30.2706254,38.229976 Z"
-          id="路径"></path>
-    <path d="M15.4763873,27.703162 C15.4755615,27.5244652 15.54618,27.3528466 15.6725391,27.2264875 C15.7988982,27.1001284 15.9705168,27.0295099 16.1492136,27.0303357 L17.4948516,27.0303357 C17.8639676,27.0303357 18.1676706,27.3324885 18.1676706,27.703162 L18.1676706,35.7816624 C18.1668142,36.1528948 17.866084,36.453625 17.4948516,36.4544887 L16.1492136,36.4544887 C15.9705168,36.4553145 15.7988982,36.384696 15.6725391,36.2583369 C15.54618,36.1319778 15.4755615,35.9603592 15.4763873,35.7816624 L15.4763873,27.703162 L15.4763873,27.703162 Z M39.5047548,15.4429045 C39.1907428,15.1267586 38.7635683,14.9489692 38.3179768,14.9489692 C37.8723853,14.9489692 37.4452109,15.1267586 37.1311989,15.4429045 L22.3821341,30.1919693 C21.9578609,30.6170771 21.7926087,31.2362399 21.9486262,31.8162251 C22.1046438,32.3962103 22.5582284,32.8489044 23.1385191,33.0037818 C23.7188098,33.1586592 24.3376467,32.9921905 24.7619198,32.5670827 L39.5047548,17.8242477 C39.8217544,17.5091076 40,17.0805683 40,16.6335761 C40,16.1865839 39.8217544,15.7580447 39.5047548,15.4429045 L39.5047548,15.4429045 Z M10.0876127,20.3068253 L10.0876127,10.6973501 C10.0876127,6.72273414 13.107511,3.48790758 16.8204751,3.48790758 C20.5334393,3.48790758 23.5455503,6.72273414 23.5455503,10.6973501 L23.5455503,16.2730261 L26.9080879,16.2730261 L26.9080879,10.2176551 C26.9532494,6.58243177 25.0397574,3.20385387 21.8988728,1.37308023 C18.7579882,-0.45769341 14.8751748,-0.45769341 11.7342902,1.37308023 C8.59340562,3.20385387 6.67991361,6.58243177 6.72507515,10.2176551 L6.72507515,23.6678054 L26.9080879,23.6678054 L26.9080879,20.3052678 L10.0876127,20.3052678 L10.0876127,20.3068253 Z"
-          id="形状"></path>
-</svg>
+<svg width="162px" height="176px" viewBox="0 0 162 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#2C2C2C" fill-rule="nonzero">
+            <path d="M145.273438,109.375 C142.304688,109.375 139.882812,111.796875 139.882812,114.765625 L139.882812,164.316406 L10.78125,164.316406 L10.78125,87.3046875 L91.1132813,87.3046875 C94.0820313,87.3046875 96.5039063,84.8828125 96.5039063,81.9140625 C96.5039063,78.9453125 94.0820313,76.5234375 91.1132813,76.5234375 L31.25,76.5234375 L31.25,50.4296875 C31.25,28.5742188 49.0234375,10.8007813 70.8984375,10.8007813 L78.90625,10.8007813 C100.761719,10.8007813 118.535156,28.5742188 118.535156,50.4296875 L118.535156,54.609375 L118.554688,54.609375 C118.730469,57.421875 121.074219,59.6484375 123.925781,59.6484375 C126.894531,59.6484375 129.316406,57.2460938 129.316406,54.2578125 C129.316406,54.1210938 129.316406,53.984375 129.296875,53.8476563 L129.296875,50.4101563 C129.296875,22.6757813 106.621094,0 78.8867188,0 L70.8789063,0 C43.1445313,0 20.46875,22.6757813 20.46875,50.4101563 L20.46875,76.5039063 L5.390625,76.5039063 C2.421875,76.5039063 0,78.9257812 0,81.8945313 L0,170 C0,172.96875 2.421875,175.390625 5.390625,175.390625 C6.03515625,175.390625 6.66015625,175.273438 7.24609375,175.058594 L143.417969,175.058594 C144.003906,175.273438 144.609375,175.390625 145.273438,175.390625 C148.242188,175.390625 150.664063,172.96875 150.664063,170 L150.664063,114.746094 C150.644531,111.796875 148.222656,109.375 145.273438,109.375 Z" id="路径"></path>
+            <path d="M159.648438,56.9335938 C157.558594,54.84375 154.121094,54.84375 152.03125,56.9335938 L76.8945312,132.050781 C74.8046875,134.140625 74.8046875,137.578125 76.8945312,139.667969 C78.984375,141.757813 82.421875,141.757813 84.5117188,139.667969 L159.628906,64.5507813 C161.738281,62.4414063 161.738281,59.0234375 159.648438,56.9335938 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>
--- a/src/icons/svg/discovery.svg
+++ b/src/icons/svg/discovery.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="175px" height="172px" viewBox="0 0 175 172" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#000000" fill-rule="nonzero">
+            <path d="M173.785375,165.454861 L123.361962,115.009064 C137.448412,98.2738101 143.521494,75.2018529 137.651474,52.4540759 C128.018006,15.1217873 89.8109099,-7.40014283 52.4770224,2.22233315 C34.3936829,6.89116772 19.2091781,18.3220175 9.72181048,34.4071119 C0.234442898,50.4958037 -2.41955769,69.3134455 2.24727825,87.3967849 C6.91431399,105.480124 18.3433652,120.666428 34.432057,130.153995 C45.3350648,136.583636 57.4928218,139.875204 69.8298572,139.875204 C75.6914829,139.875204 81.5950804,139.12991 87.4219298,137.628528 C99.4151984,134.532427 109.877505,128.483928 118.240035,120.466763 L168.495562,170.744875 C169.224268,171.475579 170.183418,171.840932 171.140568,171.840932 C172.097719,171.840932 173.054871,171.475579 173.785575,170.744875 C175.246584,169.283466 175.246584,166.916271 173.785375,165.454861 Z M85.551198,130.380442 C69.402147,134.552413 52.5955419,132.177823 38.2312808,123.705967 C23.865021,115.234111 13.6597404,101.677103 9.49156634,85.5262533 C5.32319251,69.3790011 7.69418489,52.5743947 16.1660409,38.2099337 C24.6396958,23.8418753 38.1985029,13.6347956 54.3475538,9.47021928 C59.5606195,8.12213334 64.7902738,7.47916928 69.9393825,7.47916928 C97.7275421,7.47916928 123.148307,26.2018753 130.407185,54.3242083 C135.890068,75.5734013 129.699865,97.1395794 115.85805,112.213559 C115.752321,112.298502 115.649591,112.388841 115.551457,112.486774 C115.398161,112.64007 115.264852,112.804958 115.143734,112.976043 C107.36301,121.170886 97.2760486,127.355893 85.551198,130.380442 Z" id="形状"></path>
+            <path d="M91.6046937,27.1300456 C86.1485929,23.9152253 79.7609238,23.0164347 73.6272824,24.5947646 C71.6270386,25.1136128 70.4234546,27.1520308 70.940304,29.1538736 C71.4553548,31.1559162 73.492174,32.3505062 75.4976142,31.8426505 C84.1721329,29.6031689 93.0403202,34.8382195 95.2798019,43.5073419 C95.7145072,45.1951976 97.2342767,46.3130396 98.9001472,46.3130396 C99.2089378,46.3130396 99.5229249,46.2764644 99.8371118,46.1925212 C101.837156,45.6774705 103.04094,43.6388527 102.52409,41.6370099 C100.940364,35.5031687 97.0625933,30.3484636 91.6046937,27.1300456 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>
--- a/src/icons/svg/ignore.svg
+++ b/src/icons/svg/ignore.svg
@@ -0,0 +1,5 @@
+<svg t="1730113499097" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1649"
+     width="200" height="200">
+    <path d="M512 0C229.234286 0 0 229.234286 0 512s229.234286 512 512 512 512-229.234286 512-512S794.765714 0 512 0zM109.714286 512a400.514286 400.514286 0 0 1 81.68-243.017143l563.622857 563.622857A400.514286 400.514286 0 0 1 512 914.285714C289.828571 914.285714 109.714286 734.171429 109.714286 512z m722.891428 243.017143L268.982857 191.394286A400.514286 400.514286 0 0 1 512 109.714286c222.171429 0 402.285714 180.114286 402.285714 402.285714a400.514286 400.514286 0 0 1-81.68 243.017143z"
+          p-id="1650"></path>
+</svg>
--- a/src/icons/svg/pam.svg
+++ b/src/icons/svg/pam.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="48px" viewBox="0 0 40 48" version="1.1" xmlns="http://www.w3.org/2000/svg"
+>
+    <path d="M36.0001406,20.0002344 L36.0001406,16.000375 C36.0001406,7.17752804 28.8226126,0 20.0002344,0 C11.1778562,0 4.00032813,7.17752804 4.00032813,15.9999062 L4.00032813,19.9997656 L0,19.9997656 L0,48.0001875 L40,48.0001875 L40,20.0002344 L36.0001406,20.0002344 Z M8.0001875,15.9999062 C8.0001875,9.3830054 13.3833335,3.99985937 20.0002344,3.99985937 C26.6171352,3.99985937 32.0002813,9.3830054 32.0002813,15.9999062 L32.0002813,19.9997656 L8.0001875,19.9997656 L8.0001875,15.9999062 Z M36.0006094,44.0003281 L4.00032813,44.0003281 L4.00032813,24.0000938 L36.0006094,24.0000938 L36.0006094,44.0003281 Z"
+          id="形状"></path>
+    <path d="M20.0002344,40 C22.2094618,40 24.0000938,38.2088993 24.0000938,36.0001406 C24.0000938,34.5231036 23.1905593,33.2476299 21.9999297,32.5548147 L21.9999297,27.9999531 L18.0000703,27.9999531 L18.0000703,32.5548147 C16.8094407,33.2476299 15.9999062,34.5231036 15.9999062,36.0001406 C16.000375,38.209368 17.791007,40 20.0002344,40 L20.0002344,40 Z"
+          id="路径"></path>
+</svg>
--- a/src/icons/svg/scan.svg
+++ b/src/icons/svg/scan.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="184px" height="184px" viewBox="0 0 184 184" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#333333" fill-rule="nonzero">
+            <path d="M91.6666666,183.341458 C41.0405646,183.341458 -6.9388939e-15,142.300894 -6.9388939e-15,91.6747917 C0.0535397665,70.505775 7.41237071,50.0040719 20.8333332,33.6331251 C23.6218122,30.2086156 27.7168568,28.1082053 32.125,27.8414583 C36.6727552,27.6410729 41.0978101,29.347664 44.3333332,32.5497917 L97.5416666,85.7997917 C100.373139,89.1061274 100.182768,94.0347428 97.1046929,97.112818 C94.0266177,100.190893 89.0980023,100.381265 85.7916666,97.5497917 L33.0833332,44.8831251 C22.4640203,58.1678232 16.6752268,74.6673541 16.6666666,91.6747917 C16.634797,112.309451 25.1059247,132.045685 40.0857285,146.237078 C55.0655324,160.428471 75.2305194,167.821188 95.8333332,166.674792 C133.947312,164.34614 164.338015,133.955437 166.666667,95.8414583 C167.813062,75.2386445 160.420346,55.0736575 146.228953,40.0938537 C132.03756,25.1140498 112.301325,16.6429221 91.6666666,16.6747917 C85.0987008,16.6886637 78.5594988,17.5428207 72.2083332,19.2164583 C67.9277344,19.9697568 63.787032,17.3066153 62.6970126,13.0991407 C61.6069933,8.89166618 63.9337598,4.55301463 68.0416666,3.13312512 C96.4092432,-4.47902134 126.706595,1.9631523 149.522872,20.4586022 C172.33915,38.9540521 184.910974,67.2627144 183.333333,96.5914583 C180.529036,143.291305 143.283179,180.537161 96.5833332,183.341458 L91.6666666,183.341458 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>
--- a/src/icons/svg/service.svg
+++ b/src/icons/svg/service.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#272636" fill-rule="nonzero">
+            <path d="M196.888904,59.872974 L154.191511,102.570368 C150.259952,106.501926 143.890605,106.501926 139.959046,102.570368 L97.2672057,59.872974 C93.3356471,55.9469684 93.3356471,49.5720682 97.2672057,45.6460625 L139.959046,2.94866895 C143.890605,-0.982889648 150.259952,-0.982889648 154.191511,2.94866895 L196.888904,45.6460625 C200.820463,49.5720682 200.820463,55.9469684 196.888904,59.872974 Z M147.155798,10.7062783 L105.024815,52.8372609 L147.155798,94.9682436 L189.28678,52.8372609 L147.155798,10.7062783 Z M72.1896365,199.993059 L11.1060979,199.993059 C4.96997871,199.993059 0,195.02308 0,188.886961 L0,127.803422 C0,121.672856 4.96997871,116.697324 11.1060979,116.697324 L72.1896365,116.697324 C78.3202027,116.697324 83.2957346,121.672856 83.2957346,127.803422 L83.2957346,188.886961 C83.2957346,195.02308 78.3202027,199.993059 72.1896365,199.993059 Z M72.1896365,127.803422 L11.1060979,127.803422 L11.1060979,188.886961 L72.1896365,188.886961 L72.1896365,127.803422 Z M72.1896365,100.038177 L11.1060979,100.038177 C4.96997871,100.038177 0,95.0681984 0,88.9320793 L0,27.8485406 C0,21.7179744 4.96997871,16.7424426 11.1060979,16.7424426 L72.1896365,16.7424426 C78.3202027,16.7424426 83.2957346,21.7179744 83.2957346,27.8485406 L83.2957346,88.9320793 C83.2957346,95.0681984 78.3202027,100.038177 72.1896365,100.038177 Z M72.1896365,27.8485406 L11.1060979,27.8485406 L11.1060979,88.9320793 L72.1896365,88.9320793 L72.1896365,27.8485406 Z M111.060979,116.697324 L172.144518,116.697324 C178.275084,116.697324 183.250616,121.672856 183.250616,127.803422 L183.250616,188.886961 C183.250616,195.02308 178.275084,199.993059 172.144518,199.993059 L111.060979,199.993059 C104.92486,199.993059 99.9548814,195.02308 99.9548814,188.886961 L99.9548814,127.803422 C99.9548814,121.672856 104.92486,116.697324 111.060979,116.697324 Z M111.060979,188.886961 L172.144518,188.886961 L172.144518,127.803422 L111.060979,127.803422 L111.060979,188.886961 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -52,7 +52,7 @@ export default {
 <style lang="scss" scoped>
 .app-main {
  background-color: #f3f3f4;
-  height: 100vh !important;
+  height: 100% !important;
  width: 100%;
  position: relative;
  overflow: auto;
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -124,7 +124,7 @@ export default {
      }
    },
    cloneNameSuffix: {
-      type: String,
+      type: [String, Number],
      default: function() {
        return this.$t('Duplicate').toLowerCase()
      }
@@ -372,7 +372,7 @@ export default {
            name = object['hostname']
            attr = 'hostname'
          }
-          object[attr] = name + '-' + this.cloneNameSuffix
+          object[attr] = name + '-' + this.cloneNameSuffix.toString()
        } else {
          object = await this.getObjectDetail(this.iUrl)
        }
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -71,7 +71,7 @@ export default {
    },
    async logout() {
      const currentOrg = this.$store.getters.currentOrg
-      if (currentOrg.autoEnter || currentOrg.is_system) {
+      if (currentOrg.autoEnter) {
        await this.$store.dispatch('users/setCurrentOrg', this.$store.getters.preOrg)
      }
      window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
--- a/src/layout/components/NavHeader/Language.vue
+++ b/src/layout/components/NavHeader/Language.vue
@@ -25,6 +25,7 @@ export default {
    return {
      langCookeName: 'django_language', // 后端Django需要的COOKIE KEY
      supportLanguages: [],
+      currentLangCode: '',
      defaultLang: {
        title: 'English',
        code: 'en',
@@ -40,25 +41,41 @@ export default {
      }, {})
    },
    currentLang() {
-      const lang = getLangCode(true)
-      return this.supportedLangMapper[lang] || this.defaultLang
+      const lang = this.supportedLangMapper[this.currentLangCode] || this.defaultLang
+      return lang
    }
  },
  mounted() {
+    this.currentLangCode = getLangCode()
    this.supportLanguages = store.getters.publicSettings['LANGUAGES'].map(item => {
+      let code = item.code.replace('-', '_')
+      if (code !== 'zh_hant') {
+        code = code.slice(0, 2)
+      }
      return {
        title: item.name,
-        code: item.code,
+        code: code,
        cookieCode: item.code
      }
    })
    this.changeMomentLang()
  },
  methods: {
+    changeLang() {
+      if (this.currentLang.code !== this.$i18n.locale) {
+        this.changeLangTo(this.currentLang)
+      }
+    },
    changeMomentLang() {
-      const lang = getLangCode()
-      this.$moment.locale(lang)
-      document.documentElement.lang = lang
+      if (this.currentLang.code.indexOf('en') > -1) {
+        this.$moment.locale('en')
+      } else if (this.currentLang.code.indexOf('ja') > -1) {
+        this.$moment.locale('ja')
+      } else if (this.currentLang.code.indexOf('zh_hant') > -1) {
+        this.$moment.locale('zh-tw')
+      } else {
+        this.$moment.locale('zh-cn')
+      }
    },
    changeLangTo(item) {
      this.$axios.get(`/core/i18n/${item.cookieCode}/`).then(() => {
--- a/src/layout/components/NavHeader/Organization.vue
+++ b/src/layout/components/NavHeader/Organization.vue
@@ -82,7 +82,7 @@ export default {
        ]
      }
      const hasPerms = this.$hasPerm('orgs.view_organization | orgs.add_organization')
-      const isConsole = this.currentViewRoute.name === 'console'
+      const isConsole = ['console'].includes(this.currentViewRoute.name)
      return hasPerms && isConsole ? orgActions : {}
    },
    orgChoicesGroup() {
--- a/src/layout/components/NavHeader/ViewSwitcher.vue
+++ b/src/layout/components/NavHeader/ViewSwitcher.vue
@@ -115,6 +115,7 @@ export default {
        this.tipHasRead = '1'
        this.iShowTip = false
      }
+      console.log('Route to: ', routeName)
      this.$router.push(routeName)
      this.$emit('view-change', routeName)
    }
--- a/src/layout/components/NavHeader/index.vue
+++ b/src/layout/components/NavHeader/index.vue
@@ -24,7 +24,7 @@
      <li class="header-item active-menu">
        <Help />
      </li>
-      <li class="header-item">
+      <li v-if="!isMobile" class="header-item language">
        <Language />
      </li>
      <li class="header-item header-profile">
@@ -76,7 +76,7 @@ export default {
  },
  computed: {
    ...mapGetters([
-      'sidebar', 'publicSettings', 'currentOrgRoles', 'currentViewRoute'
+      'sidebar', 'publicSettings', 'currentOrgRoles', 'currentViewRoute', 'isMobile'
    ]),
    ticketsEnabled() {
      return this.publicSettings['TICKETS_ENABLED'] &&
@@ -176,7 +176,7 @@ export default {

        // 未找到与之对应的
        & ::v-deep .el-submenu__title {
-          font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+          font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
          padding: 0 8px;
          line-height: $headerHeight;
          height: $headerHeight;
--- a/src/layout/components/NavLeft/Item.vue
+++ b/src/layout/components/NavLeft/Item.vue
@@ -17,14 +17,6 @@ export default {
    const { icon, title } = context.props
    const vNodes = []

-    const ellipsisStyle = {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      width: '100%',
-      display: 'inline-block'
-    }
-
    if (icon) {
      if (icon.startsWith('fa-')) {
        vNodes.push(<i class={`fa ${icon}`} />)
@@ -34,7 +26,7 @@ export default {
    }

    if (title) {
-      vNodes.push(<span slot='title' style={ellipsisStyle} title={ title }>{title}</span>)
+      vNodes.push(<span slot='title'>{title}</span>)
    }
    return vNodes
  }
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -12,9 +12,9 @@
            trigger="hover"
          >
            <span slot="reference" style="width: 100%">
-              <el-tooltip v-show="!isCollapse" :content="isRouteMeta.title" :open-delay="1000" placement="bottom" effect="dark" class="view-title">
-                <span class="text-overflow">{{ isRouteMeta.title || '' }}</span>
-              </el-tooltip>
+              <span v-show="!isCollapse" class="view-title">
+                {{ isRouteMeta.title || '' }}
+              </span>
              <span class="icon-zone">
                <svg-icon class="icon" icon-class="switch" />
              </span>
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -116,6 +116,7 @@ export default {

 <style lang="scss" scoped>
 .page {
+  height: calc(100vh - 50px);
  overflow-y: hidden;
  overflow-x: hidden;

@@ -131,6 +132,7 @@ export default {

    ::v-deep > div {
      margin-bottom: 50px;
+      height: 100%;
    }
  }
 }
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -193,14 +193,14 @@ export default {
  }

  ::v-deep .page-content {
-    overflow-y: hidden;
+    overflow-y: hidden !important;
    padding: 0;
  }

  .tab-page-content {
    padding: 10px 30px 22px;
    overflow-y: auto;
-    height: calc(100% - 50px);
+    height: calc(100vh - 130px);

    .el-alert {
      margin-top: 0;
--- a/src/main.js
+++ b/src/main.js
@@ -92,6 +92,15 @@ new Vue({
  i18n,
  router,
  store,
+  mounted() {
+    // 移除加载页面
+    const loadingElement = document.getElementById('loading')
+    if (loadingElement) {
+      setTimeout(() => {
+        loadingElement.style.display = 'none'
+      }, 500)
+    }
+  },
  render: h => h(App)
 })

--- a/src/router/audit/audits.js
+++ b/src/router/audit/audits.js
@@ -80,5 +80,15 @@ export default [
        }
      }
    ]
+  },
+  {
+    path: 'job-execution-log',
+    name: 'JobExecutionLog',
+    component: () => import('@/views/audits/JobExecutionLogList'),
+    meta: {
+      title: i18n.t('JobExecutionLog'),
+      icon: 'task',
+      permissions: ['audits.view_joblog']
+    }
  }
 ]
--- a/src/router/audit/index.js
+++ b/src/router/audit/index.js
@@ -3,7 +3,6 @@ import i18n from '@/i18n/i18n'

 import SessionRoutes from './sessions'
 import LogRoutes from './audits'
-import JobRoutes from './jobs'
 import empty from '@/layout/empty'
 import store from '@/store'

@@ -55,18 +54,6 @@ export default {
        permissions: []
      },
      children: LogRoutes
-    },
-    {
-      path: '/audit/jobs',
-      component: empty,
-      redirect: '',
-      name: 'AuditsJobs',
-      meta: {
-        title: i18n.t('JobsAudit'),
-        icon: 'job',
-        permissions: ['audits.view_joblog']
-      },
-      children: JobRoutes
    }
  ]
 }
--- a/src/router/audit/jobs.js
+++ b/src/router/audit/jobs.js
@@ -1,53 +0,0 @@
-import i18n from '@/i18n/i18n'
-import empty from '@/layout/empty'
-
-export default [
-  {
-    path: 'job-list',
-    name: 'JobList',
-    component: empty,
-    redirect: {
-      name: 'JobList'
-    },
-    meta: {
-      title: i18n.t('JobList'),
-      icon: 'task',
-      permissions: ['audits.view_joblog']
-    },
-    children: [
-      {
-        path: '',
-        name: 'AuditJobList',
-        component: () => import('@/views/audits/JobPeriodTaskList'),
-        meta: {
-          title: i18n.t('JobList'),
-          permissions: []
-        }
-      }
-    ]
-  },
-  {
-    path: 'job-execution-log',
-    name: 'JobExecutionLog',
-    component: empty,
-    redirect: {
-      name: 'AuditJobExecutionLog'
-    },
-    meta: {
-      title: i18n.t('JobExecutionLog'),
-      icon: 'history',
-      permissions: ['audits.view_joblog']
-    },
-    children: [
-      {
-        path: '',
-        name: 'AuditJobExecutionLog',
-        component: () => import('@/views/audits/JobExecutionLogList'),
-        meta: {
-          title: i18n.t('JobExecutionLog'),
-          permissions: ['audits.view_joblog']
-        }
-      }
-    ]
-  }
-]
--- a/src/router/console/accounts.js
+++ b/src/router/console/accounts.js
@@ -67,382 +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/index.vue'),
-        name: 'AccountTemplateDetail',
-        meta: { title: i18n.t('AccountTemplate') },
-        hidden: true
-      }
-    ]
-  },
-  {
-    path: 'automations',
-    component: empty,
-    name: 'AccountAutomation',
-    meta: {
-      title: i18n.t('Automations'),
-      name: 'Automations',
-      icon: 'automation',
-      permissions: []
-    },
-    children: [
-      {
-        path: 'account-push',
-        name: 'AccountPush',
-        component: empty,
-        redirect: {
-          name: 'AccountPushList'
-        },
-        meta: {
-          app: 'accounts',
-          name: 'BaseAccountPushList',
-          resource: 'pushaccountautomation'
-        },
-        children: [
-          {
-            path: '',
-            component: () => import('@/views/accounts/AccountPush/index.vue'),
-            name: 'AccountPushList',
-            meta: {
-              title: i18n.t('AccountPushList'),
-              menuTitle: i18n.t('AccountPushList'),
-              permissions: ['accounts.view_pushaccountautomation']
-            }
-          },
-          {
-            path: 'create',
-            component: () => import('@/views/accounts/AccountPush/AccountPushCreateUpdate.vue'),
-            name: 'AccountPushCreate',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountPushCreate'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.add_pushaccountautomation']
-            }
-          },
-          {
-            path: ':id/update',
-            component: () => import('@/views/accounts/AccountPush/AccountPushCreateUpdate.vue'),
-            name: 'AccountPushUpdate',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountPushUpdate'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.change_pushaccountautomation']
-            }
-          },
-          {
-            path: ':id',
-            component: () => import('@/views/accounts/AccountPush/AccountPushDetail/index.vue'),
-            name: 'AccountPushDetail',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountPushList'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_pushaccountautomation']
-            }
-          },
-          {
-            path: 'executions',
-            component: () => import('@/views/accounts/AccountPush/AccountPushExecutionList.vue'),
-            name: 'AccountPushExecutionList',
-            hidden: true,
-            meta: {
-              title: i18n.t('ExecutionList'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_pushaccountexecution']
-            }
-          },
-          {
-            path: 'executions/:id',
-            component: () => import('@/views/accounts/AccountPush/AccountPushExecutionDetail/index.vue'),
-            name: 'AccountPushExecutionDetail',
-            hidden: true,
-            meta: {
-              title: i18n.t('ExecutionDetail'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_pushaccountexecution']
-            }
-          }
-        ]
-      },
-      {
-        path: 'account-change-secret',
-        name: 'AccountChangeSecret',
-        component: empty,
-        redirect: {
-          name: 'AccountChangeSecretList'
-        },
-        meta: {
-          title: i18n.t('BaseAccountChangeSecret'),
-          app: 'accounts',
-          licenseRequired: true
-        },
-        children: [
-          {
-            path: '',
-            component: () => import('@/views/accounts/AccountChangeSecret/index.vue'),
-            name: 'AccountChangeSecretList',
-            meta: {
-              menuTitle: i18n.t('ChangeCredentials'),
-              title: i18n.t('AccountChangeSecret'),
-              permissions: ['accounts.view_changesecretautomation']
-            }
-          },
-          {
-            path: 'create',
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretCreateUpdate.vue'),
-            name: 'AccountChangeSecretCreate',
-            hidden: true,
-            meta: {
-              title: i18n.t('AssetChangeSecretCreate'),
-              permissions: ['accounts.add_changesecretautomation']
-            }
-          },
-          {
-            path: ':id/update',
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretCreateUpdate.vue'),
-            name: 'AccountChangeSecretUpdate',
-            hidden: true,
-            meta: {
-              title: i18n.t('AssetChangeSecretUpdate'),
-              permissions: ['accounts.change_changesecretautomation']
-            }
-          },
-          {
-            path: ':id',
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/index.vue'),
-            name: 'AccountChangeSecretDetail',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountChangeSecret'),
-              permissions: ['accounts.view_changesecretautomation']
-            }
-          },
-          {
-            path: 'executions',
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue'),
-            name: 'AccountChangeSecretExecutionList',
-            hidden: true,
-            meta: {
-              title: i18n.t('ExecutionList'),
-              permissions: ['accounts.view_changesecretexecution']
-            }
-          },
-          {
-            path: 'executions/:id',
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/index.vue'),
-            name: 'AccountChangeSecretExecutionDetail',
-            hidden: true,
-            meta: {
-              title: i18n.t('ExecutionDetail'),
-              permissions: ['accounts.view_changesecretexecution']
-            }
-          }
-        ]
-      },
-      {
-        path: 'account-gather',
-        component: empty,
-        redirect: {
-          name: 'AccountGatherList'
-        },
-        name: 'AccountGather',
-        meta: {
-          title: i18n.t('AccountGatherList'),
-          app: 'accounts',
-          // activeMenu: '/console/accounts/automations',
-          licenseRequired: true
-        },
-        children: [
-          {
-            path: '',
-            component: () => import('@/views/accounts/AccountGather/index.vue'),
-            name: 'AccountGatherList',
-            meta: {
-              menuTitle: i18n.t('GatherAccounts'),
-              title: i18n.t('AccountGatherTaskList'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_gatheredaccount']
-            }
-          },
-          {
-            path: 'create',
-            component: () => import('@/views/accounts/AccountGather/TaskCreateUpdate'),
-            name: 'AccountGatherTaskCreate',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountGatherTaskCreate'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.add_gatheraccountsautomation']
-            }
-          },
-          {
-            path: ':id',
-            component: () => import('@/views/accounts/AccountGather/TaskDetail/index'),
-            name: 'AccountGatherTaskDetail',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountGatherTaskDetail'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_gatheraccountsautomation']
-            }
-          },
-          {
-            path: ':id/update',
-            component: () => import('@/views/accounts/AccountGather/TaskCreateUpdate'),
-            name: 'AccountGatherTaskUpdate',
-            hidden: true,
-            meta: {
-              title: i18n.t('AccountGatherTaskUpdate'),
-              action: 'update',
-              permissions: ['accounts.change_gatheraccountsautomation'],
-              activeMenu: '/accounts/account-gather'
-            }
-          },
-          {
-            path: 'executions',
-            component: () => import('@/views/accounts/AccountGather/TaskDetail/TaskExecutionList.vue'),
-            name: 'AccountGatherTaskExecutionList',
-            hidden: true,
-            meta: {
-              title: i18n.t('ExecutionList'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_gatheraccountsexecution']
-            }
-          },
-          {
-            path: 'executions/:id',
-            component: () => import('@/views/accounts/AccountGather/TaskDetail/AccountGatherExecutionDetail/index.vue'),
-            name: 'AccountGatherExecutionDetail',
-            hidden: true,
-            meta: {
-              title: i18n.t('ExecutionDetail'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_gatheraccountsexecution']
-            }
-          }
-        ]
-      },
-      {
-        path: 'account-backup',
-        component: empty,
-        name: 'AccountBackup',
-        redirect: {
-          name: 'AccountBackupList'
-        },
-        meta: {
-          title: i18n.t('AccountBackup'),
-          app: 'accounts',
-          resource: 'accountbackupautomation',
-          licenseRequired: true
-        },
-        children: [
-          {
-            path: '',
-            component: () => import('@/views/accounts/AccountBackup/index.vue'),
-            name: 'AccountBackupList',
-            meta: {
-              menuTitle: i18n.t('AccountBackup'),
-              title: i18n.t('AccountBackupList'),
-              // activeMenu: '/console/accounts/automations',
-              permissions: ['accounts.view_accountbackupautomation']
-            }
-          },
-          {
-            path: 'create',
-            component: () => import('@/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue'),
-            name: 'AccountBackupCreate',
-            meta: {
-              title: i18n.t('AccountBackupCreate'),
-              // activeMenu: '/console/accounts/automations',
-              action: 'create'
-            },
-            hidden: true
-          },
-          {
-            path: ':id/update',
-            component: () => import('@/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue'),
-            name: 'AccountBackupUpdate',
-            meta: {
-              title: i18n.t('AccountBackupUpdate'),
-              // activeMenu: '/console/accounts/automations',
-              action: 'update'
-            },
-            hidden: true
-          },
-          {
-            path: ':id',
-            component: () => import('@/views/accounts/AccountBackup/AccountBackupDetail/index.vue'),
-            name: 'AccountBackupDetail',
-            // activeMenu: '/console/accounts/automations',
-            meta: {
-              title: i18n.t('AccountBackupDetail'),
-              activeMenu: '/console/accounts/automations'
-            },
-            hidden: true
-          },
-          {
-            path: 'executions',
-            component: () => import('@/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupExecution/AccountBackupExecutionList.vue'),
-            name: 'AccountBackupExecutionList',
-            meta: { title: i18n.t('ExecutionDetail') },
-            hidden: true
-          },
-          {
-            path: 'executions/:id',
-            component: () => import('@/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupExecution/AccountBackupExecutionDetail/index.vue'),
-            name: 'AccountBackupExecutionDetail',
-            meta: { title: i18n.t('ExecutionDetail') },
-            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
+  //     }
+  //   ]
+  // }
 ]
--- a/src/router/console/assets.js
+++ b/src/router/console/assets.js
@@ -2,6 +2,7 @@ import i18n from '@/i18n/i18n'
 import empty from '@/layout/empty'
 import XPackRoutes from './xpack'

+const globalSubmenu = () => import('@/layout/globalOrg.vue')
 export default [
  {
    path: 'assets',
@@ -293,11 +294,12 @@ export default [
  },
  {
    path: 'platforms',
-    component: empty,
+    component: globalSubmenu,
    meta: {
      permissions: ['assets.view_platform'],
      resource: 'platform',
-      icon: 'platform'
+      icon: 'platform',
+      disableOrgsChange: true
    },
    redirect: '',
    children: [
--- a/src/router/console/index.js
+++ b/src/router/console/index.js
@@ -27,7 +27,7 @@ export default {
  children: [
    {
      path: '/console/dashboard',
-      component: () => import('@/views/dashboard/Console/index'),
+      component: () => import('@/views/dashboard/Console/index.vue'),
      name: 'AdminDashboard',
      meta: {
        icon: 'dashboard',
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,7 @@ import workbenchViewRoutes from './workbench'
 import ticketsRoutes from './tickets'
 import settingsRoutes from './settings'
 import profileRoutes from './profile'
+import pamViewRoutes from './pam'
 import { getPropView } from '@/utils/jms'
 import store from '@/store'

@@ -92,6 +93,7 @@ export const viewRoutes = [
  consoleViewRoutes,
  auditViewRoutes,
  workbenchViewRoutes,
+  pamViewRoutes,
  ticketsRoutes,
  settingsRoutes,
  profileRoutes
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
zhaojisen	e44b60a921	style: Optimized style	2024-12-05 10:25:13 +08:00
ibuler	be82fe1bde	Merge branch 'pam' of github.com:jumpserver/lina into pam	2024-12-04 18:34:42 +08:00
ibuler	2e472dad93	perf: update name space	2024-12-04 18:34:10 +08:00
feng	bbfb237f23	perf: Account backup report	2024-12-04 16:30:19 +08:00
feng	390224613a	perf: Change secret report	2024-12-02 19:10:29 +08:00
zhaojisen	7e0c677ad3	perf: Remove back icon	2024-12-02 17:23:04 +08:00
zhaojisen	9936f2b806	perf: Added pam asset drawer	2024-12-02 17:16:46 +08:00
zhaojisen	bfde8bd28b	style: Adjust style	2024-12-02 16:07:24 +08:00
ibuler	4b309d950c	Merge branch 'pam' of github.com:jumpserver/lina into pam	2024-12-02 15:20:41 +08:00
zhaojisen	688f06ebac	style: Adjust style	2024-12-02 14:26:02 +08:00
ibuler	6fb3b552eb	perf: pam update	2024-12-02 14:24:28 +08:00
feng	f27e7bdad4	perf: Change secret record table dashboard	2024-12-02 11:37:49 +08:00
fit2bot	2ee139c92b	perf: Change secret dashboard (#4473 ) * perf: Change secret dashboard * style: Modify layout --------- Co-authored-by: feng <1304903146@qq.com> Co-authored-by: zhaojisen <1301338853@qq.com>	2024-12-02 10:33:46 +08:00
fit2bot	7a6c156aaa	feat: PAM Service (#4474 ) * feat: PAM Service * perf: Remove useless * perf: Add go module download value --------- Co-authored-by: jiangweidong <1053570670@qq.com>	2024-12-02 10:33:13 +08:00
zhaojisen	11d40b4be1	perf: Add pam template	2024-11-28 18:05:04 +08:00
wangruidong	b772580f99	feat: Add Account Activity List	2024-11-28 17:02:11 +08:00
zhaojisen	fafdb6be5b	perf: Basic drawer show	2024-11-28 10:48:37 +08:00
ibuler	2f984530e3	perf: update handler	2024-11-27 19:38:58 +08:00
ibuler	68b39bbc3d	Merge branch 'pam' of github.com:jumpserver/lina into pam	2024-11-25 17:16:42 +08:00
ibuler	d21dc57305	perf: update pam	2024-11-25 17:16:09 +08:00
zhaojisen	c58d826898	fixed: Change path naming method	2024-11-22 15:00:11 +08:00
zhaojisen	7e80361635	perf: Add pam connect	2024-11-22 15:00:11 +08:00
ibuler	b25d2016a6	perf: using checkbox replace switch	2024-11-18 14:35:43 +08:00
ibuler	636630fe57	perf: update pam	2024-11-14 19:01:25 +08:00
ibuler	e18726efc2	perf: update accout check	2024-11-13 18:46:24 +08:00
ibuler	823c26aa5e	Merge branch 'pam' of github.com:jumpserver/lina into pam	2024-11-13 11:03:05 +08:00
ibuler	c0c9d56408	perf: 修改 pam	2024-11-13 11:02:04 +08:00
zhaojisen	ff4adde897	perf: Add pam connect	2024-11-11 18:38:01 +08:00
ibuler	45ae7cab21	perf: 阶段完成页面	2024-11-06 16:40:35 +08:00
ibuler	429f5aed90	perf: change table	2024-11-05 17:20:46 +08:00
ibuler	d8999ffc06	perf: update icon	2024-11-05 17:08:37 +08:00
ibuler	fd745f0a26	perf: update account risk list	2024-11-04 18:41:20 +08:00
ibuler	322d12f27f	perf: update accout check	2024-11-01 19:06:39 +08:00
ibuler	a1bc8ac5bc	perf: update accout check	2024-11-01 18:04:53 +08:00
ibuler	9271cb2e1a	perf: 更新账号发现	2024-11-01 16:38:21 +08:00
ibuler	0e7c682f72	perf: update gather account	2024-10-29 19:23:29 +08:00
ibuler	c0b4029917	perf: add account status action	2024-10-28 18:57:03 +08:00
ibuler	b1acb62889	perf: update table action	2024-10-25 10:55:35 +08:00
ibuler	26fd9b1813	perf: 更新 quick filter	2024-10-24 14:42:39 +08:00
ibuler	4fabdfdc5f	perf: 完善过滤	2024-10-23 18:52:50 +08:00
ibuler	6e894c31a1	perf: update route	2024-10-22 17:30:30 +08:00
ibuler	d8a6fd96ce	perf: support options	2024-10-21 17:02:22 +08:00
ibuler	7c5c5f966d	perf: asset add account info	2024-10-18 15:21:58 +08:00
ibuler	8b25fd198e	perf: change account	2024-10-16 18:48:37 +08:00
ibuler	762fa4c17e	perf: 完成一些快速筛选	2024-10-15 18:26:53 +08:00
ibuler	73cc319e7b	perf: table action flex	2024-10-15 15:15:46 +08:00
ibuler	d90aba37cf	perf: update loader	2024-10-15 13:58:56 +08:00
ibuler	d775ffa501	perf: format	2024-10-14 18:10:07 +08:00
ibuler	e8cf8347e9	perf: 基本完成框架	2024-10-14 14:49:20 +08:00
ibuler	7ff1da71d4	perf: updat asset list and account list action	2024-10-11 19:22:39 +08:00
ibuler	a23a0d0197	perf: update perm	2024-10-11 17:59:00 +08:00
ibuler	1477712c78	perf: 修改 Pam	2024-09-19 09:57:54 +08:00
ibuler	77a0100add	perf: add pam panel	2024-09-12 18:56:34 +08:00
ibuler	833e44024f	perf: change pkg deps	2024-09-12 11:33:33 +08:00