perf：Optimize the execution efficiency of all and reverse selection

fixed: Fixed + and - not being special characters

.env.development.example

@@ -22,4 +22,5 @@ VUE_APP_LOGOUT_PATH = '/core/auth/logout/'
 # Dev server for core proxy
 VUE_APP_CORE_HOST = 'http://localhost:8080'
 VUE_APP_CORE_WS = 'ws://localhost:8080'
+VUE_APP_KAEL_HOST = 'http://localhost:8083'
 VUE_APP_ENV = 'development'

.github/workflows/jms-generic-action-handler.yml

@@ -10,3 +10,4 @@ jobs:
       - uses: jumpserver/action-generic-handler@master
         env:
           GITHUB_TOKEN: ${{ secrets.PRIVATE_TOKEN }}
+          I18N_TOKEN: ${{ secrets.I18N_TOKEN }}

.github/workflows/release-drafter.yml

@@ -19,9 +19,7 @@ jobs:
         id: get_version
         run: |
           TAG=$(basename ${GITHUB_REF})
-          VERSION=${TAG/v/}
           echo "::set-output name=TAG::$TAG"
-          echo "::set-output name=VERSION::$VERSION"
       - name: Create Release
         id: create_release
         uses: release-drafter/release-drafter@v5
@@ -33,17 +31,27 @@ jobs:
           tag: ${{ steps.get_version.outputs.TAG }}
       - uses: actions/setup-node@v2
         with:
