perf: reports menus

* perf: init report

* perf: stage1

* perf: base report

* perf: change report chatrt

* pref: move dashboard to report

* perf: Update Dockerfile with new base image tag

* perf: change secret to report

* perf: clean utils

* perf: change report

* perf: basic finished

* perf: change card

* perf: rename

* perf: revert name

* perf: revert name

* perf: Update Dockerfile with new base image tag

* perf: Use user report api

* perf: some open draw error

* perf: remote first

* perf: change password

* perf: Update Dockerfile with new base image tag

* perf: translate

* perf: Asset report

* perf: account report

* perf: Translate

* perf: Account automation

* perf: element-ui

* perf: Update Dockerfile with new base image tag

---------

Co-authored-by: ibuler <ibuler@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: w940853815 <940853815@qq.com>
Co-authored-by: feng <1304903146@qq.com>
Co-authored-by: feng626 <57284900+feng626@users.noreply.github.com>

.eslintrc.js

@@ -14,64 +14,97 @@ module.exports = {
     window: true,
     _: true
   },
+  plugins: ['vue', 'spellcheck'],
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    'vue/max-attributes-per-line': [2, {
-      'singleline': 10,
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        singleline: 10,
+        multiline: {
+          max: 1,
+          allowFirstLine: false
+        }
       }
-    }],
+    ],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/name-property-casing': ['error', 'PascalCase'],
     'vue/no-v-html': 'off',
     'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
+    'arrow-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
     'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
+    'brace-style': [
+      2,
+      '1tbs',
+      {
+        allowSingleLine: true
+      }
+    ],
+    camelcase: [
+      0,
+      {
+        properties: 'always'
+      }
+    ],
     'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
+    'comma-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
     'comma-style': [2, 'last'],
     'constructor-super': 2,
-    'curly': [2, 'multi-line'],
+    curly: [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'generator-star-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
     'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1
+      }
+    ],
     'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
+    'key-spacing': [
+      2,
+      {
+        beforeColon: false,
+        afterColon: true
+      }
+    ],
+    'keyword-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'new-cap': [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false
+      }
+    ],
     'new-parens': 2,
     'no-array-constructor': 2,
     'no-caller': 2,
@@ -102,17 +135,23 @@ module.exports = {
     'no-irregular-whitespace': 2,
     'no-iterator': 2,
     'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
+    'no-labels': [
+      2,
+      {
+        allowLoop: false,
+        allowSwitch: false
+      }
+    ],
     'no-lone-blocks': 2,
     'no-mixed-spaces-and-tabs': 2,
     'no-multi-spaces': 2,
     'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
+    'no-multiple-empty-lines': [
+      2,
+      {
+        max: 1
+      }
+    ],
     'no-native-reassign': 2,
     'no-negated-in-lhs': 2,
     'no-new-object': 2,
@@ -140,62 +179,125 @@ module.exports = {
     'no-undef-init': 2,
     'no-unexpected-multiline': 2,
     'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
+    'no-unneeded-ternary': [
+      2,
+      {
+        defaultAssignment: false
+      }
+    ],
     'no-unreachable': 2,
     'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
+    'no-unused-vars': [
+      2,
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
     'no-useless-call': 2,
     'no-useless-computed-key': 2,
     'no-useless-constructor': 2,
     'no-useless-escape': 0,
     'no-whitespace-before-property': 2,
     'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
+    'one-var': [
+      2,
+      {
+        initialized: 'never'
       }
-    }],
+    ],
+    'operator-linebreak': [
+      2,
+      'after',
+      {
+        overrides: {
+          '?': 'before',
+          ':': 'before'
+        }
+      }
+    ],
     'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
     'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
+    'space-before-function-paren': [
+      2,
+      { anonymous: 'never', named: 'never', asyncArrow: 'always' }
+    ],
     'space-in-parens': [2, 'never'],
     'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
+    'space-unary-ops': [
+      2,
+      {
+        words: true,
+        nonwords: false
+      }
+    ],
+    'object-curly-spacing': [2, 'always'],
+    'spaced-comment': [
+      2,
+      'always',
+      {
+        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
+    ],
     'template-curly-spacing': [2, 'never'],
     'use-isnan': 2,
     'valid-typeof': 2,
     'wrap-iife': [2, 'any'],
     'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
+    yoda: [2, 'never'],
     'prefer-const': 2,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
+    'array-bracket-spacing': [2, 'never'],
+    'spellcheck/spell-checker': [
+      'warn',
+      {
+        comments: true,
+        strings: false,
+        identifiers: false,
+        lang: 'en_US',
+        skipWords: [
+          'echarts',
+          'resize',
+          'vue',
+          'eslint',
+          'babel',
+          'jsx',
+          'scss',
+          'v-deep',
+          'calc',
+          'vw',
+          'vh',
+          'px',
+          'rgba',
+          'rgb',
+          'var',
+          'lang',
+          'scoped',
+          'pdf',
+          'rbac'
+        ],
+        skipIfMatch: [
+          'http://[^s]*',
+          '^[-\\w]+/[-\\w\\.]+$' // For import paths
+        ],
+        minLength: 3
+      }
+    ]
   }
 }

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  trailingComma: 'none',
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  endOfLine: 'auto'
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250616_083043 AS stage-build
+FROM jumpserver/lina-base:20250805_081024 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION

mock/index.js

@@ -1,13 +1,25 @@
 import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
 
 import user from './user'
 import table from './table'
 
-const mocks = [
-  ...user,
-  ...table
-]
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}
+
+const mocks = [...user, ...table]
 
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,

package.json

@@ -38,7 +38,8 @@
         "deepmerge": "^4.2.2",
         "dompurify": "^3.1.6",
         "echarts": "4.7.0",
-        "element-ui": "2.15.14",
+        "element-ui": "^2.15.14",
+        "elementui-lts": "^2.16.0",
         "eslint-plugin-html": "^6.0.0",
         "highlight.js": "^11.9.0",
         "install": "^0.13.0",
@@ -103,8 +104,8 @@
         "compression-webpack-plugin": "^6.1.1",
         "connect": "3.6.6",
         "deasync": "^0.1.29",
-        "element-theme-chalk": "^2.13.1",
         "eslint": "^5.15.3",
+        "eslint-plugin-spellcheck": "^0.0.20",
         "eslint-plugin-vue": "5.2.2",
         "eslint-plugin-vue-i18n": "^0.3.0",
         "github-markdown-css": "^5.1.0",
@@ -113,6 +114,7 @@
         "less-loader": "^5.0.0",
         "lint-staged": "^10.1.2",
         "mockjs": "1.0.1-beta3",
+        "pretty-bytes": "^5.6.0",
         "runjs": "^4.3.2",
         "sass": "~1.32.6",
         "sass-loader": "^7.1.0",

src/assets/img/cloud/proxmox.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752631175762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4421" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M93.866667 234.666667c-34.133333 12.8-51.2 25.6-51.2 34.133333 0 4.266667 51.2 64 115.2 136.533333 64 68.266667 115.2 128 115.2 128s-51.2 59.733333-115.2 128C93.866667 729.6 42.666667 793.6 42.666667 797.866667c4.266667 17.066667 59.733333 42.666667 98.133333 42.666666 64 0 81.066667-12.8 217.6-162.133333 68.266667-76.8 128-140.8 128-140.8 0-4.266667-55.466667-64-123.733333-140.8-85.333333-102.4-132.266667-145.066667-153.6-157.866667-29.866667-12.8-81.066667-17.066667-115.2-4.266666z m725.333333 4.266666c-21.333333 8.533333-68.266667 59.733333-153.6 153.6-68.266667 76.8-123.733333 140.8-123.733333 140.8 0 4.266667 55.466667 68.266667 128 140.8 136.533333 153.6 153.6 162.133333 217.6 162.133334 42.666667 0 98.133333-21.333333 98.133333-42.666667 0-4.266667-51.2-68.266667-115.2-136.533333-64-68.266667-115.2-128-115.2-128s51.2-59.733333 115.2-128c64-68.266667 115.2-128 115.2-136.533334-4.266667-17.066667-55.466667-38.4-98.133333-38.4-34.133333 0-46.933333 4.266667-68.266667 12.8z" fill="#E57000" p-id="4422"></path><path d="M238.933333 136.533333c-42.666667 21.333333-42.666667 25.6-4.266666 68.266667 221.866667 243.2 273.066667 302.933333 277.333333 302.933333 4.266667 0 311.466667-332.8 315.733333-341.333333 0-4.266667-8.533333-12.8-21.333333-21.333333-17.066667-12.8-34.133333-17.066667-68.266667-17.066667-64-4.266667-85.333333 8.533333-162.133333 93.866667-34.133333 38.4-64 72.533333-64 72.533333s-29.866667-29.866667-64-68.266667c-34.133333-38.4-72.533333-76.8-89.6-85.333333-25.6-17.066667-89.6-21.333333-119.466667-4.266667zM354.133333 725.333333c-85.333333 93.866667-153.6 170.666667-153.6 174.933334 0 4.266667 8.533333 12.8 21.333334 21.333333 17.066667 12.8 34.133333 17.066667 68.266666 17.066667 59.733333 4.266667 85.333333-8.533333 162.133334-98.133334 34.133333-38.4 64-68.266667 64-68.266666s29.866667 29.866667 64 68.266666c81.066667 89.6 98.133333 102.4 162.133333 98.133334 34.133333 0 51.2-4.266667 68.266667-17.066667 12.8-8.533333 21.333333-17.066667 21.333333-21.333333-4.266667-8.533333-311.466667-345.6-315.733333-341.333334-8.533333 0-76.8 76.8-162.133334 166.4z" p-id="4423"></path></svg>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -1,5 +1,6 @@
 import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
 
