perf: Update Dockerfile with new base image tag

feat: add oracle port

.env.development.example

@@ -22,4 +22,6 @@ VUE_APP_LOGOUT_PATH = '/core/auth/logout/'
 # Dev server for core proxy
 VUE_APP_CORE_HOST = 'http://localhost:8080'
 VUE_APP_CORE_WS = 'ws://localhost:8080'
+VUE_APP_KOKO_HOST = 'http://localhost:5000'
+VUE_APP_KOKO_WS = 'ws://localhost:5000'
 VUE_APP_ENV = 'development'

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

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

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

@@ -1,32 +0,0 @@
-name: "Run Build Test"
-on:
-  push:
-    branches:
-      - pr@*
-      - repr@*
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-
-    - uses: docker/setup-qemu-action@v2
-
-    - uses: docker/setup-buildx-action@v2
-
-    - uses: docker/build-push-action@v3
-      with:
-        context: .
-        push: false
-        tags: jumpserver/lina:test
-        file: Dockerfile
-        cache-from: type=gha
-        cache-to: type=gha,mode=max
-
-    - uses: LouisBrunner/checks-action@v1.5.0
-      if: always()
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
-        name: Check Build
-        conclusion: ${{ job.status }}

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

@@ -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-generic-action-handler.yml

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

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

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

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

.gitignore

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

Dockerfile

@@ -1,24 +1,14 @@
-FROM node:14.16 as stage-build
-ARG TARGETARCH
-ARG NPM_REGISTRY="https://registry.npmmirror.com"
-
-WORKDIR /data
-
-RUN set -ex \
-    && npm config set registry ${NPM_REGISTRY} \
-    && yarn config set registry ${NPM_REGISTRY}
-
-ADD package.json yarn.lock /data
-RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lina \
-    yarn install
+FROM jumpserver/lina-base:20250408_112930 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION
+
 ADD . /data
-RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lina \
-    sed -i "s@<strong> version-dev </strong>@<strong> ${VERSION} </strong>@g" src/layout/components/NavHeader/About.vue \
+
+RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked \
+    sed -i "s@version-dev@${VERSION}@g" src/layout/components/NavHeader/About.vue \
     && yarn build
 
-FROM nginx:alpine
+FROM nginx:1.24-bullseye
 COPY --from=stage-build /data/lina /opt/lina
 COPY nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile-base

@@ -0,0 +1,22 @@
+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,5 +5,6 @@
         "@/*": ["src/*"]
     }
   },
+  "include": ["src"],
   "exclude": ["node_modules", "dist"]
 }

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "vue-admin-template",
-  "version": "4.2.1",
-  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
-  "author": "Pan <panfree23@gmail.com>",
-  "license": "MIT",
+  "name": "lina",
+  "version": "v4.0.0",
+  "description": "JumpServer Web UI",
+  "author": "JumpServer Team <support@lxware.hk>",
+  "license": "GPL-3.0-or-later",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "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",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
@@ -20,26 +20,31 @@
     "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
     "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
     "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
-    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja",
-    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja"
+    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@fontsource/open-sans": "^5.0.24",
+    "@traptitech/markdown-it-katex": "^3.6.0",
     "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.21.1",
+    "axios": "0.28.0",
     "axios-retry": "^3.1.9",
+    "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",
-    "echarts": "^4.7.0",
-    "element-ui": "2.13.2",
+    "dompurify": "^3.1.6",
+    "echarts": "4.7.0",
+    "element-ui": "2.15.14",
     "eslint-plugin-html": "^6.0.0",
+    "highlight.js": "^11.9.0",
     "install": "^0.13.0",
     "jquery": "^3.6.1",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.2.1",
-    "krry-transfer": "^1.7.3",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.21",
@@ -54,12 +59,15 @@
     "lodash.set": "^4.3.2",
     "lodash.topairs": "^4.3.0",
     "lodash.values": "^4.3.0",
+    "markdown-it": "^13.0.2",
+    "markdown-it-link-attributes": "^4.0.1",
     "moment": "^2.29.4",
     "moment-parseformat": "^4.0.0",
     "normalize.css": "7.0.0",
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
-    "path-to-regexp": "2.4.0",
+    "path-to-regexp": "3.3.0",
+    "v-sanitize": "^0.0.13",
     "vue": "2.6.10",
     "vue-codemirror": "4.0.6",
     "vue-cookie": "^1.1.4",
@@ -73,13 +81,14 @@
     "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",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0",
+    "@babel/core": "7.18.6",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
@@ -93,6 +102,7 @@
     "chalk": "2.4.2",
     "compression-webpack-plugin": "^6.1.1",
     "connect": "3.6.6",
+    "deasync": "^0.1.29",
     "element-theme-chalk": "^2.13.1",
     "eslint": "^5.15.3",
     "eslint-plugin-vue": "5.2.2",
@@ -108,7 +118,8 @@
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
-    "serve-static": "^1.13.2",
+    "serve-static": "^1.16.0",
+    "strip-ansi": "^7.1.0",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",
@@ -132,5 +143,6 @@
     "src/**/*.{js,vue}": [
       "eslint --fix"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

public/index.html

@@ -1,35 +1,90 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta http-equiv="Expires" content="0">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Cache-control" content="no-cache">
-    <meta http-equiv="Cache" content="no-cache">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta content="0" http-equiv="Expires">
+    <meta content="no-cache" http-equiv="Pragma">
+    <meta content="no-cache" http-equiv="Cache-control">
+    <meta content="no-cache" http-equiv="Cache">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <title><%= webpackConfig.name %></title>
-    <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
-  </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 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 () {
         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
         }
-      }
-    </script>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+        if (pathname.startsWith('/ui/#/chat')) {
+            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>
 </html>

public/theme/element-extra.css

@@ -21,32 +21,39 @@
 }
 
 .el-alert--info.is-light {
-  background-color: light-9;
-  color: light-2;
+  background-color: rgba(255, 255, 255, 0.5);
+  color: info;
   border: 1px solid;
 }
 
 .el-alert--info .el-alert__description {
-  color: light-2;
+  color: info;
+}
+
+.el-pagination.is-background {
+    .el-pagination__total,
+    .el-pagination__sizes,
+    .el-pager {
+        color: var(--color-icon-primary);
+    }
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
-  color: white;
+  color: #fff;
   background-color: primary;
 }
 
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .btn-prev,
 .el-pagination.is-background .el-pager li {
-  margin: 0 5px;
-  background-color: white;
-  color: #606266;
-  min-width: 28px;
-  border-radius: 2px;
-  border: 1px solid #DCDFE6;
-  font-size: 12px;
-  line-height: 26px;
-  font-weight: 400;
+    margin: 0 5px;
+    background-color: #fff;
+    color: var(--color-icon-primary);
+    min-width: 28px;
+    border-radius: 2px;
+    border: 1px solid #DCDFE6;
+    font-size: 12px;
+    font-weight: 400;
 }
 
 .el-breadcrumb__inner,
@@ -85,8 +92,12 @@
 
 
 td .el-button.el-button--mini {
-  padding: 1px 5px;
+  padding: 1px 6px;
   line-height: 1.5;
+
+  .el-icon--right {
+      margin-bottom: 2px;
+  }
 }
 
 .el-tabs__item.is-active, .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