-          node-version: '14.16'
-
-  build-and-release:
-    needs: create-realese
-    name: Build and Release
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Build it and upload
-        uses: jumpserver/action-build-upload-assets@node10
+          node-version: '16.20'
+      - name: Install dependencies
+        run: yarn install
+      - name: Build web
+        run: |
+          sed -i "s@version-dev@${{ steps.get_version.outputs.TAG }}@g" src/layout/components/NavHeader/About.vue
+          yarn build
+      - name: Create Upload Assets
+        run: |
+          rm -rf build/*
+          mv lina lina-${{ steps.get_version.outputs.TAG }}
+          tar -czf lina-${{ steps.get_version.outputs.TAG }}.tar.gz lina-${{ steps.get_version.outputs.TAG }}
+          echo $(md5sum lina-${{ steps.get_version.outputs.TAG }}.tar.gz | awk '{print $1}') > build/lina-${{ steps.get_version.outputs.TAG }}.tar.gz.md5
+          mv lina-${{ steps.get_version.outputs.TAG }}.tar.gz build/
+      - name: Release Upload Assets
+        uses: softprops/action-gh-release@v1
+        if: startsWith(github.ref, 'refs/tags/')
+        with:
+          draft: true
+          files: |
+            build/lina-${{ steps.get_version.outputs.TAG }}.tar.gz
+            build/lina-${{ steps.get_version.outputs.TAG }}.tar.gz.md5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ needs.create-realese.outputs.upload_url }}

Dockerfile

@@ -1,13 +1,28 @@
-FROM node:14.16 as stage-build
+FROM node:16.20-bullseye-slim as stage-build
 ARG TARGETARCH
+
+ARG DEPENDENCIES="                    \
+        g++                           \
+        make                          \
+        python3"
+
+ARG APT_MIRROR=http://mirrors.ustc.edu.cn
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked,id=lina \
+    sed -i "s@http://.*.debian.org@${APT_MIRROR}@g" /etc/apt/sources.list \
+    && rm -f /etc/apt/apt.conf.d/docker-clean \
+    && ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
+    && apt-get update \
+    && apt-get install -y --no-install-recommends ${DEPENDENCIES} \
+    && echo "no" | dpkg-reconfigure dash \
+    && rm -rf /var/lib/apt/lists/*
+
 ARG NPM_REGISTRY="https://registry.npmmirror.com"
-
-WORKDIR /data
-
 RUN set -ex \
     && npm config set registry ${NPM_REGISTRY} \
     && yarn config set registry ${NPM_REGISTRY}
 
+WORKDIR /data
+
 ADD package.json yarn.lock /data
 RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lina \
     yarn install
@@ -19,6 +34,6 @@ RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lin
     sed -i "s@version-dev@${VERSION}@g" src/layout/components/NavHeader/About.vue \
     && yarn build
 
-FROM nginx:alpine
+FROM nginx:1.24-bullseye
 COPY --from=stage-build /data/lina /opt/lina
 COPY nginx.conf /etc/nginx/conf.d/default.conf

package.json

@@ -20,26 +20,29 @@
     "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
     "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
     "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
-    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja",
-    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja"
+    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@traptitech/markdown-it-katex": "^3.6.0",
     "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.21.1",
+    "axios": "0.28.0",
     "axios-retry": "^3.1.9",
     "cron-parser": "^4.0.0",
     "crypto-js": "^4.1.1",
     "css-color-function": "^1.3.3",
+    "decimal.js": "^10.4.3",
     "deepmerge": "^4.2.2",
-    "echarts": "^4.7.0",
+    "dompurify": "^3.1.6",
+    "echarts": "4.7.0",
     "element-ui": "2.13.2",
     "eslint-plugin-html": "^6.0.0",
+    "highlight.js": "^11.9.0",
     "install": "^0.13.0",
     "jquery": "^3.6.1",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.2.1",
-    "krry-transfer": "^1.7.3",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.21",
@@ -54,6 +57,8 @@
     "lodash.set": "^4.3.2",
     "lodash.topairs": "^4.3.0",
     "lodash.values": "^4.3.0",
+    "markdown-it": "^13.0.2",
+    "markdown-it-link-attributes": "^4.0.1",
     "moment": "^2.29.4",
     "moment-parseformat": "^4.0.0",
     "normalize.css": "7.0.0",
@@ -79,7 +84,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0",
+    "@babel/core": "7.18.6",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
@@ -93,6 +98,7 @@
     "chalk": "2.4.2",
     "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-vue": "5.2.2",
@@ -109,6 +115,7 @@
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
+    "strip-ansi": "^7.1.0",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",

public/index.html

@@ -27,6 +27,9 @@
         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>

public/theme/element-extra.css

@@ -424,7 +424,7 @@ td .el-button.el-button--mini {
 }
 
 .el-dialog  .el-dialog__body {
-  max-height: 90vh;
+  max-height: 80vh;
   overflow: auto;
   padding: 30px;
 }

src/api/asset.js

@@ -42,8 +42,10 @@ export function getCommandFilterList(data) {
 
 export function getCategoryTypes() {
   return request({
-    url: '/api/v1/assets/categories/',
+    url: '/api/v1/assets/categories/?limit=1000',
     method: 'get'
+  }).then(res => {
+    return res.results
   })
 }
 

src/api/ops.js

@@ -44,3 +44,30 @@ export function renameFile(playbookId, node) {
     data: node
   })
 }
+
+export function createJob(form) {
+  return request({
+    url: '/api/v1/ops/jobs/',
+    method: 'post',
+    data: form
+  })
+}
+
+export function StopJob(form) {
+  return request({
+    url: '/api/v1/ops/job-executions/stop/',
+    method: 'post',
+    data: form
+  })
+}
+
+export function JobUploadFile(form) {
+  return request({
+    url: '/api/v1/ops/jobs/upload/',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 60 * 60 * 1000,
+    data: form
+  })
+}
+

src/api/sessions.js

@@ -8,24 +8,11 @@ export function terminateSession(data) {
   })
 }
 
-export function getSessionDetail(id) {
+export function toggleLockSession(data) {
   return request({
-    url: `/api/v1/terminal/sessions/${id}/`,
-    method: 'get'
-  })
-}
-
-export function getSessionCommands(id) {
-  return request({
-    url: `/api/v1/terminal/commands/?session_id=${id}`,
-    method: 'get'
-  })
-}
-
-export function getTerminalDetail(id) {
-  return request({
-    url: `/api/v1/terminal/terminals/${id}/`,
-    method: 'get'
+    url: '/api/v1/terminal/tasks/toggle-lock-session/',
+    method: 'post',
+    data: data
   })
 }
 

src/api/settings.js

@@ -25,12 +25,28 @@ export function importLicense(formData) {
     data: formData
   })
 }
-export function testLdapSetting(data) {
-  return request({
-    disableFlashErrorMsg: true,
-    url: '/api/v1/settings/ldap/testing/config/',
-    method: 'post',
-    data: data
+export function testLdapSetting(data, refresh = true) {
+  let url = '/api/v1/settings/ldap/testing/config/'
+  if (refresh) {
+    url = url + '?refresh=1'
+  }
+  return new Promise((resolve, reject) => {
+    request({
+      disableFlashErrorMsg: true,
+      url: url,
+      method: 'post',
+      data: data
+    }).then(res => {
+      if (res.status !== 'running') {
+        resolve(res)
+      } else {
+        setTimeout(() => {
+          resolve(testLdapSetting(data, false))
+        }, 1000)
+      }
+    }).catch(error => {
+      reject(error)
+    })
   })
 }
 

src/api/users.js

@@ -12,7 +12,6 @@ export function getProfile(token) {
   return request({
     url: '/api/v1/users/profile/',
     method: 'get'
-    // params: { token }
   })
 }
 

src/assets/img/chatbot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="transparent" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot "><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>

src/components/AccountCreateUpdateForm/index.vue

@@ -1,312 +0,0 @@
-<template>
-  <AutoDataForm
-    v-if="!loading"
-    ref="AutoDataForm"
-    v-bind="$data"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/AutoDataForm'
-import { UpdateToken, UploadSecret } from '@/components/FormFields'
-import Select2 from '@/components/FormFields/Select2'
-import AssetSelect from '@/components/AssetSelect'
-import { encryptPassword } from '@/utils/crypto'
-import { Required, RequiredChange } from '@/components/DataForm/rules'
-import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
-
-export default {
-  name: 'AccountCreateForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    asset: {
-      type: Object,
-      default: null
-    },
-    platform: {
-      type: Object,
-      default: null
-    },
-    account: {
-      type: Object,
-      default: () => ({})
-    },
-    // 默认组件密码加密
-    encryptPassword: {
-      type: Boolean,
-      default: true
-    },
-    addTemplate: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      loading: true,
-      usernameChanged: false,
-      defaultPrivilegedAccounts: ['root', 'administrator'],
-      iPlatform: {
-        automation: {},
-        su_enabled: false,
-        protocols: [
-          {
-            name: 'ssh',
-            secret_types: ['password', 'ssh_key', 'token', 'access_key']
-          }
-        ]
-      },
-      url: '/api/v1/accounts/accounts/',
-      form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
-      encryptedFields: ['secret'],
-      fields: [
-        [this.$t('assets.Asset'), ['assets']],
-        [this.$t('accounts.AccountTemplate'), ['template']],
-        [this.$t('common.Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username']],
-        [this.$t('assets.Secret'), [
-          'secret_type', 'secret', 'ssh_key',
-          'token', 'access_key', 'passphrase'
-        ]],
-        [this.$t('common.Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
-      ],
-      fieldsMeta: {
-        assets: {
-          rules: [Required],
-          component: AssetSelect,
-          label: this.$t('assets.Asset'),
-          el: {
-            multiple: false
-          },
-          hidden: () => {
-            return this.platform || this.asset
-          }
-        },
-        template: {
-          component: Select2,
-          rules: [Required],
-          el: {
-            multiple: false,
-            ajax: {
-              url: '/api/v1/accounts/account-templates/',
-              transformOption: (item) => {
-                return { label: item.name, value: item.id }
-              }
-            }
-          },
-          hidden: () => {
-            return this.platform || this.asset || !this.addTemplate
-          }
-        },
-        on_invalid: {
-          rules: [Required],
-          label: this.$t('accounts.AccountPolicy'),
-          helpText: this.$t('accounts.BulkCreateStrategy'),
-          hidden: () => {
-            return this.platform || this.asset
-          }
-        },
-        name: {
-          rules: [RequiredChange],
-          on: {
-            input: ([value], updateForm) => {
-              if (!this.usernameChanged) {
-                if (!this.account?.name) {
-                  updateForm({ username: value })
-                }
-                const maybePrivileged = this.defaultPrivilegedAccounts.includes(value)
-                if (maybePrivileged) {
-                  updateForm({ privileged: true })
-                }
-              }
-            }
-          },
-          hidden: () => {
-            return this.addTemplate
-          }
-        },
-        username: {
-          el: {
-            disabled: !!this.account?.name
-          },
-          on: {
-            input: ([value], updateForm) => {
-              this.usernameChanged = true
-            },
-            change: ([value], updateForm) => {
-              const maybePrivileged = this.defaultPrivilegedAccounts.includes(value)
-              if (maybePrivileged) {
-                updateForm({ privileged: true })
-              }
-            }
-          },
-          hidden: () => {
-            return this.addTemplate
-          }
-        },
-        privileged: {
-          hidden: () => {
-            return this.addTemplate
-          }
-        },
-        su_from: {
-          component: Select2,
-          hidden: (formValue) => {
-            return !this.asset?.id || !this.iPlatform.su_enabled
-          },
-          el: {
-            multiple: false,
-            clearable: true,
-            ajax: {
-              url: `/api/v1/accounts/accounts/su-from-accounts/?account=${this.account?.id || ''}&asset=${this.asset?.id || ''}`,
-              transformOption: (item) => {
-                return { label: `${item.name}(${item.username})`, value: item.id }
-              }
-            }
-          }
-        },
-        su_from_username: {
-          label: this.$t('assets.UserSwitchFrom'),
-          hidden: (formValue) => {
-            return this.platform || this.asset
-          }
-        },
-        secret: {
-          label: this.$t('assets.Password'),
-          component: UpdateToken,
-          hidden: (formValue) => formValue.secret_type !== 'password' || this.addTemplate
-        },
-        ssh_key: {
-          label: this.$t('assets.PrivateKey'),
-          component: UploadSecret,
-          hidden: (formValue) => formValue.secret_type !== 'ssh_key' || this.addTemplate
-        },
-        passphrase: {
-          label: this.$t('assets.Passphrase'),
-          component: UpdateToken,
-          hidden: (formValue) => formValue.secret_type !== 'ssh_key' || this.addTemplate
-        },
-        token: {
-          label: this.$t('assets.Token'),
-          component: UploadSecret,
-          hidden: (formValue) => formValue.secret_type !== 'token' || this.addTemplate
-        },
-        access_key: {
-          id: 'access_key',
-          label: this.$t('assets.AccessKey'),
-          component: UploadSecret,
-          hidden: (formValue) => formValue.secret_type !== 'access_key' || this.addTemplate
-        },
-        secret_type: {
-          type: 'radio-group',
-          options: [],
-          hidden: () => {
-            return this.addTemplate
-          }
-        },
-        push_now: {
-          helpText: this.$t('accounts.AccountPush.WindowsPushHelpText'),
-          hidden: () => {
-            const automation = this.iPlatform.automation || {}
-            return !automation.push_account_enabled ||
-              !automation.ansible_enabled ||
-              !this.$hasPerm('accounts.push_account') ||
-              this.addTemplate
-          }
-        },
-        params: {
-          label: this.$t('assets.PushParams'),
-          component: AutomationParamsForm,
-          el: {
-            method: this.asset?.auto_config?.push_account_method
-          },
-          hidden: (formValue) => {
-            const automation = this.iPlatform.automation || {}
-            return !formValue.push_now ||
-              !automation.push_account_enabled ||
-              !automation.ansible_enabled ||
-              !this.$hasPerm('accounts.push_account') ||
-              this.addTemplate
-          }
-        },
-        comment: {
-          hidden: () => {
-            return this.addTemplate
-          }
-        }
-      },
-      hasSaveContinue: false
-    }
-  },
-  async mounted() {
-    try {
-      await this.getPlatform()
-      this.setSecretTypeOptions()
-    } finally {
-      this.loading = false
-    }
-  },
-  methods: {
-    async getPlatform() {
-      if (this.platform) {
-        this.iPlatform = this.platform
-      }
-      if (!this.asset || !this.asset.platform) {
-        return
-      }
-      const platformId = this.asset.platform.id
-      this.iPlatform = await this.$axios.get(`/api/v1/assets/platforms/${platformId}/`)
-    },
-    setSecretTypeOptions() {
-      const choices = [
-        {
-          label: this.$t('assets.Password'),
-          value: 'password'
-        },
-        {
-          label: this.$t('assets.SSHKey'),
-          value: 'ssh_key'
-        },
-        {
-          label: this.$t('assets.Token'),
-          value: 'token'
-        },
-        {
-          label: this.$t('assets.AccessKey'),
-          value: 'access_key'
-        }
-      ]
-      const secretTypes = []
-      this.iPlatform.protocols?.forEach(p => {
-        secretTypes.push(...p['secret_types'])
-      })
-      if (!this.form?.secret_type) {
-        this.form.secret_type = secretTypes[0]
-      }
-      this.fieldsMeta.secret_type.options = choices.filter(item => {
-        return secretTypes.indexOf(item.value) > -1
-      })
-    },
-    confirm(form) {
-      const secretType = form.secret_type || ''
-      if (secretType !== 'password') {
-        form.secret = form[secretType]
-      }
-      form.secret = this.encryptPassword ? encryptPassword(form.secret) : form.secret
-      if (!form.secret) {
-        delete form['secret']
-      }
-      if (this.account?.name) {
-        this.$emit('edit', form)
-      } else {
-        this.$emit('add', form)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -0,0 +1,191 @@
+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'
+
+export const accountFieldsMeta = (vm) => {
+  const defaultPrivilegedAccounts = ['root', 'administrator']
+  return {
+    assets: {
+      rules: [Required],
+      component: AssetSelect,
+      label: vm.$t('assets.Asset'),
+      el: {
+        multiple: false
+      },
+      hidden: () => {
+        return vm.platform || vm.asset
+      }
+    },
+    template: {
+      component: Select2,
+      rules: [Required],
+      el: {
+        multiple: false,
+        ajax: {
+          url: '/api/v1/accounts/account-templates/',
+          transformOption: (item) => {
+            return { label: item.name, value: item.id }
+          }
+        }
+      },
+      hidden: () => {
+        return vm.platform || vm.asset || !vm.addTemplate
+      }
+    },
+    on_invalid: {
+      rules: [Required],
+      label: vm.$t('accounts.AccountPolicy'),
+      helpText: vm.$t('accounts.BulkCreateStrategy'),
+      hidden: () => {
+        return vm.platform || vm.asset
+      }
+    },
+    name: {
+      label: vm.$t('common.Name'),
+      rules: [RequiredChange],
+      on: {
+        input: ([value], updateForm) => {
+          if (!vm.usernameChanged) {
+            if (!vm.account?.name) {
+              updateForm({ username: value })
+            }
+            const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+            if (maybePrivileged) {
+              updateForm({ privileged: true })
+            }
+          }
+        }
+      },
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    username: {
+      el: {
+        disabled: !!vm.account?.name
+      },
+      on: {
+        input: ([value], updateForm) => {
+          vm.usernameChanged = true
+        },
+        change: ([value], updateForm) => {
+          const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+          if (maybePrivileged) {
+            updateForm({ privileged: true })
+          }
+        }
+      },
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    privileged: {
+      label: vm.$t('assets.Privileged'),
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    su_from: {
+      component: Select2,
+      hidden: (formValue) => {
+        return !vm.asset?.id || !vm.iPlatform.su_enabled
+      },
+      el: {
+        multiple: false,
+        clearable: true,
+        ajax: {
+          url: `/api/v1/accounts/accounts/su-from-accounts/?account=${vm.account?.id || ''}&asset=${vm.asset?.id || ''}`,
+          transformOption: (item) => {
+            return { label: `${item.name}(${item.username})`, value: item.id }
+          }
+        }
+      }
+    },
+    su_from_username: {
+      label: vm.$t('assets.UserSwitchFrom'),
+      hidden: (formValue) => {
+        return vm.platform || vm.asset || vm.addTemplate
+      }
+    },
+    password: {
+      label: vm.$t('assets.Password'),
+      component: UpdateToken,
+      hidden: (formValue) => {
+        return formValue.secret_type !== 'password' || vm.addTemplate
+      }
+    },
+    ssh_key: {
+      label: vm.$t('assets.PrivateKey'),
+      component: UploadSecret,
+      hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
+    },
+    passphrase: {
+      label: vm.$t('assets.Passphrase'),
+      component: UpdateToken,
+      hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
+    },
+    token: {
+      label: vm.$t('assets.Token'),
+      component: UploadSecret,
+      hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
+    },
+    access_key: {
+      id: 'access_key',
+      label: vm.$t('assets.AccessKey'),
+      component: UploadSecret,
+      hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
+    },
+    api_key: {
+      id: 'api_key',
+      label: vm.$t('assets.ApiKey'),
+      component: UploadSecret,
+      hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
+    },
+    secret_type: {
+      type: 'radio-group',
+      options: [],
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    push_now: {
+      helpText: vm.$t('accounts.AccountPush.WindowsPushHelpText'),
+      hidden: (formValue) => {
+        const automation = vm.iPlatform.automation || {}
+        return !automation.push_account_enabled ||
+          !automation.ansible_enabled ||
+          !vm.$hasPerm('accounts.push_account') ||
+          (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
+          vm.addTemplate
+      }
+    },
+    params: {
+      label: vm.$t('assets.PushParams'),
+      component: AutomationParamsForm,
+      el: {},
+      hidden: (formValue) => {
+        const automation = vm.iPlatform.automation || {}
+        vm.fieldsMeta.params.el.method = vm.iPlatform.automation.push_account_method
+        vm.fieldsMeta.params.el.pushAccountParams = vm.iPlatform.automation.push_account_params
+        return !formValue.push_now ||
+          !automation.push_account_enabled ||
+          !automation.ansible_enabled ||
+          (formValue.secret_type === 'ssh_key' &&
+            vm.iPlatform.type.value === 'windows') ||
+          !vm.$hasPerm('accounts.push_account') ||
+          vm.addTemplate
+      }
+    },
+    is_active: {
+      label: vm.$t('common.IsActive')
+    },
+    comment: {
+      label: vm.$t('common.Comment'),
+      hidden: () => {
+        return vm.addTemplate
+      }
+    }
+  }
+}

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <AutoDataForm
+    v-if="!loading"
+    ref="AutoDataForm"
+    v-bind="$data"
+    @submit="confirm"
+  />
+</template>
+
+<script>
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+import { encryptPassword } from '@/utils/crypto'
+import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
+
+export default {
+  name: 'AccountCreateForm',
+  components: {
+    AutoDataForm
+  },
+  props: {
+    asset: {
+      type: Object,
+      default: null
+    },
+    platform: {
+      type: Object,
+      default: null
+    },
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    // 默认组件密码加密
+    encryptPassword: {
+      type: Boolean,
+      default: true
+    },
+    addTemplate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      usernameChanged: false,
+      iPlatform: {
+        automation: {},
+        su_enabled: false,
+        protocols: [
+          {
+            name: 'ssh',
+            secret_types: ['password', 'ssh_key', 'token', 'access_key', 'api_key']
+          }
+        ]
+      },
+      url: '/api/v1/accounts/accounts/',
+      form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
+      encryptedFields: ['secret'],
+      fields: [
+        [this.$t('assets.Asset'), ['assets']],
+        [this.$t('accounts.AccountTemplate'), ['template']],
+        [this.$t('common.Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username']],
+        [this.$t('assets.Secret'), [
+          'secret_type', 'password', 'ssh_key', 'token',
+          'access_key', 'passphrase', 'api_key'
+        ]],
+        [this.$t('common.Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
+      ],
+      fieldsMeta: accountFieldsMeta(this),
+      hasSaveContinue: false
+    }
+  },
+  async mounted() {
+    try {
+      await this.getPlatform()
+      this.setSecretTypeOptions()
+      this.getDefaultAssets()
+    } finally {
+      this.loading = false
+    }
+  },
+  methods: {
+    async getDefaultAssets() {
+      const assetId = this.$route.query.asset_id
+      if (assetId && !this.form.name) {
+        this.form.assets = [assetId]
+      }
+    },
+    async getPlatform() {
+      if (this.platform) {
+        this.iPlatform = this.platform
+      }
+      if (!this.asset || !this.asset.platform) {
+        return
+      }
+      const platformId = this.asset.platform.id
+      this.iPlatform = await this.$axios.get(`/api/v1/assets/platforms/${platformId}/`)
+    },
+    setSecretTypeOptions() {
+      const choices = [
+        {
+          label: this.$t('assets.Password'),
+          value: 'password'
+        },
+        {
+          label: this.$t('assets.SSHKey'),
+          value: 'ssh_key'
+        },
+        {
+          label: this.$t('assets.Token'),
+          value: 'token'
+        },
+        {
+          label: this.$t('assets.AccessKey'),
+          value: 'access_key'
+        },
+        {
+          label: this.$t('assets.ApiKey'),
+          value: 'api_key'
+        }
+      ]
+      const secretTypes = []
+      this.iPlatform.protocols?.forEach(p => {
+        secretTypes.push(...p['secret_types'])
+      })
+      if (!this.form?.secret_type) {
+        this.form.secret_type = secretTypes[0]
+      }
+      this.fieldsMeta.secret_type.options = choices.filter(item => {
+        return secretTypes.indexOf(item.value) > -1
+      })
+    },
+    confirm(form) {
+      const secretType = form.secret_type || 'password'
+      form.secret = form[secretType]
+      form.secret = this.encryptPassword ? encryptPassword(form.secret) : form.secret
+
+      // 如果不删除会明文显示
+      delete form[secretType]
+
+      if (!form.secret) {
+        delete form['secret']
+      }
+      if (this.account?.name) {
+        this.$emit('edit', form)
+      } else {
+        this.$emit('add', form)
+      }
+    }
+  }
+}
+</script>

src/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue

@@ -0,0 +1,87 @@
+<template>
+  <GenericUpdateFormDialog
+    v-if="visible"
+    :form-setting="formSetting"
+    :selected-rows="selectedRows"
+    :visible="visible"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import { GenericUpdateFormDialog } from '@/layout/components'
+import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
+import { encryptPassword } from '@/utils/crypto'
+
+export default {
+  name: 'AccountBulkUpdateDialog',
+  components: {
+    GenericUpdateFormDialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    selectedRows: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      formSetting: {
+        url: '/api/v1/accounts/accounts/',
+        hasSaveContinue: false,
+        fields: [],
+        fieldsMeta: accountFieldsMeta(this),
+        cleanOtherFormValue: (formValue) => {
+          for (const value of formValue) {
+            Object.keys(value).forEach((item, index, arr) => {
+              if (['ssh_key', 'token', 'access_key', 'api_key', 'password'].includes(item)) {
+                value['secret'] = encryptPassword(value[item])
+                delete value[item]
+              }
+            })
+          }
+          return formValue
+        }
+      }
+    }
+  },
+  created() {
+    this.filterFieldsMeta()
+  },
+  methods: {
+    filterFieldsMeta() {
+      let fields = ['privileged']
+      const fieldsMeta = {}
+      const secretFields = ['password', 'ssh_key', 'passphrase', 'token', 'access_key', 'api_key']
+      const secret_type = this.selectedRows[0].secret_type?.value || 'password'
+      for (const field of secretFields) {
+        if (secret_type === 'ssh_key' && field === 'passphrase') {
+          fields.push('passphrase')
+          this.formSetting.fieldsMeta['passphrase'].hidden = () => false
+          continue
+        }
+        if (secret_type === field) {
+          fields.push(field)
+          this.formSetting.fieldsMeta[field].hidden = () => false
+          continue
+        }
+        delete this.formSetting.fieldsMeta[field]
+      }
+      fields = fields.concat(['is_active', 'comment'])
+      for (const field of fields) {
+        fieldsMeta[field] = this.formSetting.fieldsMeta[field]
+      }
+      this.formSetting.fields = fields
+      this.formSetting.fieldsMeta = fieldsMeta
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -8,15 +8,14 @@
     :title="title"
     :visible.sync="iVisible"
     v-bind="$attrs"
-    width="70%"
     v-on="$listeners"
   >
     <AccountCreateUpdateForm
       v-if="!loading"
       ref="form"
       :account="account"
-      :asset="asset"
       :add-template="addTemplate"
+      :asset="asset"
       @add="addAccount"
       @edit="editAccount"
     />
@@ -24,8 +23,8 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import AccountCreateUpdateForm from '@/components/AccountCreateUpdateForm'
+import Dialog from '@/components/Dialog/index.vue'
+import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
 
 export default {
   name: 'CreateAccountDialog',
@@ -105,7 +104,7 @@ export default {
           this.$emit('add', true)
         }
       }).catch(error => {
-        this.iVisible = iVisible
+        this.iVisible = true
         this.handleResult(null, error)
       })
     },

src/components/Apps/AccountListTable/AccountList.vue

@@ -37,22 +37,30 @@
       :result="createAccountResults"
       :visible.sync="showResultDialog"
     />
+    <AccountBulkUpdateDialog
+      v-if="updateSelectedDialogSetting.visible"
+      :visible.sync="updateSelectedDialogSetting.visible"
+      v-bind="updateSelectedDialogSetting"
+      @update="handleAccountBulkUpdate"
+    />
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter } from '@/components/TableFormatters'
-import ViewSecret from './ViewSecret'
-import UpdateSecretInfo from './UpdateSecretInfo'
-import AccountCreateUpdate from './AccountCreateUpdate'
+import ListTable from '@/components/Table/ListTable/index.vue'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import ViewSecret from './ViewSecret.vue'
+import UpdateSecretInfo from './UpdateSecretInfo.vue'
+import AccountCreateUpdate from './AccountCreateUpdate.vue'
 import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
 import ResultDialog from './BulkCreateResultDialog.vue'
+import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
 
 export default {
   name: 'AccountListTable',
   components: {
+    AccountBulkUpdateDialog,
     ResultDialog,
     ListTable,
     UpdateSecretInfo,
@@ -98,6 +106,10 @@ export default {
       type: Boolean,
       default: true
     },
+    hasDeleteAction: {
+      type: Boolean,
+      default: true
+    },
     columnsMeta: {
       type: Object,
       default: () => {
@@ -107,12 +119,16 @@ export default {
       type: Array,
       default: () => ([
         'name', 'username', 'asset', 'privileged',
-        'secret_type', 'date_updated'
+        'secret_type', 'is_active', 'date_updated'
       ])
     },
     headerExtraActions: {
       type: Array,
       default: () => []
+    },
+    extraQuery: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -134,14 +150,8 @@ export default {
           app: 'assets',
           resource: 'account'
         },
-        extraQuery: {
-          order: '-date_updated'
-        },
+        extraQuery: this.extraQuery,
         columnsExclude: ['spec_info'],
-        columns: [
-          'name', 'username', 'asset', 'privileged',
-          'secret_type', 'source', 'actions'
-        ],
         columnsShow: {
           min: ['name', 'username', 'actions'],
           default: this.columnsDefault
@@ -237,21 +247,9 @@ export default {
                     })
                   }
                 },
-                {
-                  name: 'Delete',
-                  title: this.$t('common.Delete'),
-                  can: this.$hasPerm('accounts.delete_account'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
-                      this.$message.success(this.$tc('common.deleteSuccessMsg'))
-                      this.$refs.ListTable.reloadTable()
-                    })
-                  }
-                },
                 {
                   name: 'Test',
-                  title: this.$t('common.Test'),
+                  title: this.$t('accounts.Test'),
                   can: ({ row }) =>
                     !this.$store.getters.currentOrgIsRoot &&
                     this.$hasPerm('accounts.change_account') &&
@@ -291,6 +289,7 @@ export default {
         }
       },
       headerActions: {
+        hasLabelSearch: true,
         hasLeftActions: this.hasLeftActions,
         hasMoreActions: true,
         hasCreate: false,
@@ -350,6 +349,29 @@ export default {
           ...this.headerExtraActions
         ],
         extraMoreActions: [
+          {
+            name: 'BulkVerify',
+            title: this.$t('accounts.BulkVerify'),
+            type: 'primary',
+            fa: 'fa-link',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 &&
+                  ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                  !this.$store.getters.currentOrgIsRoot
+            },
+            callback: function({ selectedRows }) {
+              const ids = selectedRows.map(v => {
+                return v.id
+              })
+              this.$axios.post(
+                '/api/v1/accounts/accounts/tasks/',
+                { action: 'verify', accounts: ids }).then(res => {
+                openTaskPage(res['task'])
+              }).catch(err => {
+                this.$message.error(this.$tc('common.bulkVerifyErrorMsg' + ' ' + err))
+              })
+            }.bind(this)
+          },
           {
             name: 'ClearSecrets',
             title: this.$t('common.ClearSecret'),
@@ -359,7 +381,9 @@ export default {
               return selectedRows.length > 0 && vm.$hasPerm('accounts.change_account')
             },
             callback: function({ selectedRows }) {
-              const ids = selectedRows.map(v => { return v.id })
+              const ids = selectedRows.map(v => {
+                return v.id
+              })
               this.$axios.patch(
                 '/api/v1/accounts/accounts/clear-secret/',
                 { account_ids: ids }).then(() => {
@@ -368,6 +392,21 @@ export default {
                 this.$message.error(this.$tc('common.bulkClearErrorMsg' + ' ' + err))
               })
             }.bind(this)
+          },
+          {
+            name: 'actionUpdateSelected',
+            title: this.$t('accounts.AccountBatchUpdate'),
+            fa: 'batch-update',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 &&
+                !this.$store.getters.currentOrgIsRoot &&
+                vm.$hasPerm('accounts.change_account') &&
+                selectedRows.every(i => i.secret_type.value === selectedRows[0].secret_type.value)
+            },
+            callback: ({ selectedRows }) => {
+              vm.updateSelectedDialogSetting.selectedRows = selectedRows
+              vm.updateSelectedDialogSetting.visible = true
+            }
           }
         ],
         canBulkDelete: vm.$hasPerm('accounts.delete_account'),
@@ -376,6 +415,10 @@ export default {
           exclude: ['asset']
         },
         hasSearch: true
+      },
+      updateSelectedDialogSetting: {
+        visible: false,
+        selectedRows: []
       }
     }
   },
@@ -395,6 +438,31 @@ export default {
         actionColumn.formatterArgs.extraActions.push(item)
       }
     }
+    if (this.hasDeleteAction) {
+      this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
+        {
+          name: 'Delete',
+          title: this.$t('common.Delete'),
+          can: this.$hasPerm('accounts.delete_account'),
+          type: 'primary',
+          callback: ({ row }) => {
+            const msg = this.$t('accounts.AccountDeleteConfirmMsg')
+            this.$confirm(msg, this.$tc('common.Info'), {
+              type: 'warning',
+              confirmButtonClass: 'el-button--danger',
+              beforeClose: async(action, instance, done) => {
+                if (action !== 'confirm') return done()
+                this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
+                  done()
+                  this.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$tc('common.deleteSuccessMsg'))
+                })
+              }
+            })
+          }
+        }
+      )
+    }
   },
   methods: {
     onUpdateAuthDone(account) {
@@ -418,6 +486,10 @@ export default {
       setTimeout(() => {
         this.showResultDialog = true
       }, 100)
+    },
+    handleAccountBulkUpdate() {
+      this.updateSelectedDialogSetting.visible = false
+      this.$refs.ListTable.reloadTable()
     }
   }
 }

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -15,7 +15,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import DataTable from '@/components/DataTable/index.vue'
+import DataTable from '@/components/Table/DataTable/index.vue'
 
 export default {
   name: 'ResultDialog',

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -29,7 +29,7 @@ export default {
         tableConfig: {
           id: 'history_date',
           url: `/api/v1/accounts/account-secrets/${this.account.id}/histories/`,
-          columns: ['secret', 'secret_type', 'version', 'history_date'],
+          columns: ['secret', 'version', 'history_date'],
           columnsMeta: {
             secret: {
               label: this.$t('assets.Password'),

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -0,0 +1,112 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :visible.sync="show"
+    :width="'50'"
+    v-bind="$attrs"
+    @confirm="accountConfirmHandle"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { openTaskPage } from '@/utils/jms'
+
+export default {
+  name: 'RemoveAccount',
+  components: {
+    Dialog
+  },
+  props: {
+    accounts: {
+      type: Array,
+      default: () => []
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+      mfaDialogVisible: true
+    }
+  },
+  computed: {},
+  mounted() {
+    const url = `/api/v1/accounts/accounts/tasks/`
+    this.$axios.post(
+      url, { disableFlashErrorMsg: true, action: 'remove' }
+    ).then(resp => {
+      this.$axios.post(
+        `/api/v1/accounts/accounts/tasks/`,
+        {
+          action: 'remove',
+          gather_accounts: this.accounts.map(account => account.id)
+        }
+      ).then(res => {
+        openTaskPage(res['task'])
+      })
+    })
+  },
+  methods: {
+    accountConfirmHandle() {
+      this.show = false
+      this.mfaDialogVisible = false
+    },
+    exit() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item-textarea > > > .el-textarea__inner {
+  height: 110px;
+}
+
+.el-form-item {
+  border-bottom: 1px solid #EBEEF5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  > > > .el-form-item__label {
+    padding-right: 20px;
+    line-height: 30px;
+  }
+
+  > > > .el-form-item__content {
+    line-height: 30px;
+
+    pre {
+      margin: 0;
+    }
+  }
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .title {
+    color: #303133;
+    font-weight: 500;
+  }
+}
+</style>

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -29,8 +29,8 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import { UpdateToken, UploadKey } from '@/components/FormFields'
+import Dialog from '@/components/Dialog/index.vue'
+import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -1,12 +1,5 @@
 <template>
   <div>
-    <div v-if="mfaDialogVisible">
-      <UserConfirmDialog
-        :url="url"
-        @UserConfirmCancel="exit"
-        @UserConfirmDone="getAuthInfo"
-      />
-    </div>
     <Dialog
       :destroy-on-close="true"
       :show-cancel="false"
@@ -65,10 +58,9 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import PasswordHistoryDialog from './PasswordHistoryDialog'
-import UserConfirmDialog from '@/components/UserConfirmDialog'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import Dialog from '@/components/Dialog/index.vue'
+import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
@@ -76,7 +68,6 @@ export default {
   components: {
     Dialog,
     PasswordHistoryDialog,
-    UserConfirmDialog,
     ShowKeyCopyFormatter
   },
   props: {
@@ -92,6 +83,10 @@ export default {
       type: String,
       default: ''
     },
+    type: {
+      type: String,
+      default: 'account'
+    },
     title: {
       type: String,
       default: function() {
@@ -128,7 +123,10 @@ export default {
       const url = `/api/v1/accounts/account-secrets/${this.account.id}/histories/?limit=1`
       this.$axios.get(url, { disableFlashErrorMsg: true }).then(resp => {
         this.versions = resp.count
+        this.showSecretDialog()
       })
+    } else {
+      this.showSecretDialog()
     }
   },
   methods: {
@@ -142,14 +140,15 @@ export default {
         name: this.secretInfo.name,
         secret: encryptPassword(this.modifiedSecret)
       }
-      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, params).then(() => {
+      const url = this.type === 'account' ? `/api/v1/accounts/accounts` : `/api/v1/accounts/account-templates`
+      this.$axios.patch(`${url}/${this.account.id}/`, params).then(() => {
         this.$message.success(this.$tc('common.updateSuccessMsg'))
       })
     },
-    getAuthInfo() {
-      this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
-        this.secretInfo = resp
-        this.sshKeyFingerprint = resp?.spec_info?.ssh_key_fingerprint || '-'
+    showSecretDialog() {
+      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+        this.secretInfo = res
+        this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
       })
     },

src/components/Apps/AccountListTable/const.js

@@ -1,5 +1,5 @@
 import i18n from '@/i18n/i18n'
-import { ChoicesFormatter } from '@/components/TableFormatters'
+import { ChoicesFormatter } from '@/components/Table/TableFormatters'
 
 export const connectivityMeta = {
   label: i18n.t('assets.Connectivity'),
@@ -15,7 +15,7 @@ export const connectivityMeta = {
       err: 'text-danger'
     },
     getText({ cellValue }) {
-      if (cellValue?.value === '-') {
+      if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
         return '-'
       } else {
         return cellValue?.label

src/components/Apps/AssetRelationCard/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
+  <IBox :fa="icon" :title="title" :type="type" v-bind="$attrs">
     <table style="width: 100%">
       <tr>
         <td colspan="2">
-          <AssetSelect ref="assetSelect" :disabled="disabled" :can-select="canSelect" />
+          <AssetSelect ref="assetSelect" :can-select="canSelect" :disabled="disabled" />
         </td>
       </tr>
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :disabled="disabled" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :disabled="disabled" :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
         </td>
       </tr>
     </table>
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
-import AssetSelect from '@/components/AssetSelect'
+import IBox from '@/components/IBox/index.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 
 export default {
   name: 'AssetRelationCard',

src/components/Apps/AssetSelect/dialog.vue

@@ -1,10 +1,12 @@
 <template>
   <Dialog
+    :close-on-click-modal="false"
+    :loading-status="!isLoaded"
     :title="$tc('assets.Assets')"
     custom-class="asset-select-dialog"
-    top="1vh"
+    top="2vh"
     v-bind="$attrs"
-    width="80vw"
+    width="1000px"
     @cancel="handleCancel"
     @close="handleClose"
     @confirm="handleConfirm"
@@ -17,15 +19,17 @@
       :table-config="tableConfig"
       :tree-url="`${baseNodeUrl}children/tree/`"
       :url="baseUrl"
+      :tree-setting="treeSetting"
       class="tree-table"
       v-bind="$attrs"
+      @loaded="handleTableLoaded"
     />
   </Dialog>
 </template>
 
 <script>
-import AssetTreeTable from '@/components/AssetTreeTable'
-import Dialog from '@/components/Dialog'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
 
 export default {
   componentName: 'AssetSelectDialog',
@@ -52,11 +56,16 @@ export default {
     disabled: {
       type: [Boolean, Function],
       default: false
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     const vm = this
     return {
+      isLoaded: false,
       dialogVisible: false,
       rowSelected: _.cloneDeep(this.value) || [],
       rowsAdd: [],
@@ -83,16 +92,6 @@ export default {
               return row.platform.name
             }
           },
-          {
-            prop: 'protocols',
-            formatter: function(row) {
-              const data = row.protocols.map(p => {
-                return <el-tag size='mini'>{p.name}/{p.port} </el-tag>
-              })
-              return <span> {data} </span>
-            },
-            label: this.$t('assets.Protocols')
-          },
           {
             prop: 'actions',
             has: false
@@ -114,6 +113,7 @@ export default {
       headerActions: {
         hasLeftActions: false,
         hasRightActions: false,
+        hasLabelSearch: true,
         searchConfig: {
           getUrlQuery: false
         }
@@ -146,6 +146,9 @@ export default {
       if (selectValueIndex > -1) {
         this.rowSelected.splice(selectValueIndex, 1)
       }
+    },
+    handleTableLoaded() {
+      this.isLoaded = true
     }
   }
 }
@@ -168,7 +171,7 @@ export default {
     }
 
     .right {
-      height: calc(100vh - 200px);
+      min-height: 500px;
       overflow: auto;
     }
 

src/components/Apps/AssetSelect/index.vue

@@ -13,6 +13,7 @@
       ref="dialog"
       :base-node-url="baseNodeUrl"
       :base-url="baseUrl"
+      :tree-setting="treeSetting"
       :tree-url-query="treeUrlQuery"
       :value="value"
       :visible.sync="dialogVisible"
@@ -25,9 +26,8 @@
 </template>
 
 <script>
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
 import AssetSelectDialog from './dialog.vue'
-import { b } from 'css-color-function/lib/adjusters'
 
 export default {
   componentName: 'AssetSelect',
@@ -48,6 +48,10 @@ export default {
     value: {
       type: Array,
       default: () => []
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -76,7 +80,6 @@ export default {
     }
   },
   methods: {
-    b,
     handleFocus() {
       this.$refs.select2.selectRef.blur()
       this.dialogVisible = true
@@ -134,7 +137,8 @@ export default {
       padding: 5px;
 
       .ztree {
-        height: calc(100vh - 250px) !important;
+        min-height: 500px;
+        height: inherit !important;
       }
     }
 

src/components/Apps/AssetTreeTable/index.vue

@@ -1,10 +1,10 @@
 <template>
   <TreeTable
     ref="TreeList"
-    component="TabTree"
-    :table-config="tableConfig"
     :active-menu.sync="treeTableConfig.activeMenu"
+    :table-config="tableConfig"
     :tree-tab-config="treeTableConfig"
+    component="TabTree"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -12,13 +12,13 @@
       <slot name="table" />
     </template>
     <div slot="rMenu" slot-scope="{data}">
-      <slot name="rMenu" :data="data" />
+      <slot :data="data" name="rMenu" />
     </div>
   </TreeTable>
 </template>
 
 <script>
-import TreeTable from '../TreeTable'
+import TreeTable from '../../Table/TreeTable/index.vue'
 import { setRouterQuery, setUrlParam } from '@/utils/common'
 import $ from '@/utils/jquery-vendor'
 
@@ -31,6 +31,10 @@ 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/'
@@ -60,6 +64,7 @@ export default {
     const showAssets = this.treeSetting?.showAssets || this.showAssets
     const treeUrlQuery = this.setTreeUrlQuery()
     const assetTreeUrl = `${this.treeUrl}?assets=${showAssets ? '1' : '0'}&${treeUrlQuery}`
+    const vm = this
 
     return {
       treeTabConfig: {
@@ -81,7 +86,13 @@ export default {
               nodeUrl: this.nodeUrl,
               treeUrl: assetTreeUrl,
               callback: {
-                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
+                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode),
+                beforeRefresh: () => {
+                  const query = { ...this.$route.query, node_id: '', asset_id: '' }
+                  setTimeout(() => {
+                    vm.$router.replace({ query: query })
+                  }, 100)
+                }
               },
               ...this.treeSetting
             }
@@ -94,9 +105,9 @@ export default {
               showAssets: false,
               showSearch: false,
               customTreeHeaderName: this.$t('assets.BuiltinTree'),
-              url: '/api/v1/assets/nodes/category/tree/',
+              url: this.typeUrl,
               nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
-              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
               callback: {
                 onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
               }

src/components/Apps/AutomationParams/index.vue

@@ -2,21 +2,23 @@
   <div>
     <div>
       <el-button
+        :disabled="isDisabled"
         size="mini"
         type="primary"
-        :disabled="isDisabled"
         @click="onOpenDialog"
-      >{{ $tc('common.Setting') }}</el-button>
+      >
+        {{ $tc('common.Setting') }}
+      </el-button>
     </div>
     <Dialog
       v-if="visible"
-      width="60%"
-      :visible.sync="visible"
-      :title="title"
+      :destroy-on-close="true"
       :show-cancel="false"
       :show-confirm="false"
-      :destroy-on-close="true"
+      :title="title"
+      :visible.sync="visible"
       v-bind="$attrs"
+      width="60%"
       v-on="$listeners"
     >
       <AutoDataForm
@@ -31,9 +33,11 @@
 </template>
 
 <script>
-import { Dialog, AutoDataForm } from '@/components'
+import Dialog from '../../Dialog'
+import AutoDataForm from '../../Form/AutoDataForm'
 
 export default {
+  componentName: 'AutomationParams',
   components: {
     Dialog,
     AutoDataForm
@@ -57,19 +61,26 @@ export default {
       type: Array,
       default: () => []
     },
+    platforms: {
+      type: Array,
+      default: () => []
+    },
+    method: {
+      type: String,
+      default: ''
+    },
     url: {
       type: String,
       default: `/api/v1/assets/platform-automation-methods/`
     }
   },
   data() {
+    const vm = this
     return {
       remoteMeta: {},
       visible: false,
       isDisabled: true,
       form: this.value,
-      node_ids: this.nodes,
-      asset_ids: this.assets,
       config: {
         url: this.url,
         hasSaveContinue: false,
@@ -77,7 +88,8 @@ export default {
         method: 'get',
         fields: [],
         fieldsMeta: {}
-      }
+      },
+      onFieldChangeHandler: _.debounce(vm.handleFieldChange, 1000)
     }
   },
   computed: {
@@ -87,22 +99,27 @@ export default {
   },
   watch: {
     nodes: {
-      handler(val) {
-        this.node_ids = val
-        this.onFieldChangeHandle()
+      handler() {
+        this.onFieldChangeHandler()
       },
       deep: true
     },
     assets: {
-      handler(val) {
-        this.asset_ids = val
-        this.onFieldChangeHandle()
+      handler() {
+        this.onFieldChangeHandler()
       },
       deep: true
+    },
+    platforms: {
+      handler(newVal) {
+        this.onFieldChangeHandler()
+      },
+      deep: true,
+      immediate: true
     }
   },
-  created() {
-    this.getUrlMeta()
+  async mounted() {
+    await this.getUrlMeta()
   },
   methods: {
     async getUrlMeta() {
@@ -110,35 +127,34 @@ export default {
       this.remoteMeta = data.actions[this.config.method.toUpperCase()] || {}
     },
     async getFilterPlatforms() {
-      const res = await this.$axios.post(
+      return await this.$axios.post(
         '/api/v1/assets/platforms/filter-nodes-assets/',
         {
-          'node_ids': this.node_ids,
-          'asset_ids': this.asset_ids
+          'node_ids': this.nodes,
+          'asset_ids': this.assets,
+          'platform_ids': this.platforms.map(i => i.id || i.pk || i)
         }
       )
-      return res
     },
-    async onFieldChangeHandle() {
+    async handleFieldChange() {
       const platforms = await this.getFilterPlatforms()
-      let pushAccountMethods = platforms.map(i => i.automation?.push_account_method)
+      let pushAccountMethods = platforms.map(i => i.automation[this.method])
       pushAccountMethods = _.uniq(pushAccountMethods)
       // 检测是否有可设置的推送方式
       const hasCanSettingPushMethods = _.intersection(pushAccountMethods, Object.keys(this.remoteMeta))
       this.setFormConfig(hasCanSettingPushMethods)
-      if (hasCanSettingPushMethods.length > 0) {
-        this.isDisabled = false
-        this.$emit('input', this.form)
-      } else {
-        this.isDisabled = true
-        this.$emit('input', {})
-      }
+      this.isDisabled = hasCanSettingPushMethods.length <= 0
     },
     setFormConfig(methods) {
       const newForm = {}
       const fields = []
       const fieldsMeta = {}
       this.config.fields = []
+      // Todo: 未来改成后端处理，生成 serializer, 这里就不用判断类型了
+      const typeMapper = {
+        'string': 'input',
+        'boolean': 'switch'
+      }
 
       for (const method of methods) {
         const filterField = this.remoteMeta[method] || {}
@@ -155,7 +171,7 @@ export default {
           for (const [k, v] of Object.entries(filterField.children)) {
             const item = {
               ...v,
-              type: 'input'
+              type: typeMapper[v.type] || 'input'
             }
             delete item.default
             fieldsMeta[method].fields.push(k)
@@ -172,8 +188,11 @@ export default {
       this.visible = true
     },
     onSubmit(form) {
-      this.visible = false
+      this.form = form
       this.$emit('input', form)
+      setTimeout(() => {
+        this.visible = false
+      }, 100)
       this.$log.debug('Auto push form:', form)
     }
   }

src/components/Apps/BlockedIPs/BlockedIPList.vue

@@ -0,0 +1,97 @@
+<template>
+  <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import ListTable from '@/components/Table/ListTable/index.vue'
+
+export default {
+  name: 'BlockedIPList',
+  components: {
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      tableConfig: {
+        url: '/api/v1/settings/security/block-ip/',
+        columns: [
+          'ip', 'actions'
+        ],
+        columnsMeta: {
+          ip: {
+            label: this.$t('assets.ip')
+          },
+          actions: {
+            formatterArgs: {
+              hasDelete: false,
+              hasUpdate: false,
+              hasClone: false,
+              extraActions: [
+                {
+                  name: 'UnlockIP',
+                  title: this.$t('setting.Unblock'),
+                  can: this.$hasPerm('settings.change_security'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    this.$axios.post(
+                      '/api/v1/settings/security/unlock-ip/',
+                      { ips: [row.ip] }
+                    ).then(() => {
+                      vm.$message.success(this.$tc('common.UnlockSuccessMsg'))
+                      vm.$refs.ListTable.reloadTable()
+                    })
+                  }
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasCreate: false,
+        hasSearch: false,
+        hasRefresh: true,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: true,
+        hasRightActions: true,
+        extraMoreActions: [
+          {
+            name: 'UnlockSelected',
+            title: this.$t('setting.BulkUnblock'),
+            type: 'primary',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0
+            },
+            callback: function({ selectedRows }) {
+              vm.$axios.post(
+                '/api/v1/settings/security/unlock-ip/',
+                {
+                  ips: selectedRows.map(v => { return v.ip })
+                }
+              ).then(res => {
+                vm.$message.success(vm.$tc('common.UnlockSuccessMsg'))
+                vm.$refs.ListTable.reloadTable()
+              })
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/components/Apps/BlockedIPs/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div>
+      <el-button
+        size="mini"
+        type="primary"
+        @click="onOpenDialog"
+      >
+        {{ $tc('common.View') }}
+        <span>({{ $tc('setting.LockedIP', ipCounts ) }})</span>
+      </el-button>
+    </div>
+    <Dialog
+      :visible.sync="visible"
+      :title="title"
+      width="40%"
+      :show-cancel="false"
+      :show-confirm="false"
+      :destroy-on-close="true"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <BlockedIPList />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import { Dialog } from '@/components'
+import BlockedIPList from '@/components/Apps/BlockedIPs/BlockedIPList'
+
+export default {
+  componentName: 'BlockedIPs',
+  components: {
+    BlockedIPList,
+    Dialog
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('setting.BlockedIPS')
+      }
+    },
+    url: {
+      type: String,
+      default: `/api/v1/assets/platform-automation-methods/`
+    }
+  },
+  data() {
+    return {
+      remoteMeta: {},
+      visible: false,
+      form: this.value,
+      ipCounts: 0,
+      config: {
+        url: this.url,
+        hasSaveContinue: false,
+        hasButtons: true,
+        fields: [],
+        fieldsMeta: {}
+      }
+    }
+  },
+  created() {
+    this.getLockedIp()
+  },
+  methods: {
+    getLockedIp() {
+      this.$axios.get('/api/v1/settings/security/block-ip/').then(res => {
+        this.ipCounts = res.count
+      })
+    },
+    onOpenDialog() {
+      this.visible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/Apps/ChangeSecret/RecordViewSecret.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <Dialog
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :title="title"
+      :visible.sync="showSecret"
+      :width="'50'"
+      v-bind="$attrs"
+      @confirm="accountConfirmHandle"
+      v-on="$listeners"
+    >
+      <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
+        <el-form-item :label="$tc('accounts.AccountChangeSecret.OldSecret')">
+          <ShowKeyCopyFormatter
+            :cell-value="secretInfo.old_secret"
+            :col="{ formatterArgs: {
+              name: 'old_secret'
+            }}"
+          />
+        </el-form-item>
+        <el-form-item :label="$tc('accounts.AccountChangeSecret.NewSecret')">
+          <ShowKeyCopyFormatter
+            :cell-value="secretInfo.new_secret"
+            :col="{ formatterArgs: {
+              name: 'new_secret'
+            }}"
+          />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+
+export default {
+  name: 'RecordViewSecret',
+  components: {
+    Dialog,
+    ShowKeyCopyFormatter
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$tc('common.ViewSecret')
+      }
+    }
+  },
+  data() {
+    return {
+      secretInfo: {},
+      showSecret: false,
+      mfaDialogVisible: true
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.showSecretDialog()
+  },
+  methods: {
+    accountConfirmHandle() {
+      this.showSecret = false
+      this.mfaDialogVisible = false
+    },
+    showSecretDialog() {
+      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+        this.secretInfo = res
+        this.showSecret = true
+      })
+    },
+    exit() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .item-textarea >>> .el-textarea__inner {
+    height: 110px;
+  }
+
+  .el-form-item {
+    border-bottom: 1px solid #EBEEF5;
+    padding: 5px 0;
+    margin-bottom: 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    >>> .el-form-item__label {
+      padding-right: 20px;
+      line-height: 30px;
+    }
+
+    >>> .el-form-item__content {
+      line-height: 30px;
+
+      pre {
+        margin: 0;
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    display: block;
+    font-size: 13px;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .title {
+      color: #303133;
+      font-weight: 500;
+    }
+  }
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+  <div class="container">
+    <div class="chat-action">
+      <Select2
+        v-model="select.value"
+        :disabled="isLoading || isSelectDisabled"
+        v-bind="select"
+        @change="onSelectChange"
+      />
+    </div>
+    <div class="chat-input">
+      <el-input
+        v-model="inputValue"
+        :disabled="isLoading"
+        :placeholder="$tc('common.InputMessage')"
+        type="textarea"
+        @compositionend="isIM = false"
+        @compositionstart="isIM = true"
+        @keypress.native="onKeyEnter"
+      />
+      <div class="input-action">
+        <span class="right">
+          <i :class="{'active': inputValue }" class="fa fa-send" @click="onSendHandle" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Select2 from '../../../../Form/FormFields/Select2.vue'
+import { useChat } from '../../useChat.js'
+
+const { setLoading } = useChat()
+
+export default {
+  components: { Select2 },
+  props: {
+  },
+  data() {
+    return {
+      isIM: false,
+      inputValue: '',
+      select: {
+        url: '/api/v1/settings/chatai-prompts/',
+        value: '',
+        multiple: false,
+        placeholder: this.$t('common.Prompt'),
+        ajax: {
+          transformOption: (item) => {
+            return { label: item.name, value: item.content }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      isLoading: state => state.chat.loading
+    }),
+    isSelectDisabled() {
+      return !!this.select.value
+    }
+  },
+  methods: {
+    onKeyEnter(event) {
+      if (event.key === 'Enter') {
+        if ((!this.isIM && !event.shiftKey) || (this.isIM && event.ctrlKey)) {
+          event.preventDefault()
+          this.onSendHandle()
+        }
+      }
+    },
+    onSendHandle() {
+      if (!this.inputValue) return
+
+      setLoading(true)
+      this.$emit('send', this.inputValue)
+      this.inputValue = ''
+    },
+    onSelectChange(value) {
+      this.$emit('select-prompt', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  .chat-action {
+    width: 100%;
+    margin: 6px 0;
+    &>>> .el-select {
+      width: 50%;
+      .el-input__inner {
+        height: 28px;
+        line-height: 28px;
+        border-radius: 14px;
+        border-color: transparent;
+        background-color: #f7f7f8;
+        font-size: 13px;
+        color: rgba(0, 0, 0, 0.45);
+        &:hover {
+          background-color: #ededed;
+        }
+      }
+      .el-input__icon {
+        line-height: 0px;
+      }
+    }
+  }
+  .chat-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #DCDFE6;
+    border-radius: 12px;
+    &:has(.el-textarea__inner:focus) {
+      border: 1px solid var(--color-primary);
+    }
+    &>>> .el-textarea {
+      height: 100%;
+      .el-textarea__inner {
+        height: 100%;
+        padding: 8px 10px;
+        border: none;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+        resize: none;
+        &::-webkit-scrollbar {
+          width: 12px;
+        }
+      }
+    }
+    .el-textarea.is-disabled + .input-action {
+      background-color: #F5F7FA;
+      cursor: no-drop;
+      i {
+        cursor: no-drop;
+      }
+    }
+    .input-action {
+      overflow: hidden;
+      padding: 0 16px 15px;
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+      .right {
+        float: right;
+        .active {
+          color: var(--color-primary);
+        }
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,186 @@
+<template>
+  <div :class="{'user-role': isUserRole}" class="chat-item">
+    <div class="avatar">
+      <el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
+    </div>
+    <div class="content">
+      <div class="operational">
+        <span class="date">
+          {{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
+        </span>
+      </div>
+      <div class="message">
+        <div class="message-content">
+          <span v-if="isSystemError" class="error">
+            {{ item.message.content }}
+          </span>
+          <span v-else class="chat-text">
+            <MessageText :message="item.message" />
+          </span>
+        </div>
+        <div class="action">
+          <el-tooltip
+            v-if="isSystemError && isLoading"
+            :content="$tc('common.Reconnect')"
+            effect="dark"
+            placement="top"
+          >
+            <svg-icon icon-class="refresh" @click="onRefresh" />
+          </el-tooltip>
+          <el-dropdown v-else size="small" @command="handleCommand">
+            <span class="el-dropdown-link">
+              <i class="fa fa-ellipsis-v" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
+                {{ i.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MessageText from './MessageText.vue'
+import { mapState } from 'vuex'
+import { copy } from '@/utils/common'
+import { useChat } from '../../useChat.js'
+import { reconnect } from '@/utils/socket'
+
+const { setLoading, removeLoadingMessageInChat } = useChat()
+
+export default {
+  components: {
+    MessageText
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      chatUrl: require('@/assets/img/chat.png'),
+      userUrl: '/api/v1/settings/logo/',
+      dropdownOptions: [
+        {
+          action: 'copy',
+          label: this.$t('common.Copy')
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      isLoading: state => state.chat.loading
+    }),
+    isUserRole() {
+      return this.item.message?.role === 'user'
+    },
+    isSystemError() {
+      return this.item.type === 'error' && this.item.message?.role === 'assistant'
+    }
+  },
+  methods: {
+    onRefresh() {
+      reconnect()
+      removeLoadingMessageInChat()
+      setLoading(false)
+    },
+    handleCommand(value) {
+      if (value === 'copy') {
+        copy(this.item.message.content)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-item {
+  display: flex;
+  padding: 16px 14px 0;
+  &:last-child {
+    padding-bottom: 16px;
+  }
+  .avatar {
+    width: 22px;
+    height: 22px;
+    margin-top: 2px;
+    .header-avatar {
+      width: 100%;
+      height: 100%;
+      &>>> img {
+        background-color: #e5e5e7;
+      }
+    }
+  }
+  .content {
+    margin-left: 6px;
+    overflow: hidden;
+    .operational {
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
+      .copy {
+        float: right;
+        cursor: pointer;
+      }
+    }
+    .message {
+      display: -webkit-box;
+      .message-content {
+        flex: 1;
+        padding: 6px 10px;
+        border-radius: 2px 12px 12px;
+        background-color: #f0f1f5;
+      }
+      .action {
+        .svg-icon {
+          transform: translateY(50%);
+          margin-left: 3px;
+          cursor: pointer;
+        }
+        .el-dropdown {
+          height: 32px;
+          line-height: 37px;
+          font-size: 13px;
+          .el-dropdown-link {
+            i {
+              padding: 4px 5px;
+              font-size: 15px;
+              color: #8d9091;
+              &:hover {
+                color: #7b8085
+              }
+            }
+          }
+        }
+      }
+      .error {
+        color: red;
+      }
+    }
+  }
+}
+.user-role {
+  flex-direction: row-reverse;
+  .content {
+    margin-right: 10px;
+    .operational {
+      flex-direction: row-reverse;
+    }
+    .message {
+      flex-direction: row-reverse;
+      .message-content {
+        background-color: var(--menu-hover);
+        border-radius: 12px 2px 12px 12px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div ref="textRef" class="leading-relaxed break-words">
+      <span v-if="message.content === 'loading'" class="loading-box">
+        <span />
+        <span />
+        <span />
+      </span>
+      <div v-else class="inline-block markdown-body" v-html="text" />
+    </div>
+  </div>
+</template>
+
+<script>
+import MarkdownIt from 'markdown-it'
+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'
+
+/* eslint-disable vue/no-v-html */
+export default {
+  props: {
+    message: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      markdown: null
+    }
+  },
+  computed: {
+    text() {
+      const value = this.message?.content || ''
+      if (value && this.markdown) {
+        return this.markdown?.render(value)
+      }
+      return this.$xss.process(value)
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  updated() {
+    this.addCopyEvents()
+  },
+  destroyed() {
+    this.removeCopyEvents()
+  },
+  methods: {
+    init() {
+      const vm = this
+      this.markdown = new MarkdownIt({
+        html: false,
+        linkify: true,
+        highlight(code, language) {
+          const validLang = !!(language && hljs.getLanguage(language))
+          if (validLang) {
+            const lang = language || ''
+            return vm.highlightBlock(hljs.highlight(lang, code, true).value, lang)
+          }
+          return vm.highlightBlock(hljs.highlightAuto(code).value, '')
+        }
+      })
+      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) {
+      return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+    },
+    addCopyEvents() {
+      const copyBtn = document.querySelectorAll('.code-block-header__copy')
+      copyBtn.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const code = btn.parentElement?.nextElementSibling?.textContent
+          if (code) {
+            copy(code)
+          }
+        })
+      })
+    },
+    removeCopyEvents() {
+      if (this.$refs.textRef) {
+        const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
+        copyBtn.forEach((btn) => {
+          btn.removeEventListener('click', () => {})
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.markdown-body {
+  font-size: 13px;
+  &>>> p {
+    margin-bottom: 0 !important;
+  }
+  background: inherit;
+  &>>> pre {
+    padding: 0 0 6px 0;
+    .hljs.code-block-body {
+      border-radius: 4px;
+    }
+  }
+  &>>> .code-block-wrapper {
+    background: #1F2329;
+    padding: 2px 6px;
+    margin: 5px 0;
+
+    .code-block-body {
+      padding: 5px 10px 0;
+    };
+    .code-block-header {
+      margin-bottom: 4px;
+      overflow: hidden;
+      background: #353946;
+      color: #c2d1e1;
+
+      .code-block-header__copy {
+        float: right;
+        cursor: pointer;
+        &:hover {
+          color: #6e747b;
+        }
+      }
+    }
+    .hljs.code-block-body.javascript {
+      .hljs-comment {
+        display: block;
+      }
+    }
+  }
+}
+>>> .link-style {
+  color: #487bf4;
+  &:hover {
+    color: #275ee3;
+  }
+}
+.loading-box{
+  margin-left: 6px;
+}
+.loading-box span{
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-right: 5px;
+  border-radius: 50%;
+  vertical-align: middle;
+  background: #676A6c;
+  animation: load 1.2s ease infinite;
+}
+.loading-box span:last-child{
+  margin-right: 0;
+}
+@keyframes load{
+  0%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 0;
+  }
+}
+.loading-box span:nth-child(1){
+  animation-delay: 0.23s;
+}
+.loading-box span:nth-child(2){
+  animation-delay: 0.36s;
+}
+.loading-box span:nth-child(3){
+  animation-delay: 0.49s;
+}
+</style>

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

@@ -0,0 +1,271 @@
+<template>
+  <div class="chat-content">
+    <div id="scrollRef" class="chat-list">
+      <div v-if="showIntroduction" class="introduction">
+        <div v-for="(item, index) in introduction" :key="index" class="introduction-item" @click="sendIntroduction(item)">
+          <div class="head">
+            <i v-if="item.icon" :class="item.icon" />
+            <span class="title">{{ item.title }}</span>
+          </div>
+          <div class="content">
+            {{ item.content }}
+          </div>
+        </div>
+      </div>
+      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
+    </div>
+    <div class="input-box">
+      <el-button
+        v-if="isLoading && socket && socket.readyState === 1"
+        class="stop"
+        icon="fa fa-stop-circle-o"
+        round
+        size="small"
+        @click="onStopHandle"
+      >{{ $tc('common.Stop') }}</el-button>
+      <ChatInput ref="chatInput" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatInput from './ChatInput.vue'
+import ChatMessage from './ChatMessage.vue'
+import { mapState } from 'vuex'
+import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
+import { getInputFocus, useChat } from '../../useChat.js'
+
+const {
+  setLoading,
+  clearChats,
+  addChatMessageById,
+  addMessageToActiveChat,
+  newChatAndAddMessageById,
+  removeLoadingMessageInChat,
+  updateChaMessageContentById,
+  addTemporaryLoadingToChat
+} = useChat()
+
+export default {
+  components: {
+    ChatInput,
+    ChatMessage
+  },
+  props: {
+  },
+  data() {
+    return {
+      socket: {},
+      prompt: '',
+      currentConversationId: '',
+      showIntroduction: false,
+      introduction: [
+        {
+          title: this.$t('common.introduction.ConceptTitle'),
+          content: this.$t('common.introduction.ConceptContent')
+        },
+        {
+          title: this.$t('common.introduction.IdeaTitle'),
+          content: this.$t('common.introduction.IdeaContent')
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      isLoading: state => state.chat.loading,
+      activeChat: state => state.chat.activeChat
+    })
+  },
+  destroyed() {
+    closeWebSocket()
+  },
+  methods: {
+    init() {
+      this.initWebSocket()
+      this.initChatMessage()
+    },
+    initWebSocket() {
+      const { NODE_ENV, VUE_APP_KAEL_HOST } = process.env || {}
+      const api = '/kael/chat/system/'
+      const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+      const path = `${protocol}://${window.location.host}${api}`
+      const index = VUE_APP_KAEL_HOST?.indexOf('://')
+      const localPath = protocol + VUE_APP_KAEL_HOST?.substring(index, VUE_APP_KAEL_HOST?.length) + api
+      const url = NODE_ENV === 'development' ? localPath : path
+      createWebSocket(url, this.onWebSocketMessage)
+    },
+    initChatMessage() {
+      this.prompt = ''
+      this.showIntroduction = true
+      this.currentConversationId = ''
+      this.$refs.chatInput.select.value = ''
+      const chat = {
+        message: {
+          content: this.$t('common.ChatHello'),
+          role: 'assistant',
+          create_time: new Date()
+        }
+      }
+      newChatAndAddMessageById(chat)
+      setLoading(false)
+    },
+    onWebSocketMessage(data) {
+      if (data.type === 'message') {
+        this.onChatMessage(data)
+      }
+      if (data.type === 'error') {
+        this.onSystemMessage(data)
+      }
+    },
+    onChatMessage(data) {
+      if (data.conversation_id) {
+        setLoading(true)
+        removeLoadingMessageInChat()
+        this.currentConversationId = data.conversation_id
+        updateChaMessageContentById(data.message.id, data)
+      }
+      if (data.message?.type === 'finish') {
+        setLoading(false)
+        getInputFocus()
+      }
+    },
+    onSystemMessage(data) {
+      data.message = {
+        content: data.system_message,
+        role: 'assistant',
+        create_time: new Date()
+      }
+      removeLoadingMessageInChat()
+      addMessageToActiveChat(data)
+      this.socketReadyStateSuccess = false
+      setLoading(true)
+    },
+    onSendHandle(value) {
+      this.showIntroduction = false
+      this.socket = ws || {}
+      if (ws?.readyState === 1) {
+        this.socketReadyStateSuccess = true
+        const chat = {
+          message: {
+            content: value,
+            role: 'user',
+            create_time: new Date()
+          }
+        }
+        const message = {
+          content: value,
+          prompt: this.prompt,
+          conversation_id: this.currentConversationId || ''
+        }
+        addChatMessageById(chat)
+        onSend(message)
+        addTemporaryLoadingToChat()
+      } else {
+        const chat = {
+          message: {
+            content: this.$t('common.ConnectionDropped'),
+            role: 'assistant',
+            create_time: new Date()
+          },
+          type: 'error'
+        }
+        addChatMessageById(chat)
+        this.socketReadyStateSuccess = false
+        setLoading(true)
+      }
+    },
+    onSelectPromptHandle(value) {
+      this.prompt = value
+      this.currentConversationId = ''
+      this.showIntroduction = false
+      this.onSendHandle(value)
+    },
+    onNewChat() {
+      clearChats()
+      this.initChatMessage()
+    },
+    onStopHandle() {
+      this.$axios.post(
+        '/kael/interrupt_current_ask/',
+        { id: this.currentConversationId || '' }
+      ).finally(() => {
+        removeLoadingMessageInChat()
+        setLoading(false)
+      })
+    },
+    sendIntroduction(item) {
+      this.showIntroduction = false
+      this.onSendHandle(item.content)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+
+  .introduction {
+    padding: 16px 14px 0;
+
+    .introduction-item {
+      padding: 12px 14px;
+      border-radius: 8px;
+      margin-top: 16px;
+      background-color: var(--menu-hover);
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: 0 0 2px 2px #00000014;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+      .head {
+        margin-bottom: 2px;
+        .title {
+          font-weight: 500;
+          color: #373739;
+        }
+      }
+      .content {
+        display: inline-block;
+        color: #a7a7ab;
+        word-wrap: break-word;
+      }
+    }
+  }
+  .chat-list {
+    flex: 1;
+    position: relative;
+    padding: 0 15px 25px;
+    overflow-y: auto;
+    user-select: text;
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+  }
+  .input-box {
+    position: relative;
+    height: 160px;
+    padding: 0 15px;
+    margin-bottom: 15px;
+    border-top: 1px solid #ececec;
+  }
+  .stop {
+    position: absolute;
+    top: -37px;
+    left: 50%;
+    z-index: 11;
+    transform: translateX(-50%);
+    >>> i {
+      margin-right: 4px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="container">
+    <div class="close-sidebar">
+      <i v-if="hasClose" class="el-icon-close" @click="onClose" />
+    </div>
+    <el-tabs v-model="active" :tab-position="'right'" @tab-click="handleClick">
+      <el-tab-pane v-for="(item) in submenu" :key="item.name" :name="item.name">
+        <span slot="label">
+          <el-tooltip effect="dark" placement="left" :content="item.label">
+            <svg-icon :icon-class="item.icon" />
+          </el-tooltip>
+        </span>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    active: {
+      type: String,
+      default: 'chat'
+    },
+    hasClose: {
+      type: Boolean,
+      default: true
+    },
+    submenu: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      this.$emit('tab-click', tab)
+    },
+    onClose() {
+      this.$parent.onClose()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #f0f1f5;
+  .close-sidebar {
+    height: 48px;
+    padding: 12px 0;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer;
+    i {
+      font-size: 16px;
+      font-weight: 600;
+      padding: 4px;
+      border-radius: 2px;
+      &:hover {
+        color: var(--color-primary);
+        background: var(--menu-hover);
+      }
+    }
+  }
+}
+>>> .el-tabs {
+  .el-tabs__item {
+    padding: 0 13px;
+    font-size: 15px;
+    :hover {
+      color: #7b8085;
+    }
+  }
+}
+</style>

src/components/Apps/ChatAi/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="chat">
+    <div class="container">
+      <div class="header">
+        <div class="left">
+          <img :src="robotUrl" alt="">
+          <span class="title">{{ title }}</span>
+        </div>
+        <span class="new" @click="onNewChat">
+          <i class="el-icon-plus" />
+          <span>{{ $tc('common.NewChat') }}</span>
+        </span>
+      </div>
+      <div class="content">
+        <keep-alive>
+          <component :is="active" ref="component" />
+        </keep-alive>
+      </div>
+    </div>
+    <div class="sidebar">
+      <Sidebar v-bind="$attrs" :active.sync="active" :submenu="submenu" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Sidebar from './components/Sidebar/index.vue'
+import Chat from './components/ChitChat/index.vue'
+import { getInputFocus } from './useChat.js'
+import { ws } from '@/utils/socket'
+
+export default {
+  components: {
+    Chat,
+    Sidebar
+  },
+  props: {
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('setting.ChatAI')
+      }
+    },
+    drawerPanelVisible: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      active: 'chat',
+      robotUrl: require('../../../assets/img/robot-assistant.png'),
+      submenu: [
+        {
+          name: 'chat',
+          label: this.$t('common.Chat'),
+          icon: 'chat'
+        }
+      ]
+    }
+  },
+  watch: {
+    drawerPanelVisible(value) {
+      if (value && !ws) {
+        this.initWebSocket()
+      }
+    }
+  },
+  methods: {
+    initWebSocket() {
+      this.$refs.component?.init()
+    },
+    onClose() {
+      this.$parent.show = false
+    },
+    onNewChat() {
+      this.active = 'chat'
+      this.$nextTick(() => {
+        this.$refs.component?.onNewChat()
+        getInputFocus()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chat {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      overflow: hidden;
+      border-bottom: 1px solid #ececec;
+      .left {
+        img {
+          width: 22px;
+          height: 22px;
+          vertical-align: sub;
+        }
+        .title {
+          display: inline-block;
+          font-size: 18px;
+          color: black;
+        }
+      }
+      .new {
+        display: inline-block;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 16px;
+        padding: 0 10px;
+        transform: translateY(32%);
+        color: var(--color-primary);
+        background-color: #f7f7f8;
+        cursor: pointer;
+        font-size: 13px;
+        &:hover {
+          background-color: #ededed;
+        }
+      }
+    }
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+  .sidebar {
+    height: 100%;
+    width: 42px;
+  }
+}
+</style>

src/components/Apps/ChatAi/useChat.js

@@ -0,0 +1,80 @@
+import store from '@/store'
+import { pageScroll } from '@/utils/common'
+
+export const getInputFocus = () => {
+  const dom = document.querySelector('.chat-input .el-textarea__inner')
+  setTimeout(() => dom?.focus(), 200)
+}
+
+export function useChat() {
+  const chatStore = {}
+
+  const setLoading = (loading) => {
+    store.commit('chat/setLoading', loading)
+  }
+
+  const onNewChat = (name) => {
+    const data = {
+      name: name || `new chat`,
+      id: 1,
+      conversation_id: '',
+      chats: []
+    }
+    store.commit('chat/addChatToStore', data)
+  }
+
+  const clearChats = () => {
+    store.commit('chat/clearChats')
+  }
+
+  const addMessageToActiveChat = (chat) => {
+    store.commit('chat/addMessageToActiveChat', chat)
+  }
+
+  const removeLoadingMessageInChat = () => {
+    store.commit('chat/removeLoadingMessageInChat')
+  }
+
+  const addChatMessageById = (chat) => {
+    store.commit('chat/addMessageToActiveChat', chat)
+    if (chat?.conversation_id) {
+      store.commit('chat/setActiveChatConversationId', chat.conversation_id)
+    }
+    pageScroll('scrollRef')
+  }
+
+  const addTemporaryLoadingToChat = () => {
+    const temporaryChat = {
+      message: {
+        content: 'loading',
+        role: 'assistant',
+        create_time: new Date()
+      }
+    }
+    addChatMessageById(temporaryChat)
+  }
+
+  const newChatAndAddMessageById = (chat) => {
+    onNewChat(chat.message.content)
+    addChatMessageById(chat)
+  }
+
+  const updateChaMessageContentById = (id, data) => {
+    store.commit('chat/updateChaMessageContentById', { id, data })
+    pageScroll('scrollRef')
+  }
+
+  return {
+    chatStore,
+    setLoading,
+    onNewChat,
+    clearChats,
+    getInputFocus,
+    addMessageToActiveChat,
+    newChatAndAddMessageById,
+    removeLoadingMessageInChat,
+    addChatMessageById,
+    addTemporaryLoadingToChat,
+    updateChaMessageContentById
+  }
+}

src/components/Apps/DrawerPanel/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <div ref="drawer" :class="{show: show}" class="drawer">
+    <div :style="{'background-color': modal ? 'rgba(0, 0, 0, .3)' : 'transparent'}" class="modal" />
+    <div :style="{'width': width}" class="drawer-panel">
+      <div v-show="!show" ref="dragBox" class="handle-button">
+        <i v-if="icon.startsWith('fa') || icon.startsWith('el')" :class="show ? 'el-icon-close': icon" />
+        <img v-else :src="icon" alt="">
+      </div>
+      <div class="drawer-panel-item">
+        <slot :drawer-panel-visible="show" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DrawerPanel',
+  props: {
+    icon: {
+      type: String,
+      default: 'el-icon-setting'
+    },
+    width: {
+      type: String,
+      default: '440px'
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    clickNotClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      this.$emit('toggle', this.show)
+    }
+  },
+  mounted() {
+    this.init()
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const element = this.$refs.drawer
+    element.remove()
+    window.removeEventListener('click', this.closeSidebar)
+  },
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        const dragBox = this.$refs.dragBox
+        const clientOffset = {}
+        dragBox.addEventListener('mousedown', (event) => {
+          const offsetX = dragBox.getBoundingClientRect().left
+          const offsetY = dragBox.getBoundingClientRect().top
+          const innerX = event.clientX - offsetX
+          const innerY = event.clientY - offsetY
+
+          clientOffset.clientX = event.clientX
+          clientOffset.clientY = event.clientY
+          document.onmousemove = function(event) {
+            dragBox.style.left = event.clientX - innerX + 'px'
+            dragBox.style.top = event.clientY - innerY + 'px'
+            const dragDivTop = window.innerHeight - dragBox.getBoundingClientRect().height
+            const dragDivLeft = window.innerWidth - dragBox.getBoundingClientRect().width
+            dragBox.style.left = dragDivLeft + 'px'
+            dragBox.style.left = '-48px'
+            if (dragBox.getBoundingClientRect().top <= 0) {
+              dragBox.style.top = '0px'
+            }
+            if (dragBox.getBoundingClientRect().top >= dragDivTop) {
+              dragBox.style.top = dragDivTop + 'px'
+            }
+            event.preventDefault()
+            event.stopPropagation()
+          }
+          document.onmouseup = function() {
+            document.onmousemove = null
+            document.onmouseup = null
+          }
+        }, false)
+        dragBox.addEventListener('mouseup', (event) => {
+          const clientX = event.clientX
+          const clientY = event.clientY
+          if (this.isDifferenceWithinThreshold(clientX, clientOffset.clientX) && this.isDifferenceWithinThreshold(clientY, clientOffset.clientY)) {
+            this.show = !this.show
+          }
+        })
+      })
+    },
+    isDifferenceWithinThreshold(num1, num2, threshold = 5) {
+      const difference = Math.abs(num1 - num2)
+      return difference <= threshold
+    },
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.drawer-panel')
+      if (!parent && evt.target.className === 'modal') {
+        this.show = false
+      }
+    },
+    insertToBody() {
+      const element = this.$refs.drawer
+      const body = document.querySelector('body')
+      body.insertBefore(element, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .3);
+  z-index: -1;
+}
+
+.drawer-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  min-width: 260px;
+  height: 100vh;
+  user-select: none;
+  transition: transform .25s cubic-bezier(.7, .3, .1, 1);
+  box-shadow: 0 0 8px 4px #00000014;
+  transform: translate(100%);
+  background: #FFFFFF;
+  z-index: 1200;
+}
+
+.drawer-panel-item {
+  height: 100%;
+}
+
+.drawer-panel-item::-webkit-scrollbar-track {
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+}
+
+.show .modal {
+  z-index: 1003;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.show .drawer-panel {
+  transform: translate(0);
+}
+
+.handle-button {
+  position: absolute;
+  bottom: 20%;
+  left: -48px;
+  width: 48px;
+  height: 45px;
+  line-height: 45px;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 20px 0 0 20px;
+  z-index: 0;
+  pointer-events: auto;
+  color: #fff;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 8px 4px #00000014;
+  cursor: pointer;
+
+  &:hover {
+    left: -50px !important;
+    width: 50px !important;
+    transform: scale(1.06);
+  }
+  i {
+    font-size: 20px;
+    line-height: 45px;
+  }
+  img {
+    width: 22px;
+    height: 22px;
+    transform: translateY(10%);
+    margin-left: 3px;
+  }
+}
+</style>

src/components/Apps/GatewayDialog/index.vue

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

src/components/Apps/GrantedAssets/index.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script type="text/jsx">
-import TreeTable from '../TreeTable'
-import { DetailFormatter } from '@/components/TableFormatters'
+import TreeTable from '../../Table/TreeTable/index.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+import { AccountInfoFormatter } from '@/components/Table/TableFormatters'
+import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
 
 export default {
   name: 'GrantedAssets',
@@ -57,9 +59,11 @@ export default {
       tableConfig: {
         url: this.tableUrl,
         hasTree: true,
+        columnsExtra: ['view_account'],
         columnsExclude: ['spec_info'],
-        columnShow: {
-          min: ['name', 'address', 'accounts']
+        columnsShow: {
+          min: ['name', 'address', 'accounts'],
+          default: ['name', 'address', 'platform', 'view_account', 'connectivity']
         },
         columnsMeta: {
           name: {
@@ -70,7 +74,13 @@ export default {
           },
           actions: {
             has: false
-          }
+          },
+          view_account: {
+            label: this.$t('assets.Account'),
+            formatter: AccountInfoFormatter,
+            width: '100px'
+          },
+          connectivity: connectivityMeta
         }
       },
       headerActions: {

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-row :gutter="24">
+    <el-col :md="20" :sm="22">
+      <ListTable v-bind="config" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/Table/ListTable/index.vue'
+import { toM2MJsonParams } from '@/utils/jms'
+
+export default {
+  name: 'AssetJsonTab',
+  components: {
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    const [key, value] = toM2MJsonParams(this.object.assets)
+    return {
+      config: {
+        headerActions: {
+          hasLeftActions: false,
+          hasImport: false,
+          hasExport: false
+        },
+        tableConfig: {
+          url: `/api/v1/assets/assets/?${key}=${value}`,
+          columns: ['name', 'address', 'platform',
+            'type', 'is_active'
+          ],
+          columnsMeta: {
+            name: {
+              label: this.$t('assets.Asset'),
+              formatter: (row) => {
+                const to = {
+                  name: 'AssetDetail',
+                  params: { id: row.id }
+                }
+                if (this.$hasPerm('assets.view_asset')) {
+                  return <router-link to={to} class='text-link'>{row.name}</router-link>
+                } else {
+                  return <span>{row.name}</span>
+                }
+              }
+            },
+            actions: {
+              has: false
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    iUrl() {
+      return `/api/v1/users/users/`
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-row :gutter="24">
+    <el-col :md="20" :sm="22">
+      <ListTable v-bind="config" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/Table/ListTable/index.vue'
+import { toM2MJsonParams } from '@/utils/jms'
+
+export default {
+  name: 'User',
+  components: {
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    const [key, value] = toM2MJsonParams(this.object.users)
+    return {
+      config: {
+        headerActions: {
+          hasLeftActions: false,
+          hasImport: false,
+          hasExport: false
+        },
+        tableConfig: {
+          url: `/api/v1/users/users/?${key}=${value}`,
+          columns: [
+            'name', 'username', 'groups', 'system_roles',
+            'org_roles', 'source', 'is_valid'
+          ],
+          columnsMeta: {
+            name: {
+              label: this.$t('common.Name'),
+              formatter: (row) => {
+                const to = {
+                  name: 'UserDetail',
+                  params: { id: row.id }
+                }
+                if (this.$hasPerm('users.view_user')) {
+                  return <router-link to={to} class='text-link'>{row.name}</router-link>
+                } else {
+                  return <span>{row.name}</span>
+                }
+              }
+            },
+            system_roles: {
+              label: this.$t('users.SystemRoles'),
+              formatter: (row) => {
+                return row['system_roles'].map(item => item['display_name']).join(', ') || '-'
+              },
+              filters: [],
+              columnKey: 'system_roles'
+            },
+            org_roles: {
+              label: this.$t('users.OrgRoles'),
+              formatter: (row) => {
+                return row['org_roles'].map(item => item['display_name']).join(', ') || '-'
+              },
+              filters: [],
+              columnKey: 'org_roles',
+              has: () => {
+                return this.$store.getters.hasValidLicense && !this.currentOrgIsRoot
+              }
+            },
+            actions: {
+              has: false
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    iUrl() {
+      return `/api/v1/users/users/`
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Apps/ResourceActivity/index.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
-import DiffDetail from '@/components/Dialog/DiffDetail'
+import IBox from '@/components/IBox/index.vue'
+import DiffDetail from '@/components/Dialog/DiffDetail.vue'
 import { openTaskPage } from '@/utils/jms'
 
 export default {

src/components/Apps/UserConfirmDialog/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <Dialog
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="title"
+    :visible.sync="visible"
+    class="dialog-content"
+    v-bind="$attrs"
+    width="600px"
+    @confirm="visible = false"
+    v-on="$listeners"
+  >
+    <div v-if="confirmTypeRequired === 'relogin'">
+      <el-row :gutter="24" style="margin: 0 auto;">
+        <el-col :md="24" :sm="24">
+          <el-alert
+            :title="$tc('auth.ReLoginTitle')"
+            center
+            style="margin-bottom: 20px;"
+            type="error"
+          />
+        </el-col>
+      </el-row>
+      <el-row :gutter="24" style="margin: 0 auto;">
+        <el-col :md="24" :sm="24">
+          <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
+            {{ this.$t('auth.ReLogin') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div v-else>
+      <el-row :gutter="24" style="margin: 0 auto;">
+        <el-col :md="24" :sm="24" :span="24" class="add">
+          <el-select
+            v-model="subTypeSelected"
+            style="width: 100%; margin-bottom: 20px;"
+            @change="handleSubTypeChange"
+          >
+            <el-option
+              v-for="item of subTypeChoices"
+              :key="item.name"
+              :disabled="item.disabled"
+              :label="item.display_name"
+              :value="item.name"
+            />
+          </el-select>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24" style="margin: 0 auto;">
+        <el-col :md="24" :sm="24" style="display: flex; margin-bottom: 20px;">
+          <el-input
+            v-model="secretValue"
+            :placeholder="inputPlaceholder"
+            :show-password="showPassword"
+            @keyup.enter.native="handleConfirm"
+          />
+          <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
+            <el-button
+              :disabled="smsBtnDisabled"
+              size="mini"
+              style="line-height:20px; float: right;"
+              type="primary"
+              @click="sendSMSCode"
+            >
+              {{ smsBtnText }}
+            </el-button>
+          </span>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24" style="margin: 10px auto;">
+        <el-col :md="24" :sm="24">
+          <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
+            {{ this.$t('common.Confirm') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </div>
+  </Dialog>
+</template>
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { encryptPassword } from '@/utils/crypto'
+
+export default {
+  name: 'UserConfirmDialog',
+  components: {
+    Dialog
+  },
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    handler: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      title: this.$t('common.CurrentUserVerify'),
+      smsWidth: 0,
+      subTypeSelected: '',
+      inputPlaceholder: '',
+      smsBtnText: this.$t('common.SendVerificationCode'),
+      smsBtnDisabled: false,
+      confirmTypeRequired: '',
+      subTypeChoices: [],
+      secretValue: '',
+      visible: false,
+      callback: null,
+      cancel: null,
+      processing: false
+    }
+  },
+  computed: {
+    showPassword() {
+      return this.confirmTypeRequired === 'password'
+    }
+  },
+  mounted() {
+    this.$eventBus.$on('showConfirmDialog', this.performConfirm)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('showConfirmDialog', this.performConfirm)
+  },
+  methods: {
+    handleSubTypeChange(val) {
+      this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
+      this.smsWidth = val === 'sms' ? 6 : 0
+    },
+    performConfirm: _.throttle(function({ response, callback, cancel }) {
+      if (this.processing || this.visible) {
+        return
+      }
+      this.processing = true
+      this.callback = callback
+      this.cancel = cancel
+      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.confirmTypeRequired = data.confirm_type
+
+        if (this.confirmTypeRequired === 'relogin') {
+          this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
+            this.callback()
+            this.visible = false
+          }).catch(() => {
+            this.title = this.$t('auth.NeedReLogin')
+            this.visible = true
+          })
+          return
+        }
+        this.subTypeChoices = data.content
+        const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
+        this.subTypeSelected = defaultSubType.name
+        this.inputPlaceholder = defaultSubType.placeholder
+        this.visible = true
+      }).catch((err) => {
+        const data = err.response?.data
+        const msg = data?.error || data?.detail || data?.msg || this.$t('common.GetConfirmTypeFailed')
+        this.$message.error(msg)
+        this.cancel(err)
+      }).finally(() => {
+        this.processing = false
+      })
+    }, 300),
+    logout() {
+      window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
+    },
+    sendSMSCode() {
+      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
+        this.$message.success(this.$tc('common.VerificationCodeSent'))
+        let time = 60
+        const interval = setInterval(() => {
+          const originText = this.smsBtnText
+          this.smsBtnText = this.$t('common.Pending') + `: ${time}`
+          this.smsBtnDisabled = true
+          time -= 1
+
+          if (time === 0) {
+            this.smsBtnText = originText
+            this.smsBtnDisabled = false
+            clearInterval(interval)
+          }
+        }, 1000)
+      })
+    },
+    handleConfirm() {
+      if (this.confirmTypeRequired === 'relogin') {
+        return this.logout()
+      }
+      if (this.subTypeSelected === 'otp' && this.secretValue.length !== 6) {
+        return this.$message.error(this.$tc('common.MFAErrorMsg'))
+      }
+      const data = {
+        confirm_type: this.confirmTypeRequired,
+        mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
+        secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
+      }
+      this.$axios.post(`/api/v1/authentication/confirm/`, data).then(res => {
+        this.callback()
+        this.secretValue = ''
+        this.visible = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .dialog-content >>> .el-dialog__footer {
+    padding: 0;
+  }
+
+  .dialog-content >>> .el-dialog {
+    padding: 8px;
+
+    .el-dialog__body {
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+  }
+
+  .confirm-btn {
+    width: 100%;
+    line-height: 20px;
+  }
+
+</style>

src/components/Cards/DetailCard/ItemValue.vue

@@ -17,6 +17,9 @@ export default {
       default: null
     }
   },
+  data() {
+    return {}
+  },
   computed: {
     displayValue() {
       if ([null, undefined, ''].includes(this.value)) {
@@ -64,8 +67,19 @@ export default {
     }
   },
   render(h) {
+    let formatterData = ''
     if (typeof this.formatter === 'function') {
-      return this.formatter(this.item, this.value)
+      const data = this.formatter(this.item, this.value)
+      if (data instanceof Promise) {
+        data.then(res => {
+          formatterData = res
+        })
+      } else {
+        formatterData = data
+      }
+      return (
+        <span>{formatterData}</span>
+      )
     }
     if (this.value instanceof Array) {
       const newArr = this.value || []

src/components/Cards/DetailCard/auto.vue

@@ -1,9 +1,9 @@
 <template>
-  <DetailCard v-if="!loading && hasObject" :items="items" v-bind="$attrs" />
+  <DetailCard v-if="!loading && hasObject && items.length > 0" :items="items" v-bind="$attrs" />
 </template>
 
 <script>
-import DetailCard from './index'
+import DetailCard from './index.vue'
 import { copy, toSafeLocalDateStr } from '@/utils/common'
 
 export default {
@@ -106,16 +106,28 @@ export default {
 
         if (Array.isArray(value)) {
           if (typeof value[0] === 'object') {
-            value.forEach(item => {
-              const fieldName = `${name}.${item.name}`
-              if (excludes.includes(fieldName)) {
-                return
-              }
-              this.items.push({
-                key: item.label,
-                value: item.value
+            const firstValue = value[0]
+            if (firstValue.hasOwnProperty('name')) {
+              value.forEach(item => {
+                const fieldName = `${name}.${item.name}`
+                if (excludes.includes(fieldName)) {
+                  return
+                }
+                this.items.push({
+                  key: item.label,
+                  value: item.value
+                })
               })
-            })
+            } else {
+              value.forEach((item, index) => {
+                const v = Object.entries(item).map(([key, value]) => `${key}:${value}`).join(', ')
+                const data = { value: v }
+                if (index === 0) {
+                  data['key'] = label
+                }
+                this.items.push(data)
+              })
+            }
           } else if (typeof value[0] === 'string') {
             value.forEach((item, index) => {
               let data = {}

src/components/Cards/DetailCard/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <IBox :title="title" :fa="fa">
+  <IBox :fa="fa" :title="title">
     <el-form class="content" label-position="left" label-width="25%">
-      <el-form-item v-for="item in items" :key="item.key" :label="item.key">
-        <ItemValue class="item-value" :value="item.value" v-bind="item" />
+      <el-form-item v-for="item in iItems" :key="item.key" :label="item.key">
+        <ItemValue :value="item.value" class="item-value" v-bind="item" />
       </el-form-item>
     </el-form>
     <slot />
@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import IBox from '../IBox'
-import ItemValue from './ItemValue'
+import IBox from '../../IBox/index.vue'
+import ItemValue from './ItemValue.vue'
 
 export default {
   name: 'DetailCard',
@@ -35,6 +35,13 @@ export default {
       type: String,
       default: 'left'
     }
+  },
+  data() {
+    return {
+      iItems: this.items.filter(item => {
+        return !item.hasOwnProperty('has') || item.has === true
+      })
+    }
   }
 }
 </script>

src/components/Cards/RelationCard/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <IBox :type="type" :title="title" v-bind="$attrs">
-    <table style="width: 100%;table-layout:fixed;" class="CardTable">
+  <IBox :title="title" :type="type" v-bind="$attrs">
+    <table class="CardTable" style="width: 100%;table-layout:fixed;">
       <tr>
         <td colspan="2">
           <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" v-bind="select2" />
@@ -9,7 +9,7 @@
       <slot />
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :loading="submitLoading" :disabled="iDisabled" @click="addObjects">
+          <el-button :disabled="iDisabled" :loading="submitLoading" :type="type" size="small" @click="addObjects">
             {{ $t('common.Add') }}
           </el-button>
         </td>
@@ -17,12 +17,12 @@
       <template v-if="showHasObjects">
         <tr v-for="obj of iHasObjects" :key="obj.value" class="item">
           <td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
-            <el-tooltip style="margin: 4px;" effect="dark" :content="obj.label" placement="left">
+            <el-tooltip :content="obj.label" effect="dark" placement="left" style="margin: 4px;">
               <b>{{ obj.label }}</b>
             </el-tooltip>
           </td>
           <td>
-            <el-button size="mini" :disabled="iDisabled" type="danger" style="float: right" @click="removeObject(obj)">
+            <el-button :disabled="iDisabled" size="mini" style="float: right" type="danger" @click="removeObject(obj)">
               <i class="fa fa-minus" />
             </el-button>
           </td>
@@ -30,7 +30,7 @@
       </template>
       <tr v-if="params.hasMore && showHasMore" class="item">
         <td colspan="2">
-          <el-button :type="type" :disabled="iDisabled" size="small" style="width: 100%" @click="loadMore">
+          <el-button :disabled="iDisabled" :type="type" size="small" style="width: 100%" @click="loadMore">
             <i class="fa fa-arrow-down" />
             {{ $t('common.More') }}
           </el-button>
@@ -41,10 +41,11 @@
 </template>
 
 <script>
-import Select2 from '../FormFields/Select2'
-import IBox from '../IBox'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import IBox from '../../IBox/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import { mapGetters } from 'vuex'
+
 export default {
   name: 'RelationCard',
   components: {
@@ -102,6 +103,10 @@ export default {
       type: Function,
       default: (obj, that) => {}
     },
+    allowCreate: {
+      type: Boolean,
+      default: false
+    },
     onDeleteSuccess: {
       type: Function,
       default(obj, that) {
@@ -145,6 +150,10 @@ export default {
         that.$refs.select2.clearSelected()
         that.$message.success(that.$t('common.AddSuccessMsg'))
       }
+    },
+    getHasObjects: {
+      type: Function,
+      default: null // (objectIds) => {}
     }
   },
   data() {
@@ -162,7 +171,8 @@ export default {
         options: this.objects,
         value: this.value,
         disabled: this.disabled,
-        disabledValues: []
+        disabledValues: [],
+        allowCreate: this.allowCreate
       }
     }
   },
@@ -257,9 +267,15 @@ export default {
         return
       }
       this.select2.disabledValues = this.hasObjectsId
-      const resp = await createSourceIdCache(this.hasObjectsId)
-      this.params.spm = resp.spm
-      await this.loadHasObjects()
+      if (this.getHasObjects) {
+        this.getHasObjects(this.hasObjectsId).then((data) => {
+          this.iHasObjects = data
+        })
+      } else {
+        const resp = await createSourceIdCache(this.hasObjectsId)
+        this.params.spm = resp.spm
+        await this.loadHasObjects()
+      }
     },
     removeObject(obj) {
       this.performDelete(obj, this).then(

src/components/Dialog/index.vue

@@ -9,11 +9,13 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot />
+    <div v-loading="loadingStatus">
+      <slot />
+    </div>
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
-        <el-button v-if="showCancel" @click="onCancel">{{ cancelTitle }}</el-button>
-        <el-button v-if="showConfirm" :loading="loadingStatus" type="primary" @click="onConfirm">
+        <el-button v-if="showCancel && showButtons" @click="onCancel">{{ cancelTitle }}</el-button>
+        <el-button v-if="showConfirm && showButtons" :disabled="loadingStatus" type="primary" @click="onConfirm">
           {{ confirmTitle }}
         </el-button>
       </slot>
@@ -29,16 +31,6 @@ export default {
       type: String,
       default: 'Title'
     },
-    showCancel: {
-      type: Boolean,
-      default: true
-    },
-    cancelTitle: {
-      type: String,
-      default() {
-        return this.$t('common.Cancel')
-      }
-    },
     top: {
       type: String,
       default: '3vh'
@@ -51,29 +43,46 @@ export default {
       type: Boolean,
       default: true
     },
-    loadingStatus: {
-      type: Boolean,
-      default: false
-    },
     confirmTitle: {
       type: String,
       default() {
         return this.$t('common.Confirm')
       }
     },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelTitle: {
+      type: String,
+      default() {
+        return this.$t('common.Cancel')
+      }
+    },
+    showButtons: {
+      type: Boolean,
+      default: true
+    },
+    loadingStatus: {
+      type: Boolean,
+      default: false
+    },
     maxWidth: {
       type: String,
       default: '1200px'
     }
   },
   data() {
-    return {}
+    return {
+    }
   },
   computed: {
     iWidth() {
-      return this.$store.getters.isMobile ? '80%' : this.width
+      return this.$store.getters.isMobile ? '1000px' : this.width
     }
   },
+  mounted() {
+  },
   methods: {
     onCancel() {
       this.$emit('cancel')
@@ -88,7 +97,11 @@ export default {
 <style lang="scss" scoped>
   .dialog >>> .el-dialog {
     border-radius: 0.3em;
-    max-width: 1500px;
+    max-width: min(100vw, 1500px);
+
+    .el-icon-circle-check {
+      display: none;
+    }
 
     &__header {
       box-sizing: border-box;
@@ -111,9 +124,14 @@ export default {
       justify-content: flex-end;
     }
   }
-
+  @media (max-width: 900px) {
+    .dialog >>> .el-dialog {
+      max-width: calc(100% - 30px);
+    }
+  }
   .dialog-footer >>> button.el-button {
     font-size: 13px;
     padding: 10px 20px;
   }
+
 </style>

src/components/Form/AutoDataForm/components/NestedField.vue

@@ -1,16 +1,19 @@
 <template>
   <DataForm
+    v-if="!loading"
     :disabled="disabled"
     :fields="iFields"
     :form="value"
     style="margin-left: -26%;margin-right: -6%"
     v-bind="kwargs"
+    @change="updateValue($event)"
+    @input="updateValue($event)"
     v-on="$listeners"
   />
 </template>
 
 <script>
-import DataForm from '@/components/DataForm'
+import DataForm from '@/components/Form/DataForm/index.vue'
 
 export default {
   name: 'NestedField',
@@ -37,6 +40,8 @@ export default {
   },
   data() {
     return {
+      loading: false,
+      formJson: JSON.stringify(this.value),
       kwargs: {
         hasReset: false,
         hasSaveContinue: false,
@@ -65,7 +70,26 @@ export default {
       return fields
     }
   },
+  watch: {
+    value: {
+      handler(val) {
+        const valJson = JSON.stringify(val)
+        // 如果不想等，证明是 value 自己变化导致的， 需要重新渲染
+        if (valJson !== this.formJson) {
+          this.loading = true
+          setTimeout(() => {
+            this.loading = false
+          }, 10)
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
+    updateValue(val) {
+      this.formJson = JSON.stringify(val)
+      this.$emit('input', val)
+    },
     objectToString(obj) {
       let data = ''
       // eslint-disable-next-line prefer-const

src/components/Form/AutoDataForm/index.vue

@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import DataForm from '../DataForm'
-import FormGroupHeader from '@/components/FormGroupHeader'
-import { FormFieldGenerator } from '@/components/AutoDataForm/utils'
+import DataForm from '../DataForm/index.vue'
+import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
+import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
 
 export default {
   name: 'AutoDataForm',
@@ -67,6 +67,9 @@ export default {
     }
   },
   computed: {
+    dataForm() {
+      return this.$refs.dataForm
+    },
     iForm() {
       const iForm = {}
       Object.entries(this.form).forEach(([key, value]) => {

src/components/Form/AutoDataForm/utils.js

@@ -1,13 +1,12 @@
 import Vue from 'vue'
-import Select2 from '@/components/FormFields/Select2'
-import ObjectSelect2 from '@/components/FormFields/NestedObjectSelect2'
-import NestedField from '@/components/AutoDataForm/components/NestedField'
-import Switcher from '@/components/FormFields/Switcher'
-import rules from '@/components/DataForm/rules'
-import BasicTree from '@/components/FormFields/BasicTree'
-import JsonEditor from '@/components/FormFields/JsonEditor'
+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 } from '@/utils/common'
-import ListField from '@/components/FormFields/ListField.vue'
+import TagInput from '@/components/Form/FormFields/TagInput.vue'
 
 export class FormFieldGenerator {
   constructor(emit) {
@@ -45,13 +44,14 @@ export class FormFieldGenerator {
         break
       case 'field':
         type = ''
-        field.component = Select2
+        field.component = ObjectSelect2
         if (fieldRemoteMeta.required) {
           field.el.clearable = false
         }
-        if (fieldRemoteMeta.child && fieldRemoteMeta.child.type === 'nested object') {
-          field.component = ObjectSelect2
-        }
+        field.el.label = field.label
+        // if (fieldRemoteMeta.child && fieldRemoteMeta.child.type === 'nested object') {
+        //   field.component = ObjectSelect2
+        // }
         break
       case 'string':
         type = 'input'
@@ -69,13 +69,14 @@ export class FormFieldGenerator {
         break
       case 'list':
         type = 'input'
-        field.component = ListField
+        field.component = TagInput
         break
       case 'object_related_field':
         field.component = ObjectSelect2
         break
       case 'm2m_related_field':
         field.component = ObjectSelect2
+        field.el.label = field.label
         break
       case 'nested object':
         type = 'nestedField'
@@ -85,6 +86,10 @@ export class FormFieldGenerator {
         field.el = { ...field.el, ...fieldMeta }
         field.el.fields = this.generateNestFields(field, fieldMeta, fieldRemoteMeta)
         field.el.errors = {}
+        field.hidden = () => {
+          const hidden = fieldMeta['hiddenFields'] || (() => field.el.fields.length === 0)
+          return hidden(fieldMeta, fieldRemoteMeta, field.el.fields)
+        }
         break
       default:
         type = 'input'

src/components/Form/CronTab/Crontab.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <el-tabs type="border-card">
-      <el-tab-pane v-if="shouldHide('min')" :label="$tc('common.CronTab.min')">
+      <el-tab-pane v-if="shouldHide('min')" :label="$tc('common.CronTab.min')" class="crontab-panel">
         <CrontabMin
           ref="cronmin"
           :check="checkNumber"
@@ -59,38 +59,38 @@
             <td>
               <el-input
                 v-model.trim="contabValueObj.min"
-                min="0"
                 max="5"
-                size="small"
+                min="0"
                 onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+                size="mini"
               />
             </td>
             <td>
               <el-input
                 v-model.trim="contabValueObj.hour"
-                size="small"
                 onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+                size="mini"
               />
             </td>
             <td>
               <el-input
                 v-model.trim="contabValueObj.day"
-                size="small"
                 onkeyup="value=value.replace(/[^\0-9\\-\*\,]/g,'')"
+                size="mini"
               />
             </td>
             <td>
               <el-input
                 v-model.trim="contabValueObj.month"
-                size="small"
                 onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+                size="mini"
               />
             </td>
             <td>
               <el-input
                 v-model.trim="contabValueObj.week"
-                size="small"
                 onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+                size="mini"
               />
             </td>
           </tbody>
@@ -100,7 +100,7 @@
           <div style="font-size: 13px;">{{ contabValueString }}</div>
         </div>
       </div>
-      <CrontabResult :ex="contabValueString" />
+      <CrontabResult :ex="contabValueString" @crontabDiffChange="crontabDiffChangeHandle" />
 
       <div class="pop_btn">
         <el-button
@@ -130,7 +130,7 @@ import CrontabWeek from './components/Crontab-Week.vue'
 import CrontabResult from './components/Crontab-Result.vue'
 
 export default {
-  name: 'Vcrontab',
+  name: 'VCrontab',
   components: {
     CrontabMin,
     CrontabHour,
@@ -167,7 +167,8 @@ export default {
         week: '*'
         // year: "",
       },
-      newContabValueString: ''
+      newContabValueString: '',
+      crontabDiff: 0
     }
   },
   computed: {
@@ -364,6 +365,12 @@ export default {
     },
     // 填充表达式
     submitFill() {
+      const crontabDiffMin = this.crontabDiff / 1000 / 60
+      if (crontabDiffMin > 0 && crontabDiffMin < 10) {
+        const msg = this.$tc('common.crontabDiffError')
+        this.$message.error(msg)
+        return
+      }
       this.$emit('fill', this.contabValueString)
       this.hidePopup()
     },
@@ -381,13 +388,16 @@ export default {
       for (const j in this.contabValueObj) {
         this.changeRadio(j, this.contabValueObj[j])
       }
+    },
+    crontabDiffChangeHandle(diff) {
+      this.crontabDiff = diff
     }
   }
 }
 </script>
-<style scoped>
+<style lang='scss' scoped>
 .pop_btn {
-  text-align: center;
+  float: right;
   margin-top: 20px;
 }
 
@@ -453,6 +463,12 @@ export default {
   overflow-y: auto;
 }
 
+.crontab-panel {
+  > > > .el-input-number {
+    margin: 0 5px
+  }
+}
+
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item {
   margin-bottom: 10px;

src/components/Form/CronTab/components/Crontab-Day.vue

@@ -10,15 +10,15 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('common.CronTab.from') }}
-        <el-input-number v-model="cycle01" :min="0" :max="31" /> -
-        <el-input-number v-model="cycle02" :min="0" :max="31" /> {{ this.$t('common.CronTab.day') }}
+        <el-input-number v-model="cycle01" :max="31" :min="0" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="31" :min="0" size="mini" /> {{ this.$t('common.CronTab.day') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
         {{ this.$t('common.CronTab.every') }}
-        <el-input-number v-model="average02" :min="1" :max="31" /> {{ this.$t('common.CronTab.day') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :max="31" :min="1" size="mini" /> {{ this.$t('common.CronTab.day') }}{{ this.$t('common.CronTab.executeOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -27,8 +27,8 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          clearable
           :placeholder="$tc('common.CronTab.manyChoose')"
+          clearable
           multiple
           style="width:100%"
         >

src/components/Form/CronTab/components/Crontab-Hour.vue

@@ -10,15 +10,15 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
         {{ this.$t('common.CronTab.from') }}
-        <el-input-number v-model="cycle01" :min="0" :max="60" /> -
-        <el-input-number v-model="cycle02" :min="0" :max="60" /> {{ this.$t('common.CronTab.hour') }}
+        <el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('common.CronTab.hour') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('common.CronTab.every') }}
-        <el-input-number v-model="average02" :min="1" :max="60" /> {{ this.$t('common.CronTab.hour') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('common.CronTab.hour') }}{{ this.$t('common.CronTab.executeOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -27,8 +27,8 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          clearable
           :placeholder="$tc('common.CronTab.manyChoose')"
+          clearable
           multiple
           style="width:100%"
         >

src/components/Form/CronTab/components/Crontab-Min.vue

@@ -7,18 +7,11 @@
       </el-radio>
     </el-form-item>
 
-    <el-form-item>
-      <el-radio v-model="radioValue" :label="2">
-        {{ this.$t('common.CronTab.from') }}
-        <el-input-number v-model="cycle01" :min="0" :max="60" /> -
-        <el-input-number v-model="cycle02" :min="0" :max="60" /> {{ this.$t('common.CronTab.min') }}
-      </el-radio>
-    </el-form-item>
-
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('common.CronTab.from') }}
-        <el-input-number v-model="average02" :min="1" :max="60" /> {{ this.$t('common.CronTab.min') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :max="60" :min="1" size="mini" />
+        {{ this.$t('common.CronTab.min') }}{{ this.$t('common.CronTab.executeOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -27,13 +20,13 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          clearable
           :placeholder="$tc('common.CronTab.manyChoose')"
+          clearable
           multiple
-          style="width:100%"
           size="small"
+          style="width:100%"
         >
-          <el-option v-for="item in 60" :key="item" :value="item-1">{{ item-1 }}</el-option>
+          <el-option v-for="item in 60" :key="item" :value="item-1">{{ item - 1 }}</el-option>
         </el-select>
       </el-radio>
     </el-form-item>
@@ -158,7 +151,7 @@ export default {
 </script>
 
 <style scoped>
-	.el-form-item--small.el-form-item {
-    margin-bottom: 10px;
-  }
+.el-form-item--small.el-form-item {
+  margin-bottom: 10px;
+}
 </style>

src/components/Form/CronTab/components/Crontab-Month.vue

@@ -10,15 +10,15 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
         {{ this.$t('common.CronTab.from') }}
-        <el-input-number v-model="cycle01" :min="1" :max="12" /> -
-        <el-input-number v-model="cycle02" :min="1" :max="12" /> {{ this.$t('common.CronTab.month') }}
+        <el-input-number v-model="cycle01" :max="12" :min="1" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="12" :min="1" size="mini" /> {{ this.$t('common.CronTab.month') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('common.CronTab.every') }}
-        <el-input-number v-model="average02" :min="1" :max="12" /> {{ this.$t('common.CronTab.month') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :max="12" :min="1" size="mini" /> {{ this.$t('common.CronTab.month') }}{{ this.$t('common.CronTab.executeOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -27,8 +27,8 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          clearable
           :placeholder="$tc('common.CronTab.manyChoose')"
+          clearable
           multiple
           style="width:100%"
         >

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

@@ -14,6 +14,7 @@
 <script>
 import parser from 'cron-parser'
 import { toSafeLocalDateStr } from '@/utils/common'
+
 export default {
   name: 'CrontabResult',
   props: {
@@ -51,6 +52,10 @@ export default {
           const cur = interval.next().toString()
           this.resultList.push(toSafeLocalDateStr(cur))
         }
+        const first = new Date(this.resultList[0])
+        const second = new Date(this.resultList[1])
+        const diff = Math.abs(second - first)
+        this.$emit('crontabDiffChange', diff)
       } catch (error) {
         this.isShow = false
         // debug(error, 'error')

src/components/Form/CronTab/components/Crontab-Week.vue

@@ -10,8 +10,8 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('common.CronTab.cycleFromWeek') }}
-        <el-input-number v-model="cycle01" :min="1" :max="7" /> -
-        <el-input-number v-model="cycle02" :min="1" :max="7" />
+        <el-input-number v-model="cycle01" :max="7" :min="1" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="7" :min="1" size="mini" />
       </el-radio>
     </el-form-item>
 
@@ -20,12 +20,14 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          clearable
           :placeholder="$tc('common.CronTab.manyChoose')"
+          clearable
           multiple
           style="width:100%"
         >
-          <el-option v-for="(item,index) of weekList" :key="index" :value="index+1">{{ item }}</el-option>
+          <el-option v-for="(item,index) of weekList" :key="index" :value="index === 6 ? 0 : (index + 1)">
+            {{ item }}
+          </el-option>
         </el-select>
       </el-radio>
     </el-form-item>

src/components/Form/CronTab/index.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
     <div class="box">
-      <el-input v-model="input" clearable @focus="showDialog" @clear="onClear" />
+      <el-input v-model="input" clearable @clear="onClear" @focus="showDialog" />
     </div>
-    <el-dialog :title="$tc('common.CronTab.newCron')" :visible.sync="showCron" top="8vh" width="580px" append-to-body>
+    <el-dialog
+      :title="$tc('common.CronTab.newCron')"
+      :visible.sync="showCron"
+      append-to-body
+      top="8vh"
+      width="650px"
+    >
       <Crontab
         :expression="expression"
-        @hide="showCron = false"
         @fill="crontabFill"
+        @hide="showCron = false"
       />
     </el-dialog>
   </div>

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

@@ -7,13 +7,11 @@
     v-bind="data.attrs"
   >
     <template v-if="data.helpTips" #label>
-      <el-tooltip placement="bottom" effect="light" popper-class="help-tips">
-        <div slot="content" v-html="data.helpTips" />
-        <el-button style="padding: 0">
-          <i class="fa fa-info-circle" />
-        </el-button>
-      </el-tooltip>
       {{ data.label }}
+      <el-tooltip placement="top" effect="light" popper-class="help-tips">
+        <div slot="content" v-html="data.helpTips" />
+        <i class="fa fa-question-circle-o" />
+      </el-tooltip>
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -70,7 +68,8 @@
           :key="opt.label"
           v-bind="opt"
           :label="'value' in opt ? opt.value : opt.label"
-        >{{ opt.label }}</el-radio>
+        >{{ opt.label }}
+        </el-radio>
       </template>
     </custom-component>
     <div v-if="data.helpText" class="help-block" v-html="data.helpText" />

src/components/Form/DataForm/index.vue

@@ -38,11 +38,11 @@
         v-if="defaultButton"
         :disabled="!canSubmit"
         :loading="isSubmitting"
-        size="small"
+        :size="submitBtnSize"
         type="primary"
         @click="submitForm('form')"
       >
-        {{ $t('common.Submit') }}
+        {{ submitBtnText }}
       </el-button>
     </el-form-item>
   </ElFormRender>
@@ -73,6 +73,16 @@ export default {
       type: Boolean,
       default: true
     },
+    submitBtnSize: {
+      type: String,
+      default: 'small'
+    },
+    submitBtnText: {
+      type: String,
+      default() {
+        return this.$t('common.Submit')
+      }
+    },
     hasSaveContinue: {
       type: Boolean,
       default: true
@@ -126,8 +136,8 @@ export default {
       })
     },
     // 重置表单
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
+    resetForm() {
+      this.$refs['form'].resetFields()
     },
     handleClick(button) {
       const callback = button.callback || function(values, form) {
@@ -136,6 +146,9 @@ export default {
       const form = this.$refs['form']
       const values = form.getFormValue()
       callback(values, form, button)
+    },
+    getFormValue() {
+      return this.$refs.form.getFormValue()
     }
   }
 }

src/components/Form/DataForm/rules/index.js

@@ -53,13 +53,27 @@ export const matchAlphanumericUnderscore = {
   trigger: ['blur', 'change']
 }
 
+// 不能包含()
+export const MatchExcludeParenthesis = {
+  validator: (rule, value, callback) => {
+    value = value?.trim()
+    if (!/^[^()]*$/.test(value)) {
+      callback(new Error(i18n.t('common.notParenthesis')))
+    } else {
+      callback()
+    }
+  },
+  trigger: ['blur', 'change']
+}
+
 export default {
   IpCheck,
   Required,
   RequiredChange,
   EmailCheck,
   specialEmojiCheck,
-  matchAlphanumericUnderscore
+  matchAlphanumericUnderscore,
+  MatchExcludeParenthesis
 }
 
 export const JsonRequired = {

src/components/Form/FormFields/AllOrSpec.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <el-radio-group v-model="type" @input="handleTypeChange">
+      <el-radio v-for="tp of types" :key="tp.name" :label="tp.name">
+        {{ tp.label }}
+      </el-radio>
+    </el-radio-group>
+    <Select2 v-if="type === 'spec'" v-model="selected" v-bind="select2" @change="onChangeEmit" />
+  </div>
+</template>
+
+<script>
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+
+export default {
+  name: 'AllOrSpec',
+  components: { Select2 },
+  props: {
+    value: {
+      type: [Array],
+      default: () => ([])
+    },
+    select2: {
+      type: Object,
+      default: () => ({})
+    },
+    resource: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      type: 'all', // all, selected
+      types: [
+        { name: 'all', label: this.$t('common.All') },
+        { name: 'spec', label: this.$t('common.Spec') + this.$t('common.WordSep') + this.resource }
+      ],
+      selected: []
+    }
+  },
+  computed: {
+    iValue() {
+      if (this.type === 'all') {
+        return ['all']
+      } else {
+        return this.selected
+      }
+    }
+
+  },
+  mounted() {
+    if (!this.value || this.value.length === 0) {
+      return
+    }
+    if (this.value.indexOf('all') > -1) {
+      this.type = 'all'
+    } else {
+      this.type = 'spec'
+      this.selected = this.value
+    }
+  },
+  methods: {
+    onChangeEmit() {
+      this.$emit('input', this.iValue)
+    },
+    handleTypeChange() {
+      this.$emit('input', this.iValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormFields/AttrInput.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <GenericCreateUpdateForm
+      class="attr-form"
+      v-bind="formConfig"
+      @submit="onSubmit"
+    />
+    <DataTable :config="tableConfig" class="attr-list" />
+  </div>
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import DataTable from '@/components/Table/DataTable/index.vue'
+
+export default {
+  name: 'AttrInput',
+  components: { DataTable, GenericCreateUpdateForm },
+  props: {
+    formConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    tableConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    beforeSubmit: {
+      type: Function,
+      default: (val) => { return true }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    onSubmit(value) {
+      if (this.beforeSubmit(value)) {
+        const clonedValue = JSON.parse(JSON.stringify(value))
+        this.tableConfig.totalData.push(clonedValue)
+        this.$emit('submit', this.tableConfig.totalData)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.attr-form {
+  >>> .el-select {
+    width: 100%;
+  }
+  >>> .el-form-item__content {
+    width: 100%;
+  }
+  >>> .form-buttons {
+    margin: auto;
+  }
+}
+</style>
+

src/components/Form/FormFields/BasicTree.vue

@@ -1,12 +1,14 @@
 <template>
   <el-tree
     :data="iTree"
-    show-checkbox
-    node-key="value"
+    :default-checked-keys="iValue"
     :default-expand-all="true"
     :default-expanded-keys="iValue"
-    :default-checked-keys="iValue"
     :props="defaultProps"
+    :render-content="renderContent"
+    class="el-tree-custom"
+    node-key="value"
+    show-checkbox
     @check="handleCheckChange"
   />
 </template>
@@ -67,11 +69,41 @@ export default {
         }
         return item
       })
+    },
+    renderContent(h, { node, data, store }) {
+      let label = node.label
+      let helpText = ''
+      const regex = /(.*?)\s*\((.*?)\)/
+      const match = label.match(regex)
+      if (match) {
+        label = match[1]
+        helpText = match[2]
+      }
+
+      return (
+        <span >
+          <span>{label} </span>
+          {helpText
+            ? (<el-tooltip content={helpText} placement='top'>
+              <i class='fa fa-question-circle-o'></i>
+            </el-tooltip>) : ''}
+        </span>)
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.el-tree-custom >>> {
+  .help-tips {
+    margin-left: 10px;
+    font-size: 12px;
+    color: #999;
+  }
+  .el-tree-node__content:hover {
+    background-color: inherit;
+  }
+}
 
 </style>

src/components/Form/FormFields/CodeEditor.vue

@@ -2,7 +2,7 @@
   <div class="code-editor" style="font-size: 12px">
     <div class="toolbar">
       <div
-        v-for="(item,index) in toolbar.left"
+        v-for="(item,index) in iActions"
         :key="index"
         style="display: inline-block; margin: 0 2px"
       >
@@ -16,9 +16,8 @@
           >
             <i :class="item.icon" style="margin-right: 4px;" />{{ item.name }}
           </el-button>
-
           <el-autocomplete
-            v-if="item.type === 'input' && item.el.autoComplete"
+            v-if="item.type === 'input' &&item.el && item.el.autoComplete"
             v-model="item.value"
             :placeholder="item.placeholder"
             :fetch-suggestions="item.el.query"
@@ -27,7 +26,14 @@
             @select="item.callback(item.value)"
             @change="item.callback(item.value)"
           />
-
+          <el-input
+            v-else-if="item.type==='input'"
+            v-model="item.value"
+            :placeholder="item.placeholder"
+            class="inline-input"
+            size="mini"
+            @change="item.callback(item.value)"
+          />
           <div v-if="item.type==='select' && item.el && item.el.create" class="select-content">
             <span class="filter-label">
               {{ item.name }}:
@@ -87,6 +93,16 @@
         </el-tooltip>
       </div>
 
+      <div v-if="toolbar.hasOwnProperty('fold')" class="fold">
+        <el-tooltip :content="$tc('common.MoreActions')" placement="top">
+          <i
+            class="fa"
+            :class="[isFold ? 'fa-angle-double-right': 'fa-angle-double-down']"
+            @click="onChangeFold"
+          />
+        </el-tooltip>
+      </div>
+
       <div class="right-side" style="float: right">
         <div
           v-for="(item,index) in toolbar.right"
@@ -148,9 +164,19 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      isFold: true
+    }
   },
   computed: {
+    iActions() {
+      let actions = this.toolbar.left || {}
+      const fold = this.toolbar.fold || {}
+      if (!this.isFold) {
+        actions = { ...actions, ...fold }
+      }
+      return actions
+    },
     iValue: {
       get() {
         return this.value
@@ -173,6 +199,9 @@ export default {
     }
   },
   methods: {
+    onChangeFold() {
+      this.isFold = !this.isFold
+    },
     getLabel(value, items) {
       for (const item of items) {
         if (item.value === value) {
@@ -199,6 +228,16 @@ export default {
   margin-bottom: 5px;
 }
 
+.fold {
+  display: inline-block;
+  padding-left: 4px;
+  i {
+    font-weight: bold;
+    font-size: 15px;
+    cursor: pointer;
+  }
+}
+
 > > > .CodeMirror pre.CodeMirror-line,
 > > > .CodeMirror-linenumber.CodeMirror-gutter-elt {
   line-height: 18px !important;

src/components/Form/FormFields/DynamicInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div v-for="(command, index) in value" :key="index" :prop="'value.' + index + '.value'" class="command-item">
-      <el-input v-model="value[index]" size="mini">
+    <div v-for="(command, index) in iValue" :key="index" :prop="'iValue.' + index + '.value'" class="command-item">
+      <el-input v-model="iValue[index]" size="mini">
         <template slot="prepend"> {{ inputTitle + ' ' + (index + 1) }}</template>
       </el-input>
       <div class="input-button">
@@ -14,7 +14,7 @@
           @click="handleDelete(command)"
         />
         <el-button
-          v-if="index === value.length - 1"
+          v-if="index === iValue.length - 1"
           icon="el-icon-plus"
           size="mini"
           style="flex-shrink: 0;"
@@ -27,6 +27,7 @@
 </template>
 
 <script>
+
 export default {
   props: {
     value: {
@@ -39,20 +40,32 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      iValue: ['']
+    }
+  },
+  watch: {
+    iValue: {
+      handler(v) {
+        this.$emit('input', Array.from(v))
+      }
+    }
+  },
+  created() {
+    this.iValue = Array.from(this.value)
   },
   methods: {
     handleDelete(command) {
-      const index = this.value.indexOf(command)
+      const index = this.iValue.indexOf(command)
       if (index !== -1) {
-        this.value.splice(index, 1)
+        this.iValue.splice(index, 1)
       }
     },
     handleAdd() {
-      this.value.push('')
+      this.iValue.push('')
     },
     deleteDisabled() {
-      return this.value.length <= 1
+      return this.iValue.length <= 1
     }
   }
 }

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

@@ -0,0 +1,161 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-buttons="false"
+    :title="$tc('common.SelectAttrs')"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <div v-if="!loading">
+      <DataForm
+        :form="form"
+        class="attr-form"
+        v-bind="formConfig"
+        @submit="onAttrDialogConfirm"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import DataForm from '@/components/Form/DataForm/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
+import ValueField from '@/components/Form/FormFields/JSONManyToManySelect/ValueField.vue'
+import { attrMatchOptions, typeMatchMapper } from '@/components/const'
+
+export default {
+  name: 'AttrFormDialog',
+  components: { Dialog, DataForm },
+  props: {
+    attrs: {
+      type: Array,
+      default: () => ([])
+    },
+    attrsAdded: {
+      type: Array,
+      default: () => ([])
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      loading: true,
+      currentValue: '',
+      formConfig: {
+        // 为了方便更新，避免去取 fields 的索引
+        hasSaveContinue: false,
+        fields: [
+          {
+            id: 'name',
+            label: this.$t('common.AttrName'),
+            type: 'select',
+            options: this.attrs.map(attr => {
+              let disabled = this.attrsAdded.includes(attr.name) && this.form.name !== attr.name
+              if (attr.disabled) {
+                disabled = true
+              }
+              return { label: attr.label, value: attr.name, disabled: disabled }
+            }),
+            on: {
+              change: ([val], updateForm) => {
+                // 变化会影响 match 的选项
+                const attr = this.attrs.find(attr => attr.name === val)
+                if (!attr) return
+                const matchOption = vm.updateMatchOptions(attr)
+                setTimeout(() => {
+                  updateForm({ match: matchOption.value })
+                }, 10)
+              }
+            }
+          },
+          {
+            id: 'match',
+            label: this.$t('common.Match'),
+            type: 'select',
+            options: attrMatchOptions,
+            on: {
+              change: ([value], updateForm) => {
+                // 变化会影响 value 的选项
+                setTimeout(() => {
+                  this.formConfig.fields[2].el.match = value
+                }, 10)
+              }
+            }
+          },
+          {
+            id: 'value',
+            label: this.$t('common.AttrValue'),
+            component: ValueField,
+            el: {
+              match: attrMatchOptions[0].value,
+              attr: this.attrs[0]
+            },
+            on: {
+              input: ([value], updateForm) => {
+                vm.currentValue = value
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    if (this.form.index === undefined || this.form.index === -1) {
+      Object.assign(this.form, this.getDefaultAttrForm())
+    }
+    this.updateMatchOptions()
+    this.$log.debug('Attr Form config: ', this.formConfig)
+    this.loading = false
+  },
+  methods: {
+    getDefaultAttrForm() {
+      const attrKeys = this.attrs.map(attr => attr.name)
+      const diff = attrKeys.filter(attr => !this.attrsAdded.includes(attr))
+      let name = this.attrs[0].name
+      if (diff.length > 0) {
+        name = diff[0]
+      }
+      return {
+        name: name,
+        match: 'exact',
+        value: '',
+        rel: 'and'
+      }
+    },
+    onAttrDialogConfirm(form) {
+      this.$emit('confirm', form)
+    },
+    updateMatchOptions(attr) {
+      if (!attr) {
+        attr = this.attrs.find(attr => attr.name === this.form.name)
+      }
+      if (!attr) return
+      const attrType = attr.type || 'str'
+      const matchSupports = typeMatchMapper[attrType]
+      attrMatchOptions.forEach((option) => {
+        option.hidden = !matchSupports.includes(option.value)
+      })
+      this.formConfig.fields[2].el.attr = attr
+      const supports = attrMatchOptions.filter(option => !option.hidden)
+      const matchOption = supports.find(item => item.value === this.form.match) || supports[0]
+      this.formConfig.fields[2].el.match = matchOption.value
+      return matchOption
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.attr-form {
+  >>> .el-select {
+    width: 100%;
+  }
+}
+</style>
+

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

@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-buttons="false"
+    :title="$tc('common.MatchResult')"
+    :v-bind="$attrs"
+    :v-on="$listeners"
+    :visible.sync="iVisible"
+  >
+    <ListTable v-bind="attrMatchTableConfig" />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import ListTable from '@/components/Table/ListTable/index.vue'
+
+export default {
+  name: 'AttrMatchResultDialog',
+  components: { ListTable, Dialog },
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    attrs: {
+      type: Array,
+      default: () => ([])
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      attrMatchTableConfig: {
+        headerActions: {
+          hasCreate: false,
+          hasImport: false,
+          hasExport: false,
+          hasMoreActions: false
+        },
+        tableConfig: {
+          url: this.url,
+          columns: this.attrs.filter(item => item.inTable).map(item => {
+            return {
+              prop: item.name,
+              label: item.label,
+              formatter: item.formatter
+            }
+          }),
+          columnsMeta: {
+            actions: {
+              has: false
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="!loading">
+    <TagInput v-if="type === 'array'" :value="iValue" @input="handleInput" />
+    <Select2 v-else-if="type === 'select'" :value="iValue" v-bind="attr.el" @change="handleInput" @input="handleInput" />
+    <Switcher v-else-if="type === 'bool'" :value="iValue" @change="handleInput" @input="handleInput" />
+    <el-input v-else :value="iValue" @input="handleInput" />
+  </div>
+</template>
+
+<script>
+import TagInput from '@/components/Form/FormFields/TagInput.vue'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import Switcher from '@/components/Form/FormFields/Switcher.vue'
+
+export default {
+  name: 'ValueField',
+  components: { Switcher, TagInput, Select2 },
+  props: {
+    value: {
+      type: [String, Number, Boolean, Array, Object],
+      default: () => ''
+    },
+    match: {
+      type: String,
+      default: 'exact'
+    },
+    attr: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      type: 'string'
+    }
+  },
+  computed: {
+    iValue: {
+      get() {
+        const multipleTypes = ['array', 'select']
+        let newValue = this.value
+        if (multipleTypes.includes(this.type)) {
+          if (!Array.isArray(this.value)) {
+            newValue = []
+          }
+        } else if (this.type === 'bool') {
+          newValue = !!this.value
+        } else {
+          if (Array.isArray(this.value)) {
+            newValue = ''
+          } else {
+            newValue = this.value.toString()
+          }
+        }
+        if (this.value !== newValue) {
+          this.handleInput(newValue)
+        }
+        return newValue
+      }
+    }
+  },
+  watch: {
+    match() {
+      this.changeValueType()
+    },
+    attr: {
+      handler() {
+        this.changeValueType()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.changeValueType()
+  },
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value)
+    },
+    changeValueType() {
+      this.loading = true
+      this.type = this.getType()
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    getType() {
+      const attrType = this.attr.type || 'str'
+      this.$log.debug('Value field attr type: ', attrType, this.attr, this.match)
+      if (['m2m', 'fk', 'select'].includes(attrType)) {
+        return 'select'
+      } else if (attrType === 'bool') {
+        return 'bool'
+      }
+      if (['in', 'ip_in'].includes(this.match)) {
+        return 'array'
+      } else if (this.match.startsWith('m2m')) {
+        return 'select'
+      } else {
+        return 'string'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+  <span v-if="attr.type === 'bool'">
+    <i v-if="value" class="fa fa-check text-primary" />
+    <i v-else class="fa fa-times text-danger" />
+  </span>
+  <span v-else :title="value">
+    {{ value }}
+  </span>
+</template>
+
+<script>
+import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
+import { setUrlParam } from '@/utils/common'
+
+export default {
+  name: 'ValueFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          attrs: {}
+        }
+      }
+    }
+  },
+  data() {
+    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    return {
+      formatterArgs: formatterArgs,
+      loading: true,
+      attr: {},
+      value: ''
+    }
+  },
+  watch: {
+    cellValue: {
+      handler() {
+        this.getValue()
+      },
+      deep: true
+    },
+    formatterArgs: {
+      handler() {
+        this.getValue()
+      },
+      deep: true
+    },
+    row: {
+      handler() {
+        this.getValue()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getValue()
+    }, 100)
+  },
+  methods: {
+    async getValue() {
+      this.attr = this.formatterArgs.attrs.find(attr => attr.name === this.row.name)
+      const match = this.row.match
+      this.$log.debug('ValueFormatter: ', this.attr, this.row.name)
+      if (this.attr.type === 'm2m') {
+        const url = setUrlParam(this.attr.el.url, 'ids', this.cellValue.join(','))
+        const data = await this.$axios.get(url) || []
+        if (data.length > 0) {
+          const displayField = this.attr.el.displayField || 'name'
+          this.value = data.map(item => item[displayField]).join(', ')
+        }
+      } else if (this.attr.type === 'select') {
+        const options = this.attr.el.options || []
+        const items = options.filter(item => this.cellValue.includes(item.value))
+        this.value = items.map(item => item.label).join(', ')
+      } else if (['in', 'ip_in'].includes(match)) {
+        this.value = this.cellValue.join(', ')
+      } else {
+        this.value = this.cellValue
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <el-radio-group v-model="iValue.type" @input="handleTypeChange">
+      <el-radio v-for="tp of types" :key="tp.name" :label="tp.name">
+        {{ tp.label }}
+      </el-radio>
+    </el-radio-group>
+    <Select2 v-if="iValue.type === 'ids'" v-model="ids" v-bind="select2" @change="onChangeEmit" />
+    <div v-if="iValue.type === 'attrs'">
+      <DataTable :config="tableConfig" class="attr-list" />
+      <div class="actions">
+        <el-button size="mini" type="primary" @click="handleAttrAdd">
+          {{ $t('common.Add') }}
+        </el-button>
+        <span style="padding-left: 10px; font-size: 13px">
+          <span class="help-tips; ">{{ $t('common.MatchedCount') }}:</span>
+          <a class="text-link" style="padding: 0 5px;" @click="showAttrMatchTable">{{ attrMatchCount }}</a>
+        </span>
+      </div>
+    </div>
+
+    <AttrFormDialog
+      v-if="attrFormVisible"
+      :attrs="attrs"
+      :attrs-added="attrsAdded"
+      :form="attrForm"
+      :visible.sync="attrFormVisible"
+      @confirm="handleAttrDialogConfirm"
+    />
+    <AttrMatchResultDialog
+      v-if="attrMatchTableVisible"
+      :attrs="attrs"
+      :url="attrMatchTableUrl"
+      :visible.sync="attrMatchTableVisible"
+    />
+  </div>
+</template>
+
+<script>
+import Select2 from '../Select2.vue'
+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 { attrMatchOptions } from '@/components/const'
+import { toM2MJsonParams } from '@/utils/jms'
+
+export default {
+  name: 'JSONManyToManySelect',
+  components: { AttrFormDialog, DataTable, Select2, AttrMatchResultDialog },
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return {
+          type: 'all'
+        }
+      }
+    },
+    select2: {
+      type: Object,
+      required: true
+    },
+    attrs: {
+      type: Array,
+      default: () => ([])
+    },
+    resource: {
+      type: String,
+      default: ''
+    },
+    attrTableColumns: {
+      type: Array,
+      default: () => (['name'])
+    }
+  },
+  data() {
+    const tableFormatter = (colName) => {
+      return (row, col, cellValue) => {
+        const value = cellValue
+        switch (colName) {
+          case 'name':
+            return this.attrs.find(attr => attr.name === value)?.label || value
+          case 'match':
+            return attrMatchOptions.find(opt => opt.value === value).label || value
+          case 'value':
+            return Array.isArray(value) ? value.join(', ') : value
+          default:
+            return value
+        }
+      }
+    }
+    return {
+      iValue: Object.assign({ type: 'all' }, this.value),
+      attrFormVisible: false,
+      attrForm: {},
+      attrMatchCount: 0,
+      attrMatchTableVisible: false,
+      attrMatchTableUrl: '',
+      ids: this.value.ids || [],
+      editIndex: -1,
+      types: [
+        { name: 'all', label: this.$t('common.All') + this.resource },
+        { name: 'ids', label: this.$t('common.Spec') + this.resource },
+        { name: 'attrs', label: this.$t('common.SelectByAttr') }
+      ],
+      tableConfig: {
+        columns: [
+          { prop: 'name', label: this.$t('common.AttrName'), formatter: tableFormatter('name') },
+          { prop: 'match', label: this.$t('common.Match'), formatter: tableFormatter('match') },
+          { prop: 'value', label: this.$t('common.AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
+          { prop: 'action', label: this.$t('common.Action'), align: 'center', width: '120px', formatter: (row, col, cellValue, index) => {
+            return (
+              <div className='input-button'>
+                <el-button
+                  icon='el-icon-edit'
+                  size='mini'
+                  style={{ 'flexShrink': 0 }}
+                  type='primary'
+                  onClick={this.handleAttrEdit({ row, col, cellValue, index })}
+                />
+                <el-button
+                  icon='el-icon-minus'
+                  size='mini'
+                  style={{ 'flexShrink': 0 }}
+                  type='danger'
+                  onClick={this.handleAttrDelete({ row, col, cellValue, index })}
+                />
+              </div>
+            )
+          } }
+        ],
+        totalData: this.value.attrs || [],
+        hasPagination: false
+      }
+    }
+  },
+  computed: {
+    attrsAdded() {
+      return this.tableConfig.totalData.map(item => item.name)
+    }
+  },
+  watch: {
+    attrFormVisible(val) {
+      if (!val) {
+        this.getAttrsCount()
+      }
+    }
+  },
+  mounted() {
+    if (this.value.type === 'attrs') {
+      this.getAttrsCount()
+    }
+    this.$emit('input', this.iValue)
+  },
+  methods: {
+    showAttrMatchTable() {
+      const [key, value] = this.getAttrFilterKey()
+      this.attrMatchTableUrl = setUrlParam(this.select2.url, key, value)
+      this.attrMatchTableVisible = true
+    },
+    getAttrFilterKey() {
+      if (this.tableConfig.totalData.length === 0) return ''
+      let attrFilter = { type: 'attrs', attrs: this.tableConfig.totalData }
+      attrFilter = toM2MJsonParams(attrFilter)
+      return attrFilter
+    },
+    getAttrsCount() {
+      const attrFilter = this.getAttrFilterKey()
+      if (!attrFilter) {
+        this.attrMatchCount = 0
+        return
+      }
+      const [key, value] = attrFilter
+      let url = setUrlParam(this.select2.url, key, value)
+      url = setUrlParam(url, 'limit', 1)
+      return this.$axios.get(url).then(res => {
+        this.attrMatchCount = res.count
+      })
+    },
+    handleAttrEdit({ row, index }) {
+      return () => {
+        this.attrForm = Object.assign({ index }, row)
+        this.editIndex = index
+        this.attrFormVisible = true
+      }
+    },
+    handleAttrDelete({ index }) {
+      return () => {
+        this.tableConfig.totalData.splice(index, 1)
+        this.getAttrsCount()
+      }
+    },
+    handleAttrAdd() {
+      this.attrForm = {}
+      this.editIndex = -1
+      this.attrFormVisible = true
+    },
+    onChangeEmit() {
+      const tp = this.iValue.type
+      this.handleTypeChange(tp)
+    },
+    handleTypeChange(val) {
+      switch (val) {
+        case 'ids':
+          this.$emit('input', { type: 'ids', ids: this.ids })
+          break
+        case 'attrs':
+          this.$emit('input', { type: 'attrs', attrs: this.tableConfig.totalData })
+          break
+        default:
+          this.$emit('input', { type: 'all' })
+          break
+      }
+    },
+    handleAttrDialogConfirm(form) {
+      if (this.editIndex > -1) {
+        this.tableConfig.totalData.splice(this.editIndex, 1)
+      }
+      const allAttrs = this.tableConfig.totalData
+      // 因为可能 attr 的 name 会重复，所以需要先删除再添加
+      const setIndex = allAttrs.findIndex(attr => attr.name === form.name)
+      if (setIndex === -1) {
+        allAttrs.push(Object.assign({}, form))
+      } else {
+        allAttrs.splice(setIndex, 1, Object.assign({}, form))
+      }
+      this.attrFormVisible = false
+      this.onChangeEmit()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attr-list {
+  width: 99%;
+}
+</style>

src/components/Form/FormFields/JsonEditor.vue

@@ -4,6 +4,7 @@
       v-model="resultInfo"
       :mode="'code'"
       :show-btns="false"
+      :class="{resize: resize === 'vertical'}"
       @json-change="onJsonChange"
       @json-save="onJsonSave"
       @has-error="onError"
@@ -20,6 +21,13 @@ export default {
     value: {
       type: [String, Object, Array],
       default: () => ({})
+    },
+    resize: {
+      type: String,
+      validator: (value) => {
+        return ['none', 'vertical'].indexOf(value) !== -1
+      },
+      default: 'vertical'
     }
   },
   data() {
@@ -46,15 +54,21 @@ export default {
     },
     onError: _.debounce(function(value) {
       this.$message.error(this.$tc('common.FormatError'))
-    }, 1100)
+    }, 1500)
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/variables.scss";
+  @import "~@/styles/variables";
 
   .json-editor {
+    .resize {
+      & > > > .jsoneditor {
+      resize: vertical;
+      cursor: s-resize;
+      }
+    }
     & > > > .jsoneditor {
       border: 1px solid #e5e6e7;
     }

src/components/Form/FormFields/NestedObjectSelect2.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Select2 from './Select2'
+import Select2 from './Select2.vue'
 
 export default {
   name: 'NestedObjectSelect2',

src/components/Form/FormFields/PasswordRule.vue

@@ -0,0 +1,106 @@
+<template>
+  <div style="display: block">
+    <el-button size="mini" type="primary" @click="visible=true">
+      {{ $t('common.Setting') }}
+    </el-button>
+    <Dialog
+      :destroy-on-close="true"
+      :title="$tc('common.PasswordRule')"
+      :visible.sync="visible"
+      width="600px"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      @open="handleOpen"
+    >
+      <AutoDataForm ref="dataform" v-bind="form" />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+
+export default {
+  name: 'PasswordRule',
+  components: { Dialog, AutoDataForm },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({
+        length: 16
+      })
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        url: '',
+        hasButtons: false,
+        hasReset: false,
+        hasSaveContinue: false,
+        form: Object.assign({}, this.value),
+        fields: [
+          {
+            id: 'length',
+            label: this.$t('common.Length'),
+            type: 'input-number',
+            el: {
+              min: 8,
+              max: 30
+            }
+          },
+          {
+            id: 'uppercase',
+            label: this.$t('common.Uppercase'),
+            type: 'switch'
+          },
+          {
+            id: 'lowercase',
+            label: this.$t('common.Lowercase'),
+            type: 'switch'
+          },
+          {
+            id: 'digit',
+            label: this.$t('common.Digit'),
+            type: 'switch'
+          },
+          {
+            id: 'symbol',
+            label: this.$t('common.SpecialSymbol'),
+            type: 'switch'
+          },
+          {
+            id: 'exclude_symbols',
+            label: this.$t('common.ExcludeSymbol'),
+            type: 'input'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleConfirm() {
+      const formValue = this.$refs.dataform.dataForm.getFormValue()
+      this.form.form = formValue
+      this.$emit('input', formValue)
+      setTimeout(() => {
+        this.visible = false
+      }, 100)
+    },
+    handleCancel() {
+      this.$refs.dataform.dataForm.resetForm()
+      setTimeout(() => {
+        this.visible = false
+      }, 100)
+    },
+    handleOpen() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormFields/PhoneInput.vue

@@ -24,32 +24,19 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'PhoneInput',
   props: {
     value: {
       type: [Object, String],
-      default: () => ({ 'code': '', 'phone': '' })
+      default: () => ({ 'code': '+86', 'phone': '' })
     }
   },
   data() {
     return {
-      rawValue: {},
-      countries: [
-        { name: 'China(中国)', value: '+86' },
-        { name: 'HongKong(中国香港)', value: '+852' },
-        { name: 'Macao(中国澳门)', value: '+853' },
-        { name: 'Taiwan(中国台湾)', value: '+886' },
-        { name: 'America(America)', value: '+1' },
-        { name: 'Russia(Россия)', value: '+7' },
-        { name: 'France(français)', value: '+33' },
-        { name: 'Britain(Britain)', value: '+44' },
-        { name: 'Germany(Deutschland)', value: '+49' },
-        { name: 'Japan(日本)', value: '+81' },
-        { name: 'Korea(한국)', value: '+82' },
-        { name: 'India(भारत)', value: '+91' }
-      ]
+      rawValue: {}
     }
   },
   computed: {
@@ -57,8 +44,14 @@ export default {
       if (!this.rawValue.phone) {
         return ''
       }
-      return `${this.rawValue.code} ${this.rawValue.phone}`
-    }
+      return `${this.rawValue.code}${this.rawValue.phone}`
+    },
+    countries: {
+      get() {
+        return this.publicSettings.COUNTRY_CALLING_CODES
+      }
+    },
+    ...mapGetters(['publicSettings'])
   },
   mounted() {
     this.rawValue = this.value || { code: '+86', phone: '' }

src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -0,0 +1,124 @@
+<template>
+  <Dialog
+    v-if="$attrs.visible"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="$tc('assets.PlatformProtocolConfig') + '：' + protocol.name"
+    class="setting-dialog"
+    v-bind="$attrs"
+    width="800px"
+    v-on="$listeners"
+  >
+    <el-alert v-if="disabled && platformDetail" style="margin-bottom: 10px" type="success">
+      {{ $t('assets.InheritPlatformConfig') }}
+      <el-link :href="platformDetail" class="link-more" target="_blank">
+        {{ $t('common.View') }}
+      </el-link>
+      <i class="fa fa-external-link" />
+    </el-alert>
+    <AutoDataForm
+      :disabled="disabled"
+      :form="form"
+      class="data-form"
+      v-bind="config"
+      @submit="onSubmit"
+    />
+  </Dialog>
+</template>
+
+<script>
+import { AutoDataForm, Dialog } from '@/components'
+import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
+
+export default {
+  name: 'ProtocolSetting',
+  components: {
+    Dialog,
+    AutoDataForm
+  },
+  props: {
+    protocol: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const vm = this
+    const platform = this.$route.query.platform
+    return {
+      loading: true,
+      form: this.protocol,
+      platformDetail: platform ? '#/console/assets/platforms/' + platform : '',
+      config: {
+        hasSaveContinue: false,
+        hasButtons: !this.disabled,
+        url: '/api/v1/assets/protocol-settings/?name=' + this.protocol.name,
+        fields: [
+          [vm.$t('common.Basic'), [
+            'primary', 'required', 'default', 'public'
+          ]],
+          [vm.$t('common.Advanced'), ['setting']]
+        ],
+        fieldsMeta: {
+          setting: {
+            fields: '__all__',
+            fieldsMeta: {
+              username_selector: {
+                hidden: (formValue) => formValue['autofill'] !== 'basic'
+              },
+              password_selector: {
+                hidden: (formValue) => formValue['autofill'] !== 'basic'
+              },
+              submit_selector: {
+                hidden: (formValue) => formValue['autofill'] !== 'basic'
+              },
+              script: {
+                component: JsonEditor,
+                hidden: (formValue) => formValue['autofill'] !== 'script'
+              }
+            }
+          },
+          public: {
+            disabled: this.protocol.name === 'winrm',
+            hidden: (formValue) => {
+              if (this.protocol.name === 'winrm') {
+                formValue['public'] = false
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    onSubmit(form) {
+      this.protocol = Object.assign(this.protocol, form)
+      this.$emit('update:visible', false)
+      this.$emit('confirm', this.protocol)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-form > > > .el-form-item.form-buttons {
+  padding-top: 10px;
+  margin-bottom: 0;
+}
+
+.setting-dialog > > > .el-dialog__body {
+  padding-top: 10px;
+}
+
+.link-more {
+  font-size: 10px;
+  border-bottom: solid 1px;
+  color: inherit;
+}
+</style>

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

@@ -3,9 +3,10 @@
     <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
       <el-input
         v-model="item.port"
-        :class="readonly ? '' : 'input-with-select'"
+        :class="isPortReadonly(item) ? '' : 'input-with-select'"
         :placeholder="portPlaceholder"
-        :readonly="readonly"
+        :readonly="isPortReadonly(item)"
+        :title="isPortReadonly(item) ? '端口由 URL 指定' : ''"
         v-bind="$attrs"
       >
         <template #prepend>
@@ -62,7 +63,7 @@
     <ProtocolSettingDialog
       v-if="showDialog"
       :disabled="settingReadonly || readonly"
-      :item="settingItem"
+      :protocol="currentProtocol"
       :visible.sync="showDialog"
       @confirm="handleSettingConfirm"
     />
@@ -70,7 +71,7 @@
 </template>
 
 <script>
-import ProtocolSettingDialog from './ProtocolSettingDialog'
+import ProtocolSettingDialog from './ProtocolSettingDialog.vue'
 
 export default {
   components: {
@@ -102,13 +103,17 @@ export default {
     showSetting: {
       type: Function,
       default: (item) => true
+    },
+    instance: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     return {
       name: '',
       items: [],
-      settingItem: {},
+      currentProtocol: {},
       showDialog: false,
       loading: false
     }
@@ -138,13 +143,18 @@ export default {
   },
   watch: {
     choices: {
-      handler(value) {
+      handler(value, oldValue) {
+        if (value?.length === oldValue?.length) {
+          return
+        }
         this.loading = true
         setTimeout(() => {
-          this.loading = false
           this.setDefaultItems(value)
-        }, 100)
-      }
+          this.loading = false
+        },)
+      },
+      deep: true,
+      immediate: true
     },
     items: {
       handler(value) {
@@ -157,6 +167,21 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    instance: {
+      handler(value) {
+        const port = this.getPortFromInstance(value)
+        if (!port) {
+          return
+        }
+        for (const item of this.items) {
+          if (item['port_from_addr']) {
+            item.port = port
+          }
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   mounted() {
@@ -166,21 +191,40 @@ export default {
     this.$log.debug('Items: ', this.items)
   },
   methods: {
+    getPortFromInstance(instance) {
+      if (!instance) {
+        return 0
+      }
+      let address = instance.address || ''
+      if (address.indexOf('://') === -1) {
+        address = `https://${address}`
+      }
+      const parse = require('url-parse')
+      const path = parse(address)
+      let port = path.port
+      if (port < 0 || port > 65535) {
+        port = 0
+      }
+      if (!port) {
+        port = path.protocol === 'https:' ? 443 : 80
+      }
+      return port
+    },
     handleSettingConfirm() {
-      if (this.settingItem.primary) {
+      if (this.currentProtocol.primary) {
         const others = this.items
-          .filter(item => item.name !== this.settingItem.name)
+          .filter(item => item.name !== this.currentProtocol.name)
           .map(item => {
             item.primary = false
             return item
           })
-        this.items = [this.settingItem, ...others]
+        this.items = [this.currentProtocol, ...others]
       }
-      if (this.settingItem.name === 'winrm') {
-        if (this.settingItem.setting?.use_ssl) {
-          this.settingItem.port = 5986
+      if (this.currentProtocol.name === 'winrm') {
+        if (this.currentProtocol.setting?.use_ssl) {
+          this.currentProtocol.port = 5986
         } else {
-          this.settingItem.port = 5985
+          this.currentProtocol.port = 5985
         }
       }
     },
@@ -217,20 +261,25 @@ export default {
       item.name = selected.name
       item.port = selected.port
     },
+    isPortFormAddr(item) {
+      return !!item['port_from_addr']
+    },
+    isPortReadonly(item) {
+      return this.readonly || this.isPortFormAddr(item)
+    },
     setPrimaryIfNeed(items) {
       // 如果没有设置主协议，设置第一个为主协议
-      if (!this.settingReadonly) {
-        const primaryProtocols = items.filter(item => item.primary)
-        if (primaryProtocols.length === 0) {
-          items[0].primary = true
-          items[0].default = true
-          items[0].required = true
-          items[0].public = true
-        } else if (primaryProtocols.length > 1) {
-          primaryProtocols.slice(1, primaryProtocols.length).forEach(item => {
-            item.primary = false
-          })
-        }
+      if (this.settingReadonly) {
+        return items
+      }
+      const primaryProtocols = items.filter(item => item.primary)
+      if (primaryProtocols.length === 0) {
+        items[0].default = true
+        items[0].public = true
+      } else if (primaryProtocols.length > 1) {
+        primaryProtocols.slice(1, primaryProtocols.length).forEach(item => {
+          item.primary = false
+        })
       }
       return items
     },
@@ -256,7 +305,7 @@ export default {
         items = protocols.filter(item => allProtocolNames.indexOf(item.name) !== -1)
       } else {
         const defaults = choices.filter(item => (item.required || item.primary || item.default))
-        if (defaults.length === 0) {
+        if (defaults.length === 0 && choices.length !== 0) {
           defaults.push(choices[0])
         }
         items = defaults
@@ -271,7 +320,7 @@ export default {
       return protocols
     },
     onSettingClick(item) {
-      this.settingItem = item
+      this.currentProtocol = item
       this.showDialog = true
     }
   }

src/components/Form/FormFields/Secret.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Todo: 抽象 Secret
+  </div>
+</template>