@@ -15,17 +16,11 @@ export const accountFieldsMeta = (vm) => {
 
   return {
     assets: {
-      component: Select2,
+      component: AssetSelect,
       label: vm.$t('Asset'),
       rules: [Required],
       el: {
-        multiple: true,
-        ajax: {
-          url: '/api/v1/assets/assets/',
-          transformOption: (item) => {
-            return { label: item.name + '(' + item.address + ')', value: item.id }
-          }
-        }
+        multiple: false
       },
       hidden: () => {
         return vm.platform || vm.asset

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -11,7 +11,7 @@
 
 <script>
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
 
 export default {

src/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue

@@ -11,7 +11,7 @@
 <script>
 import { GenericUpdateFormDialog } from '@/layout/components'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'AccountBulkUpdateDialog',

src/components/Apps/AccountListTable/AccountList.vue

@@ -52,7 +52,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 import {
   AccountConnectFormatter,
   ActionsFormatter,
@@ -341,7 +341,7 @@ export default {
             can: () => {
               return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
-            callback: async() => {
+            callback: async () => {
               await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
@@ -362,7 +362,7 @@ export default {
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 &&
                 ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                !this.$store.getters.currentOrgIsRoot
+                !this.$store.getters.currentOrgIsRoot && vm.$hasPerm('accounts.verify_account')
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
@@ -478,7 +478,7 @@ export default {
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
-      const { query: { asset }} = this.$route
+      const { query: { asset } } = this.$route
       if (asset) {
         this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
       }

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -12,7 +12,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'RemoveAccount',

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -23,7 +23,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
 
 export default {

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -61,7 +61,7 @@
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'ShowSecretInfo',

src/components/Apps/AccountListTable/const.js

@@ -1,5 +1,5 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export const connectivityMeta = {
   formatter: ChoicesFormatter,
@@ -40,7 +40,7 @@ export function isDirectoryServiceAccount(account, vm) {
   return vm.asset && vm.asset.id !== account.asset.id
 }
 
-export const accountOtherActions = (vm) => {
+export const accountOtherActions = vm => {
   return [
     {
       name: 'View',
@@ -62,9 +62,11 @@ export const accountOtherActions = (vm) => {
       name: 'Update',
       title: vm.$t('Edit'),
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
+        return (
+          vm.$hasPerm('accounts.change_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       callback: ({ row }) => {
         vm.isUpdateAccount = true
@@ -85,9 +87,11 @@ export const accountOtherActions = (vm) => {
       name: 'UpdateSecret',
       title: vm.$t('EditSecret'),
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
+        return (
+          vm.$hasPerm('accounts.change_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       callback: ({ row }) => {
         const data = {
@@ -110,9 +114,11 @@ export const accountOtherActions = (vm) => {
         return !vm.asset
       },
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
+        return (
+          vm.$hasPerm('accounts.add_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       callback: ({ row }) => {
         vm.account = {
@@ -138,29 +144,26 @@ export const accountOtherActions = (vm) => {
         row.asset['auto_config'].ansible_enabled &&
         row.asset['auto_config'].ping_enabled,
       callback: ({ row }) => {
-        vm.$axios.post(
-          `/api/v1/accounts/accounts/tasks/`,
-          { action: 'verify', accounts: [row.id] }
-        ).then(res => {
-          openTaskPage(res['task'])
-        })
+        vm.$axios
+          .post(`/api/v1/accounts/accounts/tasks/`, { action: 'verify', accounts: [row.id] })
+          .then(res => {
+            openTaskPage(res['task'])
+          })
       }
     },
     {
       name: 'ClearSecret',
       title: vm.$t('ClearSecret'),
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
-          !isDirectoryServiceAccount(row, vm)
+        return vm.$hasPerm('accounts.change_account') && !isDirectoryServiceAccount(row, vm)
       },
       type: 'primary',
       callback: ({ row }) => {
-        vm.$axios.patch(
-          `/api/v1/accounts/accounts/clear-secret/`,
-          { account_ids: [row.id] }
-        ).then(() => {
-          vm.$message.success(vm.$tc('ClearSuccessMsg'))
-        })
+        vm.$axios
+          .patch(`/api/v1/accounts/accounts/clear-secret/`, { account_ids: [row.id] })
+          .then(() => {
+            vm.$message.success(vm.$tc('ClearSuccessMsg'))
+          })
       }
     },
     {
@@ -184,9 +187,11 @@ export const accountOtherActions = (vm) => {
       type: 'primary',
       divided: true,
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
+        return (
+          vm.$hasPerm('accounts.add_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       has: () => {
         return !vm.asset
@@ -204,9 +209,11 @@ export const accountOtherActions = (vm) => {
       title: vm.$t('MoveToAsset'),
       type: 'primary',
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
+        return (
+          vm.$hasPerm('accounts.delete_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       has: () => {
         return !vm.asset
@@ -222,7 +229,7 @@ export const accountOtherActions = (vm) => {
   ]
 }
 
-export const accountQuickFilters = (vm) => [
+export const accountQuickFilters = vm => [
   {
     label: vm.$t('Recent (7 days)'),
     options: [

src/components/Apps/AssetTreeTable/index.vue

@@ -20,7 +20,7 @@
 
 <script>
 import TreeTable from '../../Table/TreeTable/index.vue'
-import { setRouterQuery, setUrlParam } from '@/utils/common'
+import { setRouterQuery, setUrlParam } from '@/utils/common/index'
 import $ from '@/utils/jquery-vendor'
 
 export default {

src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue

@@ -77,9 +77,9 @@
 <script>
 import MessageText from './MessageText.vue'
 import { mapGetters, mapState } from 'vuex'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
-import { reconnect } from '@/utils/socket'
+import { reconnect } from '@/utils/request'
 
 const { setLoading, removeLoadingMessageInChat } = useChat()
 

src/components/Apps/ChatAi/components/ChitChat/MessageText.vue

@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
 import mila from 'markdown-it-link-attributes'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 
 export default {
   props: {
@@ -69,7 +69,7 @@ export default {
           return vm.highlightBlock(hljs.highlightAuto(code).value, '')
         }
       })
-      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' }})
+      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' } })
       this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
     },
     highlightBlock(str, lang) {

src/components/Apps/ChatAi/components/ChitChat/index.vue

@@ -37,7 +37,7 @@
 import ChatInput from './ChatInput.vue'
 import ChatMessage from './ChatMessage.vue'
 import { mapState } from 'vuex'
-import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
+import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/request'
 import { getInputFocus, useChat } from '../../useChat.js'
 
 const {

src/components/Apps/ChatAi/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DrawerPanel
+    v-if="visible"
     ref="drawer"
     :default-show-panel="!!defaultShowPanel"
     :expanded="expanded"
@@ -45,9 +46,10 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
-import { ws } from '@/utils/socket'
+import { ws } from '@/utils/request'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
 import { ObjectLocalStorage } from '@/utils/common'
+import { mapGetters } from 'vuex'
 
 const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
@@ -74,6 +76,7 @@ export default {
   },
   data() {
     return {
+      visible: false,
       active: 'chat',
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
@@ -82,14 +85,44 @@ export default {
       currentTerminalContent: {}
     }
   },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ])
+  },
   watch: {
+    'publicSettings.CHAT_AI_METHOD': {
+      handler(newVal) {
+        this.visible = newVal === 'api'
+      }
+    }
   },
   mounted() {
-    const expanded = aiPannelLocalStorage.get('expanded')
-    this.updateExpandedState(expanded)
-    this.handlePostMessage()
+    this.handleStartChat()
   },
   methods: {
+    handleStartChat() {
+      if (this.publicSettings.CHAT_AI_METHOD === 'api') {
+        this.visible = true
+        const expanded = aiPannelLocalStorage.get('expanded')
+        this.updateExpandedState(expanded)
+        this.handlePostMessage()
+      } else if (this.publicSettings.CHAT_AI_METHOD === 'embed') {
+        const embedScriptId = 'chat-ai-embed-id'
+        if (document.getElementById(embedScriptId)) {
+          return
+        }
+        const script = document.createElement('script')
+        script.id = embedScriptId
+        script.src = this.publicSettings.CHAT_AI_EMBED_URL
+        script.async = true
+        script.onload = () => {
+          const loadEvent = new Event('load', { bubbles: false, cancelable: false })
+          window.dispatchEvent(loadEvent)
+        }
+        document.body.appendChild(script)
+      }
+    },
     handlePostMessage() {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {

src/components/Apps/ChatAi/useChat.js

@@ -1,5 +1,5 @@
 import store from '@/store'
-import { pageScroll } from '@/utils/common'
+import { pageScroll } from '@/utils/common/index'
 
 export const getInputFocus = () => {
   const dom = document.querySelector('.chat-input .el-textarea__inner')
@@ -9,11 +9,11 @@ export const getInputFocus = () => {
 export function useChat() {
   const chatStore = {}
 
-  const setLoading = (loading) => {
+  const setLoading = loading => {
     store.commit('chat/setLoading', loading)
   }
 
-  const onNewChat = (name) => {
+  const onNewChat = name => {
     const data = {
       name: name || `new chat`,
       id: 1,
@@ -27,7 +27,7 @@ export function useChat() {
     store.commit('chat/clearChats')
   }
 
-  const addMessageToActiveChat = (chat) => {
+  const addMessageToActiveChat = chat => {
     store.commit('chat/addMessageToActiveChat', chat)
   }
 
@@ -35,7 +35,7 @@ export function useChat() {
     store.commit('chat/removeLoadingMessageInChat')
   }
 
-  const addChatMessageById = (chat) => {
+  const addChatMessageById = chat => {
     store.commit('chat/addMessageToActiveChat', chat)
     if (chat?.conversation_id) {
       store.commit('chat/setActiveChatConversationId', chat.conversation_id)
@@ -54,7 +54,7 @@ export function useChat() {
     addChatMessageById(temporaryChat)
   }
 
-  const newChatAndAddMessageById = (chat) => {
+  const newChatAndAddMessageById = chat => {
     onNewChat(chat.message.content)
     addChatMessageById(chat)
   }

src/components/Apps/GatewayTestDialog/index.vue

@@ -34,7 +34,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'GatewayDialog',

src/components/Apps/GrantedAssets/index.vue

@@ -85,6 +85,7 @@ export default {
         hasTree: true,
         columnsExtra: ['view_account'],
         columnsExclude: ['spec_info'],
+        columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
           default: ['name', 'address', 'platform', 'view_account', 'actions']

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
@@ -45,7 +45,7 @@ export default {
               formatter: DetailFormatter,
               formatterArgs: {
                 getRoute: ({ row }) => {
-                  return { name: 'AssetDetail', params: { id: row.id }}
+                  return { name: 'AssetDetail', params: { id: row.id } }
                 }
               }
             },

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 

src/components/Apps/ResourceActivity/index.vue

@@ -30,8 +30,8 @@
 <script>
 import IBox from '@/components/Common/IBox/index.vue'
 import DiffDetail from '@/components/Dialog/DiffDetail.vue'
-import { openTaskPage } from '@/utils/jms'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { openTaskPage } from '@/utils/jms/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {

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"
   >
@@ -124,7 +124,7 @@
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'UserConfirmDialog',
@@ -195,7 +195,7 @@ export default {
       this.$log.debug('perform confirm action')
       const confirmType = response.data?.code
       const confirmUrl = '/api/v1/authentication/confirm/'
-      this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
+      this.$axios.get(confirmUrl, { params: { confirm_type: confirmType } }).then((data) => {
         this.confirmTypeRequired = data.confirm_type
 
         if (this.confirmTypeRequired === 'relogin') {

src/components/Cards/DetailCard/ItemValue.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'ItemValue',

src/components/Cards/DetailCard/auto.vue

@@ -12,8 +12,8 @@
 
 <script>
 import DetailCard from './index.vue'
-import { copy } from '@/utils/common'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { copy } from '@/utils/common/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import IBox from '@/components/Common/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 

src/components/Common/DataActions/index.vue

@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {

src/components/Common/QuickActions/action.vue

@@ -26,7 +26,7 @@
 import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 
 class Action {
   constructor() {

src/components/Dashboard/LineChart.vue

@@ -5,10 +5,16 @@
       :options="options"
       :autoresize="true"
       theme="light"
-      class="disabled-when-print"
-      @finished="getDataUrl"
+      :class="{'disabled-when-print': !!dataUrl}"
+      @finished="genSnapshot"
     />
-    <img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
+    <img
+      v-if="dataUrl"
+      :src="dataUrl"
+      class="enabled-when-print"
+      style="display: none;width: 100%;"
+      alt="chart snapshot"
+    >
   </div>
 </template>
 
@@ -110,7 +116,6 @@ export default {
             },
             axisLabel: {
               textStyle: {
-                // 坐标轴颜色
                 color: '#8F959E'
               }
             },
@@ -155,7 +160,7 @@ export default {
             type: 'line',
             smooth: true,
             areaStyle: {
-            // 区域填充样式
+              // 区域填充样式
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
@@ -187,7 +192,7 @@ export default {
             type: 'line',
             smooth: true,
             areaStyle: {
-            // 区域填充样式
+              // 区域填充样式
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
@@ -220,23 +225,58 @@ export default {
   },
   watch: {
     range() {
-      this.getMetricData()
+      this.genSnapshot()
+    },
+    datesMetrics() {
+      this.genSnapshot()
+    },
+    primaryData() {
+      this.genSnapshot()
+    },
+    secondaryData() {
+      this.genSnapshot()
     }
   },
   mounted() {
-    this.getMetricData()
+    this.genSnapshot()
+    this._before = () => this.genSnapshot(true)
+    this._after = () => this.forceResize()
+    window.addEventListener('beforeprint', this._before)
+    window.addEventListener('afterprint', this._after)
+    // 兼容某些浏览器（Safari）触发 print 媒体切换
+    this._mql = window.matchMedia && window.matchMedia('print')
+    if (this._mql) {
+      const handler = e => (e.matches ? this._before() : this._after())
+      this._mql.addEventListener?.('change', handler)
+      this._mql.addListener?.(handler)
+      this._mql._handler = handler
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeprint', this._before)
+    window.removeEventListener('afterprint', this._after)
+    if (this._mql) {
+      this._mql.removeEventListener?.('change', this._mql._handler)
+      this._mql.removeListener?.(this._mql._handler)
+    }
   },
   methods: {
-    getDataUrl() {
-      const instance = this.$refs.echarts.echartsInstance
-      if (instance) {
-        this.dataUrl = instance.getDataURL()
-      }
+    forceResize() {
+      const inst = this.$refs.echarts?.echartsInstance
+      if (inst) inst.resize()
     },
-    getMetricData() {
-      this.getDataUrl()
+    async genSnapshot(force = false) {
+      if (force) this.forceResize()
+      const inst = this.$refs.echarts?.echartsInstance
+      if (!inst) return
+      try {
+        this.dataUrl = inst.getDataURL({ pixelRatio: 2, backgroundColor: '#ffffff' })
+      } catch (e) {
+        this.dataUrl = ''
+      }
     }
   }
+
 }
 </script>
 
@@ -248,13 +288,11 @@ export default {
 
 @media print {
   .disabled-when-print {
-    display: none;
+    display: none !important;
   }
   .enabled-when-print {
-    display: inherit !important;
-  }
-  .print-margin {
-    margin-top: 10px;
+    display: block !important;
+    width: 100% !important;
   }
 }
 </style>

src/components/Dashboard/RankTable.vue

@@ -9,7 +9,7 @@
       class="table"
       style="width: 100%"
     >
-      <el-table-column :label="$tc('Ranking')">
+      <el-table-column :label="$tc('Ranking')" width="100">
         <template #header>
           <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
             <span style="cursor: pointer;">{{ $t('Ranking') }}</span>

src/components/Dashboard/RingChart.vue

@@ -33,7 +33,7 @@ export default {
 
       const formatTitle = (text) => {
         if (!text) return ''
-        const maxLength = 23
+        const maxLength = 25
         const lines = []
         for (let i = 0; i < text.length; i += maxLength) {
           lines.push(text.slice(i, i + maxLength))
@@ -88,6 +88,7 @@ export default {
           {
             name: title,
             type: 'pie',
+            minAngle: 5,
             radius: ['72%', '90%'],
             avoidLabelOverlap: false,
             itemStyle: {

src/components/Dashboard/SwitchDate.vue

@@ -16,11 +16,13 @@
 <script>
 export default {
   props: {
-    days: {
+    name: {
       type: String,
-      default: () => {
-        return localStorage.getItem('dashboardDays') || '7'
-      }
+      default: 'dashboardDays'
+    },
+    days: {
+      type: [String, Number],
+      default: null
     },
     options: {
       type: Array,
@@ -47,8 +49,28 @@ export default {
       iOptions: this.options.length > 0 ? this.options : defaultOptions
     }
   },
+  created() {
+    let days = this.days
+    if (!days) {
+      days = this.$route.query.days
+    }
+    if (!days) {
+      days = localStorage.getItem(this.name)
+    }
+    if (!days) {
+      days = '7'
+    }
+    if (days && days !== this.select) {
+      this.select = days
+      this.$emit('change', days)
+    }
+  },
+  mounted() {
+    this.$emit('change', this.select)
+  },
   methods: {
     onChange(val) {
+      localStorage.setItem(this.name, val)
       this.$emit('change', val)
     }
   }

src/components/Dialog/Secret.vue

@@ -28,7 +28,7 @@
 
 <script>
 import i18n from '@/i18n/i18n'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import Dialog from '@/components/Dialog/index'
 
 export default {

src/components/Drawer/index.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { getDrawerWidth } from '@/utils/common'
+import { getDrawerWidth } from '@/utils/common/index'
 
 export default {
   props: {

src/components/Form/AutoDataForm/index.vue

@@ -94,7 +94,7 @@ export default {
   },
   methods: {
     async optionUrlMetaAndGenerateColumns() {
-      let data = { actions: {}}
+      let data = { actions: {} }
       if (this.url) {
         data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       }

src/components/Form/AutoDataForm/utils.js

@@ -4,7 +4,7 @@ import NestedField from '@/components/Form/AutoDataForm/components/NestedField.v
 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 { assignIfNot, toSentenceCase } from '@/utils/common/index'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
 
@@ -177,7 +177,10 @@ export class FormFieldGenerator {
     const systemLang = document.cookie.django_language
     if (helpTextAsPlaceholder !== undefined) {
       helpTextAsPlaceholder = !!helpTextAsPlaceholder
-    } else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
+    } else if (
+      placeholderType.indexOf(field.type) === -1 &&
+      placeholderComponent.indexOf(field.component) === -1
+    ) {
       helpTextAsPlaceholder = false
     } else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
       helpTextAsPlaceholder = true

src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
+  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs" @submit.native.prevent>
     <template v-for="item in innerContent">
       <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
       <component

src/components/Form/DataForm/index.vue

@@ -8,7 +8,8 @@
       :form="basicForm"
       :label-position="iLabelPosition"
       class="form-fields"
-      label-width="25%"
+      :label-width="labelWidth"
+      :style="{ '--label-width': labelWidth }"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -70,8 +71,20 @@
 
 <script>
 import ElFormRender from './components/el-form-renderer'
-import { randomString } from '@/utils/string'
-import { scrollToError } from '@/utils'
+import { randomString } from '@/utils/common/index'
+
+const scrollToError = (
+  el,
+  scrollOption = {
+    behavior: 'smooth',
+    block: 'center'
+  }
+) => {
+  setTimeout(() => {
+    const isError = el.getElementsByClassName('is-error')
+    isError[0].scrollIntoView(scrollOption)
+  }, 0)
+}
 
 export default {
   components: {
@@ -128,6 +141,10 @@ export default {
     labelPosition: {
       type: String,
       default: ''
+    },
+    labelWidth: {
+      type: String,
+      default: '25%'
     }
   },
   data() {
@@ -263,7 +280,7 @@ export default {
     }
 
     .el-form-item__content {
-      width: 75%;
+      width: calc(100% - var(--label-width));
       line-height: 32px;
 
       // 禁用的输入框
@@ -337,7 +354,7 @@ export default {
 
   ::v-deep .form-buttons {
     margin-top: 30px;
-    margin-left: 25%;
+    margin-left: var(--label-width);
   }
 }
 

src/components/Form/FormFields/CronTab/components/Crontab-Result.vue

@@ -13,7 +13,7 @@
 
 <script>
 import parser from 'cron-parser'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'CrontabResult',

src/components/Form/FormFields/JSONManyToManySelect/ValueFormatter.vue

@@ -10,7 +10,7 @@
 
 <script>
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 
 export default {
   name: 'ValueFormatter',

src/components/Form/FormFields/JSONManyToManySelect/index.vue

@@ -42,9 +42,9 @@ import DataTable from '@/components/Table/DataTable/index.vue'
 import ValueFormatter from './ValueFormatter.vue'
 import AttrFormDialog from './AttrFormDialog.vue'
 import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 import { attrMatchOptions } from '@/components/const'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 
 export default {
   name: 'JSONManyToManySelect',
@@ -109,7 +109,7 @@ export default {
         columns: [
           { prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
           { prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
-          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
+          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs } },
           {
             prop: 'action',
             label: this.$t('Action'),

src/components/Form/FormFields/PhoneInput.vue

@@ -46,7 +46,7 @@ export default {
     }
   },
   mounted() {
-    const defaults = { code: localStorage.getItem('prePhoneCode') || '+86', phone: '' }
+    const defaults = { code: this.getDefaultCode(), phone: '' }
     this.rawValue = this.value || defaults
     this.$axios.get('/api/v1/common/countries/').then(res => {
       this.countries = res.map(item => {
@@ -56,6 +56,22 @@ export default {
     this.$emit('input', this.fullPhone)
   },
   methods: {
+    getDefaultCode() {
+      const mapper = {
+        'zh': '+86',
+        'en': '+1',
+        'ja': '+81',
+        'ko': '+82',
+        'fr': '+33',
+        'de': '+49',
+        'es': '+34',
+        'it': '+39',
+        'ru': '+7',
+        'ar': '+966'
+      }
+      const locale = this.$i18n.locale.split('-')[0]
+      return localStorage.getItem('prePhoneCode') || mapper[locale] || '+86'
+    },
     onChange(countryCode) {
       this.rawValue.code = countryCode
       this.onInputChange()

src/components/Form/FormFields/TagInput.vue

@@ -100,7 +100,7 @@ export default {
   methods: {
     handleTagClose(tag) {
       this.filterTags.splice(this.filterTags.indexOf(tag), 1)
-      this.handleConfirm()
+      this.$emit('change', this.filterTags)
     },
     handleSelect(item) {
       this.filterValue = item.value

src/components/Form/FormFields/UpdateSelect.vue

@@ -24,7 +24,7 @@
 
 <script>
 import Select2 from './Select2.vue'
-import { hasUUID } from '@/utils/common'
+import { hasUUID } from '@/utils/common/index'
 
 export default {
   components: {

src/components/Form/FormFields/UpdateToken.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { randomString } from '@/utils/string'
+import { randomString } from '@/utils/common/index'
 
 export default {
   props: {

src/components/Table/AutoDataTable/index.vue

@@ -23,7 +23,7 @@
 <script type="text/jsx">
 import Sortable from 'sortablejs'
 import DataTable from '@/components/Table/DataTable/index.vue'
-import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common'
+import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common/index'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import { TableColumnsGenerator } from './utils'
 
@@ -60,25 +60,24 @@ export default {
       },
       isDeactivated: false,
       tableColumnsStorage: this.getTableColumnsStorage(),
-      sortable: null
+      sortable: null,
+      inited: false
     }
   },
   watch: {
     config: {
+      immediate: false,
       handler: _.debounce(function(iNew, iOld) {
-        if (this.isDeactivated) {
+        if (this.isDeactivated || !this.inited) {
           return
         }
-        try {
-          if (JSON.stringify(iNew) === JSON.stringify(iOld)) {
-            return
-          }
-        } catch (error) {
-          this.$log.error('JsonStringify Error: ', error)
+        const changed = this.isConfigChanged(iNew, iOld)
+        if (!changed) {
+          return
         }
 
         this.optionUrlMetaAndGenCols()
-        this.$log.debug('AutoDataTable Config change found, ', this.isDeactivated)
+        this.$log.debug('AutoDataTable Config change found')
       }, 200)
     }
   },
@@ -93,6 +92,35 @@ export default {
     this.isDeactivated = false
   },
   methods: {
+    isConfigChanged(iNew, iOld) {
+      const _iNew = _.cloneDeep(iNew)
+      const _iOld = _.cloneDeep(iOld)
+      delete _iNew.columns
+      delete _iOld.columns
+      const oldMeta = _iNew.columnsMeta
+      const newMeta = _iOld.columnsMeta
+      const metas = [oldMeta, newMeta]
+      for (const meta of metas) {
+        if (!meta) {
+          continue
+        }
+        for (const [key, value] of Object.entries(meta)) {
+          if (!key || !value || typeof value !== 'object') {
+            continue
+          }
+          delete value['formatter']
+        }
+      }
+
+      try {
+        if (JSON.stringify(_iNew) === JSON.stringify(_iOld)) {
+          return false
+        }
+      } catch (error) {
+        this.$log.error('JsonStringify Error: ', error)
+      }
+      return true
+    },
     setColumnDraggable() {
       const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
       if (!el) {
@@ -238,6 +266,7 @@ export default {
         if (this.$refs.dataTable) {
           this.$refs.dataTable.getList()
         }
+        this.inited = true
       })
     },
     orderingColumns(columns) {

src/components/Table/AutoDataTable/utils.js

@@ -1,4 +1,4 @@
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import i18n from '@/i18n/i18n'
 
 import {
@@ -20,18 +20,18 @@ export class TableColumnsGenerator {
     this.vm = vm
   }
 
-  dynamicActionWidth() {
-    console.log(i18n.locale)
-    if (i18n.locale === 'zh-hans' || i18n.locale === 'zh-hant') {
-      return '100px'
-    }
+  // dynamicActionWidth() {
+  //   console.log(i18n.locale)
+  //   if (i18n.locale === 'zh-hans' || i18n.locale === 'zh-hant') {
+  //     return '100px'
+  //   }
 
-    if (i18n.locale === 'ja' || i18n.locale === 'ko') {
-      return '120px'
-    }
+  //   if (i18n.locale === 'ja' || i18n.locale === 'ko') {
+  //     return '120px'
+  //   }
 
-    return '160px'
-  }
+  //   return '160px'
+  // }
 
   generateColumns() {
     const config = _.cloneDeep(this.config)
@@ -135,7 +135,7 @@ export class TableColumnsGenerator {
           prop: 'actions',
           label: i18n.t('Actions'),
           align: 'center',
-          width: this.dynamicActionWidth(),
+          width: '120px',
           formatter: ActionsFormatter,
           fixed: 'right',
           formatterArgs: {}
@@ -225,11 +225,15 @@ export class TableColumnsGenerator {
           padding = '6px'
           value = '-'
         }
-        return h('span', {
-          'style': {
-            marginLeft: padding
-          }
-        }, [value])
+        return h(
+          'span',
+          {
+            style: {
+              marginLeft: padding
+            }
+          },
+          [value]
+        )
       }
     }
     return col
@@ -281,10 +285,11 @@ export class TableColumnsGenerator {
       }
 
       return (
-        <span>{column.label}
+        <span>
+          {column.label}
           <el-tooltip {...binds}>
-            <div slot='content' v-sanitize={helpTip}/>
-            <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
+            <div slot='content' v-sanitize={helpTip} />
+            <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px' />
           </el-tooltip>
         </span>
       )
@@ -299,16 +304,13 @@ export class TableColumnsGenerator {
         return col
       }
       if (column.type === 'boolean') {
-        col.filters = [
-          { text: i18n.t('Yes'), value: true },
-          { text: i18n.t('No'), value: false }
-        ]
+        col.filters = [{ text: i18n.t('Yes'), value: true }, { text: i18n.t('No'), value: false }]
         col.sortable = false
         col['column-key'] = col.prop
       }
       if (column.type === 'choice' && column.choices) {
         col.filters = column.choices.map(item => {
-          if (typeof (item.value) === 'boolean') {
+          if (typeof item.value === 'boolean') {
             if (item.value) {
               return { text: item['label'], value: 'True' }
             } else {

src/components/Table/CardTable/Panel.vue

@@ -4,7 +4,7 @@
       {{ $t('Enterprise') }}
     </span>
     <el-row class="panel">
-      <el-col v-if="d.icon" :span="8" class="image">
+      <el-col v-if="d.icon" :span="d.icon ? 8 : 0" class="image">
         <img
           v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
           :alt="d.display_name"
@@ -12,21 +12,21 @@
         >
         <Icon v-else :icon="d.icon" />
       </el-col>
-      <el-col :span="16" class="text-zone">
+      <el-col :span="d.icon ? 16 : 24" class="text-zone">
         <div class="one-line">
           <b>{{ d.display_name }}</b>
-          <el-tag v-if="d.version" size="mini" style="margin-left: 5px">
+        </div>
+        <div class="tag-zone">
+          <el-tag v-if="d.version" size="mini" style="margin-left: 5px; background-color: #ecf5ff; color: #409eff;">
             {{ d.version }}
           </el-tag>
+          <el-tag v-for="tag of d.tags" :key="tag" size="mini">
+            {{ capitalize(tag) }}
+          </el-tag>
         </div>
         <div :title="d.comment " class="comment">
           {{ d.comment }}
         </div>
-        <div class="tag-zone">
-          <el-tag v-for="tag of d.tags" :key="tag" size="mini">
-            {{ capitalize(tag) }}
-          </el-tag>
-        </div>
       </el-col>
     </el-row>
   </div>
@@ -107,22 +107,20 @@ export default {
 
     .comment {
       display: -webkit-box;
-      height: 120px;
+      margin-top: 10px;
       font-size: 12px;
-      padding: 10px 0;
       cursor: pointer;
       overflow: hidden;
       -webkit-line-clamp: 4;
-      -webkit-box-flex: 1;
       -webkit-box-orient: vertical;
-      text-align: left;
     }
 
     .tag-zone {
       display: flex;
-      height: 30%;
       align-items: center;
       cursor: pointer;
+      margin-top: 10px;
+      margin-left: -5px;
     }
   }
 }

src/components/Table/CardTable/index.vue

@@ -99,9 +99,9 @@ export default {
       totalData: [],
       page: defaultFirstPage,
       extraQuery: {},
-      paginationSize: 6,
+      paginationSize: 12,
       paginationLayout: 'total, sizes, prev, pager, next',
-      paginationSizes: [6, 18, 27],
+      paginationSizes: [12, 24, 36],
       loading: true,
       axiosConfig: {
         raw: 1,
@@ -212,7 +212,7 @@ export default {
       this.$confirm(msg, this.$tc('Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
           const deleteFunc = this.tableConfig.onDelete || this.defaultPerformDelete
           await deleteFunc(obj)
@@ -248,6 +248,10 @@ export default {
     display: flex;
     justify-content: left;
     flex-wrap: wrap;
+
+    .el-card .el-card__body div {
+      height: inherit;
+    }
   }
 
   .el-col, div {
@@ -257,7 +261,7 @@ export default {
       min-width: 330px;
       position: relative;
       margin-bottom: 20px;
-      //height: 230px;
+      height: 180px;
       width: 380px;
       padding: 15px;
 

src/components/Table/DataTable/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { newURL, ObjectLocalStorage } from '@/utils/common'
+import { newURL, ObjectLocalStorage } from '@/utils/common/index'
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'
 
@@ -65,7 +65,7 @@ export default {
         onEdit: (row) => {
           const defaultOnEdit = (row) => {
             const routeName = userTableActions.editRoute
-            this.$router.push({ name: routeName, params: { id: row.id }})
+            this.$router.push({ name: routeName, params: { id: row.id } })
           }
           let onEdit = userTableActions.onEdit
           if (!onEdit) {

src/components/Table/DrawerListTable/index.vue

@@ -22,8 +22,9 @@
 <script>
 import ListTable from '../ListTable'
 import Drawer from '@/components/Drawer/index.vue'
-import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
+import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common/index'
 import { mapGetters } from 'vuex'
+import { resolveRoute } from '@/utils/vue/index'
 
 const drawerType = [String, Function]
 
@@ -166,9 +167,9 @@ export default {
       }
       this.drawerComponent = ''
     },
-    getDetailDrawerTitle({ col, row, cellValue, payload = {}}) {
+    getDetailDrawerTitle({ col, row, cellValue, payload = {} }) {
       this.$log.debug('>>> getDetailDrawerTitle: ', col, row, cellValue, payload)
-      const { detailRoute = {}, formatterArgs = {}} = payload
+      const { detailRoute = {}, formatterArgs = {} } = payload
       const getTitle = formatterArgs.getDrawerTitle
       this.$log.debug('>>> getTitle: ', getTitle)
       if (getTitle && typeof getTitle === 'function') {
@@ -177,7 +178,7 @@ export default {
       if (formatterArgs.title) {
         return formatterArgs.title
       }
-      const resolvedRoute = this.resolveRoute(detailRoute)
+      const resolvedRoute = resolveRoute(detailRoute, this.$router)
       let title = cellValue || row.name
       if (formatterArgs.getTitle) {
         title = formatterArgs.getTitle({ col, row, cellValue })
@@ -232,53 +233,38 @@ export default {
     },
     getRouteNameComponent(name, action) {
       const route = { name: name }
+
       if (action === 'detail' || action === 'update') {
         route.params = { id: '1' }
       }
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
-      if (matched.length === 0) {
-        return
+
+      const resolved = resolveRoute(route, this.$router)
+
+      if (resolved && resolved.components && resolved.components.default) {
+        return resolved.components.default
       }
 
-      if (matched[0] && matched[0].components?.default) {
-        const component = matched[0].components.default
-        return component
-      }
-    },
-    resolveRoute(route) {
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0]
-      }
+      return ''
     },
     getDetailComponent({ detailRoute }) {
       if (!detailRoute) {
         return this.detailDrawer
       }
-      this.$log.debug('>>> getDetailComponent: ', detailRoute)
-      const route = this.resolveRoute(detailRoute)
+
+      const route = resolveRoute(detailRoute, this.$router)
       let component = null
-      if (route) {
+
+      if (route && route.components && route.components.default) {
         component = route.components.default
       }
+
       if (!component) {
         component = this.detailDrawer
       }
+
       return component
     },
     getDrawerComponent(action, payload) {
-      this.$log.debug('>>> getDrawerComponent: ', action, payload)
       switch (action) {
         case 'create':
           return this.createDrawer
@@ -293,7 +279,7 @@ export default {
       }
     },
 
-    async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {}} = {}) {
+    async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {} } = {}) {
       try {
         // 1. 先重置状态
         this.drawerVisible = false
@@ -370,7 +356,7 @@ export default {
       await this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'detail', row: row, col: col, id: id
       })
-      await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs }})
+      await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs } })
     },
     async onCreate(meta) {
       if (!meta) {
@@ -380,14 +366,14 @@ export default {
       await this.$store.dispatch('common/setDrawerActionMeta', { action: 'create', ...meta })
       await this.showDrawer('create', meta)
     },
-    async onClone({ row, col, query = {}}) {
+    async onClone({ row, col, query = {} }) {
       this.$route.params.id = ''
       await this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'clone', row: row, col: col, id: row.id
       })
       await this.showDrawer('clone', { query })
     },
-    async onUpdate({ row, col, query = {}}) {
+    async onUpdate({ row, col, query = {} }) {
       this.$route.params.id = row.id
       this.$route.params.action = 'update'
       await this.$store.dispatch('common/setDrawerActionMeta', {

src/components/Table/ListTable/TableAction/ExportDialog.vue

@@ -49,7 +49,7 @@
 import Dialog from '@/components/Dialog/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
-import { download } from '@/utils/common'
+import { download } from '@/utils/common/index'
 
 export default {
   name: 'ExportDialog',

src/components/Table/ListTable/TableAction/ImportDialog.vue

@@ -68,7 +68,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable.vue'
-import { download, getErrorResponseMsg } from '@/utils/common'
+import { download, getErrorResponseMsg } from '@/utils/common/index'
 import { createSourceIdCache } from '@/api/common'
 
 export default {

src/components/Table/ListTable/TableAction/ImportTable.vue

@@ -42,10 +42,10 @@
 
 <script>
 import DataTable from '@/components/Table/DataTable/index.vue'
-import { getUpdateObjURL } from '@/utils/common'
-import { sleep } from '@/utils/time'
+import { getUpdateObjURL } from '@/utils/common/index'
+import { sleep } from '@/utils/common/time'
 import { EditableInputFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import getStatusColumnMeta from '@/components/Table/ListTable/TableAction/const'
 
 export default {

src/components/Table/ListTable/TableAction/LeftSide.vue

@@ -10,7 +10,7 @@
 <script>
 import { cleanActions } from './utils'
 import { createSourceIdCache } from '@/api/common'
-import { getErrorResponseMsg } from '@/utils/common'
+import { getErrorResponseMsg } from '@/utils/common/index'
 
 import i18n from '@/i18n/i18n'
 import DataActions from '@/components/Common/DataActions/index.vue'
@@ -240,7 +240,7 @@ export default {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         showCancelButton: true,
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
           instance.confirmButtonLoading = true
           try {

src/components/Table/ListTable/TableAction/QuickFilter.vue

@@ -45,7 +45,7 @@
 
 <script>
 import SummaryCard from '@/components/Cards/SummaryCard/index.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 
 export default {
   name: 'QuickFilter',

src/components/Table/ListTable/TableAction/RightSide.vue

@@ -17,7 +17,7 @@
 import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
 import ImExportDialog from './ImExportDialog.vue'
 import { cleanActions } from './utils'
-import { assignIfNot } from '@/utils/common'
+import { assignIfNot } from '@/utils/common/index'
 
 const defaultTrue = { type: [Boolean, Function, String], default: true }
 

src/components/Table/ListTable/TableAction/index.vue

@@ -49,7 +49,7 @@ import LeftSide from './LeftSide.vue'
 import RightSide from './RightSide.vue'
 import AutoDataSearch from '@/components/Table/AutoDataSearch/index.vue'
 import DatetimeRangePicker from '@/components/Form/FormFields/DatetimeRangePicker.vue'
-import { getDaysAgo, getDaysFuture } from '@/utils/time'
+import { getDaysAgo, getDaysFuture } from '@/utils/common/time'
 import LabelSearch from '@/components/Table/ListTable/TableAction/LabelSearch.vue'
 
 const defaultTrue = { type: Boolean, default: true }

src/components/Table/ListTable/index.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { getResourceFromApiUrl } from '@/utils/jms'
+import { getResourceFromApiUrl } from '@/utils/jms/index'
 import deepmerge from 'deepmerge'
 import { mapGetters } from 'vuex'
 import IBox from '@/components/Common/IBox/index.vue'
@@ -42,8 +42,8 @@ import TableAction from './TableAction/index.vue'
 import Emitter from '@/mixins/emitter'
 import AutoDataTable from '../AutoDataTable/index.vue'
 import QuickFilter from './TableAction/QuickFilter.vue'
-import { getDayEnd, getDaysAgo } from '@/utils/time'
-import { ObjectLocalStorage } from '@/utils/common'
+import { getDayEnd, getDaysAgo } from '@/utils/common/time'
+import { ObjectLocalStorage } from '@/utils/common/index'
 
 export default {
   name: 'ListTable',
@@ -104,7 +104,9 @@ export default {
       tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
       objStorage: new ObjectLocalStorage('filterExpand'),
       iFilterExpand: null,
-      reloadTable: _.debounce(this._reloadTable, 300)
+      reloadTable: _.debounce(this._reloadTable, 300),
+      searchQuery: {},
+      filterQuery: {}
     }
   },
   computed: {
@@ -298,19 +300,26 @@ export default {
         this.$delete(this.extraQuery, key)
       }
     },
+    getMergedQuery() {
+      return { ...this.searchQuery, ...this.filterQuery }
+    },
     search(attrs) {
       const init = this.updateInitQuery(attrs)
       if (init) {
         return
       }
+      this.searchQuery = attrs
+      const merged = this.getMergedQuery()
       this.$log.debug('ListTable: search table', attrs)
       this.$emit('TagSearch', attrs)
-      this.$refs.dataTable?.$refs.dataTable?.search(attrs, true)
+      this.$refs.dataTable?.$refs.dataTable?.search(merged, true)
     },
     filter(attrs) {
+      this.filterQuery = attrs
+      const merged = this.getMergedQuery()
       this.$emit('TagFilter', attrs)
       this.$log.debug('ListTable: found filter change', attrs)
-      this.search(attrs)
+      this.$refs.dataTable?.$refs.dataTable?.search(merged, true)
     },
     hasActionPerm(action) {
       const permRequired = this.permissions[action]

src/components/Table/TableFormatters/AccountConnectFormatter.vue

@@ -60,6 +60,7 @@ export default {
               asset=${assetId}
               &account=${row.id}
               &protocol=${protocol}
+              &org_id=${this.$store.getters.currentOrg.id}
             `.replace(/\s+/g, '')
           },
           asset: null,

src/components/Table/TableFormatters/AccountInfoFormatter.vue

@@ -1,8 +1,9 @@
 <template>
   <el-popover
     :title="title"
-    placement="left-start"
+    placement="left"
     trigger="click"
+    width="300"
     @show="getAsyncItems"
   >
     <div v-if="!loading" class="detail-content">

src/components/Table/TableFormatters/CopyableFormatter.vue

@@ -1,6 +1,6 @@
 <script>
 import BaseFormatter from './base.vue'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 
 export default {
   name: 'CopyableFormatter',

src/components/Table/TableFormatters/DateFormatter.vue

@@ -4,7 +4,7 @@
 
 <script>
 import BaseFormatter from './base.vue'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'DateFormatter',

src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue

@@ -12,8 +12,12 @@
         </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" @click="handleRisk('ignore')" />
+        <el-button :disabled="!this.$hasPerm('accounts.change_accountrisk')" class="ignore action" size="mini">
+          <svg-icon
+            icon-class="ignore"
+            :style="!this.$hasPerm('accounts.change_accountrisk') ? 'pointer-events: none;' : ''"
+            @click="handleRisk('ignore')"
+          />
         </el-button>
       </el-tooltip>
     </span>
@@ -124,19 +128,19 @@ export default {
           name: 'delete_remote',
           label: this.$t('DeleteRemoteAccount'),
           has: this.row.remote_present,
-          disabled: this.$store.getters.currentOrgIsRoot
+          disabled: this.$store.getters.currentOrgIsRoot || !this.$hasPerm('accounts.remove_account') || !this.$hasPerm('accounts.change_accountrisk')
         },
         {
           name: 'add_account',
           label: this.$t('AddAccount'),
           has: !this.row.present,
-          disabled: this.$store.getters.currentOrgIsRoot
+          disabled: this.$store.getters.currentOrgIsRoot || !this.$hasPerm('accounts.add_account') || !this.$hasPerm('accounts.change_accountrisk')
         },
         {
           name: 'change_password_add',
           label: this.$t('AddAccountAfterChangingPassword'),
           has: !this.row.present,
-          disabled: this.$store.getters.currentOrgIsRoot
+          disabled: this.$store.getters.currentOrgIsRoot || !this.$hasPerm('accounts.add_pushaccountexecution') || !this.$hasPerm('accounts.change_accountrisk')
         }
       ]
       return actions.filter(action => {

src/components/Table/TableFormatters/EditableInputFormatter.vue

@@ -47,12 +47,10 @@ export default {
     }
   },
   data() {
-    const valueIsString = typeof this.cellValue === 'string'
-    const jsonValue = this.cellValue ? JSON.stringify(this.cellValue) : ''
     return {
       inEditMode: false,
-      value: valueIsString ? this.cellValue || '' : jsonValue,
-      valueIsString: valueIsString,
+      value: '',
+      valueIsString: '',
       formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
     }
   },
@@ -67,6 +65,16 @@ export default {
       return this.getCellValue(this.cellValue)
     }
   },
+  watch: {
+    cellValue: {
+      immediate: true,
+      handler(newVal) {
+        const valueIsString = typeof newVal === 'string'
+        this.value = valueIsString ? newVal || '' : (newVal ? JSON.stringify(newVal) : '')
+        this.valueIsString = valueIsString
+      }
+    }
+  },
   methods: {
     editCell() {
       if (this.formatterArgs.canEdit) {

src/components/Table/TableFormatters/PlatformFormatter.vue

@@ -9,7 +9,7 @@
 
 <script>
 import BaseFormatter from './base.vue'
-import { loadPlatformIcon } from '@/utils/jms'
+import { loadPlatformIcon } from '@/utils/jms/index'
 
 export default {
   name: 'PlatformFormatter',

src/components/Table/TableFormatters/SecretViewerFormatter.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { copy, downloadText } from '@/utils/common'
+import { copy, downloadText } from '@/utils/common/index'
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
 
 export default {

src/components/Table/TagSearch/index.vue

@@ -244,10 +244,12 @@ export default {
         delete routeFilter.search
       }
       const asFilterTags = _.cloneDeep(this.filterTags)
-      this.filterTags = {
-        ...asFilterTags,
-        ...routeFilter
-      }
+      setTimeout(() => {
+        this.filterTags = {
+          ...asFilterTags,
+          ...routeFilter
+        }
+      }, 100)
     },
     getValueLabel(key, value) {
       for (const field of this.options) {

src/components/Table/TreeTable/index.vue

@@ -48,6 +48,7 @@
               :quick-filters="quickFilters"
               :quick-summary="quickSummary"
               :table-config="iTableConfig"
+              :create-drawer="createDrawer"
               v-on="$listeners"
             />
           </slot>
@@ -59,7 +60,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 import ListTable from '@/components/Table/DrawerListTable/index.vue'
 import FileTree from '@/components/Table/TreeTable/components/FileTree.vue'
 import IBox from '@/components/Common/IBox/index.vue'

src/components/Widgets/ILabel/index.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { isDarkness } from '@/utils/color'
+import { isDarkness } from '@/utils/common/color'
 
 export default {
   name: 'Label',

src/components/Widgets/SvgIcon/index.vue

@@ -7,7 +7,7 @@
 
 <script>
 // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
-import { isExternal } from '@/utils/validate'
+import { isExternal } from '@/utils/secure'
 
 export default {
   name: 'SvgIcon',

src/components/Widgets/Term/index.vue

@@ -26,7 +26,7 @@
 import 'xterm/css/xterm.css'
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
-import { downloadText } from '@/utils/common'
+import { downloadText } from '@/utils/common/index'
 
 export default {
   name: 'Term',

src/directive/permission/index.js

@@ -1,4 +1,4 @@
-import { hasPermission, getRouteRequiredPerms, getApiUrlRequirePerms } from '@/utils/jms'
+import { hasPermission, getRouteRequiredPerms, getApiUrlRequirePerms } from '@/utils/jms/index'
 import permission from './permission'
 import Vue from 'vue'
 
@@ -33,7 +33,7 @@ const install = function(Vue) {
 }
 
 window['permission'] = permission
-Vue.use(install); // eslint-disable-line
+Vue.use(install) // eslint-disable-line
 
 permission.install = install
 export default permission

src/directive/permission/permission.js

@@ -1,4 +1,4 @@
-import { hasPermission } from '@/utils/jms'
+import { hasPermission } from '@/utils/jms/index'
 
 function checkPermission(el, binding) {
   const { value } = binding

src/filters/datetime.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 Vue.filter('date', function(value) {
   return toSafeLocalDateStr(value)
 })
 
-Vue.filter('async', async(asyncFn, args) => {
+Vue.filter('async', async (asyncFn, args) => {
   if (typeof asyncFn === 'function') {
     return await asyncFn(args)
   } else if (typeof asyncFn === 'object' && asyncFn.then) {

src/guards.js

@@ -3,14 +3,14 @@ import router from './router'
 import 'nprogress/nprogress.css' // progress bar style
 import { startup } from '@/utils/startup'
 import store from '@/store'
-import { isSameView } from '@/utils/jms'
-import { toSentenceCase } from '@/utils/common'
+import { isSameView } from '@/utils/jms/index'
+import { toSentenceCase } from '@/utils/common/index'
 
 function beforeRouteChange(to, from, next) {
   localStorage.setItem('activeTab', '')
 }
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
   // NProgress.start()
   try {
@@ -42,10 +42,9 @@ function setPageTitle() {
   }
 }
 
-router.afterEach(async(to, from) => {
+router.afterEach(async (to, from) => {
   // finish progress bar
   await setPageTitle()
   await generateViewRoutesIfChange({ to, from })
   // NProgress.done()
 })
-

src/i18n/i18n.js

@@ -1,6 +1,6 @@
 // i18n.js
 import Vue from 'vue'
-import locale from 'element-ui/lib/locale'
+import locale from 'elementui-lts/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './langs'
 import date from './date'
@@ -40,7 +40,7 @@ i18n.tc = function(key, choice, ...args) {
 }
 
 Vue.prototype.$tc = i18n.tc.bind(i18n)
-Vue.prototype.$tr = (key) => {
+Vue.prototype.$tr = key => {
   return i18n.t('' + key)
 }
 
@@ -53,6 +53,8 @@ export async function fetchTranslationsFromAPI() {
         i18n.mergeLocaleMessage(key, data[key])
       }
     }
+  } catch (error) {
+    alert(error)
   } finally {
     await store.dispatch('app/setI18nLoaded', true)
   }

src/i18n/langs/index.js

@@ -1,11 +1,11 @@
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
-import zhTWLocale from 'element-ui/lib/locale/lang/zh-TW'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import jaLocale from 'element-ui/lib/locale/lang/ja'
-import ptBrLocale from 'element-ui/lib/locale/lang/pt-br'
-import esLocale from 'element-ui/lib/locale/lang/es'
-import ruLocale from 'element-ui/lib/locale/lang/ru-RU'
-import koLocale from 'element-ui/lib/locale/lang/ko'
+import zhLocale from 'elementui-lts/lib/locale/lang/zh-CN'
+import zhTWLocale from 'elementui-lts/lib/locale/lang/zh-TW'
+import enLocale from 'elementui-lts/lib/locale/lang/en'
+import jaLocale from 'elementui-lts/lib/locale/lang/ja'
+import ptBrLocale from 'elementui-lts/lib/locale/lang/pt-br'
+import esLocale from 'elementui-lts/lib/locale/lang/es'
+import ruLocale from 'elementui-lts/lib/locale/lang/ru-RU'
+import koLocale from 'elementui-lts/lib/locale/lang/ko'
 import zh from './zh.json'
 import zhHant from './zh_hant.json'
 import en from './en.json'

src/icons/svg/workbench copy.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="35px" viewBox="0 0 40 35" version="1.1" xmlns="http://www.w3.org/2000/svg"
+>
+    <path d="M37.2399379,2.75850141 C37.238751,2.75850141 37.2413793,25.6821524 37.2413793,25.6821524 C37.2413793,25.6844703 2.76006207,25.6838291 2.76006207,25.6838291 C2.76124898,25.6838291 2.7586207,2.76017793 2.7586207,2.76017793 C2.7586207,2.75786066 37.2399379,2.75850141 37.2399379,2.75850141 Z M0,25.6821524 C0,27.2033607 1.23644137,28.4423303 2.76006207,28.4423303 L37.2399379,28.4423303 C38.76662,28.4423303 40,27.2070786 40,25.6821524 L40,2.76017793 C40,1.23897031 38.7635586,-3.55271368e-16 37.2399379,-3.55271368e-16 L2.76006207,-3.55271368e-16 C1.23338,-3.55271368e-16 0,1.23525172 0,2.76017793 L0,25.6821524 Z M32.8418552,34.8953627 C33.6036269,34.8953627 34.2211655,34.2778241 34.2211655,33.5160524 L34.2211655,33.4518427 C34.2211655,32.690071 33.6036269,32.0725324 32.8418552,32.0725324 L7.15814484,32.0725324 C6.39637309,32.0725324 5.77883449,32.690071 5.77883449,33.4518427 L5.77883449,33.5160524 C5.77883449,34.2778241 6.39637309,34.8953627 7.15814484,34.8953627 C7.91991723,34.8953627 32.8418552,34.8953627 32.8418552,34.8953627 Z M18.5885848,32.1046372 L21.3472055,32.1046372 L21.3472055,28.4423303 L18.6527945,28.4423303 L18.5885848,32.1046372 Z"
+          id="形状"></path>
+</svg>

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -18,8 +18,8 @@
 </template>
 <script>
 import AutoDataForm from '@/components/Form/AutoDataForm'
-import { getUpdateObjURL } from '@/utils/common'
-import { encryptPassword } from '@/utils/crypto'
+import { getUpdateObjURL } from '@/utils/common/index'
+import { encryptPassword } from '@/utils/secure'
 import deepmerge from 'deepmerge'
 
 export default {
@@ -443,7 +443,7 @@ export default {
     },
     async getObjectDetail(url, id) {
       this.$log.debug('Get object detail: ', url)
-      let data = await this.$axios.get(url, { params: { id }})
+      let data = await this.$axios.get(url, { params: { id } })
       if (Array.isArray(data)) {
         data = {}
       }
@@ -454,6 +454,4 @@ export default {
 </script>
 
 <style scoped>
-.ibox ::v-deep .el-card__body {
-}
 </style>

src/layout/components/GenericDetailPage/index.vue

@@ -20,7 +20,7 @@
 <script>
 import TabPage from '../TabPage'
 import { flashErrorMsg } from '@/utils/request'
-import { getApiPath } from '@/utils/common'
+import { getApiPath } from '@/utils/common/index'
 import ActionsGroup from '@/components/Common/ActionsGroup'
 import ResourceActivity from '@/components/Apps/ResourceActivity/index.vue'
 import { mapGetters } from 'vuex'
@@ -230,7 +230,7 @@ export default {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         showCancelButton: true,
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
           instance.confirmButtonLoading = true
           try {
@@ -256,7 +256,7 @@ export default {
       const id = this.$route.params.id
       let route = this.validActions.updateRoute
       if (typeof route === 'string') {
-        route = { name: route, params: {}}
+        route = { name: route, params: {} }
       }
       route = {
         ...route,

src/layout/components/NavHeader/Organization.vue

@@ -37,7 +37,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import orgUtil from '@/utils/org'
+import orgUtil from '@/utils/jms/org'
 
 export default {
   props: {

src/layout/components/NavHeader/SiteMessages.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import Dialog from '@/components/Dialog'
 import MarkDown from '@/components/Widgets/MarkDown'
 
@@ -140,7 +140,7 @@ export default {
       this.$confirm(this.$tc('OneClickReadMsg'), this.$tc('Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
           this.markAsReadAll(msgs)
           done()

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -21,7 +21,7 @@
         :index="view.name"
       >
         <span class="outline" />
-        <svg-icon :icon-class="view.meta.icon" class="icons" />
+        <Icon :icon="view.meta.icon" class="icons" />
         <span slot="title" class="icons-title">{{ view.meta.title }}</span>
       </el-menu-item>
     </el-menu>
@@ -30,10 +30,14 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import Icon from '@/components/Widgets/Icon'
 import store from '@/store'
 
 export default {
   name: 'ViewSwitcher',
+  components: {
+    Icon
+  },
   props: {
     showTitle: {
       type: Boolean,

src/layout/components/NavHeader/WebTerminal.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { BASE_URL } from '@/utils/common'
+import { BASE_URL } from '@/utils/common/index'
 
 export default {
   name: 'WebTerminal',

src/layout/components/NavLeft/Link.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from '@/utils/secure'
 
 export default {
   props: {

src/layout/components/NavLeft/Logo.vue

@@ -19,7 +19,7 @@ export default {
   props: {
     collapse: {
       type: Boolean,
-      required: true
+      default: false
     }
   },
   data() {

src/layout/components/NavLeft/SidebarItem.vue

@@ -58,11 +58,11 @@
 
 <script>
 import path from 'path'
-import { isExternal } from '@/utils/validate'
+import { isExternal } from '@/utils/secure'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 
 export default {
   name: 'SidebarItem',

src/layout/components/Page/LicenseRelatedTip.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script>
-import { toSafeLocalDateStr } from '@/utils/time'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -72,7 +71,7 @@ export default {
   },
   methods: {
     getIntervalDays(date) {
-      const dateExpired = new Date(toSafeLocalDateStr(date))
+      const dateExpired = new Date(date)
       const dateNow = new Date()
       const intervalTime = dateExpired.getTime() - dateNow.getTime()
       return Math.floor(intervalTime / (24 * 3600 * 1000))

src/layout/components/Page/index.vue

@@ -58,7 +58,7 @@ import PageHeading from './PageHeading'
 import PageContent from './PageContent'
 import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import TagsView from '../TagsView/index.vue'
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import IBox from '@/components/Common/IBox/index.vue'
 
 export default {
@@ -156,8 +156,7 @@ export default {
   overflow-x: hidden;
 
   .el-alert {
-    margin: -5px 0 5px 0!important;
-    width: calc(100% - 10px);
+    margin: -5px 0 5px 0 !important;
   }
 
   .page-content {

src/layout/components/TabPage/index.vue

@@ -60,7 +60,7 @@
 <script>
 import Page from '../Page/'
 import Icon from '@/components/Widgets/Icon'
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 
 export default {
   name: 'TabPage',

src/main.js

@@ -1,14 +1,14 @@
 import Vue from 'vue'
-import ElementUI from 'element-ui'
+import ElementUI from 'elementui-lts'
 import locale from 'elementLocale'
 import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
 import i18n, { fetchTranslationsFromAPI } from './i18n/i18n'
-import { eventBus } from './utils/const'
+import { eventBus } from './utils/vue/eventbus'
 import '@/styles/fonts/loadSans'
-import { watchSessions } from './utils/auth'
+import { watchSessions } from './utils/jms/auth'
 
 import '@/icons' // icon
 import '@/guards' // permission control
@@ -20,9 +20,9 @@ import VueLogger from 'vuejs-logger'
 import loggerOptions from './utils/logger'
 import ECharts from 'vue-echarts'
 import request from '@/utils/request'
-import { message } from '@/utils/message'
-import xss from '@/utils/xss'
-import ElTableTooltipPatch from '@/utils/elTableTooltipPatch.js'
+import { message } from '@/utils/vue/message'
+import xss from '@/utils/secure'
+import ElTableTooltipPatch from '@/utils/vue/elTableTooltipPatch.js'
 import VSanitize from 'v-sanitize'
 import moment from 'moment'
 moment.locale('zh-cn')

src/router/audit/index.js

@@ -4,6 +4,8 @@ import i18n from '@/i18n/i18n'
 import SessionRoutes from './sessions'
 import LogRoutes from './audits'
 import JobRoutes from './jobs'
+import ReportsRoutes from './reports'
+import TicketRoutes from './tickets'
 import empty from '@/layout/empty'
 import store from '@/store'
 
@@ -67,6 +69,31 @@ export default {
         permissions: ['audits.view_joblog']
       },
       children: JobRoutes
+    },
+    {
+      path: '/audit/tickets',
+      component: empty,
+      redirect: '',
+      name: 'TicketRoutes',
+      meta: {
+        title: i18n.t('TicketsAudit'),
+        icon: 'job',
+        permissions: ['tickets.view_ticket']
+      },
+      children: TicketRoutes
+    },
+    {
+      path: '/audit/reports',
+      component: empty,
+      redirect: '',
+      name: 'AuditsReports',
+      meta: {
+        title: i18n.t('Report'),
+        icon: 'report',
+        permissions: [],
+        licenseRequired: true
+      },
+      children: ReportsRoutes
     }
   ]
 }

src/router/audit/reports.js

@@ -0,0 +1,70 @@
+import i18n from '@/i18n/i18n'
+import empty from '@/layout/empty'
+
+export default [
+  {
+    path: 'users',
+    name: 'writable',
+    component: empty,
+    meta: {
+      title: i18n.t('UserReport'),
+      icon: 'user-o',
+      permissions: []
+    },
+    children: [
+      {
+        path: '',
+        name: 'UserActivityIndex',
+        component: () => import('@/views/reports/users/index.vue'),
+        meta: {
+          title: i18n.t('UserReport'),
+          permissions: []
+        }
+      }
+    ]
+  },
+  {
+    path: 'assets',
+    name: 'assets',
+    component: empty,
+    meta: {
+      icon: 'assets',
+      title: i18n.t('AssetReport'),
+      permissions: []
+    },
+    children: [
+      {
+        path: '',
+        props: () => ({ nav: false }),
+        name: 'AssetActivityIndex',
+        component: () => import('@/views/reports/assets/index.vue'),
+        meta: {
+          title: i18n.t('AssetReport'),
+          permissions: []
+        }
+      }
+    ]
+  },
+  {
+    path: 'accounts',
+    name: 'accounts',
+    component: empty,
+    meta: {
+      icon: 'accounts',
+      title: i18n.t('AccountReport'),
+      permissions: []
+    },
+    children: [
+      {
+        path: '',
+        props: () => ({ nav: false }),
+        name: 'AccountActivityIndex',
+        component: () => import('@/views/reports/accounts/index.vue'),
+        meta: {
+          title: i18n.t('AccountReport'),
+          permissions: []
+        }
+      }
+    ]
+  }
+]

src/router/audit/tickets.js

@@ -0,0 +1,29 @@
+import i18n from '@/i18n/i18n'
+import empty from '@/layout/empty'
+
+export default [
+  {
+    path: 'ticket-list',
+    name: 'TicketList',
+    component: empty,
+    redirect: {
+      name: 'TicketList'
+    },
+    meta: {
+      title: i18n.t('TicketList'),
+      icon: 'audit',
+      permissions: ['audits.view_joblog']
+    },
+    children: [
+      {
+        path: '',
+        name: 'AuditTicketList',
+        component: () => import('@/views/audits/TicketList'),
+        meta: {
+          title: i18n.t('TicketList'),
+          permissions: []
+        }
+      }
+    ]
+  }
+]

src/router/console/index.js

@@ -89,4 +89,3 @@ export default {
     }
   ]
 }
-

src/router/console/sessions.js

@@ -1,6 +1,6 @@
 import i18n from '@/i18n/i18n'
 import empty from '@/layout/empty'
-import { BASE_URL } from '@/utils/common'
+import { BASE_URL } from '@/utils/common/index'
 
 export default [
   {