@@ -191,7 +202,7 @@ td .el-button.el-button--mini {
 }
 
 .el-input--small .el-input__icon {
-  line-height: 34px;
+  line-height: 30px;
 }
 
 .option-group .el-select-dropdown__item.hover, .option-group .el-select-dropdown__item.selected {
@@ -224,8 +235,10 @@ td .el-button.el-button--mini {
 }
 
 .el-tag.el-tag--info .el-tag__close {
-  color: #333333!important;
-  background-color: inherit;
+    display: inline-block;
+    margin-top: 3px;
+    color: var(--color-text-primary);
+    background-color: inherit;
 }
 
 .el-tag.el-tag--info.is-hit {
@@ -280,7 +293,7 @@ td .el-button.el-button--mini {
 }
 
 .el-textarea__inner {
-  border-radius: 0;
+    color: var(--color-text-primary);
 }
 
 .el-pagination.is-background .number {
@@ -313,11 +326,11 @@ td .el-button.el-button--mini {
 
 .el-tooltip__popper.is-light {
   background: #FFF;
+  max-width: 500px;
   border: 1px solid #e7eaec;
-}
-
-.el-tooltip__popper.is-light .popper__arrow {
-  border-bottom-color: #e7eaec !important;
+  box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
+  line-height: 1.5;
+  padding: 10px;
 }
 
 .el-dialog__headerbtn .el-dialog__close {
@@ -326,7 +339,7 @@ td .el-button.el-button--mini {
 }
 
 .el-table__header thead tr th {
-  border-bottom: 1px solid #e7e7e7 !important;
+  /*border-bottom: 1px solid #e7e7e7 !important;*/
 }
 
 .el-table .cell,
@@ -423,14 +436,34 @@ td .el-button.el-button--mini {
   flex-direction: column;
 }
 
+.el-dialog .el-dialog__header .el-dialog__title {
+    color: var(--color-text-primary);
+}
+
 .el-dialog  .el-dialog__body {
-  max-height: 90vh;
+  max-height: 80vh;
   overflow: auto;
   padding: 30px;
 }
 
+.el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__body .el-input__inner,
+.el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__header .el-checkbox__label,
+.el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__body .el-checkbox-group .el-checkbox.el-transfer-panel__item {
+    color: var(--color-text-primary);
+}
+
+.el-dialog .el-dialog__body .opera .el-button.is-disabled,
+.el-dialog .el-dialog__body .el-transfer-panel .vip-footer .el-button.is-disabled {
+    color: var(--color-input-border);
+}
+
+.el-dialog .el-dialog__body .opera .el-button.is-disabled.el-button--primary {
+    color: #fff;
+}
+
 .el-dialog .el-dialog__body form {
   padding-right: 20px;
+  margin-right: 20px;
 }
 
 .el-dialog .el-dialog__footer {
@@ -496,3 +529,11 @@ td .el-button.el-button--mini {
 .el-alert.el-alert--error.is-light {
   border-color: var(--color-danger-light);
 }
+
+#nprogress .bar {
+  background: light-5!important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px light-5, 0 0 5px light-5!important;
+}

src/App.vue

@@ -1,14 +1,63 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view v-if="isRouterAlive" />
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex'
+import { Watermark } from 'watermark-js-plus'
+
 export default {
-  name: 'App'
+  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>
-
-<style>
-</style>

src/api/asset.js

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

src/api/component.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getLokiLog(data) {
+  return request({
+    url: `/api/v1/terminal/loki/logs/`,
+    method: 'get',
+    params: data
+  })
+}

src/api/ops.js

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

src/api/sessions.js

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

src/api/settings.js

@@ -15,6 +15,7 @@ export function testEmailSetting(data) {
     data: data
   })
 }
+
 export function importLicense(formData) {
   return request({
     url: '/api/v1/xpack/license/import',
@@ -25,12 +26,29 @@ export function importLicense(formData) {
     data: formData
   })
 }
-export function testLdapSetting(data) {
-  return request({
-    disableFlashErrorMsg: true,
-    url: '/api/v1/settings/ldap/testing/config/',
-    method: 'post',
-    data: data
+
+export function testLdapSetting(data, refresh = true) {
+  let url = '/api/v1/settings/ldap/testing/config/'
+  if (refresh) {
+    url = url + '?refresh=1'
+  }
+  return new Promise((resolve, reject) => {
+    request({
+      disableFlashErrorMsg: true,
+      url: url,
+      method: 'post',
+      data: data
+    }).then(res => {
+      if (res.status !== 'running') {
+        resolve(res)
+      } else {
+        setTimeout(() => {
+          resolve(testLdapSetting(data, false))
+        }, 1000)
+      }
+    }).catch(error => {
+      reject(error)
+    })
   })
 }
 
@@ -80,9 +98,17 @@ 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

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

src/assets/img/chatbot.svg

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

src/assets/img/cloud/ali.svg

@@ -0,0 +1 @@
+<svg t="1717741737122" class="icon" viewBox="0 0 1653 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5514" width="200" height="200"><path d="M344.8620198 721.82988526a57.857089 57.857089 0 0 1-46.13274501-56.07295017v-308.4012244a59.89610558 59.89610558 0 0 1 46.13274501-56.07295017l286.35436058-62.06256065 30.07549089-122.72329718H328.80476645A210.78331632 210.78331632 0 0 0 116.61962599 327.28021902v364.47417458a213.71440233 213.71440233 0 0 0 212.18514046 212.31257895h332.48710482l-30.07549089-122.21354321zM1178.05508073 116.49690269H843.01920461l30.58524561 122.72329718 286.35436059 62.06256065a57.98452749 57.98452749 0 0 1 46.132745 56.07295017v308.4012244a60.15098257 60.15098257 0 0 1-46.13274502 56.07295017l-286.35436057 62.06256066-30.58524561 122.72329716H1178.05508073a212.44001744 212.44001744 0 0 0 212.94977139-212.82233291V327.28021902A213.33208686 213.33208686 0 0 0 1178.05508073 116.49690269z" fill="#F76E05" p-id="5515"></path><path d="M631.21638038 495.49906876h244.29964793v30.07549166H631.21638038z" fill="#F76E05" p-id="5516"></path></svg>

src/assets/img/cloud/azure_china.svg

@@ -0,0 +1 @@
+<svg t="1717743450082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39383" width="200" height="200"><path d="M18.753 17.145h468.424l-0.02 468.426H18.774V17.145h-0.02z m0 0" fill="#F25022" p-id="39384"></path><path d="M534.999 17.145h468.422c0 156.141 0.022 312.283-0.02 468.426H535.038c-0.06-156.162-0.039-312.285-0.039-468.426z m0 0" fill="#80BA01" p-id="39385"></path><path d="M18.753 533.352c156.141 0.058 312.282-0.019 468.424 0.058v468.386H18.753V533.352z m0 0" fill="#02A4EF" p-id="39386"></path><path d="M535.018 533.41c156.124-0.058 312.243-0.019 468.383-0.019v468.422H534.999c0.019-156.163-0.02-312.28 0.019-468.403z m0 0" fill="#FFB902" p-id="39387"></path></svg>

src/assets/img/cloud/azure_international.svg

@@ -0,0 +1 @@
+<svg t="1717743450082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39383" width="200" height="200"><path d="M18.753 17.145h468.424l-0.02 468.426H18.774V17.145h-0.02z m0 0" fill="#F25022" p-id="39384"></path><path d="M534.999 17.145h468.422c0 156.141 0.022 312.283-0.02 468.426H535.038c-0.06-156.162-0.039-312.285-0.039-468.426z m0 0" fill="#80BA01" p-id="39385"></path><path d="M18.753 533.352c156.141 0.058 312.282-0.019 468.424 0.058v468.386H18.753V533.352z m0 0" fill="#02A4EF" p-id="39386"></path><path d="M535.018 533.41c156.124-0.058 312.243-0.019 468.383-0.019v468.422H534.999c0.019-156.163-0.02-312.28 0.019-468.403z m0 0" fill="#FFB902" p-id="39387"></path></svg>

src/assets/img/cloud/baidu.svg

@@ -0,0 +1 @@
+<svg t="1717743183519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34140" width="200" height="200"><path d="M521.30666655 248.79999969c4.93333313 0 9.14666625 0.73333312 12.66666657 2.17333406l181.97333343 106.71999938a34.00000031 34.00000031 0 0 0 26.83999969-0.61333313l168.72-94.69333312L520.06666624 36.26666656 128.02666624 262.38666687l171.20000063 95.93333344c3.69333375 1.63999969 7.8 2.46666656 12.33333281 2.46666656 4.93333313 0 9.04000031-0.82666687 12.33333375-2.46666656l184.45333312-107.04c4.32-1.63999969 8.64-2.46666656 12.96-2.46666656" fill="#5BCA87" p-id="34141"></path><path d="M763.02666687 421.28a34.39999969 34.39999969 0 0 0-9.52000032 23.28l3 200.17333312a28.74666656 28.74666656 0 0 1-9.86666625 22.04000063l-4.54666687 4.38666656-167.49333375 103.39999969a34.89333375 34.89333375 0 0 0-10.39999969 7.56c-5.86666687 5.83999969-8.93333344 13.39999969-9.19999969 22.65333375l2.79999938 186.6 384-230.04-6.61333313-441.36-161.47999968 93.43999969a40.89333375 40.89333375 0 0 0-10.68 7.86666656" fill="#EC5D3E" p-id="34142"></path><path d="M292.4400003 667.69333344a30.40000031 30.40000031 0 0 1-9.86666718-21.58666688V444.68c0-8.44000031-3.29333344-16.13333344-9.87999938-23.13333375a55.63999969 55.63999969 0 0 0-10.8-7.71999938l-162.85333406-90.66666656V765.46666625l387.42666656 222.40000031V801.25333344c-0.21333375-9.25333312-3.40000031-16.75999969-9.57333281-22.51999969a31.81333312 31.81333312 0 0 0-10.8-7.40000063l-168.72-99.31999968-4.93333313-4.32z" fill="#2464F5" p-id="34143"></path></svg>

src/assets/img/cloud/gcp.svg

@@ -0,0 +1 @@
+<svg t="1717743357432" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37305" width="200" height="200"><path d="M779.7248 289.8944h37.4784l106.8032-106.8032 5.2736-45.3632A480.1024 480.1024 0 0 0 148.224 371.968c11.8784-4.864 25.088-5.632 37.4784-2.2528l213.6064-35.2256s10.9056-17.9712 16.4864-16.896a266.496 266.496 0 0 1 364.6976-27.6992h-0.768z" fill="#EA4335" p-id="37306"></path><path d="M1076.224 371.9168a481.28 481.28 0 0 0-145.1008-233.8304l-149.9136 149.9136a266.496 266.496 0 0 1 97.792 211.3536v26.624a133.4272 133.4272 0 1 1 0 266.8544h-266.752l-26.624 26.9824v160l26.624 26.624h266.752A347.0336 347.0336 0 0 0 1076.224 371.9168" fill="#4285F4" p-id="37307"></path><path d="M344.9856 1004.9536h266.8544v-213.6064H344.9856a132.608 132.608 0 0 1-55.0912-12.032l-37.4784 11.6224-107.5712 106.8032-9.3696 37.4784a345.1904 345.1904 0 0 0 209.5104 69.7344" fill="#34A853" p-id="37308"></path><path d="M344.9856 311.9616a347.0336 347.0336 0 0 0-209.5104 622.1312l154.7776-154.7776a133.4272 133.4272 0 1 1 176.5376-176.4864L621.568 448a346.6752 346.6752 0 0 0-276.5824-136.0384" fill="#FBBC05" p-id="37309"></path></svg>

src/assets/img/cloud/huawei.svg

@@ -0,0 +1 @@
+<svg t="1717743147068" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32927" width="200" height="200"><path d="M402.3125 208.25c16.875-5.62500027 33.75-8.4375 50.625-11.24999973 19.68749973 25.3125 25.3125 59.0625 33.75 89.99999946 5.62500027 33.75 11.24999973 67.5 11.24999973 101.25 5.62500027 22.50000027 2.81249973 47.81250027 2.81250054 70.31250054s-2.81249973 42.1875 0 64.68749946c0 30.93750027-2.81249973 59.0625-2.81250054 90.00000027-5.62500027 19.68749973 0 39.37500027-5.62499946 59.0625-8.4375-2.81249973-11.24999973-11.24999973-14.06250027-16.875-33.75-50.625-64.68750027-101.25-92.8125-154.68749973-28.12499973-56.25000027-56.25000027-112.49999973-59.0625-177.1875-5.62500027-50.625 28.12499973-98.43750027 75.9375-115.31250027z m174.37500027-8.4375c5.62500027-2.81249973 8.4375 0 14.06249946 0 22.50000027 5.62500027 47.81250027 8.4375 67.5 22.50000027s36.56249973 33.75 42.1875 56.24999946c8.4375 28.12499973 5.62500027 59.0625 0 87.18750054-8.4375 36.56249973-25.3125 70.31249973-42.1875 104.06249973-5.62500027 11.24999973-11.24999973 19.68749973-16.875 30.93750027-8.4375 19.68749973-22.50000027 39.37500027-33.75 59.0625-19.68749973 33.75-39.37500027 61.87499973-59.0625 95.62499973-2.81249973 2.81249973-5.62500027 11.24999973-11.24999973 5.62500027-2.81249973-33.75-5.62500027-67.5-8.4375-104.06250054-5.62500027-44.99999973-2.81249973-87.18749973-2.81249973-132.18749946 2.81249973-28.12499973 2.81249973-59.0625 5.62499946-87.18750054 5.62500027-33.75 11.24999973-70.31249973 22.50000027-104.06249973 11.24999973-8.4375 11.24999973-25.3125 22.50000027-33.75zM222.31250027 309.5c2.81249973 0 5.62500027 5.62500027 8.4375 8.4375 81.56250027 106.87500027 154.68749973 219.375 213.74999973 340.31249973 5.62500027 8.4375 11.24999973 19.68749973 11.24999973 30.93750027-11.24999973-2.81249973-19.68749973-8.4375-28.12499973-14.06250027-53.43749973-28.12499973-106.87500027-59.0625-160.3125-89.99999946-19.68749973-14.06250027-39.37500027-28.12499973-56.25000027-42.1875-33.75-22.50000027-56.25000027-64.68750027-53.43749973-106.87500027 2.81249973-50.625 30.93750027-92.8125 64.68750027-126.5625z m582.1875 0h5.62499946c14.06250027 19.68749973 33.75 39.37500027 45.00000054 61.87499973 11.24999973 19.68749973 16.875 44.99999973 19.68749973 67.5 0 25.3125-8.4375 53.43749973-28.12499973 73.12500027-11.24999973 11.24999973-19.68749973 22.50000027-33.75 30.93750027-64.68750027 50.625-135 90.00000027-208.12500027 126.5625-11.24999973 5.62500027-19.68749973 14.06250027-33.75 14.06249946 2.81249973-14.06250027 11.24999973-28.12499973 16.875-39.37499946 47.81250027-98.43750027 106.87500027-191.25000027 171.56249973-281.25000054 14.06250027-14.06250027 30.93750027-33.75 45.00000054-53.43749973z m-705.93750027 225.00000027c2.81249973-2.81249973 0-8.4375 5.62500027-11.25000054 8.4375 2.81249973 16.875 8.4375 22.49999946 11.25000054 101.25 56.25000027 202.5 112.49999973 300.93750027 174.37499946 2.81249973 2.81249973 5.62500027 5.62500027 5.62500027 8.4375H239.18750027c-39.37500027 0-75.9375-16.875-104.06250054-44.99999973-22.50000027-25.3125-42.1875-59.0625-44.99999973-92.8125 5.62500027-14.06250027 2.81249973-28.12499973 8.4375-44.99999973z m810-2.81250054c5.62500027-2.81249973 14.06250027-8.4375 19.68749973-5.62499946 0 14.06250027 5.62500027 30.93750027 5.62500027 44.99999973-2.81249973 19.68749973-2.81249973 36.56249973-11.24999973 53.43749973-5.62500027 14.06250027-14.06250027 30.93750027-25.3125 42.1875-14.06250027 11.24999973-22.50000027 25.3125-39.37500027 33.75-16.875 14.06250027-42.1875 16.875-61.87499973 19.68750054h-202.5c2.81249973-2.81249973 2.81249973-5.62500027 5.62499946-8.4375 101.25-64.68750027 205.31249973-123.75000027 309.37500027-180.00000054zM242 748.25c36.56249973-2.81249973 73.12500027 0 109.6875-5.62500027 25.3125 0 53.43749973-2.81249973 78.74999973 0-5.62500027 11.24999973-19.68749973 16.875-28.12499973 22.50000027-28.12499973 19.68749973-56.25000027 36.56249973-87.18749973 50.625s-67.5 8.4375-92.8125-11.24999973c-19.68749973-14.06250027-36.56249973-36.56249973-47.81250027-56.25000027h67.5z m357.18749973-5.62500027c25.3125-2.81249973 50.625 0 78.75000054 0 33.75 2.81249973 70.31249973 0 106.87499946 5.62500027 25.3125 2.81249973 50.625 0 73.12500027 2.81249973-8.4375 16.875-22.50000027 33.75-36.56249973 47.81250027-22.50000027 22.50000027-56.25000027 33.75-87.18750054 28.12499973-28.12499973-8.4375-50.625-25.3125-75.9375-39.37499946-14.06250027-8.4375-25.3125-16.875-39.37499946-25.3125-8.4375-8.4375-14.06250027-11.24999973-19.68750054-19.68750054z" fill="#C71F1E" p-id="32928"></path></svg>

src/assets/img/cloud/jd.svg

@@ -0,0 +1 @@
+<svg t="1717743099498" class="icon" viewBox="0 0 2030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30911" width="200" height="200"><path d="M1669.09384945 432.48813594c15.51186469 21.69491531 27.11864437 51.1457625 25.81694906 112.86779625-17.46440719 193.78983094-181.96610156 316.14915281-345.76271156 316.14915281-177.24745781 0-302.04745781-127.56610125-377.111865-270.10169531C954.30062883 557.72203344 941.44639195 520.13559312 929.35147664 487.59322063c-23.701695 32.21694937-73.6542375 84.77288156-99.09152531 109.23389812A629.15254219 629.15254219 0 0 0 890.24639133 720.81355906c20.01355969 31.18644094 70.508475 101.74915219 142.69830562 157.61355938 65.62711875 50.60338969 128.59661062 81.68135625 199.81016906 99.41694937a487.81016906 487.81016906 0 0 0 354.65762719-50.00677968c128.81355937-73.81694906 219.60678-209.78983031 236.04067781-350.96949188-31.72881375-52.61016937-100.501695-114.76610156-154.35932156-144.37966031zM585.37859508 381.12542375a238.96949156 238.96949156 0 0 1 126.96949125 36.39322031c30.53559281-32.5423725 57.54576281-66.16949156 85.58644125-100.06779656A370.54915219 370.54915219 0 0 0 214.66673039 621.01694937a373.09830469 373.09830469 0 0 0 4.39322062 57.00339c10.3593225 12.79999969 114.71186438 4.12203375 130.98305063-10.52203406a242.49491531 242.49491531 0 0 1-4.55593219-46.48135594 239.89152563 239.89152563 0 0 1 239.89152563-239.89152562zM585.37859508 992a370.6576275 370.6576275 0 0 1-320.97627094-185.38305094c4.98983062-6.61694906 121.60000031-19.57966125 149.42372812-18.00678a239.07796594 239.07796594 0 0 0 171.55254282 72.29830594s147.52542375 11.33559281 285.39661031-97.62711937c0 0 51.85084781 73.87118625 91.66101656 101.64067781 0 0-130.00677938 127.07796656-377.05762687 127.07796656z" fill="#E1251B" p-id="30912"></path><path d="M1545.05317101 74.305085C1369.9209682 0.70508469 1199.0735107 22.18305125 1030.23283195 146.27796594 881.35147664 255.67457656 822.1243582 365.88474594 726.88367976 460.47457625c-113.89830469 113.13898313-199.32203344 151.21355906-267.06440718 176.81355938-69.96610125 26.46779625-167.59322062 44.52881344-240.75932157 40.51525406a371.41694906 371.41694906 0 0 0 45.34237313 128.59661062c186.79322063-3.19999969 318.48135562-74.68474594 403.41694875-126.48135656 74.2508475-45.28813594 185.97966094-159.34915219 244.61016937-233.22033844 94.21016906-118.56271219 216.94915219-231.97288125 329.16610219-267.55254281 156.7457625-49.62711844 309.1525425 19.79661 383.02372875 117.85762688 6.61694906 8.62372875 145.13898281 58.3593225 188.691525 95.78305125C1797.31079883 324.88135625 1721.8124932 148.61016969 1545.05317101 74.305085z" fill="#E1251B" p-id="30913" class="custom-cursor-on-hover"></path><path d="M1809.24300164 377.81694875A497.35593188 497.35593188 0 0 0 1526.39554383 286.91525469c-122.63050875 0-245.42372906 47.78305125-331.82372813 132.88135594-62.86101656 61.83050812-93.4508475 112.00000031-163.14576281 195.57966093a570.35932219 570.35932219 0 0 0 92.63728781 108.47457563c9.00339-13.12542375 59.66101688-84.82711875 97.62711844-135.21355875 48.81355969-64.10847469 98.38644094-115.36271156 173.5593225-145.03050844a350.04745781 350.04745781 0 0 1 427.498305 139.3355925A486.02033906 486.02033906 0 0 0 1809.24300164 377.81694875z" fill="#E1251B" p-id="30914" class="custom-cursor-on-hover"></path></svg>

src/assets/img/cloud/kingsoft.svg

@@ -0,0 +1 @@
+<svg t="1717743116713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31939" width="200" height="200"><path d="M718.5408 453.8368c-4.1984 0-8.3968-0.7168-12.5952-0.7168a103.8336 103.8336 0 0 0-67.8912 25.088 139.6736 139.6736 0 0 0 13.6192-60.3136 133.12 133.12 0 0 0-2.4576-25.7024 139.5712 139.5712 0 0 0-274.432 0 133.12 133.12 0 0 0-2.4576 25.7024 139.6736 139.6736 0 0 0 13.6192 60.3136 103.8336 103.8336 0 0 0-67.8912-25.088c-4.1984 0-8.3968 0-12.5952 0.7168a104.5504 104.5504 0 1 0 101.0688 159.4368 116.736 116.736 0 0 0 6.144-11.0592 105.1648 105.1648 0 0 0 4.9152-76.6976 62.6688 62.6688 0 0 1 27.3408 20.48l2.6624 3.8912a83.2512 83.2512 0 0 1 133.9392-3.3792l4.7104 6.8608 51.2 73.9328a84.0704 84.0704 0 0 0 62.464 34.6112h5.5296a104.5504 104.5504 0 0 0 12.5952-208.384z" fill="#E6002D" p-id="31940"></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m200.8064 732.3648h-6.8608a152.4736 152.4736 0 0 1-120.5248-58.9824S509.2352 564.6336 508.0064 563.2a42.1888 42.1888 0 0 0-32.4608-15.2576 40.96 40.96 0 0 0-24.064 7.5776l122.88 175.4112a62.5664 62.5664 0 0 0 77.0048 20.48A97.5872 97.5872 0 0 1 593.92 783.5648a97.0752 97.0752 0 0 1-95.5392-39.1168l-49.4592-70.656a174.8992 174.8992 0 1 1-143.36-290.5088 209.7152 209.7152 0 0 1 413.9008 0 174.7968 174.7968 0 0 1-6.144 349.0816z" fill="#E6002D" p-id="31941"></path></svg>

src/assets/img/cloud/lan.svg

@@ -0,0 +1 @@
+<svg t="1717746661932" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="60936" width="200" height="200"><path d="M29.696 541.696A30.72 30.72 0 0 0 59.52 512 452.16 452.16 0 0 1 512 59.456a439.68 439.68 0 0 1 225.664 61.44l16.704 10.432 7.04 4.608-3.84 7.488c-1.216 2.496-1.536 6.592-1.536 16.64 0 44.352 37.504 81.856 81.856 81.856s81.856-37.504 81.856-81.856a83.008 83.008 0 0 0-108.544-77.824l-8.96 3.136-4.48 1.792-4.096-2.624A520.768 520.768 0 0 0 512 0C230.4 0 0 230.4 0 512c0 15.68 14.08 29.696 29.696 29.696z m588.16-186.24c-13.056-93.568-37.12-164.224-62.336-203.584a383.808 383.808 0 0 0-43.776-2.752c-14.784 0-29.568 1.088-43.776 2.752-25.216 39.36-49.28 109.44-62.4 203.584z m221.696 0a365.504 365.504 0 0 0-203.52-184.96c21.312 51.392 36.608 115.456 45.888 184.96z m-497.472 0c9.28-69.504 24.576-133.568 45.952-184.96a365.504 365.504 0 0 0-203.584 184.96z m520.512 250.688a358.4 358.4 0 0 0 0-188.288H688c2.688 31.232 3.84 62.4 3.84 94.144 0 31.744-1.664 62.912-3.84 94.144z m-237.568 0c2.176-29.568 3.84-61.312 3.84-94.144 0-33.408-1.664-64.64-3.84-94.144H398.976c-2.752 29.568-3.84 61.312-3.84 94.144 0 33.408 1.664 64.64 3.84 94.144z m-289.024 0A1073.92 1073.92 0 0 1 332.16 512c0-31.744 1.152-62.912 3.84-94.144H161.408a358.4 358.4 0 0 0 0 188.288zM512 1024c281.6 0 512-230.4 512-512a30.72 30.72 0 0 0-29.696-29.696 30.72 30.72 0 0 0-29.76 29.696A452.16 452.16 0 0 1 512 964.544a439.68 439.68 0 0 1-225.664-61.44l-16.704-10.432-7.04-4.608 3.84-7.488c1.216-2.496 1.536-6.592 1.536-16.64 0-44.352-37.504-81.856-81.856-81.856s-81.856 37.504-81.856 81.856a83.008 83.008 0 0 0 108.544 77.824l8.96-3.136 4.48-1.792 4.096 2.624A520.768 520.768 0 0 0 512 1024z m-0.256-149.12c14.72 0 29.568-1.088 43.776-2.752 25.152-39.36 49.28-109.44 62.4-203.584H405.568c13.12 93.568 37.184 164.224 62.4 203.584 14.208 1.664 28.992 2.752 43.776 2.752z m124.224-21.312a365.504 365.504 0 0 0 203.584-185.024h-157.632c-9.28 69.504-24.576 133.568-45.952 184.96z m-247.936 0c-21.376-51.456-36.672-115.52-45.952-185.024H184.448a365.504 365.504 0 0 0 203.52 184.96z" fill="#448CF7" p-id="60937"></path></svg>

src/assets/img/cloud/nutanix.svg

@@ -0,0 +1 @@
+<svg t="1717747391666" class="icon" viewBox="0 0 1333 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4694" width="200" height="200"><path d="M1018.488284 0.541672L1314.82427 0a18.458499 18.458499 0 0 1 13.083451 31.500282L894.070504 465.337499a18.458499 18.458499 0 0 1-26.104401 0L720.079363 317.450758a18.458499 18.458499 0 0 1 0-26.093983L1005.477751 5.937553a18.458499 18.458499 0 0 1 13.02095-5.406298zM1018.488284 1023.446662l296.335986 0.552088a18.458499 18.458499 0 0 0 13.083451-31.500282L894.070504 558.650834a18.458499 18.458499 0 0 0-26.104401 0L720.079363 706.547992a18.458499 18.458499 0 0 0 0 26.1044l285.398388 285.398388a18.458499 18.458499 0 0 0 13.02095 5.406298z" fill="#054496" p-id="4695"></path><path d="M821.319852 500.275312L327.34668 5.416715A18.437665 18.437665 0 0 0 314.29448 0H18.510582A18.479332 18.479332 0 0 0 5.437549 31.531532l466.566676 467.400018a18.500166 18.500166 0 0 1 0 26.146067L5.458382 992.425551a18.489749 18.489749 0 0 0 13.083451 31.562782h295.74223a18.437665 18.437665 0 0 0 13.052201-5.416715l493.973172-494.858596a16.593899 16.593899 0 0 0 0-23.448127z" fill="#87BB4C" p-id="4696"></path></svg>

src/assets/img/cloud/openstack.svg

@@ -0,0 +1 @@
+<svg t="1717746166860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51952" width="200" height="200"><path d="M928.856 10.912H95.142C42.814 10.912 0 53.726 0 106.054v224.202h231.25v-36.64c0-28.418 23.046-51.454 51.464-51.454h458.58c28.42 0 51.456 23.036 51.456 51.456v36.64H1024V106.052c0-52.328-42.816-95.142-95.144-95.142zM792.75 730.38c0 28.42-23.036 51.466-51.456 51.466h-458.58c-28.418 0-51.464-23.046-51.464-51.466v-36.63H0v224.194c0 52.336 42.816 95.142 95.144 95.142h833.714c52.328 0 95.142-42.806 95.142-95.142V693.752H792.75v36.63zM0.006 627.628h231.25V396.38H0.006v231.25z m792.74 0h231.25V396.38H792.748v231.25z" fill="#E72F52" p-id="51953"></path></svg>

src/assets/img/cloud/qcloud.svg

@@ -0,0 +1 @@
+<svg t="1717743207396" class="icon" viewBox="0 0 1402 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35171" width="200" height="200"><path d="M1216.84017881 832.26669714c-22.01770438 22.42169837-66.05311315 55.95324845-143.01407896 55.95324845H600.84945441c143.01407897-139.88312044 264.01045355-257.44554135 275.01930505-268.65639054a860.50843905 860.50843905 0 0 1 65.9521143-61.60917245c55.04426026-50.29732444 98.9786702-55.8522496 137.45915242-55.85224962 55.04426026 0 98.9786702 22.32069952 137.56015263 55.95324846 76.96096581 72.71902281 76.96096581 201.4922929 0 274.2113157z m93.42374503-363.79711171a304.81390494 304.81390494 0 0 0-225.42897111-100.79664655c-77.06196465 0-143.01407897 27.97662354-203.51226695 72.71902278-22.01770438 22.52269721-54.94326142 44.84339811-82.51589098 78.47594568-21.91670555 22.32069952-494.89335097 492.5703818-494.89335097 492.57038317 27.47163072 5.55492517 60.59918544 5.55492517 87.96981869 5.55492517h599.42694635c44.03540877 0 76.96096581 0 110.08852053-5.55492517a335.11349765 335.11349765 0 0 0 203.41126672-89.58579738c126.45030092-123.21834493 126.45030092-330.265563 5.45392772-453.3829077z" fill="#00A3FF" p-id="35172"></path><path d="M528.73642327 435.44302817c-60.80118311-45.14639325-121.70336508-67.66909045-193.51339969-67.66909045a306.02588827 306.02588827 0 0 0-226.74195328 101.60463453 333.80051551 333.80051551 0 0 0 5.55492517 462.97777956c55.24625795 50.80231726 110.59351474 78.98093847 176.94962165 84.63686387l127.1572928-124.22833194h-71.91103484c-71.91103347-5.65592402-116.14843991-28.27962006-143.72106809-56.45824128a206.03723244 206.03723244 0 0 1-5.55492656-282.29120635c38.68247989-39.49046924 82.91988635-56.45824127 138.26714315-56.45824267 33.12755473 0 82.91988635 5.65592402 132.71221657 56.55924012 22.11870323 22.52269721 82.91988635 67.66909045 105.03858956 90.29278788h5.55492518l82.91988496-84.73786132v-5.65592401c-38.68247989-39.49046924-99.58466186-90.29278651-132.71221658-118.57240794" fill="#00C8DC" p-id="35173"></path><path d="M1114.32655611 290.00498256A436.81913102 436.81913102 0 0 0 705.58504746 7.00678432c-218.3590661 0-391.87473546 160.8908378-425.507283 360.66615456 16.76577435 0 33.63254755-5.45392634 55.95324845-5.45392634 22.42169837 0 50.49932212 5.45392634 72.82002164 5.45392634 27.97662354-138.67113711 151.19496845-238.55879549 296.73401291-238.55879412a310.06583359 310.06583359 0 0 1 279.96823856 177.55561331s5.55492517 5.55492517 5.55492517 0c39.18747409-5.55492517 84.03087084-16.66477551 123.21834492-16.66477551 0 5.55492517 0 5.55492517 0 0" fill="#006EFF" p-id="35174"></path></svg>

src/assets/img/cloud/qcloud_lighthouse.svg

@@ -0,0 +1 @@
+<svg t="1717743207396" class="icon" viewBox="0 0 1402 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35171" width="200" height="200"><path d="M1216.84017881 832.26669714c-22.01770438 22.42169837-66.05311315 55.95324845-143.01407896 55.95324845H600.84945441c143.01407897-139.88312044 264.01045355-257.44554135 275.01930505-268.65639054a860.50843905 860.50843905 0 0 1 65.9521143-61.60917245c55.04426026-50.29732444 98.9786702-55.8522496 137.45915242-55.85224962 55.04426026 0 98.9786702 22.32069952 137.56015263 55.95324846 76.96096581 72.71902281 76.96096581 201.4922929 0 274.2113157z m93.42374503-363.79711171a304.81390494 304.81390494 0 0 0-225.42897111-100.79664655c-77.06196465 0-143.01407897 27.97662354-203.51226695 72.71902278-22.01770438 22.52269721-54.94326142 44.84339811-82.51589098 78.47594568-21.91670555 22.32069952-494.89335097 492.5703818-494.89335097 492.57038317 27.47163072 5.55492517 60.59918544 5.55492517 87.96981869 5.55492517h599.42694635c44.03540877 0 76.96096581 0 110.08852053-5.55492517a335.11349765 335.11349765 0 0 0 203.41126672-89.58579738c126.45030092-123.21834493 126.45030092-330.265563 5.45392772-453.3829077z" fill="#00A3FF" p-id="35172"></path><path d="M528.73642327 435.44302817c-60.80118311-45.14639325-121.70336508-67.66909045-193.51339969-67.66909045a306.02588827 306.02588827 0 0 0-226.74195328 101.60463453 333.80051551 333.80051551 0 0 0 5.55492517 462.97777956c55.24625795 50.80231726 110.59351474 78.98093847 176.94962165 84.63686387l127.1572928-124.22833194h-71.91103484c-71.91103347-5.65592402-116.14843991-28.27962006-143.72106809-56.45824128a206.03723244 206.03723244 0 0 1-5.55492656-282.29120635c38.68247989-39.49046924 82.91988635-56.45824127 138.26714315-56.45824267 33.12755473 0 82.91988635 5.65592402 132.71221657 56.55924012 22.11870323 22.52269721 82.91988635 67.66909045 105.03858956 90.29278788h5.55492518l82.91988496-84.73786132v-5.65592401c-38.68247989-39.49046924-99.58466186-90.29278651-132.71221658-118.57240794" fill="#00C8DC" p-id="35173"></path><path d="M1114.32655611 290.00498256A436.81913102 436.81913102 0 0 0 705.58504746 7.00678432c-218.3590661 0-391.87473546 160.8908378-425.507283 360.66615456 16.76577435 0 33.63254755-5.45392634 55.95324845-5.45392634 22.42169837 0 50.49932212 5.45392634 72.82002164 5.45392634 27.97662354-138.67113711 151.19496845-238.55879549 296.73401291-238.55879412a310.06583359 310.06583359 0 0 1 279.96823856 177.55561331s5.55492517 5.55492517 5.55492517 0c39.18747409-5.55492517 84.03087084-16.66477551 123.21834492-16.66477551 0 5.55492517 0 5.55492517 0 0" fill="#006EFF" p-id="35174"></path></svg>

src/assets/img/cloud/qing.svg

@@ -0,0 +1 @@
+<svg t="1717745876738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50950" width="200" height="200"><path d="M494.272 0L347.968 89.088l146.304 86.4V0z m43.904 175.552l146.304-87.488L538.176 0v175.552z m0 731.392l146.304-87.872-146.304-87.68v175.552z m-43.904 0V731.52l-146.304 88.128 146.304 87.36m409.6-205.696L757.568 614.4v175.552l146.304-88.704M289.472 614.4l-146.304 87.68 146.304 87.872V614.4z m468.096-73.152l146.304-88.128-146.304-87.424v175.552z m-468.096 0V365.696L143.168 453.632l146.304 87.68m614.4-336.768L757.568 117.12V292.48l146.304-88m-614.4-87.488l-146.304 88.32 146.304 87.168V117.12z m629.056 307.2V248.704l-146.304 88.256 146.304 87.296m-789.952 0l146.304-88.064-146.304-87.488v175.552z m146.304 146.432L128.576 482.752v175.552l146.304-87.616m497.344 0.192l146.304 87.424V482.752L772.224 570.88m-438.848 43.52v175.552l146.304-88L333.376 614.4m380.352 175.552V614.4l-146.304 87.68 146.304 87.872M333.376 307.2l146.304-88.128-146.304-87.424V307.2z m380.352 541.248l-146.304 88.768L713.728 1024v-175.552z m0-555.904V131.648L567.424 212.672l146.304 79.872" fill="#57B382" p-id="50951"></path><path d="M494.272 0v175.552L347.968 89.088 494.272 0m43.904 175.552V0l146.304 88.064-146.304 87.488m0 731.392V731.52l146.304 87.68-146.304 87.808m-43.904 0l-146.304-87.36 146.304-88.128v175.488z m409.6-205.696l-146.304 88.704V614.4l146.304 86.848M289.472 614.4v175.552L143.168 702.08 289.472 614.4m468.096-73.152V365.696l146.304 87.424-146.304 88.128m-468.096 0L143.168 453.632l146.304-87.936v175.552z m614.4-336.64L757.568 292.48V117.12l146.304 87.488m-614.4-87.488V292.48L143.168 205.44l146.304-88.384m629.056 307.2l-146.304-87.296 146.304-88.32V424.32z m-789.952 0V248.704l146.304 87.488-146.304 88.064m146.304 146.432l-146.304 87.616V482.752l146.304 87.936m497.344 0.192l146.304-88.128v175.552L772.224 570.88m-438.848 43.52l146.304 87.552-146.304 88V614.4z m380.352 175.552l-146.304-87.936L713.728 614.4v175.552zM333.376 307.2V131.648l146.304 87.424L333.376 307.2m380.352 541.248V1024l-146.304-86.784 146.304-88.768m0-555.904L567.424 212.672l146.304-81.024v160.896z" fill="#57B382" p-id="50952" class="custom-cursor-on-hover"></path></svg>

src/assets/img/cloud/scp.svg

@@ -0,0 +1 @@
+<svg t="1717746510567" class="icon" viewBox="0 0 1351 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="55261" width="200" height="200"><path d="M416.92885 824.173591c-56.901379 30.927289-130.232881 35.397249-203.685192-3.745101a159.190971 159.190971 0 0 1-65.35806-64.754011c-79.130368-147.025432 15.826074-294.775723 150.770533-309.635319 7.369393-0.845668 14.738786-1.328907 22.228989-1.328907 59.317574 0 112.353042 25.732471 149.320817 66.324538a249.50832 249.50832 0 0 1-26.457329-111.628184c0-16.188503 1.691336-31.893767 4.590769-47.236601a320.508194 320.508194 0 0 0-127.575067-26.45733c-6.161296 0-12.201782 0.604049-18.242268 0.966478C83.252396 339.122556-77.424535 571.198033 39.036038 806.897801c25.370042 51.344132 66.686967 93.748345 117.668669 119.601625 115.614904 58.713525 230.50495 50.377654 319.420907 0.966478 31.531338-17.51741 38.659111-59.921622 15.946883-88.070288-0.241619-0.362429-0.483239-0.604049-0.724858-0.966477-18.000649-22.349799-49.290367-27.907046-74.418789-14.255548z" fill="#62B0DB" p-id="55262"></path><path d="M443.869418 399.527417c0-16.188503 1.691336-31.893767 4.590769-47.236602 23.557896-123.709156 137.602274-215.403735 270.855398-203.081143 24.041135 2.174575 46.994982 8.094251 68.740732 16.792551 50.377654-17.879839 104.3796-28.148665 160.91855-28.148665 16.550932 0 32.981054 0.845668 49.169557 2.537004C928.558024 59.448048 827.561096 5.929341 715.328864 0.492904c-204.65167-10.027207-377.167953 134.098792-412.565202 326.18625-4.34915 23.678706-6.886154 47.96146-6.886154 72.848263 0 15.826074 1.208097 31.289718 2.899433 46.511743 7.369393-0.845668 14.738786-1.328907 22.228989-1.328907 59.317574 0 112.473852 25.732471 149.320817 66.324538-16.792551-33.464293-26.457329-71.277736-26.457329-111.507374z" fill="#8FC361" p-id="55263"></path><path d="M1114.725806 778.386706S880.717374 806.172943 749.034777 723.176663c-66.928586-42.162593-43.73312-127.937496 50.015225-152.461869 63.666724-16.671742 302.024306-14.376357 457.989657 13.04745 156.086161 27.423807 124.675634 166.717417-142.313853 194.624462zM1316.961282 782.615047s-67.170206 87.22462-241.981874 113.561139c-72.727453 10.993685-135.06527 13.289069-224.102035 0 0 0-70.311258-18.967126-82.392231 35.638868-14.376357 65.23725 157.656688 128.420735 327.998396 62.458627 172.274664-66.566157 220.477743-211.658634 220.477744-211.658634z" fill="#ADD079" p-id="55264"></path><path d="M1341.244036 531.089205s-44.457978-76.955793-241.136206-131.924217c-195.228511-54.605995-295.86301 15.463644-346.240665-30.202431-24.886803-22.470608-5.194818-77.318222 23.557896-101.480167 46.994982-39.504779 176.744624-83.600328 323.407627-20.416843 214.558067 92.540247 240.411348 284.023657 240.411348 284.023658z" fill="#A2CB70" p-id="55265"></path><path d="M783.948786 456.791225s234.008432-27.786236 365.69103 55.210044c66.928586 42.162593 43.73312 127.937496-50.015225 152.461869-63.666724 16.671742-302.024306 14.376357-457.989658-13.04745-156.086161-27.302997-124.675634-166.717417 142.313853-194.624463z m11.839353 535.42869c146.663003 63.183485 276.412645 19.208746 323.407627-20.416843 28.631904-24.161944 48.444699-78.888749 23.557896-101.480167-50.377654-45.666075-151.012153 24.403564-346.240665-30.20243-196.678228-54.968424-241.136206-131.924217-241.136206-131.924217s25.97409 191.60422 240.411348 284.023657zM579.780355 456.791225s67.170206-87.22462 241.981874-113.561139c72.727453-10.993685 135.06527-13.289069 224.102036 0 0 0 70.311258 18.967126 82.39223-35.638868 14.376357-65.23725-157.656688-128.420735-327.998396-62.458626-172.274664 66.566157-220.477743 211.658634-220.477744 211.658633z" fill="#4885BE" p-id="55266"></path></svg>

src/assets/img/cloud/state.svg

@@ -0,0 +1 @@
+<svg t="1717747284124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2464" width="200" height="200"><path d="M838.4 416c-6.4-70.4-64-115.2-134.4-115.2-19.2 0-38.4 6.4-51.2 6.4-44.8-51.2-115.2-83.2-185.6-83.2-89.6 0-172.8 51.2-211.2 128h-12.8C115.2 352 19.2 448 12.8 576s96 224 224 230.4h294.4c25.6 0 44.8-19.2 44.8-44.8s-19.2-44.8-44.8-44.8H249.6c-70.4 0-134.4-57.6-134.4-128s51.2-128 121.6-134.4c12.8 0 25.6 0 38.4 6.4h6.4l25.6 6.4C320 390.4 390.4 320 473.6 320c57.6 0 108.8 32 140.8 83.2 6.4 6.4 6.4 12.8 6.4 19.2l6.4-6.4c19.2-19.2 51.2-19.2 70.4-19.2 44.8 0 70.4 38.4 70.4 76.8 0 12.8-6.4 25.6-6.4 38.4 12.8 6.4 19.2 19.2 38.4 19.2 6.4-6.4 19.2-12.8 19.2-19.2 64 6.4 115.2 57.6 108.8 128-6.4 57.6-57.6 108.8-121.6 108.8-51.2 0-96-32-115.2-83.2h51.2c6.4 0 12.8-6.4 12.8-12.8s0-6.4-6.4-6.4l-96-128c-6.4-6.4-12.8-12.8-19.2-6.4h-6.4l-96 128c-6.4 6.4-6.4 19.2 6.4 19.2 6.4 0 6.4 6.4 6.4 6.4h57.6c19.2 115.2 128 192 243.2 172.8 115.2-19.2 192-128 172.8-243.2-25.6-96-89.6-160-179.2-179.2z" fill="#F3A22F" p-id="2465"></path></svg>

src/assets/img/cloud/ucloud.svg

@@ -0,0 +1 @@
+<svg t="1717743387740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38378" width="200" height="200"><path d="M912.192 0C973.952 0 1024 50.048 1024 111.808v800.384c0 61.76-50.048 111.808-111.808 111.808H111.808A111.808 111.808 0 0 1 0 912.192V111.808C0 50.048 50.048 0 111.808 0h800.384zM672 185.152c-23.936-1.088-30.912 6.144-30.656 30.4 1.28 116.864 0.832 233.728 0.384 350.592-0.128 37.76 2.368 75.52-3.392 113.216-6.912 45.184-33.92 71.68-76.16 82.88-52.672 13.952-107.136-1.728-131.2-36.736-17.6-25.728-19.84-55.552-19.904-85.632-0.192-120.32-0.448-240.64 0.192-360.96 0.128-18.432-4.032-26.24-24.448-26.24-20.416 0.128-27.136 8-24.128 26.432 4.608 28.16-8.256 37.12-34.24 33.152-23.168-3.456-35.2 5.248-30.912 29.952 5.312 30.4-6.912 42.304-37.248 37.248-20.416-3.392-30.72 2.304-30.144 26.88 1.6 79.04-0.512 158.08 1.024 237.184 2.24 113.088 79.104 204.8 189.632 230.912a462.08 462.08 0 0 0 187.136 5.632c133.12-23.04 214.08-117.824 214.4-252.416V435.2c0-74.496-0.896-148.992 0.448-223.424 0.448-21.76-6.4-27.264-27.2-26.56-41.152 1.536-82.432 1.92-123.52 0z m-422.784 133.76c-16.832-3.84-18.752 7.04-19.2 21.568-0.384 15.296 3.968 22.208 20.736 22.464 18.496 0.32 22.528-7.36 22.528-24.128 0-16.96-7.296-22.144-24.064-19.84z m73.6-65.92l-4.992 0.448c-17.792-2.816-20.928 7.04-20.8 22.272 0 15.104 6.592 19.456 20.864 19.648 15.68 0.256 22.72-4.224 22.656-21.248 0-17.024-6.72-23.04-22.72-20.672z m-134.464 3.904c-10.88 0.384-12.288 7.36-12.608 16-0.448 11.008 2.88 17.664 15.168 16 12.672 1.216 15.168-6.144 14.912-16.768-0.32-11.84-6.656-15.552-17.472-15.232z m68.032-3.648c-11.776 0.32-19.904 1.664-19.52 16.512 0.32 11.776 1.472 19.968 16.448 19.328 11.52-0.448 21.12-0.896 18.944-16.192 1.28-11.904-0.96-20.096-15.872-19.648z m126.592-68.032c-17.088-0.32-20.8 6.848-20.928 22.336-0.128 16.96 6.848 22.656 22.592 20.352 17.664 2.88 20.288-7.04 20.736-21.952 0.512-17.28-7.232-20.48-22.4-20.736z m-58.816 7.104l-4.736 0.32c-12.48-0.96-22.272-0.064-22.336 16.96 0 15.872 7.552 19.072 21.056 18.752 12.352-0.256 22.08-0.64 22.208-17.6 0.128-16.128-7.616-19.648-20.928-18.112z m-137.6 6.016c-9.088-0.128-10.816 5.632-10.432 13.056 0.384 9.088 6.464 10.304 13.632 9.792 7.872-0.64 11.776-4.928 11.008-12.992-0.832-8.832-7.232-9.792-14.208-9.856z m65.728-5.632h-3.584c-11.328 0.32-11.392 7.936-11.456 16.128 0 10.88 6.976 12.544 15.616 12.096 10.368 0.512 12.928-5.248 13.184-14.528 0.32-13.056-7.552-13.952-17.28-13.696z m66.816-55.68c-7.808 0.256-16.832-0.96-17.472 10.56-0.704 11.712 6.592 15.616 17.024 15.744 9.152 0.128 15.424-2.944 15.36-13.312 0.832-11.008-5.952-13.312-14.912-12.992z m-63.68 0.448c-7.936-0.128-12.352 3.072-12.288 11.456 0.128 7.424 2.752 12.8 11.008 13.376 8.32 0.512 11.712-4.288 12.032-12.032 0.64-7.808-2.176-12.608-10.752-12.8z" fill="#3860F4" p-id="38379" class="custom-cursor-on-hover"></path></svg>

src/assets/img/cloud/vmware.svg

@@ -0,0 +1 @@
+<svg t="1717747341803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3484" width="200" height="200"><path d="M813.6 65H451.9c-81.8 0-144.7 62.7-144.7 144.1v100.4h-97.5C127.9 309.5 65 372.3 65 453.7v360.5c0 81.4 62.8 144.2 144.7 144.2h358.6c81.8 0 144.7-62.7 144.7-144.2V710.7h100.6c81.8 0 144.7-62.7 144.7-144.2V206c3.2-75.3-62.9-141-144.7-141z m37.8 504.6c-0.4 20.6-17.1 37.3-37.7 37.5H609.2V814c-0.3 20.7-17 37.3-37.7 37.6H209.8c-20.7-0.2-37.4-16.9-37.8-37.6V453.6c0.3-20.7 17.1-37.4 37.8-37.6h204.4V209.1c0-21.9 18.9-37.5 37.8-37.5h361.7c20.6 0.3 37.3 16.9 37.7 37.5v360.5z m0 0" fill="#8FBE48" p-id="3485"></path><path d="M514.8 268.7v235H272.7V745h242.2V510H757V268.7H514.8z m0 0" fill="#F2B624" p-id="3486"></path></svg>

src/assets/img/cloud/volcengine.svg

@@ -0,0 +1 @@
+<svg t="1717743222537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36225" width="200" height="200"><path d="M830.537143 476.525714L706.413714 961.828571a8.484571 8.484571 0 0 0 0 4.022858 9.069714 9.069714 0 0 0 8.996572 6.948571h248.100571a9.069714 9.069714 0 0 0 9.069714-10.971429l-124.708571-485.302857a9.142857 9.142857 0 0 0-17.334857 0M147.602286 586.386286L51.492571 961.828571a8.996571 8.996571 0 0 0 9.069715 10.971429h191.488a9.142857 9.142857 0 0 0 7.241143-3.291429 8.777143 8.777143 0 0 0 1.755428-3.657142 8.484571 8.484571 0 0 0 0-4.022858L164.864 586.459429a8.777143 8.777143 0 0 0-3.291429-4.534858 9.216 9.216 0 0 0-10.752 0 8.777143 8.777143 0 0 0-3.218285 4.534858" fill="#00E5E5" p-id="36226"></path><path d="M317.074286 275.748571l-175.104 686.08a8.777143 8.777143 0 0 0 1.682285 7.460572c1.682286 2.194286 4.242286 3.437714 6.948572 3.437714h350.354286a9.069714 9.069714 0 0 0 9.069714-10.898286L334.409143 275.748571a8.777143 8.777143 0 0 0-3.291429-4.608 9.216 9.216 0 0 0-10.752 0 8.777143 8.777143 0 0 0-3.291428 4.608" fill="#006EFF" p-id="36227"></path><path d="M619.227429 57.490286A8.777143 8.777143 0 0 0 615.862857 52.955429a9.216 9.216 0 0 0-10.752 0 8.777143 8.777143 0 0 0-3.291428 4.534857L362.569143 961.828571a8.996571 8.996571 0 0 0 8.996571 10.898286h478.354286a9.216 9.216 0 0 0 9.142857-6.875428 8.996571 8.996571 0 0 0 0-4.022858L619.154286 57.490286z" fill="#006EFF" p-id="36228"></path><path d="M443.318857 375.442286L291.474286 961.828571a9.069714 9.069714 0 0 0 9.069714 10.971429l302.957714 0.073143a9.216 9.216 0 0 0 7.314286-3.364572 9.142857 9.142857 0 0 0 1.828571-7.68L460.653714 375.442286a9.216 9.216 0 0 0-8.704-6.290286 9.216 9.216 0 0 0-8.630857 6.290286" fill="#00E5E5" p-id="36229"></path></svg>

src/assets/img/cloud/zstack.svg

@@ -0,0 +1 @@
+<svg t="1717746226986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52962" width="200" height="200"><path d="M527.36 102.4H450.048L350.0032 266.8544h68.9152L25.6 921.6h263.68l96.256-164.7616H317.1328l299.7248-489.984L527.36 102.4z m124.4672 211.7632l-233.1136 387.584h257.6896l32.512 55.0912H455.168L364.4928 921.6H998.4l-183.7056-327.168H681.472l27.3408-58.0608h69.12l-126.1568-222.208z" fill="#2558E6" p-id="52963"></path></svg>

src/components/AccountCreateUpdateForm/index.vue

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

src/components/AccountListTable/AccountCreateUpdate.vue

@@ -1,142 +0,0 @@
-<template>
-  <Dialog
-    :title="title"
-    :visible.sync="iVisible"
-    :destroy-on-close="true"
-    :show-cancel="false"
-    :show-confirm="false"
-    :close-on-click-modal="false"
-    v-bind="$attrs"
-    width="70%"
-    v-on="$listeners"
-  >
-    <AccountCreateUpdateForm
-      v-if="!loading"
-      ref="form"
-      :account="account"
-      :asset="asset"
-      @add="addAccount"
-      @edit="editAccount"
-    />
-  </Dialog>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog'
-import AccountCreateUpdateForm from '@/components/AccountCreateUpdateForm'
-
-export default {
-  name: 'CreateAccountDialog',
-  components: {
-    Dialog,
-    AccountCreateUpdateForm
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    asset: {
-      type: Object,
-      default: null
-    },
-    account: {
-      type: Object,
-      default: () => ({})
-    },
-    title: {
-      type: String,
-      default: function() {
-        return this.$t('assets.AddAccount')
-      }
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      platform: {}
-    }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    },
-    protocols() {
-      return this.asset ? this.asset.protocol : []
-    }
-  },
-  methods: {
-    addAccount(form) {
-      const formValue = Object.assign({}, form)
-      let assets = []
-      if (this.asset) {
-        assets = [this.asset.id]
-      } else {
-        assets = formValue.assets
-      }
-      delete formValue.assets
-      if (assets.length === 0) {
-        this.$message.error(this.$tc('assets.PleaseSelectAsset'))
-        return
-      }
-      const data = []
-      for (const asset of assets) {
-        data.push({
-          ...formValue,
-          asset
-        })
-      }
-      this.$axios.post(`/api/v1/accounts/accounts/`, data).then(() => {
-        this.iVisible = false
-        this.$emit('add', true)
-        this.$message.success(this.$tc('common.createSuccessMsg'))
-      }).catch(error => this.setFieldError(error))
-    },
-    editAccount(form) {
-      const data = { ...form }
-      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
-        this.iVisible = false
-        this.$emit('add', true)
-        this.$message.success(this.$tc('common.updateSuccessMsg'))
-      }).catch(error => this.setFieldError(error))
-    },
-    setFieldError(error) {
-      const response = error.response
-      const data = response.data
-      const refsAutoDataForm = this.$refs.form.$refs.AutoDataForm
-      if (response.status === 400) {
-        for (const key of Object.keys(data)) {
-          let err = ''
-          let current = key
-          let errorTips = data[current]
-          if (errorTips instanceof Array) {
-            errorTips = _.filter(errorTips, (item) => Object.keys(item).length > 0)
-            for (const i of errorTips) {
-              if (i instanceof Object) {
-                err += i?.port?.join(',')
-              } else {
-                err += errorTips
-              }
-            }
-          } else {
-            err = errorTips
-          }
-          if (current === 'secret') {
-            current = refsAutoDataForm.form.secret_type?.value || key
-          }
-          refsAutoDataForm.setFieldError(current, err)
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/AccountListTable/AccountList.vue

@@ -1,340 +0,0 @@
-<template>
-  <div>
-    <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
-    <ViewSecret
-      v-if="showViewSecretDialog"
-      :account="account"
-      :url="secretUrl"
-      :visible.sync="showViewSecretDialog"
-    />
-    <UpdateSecretInfo
-      v-if="showUpdateSecretDialog"
-      :account="account"
-      :visible.sync="showUpdateSecretDialog"
-      @updateAuthDone="onUpdateAuthDone"
-    />
-    <AccountCreateUpdate
-      v-if="showAddDialog"
-      :account="account"
-      :asset="iAsset"
-      :title="accountCreateUpdateTitle"
-      :visible.sync="showAddDialog"
-      @add="addAccountSuccess"
-    />
-  </div>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter } from '@/components/TableFormatters'
-import ViewSecret from './ViewSecret'
-import UpdateSecretInfo from './UpdateSecretInfo'
-import AccountCreateUpdate from './AccountCreateUpdate'
-import { connectivityMeta } from './const'
-import { openTaskPage } from '@/utils/jms'
-
-export default {
-  name: 'AccountListTable',
-  components: {
-    ListTable,
-    UpdateSecretInfo,
-    ViewSecret,
-    AccountCreateUpdate
-  },
-  props: {
-    url: {
-      type: String,
-      required: true
-    },
-    exportUrl: {
-      type: String,
-      default() {
-        return this.url.replace('/accounts/accounts/', '/accounts/account-secrets/')
-      }
-    },
-    hasLeftActions: {
-      type: Boolean,
-      default: false
-    },
-    otherActions: {
-      type: Array,
-      default: null
-    },
-    hasClone: {
-      type: Boolean,
-      default: false
-    },
-    asset: {
-      type: Object,
-      default: null
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    hasExport: {
-      type: Boolean,
-      default: true
-    },
-    hasImport: {
-      type: Boolean,
-      default: true
-    },
-    columnsMeta: {
-      type: Object,
-      default: () => {
-      }
-    },
-    headerExtraActions: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    const vm = this
-    return {
-      showViewSecretDialog: false,
-      showUpdateSecretDialog: false,
-      showAddDialog: false,
-      accountCreateUpdateTitle: this.$t('assets.AddAccount'),
-      iAsset: this.asset,
-      account: {},
-      secretUrl: '',
-      tableConfig: {
-        url: this.url,
-        permissions: {
-          app: 'assets',
-          resource: 'account'
-        },
-        columnsExclude: ['spec_info'],
-        columns: [
-          'name', 'username', 'asset', 'privileged',
-          'secret_type', 'source', 'actions'
-        ],
-        columnsMeta: {
-          name: {
-            formatter: function(row) {
-              const to = {
-                name: 'AssetAccountDetail',
-                params: { id: row.id }
-              }
-              if (vm.$hasPerm('accounts.view_account')) {
-                return <router-link to={to}>{row.name}</router-link>
-              } else {
-                return <span>{row.name}</span>
-              }
-            }
-          },
-          asset: {
-            label: this.$t('assets.Asset'),
-            formatter: function(row) {
-              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>
-              }
-            }
-          },
-          secret_type: {
-            width: '100px',
-            formatter: function(row) {
-              return row.secret_type.label
-            }
-          },
-          source: {
-            formatter: function(row) {
-              return row.source.label
-            }
-          },
-          has_secret: {
-            width: '100px',
-            formatterArgs: {
-              showFalse: false
-            }
-          },
-          privileged: {
-            label: this.$t('assets.Privileged'),
-            width: '120px',
-            formatterArgs: {
-              showText: false,
-              showFalse: false
-            }
-          },
-          connectivity: connectivityMeta,
-          actions: {
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
-              hasClone: this.hasClone,
-              moreActionsTitle: this.$t('common.More'),
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('common.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: 'Delete',
-                  title: this.$t('common.Delete'),
-                  can: this.$hasPerm('accounts.delete_account'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
-                      this.$message.success(this.$tc('common.deleteSuccessMsg'))
-                      this.$refs.ListTable.reloadTable()
-                    })
-                  }
-                },
-                {
-                  name: 'Test',
-                  title: this.$t('common.Test'),
-                  can: ({ row }) =>
-                    !this.$store.getters.currentOrgIsRoot &&
-                    this.$hasPerm('accounts.change_account') &&
-                    row.asset['auto_info'].ansible_enabled &&
-                    row.asset['auto_info'].ping_enabled,
-                  callback: ({ row }) => {
-                    this.$axios.post(
-                      `/api/v1/accounts/accounts/tasks/`,
-                      { action: 'verify', accounts: [row.id] }
-                    ).then(res => {
-                      openTaskPage(res['task'])
-                    })
-                  }
-                },
-                {
-                  name: 'Update',
-                  title: this.$t('common.Update'),
-                  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('assets.UpdateAccount')
-                    setTimeout(() => {
-                      vm.showAddDialog = true
-                    })
-                  }
-                }
-              ]
-            }
-          },
-          ...this.columnsMeta
-        }
-      },
-      headerActions: {
-        hasLeftActions: this.hasLeftActions,
-        hasMoreActions: true,
-        hasCreate: false,
-        hasImport: this.hasImport,
-        hasExport: this.hasExport && this.$hasPerm('accounts.view_accountsecret'),
-        handleImportClick: ({ selectedRows }) => {
-          this.$eventBus.$emit('showImportDialog', {
-            selectedRows,
-            url: '/api/v1/accounts/accounts/',
-            name: this?.name
-          })
-        },
-        exportOptions: {
-          url: this.exportUrl,
-          mfaVerifyRequired: true
-        },
-        importOptions: {
-          canImportCreate: this.$hasPerm('accounts.add_account'),
-          canImportUpdate: this.$hasPerm('accounts.change_account')
-        },
-        extraActions: [
-          {
-            name: 'add',
-            title: this.$t('common.Add'),
-            type: 'primary',
-            can: () => {
-              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
-            },
-            callback: async() => {
-              await this.getAssetDetail()
-              setTimeout(() => {
-                vm.iAsset = this.asset
-                vm.account = {}
-                vm.accountCreateUpdateTitle = this.$t('assets.AddAccount')
-                vm.showAddDialog = true
-              })
-            }
-          },
-          ...this.headerExtraActions
-          // {
-          //   name: 'autocreate',
-          //   title: this.$t('accounts.AutoCreate'),
-          //   type: 'default'
-          // }
-        ],
-        canBulkDelete: vm.$hasPerm('accounts.delete_account'),
-        searchConfig: {
-          getUrlQuery: false,
-          exclude: ['asset']
-        },
-        hasSearch: true
-      }
-    }
-  },
-  watch: {
-    url(iNew) {
-      this.$set(this.tableConfig, 'url', iNew)
-      this.$set(this.headerActions.exportOptions, 'url', iNew.replace(/(.*)accounts/, '$1account-secrets'))
-    }
-  },
-  mounted() {
-    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)
-      }
-    }
-  },
-  methods: {
-    onUpdateAuthDone(account) {
-      Object.assign(this.account, account)
-    },
-    addAccountSuccess() {
-      this.$refs.ListTable.reloadTable()
-    },
-    async getAssetDetail() {
-      const { query: { asset }} = this.$route
-      if (asset) {
-        this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
-      }
-    },
-    refresh() {
-      this.$refs.ListTable.reloadTable()
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.cell a {
-  color: var(--color-info);
-}
-</style>

src/components/AccountListTable/UpdateSecretInfo.vue

@@ -1,99 +0,0 @@
-<template>
-  <Dialog
-    :destroy-on-close="true"
-    :title="$tc('assets.UpdateAssetUserToken')"
-    :visible.sync="visible"
-    width="50"
-    @cancel="handleCancel()"
-    @confirm="handleConfirm()"
-    v-on="$listeners"
-  >
-    <el-form label-position="right" label-width="90px">
-      <el-form-item :label="$tc('assets.Name')">
-        <el-input v-model="account['asset_name']" readonly />
-      </el-form-item>
-      <el-form-item :label="$tc('assets.Username')">
-        <el-input v-model="account['username']" readonly />
-      </el-form-item>
-      <el-form-item :label="$tc('assets.Password')">
-        <UpdateToken v-model="authInfo.password" />
-      </el-form-item>
-      <el-form-item :label="$tc('assets.SSHSecretKey')">
-        <UploadKey @input="getFile" />
-      </el-form-item>
-      <el-form-item :label="$tc('assets.Passphrase')">
-        <UpdateToken v-model="authInfo.passphrase" />
-      </el-form-item>
-    </el-form>
-  </Dialog>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog'
-import { UpdateToken, UploadKey } from '@/components/FormFields'
-import { encryptPassword } from '@/utils/crypto'
-
-export default {
-  name: 'UpdateSecretInfo',
-  components: {
-    Dialog,
-    UploadKey,
-    UpdateToken
-  },
-  props: {
-    account: {
-      type: Object,
-      default: () => ({})
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      secretInfo: {
-        password: '',
-        private_key: '',
-        passphrase: ''
-      }
-    }
-  },
-  methods: {
-    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('common.updateSuccessMsg'))
-        this.$emit('updateAuthDone', res)
-        this.$emit('update:visible', false)
-      }).catch(err => {
-        const errMsg = Object.values(err.response.data).join(', ')
-        this.$message.error(this.$tc('common.updateErrorMsg') + ' ' + errMsg)
-        this.$emit('update:visible', true)
-      })
-    },
-    handleCancel() {
-      this.$emit('update:visible', false)
-    },
-    getFile(file) {
-      this.secretInfo.private_key = file
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/AccountListTable/const.js

@@ -1,26 +0,0 @@
-import i18n from '@/i18n/i18n'
-import { ChoicesFormatter } from '@/components/TableFormatters'
-
-export const connectivityMeta = {
-  label: i18n.t('assets.Connectivity'),
-  formatter: ChoicesFormatter,
-  formatterArgs: {
-    faChoices: {
-      '-': '',
-      ok: 'fa-check-circle',
-      err: 'fa-times-circle'
-    },
-    classChoices: {
-      ok: 'text-primary',
-      err: 'text-danger'
-    },
-    getText({ cellValue }) {
-      if (cellValue?.value === '-') {
-        return '-'
-      } else {
-        return cellValue?.label
-      }
-    }
-  },
-  width: '100px'
-}

src/components/Announcement/index.vue

@@ -1,71 +0,0 @@
-<template>
-  <el-alert
-    v-if="enabled && !isViewed()"
-    class="announcement"
-    type="success"
-    :center="false"
-    :title="title"
-    @close="onClose"
-  >
-    <span class="announcement-main">{{ announcement.content }}</span>
-    <span v-if="announcement.link">
-      <el-link :href="announcement.link" target="_blank" class="link-more">
-        {{ $t('common.ViewMore') }}
-      </el-link>
-      <i class="fa fa-external-link" />
-    </span>
-  </el-alert>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'Announcement',
-  data() {
-    return {
-      viewedKey: 'AnnouncementViewed'
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'publicSettings'
-    ]),
-    announcement() {
-      const ann = this.publicSettings.ANNOUNCEMENT
-      return { id: ann['ID'], subject: ann['SUBJECT'], content: ann['CONTENT'], link: ann['LINK'] }
-    },
-    enabled() {
-      return this.publicSettings.ANNOUNCEMENT_ENABLED && (this.announcement.content || this.announcement.subject)
-    },
-    title() {
-      return this.$t('common.Announcement') + ': ' + this.announcement.subject
-    }
-  },
-  methods: {
-    onClose() {
-      localStorage.setItem(this.viewedKey, this.announcement.id)
-    },
-    isViewed() {
-      const viewedId = localStorage.getItem(this.viewedKey)
-      return viewedId === this.announcement.id
-    }
-  }
-}
-</script>
-
-<style scoped>
-.announcement >>> .el-alert__content {
-  width: 100%;
-}
-.announcement-main {
-  word-wrap:break-word;
-  white-space: pre-wrap;
-}
-.link-more {
-  font-size: 10px;
-  margin-left: 10px;
-  border-bottom: solid 1px;
-}
-
-</style>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -0,0 +1,277 @@
+import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
+import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
+
+export const accountFieldsMeta = (vm) => {
+  const defaultPrivilegedAccounts = ['root', 'administrator']
+
+  function onPrivilegedUser(value, updateForm) {
+    const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+    if (maybePrivileged) {
+      updateForm({ privileged: true, secret_reset: false, push_now: false })
+    }
+  }
+
+  return {
+    assets: {
+      component: Select2,
+      label: vm.$t('Assets'),
+      rules: [Required],
+      el: {
+        multiple: true,
+        ajax: {
+          url: '/api/v1/assets/assets/',
+          transformOption: (item) => {
+            return { label: item.name + '(' + item.address + ')', value: item.id }
+          }
+        }
+      },
+      hidden: () => {
+        return vm.platform || vm.asset
+      }
+    },
+    template: {
+      component: Select2,
+      rules: [Required],
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        },
+        multiple: false,
+        ajax: {
+          url: '/api/v1/accounts/account-templates/',
+          transformOption: (item) => {
+            return { label: item.name, value: item.id }
+          }
+        }
+      },
+      hidden: () => {
+        return vm.platform || vm.asset || !vm.addTemplate
+      }
+    },
+    on_invalid: {
+      rules: [Required],
+      label: vm.$t('AccountPolicy'),
+      helpTip: vm.$t('AccountPolicyHelpText'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
+      hidden: () => {
+        return vm.platform || vm.asset
+      }
+    },
+    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 })
+            }
+          }
+          onPrivilegedUser(value, updateForm)
+        }
+      },
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    username: {
+      el: {
+        get disabled() {
+          return !!vm.account?.name || vm.isDisabled
+        }
+      },
+      on: {
+        input: ([value], updateForm) => {
+          vm.usernameChanged = true
+        },
+        change: ([value], updateForm) => {
+          onPrivilegedUser(value, updateForm)
+        }
+      },
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    privileged: {
+      label: vm.$t('Privileged'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
+      hidden: () => {
+        return vm.addTemplate
+      }
+    },
+    su_from: {
+      component: Select2,
+      hidden: (formValue) => {
+        return !vm.asset?.id || !vm.iPlatform.su_enabled
+      },
+      el: {
+        multiple: false,
+        clearable: true,
+        ajax: {
+          url: `/api/v1/accounts/accounts/su-from-accounts/?account=${vm.account?.id || ''}&asset=${vm.asset?.id || ''}`,
+          transformOption: (item) => {
+            return { label: `${item.name}(${item.username})`, value: item.id }
+          }
+        }
+      }
+    },
+    su_from_username: {
+      label: vm.$t('UserSwitchFrom'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
+      hidden: (formValue) => {
+        return vm.platform || vm.asset || vm.addTemplate
+      }
+    },
+    password: {
+      label: vm.$t('Password'),
+      component: UpdateToken,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
+      hidden: (formValue) => {
+        return formValue.secret_type !== 'password' || vm.addTemplate
+      }
+    },
+    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
+      }
+    },
+    push_now: {
+      helpTip: vm.$t('WindowsPushHelpText'),
+      hidden: (formValue) => {
+        const automation = vm.iPlatform.automation || {}
+        return !automation.push_account_enabled ||
+          !automation.ansible_enabled ||
+          !vm.$hasPerm('accounts.push_account') ||
+          (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
+          vm.addTemplate ||
+          !formValue.secret_reset
+      }
+    },
+    params: {
+      label: vm.$t('PushParams'),
+      component: AutomationParamsForm,
+      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 ||
+          !automation.push_account_enabled ||
+          !automation.ansible_enabled ||
+          (formValue.secret_type === 'ssh_key' &&
+            vm.iPlatform.type.value === 'windows') ||
+          !vm.$hasPerm('accounts.push_account') ||
+          vm.addTemplate
+      }
+    },
+    is_active: {
+      label: vm.$t('IsActive'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      }
+    },
+    comment: {
+      label: vm.$t('Comment'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      }
+    },
+    secret_reset: {
+      label: vm.$t('SecretReset'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      }
+    }
+  }
+}

