perf: table search two times, one init one search

.github/workflows/.github/workflows/llm-code-review.yml

@@ -1,28 +0,0 @@
-name: LLM Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  llm-code-review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fit2cloud/LLM-CodeReview-Action@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
-          LANGUAGE: English
-          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
-          MODEL: qwen2-1.5b-instruct
-          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
-          top_p: 1
-          temperature: 1
-          # max_tokens: 10000
-          MAX_PATCH_LENGTH: 10000 
-          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
-          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

.github/workflows/build-base-image.yml

@@ -1,72 +0,0 @@
-name: Build and Push Base Image
-
-on:
-  push:
-    branches:
-      - 'pr*'
-    paths:
-      - 'package.json'
-      - 'package-lock.json'
-      - 'yarn.lock'
-      - 'Dockerfile-base'
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Lock Pull Request
-        run: |
-          curl -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-          -d '{"state":"pending", "description":"Action running, merge disabled", "context":"Lock PR"}' \
-          "https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}"
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Extract date
-        id: vars
-        run: echo "IMAGE_TAG=$(date +'%Y%m%d_%H%M%S')" >> $GITHUB_ENV
-
-      - name: Extract repository name
-        id: repo
-        run: echo "REPO=$(basename ${{ github.repository }})" >> $GITHUB_ENV
-
-      - name: Build and push multi-arch image
-        uses: docker/build-push-action@v6
-        with:
-          platforms: linux/amd64,linux/arm64
-          push: true
-          file: Dockerfile-base
-          tags: jumpserver/${{ env.REPO }}-base:${{ env.IMAGE_TAG }}
-
-      - name: Update Dockerfile
-        run: |
-          sed -i 's|-base:.* AS stage-build|-base:${{ env.IMAGE_TAG }} AS stage-build|' Dockerfile
-
-      - name: Commit changes
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          git add Dockerfile
-          git commit -m "perf: Update Dockerfile with new base image tag"
-          git push
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Unlock Pull Request
-        run: |
-          curl -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-          -d '{"state":"success", "description":"Action running, merge disabled", "context":"Lock PR"}' \
-          "https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}"

.github/workflows/jms-build-test.yml

@@ -0,0 +1,46 @@
+name: "Run Build Test"
+on:
+  push:
+    paths:
+      - 'Dockerfile'
+      - 'Dockerfile*'
+      - 'package.json'
+      - 'yarn.lock'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        component: [lina]
+        version: [v4]
+    steps:
+    - uses: actions/checkout@v4
+    - uses: docker/setup-buildx-action@v3
+
+    - name: Prepare Build
+      run: |
+        sed -i 's@registry.npmmirror.com@registry.yarnpkg.com@g' yarn.lock
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.repository_owner }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Build Image
+      uses: docker/build-push-action@v5
+      with:
+        context: .
+        push: true
+        file: Dockerfile
+        tags: ghcr.io/jumpserver/${{ matrix.component }}:${{ matrix.version }}
+        platforms: linux/amd64
+        build-args: |
+          VERSION=${{ matrix.version }}
+          APT_MIRROR=http://deb.debian.org
+          NPM_REGISTRY=https://registry.yarnpkg.com
+        outputs: type=image,oci-mediatypes=true,compression=zstd,compression-level=3,force-compression=true
+        cache-from: type=gha
+        cache-to: type=gha,mode=max

.github/workflows/jms-build-test.yml.disabled

@@ -1,46 +0,0 @@
-name: "Run Build Test"
-on:
-  push:
-    paths:
-      - 'Dockerfile'
-      - 'Dockerfile*'
-      - 'package.json'
-      - 'yarn.lock'
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        component: [ lina ]
-        version: [ v4 ]
-    steps:
-      - uses: actions/checkout@v4
-      - uses: docker/setup-buildx-action@v3
-
-      - name: Prepare Build
-        run: |
-          sed -i 's@registry.npmmirror.com@registry.yarnpkg.com@g' yarn.lock
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build Image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          file: Dockerfile
-          tags: ghcr.io/jumpserver/${{ matrix.component }}:${{ matrix.version }}
-          platforms: linux/amd64
-          build-args: |
-            VERSION=${{ matrix.version }}
-            APT_MIRROR=http://deb.debian.org
-            NPM_REGISTRY=https://registry.yarnpkg.com
-          outputs: type=image,oci-mediatypes=true,compression=zstd,compression-level=3,force-compression=true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.github/workflows/llm-code-review.yml

@@ -1,28 +0,0 @@
-name: LLM Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  llm-code-review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fit2cloud/LLM-CodeReview-Action@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
-          LANGUAGE: English
-          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
-          MODEL: qwen2-1.5b-instruct
-          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
-          top_p: 1
-          temperature: 1
-          # max_tokens: 10000
-          MAX_PATCH_LENGTH: 10000 
-          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
-          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

.github/workflows/release-drafter.yml

@@ -31,7 +31,7 @@ jobs:
           tag: ${{ steps.get_version.outputs.TAG }}
       - uses: actions/setup-node@v2
         with:
-          node-version: '20.15'
+          node-version: '16.20'
       - name: Install dependencies
         run: yarn install
       - name: Build web

.gitignore

@@ -17,5 +17,3 @@ tests/**/coverage/
 *.sln
 .env.development
 .python-version
-
-helper.json

Dockerfile

@@ -1,4 +1,34 @@
-FROM jumpserver/lina-base:20250408_074136 AS stage-build
+FROM node:16.20-bullseye-slim AS stage-build
+ARG TARGETARCH
+
+ARG DEPENDENCIES="                    \
+        g++                           \
+        make                          \
+        python3"
+
+ARG APT_MIRROR=http://mirrors.ustc.edu.cn
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+    --mount=type=cache,target=/var/lib/apt,sharing=locked \
+    set -ex \
+    && rm -f /etc/apt/apt.conf.d/docker-clean \
+    && echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' >/etc/apt/apt.conf.d/keep-cache \
+    && sed -i "s@http://.*.debian.org@${APT_MIRROR}@g" /etc/apt/sources.list \
+    && apt-get update \
+    && apt-get -y install --no-install-recommends ${DEPENDENCIES} \
+    && echo "no" | dpkg-reconfigure dash
+
+ARG NPM_REGISTRY="https://registry.npmmirror.com"
+
+RUN set -ex \
+    && npm config set registry ${NPM_REGISTRY} \
+    && yarn config set registry ${NPM_REGISTRY}
+
+WORKDIR /data
+
+RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked \
+    --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=yarn.lock,target=yarn.lock \
+    yarn install
 
 ARG VERSION
 ENV VERSION=$VERSION

Dockerfile-base

@@ -1,22 +0,0 @@
-FROM node:20.15-bullseye-slim
-
-ARG DEPENDENCIES="                    \
-        g++                           \
-        make                          \
-        python3"
-
-RUN set -ex \
-    && rm -f /etc/apt/apt.conf.d/docker-clean \
-    && echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' > /etc/apt/apt.conf.d/keep-cache \
-    && apt-get update \
-    && apt-get -y install --no-install-recommends ${DEPENDENCIES} \
-    && echo "no" | dpkg-reconfigure dash
-
-WORKDIR /data
-
-COPY package.json yarn.lock ./
-
-ARG NPM_MIRROR="https://registry.npmjs.org"
-RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=yarn-cache \
-    sed -i "s|https://registry.npmmirror.com|${NPM_MIRROR}|g" yarn.lock \
-    && yarn install

jsconfig.json

@@ -5,6 +5,5 @@
         "@/*": ["src/*"]
     }
   },
-  "include": ["src"],
   "exclude": ["node_modules", "dist"]
 }

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "lina",
+  "name": "Lina",
   "version": "v4.0.0",
   "description": "JumpServer Web UI",
-  "author": "JumpServer Team <support@lxware.hk>",
+  "author": "JumpServer Team <support@fit2cloud.com>",
   "license": "GPL-3.0-or-later",
   "scripts": {
-    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
@@ -30,13 +30,11 @@
     "@ztree/ztree_v3": "3.5.44",
     "axios": "0.28.0",
     "axios-retry": "^3.1.9",
-    "caniuse-lite": "^1.0.30001642",
     "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",
     "element-ui": "2.15.14",
     "eslint-plugin-html": "^6.0.0",
@@ -66,7 +64,7 @@
     "normalize.css": "7.0.0",
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
-    "path-to-regexp": "3.3.0",
+    "path-to-regexp": "2.4.0",
     "v-sanitize": "^0.0.13",
     "vue": "2.6.10",
     "vue-codemirror": "4.0.6",
@@ -81,7 +79,6 @@
     "vue-select": "^3.9.5",
     "vuejs-logger": "^1.5.4",
     "vuex": "3.1.0",
-    "watermark-js-plus": "^1.5.8",
     "xss": "^1.0.14",
     "xterm": "^4.5.0",
     "xterm-addon-fit": "^0.3.0",
@@ -118,7 +115,7 @@
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
-    "serve-static": "^1.16.0",
+    "serve-static": "^1.13.2",
     "strip-ansi": "^7.1.0",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
@@ -143,6 +140,5 @@
     "src/**/*.{js,vue}": [
       "eslint --fix"
     ]
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }

public/index.html

@@ -1,90 +1,38 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
     <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta content="0" http-equiv="Expires">
-    <meta content="no-cache" http-equiv="Pragma">
-    <meta content="no-cache" http-equiv="Cache-control">
-    <meta content="no-cache" http-equiv="Cache">
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title><%= webpackConfig.name %></title>
-    <link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
-    <style>
-        #loading {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: rgba(255, 255, 255, 0.98);
-            z-index: 9999;
-        }
-
-        #loading .spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid transparent;
-            border-top-color: var(--color-primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        #loading .spinner::after {
-            content: '';
-            position: absolute;
-            top: -3px;
-            left: -3px;
-            width: 40px;
-            height: 40px;
-            border: 3px solid transparent;
-            border-top-color: rgba(64, 158, 255, 0.2);
-            border-radius: 50%;
-            animation: spin 2s linear infinite;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-    </style>
-</head>
-<body>
-<noscript>
-    <strong>
-        We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
-        Please enable it to continue.
-    </strong>
-</noscript>
-<script>
-    window.onload = function () {
+    <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <script>
+      window.onload = function() {
         if (location.pathname === '/') {
-            location.pathname = '/ui/'
+           location.pathname = '/ui/'
         }
         const pathname = window.location.pathname
         if (pathname.startsWith('/core')) {
             return
         }
-        if (pathname.indexOf('/ui') === -1) {
-            window.location.href = window.location.origin + '/ui/#' + pathname
+        if(pathname.indexOf('/ui') === -1) {
+          window.location.href = window.location.origin + '/ui/#' + pathname
         }
         if (pathname.startsWith('/ui/#/chat')) {
-            window.location.href = window.location.origin + pathname
+          window.location.href = window.location.origin + pathname
         }
-    }
-</script>
-<div id="app">
-</div>
-<div id="loading">
-    <div class="spinner"></div>
-</div>
-<!-- built files will be auto injected -->
-</body>
+      }
+    </script>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
 </html>

src/App.vue

@@ -5,59 +5,14 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import { Watermark } from 'watermark-js-plus'
+import { mapState } from 'vuex'
 
 export default {
   name: 'App',
-  data() {
-    return {
-      watermark: null
-    }
-  },
   computed: {
     ...mapState({
       isRouterAlive: state => state.common.isRouterAlive
-    }),
-    ...mapGetters({
-      currentUser: 'currentUser',
-      publicSettings: 'publicSettings'
     })
-  },
-  watch: {
-    currentUser: {
-      handler(newVal) {
-        this.createWatermark()
-      }
-    },
-    'publicSettings.SECURITY_WATERMARK_ENABLED': {
-      handler(newVal) {
-        if (!newVal) {
-          return setTimeout(() => {
-            this.watermark?.destroy()
-            this.watermark = null
-          })
-        }
-
-        this.createWatermark()
-      }
-    }
-  },
-  methods: {
-    createWatermark() {
-      if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
-        this.watermark = new Watermark({
-          content: `${this.currentUser.username}(${this.currentUser.name})`,
-          width: 200,
-          height: 200,
-          rotate: 45,
-          fontWeight: 'normal',
-          fontColor: 'rgba(128, 128, 128, 0.2)'
-        })
-
-        this.watermark.create()
-      }
-    }
   }
 }
 </script>

src/api/ops.js

@@ -53,7 +53,7 @@ export function createJob(form) {
   })
 }
 
-export function stopJob(form) {
+export function StopJob(form) {
   return request({
     url: '/api/v1/ops/job-executions/stop/',
     method: 'post',
@@ -71,10 +71,3 @@ export function JobUploadFile(form) {
   })
 }
 
-export function auditUpdateJob(id, form) {
-  return request({
-    url: `/api/v1/audits/jobs/${id}/`,
-    method: 'patch',
-    data: form
-  })
-}

src/api/settings.js

@@ -15,7 +15,6 @@ export function testEmailSetting(data) {
     data: data
   })
 }
-
 export function importLicense(formData) {
   return request({
     url: '/api/v1/xpack/license/import',
@@ -26,7 +25,6 @@ export function importLicense(formData) {
     data: formData
   })
 }
-
 export function testLdapSetting(data, refresh = true) {
   let url = '/api/v1/settings/ldap/testing/config/'
   if (refresh) {
@@ -98,17 +96,9 @@ export function getPublicSettings(isOpen) {
     method: 'get'
   })
 }
-
 export function getLogo() {
   return request({
     url: '/api/v1/xpack/interface/setting/',
     method: 'get'
   })
 }
-
-export function getPreference() {
-  return request({
-    url: '/api/v1/users/preference/?category=luna',
-    method: 'get'
-  })
-}

src/api/users.js

@@ -65,6 +65,10 @@ export function logout() {
   })
 }
 
