feat: Update v3.1.0

v3.1.0 rc4

.env.development.example

@@ -22,5 +22,4 @@ 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,4 +10,3 @@ jobs:
       - uses: jumpserver/action-generic-handler@master
         env:
           GITHUB_TOKEN: ${{ secrets.PRIVATE_TOKEN }}
-          I18N_TOKEN: ${{ secrets.I18N_TOKEN }}

.github/workflows/release-drafter.yml

@@ -19,7 +19,9 @@ 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
@@ -31,27 +33,17 @@ jobs:
           tag: ${{ steps.get_version.outputs.TAG }}
       - uses: actions/setup-node@v2
         with:
-          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
+          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
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ needs.create-realese.outputs.upload_url }}

Dockerfile

@@ -1,28 +1,13 @@
-FROM node:16.20-bullseye-slim as stage-build
+FROM node:14.16 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
@@ -34,6 +19,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:1.24-bullseye
+FROM nginx:alpine
 COPY --from=stage-build /data/lina /opt/lina
 COPY nginx.conf /etc/nginx/conf.d/default.conf

GITSHA

@@ -0,0 +1 @@
+c6cf6571b62fb8f484e950eb2341167c20d504b8

package.json

@@ -20,29 +20,26 @@
     "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 zh_Hant",
-    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
+    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja",
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja"
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
-    "@traptitech/markdown-it-katex": "^3.6.0",
     "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.28.0",
+    "axios": "0.21.1",
     "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",
-    "dompurify": "^3.1.6",
-    "echarts": "4.7.0",
+    "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",
@@ -57,8 +54,6 @@
     "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",
@@ -84,7 +79,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "7.18.6",
+    "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
@@ -98,7 +93,6 @@
     "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",
@@ -115,7 +109,6 @@
     "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,9 +27,6 @@
         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: 80vh;
+  max-height: 90vh;
   overflow: auto;
   padding: 30px;
 }
@@ -496,11 +496,3 @@ td .el-button.el-button--mini {
 .el-alert.el-alert--error.is-light {
   border-color: var(--color-danger-light);
 }
-
-#nprogress .bar {
-  background: light-5!important;
-}
-
-#nprogress .peg {
-  box-shadow: 0 0 10px light-5, 0 0 5px light-5!important;
-}

src/api/asset.js

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

src/api/ops.js

@@ -44,30 +44,3 @@ 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,11 +8,24 @@ export function terminateSession(data) {
   })
 }
 
-export function toggleLockSession(data) {
+export function getSessionDetail(id) {
   return request({
-    url: '/api/v1/terminal/tasks/toggle-lock-session/',
-    method: 'post',
-    data: data
+    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'
   })
 }
 

src/api/settings.js

@@ -25,28 +25,12 @@ export function importLicense(formData) {
     data: formData
   })
 }
-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)
-    })
+export function testLdapSetting(data) {
+  return request({
+    disableFlashErrorMsg: true,
+    url: '/api/v1/settings/ldap/testing/config/',
+    method: 'post',
+    data: data
   })
 }
 

src/api/users.js

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

src/assets/img/chatbot.svg

@@ -1 +0,0 @@
-<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

@@ -0,0 +1,248 @@
+<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 { RequiredChange, Required } from '@/components/DataForm/rules'
+
+export default {
+  name: 'AccountCreateForm',
+  components: {
+    AutoDataForm
+  },
+  props: {
+    asset: {
+      type: Object,
+      default: null
+    },
+    platform: {
+      type: Object,
+      default: null
+    },
+    account: {
+      type: Object,
+      default: null
+    },
+    // 默认组件密码加密
+    encryptPassword: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      usernameChanged: false,
+      defaultPrivilegedAccounts: ['root', 'administrator'],
+      iPlatform: {
+        automation: {},
+        protocols: [
+          {
+            name: 'ssh',
+            secret_types: ['password', 'ssh_key', 'token', 'api_key']
+          }
+        ]
+      },
+      url: '/api/v1/accounts/accounts/',
+      form: this.account || {},
+      encryptedFields: ['secret'],
+      fields: [
+        [this.$t('assets.Asset'), ['assets']],
+        [this.$t('common.Basic'), ['name', 'username', ...this.controlShowField()]],
+        [this.$t('assets.Secret'), [
+          'secret_type', 'secret', 'ssh_key', 'token',
+          'api_key', 'passphrase'
+        ]],
+        [this.$t('common.Other'), ['push_now', 'is_active', 'comment']]
+      ],
+      fieldsMeta: {
+        assets: {
+          rules: [Required],
+          component: AssetSelect,
+          label: this.$t('assets.Asset'),
+          el: {
+            multiple: false
+          },
+          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 })
+                }
+              }
+            }
+          }
+        },
+        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 })
+              }
+            }
+          }
+        },
+        su_from: {
+          component: Select2,
+          hidden: (formValue) => {
+            return !this.asset?.id
+          },
+          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 }
+              }
+            }
+          }
+        },
+        secret: {
+          label: this.$t('assets.Password'),
+          component: UpdateToken,
+          hidden: (formValue) => formValue.secret_type !== 'password'
+        },
+        ssh_key: {
+          label: this.$t('assets.PrivateKey'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'ssh_key'
+        },
+        passphrase: {
+          label: this.$t('assets.Passphrase'),
+          component: UpdateToken,
+          hidden: (formValue) => formValue.secret_type !== 'ssh_key'
+        },
+        token: {
+          label: this.$t('assets.Token'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'token'
+        },
+        api_key: {
+          id: 'api_key',
+          label: this.$t('assets.AccessKey'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'api_key'
+        },
+        secret_type: {
+          type: 'radio-group',
+          options: []
+        },
+        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')
+          }
+        }
+      },
+      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: '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
+      })
+    },
+    controlShowField() {
+      const privileged = ['privileged']
+      let suFrom = ['su_from']
+      const filterSuFrom = ['database', 'device', 'cloud', 'web', 'windows']
+      const asset = this?.asset || {}
+      if (filterSuFrom.includes(asset?.category?.value) || filterSuFrom.includes(asset?.type?.value)) {
+        suFrom = []
+      }
+      return [...privileged, ...suFrom]
+    },
+    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/AccountListTable/AccountCreateUpdate.vue

@@ -1,20 +1,19 @@
 <template>
   <Dialog
-    v-if="iVisible"
-    :close-on-click-modal="false"
+    :title="title"
+    :visible.sync="iVisible"
     :destroy-on-close="true"
     :show-cancel="false"
     :show-confirm="false"
-    :title="title"
-    :visible.sync="iVisible"
+    :close-on-click-modal="false"
     v-bind="$attrs"
+    width="70%"
     v-on="$listeners"
   >
     <AccountCreateUpdateForm
       v-if="!loading"
       ref="form"
       :account="account"
-      :add-template="addTemplate"
       :asset="asset"
       @add="addAccount"
       @edit="editAccount"