src/components/Apps/AccountCreateUpdateForm/index.vue

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

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

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -0,0 +1,209 @@
+<template v-if="iVisible">
+  <Drawer
+    :title="title"
+    :visible="iVisible"
+    class="drawer"
+    @close-drawer="handleCloseDrawer"
+  >
+    <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>
+</template>
+
+<script>
+import Drawer from '@/components/Drawer/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,
+    AccountCreateUpdateForm
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    addTemplate: {
+      type: Boolean,
+      default: false
+    },
+    asset: {
+      type: Object,
+      default: null
+    },
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('AddAccount')
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      platform: {}
+    }
+  },
+  computed: {
+    protocols() {
+      return this.asset ? this.asset.protocol : []
+    },
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    addAccount(form) {
+      const formValue = Object.assign({}, form)
+      let data, url, iVisible
+      if (this.asset) {
+        data = {
+          asset: this.asset.id,
+          ...formValue
+        }
+        iVisible = false
+        url = `/api/v1/accounts/accounts/`
+      } else {
+        iVisible = true
+        data = formValue
+        url = `/api/v1/accounts/accounts/bulk/`
+        if (data.assets.length === 0) {
+          this.$message.error(this.$tc('PleaseSelectAsset'))
+          return
+        }
+      }
+      this.$axios.post(url, data, {
+        disableFlashErrorMsg: iVisible
+      }).then((data) => {
+        this.handleResult(data, null)
+        this.iVisible = iVisible
+        if (!iVisible) {
+          this.$emit('add', true)
+        }
+      }).catch(error => {
+        this.iVisible = true
+        this.handleResult(null, error)
+      })
+    },
+    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))
+      }
+    },
+    handleResult(resp, error) {
+      let bulkCreate = !this.asset
+      if (error && !Array.isArray(error?.response?.data)) {
+        bulkCreate = false
+      }
+      if (resp && !Array.isArray(resp)) {
+        bulkCreate = false
+      }
+      if (!bulkCreate) {
+        if (!error) {
+          this.$message.success(this.$tc('CreateSuccessMsg'))
+        } else {
+          this.setFieldError(error)
+        }
+      } else {
+        let result
+        if (error) {
+          result = error.response.data
+        } else {
+          result = resp
+        }
+        this.$emit('bulk-create-done', result)
+      }
+    },
+    setFieldError(error) {
+      const response = error.response
+      const data = response.data
+      const refsAutoDataForm = this.$refs.form.$refs.AutoDataForm
+      if (response.status === 400) {
+        for (const key of Object.keys(data)) {
+          let err = ''
+          let current = key
+          let errorTips = data[current]
+          if (errorTips instanceof Array) {
+            errorTips = _.filter(errorTips, (item) => Object.keys(item).length > 0)
+            for (const i of errorTips) {
+              if (i instanceof Object) {
+                err += i?.port?.join(',')
+              } else {
+                err += errorTips
+              }
+            }
+          } else {
+            err = errorTips
+          }
+          if (current === 'secret') {
+            current = refsAutoDataForm.form.secret_type?.value || key
+          }
+          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

@@ -0,0 +1,514 @@
+<template>
+  <div>
+    <DrawerListTable
+      ref="ListTable"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :quick-filters="quickFilters"
+      :table-config="tableConfig"
+    />
+    <ViewSecret
+      v-if="showViewSecretDialog"
+      :account="account"
+      :url="secretUrl"
+      :visible.sync="showViewSecretDialog"
+    />
+    <UpdateSecretInfo
+      v-if="showUpdateSecretDialog"
+      :account="account"
+      :visible.sync="showUpdateSecretDialog"
+      @updateAuthDone="onUpdateAuthDone"
+    />
+    <AccountCreateUpdate
+      v-if="showAddDialog"
+      :account="account"
+      :add-template="addTemplate"
+      :asset="iAsset"
+      :title="accountCreateUpdateTitle"
+      :visible.sync="showAddDialog"
+      @add="addAccountSuccess"
+      @bulk-create-done="showBulkCreateResult($event)"
+    />
+    <ResultDialog
+      v-if="showResultDialog"
+      :result="createAccountResults"
+      :visible.sync="showResultDialog"
+      @close-all="closeAll"
+    />
+    <AccountBulkUpdateDialog
+      v-if="updateSelectedDialogSetting.visible"
+      :visible.sync="updateSelectedDialogSetting.visible"
+      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 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 AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
+
+export default {
+  name: 'AccountListTable',
+  components: {
+    ViewSecret,
+    ResultDialog,
+    DrawerListTable,
+    UpdateSecretInfo,
+    AccountCreateUpdate,
+    PasswordHistoryDialog,
+    AccountBulkUpdateDialog
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    exportUrl: {
+      type: String,
+      default() {
+        return this.url.replace('/accounts/accounts/', '/accounts/account-secrets/')
+      }
+    },
+    hasLeftActions: {
+      type: Boolean,
+      default: false
+    },
+    otherActions: {
+      type: Array,
+      default: null
+    },
+    hasClone: {
+      type: Boolean,
+      default: true
+    },
+    asset: {
+      type: Object,
+      default: null
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    hasExport: {
+      type: Boolean,
+      default: true
+    },
+    hasImport: {
+      type: Boolean,
+      default: true
+    },
+    hasDeleteAction: {
+      type: Boolean,
+      default: true
+    },
+    columnsMeta: {
+      type: Object,
+      default: () => {
+      }
+    },
+    columnsDefault: {
+      type: Array,
+      default: () => ([
+        'name', 'username', 'secret', 'asset', 'platform', 'connect'
+      ])
+    },
+    headerExtraActions: {
+      type: Array,
+      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: [],
+      iAsset: this.asset,
+      account: {},
+      secretUrl: '',
+      quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
+      tableConfig: {
+        url: this.url,
+        permissions: {
+          app: 'assets',
+          resource: 'account'
+        },
+        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',
+                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']
+              } else {
+                return ''
+              }
+            }
+          },
+          platform: {
+            label: this.$t('Platform'),
+            width: '150px',
+            formatter: PlatformFormatter,
+            formatterArgs: {
+              platformAttr: 'asset.platform'
+            }
+          },
+          asset: {
+            minWidth: '100px',
+            formatter: function(row) {
+              return row.asset.name
+            }
+          },
+          username: {
+            minWidth: '60px',
+            formatter: function(row) {
+              if (row.ds && row.ds['domain_name']) {
+                return `${row.username}@${row.ds['domain_name']}`
+              } else {
+                return row.username
+              }
+            }
+          },
+          secret_type: {
+            formatter: function(row) {
+              return row.secret_type.label
+            }
+          },
+          source: {
+            formatter: function(row) {
+              return row.source.label
+            }
+          },
+          has_secret: {
+            width: '120px',
+            formatterArgs: {
+              showFalse: false
+            }
+          },
+          privileged: {
+            width: '120px',
+            formatterArgs: {
+              showText: false,
+              showFalse: true
+            }
+          },
+          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'),
+              moreActionsTitle: this.$t('More'),
+              extraActions: accountOtherActions(this)
+            }
+          },
+          ...this.columnsMeta
+        }
+      },
+      headerActions: {
+        hasLabelSearch: true,
+        hasLeftActions: this.hasLeftActions,
+        hasMoreActions: true,
+        hasCreate: false,
+        hasImport: this.hasImport,
+        hasExport: this.hasExport && this.$hasPerm('accounts.view_accountsecret'),
+        exportOptions: {
+          url: this.exportUrl,
+          mfaVerifyRequired: true,
+          tips: this.$t('AccountExportTips')
+        },
+        importOptions: {
+          canImportCreate: this.$hasPerm('accounts.add_account'),
+          canImportUpdate: this.$hasPerm('accounts.change_account')
+        },
+        extraActions: [
+          {
+            name: 'add',
+            title: this.$t('Create'),
+            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
+            },
+            callback: async() => {
+              await this.getAssetDetail()
+              setTimeout(() => {
+                vm.iAsset = this.asset
+                vm.account = {}
+                vm.showAddDialog = true
+                vm.addTemplate = true
+              })
+            }
+          },
+          ...this.headerExtraActions
+        ],
+        extraMoreActions: [
+          {
+            name: 'TestSelected',
+            title: this.$t('TestSelected'),
+            type: 'primary',
+            icon: 'verify',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 &&
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                !this.$store.getters.currentOrgIsRoot
+            },
+            callback: function({ selectedRows }) {
+              const ids = selectedRows.map(v => {
+                return v.id
+              })
+              this.$axios.post(
+                '/api/v1/accounts/accounts/tasks/',
+                { action: 'verify', accounts: ids }).then(res => {
+                openTaskPage(res['task'])
+              }).catch(err => {
+                this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
+              })
+            }.bind(this)
+          },
+          {
+            name: 'BatchClearSecret',
+            title: this.$t('ClearSecret'),
+            type: 'primary',
+            icon: 'clean',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 && vm.$hasPerm('accounts.change_account')
+            },
+            callback: function({ selectedRows }) {
+              const ids = selectedRows.map(v => {
+                return v.id
+              })
+              this.$axios.patch(
+                '/api/v1/accounts/accounts/clear-secret/',
+                { account_ids: ids }).then(() => {
+                this.$message.success(this.$tc('ClearSuccessMsg'))
+              }).catch(err => {
+                this.$message.error(this.$tc('ClearErrorMsg' + ' ' + err))
+              })
+            }.bind(this)
+          },
+          {
+            name: 'UpdateSelected',
+            title: this.$t('UpdateSelected'),
+            icon: 'batch-update',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 &&
+                !this.$store.getters.currentOrgIsRoot &&
+                vm.$hasPerm('accounts.change_account') &&
+                selectedRows.every(i => i.secret_type.value === selectedRows[0].secret_type.value)
+            },
+            callback: ({ selectedRows }) => {
+              vm.updateSelectedDialogSetting.selectedRows = selectedRows
+              vm.updateSelectedDialogSetting.visible = true
+            }
+          }
+        ],
+        canBulkDelete: vm.$hasPerm('accounts.delete_account'),
+        searchConfig: {
+          getUrlQuery: false,
+          exclude: ['asset']
+        },
+        hasSearch: true
+      },
+      updateSelectedDialogSetting: {
+        visible: false,
+        selectedRows: []
+      }
+    }
+  },
+  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)
+      this.$set(this.headerActions.exportOptions, 'url', iNew.replace(/(.*)accounts/, '$1account-secrets'))
+    }
+  },
+  mounted() {
+    this.setActions()
+  },
+  activated() {
+    // 由于组件嵌套较深，有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
+    if (this.tabDeactivated) {
+      setTimeout(() => this.refresh(), 300)
+    }
+  },
+  deactivated() {
+    this.tabDeactivated = true
+  },
+  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() {
+      const { query: { asset }} = this.$route
+      if (asset) {
+        this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
+      }
+    },
+    refresh() {
+      this.$refs.ListTable.reloadTable()
+    },
+    showBulkCreateResult(results) {
+      setTimeout(() => {
+        this.showResultDialog = true
+        this.createAccountResults = results
+      }, 350)
+    },
+    handleAccountBulkUpdate() {
+      this.updateSelectedDialogSetting.visible = false
+      this.$refs.ListTable.reloadTable()
+    },
+    closeAll() {
+      setTimeout(() => {
+        this.showResultDialog = false
+      }, 350)
+
+      setTimeout(() => {
+        this.showAddDialog = false
+      }, 800)
+
+      setTimeout(() => {
+        this.refresh()
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cell a {
+  color: var(--color-info);
+}
+</style>

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

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

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -23,23 +23,24 @@ export default {
   data() {
     return {
       config: {
-        title: this.$t('accounts.HistoryPassword'),
+        title: this.$t('HistoryPassword'),
         visible: false,
         width: '60%',
         tableConfig: {
+          id: 'history_date',
           url: `/api/v1/accounts/account-secrets/${this.account.id}/histories/`,
-          columns: ['secret', 'secret_type', 'history_date'],
+          columns: ['secret', 'version', 'history_date'],
           columnsMeta: {
             secret: {
-              label: this.$t('assets.Password'),
-              formatter: ShowKeyCopyFormatter,
+              label: this.$t('Password'),
+              formatter: SecretViewerFormatter,
               formatterArgs: {
                 hasDownload: false,
                 name: this.account.name
               }
             },
             history_date: {
-              label: this.$t('accounts.HistoryDate')
+              label: this.$t('HistoryDate')
             },
             secret_type: {
               width: '200px'

src/components/Apps/AccountListTable/RemoveAccount.vue

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

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -0,0 +1,101 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-buttons="false"
+    :title="$tc('UpdateAssetUserToken')"
+    :visible.sync="iVisible"
+    width="800px"
+    v-on="$listeners"
+  >
+    <AutoDataForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :form="init"
+      :has-reset="false"
+      :has-save-continue="false"
+      :url="''"
+      method="patch"
+      @submit="handleConfirm"
+    />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
+import { encryptPassword } from '@/utils/crypto'
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+
+export default {
+  name: 'UpdateSecretInfo',
+  components: {
+    AutoDataForm,
+    Dialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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)
+      }
+    }
+  },
+  methods: {
+    handleConfirm(form) {
+      const secretType = this.account.secret_type.value
+      const data = {
+        secret: encryptPassword(form[secretType])
+      }
+      this.$axios.patch(
+        `/api/v1/accounts/accounts/${this.account.id}/`,
+        data,
+        { disableFlashErrorMsg: true }
+      ).then(res => {
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
+        this.iVisible = false
+      }).catch(err => {
+        const errMsg = Object.values(err.response.data).join(', ')
+        this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
+        this.iVisible = false
+      })
+    },
+    handleCancel() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <UserConfirmDialog
-      :url="url"
-      @UserConfirmCancel="exit"
-      @UserConfirmDone="getAuthInfo"
-    />
     <Dialog
       :destroy-on-close="true"
       :show-cancel="false"
@@ -12,34 +7,36 @@
       :visible.sync="showSecret"
       :width="'50'"
       v-bind="$attrs"
-      @confirm="showSecret = false"
+      @confirm="accountConfirmHandle"
       v-on="$listeners"
     >
-      <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
-        <el-form-item :label="$tc('assets.Name')">
+      <el-form :model="secretInfo" class="password-form" label-position="right" label-width="130px">
+        <el-form-item :label="$tc('Name')">
           <span>{{ account['name'] }}</span>
         </el-form-item>
-        <el-form-item :label="$tc('assets.Username')">
+        <el-form-item :label="$tc('Username')">
           <span>{{ account['username'] }}</span>
         </el-form-item>
         <el-form-item :label="secretTypeLabel">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
             :cell-value="secretInfo.secret"
             :col="{ formatterArgs: {
               name: account['name'],
+              secretType: secretType || ''
             }}"
+            @input="onShowKeyCopyFormatterChange"
           />
         </el-form-item>
-        <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('assets.sshKeyFingerprint')">
+        <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('SshKeyFingerprint')">
           <span>{{ sshKeyFingerprint }}</span>
         </el-form-item>
-        <el-form-item :label="$tc('common.DateCreated')">
+        <el-form-item :label="$tc('DateCreated')">
           <span>{{ account['date_created'] | date }}</span>
         </el-form-item>
-        <el-form-item :label="$tc('common.DateUpdated')">
+        <el-form-item :label="$tc('DateUpdated')">
           <span>{{ account['date_updated'] | date }}</span>
         </el-form-item>
-        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('accounts.PasswordRecord')">
+        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('PasswordRecord')">
           <el-link
             :underline="false"
             type="success"
@@ -61,18 +58,17 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import PasswordHistoryDialog from './PasswordHistoryDialog'
-import UserConfirmDialog from '@/components/UserConfirmDialog'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import Dialog from '@/components/Dialog/index.vue'
+import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
+import { encryptPassword } from '@/utils/crypto'
 
 export default {
   name: 'ShowSecretInfo',
   components: {
     Dialog,
     PasswordHistoryDialog,
-    UserConfirmDialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
   },
   props: {
     account: {
@@ -87,10 +83,14 @@ export default {
       type: String,
       default: ''
     },
+    type: {
+      type: String,
+      default: 'account'
+    },
     title: {
       type: String,
       default: function() {
-        return this.$tc('assets.AccountDetail')
+        return this.$tc('Detail')
       }
     },
     showPasswordRecord: {
@@ -100,10 +100,12 @@ export default {
   },
   data() {
     return {
+      modifiedSecret: '',
       secretInfo: {},
       versions: '-',
       showSecret: false,
-      sshKeyFingerprint: '',
+      mfaDialogVisible: true,
+      sshKeyFingerprint: '-',
       historyCount: 0,
       showPasswordHistoryDialog: false
     }
@@ -121,14 +123,32 @@ export default {
       const url = `/api/v1/accounts/account-secrets/${this.account.id}/histories/?limit=1`
       this.$axios.get(url, { disableFlashErrorMsg: true }).then(resp => {
         this.versions = resp.count
+        this.showSecretDialog()
       })
+    } else {
+      this.showSecretDialog()
     }
   },
   methods: {
-    getAuthInfo() {
-      this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
-        this.secretInfo = resp
-        this.sshKeyFingerprint = resp?.spec_info
+    accountConfirmHandle() {
+      this.modifiedSecret && this.onChangeSecretSubmit()
+      this.showSecret = false
+      this.mfaDialogVisible = false
+    },
+    onChangeSecretSubmit() {
+      const params = {
+        name: this.secretInfo.name,
+        secret: encryptPassword(this.modifiedSecret)
+      }
+      const url = this.type === 'account' ? `/api/v1/accounts/accounts` : `/api/v1/accounts/account-templates`
+      this.$axios.patch(`${url}/${this.account.id}/`, params).then(() => {
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
+      })
+    },
+    showSecretDialog() {
+      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+        this.secretInfo = res
+        this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
       })
     },
@@ -137,13 +157,17 @@ export default {
     },
     showHistoryDialog() {
       this.showPasswordHistoryDialog = true
+    },
+    onShowKeyCopyFormatterChange(value) {
+      if (value === this.secretInfo.secret) return
+      this.modifiedSecret = value
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .item-textarea >>> .el-textarea__inner {
+  .item-textarea ::v-deep .el-textarea__inner {
     height: 110px;
   }
 
@@ -156,12 +180,18 @@ export default {
       border-bottom: none;
     }
 
-    >>> .el-form-item__label {
+    ::v-deep .el-form-item__label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
       padding-right: 20px;
       line-height: 30px;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      white-space: normal;
     }
 
-    >>> .el-form-item__content {
+    ::v-deep .el-form-item__content {
       line-height: 30px;
 
       pre {

src/components/Apps/AccountListTable/const.js

@@ -0,0 +1,302 @@
+import { ChoicesFormatter } from '@/components/Table/TableFormatters'
+import { openTaskPage } from '@/utils/jms'
+
+export const connectivityMeta = {
+  formatter: ChoicesFormatter,
+  formatterArgs: {
+    faChoices: {
+      '-': '',
+      ok: 'fa-check-circle',
+      err: 'fa-times-circle'
+    },
+    classChoices: {
+      ok: 'text-primary',
+      err: 'text-danger'
+    },
+    getText({ cellValue }) {
+      if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
+        return '-'
+      } else {
+        return cellValue?.label
+      }
+    }
+  },
+  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

@@ -1,14 +1,14 @@
 <template>
-  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
+  <IBox :fa="icon" :title="title" :type="type" v-bind="$attrs">
     <table style="width: 100%">
       <tr>
         <td colspan="2">
-          <AssetSelect ref="assetSelect" :disabled="disabled" :can-select="canSelect" />
+          <AssetSelect ref="assetSelect" :can-select="canSelect" :disabled="disabled" />
         </td>
       </tr>
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :disabled="disabled" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :disabled="disabled" :type="type" size="small" @click="addObjects">{{ $t('Add') }}</el-button>
         </td>
       </tr>
     </table>
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
-import AssetSelect from '@/components/AssetSelect'
+import IBox from '@/components/Common/IBox/index.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 
 export default {
   name: 'AssetRelationCard',
@@ -48,11 +48,13 @@ export default {
     },
     performAdd: {
       type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
     },
     onAddSuccess: {
       type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
     },
     canSelect: {
       type: Function,
@@ -62,8 +64,7 @@ export default {
     }
   },
   data() {
-    return {
-    }
+    return {}
   },
   methods: {
     addObjects() {
@@ -77,18 +78,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

@@ -1,31 +1,36 @@
 <template>
   <Dialog
-    :title="$tc('assets.Assets')"
+    :close-on-click-modal="false"
+    :title="$tc('Assets')"
     custom-class="asset-select-dialog"
-    top="1vh"
+    top="2vh"
     v-bind="$attrs"
-    width="80vw"
-    @close="handleClose"
+    width="1000px"
     @cancel="handleCancel"
+    @close="handleClose"
     @confirm="handleConfirm"
     v-on="$listeners"
   >
     <AssetTreeTable
       ref="ListPage"
-      v-bind="$attrs"
       :header-actions="headerActions"
-      :table-config="tableConfig"
-      :url="baseUrl"
       :node-url="baseNodeUrl"
+      :sync-select-to-url="false"
+      :table-config="tableConfig"
+      :tree-setting="iTreeSetting"
       :tree-url="`${baseNodeUrl}children/tree/`"
+      :url="baseUrl"
       class="tree-table"
+      v-bind="$attrs"
+      @loaded="handleTableLoaded"
+      v-on="$listeners"
     />
   </Dialog>
 </template>
 
 <script>
-import AssetTreeTable from '@/components/AssetTreeTable'
-import Dialog from '@/components/Dialog'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
 
 export default {
   componentName: 'AssetSelectDialog',
@@ -52,11 +57,16 @@ export default {
     disabled: {
       type: [Boolean, Function],
       default: false
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     const vm = this
     return {
+      isLoaded: false,
       dialogVisible: false,
       rowSelected: _.cloneDeep(this.value) || [],
       rowsAdd: [],
@@ -67,32 +77,22 @@ export default {
         columns: [
           {
             prop: 'name',
-            label: this.$t('assets.Name'),
+            label: this.$t('Name'),
             sortable: true
           },
           {
             prop: 'address',
-            label: this.$t('assets.ipDomain'),
+            label: this.$t('Address'),
             sortable: 'custom'
           },
           {
             prop: 'platform',
-            label: this.$t('assets.Platform'),
+            label: this.$t('Platform'),
             sortable: true,
             formatter: function(row) {
               return row.platform.name
             }
           },
-          {
-            prop: 'protocols',
-            formatter: function(row) {
-              const data = row.protocols.map(p => {
-                return <el-tag size='mini'>{p.name}/{p.port} </el-tag>
-              })
-              return <span> {data} </span>
-            },
-            label: this.$t('assets.Protocols')
-          },
           {
             prop: 'actions',
             has: false
@@ -114,15 +114,24 @@ export default {
       headerActions: {
         hasLeftActions: false,
         hasRightActions: false,
+        hasLabelSearch: true,
         searchConfig: {
           getUrlQuery: false
         }
       }
     }
   },
+  computed: {
+    iTreeSetting() {
+      return { ...this.treeSetting, selectSyncToRoute: false }
+    }
+  },
   methods: {
+    handleTableLoaded() {
+      this.isLoaded = true
+    },
     handleClose() {
-      this.$eventBus.$emit('treeComponentKey')
+      this.$refs.ListPage.$refs.TreeList.componentKey += 1
     },
     handleConfirm() {
       this.$emit('confirm', this.rowSelected, this.rowsAdd)
@@ -161,21 +170,15 @@ export default {
 
   .tree-table {
     .search {
-      .el-input__inner {
-        background-color: #f3f3f3;
-      }
-
-      .el-cascader {
-        background-color: #f3f3f3;
-      }
     }
 
     .left {
       padding: 5px;
+    }
 
-      .treebox {
-        height: 70vh;
-      }
+    .right {
+      min-height: 500px;
+      overflow: auto;
     }
 
     .mini {
@@ -183,13 +186,13 @@ export default {
     }
 
     .transition-box {
-      padding: 5px;
+      padding: 10px 5px;
     }
   }
 }
 
-.page ::v-deep .treebox {
-  height: inherit !important;
+.page ::v-deep .treebox .ztree {
+
 }
 
 .asset-select-dialog ::v-deep .el-icon-circle-check {

src/components/Apps/AssetSelect/index.vue

@@ -11,12 +11,13 @@
     <AssetSelectDialog
       v-if="dialogVisible"
       ref="dialog"
+      :base-node-url="baseNodeUrl"
+      :base-url="baseUrl"
+      :tree-setting="treeSetting"
+      :tree-url-query="treeUrlQuery"
       :value="value"
       :visible.sync="dialogVisible"
       v-bind="$attrs"
-      :tree-url-query="treeUrlQuery"
-      :base-url="baseUrl"
-      :base-node-url="baseNodeUrl"
       @cancel="handleCancel"
       @confirm="handleConfirm"
       v-on="$listeners"
@@ -25,9 +26,8 @@
 </template>
 
 <script>
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
 import AssetSelectDialog from './dialog.vue'
-import { b } from 'css-color-function/lib/adjusters'
 
 export default {
   componentName: 'AssetSelect',
@@ -37,6 +37,10 @@ export default {
       type: String,
       default: '/api/v1/assets/assets/'
     },
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
     baseNodeUrl: {
       type: String,
       default: '/api/v1/assets/nodes/'
@@ -48,6 +52,14 @@ export default {
     value: {
       type: Array,
       default: () => []
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
     }
   },
   data() {
@@ -63,9 +75,11 @@ 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) => {
@@ -76,7 +90,6 @@ export default {
     }
   },
   methods: {
-    b,
     handleFocus() {
       this.$refs.select2.selectRef.blur()
       this.dialogVisible = true
@@ -130,30 +143,27 @@ export default {
   padding: 0 0 0 3px;
 
   .tree-table {
-    .search {
-      .el-input__inner {
-        background-color: #f3f3f3;
-      }
+    .left {
+      padding: 5px 0;
 
-      .el-cascader {
-        background-color: #f3f3f3;
+      .ztree {
+        height: 100%;
       }
     }
 
-    .left {
-      padding: 5px;
-
-      .treebox {
-        height: 70vh;
+    .right {
+      .transition-box {
+        padding-left: 0;
       }
     }
 
     .mini {
       padding-top: 8px;
+      width: 1px;
     }
 
     .transition-box {
-      padding: 5px;
+      padding: 10px 5px;
     }
   }
 }

src/components/Apps/AssetTreeTable/index.vue

@@ -1,10 +1,11 @@
 <template>
   <TreeTable
     ref="TreeList"
-    component="TabTree"
-    :table-config="tableConfig"
     :active-menu.sync="treeTableConfig.activeMenu"
+    :component="treeComponent"
+    :table-config="tableConfig"
     :tree-tab-config="treeTableConfig"
+    :tree-width="treeWidth"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -12,13 +13,13 @@
       <slot name="table" />
     </template>
     <div slot="rMenu" slot-scope="{data}">
-      <slot name="rMenu" :data="data" />
+      <slot :data="data" name="rMenu" />
     </div>
   </TreeTable>
 </template>
 
 <script>
-import TreeTable from '../TreeTable'
+import TreeTable from '../../Table/TreeTable/index.vue'
 import { setRouterQuery, setUrlParam } from '@/utils/common'
 import $ from '@/utils/jquery-vendor'
 
@@ -31,6 +32,10 @@ export default {
       type: String,
       default: '/api/v1/assets/assets/'
     },
+    typeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/category/tree/'
+    },
     nodeUrl: {
       type: String,
       default: '/api/v1/assets/nodes/'
@@ -60,14 +65,17 @@ export default {
     const showAssets = this.treeSetting?.showAssets || this.showAssets
     const treeUrlQuery = this.setTreeUrlQuery()
     const assetTreeUrl = `${this.treeUrl}?assets=${showAssets ? '1' : '0'}&${treeUrlQuery}`
+    const vm = this
 
     return {
+      treeComponent: 'TabTree',
       treeTabConfig: {
         activeMenu: 'CustomTree',
         submenu: [
           {
-            title: this.$t('assets.AssetTree'),
+            title: this.$t('AssetTree'),
             name: 'CustomTree',
+            icon: 'fa-tree',
             treeSetting: {
               showAssets,
               showMenu: false,
@@ -81,22 +89,29 @@ export default {
               nodeUrl: this.nodeUrl,
               treeUrl: assetTreeUrl,
               callback: {
-                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
+                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode),
+                beforeRefresh: () => {
+                  const query = { ...this.$route.query, node_id: '', asset_id: '' }
+                  setTimeout(() => {
+                    vm.$router.replace({ query: query })
+                  }, 100)
+                }
               },
               ...this.treeSetting
             }
           },
           {
-            title: this.$t('assets.BuiltinTree'),
+            title: this.$t('TypeTree'),
+            icon: 'fa-list-ul',
             name: 'BuiltinTree',
             treeSetting: {
               showRefresh: true,
               showAssets: false,
               showSearch: false,
-              customTreeHeaderName: this.$t('assets.BuiltinTree'),
-              url: '/api/v1/assets/nodes/category/tree/',
+              customTreeHeaderName: this.$t('TypeTree'),
+              url: this.typeUrl,
               nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
-              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
               callback: {
                 onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
               }
@@ -107,6 +122,9 @@ export default {
     }
   },
   computed: {
+    treeWidth() {
+      return '23.6%'
+    },
     treeTableConfig() {
       if (this.treeSetting.notShowBuiltinTree) {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
@@ -124,6 +142,9 @@ export default {
     treeSetting.showDelete = this.$hasPerm('assets.delete_node')
   },
   methods: {
+    reloadTable() {
+      this.$refs.TreeList.reloadTable()
+    },
     setTreeUrlQuery() {
       let str = ''
       for (const key in this.treeUrlQuery) {
@@ -143,33 +164,42 @@ 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
-        url = setUrlParam(url, 'node_id', nodeId)
-        url = setUrlParam(url, 'asset_id', '')
+        setParam('node_id', nodeId)
+        setParam('asset_id', '')
       } else if (treeNode.meta.type === 'asset') {
         const assetId = treeNode.meta.data?.id || treeNode.id
-        url = setUrlParam(url, 'node_id', '')
-        url = setUrlParam(url, 'asset_id', assetId)
+        setParam('node_id', '')
+        setParam('asset_id', assetId)
       } else if (treeNode.meta.type === 'category') {
-        url = setUrlParam(url, 'category', treeNode.meta.category)
+        setParam('category', treeNode.meta.category)
       } else if (treeNode.meta.type === 'type') {
-        url = setUrlParam(url, 'category', treeNode.meta.category)
-        url = setUrlParam(url, 'type', treeNode.meta._type)
+        setParam('category', treeNode.meta.category)
+        setParam('type', treeNode.meta._type)
       } else if (treeNode.meta.type === 'platform') {
-        url = setUrlParam(url, 'platform', treeNode.id)
+        setParam('platform', treeNode.id)
+      }
+      setTimeout(() => {
+        const query = this.setTreeUrlQuery()
+        url = query ? `${url}&${query}` : url
+        this.$set(this.tableConfig, 'url', url)
+      })
+
+      if (this.treeSetting.selectSyncToRoute !== false) {
+        setRouterQuery(this, url)
       }
-      const query = this.setTreeUrlQuery()
-      url = query ? `${url}&${query}` : url
-      this.$set(this.tableConfig, 'url', url)
-      setRouterQuery(this, url)
     }
   }
 }
 </script>
-
-<style lang='scss' scoped>
-
-</style>

src/components/Apps/AutomationParams/index.vue

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

src/components/Apps/BlockedIPs/BlockedIPList.vue

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

src/components/Apps/BlockedIPs/index.vue

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

src/components/Apps/ChangeSecret/RecordViewSecret.vue

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

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

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