+export function refreshSessionIdAge() {
+  return getProfile()
+}
+
 export default {
   getProfile,
   getUserList

src/components/ActionsGroup/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import DataActions from '@/components/Common/DataActions/index.vue'
+import DataActions from '@/components/DataActions'
 
 export default {
   name: 'ActionsGroup',

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -5,14 +5,6 @@ import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSettin
 
 export const accountFieldsMeta = (vm) => {
   const defaultPrivilegedAccounts = ['root', 'administrator']
-
-  function onPrivilegedUser(value, updateForm) {
-    const maybePrivileged = defaultPrivilegedAccounts.includes(value)
-    if (maybePrivileged) {
-      updateForm({ privileged: true, secret_reset: false, push_now: false })
-    }
-  }
-
   return {
     assets: {
       component: Select2,
@@ -35,9 +27,6 @@ export const accountFieldsMeta = (vm) => {
       component: Select2,
       rules: [Required],
       el: {
-        get disabled() {
-          return vm.isDisabled
-        },
         multiple: false,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
@@ -54,11 +43,6 @@ export const accountFieldsMeta = (vm) => {
       rules: [Required],
       label: vm.$t('AccountPolicy'),
       helpTip: vm.$t('AccountPolicyHelpText'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: () => {
         return vm.platform || vm.asset
       }
@@ -66,19 +50,17 @@ export const accountFieldsMeta = (vm) => {
     name: {
       label: vm.$t('Name'),
       rules: [RequiredChange],
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       on: {
         input: ([value], updateForm) => {
           if (!vm.usernameChanged) {
             if (!vm.account?.name) {
               updateForm({ username: value })
             }
+            const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+            if (maybePrivileged) {
+              updateForm({ privileged: true })
+            }
           }
-          onPrivilegedUser(value, updateForm)
         }
       },
       hidden: () => {
@@ -87,16 +69,17 @@ export const accountFieldsMeta = (vm) => {
     },
     username: {
       el: {
-        get disabled() {
-          return !!vm.account?.name || vm.isDisabled
-        }
+        disabled: !!vm.account?.name
       },
       on: {
         input: ([value], updateForm) => {
           vm.usernameChanged = true
         },
         change: ([value], updateForm) => {
-          onPrivilegedUser(value, updateForm)
+          const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+          if (maybePrivileged) {
+            updateForm({ privileged: true })
+          }
         }
       },
       hidden: () => {
@@ -105,11 +88,6 @@ export const accountFieldsMeta = (vm) => {
     },
     privileged: {
       label: vm.$t('Privileged'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: () => {
         return vm.addTemplate
       }
@@ -132,11 +110,6 @@ export const accountFieldsMeta = (vm) => {
     },
     su_from_username: {
       label: vm.$t('UserSwitchFrom'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => {
         return vm.platform || vm.asset || vm.addTemplate
       }
@@ -144,11 +117,6 @@ export const accountFieldsMeta = (vm) => {
     password: {
       label: vm.$t('Password'),
       component: UpdateToken,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => {
         return formValue.secret_type !== 'password' || vm.addTemplate
       }
@@ -156,63 +124,33 @@ export const accountFieldsMeta = (vm) => {
     ssh_key: {
       label: vm.$t('PrivateKey'),
       component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
     },
     passphrase: {
       label: vm.$t('Passphrase'),
       component: UpdateToken,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
     },
     token: {
       label: vm.$t('Token'),
       component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
     },
     access_key: {
       id: 'access_key',
       label: vm.$t('AccessKey'),
       component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
     },
     api_key: {
       id: 'api_key',
       label: vm.$t('ApiKey'),
       component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
     },
     secret_type: {
       type: 'radio-group',
       options: [],
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
       hidden: () => {
         return vm.addTemplate
       }
@@ -225,8 +163,7 @@ export const accountFieldsMeta = (vm) => {
           !automation.ansible_enabled ||
           !vm.$hasPerm('accounts.push_account') ||
           (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
-          vm.addTemplate ||
-          !formValue.secret_reset
+          vm.addTemplate
       }
     },
     params: {
@@ -235,9 +172,6 @@ export const accountFieldsMeta = (vm) => {
       el: {},
       hidden: (formValue) => {
         const automation = vm.iPlatform.automation || {}
-        if (!vm.iPlatform.automation) {
-          return true
-        }
         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 ||
@@ -250,27 +184,12 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     is_active: {
-      label: vm.$t('IsActive'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      }
+      label: vm.$t('IsActive')
     },
     comment: {
       label: vm.$t('Comment'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      }
-    },
-    secret_reset: {
-      label: vm.$t('SecretReset'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
+      hidden: () => {
+        return vm.addTemplate
       }
     }
   }

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -45,7 +45,6 @@ export default {
   data() {
     return {
       loading: true,
-      isDisabled: false,
       usernameChanged: false,
       submitBtnText: this.$t('Confirm'),
       iPlatform: {
@@ -62,12 +61,11 @@ export default {
       form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
       encryptedFields: ['secret'],
       fields: [
-        [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Assets'), ['assets']],
+        [this.$t('AccountTemplate'), ['template']],
+        [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
-          'access_key', 'passphrase', 'api_key',
-          'secret_reset'
+          'access_key', 'passphrase', 'api_key'
         ]],
         [this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
       ],
@@ -75,16 +73,6 @@ export default {
       hasSaveContinue: false
     }
   },
-  watch: {
-    '$route.query': {
-      handler(nv, ov) {
-        if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
-          this.isDisabled = true
-        }
-      },
-      immediate: true
-    }
-  },
   async mounted() {
     try {
       await this.getPlatform()
@@ -157,11 +145,7 @@ export default {
         delete form['secret']
       }
       if (this.account?.name) {
-        if (this.account.payload && this.account.payload === 'pam_account_clone') {
-          this.$emit('add', form)
-        } else {
-          this.$emit('edit', form)
-        }
+        this.$emit('edit', form)
       } else {
         this.$emit('add', form)
       }
@@ -173,16 +157,16 @@ export default {
 <style lang='scss' scoped>
 .account-add {
   ::v-deep .el-form-item {
-    //margin-bottom: 5px;
+    margin-bottom: 5px;
 
     .help-block {
-      //margin-bottom: 5px;
+      margin-bottom: 5px;
     }
   }
 
   ::v-deep .form-group-header {
     .hr-line-dashed {
-      //margin: 5px 0;
+      margin: 5px 0;
     }
 
     h3 {

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -1,38 +1,36 @@
-<template v-if="iVisible">
-  <Drawer
+<template>
+  <Dialog
+    v-if="iVisible"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
     :title="title"
-    :visible="iVisible"
-    class="drawer"
-    @close-drawer="handleCloseDrawer"
+    :visible.sync="iVisible"
+    v-bind="$attrs"
+    width="900px"
+    v-on="$listeners"
   >
-    <Page :title="'null'">
-      <IBox class="content">
-        <AccountCreateUpdateForm
-          v-if="!loading"
-          ref="form"
-          :account="account"
-          :add-template="addTemplate"
-          :asset="asset"
-          @add="addAccount"
-          @edit="editAccount"
-        />
-      </IBox>
-    </Page>
-  </Drawer>
+    <AccountCreateUpdateForm
+      v-if="!loading"
+      ref="form"
+      :account="account"
+      :add-template="addTemplate"
+      :asset="asset"
+      @add="addAccount"
+      @edit="editAccount"
+    />
+  </Dialog>
 </template>
 
 <script>
-import Drawer from '@/components/Drawer/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
-import IBox from '@/components/Common/IBox/index.vue'
-import Page from '@/layout/components/Page/index.vue'
 
 export default {
   name: 'CreateAccountDialog',
   components: {
-    IBox,
-    Drawer,
-    Page,
+    Dialog,
     AccountCreateUpdateForm
   },
   props: {
@@ -113,22 +111,11 @@ export default {
     },
     editAccount(form) {
       const data = { ...form }
-      const flag = this.$route.query.flag
-
-      switch (flag) {
-        case 'copy':
-          this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
-          break
-        case 'move':
-          this.handleAccountOperation(this.account.id, 'move-to-assets', data)
-          break
-        default:
-          this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
-            this.iVisible = false
-            this.$emit('add', true)
-            this.$message.success(this.$tc('UpdateSuccessMsg'))
-          }).catch(error => this.setFieldError(error))
-      }
+      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+        this.iVisible = false
+        this.$emit('add', true)
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
+      }).catch(error => this.setFieldError(error))
     },
     handleResult(resp, error) {
       let bulkCreate = !this.asset
@@ -181,29 +168,7 @@ export default {
           refsAutoDataForm.setFieldError(current, err)
         }
       }
-    },
-    handleCloseDrawer() {
-      this.iVisible = false
-      // Reflect.deleteProperty(this.$route.query, 'flag')
-    },
-    handleAccountOperation(id, path, data) {
-      this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
-        this.iVisible = false
-        this.$emit('add', true)
-        this.handleResult(res, null)
-      }).catch(error => this.handleResult(null, error))
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.drawer {
-  ::v-deep .el-drawer__body {
-
-    .el-form {
-      margin-right: 30px;
-    }
-  }
-}
-</style>

src/components/Apps/AccountListTable/AccountList.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <DrawerListTable
-      ref="ListTable"
-      :detail-drawer="detailDrawer"
-      :header-actions="headerActions"
-      :quick-filters="quickFilters"
-      :table-config="tableConfig"
-    />
+    <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
     <ViewSecret
       v-if="showViewSecretDialog"
       :account="account"
@@ -22,13 +16,22 @@
     <AccountCreateUpdate
       v-if="showAddDialog"
       :account="account"
-      :add-template="addTemplate"
       :asset="iAsset"
       :title="accountCreateUpdateTitle"
       :visible.sync="showAddDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
     />
+    <AccountCreateUpdate
+      v-if="showAddTemplateDialog"
+      :account="account"
+      :add-template="true"
+      :asset="iAsset"
+      :title="accountCreateByTemplateTitle"
+      :visible.sync="showAddTemplateDialog"
+      @add="addAccountSuccess"
+      @bulk-create-done="showBulkCreateResult($event)"
+    />
     <ResultDialog
       v-if="showResultDialog"
       :result="createAccountResults"
@@ -41,42 +44,29 @@
       v-bind="updateSelectedDialogSetting"
       @update="handleAccountBulkUpdate"
     />
-    <PasswordHistoryDialog
-      v-if="showPasswordHistoryDialog"
-      :account="currentAccountColumn"
-      :visible.sync="showPasswordHistoryDialog"
-    />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
-import { openTaskPage } from '@/utils/jms'
-import {
-  AccountConnectFormatter,
-  ActionsFormatter,
-  PlatformFormatter,
-  SecretViewerFormatter
-} from '@/components/Table/TableFormatters'
+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 ResultDialog from './BulkCreateResultDialog.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
-import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
+import { connectivityMeta } from './const'
+import { openTaskPage } from '@/utils/jms'
+import ResultDialog from './BulkCreateResultDialog.vue'
 import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
 
 export default {
   name: 'AccountListTable',
   components: {
-    ViewSecret,
+    AccountBulkUpdateDialog,
     ResultDialog,
-    DrawerListTable,
+    ListTable,
     UpdateSecretInfo,
-    AccountCreateUpdate,
-    PasswordHistoryDialog,
-    AccountBulkUpdateDialog
+    ViewSecret,
+    AccountCreateUpdate
   },
   props: {
     url: {
@@ -99,7 +89,7 @@ export default {
     },
     hasClone: {
       type: Boolean,
-      default: true
+      default: false
     },
     asset: {
       type: Object,
@@ -129,7 +119,7 @@ export default {
     columnsDefault: {
       type: Array,
       default: () => ([
-        'name', 'username', 'secret', 'asset', 'platform', 'connect'
+        'name', 'username', 'asset', 'date_updated'
       ])
     },
     headerExtraActions: {
@@ -139,34 +129,22 @@ export default {
     extraQuery: {
       type: Object,
       default: () => ({})
-    },
-    showQuickFilters: {
-      type: Boolean,
-      default: true
-    },
-    showActions: {
-      type: Boolean,
-      default: true
     }
   },
   data() {
     const vm = this
     return {
-      addTemplate: false,
-      isUpdateAccount: false,
-      currentAccountColumn: {},
-      showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
       showUpdateSecretDialog: false,
       showResultDialog: false,
       showAddDialog: false,
       showAddTemplateDialog: false,
-      detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
       createAccountResults: [],
+      accountCreateUpdateTitle: this.$t('AddAccount'),
+      accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
       iAsset: this.asset,
       account: {},
       secretUrl: '',
-      quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
       tableConfig: {
         url: this.url,
         permissions: {
@@ -175,85 +153,40 @@ export default {
         },
         extraQuery: this.extraQuery,
         columnsExclude: ['spec_info'],
-        columnsAdd: ['secret', 'platform', 'connect'],
         columnsShow: {
           min: ['name', 'username', 'actions'],
           default: this.columnsDefault
         },
         columnsMeta: {
           name: {
-            minWidth: '60px',
-            formatterArgs: {
-              can: () => vm.$hasPerm('accounts.view_account'),
-              getRoute: ({ row }) => ({
-                name: 'AccountDetail',
+            width: '120px',
+            formatter: function(row) {
+              const to = {
+                name: 'AssetAccountDetail',
                 params: { id: row.id }
-              }),
-              getTitle: ({ row }) => {
-                let title = row.name
-                if (row.ds && this.asset && this.asset.id !== row.asset.id) {
-                  const dsID = row.ds.id.split('-')[0]
-                  title = `${row.name}@${dsID}`
-                }
-                return title
-              },
-              getDrawerTitle({ row }) {
-                return `${row.username}@${row.asset.name}`
               }
-            }
-          },
-          secret: {
-            formatter: SecretViewerFormatter,
-            width: '130px',
-            formatterArgs: {
-              secretFrom: 'api',
-              hasDownload: false,
-              actionLeft: true
-            }
-          },
-          connect: {
-            label: this.$t('Connect'),
-            width: '80px',
-            formatter: AccountConnectFormatter,
-            formatterArgs: {
-              can: ({ row }) => {
-                return this.currentUserIsSuperAdmin
-              }
-            }
-          },
-          ds: {
-            width: '100px',
-            formatter: (row) => {
-              if (row.ds && row.ds['domain_name']) {
-                return row.ds['domain_name']
+              if (vm.$hasPerm('accounts.view_account')) {
+                return <router-link to={to}>{row.name}</router-link>
               } else {
-                return ''
+                return <span>{row.name}</span>
               }
             }
           },
-          platform: {
-            label: this.$t('Platform'),
-            width: '150px',
-            formatter: PlatformFormatter,
-            formatterArgs: {
-              platformAttr: 'asset.platform'
-            }
-          },
           asset: {
-            minWidth: '100px',
             formatter: function(row) {
-              return row.asset.name
+              const to = {
+                name: 'AssetDetail',
+                params: { id: row.asset.id }
+              }
+              if (vm.$hasPerm('assets.view_asset')) {
+                return <router-link to={to}>{row.asset.name}</router-link>
+              } else {
+                return <span>{row.asset.name}</span>
+              }
             }
           },
           username: {
-            minWidth: '60px',
-            formatter: function(row) {
-              if (row.ds && row.ds['domain_name']) {
-                return `${row.username}@${row.ds['domain_name']}`
-              } else {
-                return row.username
-              }
-            }
+            width: '120px'
           },
           secret_type: {
             formatter: function(row) {
@@ -281,14 +214,77 @@ export default {
           connectivity: connectivityMeta,
           actions: {
             formatter: ActionsFormatter,
-            has: this.showActions,
             formatterArgs: {
               hasUpdate: false, // can set function(row, value)
-              hasDelete: true, // can set function(row, value)
-              hasClone: false,
-              canDelete: () => vm.$hasPerm('accounts.delete_account'),
+              hasDelete: false, // can set function(row, value)
+              hasClone: this.hasClone,
               moreActionsTitle: this.$t('More'),
-              extraActions: accountOtherActions(this)
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('View'),
+                  can: this.$hasPerm('accounts.view_accountsecret'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    // debugger
+                    vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+                    vm.account = row
+                    vm.showViewSecretDialog = false
+                    setTimeout(() => {
+                      vm.showViewSecretDialog = true
+                    })
+                  }
+                },
+                {
+                  name: 'Update',
+                  title: this.$t('Edit'),
+                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
+                  callback: ({ row }) => {
+                    const data = {
+                      ...this.asset,
+                      ...row.asset
+                    }
+                    vm.account = row
+                    vm.iAsset = data
+                    vm.showAddDialog = false
+                    vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
+                    setTimeout(() => {
+                      vm.showAddDialog = true
+                    })
+                  }
+                },
+                {
+                  name: 'Test',
+                  title: this.$t('Test'),
+                  can: ({ row }) =>
+                    !this.$store.getters.currentOrgIsRoot &&
+                    this.$hasPerm('accounts.verify_account') &&
+                    row.asset['auto_config'].ansible_enabled &&
+                    row.asset['auto_config'].ping_enabled,
+                  callback: ({ row }) => {
+                    this.$axios.post(
+                      `/api/v1/accounts/accounts/tasks/`,
+                      { action: 'verify', accounts: [row.id] }
+                    ).then(res => {
+                      openTaskPage(res['task'])
+                    })
+                  }
+                },
+                {
+                  name: 'ClearSecret',
+                  title: this.$t('ClearSecret'),
+                  can: this.$hasPerm('accounts.change_account'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    this.$axios.patch(
+                      `/api/v1/accounts/accounts/clear-secret/`,
+                      { account_ids: [row.id] }
+                    ).then(() => {
+                      this.$message.success(this.$tc('ClearSuccessMsg'))
+                    })
+                  }
+                }
+              ]
             }
           },
           ...this.columnsMeta
@@ -317,23 +313,7 @@ export default {
             type: 'primary',
             icon: 'plus',
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
-            },
-            callback: () => {
-              setTimeout(() => {
-                vm.iAsset = this.asset
-                vm.account = {}
-                this.addTemplate = false
-                this.showAddDialog = true
-              }, 200)
-            }
-          },
-          {
-            name: 'add-template',
-            title: this.$t('TemplateAdd'),
-            has: !(this.platform || this.asset),
-            can: () => {
-              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
             },
             callback: async() => {
               await this.getAssetDetail()
@@ -341,7 +321,22 @@ export default {
                 vm.iAsset = this.asset
                 vm.account = {}
                 vm.showAddDialog = true
-                vm.addTemplate = true
+              })
+            }
+          },
+          {
+            name: 'add-template',
+            title: this.$t('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.showAddTemplateDialog = true
               })
             }
           },
@@ -352,11 +347,11 @@ export default {
             name: 'TestSelected',
             title: this.$t('TestSelected'),
             type: 'primary',
-            icon: 'verify',
+            icon: 'fa-link',
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 &&
-                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                !this.$store.getters.currentOrgIsRoot
+                  ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                  !this.$store.getters.currentOrgIsRoot
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
@@ -421,18 +416,6 @@ export default {
       }
     }
   },
-  computed: {
-    ...mapGetters(['currentUserIsSuperAdmin']),
-    accountCreateUpdateTitle() {
-      if (this.addTemplate) {
-        return this.$t('AddAccountByTemplate')
-      } else if (this.isUpdateAccount) {
-        return this.$t('UpdateAccount')
-      } else {
-        return this.$t('AddAccount')
-      }
-    }
-  },
   watch: {
     url(iNew) {
       this.$set(this.tableConfig, 'url', iNew)
@@ -440,35 +423,52 @@ export default {
     }
   },
   mounted() {
-    this.setActions()
+    if (this.columns.length > 0) {
+      this.tableConfig.columns = this.columns
+    }
+    if (this.otherActions) {
+      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+      for (const item of this.otherActions) {
+        actionColumn.formatterArgs.extraActions.push(item)
+      }
+    }
+    if (this.hasDeleteAction) {
+      this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
+        {
+          name: 'Delete',
+          title: this.$t('Delete'),
+          can: this.$hasPerm('accounts.delete_account'),
+          type: 'primary',
+          callback: ({ row }) => {
+            const msg = this.$t('AccountDeleteConfirmMsg')
+            this.$confirm(msg, this.$tc('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('DeleteSuccessMsg'))
+                })
+              }
+            })
+          }
+        }
+      )
+    }
   },
   activated() {
     // 由于组件嵌套较深，有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
-    if (this.tabDeactivated) {
-      setTimeout(() => this.refresh(), 300)
-    }
-  },
-  deactivated() {
-    this.tabDeactivated = true
+    setTimeout(() => {
+      this.refresh()
+    }, 300)
   },
   methods: {
-    setActions() {
-      if (this.columns.length > 0) {
-        this.tableConfig.columns = this.columns
-      }
-      if (this.otherActions) {
-        const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
-        for (const item of this.otherActions) {
-          actionColumn.formatterArgs.extraActions.push(item)
-        }
-      }
-    },
     onUpdateAuthDone(account) {
       Object.assign(this.account, account)
     },
     addAccountSuccess() {
-      // Reflect.deleteProperty(this.$route.query, 'flag')
-      this.isUpdateAccount = false
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
@@ -507,7 +507,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .cell a {
   color: var(--color-info);
 }

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -33,7 +33,7 @@ export default {
           columnsMeta: {
             secret: {
               label: this.$t('Password'),
-              formatter: SecretViewerFormatter,
+              formatter: ShowKeyCopyFormatter,
               formatterArgs: {
                 hasDownload: false,
                 name: this.account.name

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -1,36 +1,44 @@
 <template>
   <Dialog
     :destroy-on-close="true"
-    :show-buttons="false"
     :title="$tc('UpdateAssetUserToken')"
-    :visible.sync="iVisible"
-    width="800px"
+    :visible.sync="visible"
+    width="50"
+    @cancel="handleCancel()"
+    @confirm="handleConfirm()"
     v-on="$listeners"
   >
-    <AutoDataForm
-      :fields="fields"
-      :fields-meta="fieldsMeta"
-      :form="init"
-      :has-reset="false"
-      :has-save-continue="false"
-      :url="''"
-      method="patch"
-      @submit="handleConfirm"
-    />
+    <el-form label-position="right" label-width="90px">
+      <el-form-item :label="$tc('Name')">
+        <el-input v-model="account['asset_name']" readonly />
+      </el-form-item>
+      <el-form-item :label="$tc('Username')">
+        <el-input v-model="account['username']" readonly />
+      </el-form-item>
+      <el-form-item :label="$tc('Password')">
+        <UpdateToken v-model="authInfo.password" />
+      </el-form-item>
+      <el-form-item :label="$tc('SSHSecretKey')">
+        <UploadKey @input="getFile" />
+      </el-form-item>
+      <el-form-item :label="$tc('Passphrase')">
+        <UpdateToken v-model="authInfo.passphrase" />
+      </el-form-item>
+    </el-form>
   </Dialog>
 </template>
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
+import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
 import { encryptPassword } from '@/utils/crypto'
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
 
 export default {
   name: 'UpdateSecretInfo',
   components: {
-    AutoDataForm,
-    Dialog
+    Dialog,
+    UploadKey,
+    UpdateToken
   },
   props: {
     account: {
@@ -43,59 +51,49 @@ export default {
     }
   },
   data() {
-    const accountMeta = accountFieldsMeta(this)
     return {
-      fields: [
-        'name', 'secret_type', 'password', 'ssh_key', 'token',
-        'access_key', 'passphrase', 'api_key'
-      ],
-      fieldsMeta: {
-        ...accountMeta,
-        name: {
-          ...accountMeta.name,
-          readonly: true
-        },
-        secret_type: {
-          hidden: () => true
-        }
-      },
-      init: {
-        ...this.account
-      }
-    }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
+      secretInfo: {
+        password: '',
+        private_key: '',
+        passphrase: ''
       }
     }
   },
   methods: {
-    handleConfirm(form) {
-      const secretType = this.account.secret_type.value
-      const data = {
-        secret: encryptPassword(form[secretType])
+    handleConfirm() {
+      const data = {}
+      if (this.secretInfo.password !== '') {
+        data.password = encryptPassword(this.secretInfo.password)
+      }
+      if (this.secretInfo.private_key !== '') {
+        data.private_key = encryptPassword(this.secretInfo.private_key)
+        if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
       }
       this.$axios.patch(
         `/api/v1/accounts/accounts/${this.account.id}/`,
         data,
         { disableFlashErrorMsg: true }
       ).then(res => {
+        this.authInfo = { password: '', private_key: '' }
         this.$message.success(this.$tc('UpdateSuccessMsg'))
-        this.iVisible = false
+        this.$emit('updateAuthDone', res)
+        this.$emit('update:visible', false)
       }).catch(err => {
         const errMsg = Object.values(err.response.data).join(', ')
         this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
-        this.iVisible = false
+        this.$emit('update:visible', true)
       })
     },
     handleCancel() {
       this.$emit('update:visible', false)
+    },
+    getFile(file) {
+      this.secretInfo.private_key = file
     }
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -18,7 +18,7 @@
           <span>{{ account['username'] }}</span>
         </el-form-item>
         <el-form-item :label="secretTypeLabel">
-          <SecretViewerFormatter
+          <ShowKeyCopyFormatter
             :cell-value="secretInfo.secret"
             :col="{ formatterArgs: {
               name: account['name'],
@@ -60,7 +60,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
@@ -68,7 +68,7 @@ export default {
   components: {
     Dialog,
     PasswordHistoryDialog,
-    SecretViewerFormatter
+    ShowKeyCopyFormatter
   },
   props: {
     account: {

src/components/Apps/AccountListTable/const.js

@@ -1,5 +1,4 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
-import { openTaskPage } from '@/utils/jms'
 
 export const connectivityMeta = {
   formatter: ChoicesFormatter,
@@ -23,280 +22,3 @@ export const connectivityMeta = {
   },
   width: '130px'
 }
-
-export const accountOtherActions = (vm) => [
-  {
-    name: 'View',
-    title: vm.$t('View'),
-    can: vm.$hasPerm('accounts.view_accountsecret'),
-    type: 'primary',
-    order: 1,
-    callback: ({ row }) => {
-      // debugger
-      vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-      vm.account = row
-      vm.showViewSecretDialog = false
-      setTimeout(() => {
-        vm.showViewSecretDialog = true
-      })
-    }
-  },
-  {
-    name: 'Update',
-    title: vm.$t('Edit'),
-    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
-    callback: ({ row }) => {
-      vm.isUpdateAccount = true
-      const data = {
-        ...vm.asset,
-        ...row.asset
-      }
-      vm.iAsset = data
-      vm.account = row
-      vm.addTemplate = false
-      vm.showAddDialog = false
-      setTimeout(() => {
-        vm.showAddDialog = true
-      })
-    }
-  },
-  {
-    name: 'UpdateSecret',
-    title: vm.$t('EditSecret'),
-    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
-    callback: ({ row }) => {
-      const data = {
-        ...vm.asset,
-        ...row.asset
-      }
-      vm.account = row
-      vm.iAsset = data
-      vm.showUpdateSecretDialog = false
-      vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
-      setTimeout(() => {
-        vm.showUpdateSecretDialog = true
-      })
-    }
-  },
-  {
-    name: 'Clone',
-    title: vm.$t('Duplicate'),
-    has: () => {
-      return !vm.asset
-    },
-    can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
-    callback: ({ row }) => {
-      vm.account = {
-        name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
-        username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
-        payload: 'pam_account_clone'
-      }
-      vm.iAsset = vm.asset
-
-      vm.showAddDialog = false
-      setTimeout(() => {
-        vm.showAddDialog = true
-      })
-    }
-  },
-  {
-    name: 'Test',
-    title: vm.$t('VerifySecret'),
-    divided: true,
-    can: ({ row }) =>
-      !vm.$store.getters.currentOrgIsRoot &&
-      vm.$hasPerm('accounts.verify_account') &&
-      row.asset['auto_config'].ansible_enabled &&
-      row.asset['auto_config'].ping_enabled,
-    callback: ({ row }) => {
-      vm.$axios.post(
-        `/api/v1/accounts/accounts/tasks/`,
-        { action: 'verify', accounts: [row.id] }
-      ).then(res => {
-        openTaskPage(res['task'])
-      })
-    }
-  },
-  {
-    name: 'ClearSecret',
-    title: vm.$t('ClearSecret'),
-    can: vm.$hasPerm('accounts.change_account'),
-    type: 'primary',
-    callback: ({ row }) => {
-      vm.$axios.patch(
-        `/api/v1/accounts/accounts/clear-secret/`,
-        { account_ids: [row.id] }
-      ).then(() => {
-        vm.$message.success(vm.$tc('ClearSuccessMsg'))
-      })
-    }
-  },
-  {
-    name: 'SecretHistory',
-    title: vm.$t('HistoryPassword'),
-    can: () => vm.$hasPerm('accounts.view_accountsecret'),
-    type: 'primary',
-    callback: ({ row }) => {
-      vm.account = row
-      vm.currentAccountColumn = row
-      vm.showViewSecretDialog = false
-      vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-      setTimeout(() => {
-        vm.showViewSecretDialog = true
-      })
-    }
-  },
-  {
-    name: 'CopyToOther',
-    title: vm.$t('CopyToAsset'),
-    type: 'primary',
-    divided: true,
-    can: () => vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
-    has: () => {
-      return !vm.asset
-    },
-    callback: ({ row }) => {
-      vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
-      vm.$route.query.flag = 'copy'
-      vm.iAsset = vm.asset
-      vm.account = row
-      vm.showAddDialog = true
-    }
-  },
-  {
-    name: 'MoveToOther',
-    title: vm.$t('MoveToAsset'),
-    type: 'primary',
-    can: () => vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
-    has: () => {
-      return !vm.asset
-    },
-    callback: ({ row }) => {
-      vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
-      vm.$route.query.flag = 'move'
-      vm.iAsset = vm.asset
-      vm.account = row
-      vm.showAddDialog = true
-    }
-  }
-]
-
-export const accountQuickFilters = (vm) => [
-  {
-    label: vm.$t('Recent (7 days)'),
-    options: [
-      {
-        label: vm.$t('RecentlyDiscovered'),
-        filter: {
-          latest_discovery: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentlyLoggedIn'),
-        filter: {
-          latest_accessed: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentlyModified'),
-        filter: {
-          latest_updated: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentlyChangedPassword'),
-        filter: {
-          latest_secret_changed: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentPasswordChangeFailed'),
-        filter: {
-          latest_secret_change_failed: '1'
-        }
-      }
-    ]
-  },
-  {
-    label: vm.$t('RiskyAccount'),
-    options: [
-      {
-        label: vm.$t('NoLoginLongTime'),
-        filter: {
-          long_time_no_login: 'true'
-        }
-      },
-      {
-        label: vm.$t('AddAccount'),
-        filter: {
-          risk: 'new_found'
-        }
-      },
-      {
-        label: vm.$t('WeakPassword'),
-        filter: {
-          risk: 'weak_password'
-        }
-      },
-      {
-        label: vm.$t('EmptyPassword'),
-        filter: {
-          has_secret: 'false'
-        }
-      },
-      {
-        label: vm.$t('LongTimePassword'),
-        filter: {
-          long_time_no_change_secret: 'true'
-        }
-      }
-    ]
-  },
-  {
-    label: vm.$t('AccountType'),
-    options: [
-      {
-        label: vm.$t('All'),
-        filter: {
-          category: ''
-        }
-      },
-      {
-        label: vm.$t('Host'),
-        filter: {
-          category: 'host'
-        }
-      },
-      {
-        label: vm.$t('Database'),
-        filter: {
-          category: 'database'
-        }
-      },
-      {
-        label: vm.$t('Cloud'),
-        filter: {
-          category: 'cloud'
-        }
-      },
-      {
-        label: vm.$t('Device'),
-        filter: {
-          category: 'device'
-        }
-      },
-      {
-        label: 'Web',
-        filter: {
-          category: 'web'
-        }
-      },
-      {
-        label: vm.$t('Other'),
-        filter: {
-          category: 'custom'
-        }
-      }
-    ]
-  }
-]

src/components/Apps/AssetRelationCard/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 
 export default {
@@ -48,13 +48,11 @@ export default {
     },
     performAdd: {
       type: Function,
-      default: (objects, that) => {
-      }
+      default: (objects, that) => {}
     },
     onAddSuccess: {
       type: Function,
-      default: (objects, that) => {
-      }
+      default: (objects, that) => {}
     },
     canSelect: {
       type: Function,
@@ -64,7 +62,8 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+    }
   },
   methods: {
     addObjects() {
@@ -78,18 +77,18 @@ export default {
 </script>
 
 <style scoped>
-b, strong {
-  font-weight: 700;
-  font-size: 13px;
-}
+  b, strong {
+    font-weight: 700;
+    font-size: 13px;
+  }
 
-tr td {
-  line-height: 1.42857;
-  padding: 8px;
-  vertical-align: top;
-}
+  tr td {
+    line-height: 1.42857;
+    padding: 8px;
+    vertical-align: top;
+  }
 
-tr.item td {
-  border-top: 1px solid #e7eaec;
-}
+  tr.item td {
+    border-top: 1px solid #e7eaec;
+  }
 </style>

src/components/Apps/AssetSelect/dialog.vue

@@ -22,8 +22,6 @@
       :url="baseUrl"
       class="tree-table"
       v-bind="$attrs"
-      @loaded="handleTableLoaded"
-      v-on="$listeners"
     />
   </Dialog>
 </template>
@@ -66,7 +64,6 @@ export default {
   data() {
     const vm = this
     return {
-      isLoaded: false,
       dialogVisible: false,
       rowSelected: _.cloneDeep(this.value) || [],
       rowsAdd: [],
@@ -82,7 +79,7 @@ export default {
           },
           {
             prop: 'address',
-            label: this.$t('Address'),
+            label: this.$t('IpDomain'),
             sortable: 'custom'
           },
           {
@@ -127,9 +124,6 @@ export default {
     }
   },
   methods: {
-    handleTableLoaded() {
-      this.isLoaded = true
-    },
     handleClose() {
       this.$refs.ListPage.$refs.TreeList.componentKey += 1
     },

src/components/Apps/AssetSelect/index.vue

@@ -28,6 +28,7 @@
 <script>
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import AssetSelectDialog from './dialog.vue'
+import { b } from 'css-color-function/lib/adjusters'
 
 export default {
   componentName: 'AssetSelect',
@@ -37,10 +38,6 @@ export default {
       type: String,
       default: '/api/v1/assets/assets/'
     },
-    defaultPageSize: {
-      type: Number,
-      default: 10
-    },
     baseNodeUrl: {
       type: String,
       default: '/api/v1/assets/nodes/'
@@ -56,10 +53,6 @@ export default {
     treeSetting: {
       type: Object,
       default: () => ({})
-    },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
     }
   },
   data() {
@@ -75,11 +68,9 @@ export default {
       dialogVisible: false,
       initialValue: _.cloneDeep(iValue),
       select2Config: {
-        disabled: this.disabled,
         value: iValue,
         multiple: true,
         clearable: true,
-        defaultPageSize: this.defaultPageSize,
         ajax: {
           url: this.baseUrl,
           transformOption: (item) => {
@@ -90,6 +81,7 @@ export default {
     }
   },
   methods: {
+    b,
     handleFocus() {
       this.$refs.select2.selectRef.blur()
       this.dialogVisible = true

src/components/Apps/AssetTreeTable/index.vue

@@ -32,10 +32,6 @@ export default {
       type: String,
       default: '/api/v1/assets/assets/'
     },
-    typeUrl: {
-      type: String,
-      default: '/api/v1/assets/nodes/category/tree/'
-    },
     nodeUrl: {
       type: String,
       default: '/api/v1/assets/nodes/'
@@ -109,9 +105,9 @@ export default {
               showAssets: false,
               showSearch: false,
               customTreeHeaderName: this.$t('TypeTree'),
-              url: this.typeUrl,
+              url: '/api/v1/assets/nodes/category/tree/',
               nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
-              treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
               callback: {
                 onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
               }
@@ -142,9 +138,6 @@ export default {
     treeSetting.showDelete = this.$hasPerm('assets.delete_node')
   },
   methods: {
-    reloadTable() {
-      this.$refs.TreeList.reloadTable()
-    },
     setTreeUrlQuery() {
       let str = ''
       for (const key in this.treeUrlQuery) {
@@ -164,37 +157,30 @@ export default {
         $('#m_show_asset_only_current_node').css('color', '#606266')
       }
     },
-
     getAssetsUrl(treeNode) {
       let url = this.treeSetting?.url || this.url
-
-      const setParam = (param, value, delay) => {
-        setTimeout(() => {
-          url = setUrlParam(url, param, value)
-        })
-      }
-
       if (treeNode.meta.type === 'node') {
         const nodeId = treeNode.meta.data.id
-        setParam('node_id', nodeId)
-        setParam('asset_id', '')
+        url = setUrlParam(url, 'node_id', nodeId)
+        url = setUrlParam(url, 'asset_id', '')
       } else if (treeNode.meta.type === 'asset') {
         const assetId = treeNode.meta.data?.id || treeNode.id
-        setParam('node_id', '')
-        setParam('asset_id', assetId)
+        url = setUrlParam(url, 'node_id', '')
+        url = setUrlParam(url, 'asset_id', assetId)
       } else if (treeNode.meta.type === 'category') {
-        setParam('category', treeNode.meta.category)
+        url = setUrlParam(url, 'category', treeNode.meta.category)
       } else if (treeNode.meta.type === 'type') {
-        setParam('category', treeNode.meta.category)
-        setParam('type', treeNode.meta._type)
+        url = setUrlParam(url, 'category', treeNode.meta.category)
+        url = setUrlParam(url, 'type', treeNode.meta._type)
       } else if (treeNode.meta.type === 'platform') {
-        setParam('platform', treeNode.id)
+        url = setUrlParam(url, 'platform', treeNode.id)
       }
+      const query = this.setTreeUrlQuery()
+      url = query ? `${url}&${query}` : url
+
       setTimeout(() => {
-        const query = this.setTreeUrlQuery()
-        url = query ? `${url}&${query}` : url
         this.$set(this.tableConfig, 'url', url)
-      })
+      }, 300)
 
       if (this.treeSetting.selectSyncToRoute !== false) {
         setRouterQuery(this, url)

src/components/Apps/BlockedIPs/BlockedIPList.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'
 
 export default {
   name: 'BlockedIPList',

src/components/Apps/ChangeSecret/RecordViewSecret.vue

@@ -12,7 +12,7 @@
     >
       <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
         <el-form-item :label="$tc('OldSecret')">
-          <SecretViewerFormatter
+          <ShowKeyCopyFormatter
             :cell-value="secretInfo.old_secret"
             :col="{ formatterArgs: {
               name: 'old_secret'
@@ -20,7 +20,7 @@
           />
         </el-form-item>
         <el-form-item :label="$tc('NewSecret')">
-          <SecretViewerFormatter
+          <ShowKeyCopyFormatter
             :cell-value="secretInfo.new_secret"
             :col="{ formatterArgs: {
               name: 'new_secret'
@@ -34,13 +34,13 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'RecordViewSecret',
   components: {
     Dialog,
-    SecretViewerFormatter
+    ShowKeyCopyFormatter
   },
   props: {
     visible: {

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

@@ -46,7 +46,7 @@ export default {
         url: '/api/v1/settings/chatai-prompts/',
         value: '',
         multiple: false,
-        placeholder: this.$t('Role'),
+        placeholder: this.$t('Prompt'),
         ajax: {
           transformOption: (item) => {
             return { label: item.name, value: item.content }

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

@@ -1,74 +1,42 @@
 <template>
-  <div :class="{ 'user-role': isUserRole }" class="chat-item">
-    <div class="chart-item-container">
-      <div class="avatar">
-        <el-avatar
-          :src="isUserRole ? userUrl : chatUrl"
-          class="header-avatar"
-        />
+  <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="content">
-        <div class="operational">
-          <div v-if="!item.message.is_reasoning" class="date">
-            {{
-              $moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
-            }}
-          </div>
-
-          <div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</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="item.reasoning ? 'reasoning' : 'message'">
-          <div class="message-content">
-            <div v-if="!item.reasoning">
-              <span v-if="isSystemError" class="error">
-                {{ item.message.content }}
-              </span>
-              <span v-else class="chat-text">
-                <MessageText :message="item.message" />
-              </span>
-            </div>
-
-            <div v-else class="thinking-wrapper">
-              <div class="thinking-content">
-                <!-- eslint-disable-next-line -->
-                <div class="divider"></div>
-                <p>
-                  <MessageText :message="item.reasoning" />
-                </p>
-              </div>
-
-              <div class="thinking-result">
-                <span v-if="isServerError" class="error">
-                  {{ isServerError }}
-                </span>
-                <MessageText :message="item.result" />
-              </div>
-            </div>
-          </div>
-          <div class="action">
-            <el-tooltip
-              v-if="isSystemError && isLoading"
-              :content="$tc('Reconnect')"
-              :open-delay="500"
-              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 class="action">
+          <el-tooltip
+            v-if="isSystemError && isLoading"
+            :content="$tc('Reconnect')"
+            :open-delay="500"
+            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>
@@ -77,7 +45,7 @@
 
 <script>
 import MessageText from './MessageText.vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { copy } from '@/utils/common'
 import { useChat } from '../../useChat.js'
 import { reconnect } from '@/utils/socket'
@@ -97,6 +65,7 @@ export default {
   },
   data() {
     return {
+      chatUrl: require('@/assets/img/chat.png'),
       userUrl: '/api/v1/settings/logo/',
       dropdownOptions: [
         {
@@ -110,26 +79,11 @@ export default {
     ...mapState({
       isLoading: state => state.chat.loading
     }),
-    ...mapGetters([
-      'publicSettings'
-    ]),
     isUserRole() {
       return this.item.message?.role === 'user'
     },
     isSystemError() {
-      return (
-        this.item.type === 'error' && this.item?.role === 'assistant'
-      )
-    },
-    isServerError() {
-      return (this.item.type === 'finish' && this.item.result.content === '')
-        ? this.$i18n.t('ServerBusyRetry')
-        : ''
-    },
-    chatUrl() {
-      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
-        ? require('@/assets/img/chat.png')
-        : require('@/assets/img/deepSeek.png')
+      return this.item.type === 'error' && this.item.message?.role === 'assistant'
     }
   },
   methods: {
@@ -140,7 +94,7 @@ export default {
     },
     handleCommand(value) {
       if (value === 'copy') {
-        copy(this.item.result.content)
+        copy(this.item.message.content)
       }
     }
   }
@@ -150,160 +104,101 @@ export default {
 <style lang="scss" scoped>
 .chat-item {
   display: flex;
-  padding: 0.5rem;
-
-  .chart-item-container {
-    display: flex;
-    gap: 0.5rem;
-
-    .avatar {
-      width: 24px;
-      height: 24px;
-      margin-top: 2px;
-
-      .header-avatar {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-
-        &::v-deep img {
-          background-color: #fff;
-        }
-      }
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      // gap: 0.5rem;
-      overflow: hidden;
-
-      .operational {
-        display: flex;
-        justify-content: space-between;
-        overflow: hidden;
-
-        .date {
-          padding-top: 5px;
-        }
-
-        .thinking-time {
-          width: 6rem;
-          display: flex;
-          justify-content: center;
-          padding: 5px 10px;
-          border-radius: 0.5rem;
-          background-color: #f5f5f5;
-        }
-
-        .copy {
-          float: right;
-          cursor: pointer;
-        }
-      }
-
-      .reasoning {
-        display: flex;
-        gap: 0.5rem;
-        align-items: flex-end;
-
-        .message-content .thinking-wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 0.5rem;
-
-          .thinking-content {
-            position: relative;
-            color: #8b8b8b;
-
-            .divider {
-              position: absolute;
-              top: 0;
-              left: 0;
-              height: 100%;
-              border-left: 2px solid #e5e5e5;
-            }
-
-            p {
-              margin: unset;
-              padding-left: 0.5rem;
-
-              ::v-deep p {
-                color: #8b8b8b;
-              }
-            }
-          }
-        }
-      }
-
-      .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;
-        }
-      }
-    }
-  }
+  padding: 16px 14px 0;
 
   &:last-child {
     padding-bottom: 16px;
   }
 
-  &.user-role {
-    flex-direction: row-reverse;
+  .avatar {
+    width: 22px;
+    height: 22px;
+    margin-top: 2px;
 
-    .chart-item-container {
+    .header-avatar {
+      width: 100%;
+      height: 100%;
+
+      &::v-deep 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;
     }
 
-    .content {
-      margin-right: 10px;
+    .message {
+      flex-direction: row-reverse;
 
-      .operational {
-        flex-direction: row-reverse;
-      }
-
-      .message {
-        flex-direction: row-reverse;
-
-        .message-content {
-          background-color: var(--menu-hover);
-          border-radius: 12px 2px 12px 12px;
-        }
+      .message-content {
+        background-color: var(--menu-hover);
+        border-radius: 12px 2px 12px 12px;
       }
     }
   }

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

@@ -123,17 +123,7 @@ export default {
         setLoading(true)
         removeLoadingMessageInChat()
         this.conversationId = data.id
-
-        const newFragment = {
-          message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
-          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
-          result: { content: data.message.is_reasoning ? '' : data.message.content },
-          role: data.message.role,
-          type: data.message.type,
-          create_time: data.message.create_time
-        }
-
-        updateChaMessageContentById(data.message.id, newFragment)
+        updateChaMessageContentById(data.message.id, data)
       }
       if (data.message?.type === 'finish') {
         setLoading(false)

src/components/Apps/GrantedAssets/index.vue

@@ -1,13 +1,12 @@
 <template>
   <AssetTreeTable
-    ref="AssetTreeTable"
     :header-actions="headerActions"
     :table-config="tableConfig"
     :tree-setting="treeSetting"
   />
 </template>
 
-<script>
+<script type="text/jsx">
 import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
@@ -48,19 +47,9 @@ export default {
         return this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
       }
     },
-    name: {
-      type: Object,
-      default: () => ({
-        formatter: DetailFormatter,
-        formatterArgs: {
-          route: 'AssetDetail',
-          can: true
-        }
-      })
-    },
-    comment: {
-      type: Object,
-      default: () => ({})
+    nameDisabled: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -87,11 +76,15 @@ export default {
         columnsExclude: ['spec_info'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
-          default: ['name', 'address', 'platform', 'view_account', 'actions']
+          default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
         },
         columnsMeta: {
           name: {
-            ...this.name
+            formatter: DetailFormatter,
+            formatterArgs: {
+              route: 'AssetDetail',
+              can: !this.nameDisabled
+            }
           },
           labels: {
             formatterArgs: {
@@ -106,8 +99,7 @@ export default {
             formatter: AccountInfoFormatter,
             width: '100px'
           },
-          connectivity: connectivityMeta,
-          comment: { ...this.comment }
+          connectivity: connectivityMeta
         },
         tableAttrs: {
           rowClassName({ row }) {

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -1,26 +1,24 @@
 <template>
-  <TwoCol>
-    <ListTable v-bind="config" />
-  </TwoCol>
+  <el-row :gutter="24">
+    <el-col :md="20" :sm="22">
+      <ListTable v-bind="config" />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { toM2MJsonParams } from '@/utils/jms'
-import { DetailFormatter } from '@/components/Table/TableFormatters'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
   name: 'AssetJsonTab',
   components: {
-    TwoCol,
     ListTable
   },
   props: {
     object: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     }
   },
   data() {
@@ -34,18 +32,21 @@ export default {
         },
         tableConfig: {
           url: `/api/v1/assets/assets/?${key}=${value}`,
-          columns: ['name', 'address', 'platform', 'type', 'is_active'],
-          columnsShow: {
-            min: ['name', 'address'],
-            default: ['name', 'address', 'platform']
-          },
+          columns: ['name', 'address', 'platform',
+            'type', 'is_active'
+          ],
           columnsMeta: {
             name: {
               label: this.$t('Asset'),
-              formatter: DetailFormatter,
-              formatterArgs: {
-                getRoute: ({ row }) => {
-                  return { name: 'AssetDetail', params: { id: row.id }}
+              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>
                 }
               }
             },
@@ -64,3 +65,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -1,19 +1,18 @@
 <template>
-  <TwoCol>
-    <ListTable v-bind="config" />
-  </TwoCol>
+  <el-row :gutter="24">
+    <el-col :md="20" :sm="22">
+      <ListTable v-bind="config" />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { toM2MJsonParams } from '@/utils/jms'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'
-import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'User',
   components: {
-    TwoCol,
     ListTable
   },
   props: {
@@ -35,23 +34,22 @@ export default {
         tableConfig: {
           url: `/api/v1/users/users/?${key}=${value}`,
           columns: [
-            'name', 'username', 'email', 'groups', 'system_roles',
+            'name', 'username', 'groups', 'system_roles',
             'org_roles', 'source', 'is_valid'
           ],
-          columnsShow: {
-            min: ['name', 'username'],
-            default: ['name', 'username', 'email']
-          },
           columnsMeta: {
             name: {
               label: this.$t('Name'),
-              formatter: DetailFormatter,
-              formatterArgs: {
-                getRoute: ({ row }) => {
-                  return {
-                    name: 'UserDetail',
-                    params: { id: row.id }
-                  }
+              width: 85,
+              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>
                 }
               }
             },
@@ -89,3 +87,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/Apps/ResourceActivity/index.vue

@@ -1,43 +1,43 @@
 <template>
   <div>
-    <TwoCol>
-      <IBox :title="title" class="block" v-bind="$attrs">
-        <el-timeline>
-          <el-timeline-item
-            v-for="(activity, index) in activities"
-            :key="index"
-            :size="activity.size"
-            :timestamp="activity.timestamp"
-            :type="activity.type"
-            placement="bottom"
-          >
-            {{ activity.content }}
-            <el-link
-              v-if="activity['detail_url']"
-              type="primary"
-              @click.native="onClick(activity)"
+    <el-row :gutter="20">
+      <el-col :md="16" :sm="24">
+        <IBox :title="title" class="block" v-bind="$attrs">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :size="activity.size"
+              :timestamp="activity.timestamp"
+              :type="activity.type"
+              placement="bottom"
             >
-              {{ $tc('Detail') }}
-            </el-link>
-          </el-timeline-item>
-        </el-timeline>
-      </IBox>
-    </TwoCol>
+              {{ activity.content }}
+              <el-link
+                v-if="activity['detail_url']"
+                type="primary"
+                @click.native="onClick(activity)"
+              >
+                {{ $tc('Detail') }}
+              </el-link>
+            </el-timeline-item>
+          </el-timeline>
+        </IBox>
+      </el-col>
+    </el-row>
     <DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
   </div>
 </template>
 
 <script>
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import DiffDetail from '@/components/Dialog/DiffDetail.vue'
 import { openTaskPage } from '@/utils/jms'
 import { toSafeLocalDateStr } from '@/utils/time'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
   name: 'ResourceActivity',
   components: {
-    TwoCol,
     IBox,
     DiffDetail
   },

src/components/Apps/UserConfirmDialog/index.vue

@@ -8,7 +8,7 @@
     :visible.sync="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="740px"
+    width="600px"
     @confirm="visible = false"
     v-on="$listeners"
   >
@@ -52,28 +52,18 @@
       <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
           <el-input
-            v-if="subTypeSelected !== 'face'"
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-
-          <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
-            :src="faceCaptureUrl"
-            allow="camera"
-            sandbox="allow-scripts allow-same-origin"
-            style="width: 100%; height: 800px;border: none;"
-          />
-
-          <span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
+          <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
             <el-button
               :disabled="smsBtnDisabled"
               size="mini"
               style="line-height: 14px; float: right;"
               type="primary"
-              @click="sendCode"
+              @click="sendSMSCode"
             >
               {{ smsBtnText }}
             </el-button>
@@ -82,24 +72,9 @@
       </el-row>
       <el-row :gutter="24" style="margin: 10px auto;">
         <el-col :md="24" :sm="24">
-          <el-button
-            v-if="subTypeSelected!=='face'"
-            class="confirm-btn"
-            size="mini"
-            type="primary"
-            @click="handleConfirm"
-          >
+          <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
             {{ this.$t('Confirm') }}
           </el-button>
-          <el-button
-            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
-            class="confirm-btn"
-            size="mini"
-            type="primary"
-            @click="handleFaceCapture"
-          >
-            {{ this.$tc('VerifyFace') }}
-          </el-button>
         </el-col>
       </el-row>
     </div>
@@ -138,10 +113,7 @@ export default {
       visible: false,
       callback: null,
       cancel: null,
-      processing: false,
-      isFaceCaptureVisible: false,
-      faceToken: null,
-      faceCaptureUrl: null
+      processing: false
     }
   },
   computed: {
@@ -157,10 +129,6 @@ export default {
   },
   methods: {
     handleSubTypeChange(val) {
-      if (val !== 'face') {
-        this.isFaceCaptureVisible = false
-      }
-
       this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
       this.smsWidth = val === 'sms' ? 6 : 0
     },
@@ -204,8 +172,8 @@ export default {
     logout() {
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
     },
-    sendCode() {
-      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
+    sendSMSCode() {
+      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
         this.$message.success(this.$tc('VerificationCodeSent'))
         let time = 60
         this.smsBtnDisabled = true
@@ -224,29 +192,6 @@ export default {
         this.$message.error(this.$tc('FailedToSendVerificationCode'))
       })
     },
-    startFaceCapture() {
-      const url = '/api/v1/authentication/face/context/'
-      this.$axios.post(url).then(data => {
-        const token = data['token']
-        this.faceCaptureUrl = '/facelive/capture?token=' + token
-        this.isFaceCaptureVisible = true
-
-        const timer = setInterval(() => {
-          this.$axios.get(url + `?token=${token}`).then(data => {
-            if (data['is_finished']) {
-              clearInterval(timer)
-              this.isFaceCaptureVisible = false
-              this.handleConfirm()
-            }
-          })
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToStartFaceCapture'))
-      })
-    },
-    handleFaceCapture() {
-      this.startFaceCapture()
-    },
     handleConfirm() {
       if (this.confirmTypeRequired === 'relogin') {
         return this.logout()
@@ -269,8 +214,6 @@ export default {
         })
       }).catch((err) => {
         this.$message.error(err.message || this.$tc('ConfirmFailed'))
-        this.faceCaptureUrl = null
-        this.isFaceCaptureVisible = false
       })
     }
   }
@@ -278,21 +221,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dialog-content ::v-deep .el-dialog__footer {
-  padding: 0;
-}
-
-.dialog-content ::v-deep .el-dialog {
-  padding: 8px;
-
-  .el-dialog__body {
-    padding-top: 30px;
-    padding-bottom: 30px;
+  .dialog-content ::v-deep .el-dialog__footer {
+    padding: 0;
   }
-}
 
-.confirm-btn {
-  width: 100%;
-  line-height: 20px;
-}
+  .dialog-content ::v-deep .el-dialog {
+    padding: 8px;
+
+    .el-dialog__body {
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+  }
+
+  .confirm-btn {
+    width: 100%;
+    line-height: 20px;
+  }
 </style>

src/components/Apps/VariableCreateUpdateForm/index.vue

@@ -1,133 +0,0 @@
-<template>
-  <AutoDataForm
-    ref="AutoDataForm"
-    class="variable-add"
-    :submit-btn-text="submitBtnText"
-    v-bind="$data"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-
-export default {
-  name: 'VariableCreateForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    variable: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    const defaultValidator = (rule, value, callback) => {
-      if (this.defaultValueRequired && !value) {
-        callback(new Error(this.$t('FieldRequiredError')))
-      } else {
-        callback()
-      }
-    }
-    return {
-      defaultValueRequired: false,
-      submitBtnText: this.$t('Confirm'),
-      url: '/api/v1/ops/variables/',
-      form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
-      fields: [
-        ['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
-      ],
-      fieldsMeta: {
-        text_default_value: {
-          label: this.$t('DefaultValue'),
-          hidden: (formValue) => {
-            return formValue.type !== 'text'
-          },
-          rules: [{ validator: defaultValidator }],
-          helpTip: this.$t('DefaultValueTip'),
-          el: {
-            type: 'input'
-          }
-        },
-        select_default_value: {
-          label: this.$t('DefaultValue'),
-          helpTip: this.$t('DefaultValueTip'),
-          hidden: (formValue) => {
-            return formValue.type !== 'select'
-          },
-          rules: [{ validator: defaultValidator }],
-          el: { type: 'input' }
-        },
-        extra_args: {
-          hidden: (formValue) => {
-            return formValue.type !== 'select'
-          },
-          el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
-          rules: [
-            {
-              validator: (rule, value, callback) => {
-                try {
-                  const lines = value.split('\n')
-                  const regex = /^[^:]+:[^:]+$/
-                  for (const line of lines) {
-                    if (!regex.test(line.trim())) {
-                      callback(new Error(this.$t('ExtraArgsFormatError')))
-                    }
-                  }
-                } catch (e) {
-                  callback(new Error(this.$t('ExtraArgsFormatError')))
-                }
-                callback()
-              }
-            }
-          ]
-        },
-        required: {
-          on: {
-            change: ([event], updateForm) => {
-              this.defaultValueRequired = event
-            }
-          }
-        }
-      },
-      hasSaveContinue: false,
-      method: 'get'
-    }
-  },
-  mounted() {
-    this.defaultValueRequired = this.variable?.required || false
-  },
-  methods: {
-    confirm(form) {
-      if (this.variable?.name) {
-        this.$emit('edit', form)
-      } else {
-        this.$emit('add', form)
-      }
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.variable-add {
-  ::v-deep .el-form-item {
-    margin-bottom: 5px;
-
-    .help-block {
-      margin-bottom: 5px;
-    }
-  }
-
-  ::v-deep .form-group-header {
-    .hr-line-dashed {
-      margin: 5px 0;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>

src/components/Apps/VariableSetForm/index.vue

@@ -1,74 +0,0 @@
-<template>
-  <AutoDataForm
-    ref="AutoDataForm"
-    class="variable-set"
-    :submit-btn-text="submitBtnText"
-    v-bind="$data"
-    :fields="fields"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-
-export default {
-  name: 'VariableSetForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    formData: {
-      type: Array,
-      default: () => ([])
-    },
-    queryParam: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      submitBtnText: this.$t('Confirm'),
-      // 防止缓存form remoteMeta
-      url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
-      form: {},
-      hasSaveContinue: false,
-      method: 'get',
-      hasReset: false
-    }
-  },
-  computed: {
-    fields() {
-      return [['', this.formData.map(item => item.var_name)]]
-    }
-  },
-  methods: {
-    confirm(form) {
-      this.$emit('confirm', form)
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.variable-set {
-  ::v-deep .el-form-item {
-    margin-bottom: 5px;
-
-    .help-block {
-      margin-bottom: 5px;
-    }
-  }
-
-  ::v-deep .form-group-header {
-    .hr-line-dashed {
-      margin: 5px 0;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>

src/components/Cards/DetailCard/ItemValue.vue

@@ -78,7 +78,7 @@ export default {
         formatterData = data
       }
       return (
-        <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
+        <span>{formatterData}</span>
       )
     }
     if (this.value instanceof Array) {
@@ -92,7 +92,7 @@ export default {
       )
     }
     return (
-      <span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
+      <span title={this.displayValue}>{this.displayValue}</span>
     )
   }
 }

src/components/Cards/DetailCard/auto.vue

@@ -1,12 +1,7 @@
 <template>
   <IBox v-if="loading" style="width: 100%; height: 200px" />
   <div v-else>
-    <DetailCard
-      v-if="hasObject && items.length > 0"
-      :items="validItems"
-      :loading="loading"
-      v-bind="$attrs"
-    />
+    <DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
   </div>
 </template>
 
@@ -14,7 +9,7 @@
 import DetailCard from './index.vue'
 import { copy } from '@/utils/common'
 import { toSafeLocalDateStr } from '@/utils/time'
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 
 export default {
@@ -37,7 +32,7 @@ export default {
       type: Array,
       default: null
     },
-    showUndefined: {
+    showUndefine: {
       type: Boolean,
       default: true
     },
@@ -173,7 +168,7 @@ export default {
       const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       let remoteMeta = data.actions['GET'] || {}
       if (this.nested) {
-        remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {}
+        remoteMeta = remoteMeta[this.nested]?.children || {}
       }
       let fields = this.fields
       fields = fields || Object.keys(remoteMeta)
@@ -225,7 +220,7 @@ export default {
         value = this.parseValue(value, fieldMeta.type)
 
         if (value === undefined) {
-          if (this.showUndefined) {
+          if (this.showUndefine) {
             value = '-'
           } else {
             continue

src/components/Cards/DetailCard/index.vue

@@ -1,25 +1,24 @@
 <template>
   <IBox :fa="fa" :title="title">
-    <el-form :label-width="labelWidth" class="content detail-card" label-position="left">
-      <template v-for="item in items">
-        <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
-          <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
-          <span class="item-value el-form-item__content">
-            <template
-              :is="item.component"
-              v-if="item.component"
-              v-bind="{...item}"
-            />
-            <ItemValue v-else :value="item.value" v-bind="item" />
-          </span>
-        </div>
-      </template>
+    <el-form :label-width="labelWidth" class="content" label-position="left">
+      <span v-for="item in items" :key="item.key">
+        <el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
+          <span slot="label"> {{ formateLabel(item.key) }}</span>
+          <span
+            :is="item.component"
+            v-if="item.component"
+            v-bind="{...item}"
+          />
+          <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
+        </el-form-item>
+      </span>
     </el-form>
+    <slot />
   </IBox>
 </template>
 
 <script>
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '../../IBox/index.vue'
 import ItemValue from './ItemValue.vue'
 
 export default {
@@ -46,7 +45,7 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: '120px'
+      default: '25%'
     }
   },
   data() {
@@ -72,76 +71,55 @@ export default {
   padding: 20px 40px;
 }
 
-.content {
-  font-size: 13px;
-  line-height: 2;
+.el-form-item {
+  border-bottom: 1px dashed #EBEEF5;
+  padding: 1px 0;
+  margin-bottom: 0;
 
-  ::v-deep .el-form-item {
-    border-bottom: 1px dashed #F4F4F4;
-    padding: 1px 0;
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-    //text-align: end;
-    line-height: 32px;
-    min-height: 32px;
+  &:last-child {
+    border-bottom: none;
+  }
 
-    &:last-child {
-      //border-bottom: none;
+  &.array-item {
+    border-bottom: none;
+
+    ::v-deep .el-form-item__content {
+      border-bottom: 1px dashed #EBEEF5
     }
 
-    &.array-item {
-      border-bottom: none;
-
-      ::v-deep .el-form-item__content {
-        border-bottom: 1px dashed #EBEEF5
-      }
-
-      ::v-deep .el-form-item__label:last-child {
-        border: 1px dashed #EBEEF5;
-      }
-    }
-
-    .el-form-item__label {
-      //padding-right: 8%;
-      overflow: hidden;
-      color: var(--color-icon-primary);
-      font-size: 12px;
-      line-height: 1.5;
-      font-weight: 400;
-      width: 33%;
-      min-width: 120px;
-      padding: 5px 0;
-
-      span {
-        display: inline-block;
-        //line-height: 1.1;
-      }
-    }
-
-    .el-form-item__content {
-      color: var(--color-text-primary);
-      font-size: 13px;
-      line-height: 1.5;
-      width: calc(100% - 120px);
-      padding: 5px 0;
-    }
-
-    ::v-deep .el-tag--mini {
-      margin-right: 3px;
+    ::v-deep .el-form-item__label:last-child {
+      border: 1px dashed #EBEEF5;
     }
   }
 
-  .item-value {
-    ::v-deep span {
-      //display: -webkit-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-word;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      vertical-align: middle;
+  ::v-deep .el-form-item__label {
+    padding-right: 8%;
+    overflow: hidden;
+    color: var(--color-icon-primary);
+
+    span {
+      display: inline-block;
+      line-height: 1.5;
     }
   }
+
+  ::v-deep .el-form-item__content {
+    color: var(--color-text-primary);
+    font-size: 13px;
+    line-height: 40px;
+  }
+
+  ::v-deep .el-tag--mini {
+    margin-right: 3px;
+  }
+}
+
+.item-value span {
+  word-break: break-word;
+}
+
+.content {
+  font-size: 13px;
+  line-height: 2.5;
 }
 </style>

src/components/Cards/RelationCard/index.vue

@@ -49,7 +49,7 @@
 <script>
 import { createSourceIdCache } from '@/api/common'
 import { Select2 } from '@/components/Form/FormFields'
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -340,13 +340,13 @@ b, strong {
 }
 
 tr td {
-  line-height: 1.4;
-  padding: 8px 0;
+  line-height: 1.42857;
+  padding: 8px;
   vertical-align: top;
 }
 
 tr.item td {
-  border-top: 1px dashed #EBEEF5;
+  border-top: 1px solid #e7eaec;
 }
 
 .box-margin {

src/components/Cards/SummaryCard/index.vue

@@ -1,23 +1,18 @@
 <template>
-  <div>
-    <div class="summary-header">
-      <el-tooltip :content="title" :open-delay="500" placement="top">
-        <span class="title">{{ title }}</span>
-      </el-tooltip>
+  <el-card shadow="never">
+    <div slot="header" class="summary-header">
+      <span class="header-title">{{ title }}</span>
     </div>
     <slot>
-      <h3 class="no-margins ">
-        <span
-          :class="{ 'can-direct': canDirect }"
-          class="num"
-          @click="handleClick"
-        >
-          <span v-if="count === null"> - </span>
-          <span v-else>{{ count }}</span>
-        </span>
-      </h3>
+      <h1 class="no-margins">
+        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
+        <router-link v-else :to="body.route">
+          <span>{{ body.count }}</span>
+        </router-link>
+      </h1>
+      <small>{{ body.comment }}</small>
     </slot>
-  </div>
+  </el-card>
 </template>
 
 <script>
@@ -28,78 +23,56 @@ export default {
       type: String,
       default: ''
     },
-    count: {
-      type: [Number, String, Promise],
-      default: null
+    rightSideLabel: {
+      type: Object,
+      default: () => ({})
     },
-    route: {
-      type: [String, Object],
-      default: ''
-    },
-    canDirect: {
-      type: Boolean,
-      default: false
-    },
-    callback: {
-      type: Function,
-      default: () => {
-      }
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    handleClick() {
-      if (this.disabled) {
-        return
-      }
-      if (this.route) {
-        this.$router.push(this.route)
-        return
-      }
-      this.callback.bind(this)()
-      this.$emit('click')
+    body: {
+      type: Object,
+      default: () => ({})
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.summary-header {
-  //color: var(--color-icon-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
+  .pull-right {
+    float: right !important;
+  }
 
-  .title {
-    font-style: normal;
+  .header-title {
+    font-size: 14px;
+    margin: 0 0 7px;
     font-weight: 600;
-    font-size: 12px;
-    text-transform: uppercase;
-    line-height: 1.2;
   }
-}
 
-.no-margins {
-  margin: 0 !important;
-
-  .num {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 24px;
-    line-height: 40px;
-    color: var(--color-text-primary);
-    cursor: pointer;
-
-    &.can-direct:hover {
-      color: var(--color-primary);
-    }
+  .right-side ::v-deep .el-tag {
+    font-weight: 600;
+    padding: 3px 8px;
+    text-shadow: none;
+    line-height: 1;
+  }
+
+  h1 {
+    font-size: 30px;
+    font-weight: 100;
+  }
+
+  .el-card__body {
+    background-color: #ffffff;
+    color: inherit;
+    padding: 15px 20px 20px 20px !important;
+    border-color: #e7eaec;
+    border-image: none;
+    border-style: solid solid none;
+    border-width: 1px 0;
+  }
+
+  .no-margins {
+    margin: 0 !important;
+  }
+
+  .disabled-link {
+    color: #428bca;
   }
-}
 </style>

src/components/DataActions/index.vue

@@ -5,28 +5,15 @@
         v-if="action.dropdown"
         v-show="action.dropdown.length > 0"
         :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
-        :size="action.size"
-        :split-button="!!action.split"
-        :type="action.type"
         class="action-item"
         placement="bottom-start"
         trigger="click"
-        @click="handleClick(action)"
         @command="handleDropdownCallback"
       >
-        <span v-if="action.split">
-          {{ action.title }}
-        </span>
-        <el-button
-          v-else
-          :class="action.name"
-          :size="size"
-          class="more-action"
-          v-bind="{...cleanButtonAction(action), icon: ''}"
-        >
-          <span class="pre-icon">
-            <Icon v-if="action.icon" :icon="action.icon" />
+        <el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
+          <span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
+            <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
+            <svg-icon v-else :icon-class="action.icon" />
           </span>
           <span v-if="action.title">
             {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
@@ -42,13 +29,7 @@
             >
               {{ option.group }}
             </div>
-            <el-tooltip
-              :key="option.name"
-              :content="option.tip"
-              :disabled="!option.tip"
-              :open-delay="500"
-              placement="top"
-            >
+            <el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
               <el-dropdown-item
                 :key="option.name"
                 :command="[option, action]"
@@ -56,8 +37,9 @@
                 class="dropdown-item"
                 v-bind="{...option, icon: ''}"
               >
-                <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
-                  <Icon v-if="option.icon" :icon="option.icon" />
+                <span v-if="option.icon" class="pre-icon">
+                  <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
+                  <svg-icon v-else :icon-class="option.icon" />
                 </span>
                 {{ option.title }}
               </el-dropdown-item>
@@ -69,16 +51,16 @@
       <el-button
         v-else
         :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
         :size="size"
         class="action-item"
-        v-bind="{...cleanButtonAction(action), icon: ''}"
+        v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
         @click="handleClick(action)"
       >
-        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
+        <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
           <span>
-            <span v-if="action.icon" style="vertical-align: initial">
-              <Icon :icon="action.icon" />
+            <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
+              <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
+              <svg-icon v-else :icon-class="action.icon" />
             </span>
             {{ action.title }}
           </span>
@@ -90,13 +72,9 @@
 
 <script>
 import { toSentenceCase } from '@/utils/common'
-import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {
   name: 'DataActions',
-  components: {
-    Icon
-  },
   props: {
     grouped: {
       type: Boolean,
@@ -121,9 +99,6 @@ export default {
     }
   },
   methods: {
-    actionsHasIcon(actions) {
-      return actions.some(action => action.icon)
-    },
     hasIcon(action, type = '') {
       const icon = action.icon
       if (!icon) {
@@ -181,7 +156,6 @@ export default {
       delete action['callback']
       delete action['name']
       delete action['can']
-      delete action['split']
       return action
     },
     cleanActions(actions) {
@@ -211,10 +185,6 @@ export default {
         }
         delete action['can']
 
-        if (!action.size) {
-          action.size = 'small'
-        }
-
         if (action.dropdown) {
           action.dropdown = this.cleanActions(action.dropdown)
         }
@@ -239,10 +209,6 @@ $color-drop-menu-border: #e4e7ed;
   .action-item {
     margin-left: 5px;
 
-    &.grouped {
-      margin-left: 0;
-    }
-
     &:first-child {
       margin-left: 0;
     }
@@ -283,15 +249,10 @@ $color-drop-menu-border: #e4e7ed;
   align-items: flex-end;
 
   .el-button {
-    padding: 2px 5px;
-
-    &:not(.is-plain) {
-      color: $btn-text-color;
-    }
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    padding: 2px 6px;
+    color: $btn-text-color;
 
     * {
       vertical-align: baseline !important;
@@ -319,6 +280,7 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
   ::v-deep .more-batch-processing {
+    text-align: center;
 
     &:hover {
       background-color: transparent !important;
@@ -341,7 +303,6 @@ $color-drop-menu-border: #e4e7ed;
 
   .dropdown-item {
     color: var(--color-text-primary);
-    line-height: 34px;
 
     .pre-icon {
       width: 17px;
@@ -363,8 +324,6 @@ $color-drop-menu-border: #e4e7ed;
   }
 
   .el-dropdown-menu__item {
-    padding: 0 20px;
-
     &.is-disabled {
       color: var(--color-disabled);
       cursor: not-allowed;

src/components/Dialog/DiffDetail.vue

@@ -1,7 +1,6 @@
 <template>
   <Dialog
     v-if="detailVisible"
-    :modal="false"
     :show-cancel="false"
     :show-confirm="false"
     :title="title"

src/components/Dialog/ProcessingDialog.vue

@@ -1,71 +0,0 @@
-<template>
-  <Dialog
-    :show-cancel="false"
-    :visible="iVisible"
-    class="processing-dialog"
-    height="300"
-    :title="$tc('Processing')"
-    width="300"
-    @confirm="iVisible=false"
-  >
-    <div id="load">
-      <div class="spinner" />
-    </div>
-  </Dialog>
-</template>
-
-<script>
-import Dialog from './index.vue'
-
-export default {
-  name: 'ProcessingDialog',
-  components: { Dialog },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.processing-dialog {
-  ::v-deep .el-dialog__body {
-    overflow: hidden;
-  }
-}
-
-.spinner {
-  width: 100px;
-  height: 100px;
-  border: 5px solid rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  border-top-color: var(--color-primary);
-  animation: spin 1s infinite linear;
-}
-
-#load {
-  display: flex;
-  justify-content: center;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>

src/components/Dialog/RemoteProcessingDialog.vue

@@ -1,69 +0,0 @@
-<template>
-  <Dialog
-    :visible="iVisible"
-    height="300"
-    title="Processing"
-    width="300"
-    class="processing-dialog"
-  >
-    <div id="load">
-      <div class="spinner" />
-    </div>
-  </Dialog>
-</template>
-
-<script>
-import Dialog from './index.vue'
-
-export default {
-  name: 'RemoteProcessingDialog',
-  components: { Dialog },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.processing-dialog {
-  ::v-deep .el-dialog__body {
-    overflow: hidden;
-  }
-}
-
-.spinner {
-    width: 100px;
-    height: 100px;
-    border: 5px solid rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
-    border-top-color: var(--color-primary);
-    animation: spin 1s infinite linear;
-}
-
-#load {
-  display: flex;
-  justify-content: center;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-</style>

src/components/Dialog/ReportDialog.vue

@@ -1,75 +0,0 @@
-<template>
-  <div>
-    <Dialog
-      v-if="iVisible"
-      :destroy-on-close="true"
-      :show-cancel="false"
-      :show-confirm="false"
-      :title="$tc('Report')"
-      :visible.sync="iVisible"
-      top="35vh"
-      width="80%"
-      @close="loading=true"
-    >
-      <span v-if="loading" v-loading="loading" class="loading" />
-      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog/index.vue'
-
-export default {
-  name: 'ReportDialog',
-  components: {
-    Dialog
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    url: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      loading: true
-    }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-  mounted() {
-  },
-  beforeMount() {
-  },
-  methods: {
-    onIframeLoad() {
-      this.loading = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-iframe {
-  width: 100%;
-  height: 500px;
-}
-
-.loading {
-  margin-top: 20px;
-  display: block;
-}
-</style>

src/components/Dialog/Secret.vue

@@ -1,96 +0,0 @@
-<template>
-  <Dialog
-    :show-cancel="false"
-    :title="title"
-    :visible.sync="visible"
-    :close-on-click-modal="false"
-    width="700px"
-    @close="onClose"
-    @confirm="visible = false"
-  >
-    <el-alert type="warning" :closable="false">
-      {{ warningText }}
-      <div class="secret">
-        <div class="row">
-          <span class="col">ID:</span>
-          <span class="value">{{ keyInfo.id }}</span>
-          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
-        </div>
-        <div class="row">
-          <span class="col">Secret:</span>
-          <span class="value">{{ keyInfo.secret }}</span>
-          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
-        </div>
-      </div>
-    </el-alert>
-  </Dialog>
-</template>
-
-<script>
-import i18n from '@/i18n/i18n'
-import { copy } from '@/utils/common'
-import Dialog from '@/components/Dialog/index'
-
-export default {
-  name: 'Secret',
-  components: {
-    Dialog
-  },
-  props: {
-    title: {
-      type: String,
-      default: () => i18n.t('CreateAccessKey')
-    },
-    warningText: {
-      type: String,
-      default: () => i18n.t('ApiKeyWarning')
-    }
-  },
-  data() {
-    return {
-      keyInfo: { id: '', secret: '' },
-      visible: false
-    }
-  },
-  methods: {
-    show(data) {
-      this.keyInfo = data
-      this.visible = true
-    },
-    onClose() {
-      this.$emit('close')
-    },
-    handleCopy(value) {
-      copy(value)
-    }
-  }
-}
-
-</script>
-
-<style lang='scss' scoped>
- .secret {
-  color: #2b2f3a;
-  margin-top: 20px;
-}
-
-.row {
-  margin-bottom: 10px;
-}
-
-.col {
-  width: 100px;
-  text-align: left;
-  display: inline-block;
-}
-
-.copy-icon {
-  margin-left: 5px;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.value {
-  font-weight: 600;
-}
-</style>

src/components/Dialog/index.vue

@@ -2,7 +2,6 @@
   <transition name="dialog-fade">
     <el-dialog
       :append-to-body="true"
-      :class="{ shadow: shadow }"
       :modal-append-to-body="true"
       :title="title"
       :top="top"
@@ -11,16 +10,13 @@
       v-bind="$attrs"
       v-on="$listeners"
     >
-      <div v-loading="disabledStatus">
-        <slot />
-      </div>
-
+      <slot />
       <div v-if="showButtons" slot="footer" class="dialog-footer">
         <slot name="footer">
           <el-button v-if="showCancel && showButtons" size="small" @click="onCancel">{{ cancelTitle }}</el-button>
           <el-button
             v-if="showConfirm && showButtons"
-            :disabled="disabledStatus"
+            :loading="loadingStatus"
             size="small"
             type="primary"
             @click="onConfirm"
@@ -47,7 +43,7 @@ export default {
     },
     width: {
       type: String,
-      default: '800px'
+      default: '60%'
     },
     showConfirm: {
       type: Boolean,
@@ -73,17 +69,13 @@ export default {
       type: Boolean,
       default: true
     },
-    disabledStatus: {
+    loadingStatus: {
       type: Boolean,
       default: false
     },
     maxWidth: {
       type: String,
       default: '1200px'
-    },
-    shadow: {
-      type: Boolean,
-      default: true
     }
   },
   data() {
@@ -106,69 +98,58 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dialog.shadow ::v-deep .el-dialog {
-  box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
-}
-
-.dialog ::v-deep .el-dialog {
-  border-radius: 0.3em;
-  max-width: min(100vw, 1500px);
-
-  .form-group-header {
-    margin-left: 20px;
-  }
-
-  .el-form--label-top {
-    .form-group-header {
-      margin-left: 0;
-    }
-  }
-
-  .el-icon-circle-check {
-    display: none;
-  }
-
-  &__header {
-    box-sizing: border-box;
-    padding: 15px 22px;
-    border-bottom: 1px solid #dee2e6;
-    font-weight: 400;
-  }
-
-  &__body {
-    padding: 20px 30px;
-    font-size: 13px;
-
-    &:has(.el-table) {
-      background: #f3f3f4;
-    }
-  }
-
-  &__footer {
-    border-top: 1px solid #dee2e6;
-    padding: 16px 25px;
-    justify-content: flex-end;
-  }
-}
-
-@media (max-width: 900px) {
   .dialog ::v-deep .el-dialog {
-    max-width: calc(100% - 30px);
+    border-radius: 0.3em;
+    max-width: min(100vw, 1500px);
+
+    .form-group-header {
+      margin-left: 20px;
+    }
+
+    .el-icon-circle-check {
+      display: none;
+    }
+
+    &__header {
+      box-sizing: border-box;
+      padding: 15px 22px;
+      border-bottom: 1px solid #dee2e6;
+      font-weight: 400;
+    }
+
+    &__body {
+      padding: 20px 30px;
+
+      &:has(.el-table) {
+        background: #f3f3f4;
+      }
+    }
+
+    &__footer {
+      border-top: 1px solid #dee2e6;
+      padding: 16px 25px;
+      justify-content: flex-end;
+    }
   }
-}
 
-.dialog-footer ::v-deep button.el-button {
-  font-size: 13px;
-  padding: 8px 12px;
-}
+  @media (max-width: 900px) {
+    .dialog ::v-deep .el-dialog {
+      max-width: calc(100% - 30px);
+    }
+  }
 
-.dialog-fade-enter-active, .dialog-fade-leave-active {
-  transition: opacity 1s ease;
-}
+  .dialog-footer ::v-deep button.el-button {
+    font-size: 13px;
+    padding: 8px 12px;
+  }
 
-.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
-{
-  opacity: 0;
-}
+  .dialog-fade-enter-active, .dialog-fade-leave-active {
+    transition: opacity 1s ease;
+  }
+
+  .dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
+  {
+    opacity: 0;
+  }
 
 </style>

src/components/Drawer/index.vue

@@ -1,305 +0,0 @@
-<template>
-  <el-drawer
-    ref="drawer"
-    v-el-drawer-drag-width
-    :append-to-body="true"
-    :before-close="handleClose"
-    :class="['drawer', { 'drawer__no-footer': !hasFooter }]"
-    :modal="modal"
-    :size="size"
-    :title="title"
-    :visible.sync="iVisible"
-    custom-class="drawer"
-    destroy-on-close
-    direction="rtl"
-    v-on="$listeners"
-  >
-    <div class="drawer__content">
-      <slot name="default">
-        <component
-          :is="component"
-          v-if="component"
-          ref="dynamicComponent"
-          v-bind="componentProps"
-          v-on="componentListeners"
-        />
-      </slot>
-    </div>
-    <div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
-  </el-drawer>
-</template>
-
-<script>
-import { getDrawerWidth } from '@/utils/common'
-
-export default {
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    size: {
-      type: String,
-      default: () => {
-        return getDrawerWidth()
-      }
-    },
-    component: {
-      type: [String, Function, Object],
-      default: ''
-    },
-    componentProps: {
-      type: Object,
-      default: () => ({})
-    },
-    componentListeners: {
-      type: Object,
-      default: () => ({})
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    hasFooter: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      formLabelWidth: '80px'
-    }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    handleClose(done) {
-      this.$emit('close-drawer')
-      done()
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.drawer__no-footer {
-  ::v-deep {
-    .drawer {
-      .page {
-        height: calc(100vh - 55px);
-      }
-    }
-  }
-}
-
-@media (max-width: 992px) {
-  .drawer ::v-deep {
-    .el-form-item {
-      display: flex;
-      flex-direction: column;
-      gap: 0.3rem;
-    }
-  }
-}
-
-.drawer {
-  ::v-deep {
-    min-width: 565px;
-
-    .el-card__body {
-      padding-top: 10px;
-      padding-bottom: 20px;
-    }
-
-    .page-submenu {
-      .el-tabs__header {
-        padding: 0 15px;
-      }
-
-      .el-tabs__item.is-top {
-        padding: 0 10px;
-      }
-    }
-
-    .form-buttons {
-      margin-left: 13px;
-    }
-
-    .el-form {
-      margin-right: 1px;
-      padding-right: 15px;
-      height: 100%;
-
-      &.detail-card {
-        padding-right: 0;
-        margin-top: unset;
-      }
-
-      // Detail 中
-      &.content {
-        margin-right: 0;
-      }
-
-      .form-buttons {
-        //position: absolute;
-        // bottom: 13px;
-        // margin-left: 20%;
-        // margin-top: 0;
-      }
-
-      // Form 中的子 form
-      .el-form {
-        margin-left: 0;
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .el-form-item {
-        .el-form-item__label {
-          padding-right: 20px;
-        }
-
-        .el-radio {
-          line-height: 25px;
-          margin-right: 13px;
-
-          .el-radio__label {
-            padding-left: 5px;
-          }
-        }
-      }
-
-      &.el-form--label-top {
-        .el-radio-group {
-          .el-radio {
-            display: block;
-            padding-bottom: 3px;
-          }
-        }
-
-        .el-form-item {
-          padding-left: 12px;
-
-          .el-form-item__label {
-            padding: 0 20px 0 0;
-            line-height: 30px;
-          }
-
-          .sub-form {
-            margin-left: -1px;
-
-            .form-fields {
-              max-height: unset;
-            }
-          }
-        }
-
-        &.form-fields {
-          //overflow: auto;
-          //max-height: calc(100vh - 180px);
-        }
-
-        .el-checkbox-group {
-          .el-checkbox {
-            display: block;
-            padding-bottom: 3px;
-          }
-        }
-
-        .el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
-          display: inline-block; /* 更改为 inline-block */
-          //width: unset; /* 这个设置上去后，平台详情中， Automations 会有问题 */
-          vertical-align: bottom;
-        }
-
-        .el-form-item__content {
-          form {
-            .el-form-item {
-              padding-left: 0;
-            }
-          }
-        }
-      }
-
-      .form-group-header {
-        margin-left: 20px;
-      }
-    }
-
-    .el-drawer__header {
-      border-bottom: 1px solid #EBEEF5;
-      margin-bottom: 0;
-      padding: 15px 20px;
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--color-text-primary);
-    }
-
-    .sql.container {
-      display: none;
-    }
-
-    .page {
-      overflow-y: auto;
-
-      height: calc(100vh - 110px);
-
-      &.tab-page {
-        .page-content {
-          padding-right: 0;
-          padding-left: 0;
-        }
-      }
-
-      .page-content {
-        height: unset;
-        padding-right: 10px;
-        padding-left: 20px;
-
-        & > div {
-          margin-bottom: 1px;
-        }
-      }
-
-      .ibox {
-        margin-bottom: 10px;
-        border: none;
-      }
-    }
-
-    .drawer__content, .tab-page-content {
-      height: 100%;
-      background: #f3f3f3;
-    }
-
-    .drawer__footer {
-      border-top: solid 1px #f3f3f3;
-    }
-
-    //.el-drawer__header {
-    //  margin-bottom: 20px;
-    //
-    //  span {
-    //    font-size: 16px;
-    //    font-weight: 800;
-    //    color: var(--color-text-primary);
-    //  }
-    //}
-  }
-}
-</style>

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

@@ -85,7 +85,6 @@ export default {
         // 如果不想等，证明是 value 自己变化导致的， 需要重新渲染
         if (valJson !== this.formJson) {
           this.iValue = val
-          this.$log.debug('Sub form value changed, rerender form: ', this.formJson, valJson)
           this.loading = true
           setTimeout(() => {
             this.loading = false
@@ -96,12 +95,11 @@ export default {
     }
   },
   methods: {
-    outputValue: _.debounce(function(val) {
-      this.$emit('input', val)
-    }),
     updateValue(val) {
       this.iValue = val
-      this.outputValue(val)
+      setTimeout(() => {
+        this.$emit('input', val)
+      }, 100)
     },
     objectToString(obj) {
       let data = ''

src/components/Form/AutoDataForm/index.vue

@@ -1,27 +1,25 @@
 <template>
-  <div>
-    <DataForm
-      v-if="!loading"
-      ref="dataForm"
-      :fields="totalFields"
-      :form="iForm"
-      v-bind="$attrs"
-      v-on="$listeners"
+  <DataForm
+    v-if="!loading"
+    ref="dataForm"
+    :fields="totalFields"
+    :form="iForm"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <span
+      v-for="(group, i) in groups"
+      :key="'group-'+group.name"
+      :slot="'id:'+group.name"
     >
-      <template
-        v-for="(group, i) in groups"
-        :slot="'id:'+group.name"
-      >
-        <FormGroupHeader
-          v-if="!groupHidden(group, i)"
-          :key="'group-' + group.name"
-          :group="group"
-          :index="i"
-          :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
-        />
-      </template>
-    </DataForm>
-  </div>
+      <FormGroupHeader
+        v-if="!groupHidden(group, i)"
+        :group="group"
+        :index="i"
+        :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
+      />
+    </span>
+  </DataForm>
 </template>
 
 <script>
@@ -89,7 +87,6 @@ export default {
     }
   },
   mounted() {
-    // this.$log.debug('>>> Method: ', this.method)
     this.optionUrlMetaAndGenerateColumns()
   },
   methods: {
@@ -166,6 +163,5 @@ export default {
       return true
     }
   }
-
 }
 </script>

src/components/Form/AutoDataForm/utils.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
 import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
+import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot, toSentenceCase } from '@/utils/common'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
+import TransferSelect from '@/components/Form/FormFields/TransferSelect.vue'
 import i18n from '@/i18n/i18n'
 
 export class FormFieldGenerator {
@@ -63,9 +65,8 @@ export class FormFieldGenerator {
         }
         break
       case 'boolean':
-        type = 'checkbox'
-        // field.component = Switcher
-        // field.type = 'checkbox'
+        type = ''
+        field.component = Switcher
         break
       case 'list':
         type = 'input'
@@ -112,7 +113,7 @@ export class FormFieldGenerator {
     let nestedFields = fieldMeta.fields || []
     const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
     const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
-    if (nestedFields.toString() === '__all__') {
+    if (nestedFields === '__all__') {
       nestedFields = Object.keys(nestedFieldsRemoteMeta)
     }
     for (const name of nestedFields) {
@@ -134,6 +135,9 @@ export class FormFieldGenerator {
       case 'comment':
         field.el.type = 'textarea'
         break
+      case 'users':
+        field.component = TransferSelect
+        field.el.label = field.label
     }
     return field
   }
@@ -193,24 +197,6 @@ export class FormFieldGenerator {
     return field
   }
 
-  setChoicesTips(field, fieldMeta, fieldRemoteMeta) {
-    // 设置 checkbox 的 tips
-    if (['checkbox-group', 'radio-group'].indexOf(field.type) !== -1) {
-      field.options.map(option => {
-        if (!option.tip && field.tips) {
-          option.tip = field.tips[option.value]
-        }
-        if (!option.tip) {
-          const match = option.label.match(/^(.+?)\s*\((.*?)\)$/)
-          if (match) {
-            option.label = match[1]
-            option.tip = match[2]
-          }
-        }
-      })
-    }
-  }
-
   afterGenerateField(field) {
     field.label = toSentenceCase(field.label)
 
@@ -218,7 +204,15 @@ export class FormFieldGenerator {
       field.el.placeholder = field.placeholder
     }
 
-    this.setChoicesTips(field)
+    // 设置 checkbox 的 tips
+    if (field.tips && ['checkbox-group', 'radio-group'].indexOf(field.type) !== -1) {
+      field.options.map(option => {
+        if (!option.tip && field.tips[option.value]) {
+          option.tip = field.tips[option.value]
+        }
+      })
+    }
+
     return field
   }
 

src/components/Form/CronTab/Crontab.vue

@@ -361,10 +361,9 @@ export default {
     },
     // 填充表达式
     submitFill() {
-      const minMinutes = 60
       const crontabDiffMin = this.crontabDiff / 1000 / 60
-      if (crontabDiffMin > 0 && crontabDiffMin < minMinutes) {
-        const msg = this.$t('CrontabDiffError', { minutes: minMinutes })
+      if (crontabDiffMin > 0 && crontabDiffMin < 10) {
+        const msg = this.$tc('CrontabDiffError')
         this.$message.error(msg)
         return
       }

src/components/Form/CronTab/index.vue

@@ -39,13 +39,6 @@ export default {
       showCron: false
     }
   },
-  watch: {
-    value: {
-      handler(val) {
-        this.crontabFill(val)
-      }
-    }
-  },
   methods: {
     crontabFill(value) {
       // 确定后回传的值

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

@@ -8,21 +8,18 @@
     v-bind="data.attrs"
   >
     <template v-if="data.label" #label>
-      <span :title="data.label">
-        <span v-if="data.required">* </span>
-        {{ data.label }}
-        <el-tooltip
-          v-if="data.helpTip"
-          :open-delay="500"
-          :tabindex="-1"
-          effect="dark"
-          placement="right"
-          popper-class="help-tips"
-        >
-          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
-          <i class="fa fa-question-circle-o help-tip-icon" />
-        </el-tooltip>
-      </span>
+      <span>{{ data.label }}</span>
+      <el-tooltip
+        v-if="data.helpTip"
+        :open-delay="500"
+        :tabindex="-1"
+        effect="dark"
+        placement="right"
+        popper-class="help-tips"
+      >
+        <div slot="content" v-sanitize="data.helpTip" /> <!-- Noncompliant -->
+        <i class="fa fa-question-circle-o help-tip-icon" />
+      </el-tooltip>
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -74,7 +71,6 @@
           <el-tooltip v-if="opt.tip" :content="opt.tip" :open-delay="500" placement="top">
             <i class="el-icon-warning-outline" />
           </el-tooltip>
-          <span v-if="data.helpText">{{ data.helpText }}</span>
         </el-checkbox>
         <!-- WARNING: radio 用 label 属性来表示 value 的含义 -->
         <!-- FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
@@ -91,7 +87,7 @@
         </el-radio>
       </template>
     </custom-component>
-    <div v-if="data.helpText" :class="data.type" class="help-block">
+    <div v-if="data.helpText" class="help-block">
       <el-alert
         v-if="data.helpText.startsWith('!')"
         :closable="false"
@@ -103,9 +99,6 @@
       </el-alert>
       <span v-else v-sanitize="data.helpText" />
     </div>
-    <div v-if="data.helpTextFormatter" class="help-block">
-      <RenderHelpTextSafe :render-content="data.helpTextFormatter" />
-    </div>
   </el-form-item>
 </template>
 <script>
@@ -128,18 +121,6 @@ function validator(data) {
 
 export default {
   components: {
-    RenderHelpTextSafe: {
-      functional: true,
-      props: {
-        renderContent: {
-          type: Function,
-          required: true
-        }
-      },
-      render(h, { props }) {
-        return props.renderContent()
-      }
-    },
     /**
      * 🐂🍺只需要有组件选项对象，就可以立刻包装成函数式组件在 template 中使用
      * FYI: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6
@@ -334,10 +315,6 @@ export default {
   ::v-deep .el-alert__icon {
     font-size: 16px
   }
-
-  &.checkbox {
-    //display: inline;
-  }
 }
 
 .help-tip-icon {
@@ -345,9 +322,4 @@ export default {
     cursor: pointer;
   }
 }
-
-.help-tip-content {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
 </style>

src/components/Form/DataForm/index.vue

@@ -1,71 +1,65 @@
 <template>
-  <div>
-    <ElFormRender
-      :id="id"
-      ref="form"
-      :class="[mobile ? 'mobile' : 'desktop']"
-      :content="fields"
-      :form="basicForm"
-      :label-position="iLabelPosition"
-      class="form-fields"
-      label-width="25%"
-      v-bind="$attrs"
-      v-on="$listeners"
-    >
-      <!-- slot 透传 -->
-      <slot
-        v-for="item in fields"
-        :slot="`id:${item.id}`"
-        :name="`id:${item.id}`"
-      />
-      <slot
-        v-for="item in fields"
-        :slot="`$id:${item.id}`"
-        :name="`$id:${item.id}`"
-      />
+  <ElFormRender
+    :id="id"
+    ref="form"
+    :class="mobile ? 'mobile' : 'desktop'"
+    :content="fields"
+    :form="basicForm"
+    :label-position="labelPosition"
+    label-width="25%"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <!-- slot 透传 -->
+    <slot
+      v-for="item in fields"
+      :slot="`id:${item.id}`"
+      :name="`id:${item.id}`"
+    />
+    <slot
+      v-for="item in fields"
+      :slot="`$id:${item.id}`"
+      :name="`$id:${item.id}`"
+    />
 
-      <div v-if="hasButtons" class="form-buttons">
-        <el-button
-          v-if="defaultButton"
-          :disabled="!canSubmit"
-          :loading="isSubmitting"
-          :size="submitBtnSize"
-          type="primary"
-          @click="submitForm('form')"
-        >
-          {{ iSubmitBtnText }}
-        </el-button>
-
-        <el-button
-          v-if="defaultButton && hasSaveContinue"
-          size="small"
-          @click="submitForm('form', true)"
-        >
-          {{ $t("SaveAndAddAnother") }}
-        </el-button>
-
-        <el-button
-          v-if="defaultButton && hasReset"
-          size="small"
-          @click="resetForm('form')"
-        >
-          {{ $t("Reset") }}
-        </el-button>
-
-        <el-button
-          v-for="button in moreButtons"
-          v-show="!button.hidden"
-          :key="button.title"
-          :loading="button.loading"
-          size="small"
-          v-bind="button"
-          @click="handleClick(button)"
-        >
-          {{ button.title }}
-        </el-button>
-      </div>
-    </ElFormRender>
-  </div>
+    <el-form-item v-if="hasButtons" class="form-buttons">
+      <el-button
+        v-if="defaultButton"
+        :disabled="!canSubmit"
+        :loading="isSubmitting"
+        :size="submitBtnSize"
+        type="primary"
+        @click="submitForm('form')"
+      >
+        {{ iSubmitBtnText }}
+      </el-button>
+      <el-button
+        v-if="defaultButton && hasSaveContinue"
+        size="small"
+        @click="submitForm('form', true)"
+      >
+        {{ $t("SaveAndAddAnother") }}
+      </el-button>
+      <el-button
+        v-if="defaultButton && hasReset"
+        size="small"
+        @click="resetForm('form')"
+      >
+        {{ $t("Reset") }}
+      </el-button>
+      <el-button
+        v-for="button in moreButtons"
+        v-show="!button.hidden"
+        :key="button.title"
+        :loading="button.loading"
+        size="small"
+        v-bind="button"
+        @click="handleClick(button)"
+      >
+        {{ button.title }}
+      </el-button>
+    </el-form-item>
+  </ElFormRender>
 </template>
 
 <script>
@@ -124,10 +118,6 @@ export default {
     isSubmitting: {
       type: Boolean,
       default: false
-    },
-    labelPosition: {
-      type: String,
-      default: ''
     }
   },
   data() {
@@ -144,17 +134,7 @@ export default {
     mobile() {
       return this.$store.state.app.device === 'mobile'
     },
-    drawer() {
-      return this.$store.state.common.inDrawer
-    },
-    iLabelPosition() {
-      if (this.labelPosition) {
-        return this.labelPosition
-      }
-      // if (this.drawer) {
-      //   return 'left'
-      // }
-      // return this.drawer || this.mobile ? 'top' : 'right'
+    labelPosition() {
       return this.mobile ? 'top' : 'right'
     }
   },
@@ -228,38 +208,21 @@ export default {
     color: var(--color-text-primary);
   }
 
-  &.label-top {
-    ::v-deep .el-form-item {
-      .el-form-item__content {
-        width: 100%;
-      }
-    }
-  }
-
   ::v-deep .el-form-item {
     margin-bottom: 10px;
 
+    .item-params {
+      margin-top: 0;
+    }
+
     .el-form-item__label {
       padding: 0 30px 0 0;
       line-height: 30px;
       color: var(--color-text-primary);
 
-      span {
-        display: unset;
-      }
-
       i {
         color: var(--color-icon-primary);
       }
-
-      span {
-        max-width: calc(100% - 25px);
-        //white-space: nowrap; /* 禁止换行 */
-        //text-overflow: ellipsis;
-        overflow: hidden;
-        display: inline-block;
-        line-height: 16px;
-      }
     }
 
     .el-form-item__content {
@@ -335,9 +298,8 @@ export default {
     }
   }
 
-  ::v-deep .form-buttons {
-    margin-top: 30px;
-    margin-left: 25%;
+  ::v-deep .el-form-item.form-buttons {
+    margin-top: 20px;
   }
 }
 

src/components/Form/FormFields/AttrInput.vue

@@ -27,9 +27,7 @@ export default {
     },
     beforeSubmit: {
       type: Function,
-      default: (val) => {
-        return true
-      }
+      default: (val) => { return true }
     }
   },
   data() {
@@ -52,16 +50,14 @@ export default {
 ::v-deep .el-select {
   width: 100%;
 }
-
 ::v-deep .el-form-item__content {
   width: 100% !important;
 }
-
 ::v-deep .form-buttons {
   margin: 0 !important;
 }
-
 .attr-input {
+  margin-top: -10px;
 }
 </style>
 

src/components/Form/FormFields/BasicTree.vue

@@ -47,9 +47,6 @@ export default {
   },
   computed: {
     iValue() {
-      if (!this.value) {
-        return []
-      }
       return this.value.map(item => {
         if (item.value) {
           return item.value
@@ -118,73 +115,6 @@ export default {
     color: #999;
   }
 
-  .el-tree > .el-tree-node:after {
-    border-top: none;
-  }
-
-  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
-  .el-tree-node__expand-icon.is-leaf {
-    display: none;
-  }
-
-  .el-tree > .el-tree-node:before {
-    border-left: none;
-    display: none;
-  }
-
-  .el-tree > .el-tree-node:after {
-    border-top: none;
-    display: none;
-  }
-
-  .el-tree-node__children {
-    padding-left: 13px;
-
-    .el-tree-node {
-      position: relative;
-      padding-left: 13px;
-
-      &:before {
-        content: "";
-        left: -4px;
-        position: absolute;
-        right: auto;
-        border-width: 1px;
-      }
-
-      &:first-child::before {
-        display: none;
-      }
-
-      &:last-child:before {
-        height: 38px;
-      }
-
-      &:before {
-        border-left: 1px dashed #dcdcdc;
-        bottom: 0;
-        height: 100%;
-        top: -26px;
-        width: 1px;
-      }
-
-      &:after {
-        content: "";
-        left: -4px;
-        position: absolute;
-        right: auto;
-        border-width: 1px;
-      }
-
-      &:after {
-        border-top: 1px dashed #dcdcdc;
-        height: 20px;
-        top: 12px;
-        width: 24px;
-      }
-    }
-  }
-
   .el-tree-node__content:hover {
     background-color: transparent;
   }
@@ -199,7 +129,7 @@ export default {
     }
 
     .el-tree-node__children {
-      //margin-left: -25px;
+      margin-left: -25px;
     }
   }
 }

src/components/Form/FormFields/CodeEditor.vue

@@ -8,118 +8,99 @@
           :label="item.name"
           :prop="item.name"
         >
-
           <template v-if="item.type === 'button' && !item.isVisible">
-            <el-tooltip :disabled="!item.tip" :content="item.tip">
-              <el-button
-                :type="item.el && item.el.type"
-                class="start-stop-btn"
-                size="mini"
-                @click="item.callback()"
-              >
-                <i :class="item.icon" />
-
-                {{ item.name }}
-              </el-button>
-            </el-tooltip>
+            <el-button
+              :type="item.el && item.el.type"
+              class="start-stop-btn"
+              size="mini"
+              @click="item.callback()"
+            >
+              <i :class="item.icon" />{{ item.name }}
+            </el-button>
           </template>
-
           <template v-if="item.type === 'input' && item.el && item.el.autoComplete">
-            <el-tooltip :disabled="!item.tip" :content="item.tip">
-              <el-autocomplete
-                v-model="formModel[item.name]"
-                :fetch-suggestions="item.el.query"
-                :placeholder="item.placeholder"
-                class="inline-input"
-                size="mini"
-                clearable
-                @change="handleInputChange(item)"
-                @select="handleInputChange(item)"
-              />
-            </el-tooltip>
+            <el-autocomplete
+              v-model="formModel[item.name]"
+              :fetch-suggestions="item.el.query"
+              :placeholder="item.placeholder"
+              class="inline-input"
+              size="mini"
+              @change="handleInputChange(item)"
+              @select="handleInputChange(item)"
+            />
           </template>
-
           <template v-else-if="item.type === 'input'">
-            <el-tooltip :disabled="!item.tip" :content="item.tip">
-              <el-input
-                v-model="formModel[item.name]"
-                :class="!isFold ? 'special-style' : ''"
-                :placeholder="item.placeholder"
-                class="inline-input"
-                size="mini"
-                @change="item.callback(formModel[item.name])"
-              />
-            </el-tooltip>
+            <el-input
+              v-model="formModel[item.name]"
+              :class="!isFold ? 'special-style' : ''"
+              :placeholder="item.placeholder"
+              class="inline-input"
+              size="mini"
+              @change="item.callback(formModel[item.name])"
+            />
           </template>
 
           <template v-if="item.type === 'select' && item.el && item.el.create">
-            <el-tooltip :disabled="!item.tip" :content="item.tip">
-              <span class="filter-label">{{ item.name }}:</span>
-              <el-select
-                v-if="item.type === 'select' && item.el && item.el.create"
-                :key="index"
-                v-model="formModel[item.name]"
-                :allow-create="item.el.create || false"
-                :filterable="item.el.create || false"
-                :multiple="item.el.multiple"
-                :placeholder="item.name"
-                class="autoWidth-select"
-                default-first-option
-                size="mini"
-                @change="item.callback(item.value)"
-              >
-                <template slot="prefix">{{ item.label + ':' + item.value }}</template>
-                <el-option
-                  v-for="(option, id) in item.options"
-                  :key="id"
-                  :label="option.label"
-                  :title="option.value"
-                  :value="option.value"
-                />
-              </el-select>
-            </el-tooltip>
+            <span class="filter-label">{{ item.name }}:</span>
+            <el-select
+              v-if="item.type === 'select' && item.el && item.el.create"
+              :key="index"
+              v-model="formModel[item.name]"
+              :allow-create="item.el.create || false"
+              :filterable="item.el.create || false"
+              :multiple="item.el.multiple"
+              :placeholder="item.name"
+              class="autoWidth-select"
+              default-first-option
+              size="mini"
+              @change="item.callback(item.value)"
+            >
+              <template slot="prefix">{{ item.label + ':' + item.value }}</template>
+              <el-option
+                v-for="(option, id) in item.options"
+                :key="id"
+                :label="option.label"
+                :title="option.value"
+                :value="option.value"
+              />
+            </el-select>
           </template>
 
           <template v-if="item.type === 'select' && (!item.el || !item.el.create)">
-            <el-tooltip :disabled="!item.tip" :content="item.tip">
-              <el-dropdown
-                class="select-dropdown"
-                trigger="click"
-                @command="(command) => {
-                  item.value = command
-                  item.callback(command)
-                }"
-              >
-                <el-button size="mini" type="primary">
-                  <div class="text-content">
-                    <span class="content">
-                      {{ getLabel(item.value, item.options) }}
-                      <i class="el-icon-arrow-down el-icon--right" />
-                    </span>
-                  </div>
-                </el-button>
-                <el-dropdown-menu v-slot="dropdown">
-                  <el-dropdown-item
-                    v-for="(option, i) in item.options"
-                    :key="i"
-                    :command="option.value"
-                  >
-                    {{ option.label }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </el-tooltip>
+            <el-dropdown
+              class="select-dropdown"
+              trigger="click"
+              @command="(command) => {
+                item.value = command
+                item.callback(command)
+              }"
+            >
+              <el-button size="mini" type="primary">
+                <div class="text-content">
+                  <span class="content">
+                    {{ getLabel(item.value, item.options) }}
+                    <i class="el-icon-arrow-down el-icon--right" />
+                  </span>
+                </div>
+              </el-button>
+              <el-dropdown-menu v-slot="dropdown">
+                <el-dropdown-item
+                  v-for="(option, i) in item.options"
+                  :key="i"
+                  :command="option.value"
+                >
+                  {{ option.label }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </template>
-
           <template v-if="item.type === 'switch'">
-            <el-tooltip :disabled="!item.tip" :content="item.tip">
-              <el-switch
-                v-model="formModel[item.name]"
-                :active-text="item.name"
-                :disabled="item.disabled"
-                @change="item.callback(formModel[item.name])"
-              />
-            </el-tooltip>
+            <el-switch
+              v-model="formModel[item.name]"
+              :active-text="item.name"
+              :disabled="item.disabled"
+              @change="item.callback(formModel[item.name])"
+            />
           </template>
         </el-form-item>
         <div
@@ -153,13 +134,7 @@
         </div>
       </div>
     </el-form>
-    <codemirror
-      ref="myCm"
-      v-model="iValue"
-      :options="iOptions"
-      class="editor"
-      :style="iActions.length > 0 ? { marginLeft: '30px' } : {}"
-    />
+    <codemirror ref="myCm" v-model="iValue" :options="iOptions" class="editor" />
   </div>
 </template>
 
@@ -233,7 +208,7 @@ export default {
 
       Object.values(actionsObj).forEach(action => {
         if (action.name === this.$t('RunAs') && action.type === 'input') {
-          rules[action.name] = [{ required: true, message: this.$t('RequiredRunas'), trigger: 'blur' }]
+          rules[action.name] = [{ required: true, message: '请输入运行用户', trigger: 'blur' }]
         }
       })
 
@@ -245,7 +220,7 @@ export default {
       },
       set(val) {
         this.$emit('update:value', val)
-        this.$emit('input', val)
+        this.$emit('change', val)
       }
     },
     iOptions() {
@@ -398,6 +373,7 @@ $input-border-color: #C0C4CC;
   }
 
   .editor {
+    margin-left: 30px;
     border: 1px solid var(--color-border);
     overflow: hidden;
   }

src/components/Form/FormFields/DatetimeRangePicker.vue

@@ -5,11 +5,11 @@
     :default-time="['00:00:01', '23:59:59']"
     :end-placeholder="$tc('DateEnd')"
     :picker-options="pickerOptions"
+    :range-separator="$tc('To')"
     :start-placeholder="$tc('DateStart')"
-    :type="type"
     class="datepicker"
-    range-separator="-"
     size="small"
+    type="datetimerange"
     v-bind="$attrs"
     @change="handleDateChange"
     v-on="$listeners"
@@ -28,15 +28,6 @@ export default {
     dateEnd: {
       type: [Number, String, Date],
       default: null
-    },
-    type: {
-      type: String,
-      default: 'daterange'
-      // default: 'datetimerange'
-    },
-    toMinMax: {
-      type: Boolean,
-      default: true
     }
   },
   data() {
@@ -44,10 +35,6 @@ export default {
     const endValue = this.dateEnd || this.$route.query['date_end']
     const dateStart = new Date(startValue)
     const dateTo = new Date(endValue)
-    if (this.toMinMax) {
-      dateStart.setHours(0, 0, 0, 0)
-      dateTo.setHours(23, 59, 59, 999)
-    }
     return {
       value: [dateStart, dateTo],
       pickerOptions: {
@@ -87,13 +74,9 @@ export default {
       }
     },
     onShortcutClick(picker, day) {
-      let start = new Date()
-      let end = new Date()
+      const end = new Date()
+      const start = new Date()
       start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
-      if (this.toMinMax) {
-        start = new Date(start.setHours(0, 0, 0, 0))
-        end = new Date(end.setHours(23, 59, 59, 999))
-      }
       picker.$emit('pick', [start, end])
     }
   }
@@ -101,18 +84,9 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-html:lang(pt-br) {
-  .datepicker ::v-deep .el-range-separator {
-    padding: 0 10px;
-  }
-}
-
 .datepicker {
-  &.el-date-editor--daterange.el-input__inner {
-    width: 243px;
-  }
-
   margin-left: 10px;
+  width: 233px;
   border: 1px solid #dcdee2;
   border-radius: 2px;
   height: 28px;

src/components/Form/FormFields/InputWithUnit.vue

@@ -15,7 +15,6 @@ export default {
   },
   data() {
     return {
-      defaultValue: 24,
       displayMapper: {
         'second': this.$t('Second'), // 'sec' is the default value of 'unit
         'min': this.$t('Minute'), // 'min' is the default value of 'unit

src/components/Form/FormFields/PasswordInput.vue

@@ -5,9 +5,7 @@
     v-bind="iAttrs"
     @input="handleInput"
     v-on="$listeners"
-  >
-    hello
-  </Password>
+  />
 </template>
 
 <script>

src/components/Form/FormFields/PasswordRule.vue

@@ -48,29 +48,28 @@ export default {
             type: 'input-number',
             el: {
               min: 8,
-              max: 36,
-              size: 'mini'
+              max: 30
             }
           },
           {
             id: 'uppercase',
             label: this.$t('Uppercase'),
-            type: 'checkbox'
+            type: 'switch'
           },
           {
             id: 'lowercase',
             label: this.$t('Lowercase'),
-            type: 'checkbox'
+            type: 'switch'
           },
           {
             id: 'digit',
             label: this.$t('Digit'),
-            type: 'checkbox'
+            type: 'switch'
           },
           {
             id: 'symbol',
             label: this.$t('SpecialSymbol'),
-            type: 'checkbox'
+            type: 'switch'
           },
           {
             id: 'exclude_symbols',

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

@@ -3,7 +3,6 @@
     v-if="$attrs.visible"
     :close-on-click-modal="false"
     :destroy-on-close="true"
-    :modal="false"
     :show-cancel="false"
     :show-confirm="false"
     :title="$tc('PlatformProtocolConfig') + '：' + protocol.name"

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="showSetting ? 'show-setting' : 'hide-setting'">
+  <div v-if="!loading" :class="showSetting ? 'show-setting' : 'hide-setting'">
     <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
       <el-input
         v-model="item.port"
@@ -114,7 +114,8 @@ export default {
       name: '',
       items: [],
       currentProtocol: {},
-      showDialog: false
+      showDialog: false,
+      loading: false
     }
   },
   computed: {
@@ -143,8 +144,10 @@ export default {
   watch: {
     choices: {
       handler(value, oldValue) {
+        this.loading = true
         setTimeout(() => {
           this.setDefaultItems(value)
+          this.loading = false
         },)
       },
       deep: true,

src/components/Form/FormFields/Select2.vue

@@ -125,19 +125,16 @@ export default {
     allowCreate: {
       type: Boolean,
       default: false
-    },
-    defaultPageSize: {
-      type: Number,
-      default: 10
     }
   },
   data() {
     const vm = this
+    const defaultPageSize = 10
     const defaultParams = {
       search: '',
       page: 1,
       hasMore: true,
-      pageSize: vm.defaultPageSize
+      pageSize: defaultPageSize
     }
     // 设置axios全局报错提示不显示
     const validateStatus = (status) => {
@@ -197,6 +194,7 @@ export default {
       }
     },
     iAjax() {
+      const defaultPageSize = 10
       const defaultMakeParams = (params) => {
         const page = params.page || 1
         const offset = (page - 1) * params.pageSize
@@ -239,7 +237,7 @@ export default {
       }
       const defaultAjax = {
         url: '',
-        pageSize: this.defaultPageSize,
+        pageSize: defaultPageSize,
         makeParams: defaultMakeParams,
         transformOption: defaultTransformOption,
         processResults: defaultProcessResults,

src/components/Form/FormFields/TagInput.vue

@@ -151,7 +151,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  //padding: 0 6px;
+  padding: 1px 2px 1px;
   border: 1px solid #dcdee2;
   border-radius: 1px;
   background-color: #fff;
@@ -162,9 +162,8 @@ export default {
   }
 
   & ::v-deep .el-tag {
-    margin-bottom: 1px;
+    margin-top: 1px;
     font-family: sans-serif !important;
-    margin-left: 5px;
   }
 
   & ::v-deep .el-autocomplete {
@@ -178,8 +177,7 @@ export default {
   & ::v-deep .el-input__inner {
     max-width: 100%;
     border: none;
-    padding-left: 12px;
-    height: 28px;
+    padding-left: 10px;
   }
 }
 
@@ -189,7 +187,7 @@ export default {
 }
 
 .filter-field ::v-deep .el-input__inner {
-  height: 28px !important;
+  height: 28px;
 }
 
 .show-password {

src/components/Form/FormFields/TransferSelect.vue

@@ -14,12 +14,10 @@
       :close-on-click-modal="false"
       :title="label"
       :visible.sync="showTransfer"
-      :disabled-status="!isLoaded"
       class="the-dialog"
       width="730px"
       @cancel="handleTransCancel"
       @confirm="handleTransConfirm"
-      v-on="$listeners"
     >
       <krryPaging v-if="selectInitialized" ref="pageTransfer" class="transfer" v-bind="pagingTransfer" />
     </Dialog>
@@ -79,16 +77,13 @@ export default {
       if (keyword) {
         params['search'] = keyword
       }
-      this.isLoaded = false
       const data = await this.$axios.get(url, { params })
-      this.isLoaded = true
       return data['results'].map(item => {
         const n = transformOption(item)
         return { id: n.value, label: n.label }
       })
     }
     return {
-      isLoaded: false,
       showTransfer: false,
       selectInitialized: false,
       select2: {
@@ -172,3 +167,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/Form/FormFields/UpdateToken.vue

@@ -1,27 +1,21 @@
 <template>
-  <div class="update-token">
+  <div>
     <el-button v-show="!isShow" icon="el-icon-edit" type="text" @click="isShow=true">
       {{ text }}
     </el-button>
     <el-input
       v-show="isShow"
       v-model.trim="curValue"
-      :disabled="disabled"
       :placeholder="placeholder"
       :type="type"
-      class="password-input"
+      autocomplete="new-password"
       show-password
       @change="onChange"
     />
-    <el-button :disabled="disabled" size="small" type="text" @click="randomPassword">
-      <i class="fa fa-refresh" />
-    </el-button>
   </div>
 </template>
 
 <script>
-import { randomString } from '@/utils/string'
-
 export default {
   props: {
     value: {
@@ -45,10 +39,6 @@ export default {
     placeholder: {
       type: String,
       default: () => ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
@@ -65,24 +55,7 @@ export default {
   methods: {
     onChange(e) {
       this.$emit('input', this.curValue)
-    },
-    randomPassword() {
-      this.curValue = randomString(24, true)
-      this.$emit('input', this.curValue)
     }
   }
 }
 </script>
-<style lang='scss' scoped>
-.password-input {
-  width: calc(100% - 50px);
-}
-
-.update-token {
-  i {
-    color: var(--color-text-secondary);
-    font-size: 14px;
-  }
-}
-
-</style>

src/components/Form/FormFields/UploadField.vue

@@ -8,11 +8,8 @@
     <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
     <input v-model="value" hidden type="text" v-on="$listeners">
     <div>
-      <img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
+      <img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
     </div>
-    <el-button v-if="fileName" size="mini" type="danger" @click.native.stop="resetUpload">
-      {{ this.$t('Cancel') }}
-    </el-button>
   </div>
 </template>
 
@@ -58,29 +55,21 @@ export default {
     },
     Onchange(e) {
       const upLoadFile = e.target.files[0]
-
       if (upLoadFile === undefined) {
+        this.$emit('input', this.initial)
         return
       }
-
       this.fileName = upLoadFile?.name || ''
       this.$emit('fileChange', upLoadFile)
       this.$emit('input', this.getObjectURL(upLoadFile))
     },
-    resetUpload() {
-      this.fileName = ''
-      this.preview = ''
-      this.$refs.upLoadFile.value = ''
-      this.$emit('input', '')
-      this.$emit('fileChange', null)
-    },
     getObjectURL(file) {
       let url = null
-      if (window.createObjectURL !== undefined) {
+      if (window.createObjectURL !== undefined) { // basic
         url = window.createObjectURL(file)
-      } else if (window.URL !== undefined) {
+      } else if (window.URL !== undefined) { // mozilla(firefox)
         url = window.URL.createObjectURL(file)
-      } else if (window.webkitURL !== undefined) {
+      } else if (window.webkitURL !== undefined) { // webkit or chrome
         url = window.webkitURL.createObjectURL(file)
       }
       return url

src/components/Form/FormFields/UserPassword.vue

@@ -42,7 +42,7 @@ export default {
         patterns.push([/\d/, i18n.t('NUMBER_REQUIRED')])
       }
       if (passwordRule['SECURITY_PASSWORD_SPECIAL_CHAR']) {
-        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？_+-]")
+        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
         patterns.push([pattern, i18n.t('SPECIAL_CHAR_REQUIRED')])
       }
       for (const [pattern, msg] of patterns) {