@@ -23,8 +22,8 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index.vue'
-import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
+import Dialog from '@/components/Dialog'
+import AccountCreateUpdateForm from '@/components/AccountCreateUpdateForm'
 
 export default {
   name: 'CreateAccountDialog',
@@ -37,10 +36,6 @@ export default {
       type: Boolean,
       default: false
     },
-    addTemplate: {
-      type: Boolean,
-      default: false
-    },
     asset: {
       type: Object,
       default: null
@@ -63,9 +58,6 @@ export default {
     }
   },
   computed: {
-    protocols() {
-      return this.asset ? this.asset.protocol : []
-    },
     iVisible: {
       get() {
         return this.visible
@@ -73,40 +65,37 @@ export default {
       set(val) {
         this.$emit('update:visible', val)
       }
+    },
+    protocols() {
+      return this.asset ? this.asset.protocol : []
     }
   },
   methods: {
     addAccount(form) {
       const formValue = Object.assign({}, form)
-      let data, url, iVisible
+      let assets = []
       if (this.asset) {
-        data = {
-          asset: this.asset.id,
-          ...formValue
-        }
-        iVisible = false
-        url = `/api/v1/accounts/accounts/`
+        assets = [this.asset.id]
       } else {
-        iVisible = true
-        data = formValue
-        url = `/api/v1/accounts/accounts/bulk/`
-        if (data.assets.length === 0) {
-          this.$message.error(this.$tc('assets.PleaseSelectAsset'))
-          return
-        }
+        assets = formValue.assets
       }
-      this.$axios.post(url, data, {
-        disableFlashErrorMsg: iVisible
-      }).then((data) => {
-        this.handleResult(data, null)
-        this.iVisible = iVisible
-        if (!iVisible) {
-          this.$emit('add', true)
-        }
-      }).catch(error => {
-        this.iVisible = true
-        this.handleResult(null, error)
-      })
+      delete formValue.assets
+      if (assets.length === 0) {
+        this.$message.error(this.$tc('assets.PleaseSelectAsset'))
+        return
+      }
+      const data = []
+      for (const asset of assets) {
+        data.push({
+          ...formValue,
+          asset
+        })
+      }
+      this.$axios.post(`/api/v1/accounts/accounts/`, data).then(() => {
+        this.iVisible = false
+        this.$emit('add', true)
+        this.$message.success(this.$tc('common.createSuccessMsg'))
+      }).catch(error => this.setFieldError(error))
     },
     editAccount(form) {
       const data = { ...form }
@@ -116,30 +105,6 @@ export default {
         this.$message.success(this.$tc('common.updateSuccessMsg'))
       }).catch(error => this.setFieldError(error))
     },
-    handleResult(resp, error) {
-      let bulkCreate = !this.asset
-      if (error && !Array.isArray(error?.response?.data)) {
-        bulkCreate = false
-      }
-      if (resp && !Array.isArray(resp)) {
-        bulkCreate = false
-      }
-      if (!bulkCreate) {
-        if (!error) {
-          this.$message.success(this.$tc('common.createSuccessMsg'))
-        } else {
-          this.setFieldError(error)
-        }
-      } else {
-        let result
-        if (error) {
-          result = error.response.data
-        } else {
-          result = resp
-        }
-        this.$emit('bulk-create-done', result)
-      }
-    },
     setFieldError(error) {
       const response = error.response
       const data = response.data

src/components/AccountListTable/AccountList.vue

@@ -20,48 +20,22 @@
       :title="accountCreateUpdateTitle"
       :visible.sync="showAddDialog"
       @add="addAccountSuccess"
-      @bulk-create-done="showBulkCreateResult($event)"
-    />
-    <AccountCreateUpdate
-      v-if="showAddTemplateDialog"
-      :account="account"
-      :add-template="true"
-      :asset="iAsset"
-      :title="accountCreateUpdateTitle"
-      :visible.sync="showAddTemplateDialog"
-      @add="addAccountSuccess"
-      @bulk-create-done="showBulkCreateResult($event)"
-    />
-    <ResultDialog
-      v-if="showResultDialog"
-      :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/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 ListTable from '@/components/ListTable/index'
+import { ActionsFormatter } from '@/components/TableFormatters'
+import ViewSecret from './ViewSecret'
+import UpdateSecretInfo from './UpdateSecretInfo'
+import AccountCreateUpdate from './AccountCreateUpdate'
 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,
     ViewSecret,
@@ -106,29 +80,14 @@ export default {
       type: Boolean,
       default: true
     },
-    hasDeleteAction: {
-      type: Boolean,
-      default: true
-    },
     columnsMeta: {
       type: Object,
       default: () => {
       }
     },
-    columnsDefault: {
-      type: Array,
-      default: () => ([
-        'name', 'username', 'asset', 'privileged',
-        'secret_type', 'is_active', 'date_updated'
-      ])
-    },
     headerExtraActions: {
       type: Array,
       default: () => []
-    },
-    extraQuery: {
-      type: Object,
-      default: () => ({})
     }
   },
   data() {
@@ -136,10 +95,7 @@ export default {
     return {
       showViewSecretDialog: false,
       showUpdateSecretDialog: false,
-      showResultDialog: false,
       showAddDialog: false,
-      showAddTemplateDialog: false,
-      createAccountResults: [],
       accountCreateUpdateTitle: this.$t('assets.AddAccount'),
       iAsset: this.asset,
       account: {},
@@ -150,12 +106,14 @@ export default {
           app: 'assets',
           resource: 'account'
         },
-        extraQuery: this.extraQuery,
-        columnsExclude: ['spec_info'],
-        columnsShow: {
-          min: ['name', 'username', 'actions'],
-          default: this.columnsDefault
+        extraQuery: {
+          order: '-date_updated'
         },
+        columnsExclude: ['spec_info'],
+        columns: [
+          'name', 'username', 'asset', 'privileged',
+          'secret_type', 'source', 'actions'
+        ],
         columnsMeta: {
           name: {
             formatter: function(row) {
@@ -234,27 +192,25 @@ export default {
                   }
                 },
                 {
-                  name: 'ClearSecret',
-                  title: this.$t('common.ClearSecret'),
-                  can: this.$hasPerm('accounts.change_account'),
+                  name: 'Delete',
+                  title: this.$t('common.Delete'),
+                  can: this.$hasPerm('accounts.delete_account'),
                   type: 'primary',
                   callback: ({ row }) => {
-                    this.$axios.patch(
-                      `/api/v1/accounts/accounts/clear-secret/`,
-                      { account_ids: [row.id] }
-                    ).then(() => {
-                      this.$message.success(this.$tc('common.ClearSuccessMsg'))
+                    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('accounts.Test'),
+                  title: this.$t('common.Test'),
                   can: ({ row }) =>
                     !this.$store.getters.currentOrgIsRoot &&
                     this.$hasPerm('accounts.change_account') &&
-                    row.asset['auto_config'].ansible_enabled &&
-                    row.asset['auto_config'].ping_enabled,
+                    row.asset['auto_info'].ansible_enabled &&
+                    row.asset['auto_info'].ping_enabled,
                   callback: ({ row }) => {
                     this.$axios.post(
                       `/api/v1/accounts/accounts/tasks/`,
@@ -289,7 +245,6 @@ export default {
         }
       },
       headerActions: {
-        hasLabelSearch: true,
         hasLeftActions: this.hasLeftActions,
         hasMoreActions: true,
         hasCreate: false,
@@ -304,8 +259,7 @@ export default {
         },
         exportOptions: {
           url: this.exportUrl,
-          mfaVerifyRequired: true,
-          tips: this.$t('accounts.AccountExportTips')
+          mfaVerifyRequired: true
         },
         importOptions: {
           canImportCreate: this.$hasPerm('accounts.add_account'),
@@ -329,85 +283,12 @@ export default {
               })
             }
           },
-          {
-            name: 'add-template',
-            title: this.$t('common.TemplateAdd'),
-            has: !(this.platform || this.asset),
-            can: () => {
-              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
-            },
-            callback: async() => {
-              await this.getAssetDetail()
-              setTimeout(() => {
-                vm.iAsset = this.asset
-                vm.account = {}
-                vm.accountCreateUpdateTitle = this.$t('assets.AddAccount')
-                vm.showAddTemplateDialog = true
-              })
-            }
-          },
           ...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'),
-            type: 'primary',
-            fa: 'clean',
-            can: ({ selectedRows }) => {
-              return selectedRows.length > 0 && vm.$hasPerm('accounts.change_account')
-            },
-            callback: function({ selectedRows }) {
-              const ids = selectedRows.map(v => {
-                return v.id
-              })
-              this.$axios.patch(
-                '/api/v1/accounts/accounts/clear-secret/',
-                { account_ids: ids }).then(() => {
-                this.$message.success(this.$tc('common.ClearSuccessMsg'))
-              }).catch(err => {
-                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
-            }
-          }
+          // {
+          //   name: 'autocreate',
+          //   title: this.$t('accounts.AutoCreate'),
+          //   type: 'default'
+          // }
         ],
         canBulkDelete: vm.$hasPerm('accounts.delete_account'),
         searchConfig: {
@@ -415,10 +296,6 @@ export default {
           exclude: ['asset']
         },
         hasSearch: true
-      },
-      updateSelectedDialogSetting: {
-        visible: false,
-        selectedRows: []
       }
     }
   },
@@ -438,31 +315,6 @@ 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) {
@@ -479,17 +331,6 @@ export default {
     },
     refresh() {
       this.$refs.ListTable.reloadTable()
-    },
-    showBulkCreateResult(results) {
-      this.showResultDialog = false
-      this.createAccountResults = results
-      setTimeout(() => {
-        this.showResultDialog = true
-      }, 100)
-    },
-    handleAccountBulkUpdate() {
-      this.updateSelectedDialogSetting.visible = false
-      this.$refs.ListTable.reloadTable()
     }
   }
 }

src/components/AccountListTable/PasswordHistoryDialog.vue

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

src/components/AccountListTable/UpdateSecretInfo.vue

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

src/components/AccountListTable/ViewSecret.vue

@@ -1,5 +1,12 @@
 <template>
   <div>
+    <div v-if="mfaDialogVisible">
+      <UserConfirmDialog
+        :url="url"
+        @UserConfirmCancel="exit"
+        @UserConfirmDone="getAuthInfo"
+      />
+    </div>
     <Dialog
       :destroy-on-close="true"
       :show-cancel="false"
@@ -22,9 +29,7 @@
             :cell-value="secretInfo.secret"
             :col="{ formatterArgs: {
               name: account['name'],
-              secretType: secretType || ''
             }}"
-            @input="onShowKeyCopyFormatterChange"
           />
         </el-form-item>
         <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('assets.sshKeyFingerprint')">
@@ -58,16 +63,17 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index.vue'
-import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import Dialog from '@/components/Dialog'
+import PasswordHistoryDialog from './PasswordHistoryDialog'
+import UserConfirmDialog from '@/components/UserConfirmDialog'
+import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'ShowSecretInfo',
   components: {
     Dialog,
     PasswordHistoryDialog,
+    UserConfirmDialog,
     ShowKeyCopyFormatter
   },
   props: {
@@ -83,10 +89,6 @@ export default {
       type: String,
       default: ''
     },
-    type: {
-      type: String,
-      default: 'account'
-    },
     title: {
       type: String,
       default: function() {
@@ -100,7 +102,6 @@ export default {
   },
   data() {
     return {
-      modifiedSecret: '',
       secretInfo: {},
       versions: '-',
       showSecret: false,
@@ -123,32 +124,18 @@ 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: {
     accountConfirmHandle() {
-      this.modifiedSecret && this.onChangeSecretSubmit()
       this.showSecret = false
       this.mfaDialogVisible = false
     },
-    onChangeSecretSubmit() {
-      const params = {
-        name: this.secretInfo.name,
-        secret: encryptPassword(this.modifiedSecret)
-      }
-      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'))
-      })
-    },
-    showSecretDialog() {
-      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
-        this.secretInfo = res
-        this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
+    getAuthInfo() {
+      this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
+        this.secretInfo = resp
+        this.sshKeyFingerprint = resp?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
       })
     },
@@ -157,10 +144,6 @@ export default {
     },
     showHistoryDialog() {
       this.showPasswordHistoryDialog = true
-    },
-    onShowKeyCopyFormatterChange(value) {
-      if (value === this.secretInfo.secret) return
-      this.modifiedSecret = value
     }
   }
 }

src/components/AccountListTable/const.js

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

src/components/Announcement/index.vue

@@ -7,7 +7,7 @@
     :title="title"
     @close="onClose"
   >
-    <MarkDown class="markdown" :value="announcement.content" />
+    <span class="announcement-main">{{ announcement.content }}</span>
     <span v-if="announcement.link">
       <el-link :href="announcement.link" target="_blank" type="info" class="link-more">
         {{ $t('common.ViewMore') }}
@@ -19,11 +19,9 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import MarkDown from '@/components/Widgets/MarkDown'
 
 export default {
   name: 'Announcement',
-  components: { MarkDown },
   data() {
     return {
       viewedKey: 'AnnouncementViewed'
@@ -56,7 +54,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .announcement >>> .el-alert__content {
   width: 100%;
 }
@@ -72,14 +70,4 @@ export default {
 .icon {
   vertical-align: text-bottom;
 }
->>> .markdown-body {
-  background-color: transparent !important;
-  a {
-    color: var(--color-info) !important;
-  }
-  h1, h2, h3, h4, h5 {
-    margin-top: 0;
-    margin-bottom: 10px;
-  }
-}
 </style>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -1,191 +0,0 @@
-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

@@ -1,153 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-<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/BulkCreateResultDialog.vue

@@ -1,120 +0,0 @@
-<template>
-  <Dialog
-    :show-cancel="false"
-    :title="title"
-    v-bind="$attrs"
-    @confirm="closeDialog"
-    v-on="$listeners"
-  >
-    <el-alert style="margin-bottom: 10px" type="success">
-      <span v-for="item of summary" :key="item.key"><b>{{ item.label }}</b>: {{ item.value }} </span>
-    </el-alert>
-    <DataTable :config="config" />
-  </Dialog>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog/index.vue'
-import DataTable from '@/components/Table/DataTable/index.vue'
-
-export default {
-  name: 'ResultDialog',
-  components: {
-    DataTable,
-    Dialog
-  },
-  props: {
-    result: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    const errorProp = this.$t('common.Error')
-    const stateMap = {
-      'created': this.$tc('common.Created'),
-      'updated': this.$tc('common.Updated'),
-      'skipped': this.$tc('common.Skipped')
-    }
-    const stateClsMap = {
-      'created': 'color-primary',
-      'updated': 'color-success',
-      'skipped': 'color-default'
-    }
-    return {
-      title: this.$t('accounts.AddAccountResult'),
-      config: {
-        columns: [
-          {
-            prop: 'asset',
-            label: this.$t('assets.Asset')
-          },
-          {
-            prop: 'state',
-            label: this.$t('common.Status'),
-            width: '200px',
-            formatter: (row) => {
-              if (row.error) {
-                return <span class='color-error'>{ errorProp }: { row.error }</span>
-              } else if (row.state) {
-                const colorCls = stateClsMap[row.state]
-                const state = stateMap[row.state]
-                return <span class={ colorCls }>{ state }</span>
-              }
-            }
-          }
-        ],
-        totalData: this.result
-      }
-    }
-  },
-  computed: {
-    summary() {
-      const labels = {
-        total: this.$tc('common.Total'),
-        created: this.$tc('common.Created'),
-        updated: this.$tc('common.Updated'),
-        skipped: this.$tc('common.Skipped'),
-        error: this.$tc('common.Error')
-      }
-      const grouped = _.groupBy(this.result, 'state')
-      const groupedLength = _.mapValues(grouped, 'length')
-      groupedLength['total'] = this.result.length
-      return _.map(groupedLength, (value, key) => {
-        return {
-          label: labels[key],
-          value: value,
-          key: key
-        }
-      })
-    }
-  },
-  methods: {
-    closeDialog() {
-      this.$emit('update:visible', false)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.color-error {
-  color: var(--color-danger);
-}
-
-.color-primary {
-  color: var(--color-primary);
-}
-
-.color-success {
-  color: var(--color-success);
-}
-
-.color-default {
-}
-
-::v-deep .el-data-table .el-table .el-table__row > td > div > span {
-  white-space: inherit;
-}
-
-</style>

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -1,112 +0,0 @@
-<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/AutomationParams/index.vue

@@ -1,203 +0,0 @@
-<template>
-  <div>
-    <div>
-      <el-button
-        :disabled="isDisabled"
-        size="mini"
-        type="primary"
-        @click="onOpenDialog"
-      >
-        {{ $tc('common.Setting') }}
-      </el-button>
-    </div>
-    <Dialog
-      v-if="visible"
-      :destroy-on-close="true"
-      :show-cancel="false"
-      :show-confirm="false"
-      :title="title"
-      :visible.sync="visible"
-      v-bind="$attrs"
-      width="60%"
-      v-on="$listeners"
-    >
-      <AutoDataForm
-        ref="autoDataForm"
-        :form="form"
-        class="data-form"
-        v-bind="config"
-        @submit="onSubmit"
-      />
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import Dialog from '../../Dialog'
-import AutoDataForm from '../../Form/AutoDataForm'
-
-export default {
-  componentName: 'AutomationParams',
-  components: {
-    Dialog,
-    AutoDataForm
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => ({})
-    },
-    title: {
-      type: String,
-      default: function() {
-        return this.$t('assets.PushParams')
-      }
-    },
-    assets: {
-      type: Array,
-      default: () => []
-    },
-    nodes: {
-      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,
-      config: {
-        url: this.url,
-        hasSaveContinue: false,
-        hasButtons: true,
-        method: 'get',
-        fields: [],
-        fieldsMeta: {}
-      },
-      onFieldChangeHandler: _.debounce(vm.handleFieldChange, 1000)
-    }
-  },
-  computed: {
-    refForm() {
-      return this.$refs.autoDataForm
-    }
-  },
-  watch: {
-    nodes: {
-      handler() {
-        this.onFieldChangeHandler()
-      },
-      deep: true
-    },
-    assets: {
-      handler() {
-        this.onFieldChangeHandler()
-      },
-      deep: true
-    },
-    platforms: {
-      handler(newVal) {
-        this.onFieldChangeHandler()
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  async mounted() {
-    await this.getUrlMeta()
-  },
-  methods: {
-    async getUrlMeta() {
-      const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
-      this.remoteMeta = data.actions[this.config.method.toUpperCase()] || {}
-    },
-    async getFilterPlatforms() {
-      return await this.$axios.post(
-        '/api/v1/assets/platforms/filter-nodes-assets/',
-        {
-          'node_ids': this.nodes,
-          'asset_ids': this.assets,
-          'platform_ids': this.platforms.map(i => i.id || i.pk || i)
-        }
-      )
-    },
-    async handleFieldChange() {
-      const platforms = await this.getFilterPlatforms()
-      let pushAccountMethods = platforms.map(i => i.automation[this.method])
-      pushAccountMethods = _.uniq(pushAccountMethods)
-      // 检测是否有可设置的推送方式
-      const hasCanSettingPushMethods = _.intersection(pushAccountMethods, Object.keys(this.remoteMeta))
-      this.setFormConfig(hasCanSettingPushMethods)
-      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] || {}
-        // 修改资产、节点时不点击设置按钮也需要获取form表单值暴露出去
-        if (this.form.hasOwnProperty(method)) {
-          newForm[method] = this.form[method]
-        }
-        fields.push([filterField.label, [method]])
-        fieldsMeta[method] = {
-          fields: [],
-          fieldsMeta: {}
-        }
-        if (Object.keys(filterField?.children || {}).length > 0) {
-          for (const [k, v] of Object.entries(filterField.children)) {
-            const item = {
-              ...v,
-              type: typeMapper[v.type] || 'input'
-            }
-            delete item.default
-            fieldsMeta[method].fields.push(k)
-            fieldsMeta[method].fieldsMeta[k] = item
-          }
-        }
-      }
-
-      this.form = newForm
-      this.config.fields = fields
-      this.config.fieldsMeta = fieldsMeta
-    },
-    onOpenDialog() {
-      this.visible = true
-    },
-    onSubmit(form) {
-      this.form = form
-      this.$emit('input', form)
-      setTimeout(() => {
-        this.visible = false
-      }, 100)
-      this.$log.debug('Auto push form:', form)
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/components/Apps/BlockedIPs/BlockedIPList.vue

@@ -1,97 +0,0 @@
-<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

@@ -1,86 +0,0 @@
-<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

@@ -1,136 +0,0 @@
-<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

@@ -1,163 +0,0 @@
-<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

@@ -1,186 +0,0 @@
-<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

@@ -1,178 +0,0 @@
-<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

@@ -1,271 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-<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

@@ -1,145 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-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

@@ -1,209 +0,0 @@
-<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/ManyJsonTabs/AssetJsonTab.vue

@@ -1,71 +0,0 @@
-<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

@@ -1,91 +0,0 @@
-<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/UserConfirmDialog/index.vue

@@ -1,234 +0,0 @@
-<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/AssetRelationCard/index.vue

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

src/components/AssetSelect/dialog.vue

@@ -1,12 +1,10 @@
 <template>
   <Dialog
-    :close-on-click-modal="false"
-    :loading-status="!isLoaded"
     :title="$tc('assets.Assets')"
     custom-class="asset-select-dialog"
-    top="2vh"
+    top="1vh"
     v-bind="$attrs"
-    width="1000px"
+    width="80vw"
     @cancel="handleCancel"
     @close="handleClose"
     @confirm="handleConfirm"
@@ -19,17 +17,15 @@
       :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/Apps/AssetTreeTable/index.vue'
-import Dialog from '@/components/Dialog/index.vue'
+import AssetTreeTable from '@/components/AssetTreeTable'
+import Dialog from '@/components/Dialog'
 
 export default {
   componentName: 'AssetSelectDialog',
@@ -56,16 +52,11 @@ 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: [],
@@ -92,6 +83,16 @@ 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
@@ -113,7 +114,6 @@ export default {
       headerActions: {
         hasLeftActions: false,
         hasRightActions: false,
-        hasLabelSearch: true,
         searchConfig: {
           getUrlQuery: false
         }
@@ -146,9 +146,6 @@ export default {
       if (selectValueIndex > -1) {
         this.rowSelected.splice(selectValueIndex, 1)
       }
-    },
-    handleTableLoaded() {
-      this.isLoaded = true
     }
   }
 }
@@ -171,7 +168,7 @@ export default {
     }
 
     .right {
-      min-height: 500px;
+      height: calc(100vh - 200px);
       overflow: auto;
     }
 

src/components/AssetSelect/index.vue

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

src/components/AssetTreeTable/index.vue

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

src/components/AutoDataForm/components/NestedField.vue

@@ -1,19 +1,16 @@
 <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/Form/DataForm/index.vue'
+import DataForm from '@/components/DataForm'
 
 export default {
   name: 'NestedField',
@@ -40,8 +37,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
-      formJson: JSON.stringify(this.value),
       kwargs: {
         hasReset: false,
         hasSaveContinue: false,
@@ -70,26 +65,7 @@ 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/AutoDataForm/index.vue

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

src/components/AutoDataForm/utils.js

@@ -1,12 +1,12 @@
 import Vue from 'vue'
-import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
-import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
-import Switcher from '@/components/Form/FormFields/Switcher.vue'
-import rules from '@/components/Form/DataForm/rules'
-import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
-import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
+import 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 { assignIfNot } from '@/utils/common'
-import TagInput from '@/components/Form/FormFields/TagInput.vue'
 
 export class FormFieldGenerator {
   constructor(emit) {
@@ -44,14 +44,13 @@ export class FormFieldGenerator {
         break
       case 'field':
         type = ''
-        field.component = ObjectSelect2
+        field.component = Select2
         if (fieldRemoteMeta.required) {
           field.el.clearable = false
         }
-        field.el.label = field.label
-        // if (fieldRemoteMeta.child && fieldRemoteMeta.child.type === 'nested object') {
-        //   field.component = ObjectSelect2
-        // }
+        if (fieldRemoteMeta.child && fieldRemoteMeta.child.type === 'nested object') {
+          field.component = ObjectSelect2
+        }
         break
       case 'string':
         type = 'input'
@@ -67,16 +66,11 @@ export class FormFieldGenerator {
         type = ''
         field.component = Switcher
         break
-      case 'list':
-        type = 'input'
-        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'
@@ -86,10 +80,6 @@ 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'
@@ -108,12 +98,9 @@ export class FormFieldGenerator {
 
   generateNestFields(field, fieldMeta, fieldRemoteMeta) {
     const fields = []
-    let nestedFields = fieldMeta.fields || []
+    const nestedFields = fieldMeta.fields || []
     const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
     const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
-    if (nestedFields === '__all__') {
-      nestedFields = Object.keys(nestedFieldsRemoteMeta)
-    }
     for (const name of nestedFields) {
       const f = this.generateField(name, nestedFieldsMeta, nestedFieldsRemoteMeta)
       fields.push(f)
@@ -180,7 +167,7 @@ export class FormFieldGenerator {
       id: groupTitle,
       title: groupTitle,
       fields: _fields,
-      name: _fields[0]?.id
+      name: _fields[0].id
     }
     this.groups.push(group)
     return _fields
@@ -188,9 +175,6 @@ export class FormFieldGenerator {
 
   generateFields(_fields, fieldsMeta, remoteFieldsMeta) {
     let fields = []
-    if (_fields === '__all__') {
-      _fields = Object.keys(remoteFieldsMeta)
-    }
     for (let field of _fields) {
       if (field instanceof Array) {
         const items = this.generateFieldGroup(field, fieldsMeta, remoteFieldsMeta)

src/components/AutoDataSearch/index.vue

@@ -1,16 +1,10 @@
 <template>
-  <span>
-    <el-button v-if="shouldFold" circle class="search-btn" size="mini" @click="handleManualSearch">
-      <svg-icon icon-class="search" />
-    </el-button>
-    <TagSearch v-else :options="iOption" v-bind="$attrs" v-on="$listeners" @tag-search="handleTagSearch" />
-  </span>
+  <TagSearch :options="iOption" v-bind="$attrs" v-on="$listeners" />
 </template>
 
 <script>
-import TagSearch from '@/components/Table/TagSearch/index.vue'
+import TagSearch from '@/components/TagSearch'
 import i18n from '@/i18n/i18n'
-
 export default {
   name: 'AutoDataSearch',
   components: {
@@ -30,27 +24,17 @@ export default {
     exclude: {
       type: Array,
       default: () => []
-    },
-    // 建议折叠
-    fold: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
     return {
-      internalOptions: [],
-      tags: [],
-      manualSearch: false
+      internalOptions: []
     }
   },
   computed: {
     iOption() {
       const options = this.options.concat(this.internalOptions)
       return _.uniqWith(options, _.isEqual)
-    },
-    shouldFold() {
-      return this.fold && this.tags.length === 0 && !this.manualSearch
     }
   },
   watch: {
@@ -67,19 +51,6 @@ export default {
     }
   },
   methods: {
-    handleTagSearch(tags) {
-      if (_.isEqual(tags, this.tags)) {
-        return
-      }
-      this.tags = tags
-      if (tags.length === 0) {
-        this.manualSearch = false
-      }
-      this.$emit('tagSearch', tags)
-    },
-    handleManualSearch() {
-      this.manualSearch = true
-    },
     async genericOptions() {
       const vm = this // 透传This
       vm.internalOptions = [] // 重置
@@ -130,11 +101,4 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.search-btn {
-  margin-top: 4px;
-  cursor: pointer;
-  &:hover {
-    color: #409eff;
-  }
-}
 </style>

src/components/AutoDataTable/components/ColumnSettingPopover.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index.vue'
+import Dialog from '@/components/Dialog/index'
 
 export default {
   name: 'ColumnSettingPopover',

src/components/AutoDataTable/index.vue

@@ -20,15 +20,14 @@
 </template>
 
 <script type="text/jsx">
-import DataTable from '@/components/Table/DataTable/index.vue'
+import DataTable from '../DataTable'
 import {
   ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
   ObjectRelatedFormatter
-} from '@/components/Table/TableFormatters'
+} from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
 import { newURL, replaceAllUUID } from '@/utils/common'
-import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
-import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
+import ColumnSettingPopover from './components/ColumnSettingPopover'
 
 export default {
   name: 'AutoDataTable',
@@ -141,9 +140,6 @@ export default {
         case 'date_start':
           col.formatter = DateFormatter
           break
-        case 'labels':
-          col.formatter = LabelsFormatter
-          break
         case 'comment':
           col.showOverflowTooltip = true
       }
@@ -333,7 +329,7 @@ export default {
 
       // 最小列
       const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
-        .filter(n => totalColumnsNames.includes(n))
+        .filter(n => defaultColumnsNames.indexOf(n) > -1)
 
       // 应该显示的列
       const _tableConfig = localStorage.getItem('tableConfig')

src/components/AutoDataZTree/index.vue

@@ -2,13 +2,13 @@
   <DataZTree ref="dataztree" :setting="treeSetting" class="data-z-tree" v-on="$listeners">
     <slot v-if="treeSetting.hasRightMenu" slot="rMenu">
       <li v-if="treeSetting.showCreate" id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
-        <i class="fa fa-plus-square-o" /> {{ this.$t('tree.CreateNode') }}
+        <i class="fa fa-plus-square-o" />  {{ this.$t('tree.CreateNode') }}
       </li>
       <li v-if="treeSetting.showUpdate" id="m_edit" class="rmenu" tabindex="-1" @click="editTreeNode">
-        <i class="fa fa-pencil-square-o" /> {{ this.$t('tree.RenameNode') }}
+        <i class="fa fa-pencil-square-o" />  {{ this.$t('tree.RenameNode') }}
       </li>
       <li v-if="treeSetting.showDelete" id="m_del" class="rmenu" tabindex="-1" @click="removeTreeNode">
-        <i class="fa fa-minus-square" /> {{ this.$t('tree.DeleteNode') }}
+        <i class="fa fa-minus-square" />  {{ this.$t('tree.DeleteNode') }}
       </li>
       <slot name="rMenu" />
     </slot>
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import DataZTree from '../DataZTree/index.vue'
+import DataZTree from '../DataZTree'
 import $ from '@/utils/jquery-vendor'
 import { mapGetters } from 'vuex'
 
@@ -42,9 +42,7 @@ export default {
         customTreeHeaderName: this.$t('assets.AssetTree'),
         async: {
           enable: true,
-          url: (process.env.VUE_APP_ENV === 'production')
-            ? (`${this.setting.treeUrl}`)
-            : (`${process.env.VUE_APP_BASE_API}${this.setting.treeUrl}`),
+          url: (process.env.VUE_APP_ENV === 'production') ? (`${this.setting.treeUrl}`) : (`${process.env.VUE_APP_BASE_API}${this.setting.treeUrl}`),
           autoParam: ['id=key', 'name=n', 'level=lv'],
           type: 'get',
           headers: {
@@ -57,8 +55,7 @@ export default {
           onSelected: this.onSelected.bind(this),
           beforeDrop: this.beforeDrop.bind(this),
           onDrop: this.onDrop.bind(this),
-          refresh: this.refresh.bind(this),
-          onAsyncSuccess: this.onAsyncSuccess.bind(this)
+          refresh: this.refresh.bind(this)
           // 尚未定义的函数
           // beforeClick
           // beforeDrag
@@ -90,16 +87,6 @@ export default {
     $('body').unbind('mousedown')
   },
   methods: {
-    onAsyncSuccess(event, treeId, treeNode, msg) {
-      const nodes = JSON.parse(msg)
-      nodes.forEach((node) => {
-        if (treeNode.checked) {
-          const currentNode = this.zTree.getNodeByParam('id', node.id, null)
-          currentNode.checked = true
-          this.zTree.updateNode(currentNode)
-        }
-      })
-    },
     refreshTree: function() {
       // const refreshIconRef = $('#tree-refresh')
       // refreshIconRef.click()
@@ -168,7 +155,10 @@ export default {
       if (isCancel) {
         return
       }
-      this.$axios.patch(url, { 'value': treeNode.name }).then(res => {
+      this.$axios.patch(
+        url,
+        { 'value': treeNode.name }
+      ).then(res => {
         let assetsAmount = treeNode.meta.data['assetsAmount']
         if (!assetsAmount) {
           assetsAmount = 0
@@ -219,9 +209,6 @@ export default {
         this.showRMenu('root', event.clientX, event.clientY)
       } else if (treeNode && !treeNode.noR) {
         this.zTree.selectNode(treeNode)
-        if (treeNode.meta?.data?.id) {
-          this.currentNodeId = treeNode.meta.data.id
-        }
         this.showRMenu('node', event.clientX, event.clientY)
       }
     },
@@ -299,32 +286,32 @@ export default {
 </script>
 
 <style scoped>
-.rmenu {
-  font-size: 12px;
-  padding: 0 16px;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #606266;
-  height: 24px;
-  line-height: 24px;
-  box-sizing: border-box;
-  cursor: pointer;
-}
+  .rmenu {
+    font-size: 12px;
+    padding: 0 16px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+    height: 24px;
+    line-height: 24px;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
 
-.rmenu > a:hover, .dropdown-menu > a:focus {
-  color: #262626;
-  text-decoration: none;
-  background-color: #f5f5f5;
-}
+  .rmenu > a:hover, .dropdown-menu > a:focus {
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5;
+  }
 
-.rmenu:hover {
-  background-color: #f5f7fa;
-}
+  .rmenu:hover {
+    background-color: #f5f7fa;
+  }
 
-.data-z-tree >>> .fa {
-  width: 10px;
-  margin-right: 3px;
-}
+  .data-z-tree >>> .fa {
+    width: 10px;
+    margin-right: 3px;
+  }
 </style>

src/components/Breadcrumb/index.vue

@@ -1,8 +1,8 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect' || index === levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ $tr( item.meta.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>

src/components/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')" class="crontab-panel">
+      <el-tab-pane v-if="shouldHide('min')" :label="$tc('common.CronTab.min')">
         <CrontabMin
           ref="cronmin"
           :check="checkNumber"
@@ -59,38 +59,38 @@
             <td>
               <el-input
                 v-model.trim="contabValueObj.min"
-                max="5"
                 min="0"
+                max="5"
+                size="small"
                 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" @crontabDiffChange="crontabDiffChangeHandle" />
+      <CrontabResult :ex="contabValueString" />
 
       <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,8 +167,7 @@ export default {
         week: '*'
         // year: "",
       },
-      newContabValueString: '',
-      crontabDiff: 0
+      newContabValueString: ''
     }
   },
   computed: {
@@ -365,12 +364,6 @@ 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()
     },
@@ -388,16 +381,13 @@ export default {
       for (const j in this.contabValueObj) {
         this.changeRadio(j, this.contabValueObj[j])
       }
-    },
-    crontabDiffChangeHandle(diff) {
-      this.crontabDiff = diff
     }
   }
 }
 </script>
-<style lang='scss' scoped>
+<style scoped>
 .pop_btn {
-  float: right;
+  text-align: center;
   margin-top: 20px;
 }
 
@@ -463,12 +453,6 @@ 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/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" :max="31" :min="0" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="31" :min="0" size="mini" /> {{ this.$t('common.CronTab.day') }}
+        <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-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" :max="31" :min="1" size="mini" /> {{ this.$t('common.CronTab.day') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :min="1" :max="31" /> {{ 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"
-          :placeholder="$tc('common.CronTab.manyChoose')"
           clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
           multiple
           style="width:100%"
         >

src/components/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" :max="60" :min="0" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('common.CronTab.hour') }}
+        <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-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" :max="60" :min="1" size="mini" /> {{ this.$t('common.CronTab.hour') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :min="1" :max="60" /> {{ 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"
-          :placeholder="$tc('common.CronTab.manyChoose')"
           clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
           multiple
           style="width:100%"
         >

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

@@ -7,11 +7,18 @@
       </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" :max="60" :min="1" size="mini" />
-        {{ this.$t('common.CronTab.min') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :min="1" :max="60" /> {{ this.$t('common.CronTab.min') }}{{ this.$t('common.CronTab.executeOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -20,13 +27,13 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
           clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
           multiple
-          size="small"
           style="width:100%"
+          size="small"
         >
-          <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>
@@ -151,7 +158,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/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" :max="12" :min="1" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="12" :min="1" size="mini" /> {{ this.$t('common.CronTab.month') }}
+        <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-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" :max="12" :min="1" size="mini" /> {{ this.$t('common.CronTab.month') }}{{ this.$t('common.CronTab.executeOnce') }}
+        <el-input-number v-model="average02" :min="1" :max="12" /> {{ 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"
-          :placeholder="$tc('common.CronTab.manyChoose')"
           clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
           multiple
           style="width:100%"
         >

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

@@ -14,7 +14,6 @@
 <script>
 import parser from 'cron-parser'
 import { toSafeLocalDateStr } from '@/utils/common'
-
 export default {
   name: 'CrontabResult',
   props: {
@@ -52,10 +51,6 @@ 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/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" :max="7" :min="1" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="7" :min="1" size="mini" />
+        <el-input-number v-model="cycle01" :min="1" :max="7" /> -
+        <el-input-number v-model="cycle02" :min="1" :max="7" />
       </el-radio>
     </el-form-item>
 
@@ -20,14 +20,12 @@
         {{ this.$t('common.CronTab.appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
           clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
           multiple
           style="width:100%"
         >
-          <el-option v-for="(item,index) of weekList" :key="index" :value="index === 6 ? 0 : (index + 1)">
-            {{ item }}
-          </el-option>
+          <el-option v-for="(item,index) of weekList" :key="index" :value="index+1">{{ item }}</el-option>
         </el-select>
       </el-radio>
     </el-form-item>

src/components/CronTab/index.vue

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

src/components/DataActions/index.vue

@@ -28,10 +28,7 @@
               :command="[option, action]"
               v-bind="option"
             >
-              <span v-if="option.fa">
-                <i v-if="option.fa.startsWith('fa-')" :class="'fa ' + option.fa" />
-                <svg-icon v-else :icon-class="option.fa" style="font-size: 14px; margin-right: 2px; margin-left: -2px;" />
-              </span>
+              <i v-if="option.fa" :class="'fa ' + option.fa" />
               {{ option.title }}
             </el-dropdown-item>
           </template>
@@ -161,7 +158,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .layout {
   display: flex;
   justify-content: center;
@@ -189,22 +186,4 @@ export default {
 .el-button-ungroup .action-item:first-child {
   margin-left: 0;
 }
-::v-deep .more-batch-processing {
-  &.el-dropdown-menu__item--divided {
-    margin-top: 0;
-    border-top: none;
-    color: #909399;
-    cursor: auto;
-    font-size: 12px;
-    line-height: 30px;
-    border-bottom: 1px solid #E4E7ED;
-    &:before {
-      height: 0;
-    }
-  }
-  &.el-dropdown-menu__item:not(.is-disabled):hover {
-    color: #909399;
-    background-color: #FFFFFF;
-  }
-}
 </style>

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

@@ -7,11 +7,13 @@
     v-bind="data.attrs"
   >
     <template v-if="data.helpTips" #label>
-      {{ data.label }}
-      <el-tooltip placement="top" effect="light" popper-class="help-tips">
+      <el-tooltip placement="bottom" effect="light" popper-class="help-tips">
         <div slot="content" v-html="data.helpTips" />
-        <i class="fa fa-question-circle-o" />
+        <el-button style="padding: 0">
+          <i class="fa fa-info-circle" />
+        </el-button>
       </el-tooltip>
+      {{ data.label }}
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -68,8 +70,7 @@
           :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/DataForm/index.vue

@@ -38,11 +38,11 @@
         v-if="defaultButton"
         :disabled="!canSubmit"
         :loading="isSubmitting"
-        :size="submitBtnSize"
+        size="small"
         type="primary"
         @click="submitForm('form')"
       >
-        {{ submitBtnText }}
+        {{ $t('common.Submit') }}
       </el-button>
     </el-form-item>
   </ElFormRender>
@@ -73,16 +73,6 @@ 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
@@ -111,9 +101,6 @@ export default {
     }
   },
   computed: {
-    elForm() {
-      return this.$refs.form
-    },
     mobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -136,8 +123,8 @@ export default {
       })
     },
     // 重置表单
-    resetForm() {
-      this.$refs['form'].resetFields()
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
     },
     handleClick(button) {
       const callback = button.callback || function(values, form) {
@@ -146,9 +133,6 @@ export default {
       const form = this.$refs['form']
       const values = form.getFormValue()
       callback(values, form, button)
-    },
-    getFormValue() {
-      return this.$refs.form.getFormValue()
     }
   }
 }

src/components/DataForm/rules/index.js

@@ -53,27 +53,13 @@ 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,
-  MatchExcludeParenthesis
+  matchAlphanumericUnderscore
 }
 
 export const JsonRequired = {

src/components/DataTable/compenents/el-data-table/el-data-table.vue

@@ -1216,7 +1216,7 @@ export default {
     },
 
     // 树形table相关
-    // https://github.com/PanJiaChen/vue-element-admin/tree/master/@/components/TreeTable
+    // https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable
     tree2Array(data, expandAll, parent = null, level = null) {
       let tmp = []
       data.forEach(record => {

src/components/DataTable/compenents/el-data-table/utils/select-strategy.js

@@ -34,14 +34,12 @@ class StrategyNormal extends StrategyAbstract {
   onSelectionChange(val) {
     this.elDataTable.selected = val
   }
-
   /**
    * toggleRowSelection和clearSelection的表现与el-table一致
    */
   toggleRowSelection(...args) {
     return this.elTable.toggleRowSelection(...args)
   }
-
   clearSelection() {
     return this.elTable.clearSelection()
   }
@@ -52,12 +50,12 @@ class StrategyNormal extends StrategyAbstract {
  */
 class StrategyPersistSelection extends StrategyAbstract {
   /**
-   * el-table 的 selection-change 事件不适用于开启跨页保存的情况。
-   * 比如，当开启 persistSelection时，发生以下两个场景：
+   * el-table的selection-change事件不适用于开启跨页保存的情况。
+   * 比如，当开启persistSelection时，发生以下两个场景：
    * 1. 用户点击翻页
    * 2. 用户点击行首的切换全选项按钮，清空当前页多选项数据
-   * 其中场景 1 应该保持 selected 不变；而场景 2 只应该从 selected 移除当前页所有行，保留其他页面的多选状态。
-   * 但 el-table 的 selection-change 事件在两个场景中无差别发生，所以这里不处理这个事件
+   * 其中场景1应该保持selected不变；而场景2只应该从selected移除当前页所有行，保留其他页面的多选状态。
+   * 但el-table的selection-change事件在两个场景中无差别发生，所以这里不处理这个事件
    */
 
   /**
@@ -65,106 +63,51 @@ class StrategyPersistSelection extends StrategyAbstract {
    */
   onSelect(selection, row) {
     const isChosen = selection.indexOf(row) > -1
-
     this.toggleRowSelection(row, isChosen)
   }
   /**
    * 用户切换当前页的多选
    */
   onSelectAll(selection, selectable = () => true) {
-    const { id, selected, data } = this.elDataTable
-
-    const selectedIds = new Set(selected.map(r => r[id]))
-
-    // 获取当前所有已选择的项
-    const selectedRows = data.filter(r => selection.includes(r))
-
-    // 判断是否已全选
-    const isSelected = data.every(r => selectable(r) && selectedRows.includes(r))
-
-    const rowsToSelect = []
-    const rowsToDeselect = []
-
-    data.forEach(r => {
+    const isSelected = !!selection.length
+    this.elDataTable.data.forEach(r => {
       if (selectable(r)) {
-        const isRowSelected = selectedIds.has(r[id])
-
-        if (isSelected && !isRowSelected) {
-          rowsToSelect.push(r)
-        } else if (!isSelected && isRowSelected) {
-          rowsToDeselect.push(r)
-        }
+        this.toggleRowSelection(r, isSelected)
       }
     })
-
-    if (isSelected) {
-      rowsToSelect.forEach(row => {
-        selected.push(row)
-        selectedIds.add(row[id])
-      })
-      rowsToDeselect.forEach(row => {
-        this.elDataTable.toggleRowSelection(row, true)
-      })
-    } else {
-      rowsToDeselect.forEach(row => {
-        const index = selected.findIndex(item => item[id] === row[id])
-        if (index !== -1) {
-          selected.splice(index, 1)
-        }
-        selectedIds.delete(row[id])
-      })
-      rowsToSelect.forEach(row => {
-        this.elDataTable.toggleRowSelection(row, false)
-      })
-    }
-
-    // this.elTable.selected = Array.from(selectedIds).map(id => {
-    //   return data.find(r => r[id] === id)
-    // })
   }
   /**
-   * toggleRowSelection 和 clearSelection 管理 elDataTable 的 selected 数组
-   * 记得最后要将状态同步到 el-table 中
+   * toggleRowSelection和clearSelection管理elDataTable的selected数组
+   * 记得最后要将状态同步到el-table中
    */
   toggleRowSelection(row, isSelected) {
     const { id, selected } = this.elDataTable
     const foundIndex = selected.findIndex(r => r[id] === row[id])
-
     if (typeof isSelected === 'undefined') {
       isSelected = foundIndex <= -1
     }
-
     if (isSelected && foundIndex === -1) {
       selected.push(row)
     } else if (!isSelected && foundIndex > -1) {
       selected.splice(foundIndex, 1)
     }
-
     this.elDataTable.$emit('toggle-row-selection', isSelected, row)
     this.updateElTableSelection()
   }
-
   clearSelection() {
     this.elDataTable.selected = []
     this.updateElTableSelection()
   }
-
   /**
    * 将selected状态同步到el-table中
    */
   updateElTableSelection() {
     const { data, id, selected } = this.elDataTable
-
-    // 历史勾选的行已经不在当前页了，所以要将当前页的行数据和selected合并
-    const mergeData = _.uniqWith([...data, ...selected], _.isEqual)
-
-    mergeData.forEach(r => {
+    data.forEach(r => {
       const isSelected = !!selected.find(r2 => r[id] === r2[id])
-
       if (!this.elTable) {
         return
       }
-
       this.elTable.toggleRowSelection(r, isSelected)
     })
   }

src/components/DataTable/index.vue

@@ -3,9 +3,9 @@
     ref="table"
     class="el-data-table"
     v-bind="tableConfig"
-    @sizeChange="handleSizeChange"
     @update="onUpdate"
     v-on="iListeners"
+    @sizeChange="handleSizeChange"
   />
 </template>
 
@@ -153,8 +153,6 @@ export default {
           this.toggleRowSelection(row, true)
         }
       }
-
-      this.$emit('loaded')
     },
     handleSizeChange(val) {
       localStorage.setItem('paginationSize', val)
@@ -170,4 +168,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .el-data-table > > > .el-table {
+    .table {
+      margin-top: 15px;
+    }
+
+    .el-table__row {
+      &.selected-row {
+        background-color: #f5f7fa;
+      }
+
+      & > td {
+        line-height: 1.5;
+        padding: 6px 0;
+        font-size: 13px;
+        border-right: none;
+        * {
+          vertical-align: middle;
+        }
+
+        .el-checkbox {
+          vertical-align: super;
+        }
+
+        & > div > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .el-table__header > thead > tr > th {
+      padding: 6px 0;
+      background-color: #ffffff;
+      font-size: 13px;
+      line-height: 1.5;
+      border-right: none;
+      .cell {
+        white-space: nowrap !important;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:hover {
+          border-right: 2px solid #EBEEF5;
+        }
+      }
+    }
+  }
+  .el-data-table >>> .el-table .el-table__header > thead > tr .is-sortable {
+    padding: 5px 0;
+    .cell {
+      padding-top: 3px!important;
+    }
+  }
 </style>

src/components/DataZTree/components/ZTree/index.vue

@@ -46,7 +46,7 @@ import $ from '@/utils/jquery-vendor.js'
 import '@ztree/ztree_v3/js/jquery.ztree.all.min.js'
 import '@ztree/ztree_v3/js/jquery.ztree.exhide.min.js'
 import '@/styles/ztree.css'
-import '@/styles/ztree_icon.scss'
+import '@/styles/ztree_icon.css'
 import axiosRetry from 'axios-retry'
 
 const defaultObject = {
@@ -91,7 +91,7 @@ export default {
       let treeUrl
       this.loading = true
       if (refresh && this.treeSetting.treeUrl.indexOf('/perms/') !== -1 &&
-          this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1
+        this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1
       ) {
         treeUrl = (this.treeSetting.treeUrl.indexOf('?') === -1)
           ? `${this.treeSetting.treeUrl}?rebuild_tree=1`
@@ -148,12 +148,12 @@ export default {
     rootNodeAddDom(rootNode) {
       const { showSearch, showRefresh } = this.treeSetting
       const searchIcon = `
-        <a class="tree-action-btn" id="search-btn" onclick="onSearch()">
-          <i class="fa fa-search tree-banner-icon"></i>
+        <a class="tree-action-btn" id='search-btn' onclick="onSearch()">
+          <i class='fa fa-search tree-banner-icon'></i>
         </a>`
       const refreshIcon = `
-        <a id="tree-refresh" class="tree-action-btn" onclick="refresh()">
-          <i class="fa fa-refresh"></i>
+        <a id='tree-refresh' class="tree-action-btn" onclick='refresh()'>
+          <i class='fa fa-refresh'></i>
         </a>`
       const treeActions = `${showSearch ? searchIcon : ''}${showRefresh ? refreshIcon : ''}`
       const icons = `
@@ -162,15 +162,11 @@ export default {
         </span>`
       if (rootNode) {
         const $rootNodeRef = $('#' + rootNode.tId + '_a')
-        $rootNodeRef.css({ 'width': 'calc(100% - 68px)', 'overflow': 'hidden', 'text-overflow': 'ellipsis' })
         $rootNodeRef.after(icons)
       }
     },
     async refresh() {
       this.treeSearchValue = ''
-      if (this.treeSetting?.callback?.beforeRefresh) {
-        this.treeSetting.callback.beforeRefresh()
-      }
       if (this.treeSetting?.callback?.refresh) {
         await this.treeSetting.callback.refresh()
       }
@@ -310,7 +306,7 @@ export default {
         this.zTree.hideNodes(treeNodes)
       }
 
-      let treeUrl = this.treeSetting.searchUrl ? this.treeSetting.searchUrl : this.treeSetting.treeUrl
+      let treeUrl = this.treeSetting.treeUrl
       const filterField = treeUrl.includes('?') ? `&search=${keyword}` : `?search=${keyword}`
       if (treeUrl.indexOf('assets/nodes/children/tree') > -1) {
         treeUrl = treeUrl + '&all=all'
@@ -340,263 +336,259 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
+<style lang='scss' scoped>
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-track:horizontal {
+    background: #FFFFFF;
+    border-radius: 10px;
+  }
+  div.rMenu {
+    position: absolute;
+    visibility: hidden;
+    text-align: left;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    float: left;
+    padding: 0 0;
+    margin: 2px 0 0;
+    list-style: none;
+    background-clip: padding-box;
+  }
 
-::-webkit-scrollbar-track:horizontal {
-  background: #FFFFFF;
-  border-radius: 10px;
-}
+  .dataTables_wrapper .dataTables_processing {
+    opacity: .9;
+    border: none;
+  }
 
-div.rMenu {
-  position: absolute;
-  visibility: hidden;
-  text-align: left;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  float: left;
-  padding: 0 0;
-  margin: 2px 0 0;
-  list-style: none;
-  background-clip: padding-box;
-}
+  div.rMenu li {
+    margin: 6px 0;
+    cursor: pointer;
+    list-style: none outside none;
+  }
 
-.dataTables_wrapper .dataTables_processing {
-  opacity: .9;
-  border: none;
-}
+  .dropdown-menu {
+    border: medium none;
+    min-width: 160px;
+    background-color: #fff;
+    border-radius: 3px;
+    box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
+    display: block;
+    float: left;
+    font-size: 12px;
+    left: 0;
+    list-style: none outside none;
+    padding: 0;
+    position: absolute;
+    text-shadow: none;
+    top: 100%;
+    z-index: 1000;
+  }
 
-div.rMenu li {
-  margin: 6px 0;
-  cursor: pointer;
-  list-style: none outside none;
-}
+  .ztree ::v-deep .fa {
+    font: normal normal normal 14px/1 FontAwesome !important;
+  }
 
-.dropdown-menu {
-  border: medium none;
-  min-width: 160px;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
-  display: block;
-  float: left;
-  font-size: 12px;
-  left: 0;
-  list-style: none outside none;
-  padding: 0;
-  position: absolute;
-  text-shadow: none;
-  top: 100%;
-  z-index: 1000;
-  height: 300px;
-  overflow: auto;
-}
+  .dropdown a:hover {
+    background-color: #f1f1f1
+  }
 
-.ztree ::v-deep .fa {
-  font: normal normal normal 14px/1 FontAwesome !important;
-}
+  .dropdown-menu > li > a {
+    border-radius: 3px;
+    color: inherit;
+    line-height: 25px;
+    margin: 4px;
+    text-align: left;
+    font-weight: normal;
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    white-space: nowrap;
+  }
 
-.dropdown a:hover {
-  background-color: #f1f1f1
-}
+  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5;
+  }
 
-.dropdown-menu > li > a {
-  border-radius: 3px;
-  color: inherit;
-  line-height: 25px;
-  margin: 4px;
-  text-align: left;
-  font-weight: normal;
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  white-space: nowrap;
-}
-
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
-  color: #262626;
-  text-decoration: none;
-  background-color: #f5f5f5;
-}
-
-.treebox {
-  background-color: transparent;
-
-  > > > .ztree {
-    overflow: auto;
+  .treebox {
     background-color: transparent;
-    height: calc(100vh - 237px);
 
-    li {
-      background-color: transparent !important;
+    >>> .ztree {
+      overflow: auto;
+      background-color: transparent;
+      height: calc(100vh - 237px);
 
-      .button {
-        background-color: rgba(0, 0, 0, 0);
-      }
-
-      ul {
+      li {
         background-color: transparent !important;
+
+        .button {
+          background-color: rgba(0, 0, 0, 0);
+        }
+
+        ul {
+          background-color: transparent !important;
+        }
       }
     }
   }
-}
 
-::v-deep #tree-refresh {
-  margin-left: 3px;
-}
+  ::v-deep #tree-refresh {
+    margin-left: 3px;
+  }
 
-::v-deep .tree-banner-icon-zone {
-  position: absolute;
-  right: 7px;
-  height: 30px;
-  overflow: hidden;
+  ::v-deep .tree-banner-icon-zone {
+    position: absolute;
+    right: 7px;
+    height: 30px;
+    overflow: hidden;
 
-  .fa {
-    color: #838385 !important;;
+    .fa {
+      color: #838385 !important;;
+
+      &:hover {
+        color: #606266 !important;;
+      }
+    }
+  }
+
+  ::v-deep .tree-search {
+    position: relative;
+    top: -2px;
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    border-radius: 12px;
+    vertical-align: sub;
+    transition: .25s;
+    overflow: hidden;
+
+    .fa {
+      width: 13px !important;
+    }
+
+    .fa-search {
+      padding-top: 1px;
+    }
+  }
+
+  ::v-deep .tree-search .tree-banner-icon {
+    position: absolute;
+    top: 4px;
+    left: 6px;
+    border-radius: 12px;
+    overflow: hidden;
+    background-color: transparent !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  ::v-deep .tree-search.active {
+    width: 160px;
+    background-color: #ffffff !important;
+  }
+
+  ::v-deep .tree-search.active:hover {
+    border-radius: 12px;
+  }
+
+  ::v-deep .tree-search input {
+    position: relative;
+    left: 20px;
+    width: 133px;
+    height: 100%;
+    background-color: #ffffff !important;
+    color: #606266;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
+  }
+
+  .tree-header {
+    position: relative;
+
+    .title {
+      font-weight: 500;
+    }
+
+    .content {
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #e0e0e0;
+      border-radius: 3px;
+      padding: 0 5px;
+      box-sizing: border-box;
+      overflow: hidden;
+      cursor: pointer;
+      background-color: #D7D8DC;
+
+      .rotate {
+        transition: all .1 .8s;
+        transform: rotate(-90deg);
+      }
+
+      .fa-caret-down {
+        font-size: 16px;
+      }
+
+      .special {
+        top: 1px !important;
+      }
+    }
+  }
+
+  .tree-empty {
+    margin-left: 4px;
+  }
+
+  .fixed-tree-search {
+    margin-bottom: 10px;
+
+    & > > > .el-input__inner {
+      border-radius: 4px;
+      background: #fafafa;
+      padding-right: 32px;
+    }
+
+    & > > > .el-input__suffix {
+      padding-right: 8px;
+    }
+
+    & > > > .el-input__prefix {
+      padding-left: 6px;
+    }
+
+    & > > > .el-input__suffix-inner {
+      line-height: 30px;
+    }
+  }
+
+  .icon-refresh {
+    border-radius: 4px;
+    padding: 0 1px;
+    z-index: 1;
 
     &:hover {
-      color: #606266 !important;;
+      cursor: pointer;
+      color: #606266;
+      border-color: #d2d2d2;
+      background-color: #e6e6e6;
     }
   }
-}
 
-::v-deep .tree-search {
-  position: relative;
-  top: -2px;
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  border-radius: 12px;
-  vertical-align: sub;
-  transition: .25s;
-  overflow: hidden;
-
-  .fa {
-    width: 13px !important;
-  }
-
-  .fa-search {
-    padding-top: 1px;
-  }
-}
-
-::v-deep .tree-search .tree-banner-icon {
-  position: absolute;
-  top: 4px;
-  left: 6px;
-  border-radius: 12px;
-  overflow: hidden;
-  background-color: transparent !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-::v-deep .tree-search.active {
-  width: 160px;
-  background-color: #ffffff !important;
-}
-
-::v-deep .tree-search.active:hover {
-  border-radius: 12px;
-}
-
-::v-deep .tree-search input {
-  position: relative;
-  left: 20px;
-  width: 133px;
-  height: 100%;
-  background-color: #ffffff !important;
-  color: #606266;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  outline: none;
-}
-
-.tree-header {
-  position: relative;
-
-  .title {
-    font-weight: 500;
-  }
-
-  .content {
-    height: 30px;
-    line-height: 30px;
-    border-bottom: 1px solid #e0e0e0;
-    border-radius: 3px;
-    padding: 0 5px;
-    box-sizing: border-box;
-    overflow: hidden;
+  .icon {
     cursor: pointer;
-    background-color: #D7D8DC;
-
-    .rotate {
-      transition: all .1 .8s;
-      transform: rotate(-90deg);
-    }
-
-    .fa-caret-down {
-      font-size: 16px;
-    }
-
-    .special {
-      top: 1px !important;
-    }
-  }
-}
-
-.tree-empty {
-  margin-left: 4px;
-}
-
-.fixed-tree-search {
-  margin-bottom: 10px;
-
-  & > > > .el-input__inner {
-    border-radius: 4px;
-    background: #fafafa;
-    padding-right: 32px;
   }
 
-  & > > > .el-input__suffix {
-    padding-right: 8px;
+  .tree-action-btn {
+    padding: 0 2px;
+    color: red;
   }
-
-  & > > > .el-input__prefix {
-    padding-left: 6px;
-  }
-
-  & > > > .el-input__suffix-inner {
-    line-height: 30px;
-  }
-}
-
-.icon-refresh {
-  border-radius: 4px;
-  padding: 0 1px;
-  z-index: 1;
-
-  &:hover {
-    cursor: pointer;
-    color: #606266;
-    border-color: #d2d2d2;
-    background-color: #e6e6e6;
-  }
-}
-
-.icon {
-  cursor: pointer;
-}
-
-.tree-action-btn {
-  padding: 0 2px;
-  color: red;
-}
 </style>

src/components/DataZTree/index.vue

@@ -2,14 +2,13 @@
   <ZTree ref="ztree" :setting="treeSetting" v-on="$listeners">
     <!--Slot透传-->
     <div slot="rMenu" slot-scope="{data}">
-      <slot :data="data" name="rMenu" />
+      <slot name="rMenu" :data="data" />
     </div>
   </ZTree>
 </template>
 
 <script>
-import ZTree from './components/ZTree/index.vue'
-
+import ZTree from './components/ZTree'
 export default {
   name: 'DataZTree',
   components: {
@@ -39,7 +38,7 @@ export default {
           showRenameBtn: false,
           drag: {
             isCopy: false,
-            isMove: true
+            isMove: false
           }
         },
         callback: {

src/components/DetailCard/ItemValue.vue

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

src/components/DetailCard/auto.vue

@@ -1,10 +1,10 @@
 <template>
-  <DetailCard v-if="!loading && hasObject && items.length > 0" :items="items" v-bind="$attrs" />
+  <DetailCard v-if="!loading" :items="items" v-bind="$attrs" />
 </template>
 
 <script>
-import DetailCard from './index.vue'
-import { copy, toSafeLocalDateStr } from '@/utils/common'
+import DetailCard from './index'
+import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
   name: 'AutoDetailCard',
@@ -33,10 +33,6 @@ export default {
     formatters: {
       type: Object,
       default: () => ({})
-    },
-    nested: {
-      type: String,
-      default: null
     }
   },
   data() {
@@ -45,49 +41,19 @@ export default {
       loading: true
     }
   },
-  computed: {
-    iObject() {
-      if (this.nested) {
-        return this.object[this.nested] || {}
-      } else {
-        return this.object
-      }
-    },
-    hasObject() {
-      return Object.keys(this.iObject).length > 0
-    }
-  },
   async mounted() {
     await this.optionAndGenFields()
     this.loading = false
   },
   methods: {
-    defaultFormatter(fields) {
-      const formatter = {}
-      for (const name of fields) {
-        formatter[name] = function(item, val) {
-          if (val === '-') {
-            return <span>{'-'}</span>
-          }
-          return (<span style={{ cursor: 'pointer' }} onClick={() => copy(val)}>
-            {val}
-          </span>)
-        }
-      }
-      return formatter
-    },
     async optionAndGenFields() {
       const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
-      let remoteMeta = data.actions['GET'] || {}
-      if (this.nested) {
-        remoteMeta = remoteMeta[this.nested]?.children || {}
-      }
+      const remoteMeta = data.actions['GET'] || {}
       let fields = this.fields
       fields = fields || Object.keys(remoteMeta)
       const defaultExcludes = ['org_id']
       const excludes = (this.excludes || []).concat(defaultExcludes)
       fields = fields.filter(item => !excludes.includes(item))
-      const defaultFormatter = this.defaultFormatter(fields)
       for (const name of fields) {
         if (typeof name === 'object') {
           this.items.push(name)
@@ -101,33 +67,21 @@ export default {
           continue
         }
 
-        let value = this.iObject[name]
+        let value = this.object[name]
         const label = fieldMeta.label
 
         if (Array.isArray(value)) {
           if (typeof value[0] === 'object') {
-            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
-                })
+            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 = {}
@@ -153,9 +107,9 @@ export default {
         } else if (fieldMeta.type === 'labeled_choice') {
           value = value?.['label']
         } else if (fieldMeta.type === 'related_field' || fieldMeta.type === 'nested object') {
-          value = value?.['name']
+          value = value['name']
         } else if (fieldMeta.type === 'm2m_related_field') {
-          value = value?.map(item => item['name']).join(', ')
+          value = value.map(item => item['name']).join(', ')
         } else if (fieldMeta.type === 'boolean') {
           value = value ? this.$t('common.Yes') : this.$t('common.No')
         }
@@ -171,7 +125,7 @@ export default {
         const item = {
           key: label,
           value: value,
-          formatter: this.formatters[name] || defaultFormatter[name]
+          formatter: this.formatters[name]
         }
         this.items.push(item)
       }

src/components/DetailCard/index.vue

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

src/components/Dialog/index.vue

@@ -9,13 +9,11 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <div v-loading="loadingStatus">
-      <slot />
-    </div>
+    <slot />
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
-        <el-button v-if="showCancel && showButtons" @click="onCancel">{{ cancelTitle }}</el-button>
-        <el-button v-if="showConfirm && showButtons" :disabled="loadingStatus" type="primary" @click="onConfirm">
+        <el-button v-if="showCancel" @click="onCancel">{{ cancelTitle }}</el-button>
+        <el-button v-if="showConfirm" :loading="loadingStatus" type="primary" @click="onConfirm">
           {{ confirmTitle }}
         </el-button>
       </slot>
@@ -31,6 +29,16 @@ 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'
@@ -43,46 +51,29 @@ 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 ? '1000px' : this.width
+      return this.$store.getters.isMobile ? '80%' : this.width
     }
   },
-  mounted() {
-  },
   methods: {
     onCancel() {
       this.$emit('cancel')
@@ -97,11 +88,7 @@ export default {
 <style lang="scss" scoped>
   .dialog >>> .el-dialog {
     border-radius: 0.3em;
-    max-width: min(100vw, 1500px);
-
-    .el-icon-circle-check {
-      display: none;
-    }
+    max-width: 1500px;
 
     &__header {
       box-sizing: border-box;
@@ -124,14 +111,9 @@ 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/FormFields/AllOrSpec.vue

@@ -1,76 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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/BoolTextReadonly.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    {{ value? trueText : falseText }}
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: [String, Boolean],
-      default: () => false
-    },
-    trueText: {
-      type: String,
-      default: function() {
-        return this.$t('common.Yes')
-      }
-    },
-    falseText: {
-      type: String,
-      default: function() {
-        return this.$t('common.No')
-      }
-    }
-
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/Form/FormFields/DynamicInput.vue

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <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">
-        <el-button
-          :disabled="deleteDisabled()"
-          icon="el-icon-minus"
-          size="mini"
-          style="flex-shrink: 0;"
-          type="danger"
-          @click="handleDelete(command)"
-        />
-        <el-button
-          v-if="index === iValue.length - 1"
-          icon="el-icon-plus"
-          size="mini"
-          style="flex-shrink: 0;"
-          type="primary"
-          @click="handleAdd()"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  props: {
-    value: {
-      type: Array,
-      default: () => ['']
-    },
-    inputTitle: {
-      type: String,
-      default: () => ''
-    }
-  },
-  data() {
-    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.iValue.indexOf(command)
-      if (index !== -1) {
-        this.iValue.splice(index, 1)
-      }
-    },
-    handleAdd() {
-      this.iValue.push('')
-    },
-    deleteDisabled() {
-      return this.iValue.length <= 1
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-input {
-  width: 85%;
-}
-.command-item {
-  display: flex;
-  margin: 5px 0;
-}
-.input-button {
-  margin-top: 2px;
-  display: flex;
-  margin-left: 20px
-}
-.input-button ::v-deep .el-button.el-button--mini {
-  height: 25px;
-  padding: 5px;
-}
-.el-input-group__append .el-button {
-  font-size: 14px;
-  color: #1a1a1a;
-  padding: 9px 20px;
-}
-</style>