feat: Add fields and metadata for Kubernetes platform in CloudCreateUpdate component

* perf: upgrade vue version

* perf: Update Dockerfile with new base image tag

---------

Co-authored-by: zhaojisen <1301338853@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20251030_071727 AS stage-build
+FROM jumpserver/lina-base:20251105_092554 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION

package.json

@@ -29,7 +29,7 @@
     "@kangc/v-md-editor": "^1.7.12",
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.30.2",
+    "axios": "0.28.0",
     "axios-retry": "^3.1.9",
     "babel-loader": "^10.0.0",
     "cache-loader": "^4.1.0",
@@ -61,7 +61,7 @@
     "path-to-regexp": "3.3.0",
     "sortablejs": "^1.15.6",
     "v-sanitize": "^0.0.13",
-    "vue": "2.6.10",
+    "vue": "2.7.16",
     "vue-codemirror": "4.0.6",
     "vue-cookie": "^1.1.4",
     "vue-echarts": "^5.0.0-beta.0",
@@ -119,11 +119,11 @@
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",
-    "vue-template-compiler": "2.6.10",
+    "vue-template-compiler": "2.7.16",
     "webpack": "^4.28.4"
   },
   "engines": {
-    "node": ">=8.9",
+    "node": ">=12",
     "npm": ">= 3.0.0"
   },
   "browserslist": [

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -15,10 +15,25 @@ export const accountFieldsMeta = (vm) => {
   }
 
   return {
+    nodes: {
+      component: Select2,
+      label: vm.$t('Node'),
+      el: {
+        value: [],
+        ajax: {
+          url: '/api/v1/assets/nodes/',
+          transformOption: (item) => {
+            return { label: item.full_value, value: item.id }
+          }
+        }
+      },
+      hidden: () => {
+        return !vm.addTemplate
+      }
+    },
     assets: {
       component: AssetSelect,
       label: vm.$t('Asset'),
-      rules: [Required],
       el: {
         multiple: false
       },
@@ -33,7 +48,7 @@ export const accountFieldsMeta = (vm) => {
         get disabled() {
           return vm.isDisabled
         },
-        multiple: false,
+        multiple: vm.addTemplate,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
           transformOption: (item) => {

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -63,7 +63,7 @@ export default {
       encryptedFields: ['secret'],
       fields: [
         [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Asset'), ['assets']],
+        [this.$t('Asset'), ['nodes', 'assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key',

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -93,8 +93,8 @@ export default {
         iVisible = true
         data = formValue
         url = `/api/v1/accounts/accounts/bulk/`
-        if (data.assets.length === 0) {
+        if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) {
-          this.$message.error(this.$tc('PleaseSelectAsset'))
+          this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
           return
         }
       }

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -49,6 +49,10 @@ export default {
             prop: 'asset',
             label: this.$t('Asset')
           },
+          {
+            prop: 'account',
+            label: this.$t('Account')
+          },
           {
             prop: 'state',
             label: this.$t('Status'),

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -37,8 +37,12 @@ export default {
 
       },
       headerActions: {
-        hasExport: false,
+        hasExport: true,
-        hasImport: false,
+        hasImport: true,
+        importOptions: {
+          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
+          canImportUpdate: false
+        },
         hasCreate: true,
         hasSearch: true,
         hasRefresh: true,

src/components/Apps/VariablesHelpTextDialog/index.vue

@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.help-dialog.dialog .el-dialog__footer {
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
+::v-deep .help-table th,
+::v-deep .help-table td {
   height: 40px;
   padding: 0 8px;
   text-align: left;
-  }
+}
 
-  &::v-deep .item-td, .item-label {
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
   cursor: pointer;
   color: var(--color-primary);
-  }
 }
 </style>

src/components/Form/AutoDataForm/index.vue

@@ -223,7 +223,8 @@ export default {
       const mapped = {}
       Object.entries(errors || {}).forEach(([k, v]) => {
         let msg = v
-        if (Array.isArray(v)) msg = v.join('; ')
+        // v是数组并且数组都是字符串，则拼接为字符串
+        if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
         else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
         mapped[k] = String(msg || '')
       })

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

@@ -58,6 +58,7 @@
         :import-option="importOption"
         :json-data="jsonData"
         :url="url"
+        v-bind="$attrs"
         @cancel="cancelUpload"
         @finish="closeDialog"
       />
@@ -247,28 +248,28 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  @import "~@/styles/variables";
+@import "~@/styles/variables";
 
-  .error-msg {
+.error-msg {
   color: $--color-danger;
-  }
+}
 
-  .error-msg.error-results {
+.error-msg.error-results {
   background-color: #f3f3f4;
   max-height: 200px;
   overflow: auto
-  }
+}
 
-  .file-uploader ::v-deep .el-upload {
+.file-uploader ::v-deep .el-upload {
   width: 100%;
   //padding-right: 150px;
-  }
+}
 
-  .file-uploader ::v-deep .el-upload-dragger {
+.file-uploader ::v-deep .el-upload-dragger {
   width: 100%;
-  }
+}
 
-  .importTableZone {
+.importTableZone {
   padding: 0 20px;
 
   .importTable {
@@ -278,15 +279,15 @@ export default {
   .tableFilter {
     padding-bottom: 10px;
   }
-  }
+}
 
-  .importTable ::v-deep .el-dialog__body {
+.importTable ::v-deep .el-dialog__body {
   padding-bottom: 20px;
-  }
+}
 
-  .export-item {
+.export-item {
   margin-left: 80px;
-  }
+}
 
 .export-item:first-child {
   margin-left: 0;

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

@@ -97,6 +97,10 @@ export default {
     origin: {
       type: String,
       default: ''
+    },
+    encryptFields: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -273,11 +277,15 @@ export default {
       }
       return columns
     },
+    getEncryptFields() {
+      const fromProp = Array.isArray(this.encryptFields) && this.encryptFields.length ? this.encryptFields : null
+      return fromProp || ['password', 'secret', 'private_key']
+    },
     generateTableData(tableTitles, tableData) {
       const totalData = []
       tableData.forEach(item => {
         this.$set(item, '@status', 'pending')
-        const encryptFields = ['password', 'secret', 'private_key']
+        const encryptFields = this.getEncryptFields()
         for (const field of encryptFields) {
           if (item[field]) {
             item[field] = encryptPassword(item[field])

src/components/Table/TagSearch/index.vue

@@ -88,7 +88,7 @@ export default {
     },
     filterMaps() {
       const data = {}
-      const keyword = 'q'
+      const keyword = 'search'
       for (let key in this.filterTags) {
         const value = this.filterTags[key]['value']
         if (key === '') {

src/components/Tree/AutoDataZTree/index.vue

@@ -421,12 +421,8 @@ export default {
   display: inline-block;
 }
 
-.data-z-tree {
+.data-z-tree ::v-deep .icon {
-  ::v-deep {
-    .icon {
   width: 10px;
   margin-right: 3px;
-    }
-  }
 }
 </style>

src/layout/components/AppMain.vue

@@ -78,6 +78,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-</style>

src/layout/components/NavHeader/Search.vue

@@ -369,7 +369,7 @@ export default {
           }
         }
 
-        .el-input__prefix .el-input__icon{
+        .el-input__prefix .el-input__icon {
           font-size: 15px;
           line-height: 32px;
         }
@@ -402,11 +402,9 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
 /* 搜索模态框全局样式 */
-.search-modal {
+::v-deep .search-modal {
   &.el-dialog {
     position: fixed;
     top: 5px;
@@ -427,17 +425,17 @@ export default {
   }
 }
 
-body .v-modal {
+::v-deep body .v-modal {
   opacity: 0.3;
 }
 
-.search-modal-content {
+::v-deep .search-modal-content {
   height: 70vh;
   display: flex;
   flex-direction: column;
 }
 
-.search-input-wrapper {
+::v-deep .search-input-wrapper {
   padding: 20px;
   border-bottom: 1px solid #f0f0f0;
   // background: #fff;
@@ -451,7 +449,7 @@ body .v-modal {
   }
 }
 
-.search-results {
+::v-deep .search-results {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
@@ -476,7 +474,7 @@ body .v-modal {
   }
 }
 
-.section-title {
+::v-deep .section-title {
   padding: 12px 24px 6px;
   font-size: 12px;
   line-height: 1.5;
@@ -510,7 +508,7 @@ body .v-modal {
   }
 }
 
-.list {
+::v-deep .list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -581,15 +579,15 @@ body .v-modal {
   }
 }
 
-.loading,
+::v-deep .loading,
-.empty {
+::v-deep .empty {
   padding: 32px 24px;
   color: #909399;
   text-align: center;
   font-size: 14px;
 }
 
-.section.placeholder {
+::v-deep .section.placeholder {
   padding: 32px 24px;
 
   .placeholder-content {
@@ -637,4 +635,3 @@ body .v-modal {
   }
 }
 </style>
-

src/layout/components/TagsView/index.vue

@@ -276,10 +276,8 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
+// reset element css of el-icon-close
-//reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {

src/views/assets/Asset/AssetCreateUpdate/CloudCreateUpdate.vue

@@ -10,7 +10,33 @@ export default {
   components: { BaseAssetCreateUpdate },
   data() {
     return {
-      url: '/api/v1/assets/clouds/'
+      url: '/api/v1/assets/clouds/',
+      addFields: this.getAddFields(),
+      addFieldsMeta: this.getAddFieldsMeta()
+    }
+  },
+  methods: {
+    getAddFields() {
+      const platform = this.$route.query.type
+      const baseFields = []
+
+      if (platform === 'k8s') {
+        baseFields.push([this.$t('Basic'), ['namespace'], 1])
+      }
+
+      return baseFields
+    },
+    getAddFieldsMeta() {
+      const platform = this.$route.query.type
+      const fieldsMeta = {}
+
+      if (platform === 'k8s') {
+        fieldsMeta['namespace'] = {
+          label: this.$t('DefaultNamespace')
+        }
+      }
+
+      return fieldsMeta
     }
   }
 }

src/views/assets/Platform/PlatformDetail/Detail.vue

@@ -143,7 +143,20 @@ export default {
             disabled: !this.canEdit
           },
           callbacks: Object.freeze({
-            click: () => {
+            click: async () => {
+              try {
+                await this.$confirm(
+                  this.$t('overwriteProtocolsAndPortsMsg'),
+                  this.$t('Confirm'),
+                  {
+                    confirmButtonText: this.$t('Confirm'),
+                    cancelButtonText: this.$t('Cancel'),
+                    type: 'warning'
+                  }
+                )
+              } catch (e) {
+                return
+              }
               const data = { platform_id: this.object.id }
               this.$axios.post(
                 '/api/v1/assets/assets/sync-platform-protocols/', data).then(res => {

src/views/login/index.vue

@@ -125,17 +125,21 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
+$input-bg: #283443;
-$light_gray:#fff;
+$input-light-gray: #fff;
-$cursor: #fff;
+$input-cursor: #fff;
 
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+$login-bg: #2d3a4b;
+$login-dark-gray: #889aa4;
+$login-light-gray: #eee;
+
+@supports (-webkit-mask: none) and (not (cater-color: $input-cursor)) {
   .login-container .el-input input {
-    color: $cursor;
+    color: $input-cursor;
   }
 }
 
@@ -147,17 +151,17 @@ $cursor: #fff;
 
     input {
       background: transparent;
-      border: 0px;
+      border: 0;
       -webkit-appearance: none;
-      border-radius: 0px;
+      border-radius: 0;
       padding: 12px 5px 12px 15px;
-      color: $light_gray;
+      color: $input-light-gray;
       height: 47px;
-      caret-color: $cursor;
+      caret-color: $input-cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
+        box-shadow: 0 0 0 1000px $input-bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
+        -webkit-text-fill-color: $input-cursor !important;
       }
     }
   }
@@ -169,17 +173,11 @@ $cursor: #fff;
     color: #454545;
   }
 }
-</style>
-
-<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
 
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: $bg;
+  background-color: $login-bg;
   overflow: hidden;
 
   .login-form {
@@ -205,7 +203,7 @@ $light_gray:#eee;
 
   .svg-container {
     padding: 6px 5px 6px 15px;
-    color: $dark_gray;
+    color: $login-dark-gray;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
@@ -216,7 +214,7 @@ $light_gray:#eee;
 
     .title {
       font-size: 26px;
-      color: $light_gray;
+      color: $login-light-gray;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
@@ -228,7 +226,7 @@ $light_gray:#eee;
     right: 10px;
     top: 7px;
     font-size: 16px;
-    color: $dark_gray;
+    color: $login-dark-gray;
     cursor: pointer;
     user-select: none;
   }

src/views/ops/Adhoc/VariableHelpDialog.vue

@@ -67,28 +67,28 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.help-dialog.dialog .el-dialog__footer {
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
+::v-deep .help-table th,
+::v-deep .help-table td {
   height: 40px;
   padding: 0 8px;
   text-align: left;
-  }
+}
 
-  &::v-deep .item-td, .item-label {
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
   cursor: pointer;
   color: var(--color-primary);
-  }
 }
 </style>

src/views/ops/Adhoc/components/SelectJobAssetDialog.vue

@@ -2,14 +2,14 @@
   <div class="asset-select">
     <el-card>
       <div slot="header" class="clearfix">
-        <span>已选资产({{ selectAssets.length }})</span>
+        <span>{{ $t('selectedAssets') }}({{ selectAssets.length }})</span>
         <el-button
           v-if="selectAssets.length > 0"
           style="float: right; padding: 3px 0"
           type="text"
           @click="handleClick"
         >
-          请选择资产
+          {{ $t('pleaseSelectAssets') }}
         </el-button>
       </div>
       <div
@@ -21,8 +21,8 @@
         @click=" handleClick()"
       >
         <i class="icon el-icon-plus" />
-        <span class="title">请选择资产</span>
+        <span class="title">{{ $t('pleaseSelectAssets') }}</span>
-        <span class="subtitle">点击添加</span>
+        <span class="subtitle">{{ $t('clickToAdd') }}</span>
       </div>
       <div v-else class="asset-list">
         <div
@@ -62,7 +62,7 @@
               >{{ item.name }}</span>
               <i
                 class="el-icon-minus asset-remove-icon"
-                title="移除"
+                :title="$tc('Remove')"
                 @click.stop="removeAsset(item)"
               />
             </el-checkbox>

src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue

@@ -1,66 +1,72 @@
 <template>
   <TwoCol>
     <template>
-      <AutoDetailCard
+      <AutoDetailCard :excludes="excludes" :fields="detailFields" :object="object" :url="url" />
-        :excludes="excludes"
-        :fields="detailFields"
-        :object="object"
-        :url="url"
-      />
     </template>
     <template v-if="hasSummary" #right class="detail-right-quick-actions">
       <IBox
         v-if="object.summary.ok"
-        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})` "
+        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})`"
         type="success"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(item,index) in object.summary.ok"
+            v-for="(item, index) in object.summary.ok"
             :key="index"
             :name="index"
-            :title="item"
             disabled
-          />
+          >
+            <template #title>
+              <el-tooltip :content="item" placement="top" class="text-overflow">
+                <span>{{ item }}</span>
+              </el-tooltip>
+            </template>
+          </el-collapse-item>
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.excludes"
-        :title="`${$tc('ExcludeAsset')} (${Object.keys(object.summary.excludes).length})` "
+        :title="`${$tc('ExcludeAsset')} (${Object.keys(object.summary.excludes).length})`"
         type="warning"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(val,key,index) in object.summary.excludes"
+            v-for="(val, key, index) in object.summary.excludes"
             :key="index"
             :name="index"
-            :title="key"
           >
+            <template #title>
+              <el-tooltip :content="key" placement="top" class="text-overflow">
+                <span>{{ key }}</span>
+              </el-tooltip>
+            </template>
+
             <div>{{ $tc('Reason') }}: {{ val }}</div>
           </el-collapse-item>
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.failures"
-        :title="`${$tc('FailedAsset')} (${Object.keys(Object.assign(object.summary.failures,object.summary.dark)).length})` "
+        :title="`${$tc('FailedAsset')} (${Object.keys(Object.assign(object.summary.failures, object.summary.dark)).length})`"
         type="danger"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(val,key,index) in Object.assign(object.summary.failures,object.summary.dark)"
+            v-for="(val, key, index) in Object.assign(object.summary.failures, object.summary.dark)"
             :key="index"
             :name="index"
-            :title="key"
           >
+            <template #title>
+              <el-tooltip :content="key" placement="top" class="text-overflow">
+                <span>{{ key }}</span>
+              </el-tooltip>
+            </template>
+
             <div>{{ $tc('Reason') }}: {{ val }}</div>
           </el-collapse-item>
         </el-collapse>
       </IBox>
-      <IBox
+      <IBox v-if="object.summary.error" :title="$tc('SystemError')" type="danger">
-        v-if="object.summary.error"
-        :title="$tc('SystemError') "
-        type="danger"
-      >
         {{ object.summary.error }}
       </IBox>
     </template>
@@ -86,11 +92,10 @@ export default {
   },
   data() {
     return {
-      excludes: [
+      excludes: ['job', 'parameters', 'summary', 'task_id', 'timedelta'],
-        'job', 'parameters', 'summary', 'task_id', 'timedelta'
-      ],
       detailFields: [
-        'task_id', 'time_cost',
+        'task_id',
+        'time_cost',
         {
           key: this.$t('IsFinished'),
           value: this.object.is_finished ? this.$t('Yes') : this.$t('No')
@@ -99,8 +104,12 @@ export default {
           key: this.$t('IsSuccess'),
           value: this.object.is_success ? this.$t('Yes') : this.$t('No')
         },
-        'job_type', 'material', 'org_name',
+        'job_type',
-        'date_start', 'date_finished', 'date_created'
+        'material',
+        'org_name',
+        'date_start',
+        'date_finished',
+        'date_created'
       ],
       url: `/api/v1/ops/job-executions/${this.object.id}/`
     }

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -110,6 +110,8 @@ export default {
           type: 'input',
           component: AccountFormatter,
           el: {
+            enableExcludeAccounts: true,
+            enableNoneAccount: true,
             assets: [],
             nodes: []
           },

src/views/perms/AssetPermission/components/AccountFormatter.vue

@@ -3,7 +3,7 @@
     <el-form-item>
       <el-radio-group v-model="realRadioSelected" @input="handleRadioChanged">
         <el-radio
-          v-for="(i) in realChoices"
+          v-for="(i) in iRealChoices"
           :key="i.label"
           :disabled="i.disabled"
           :label="i.value"
@@ -125,6 +125,14 @@ export default {
       type: Boolean,
       default: true
     },
+    enableNoneAccount: {
+      type: Boolean,
+      default: false
+    },
+    enableExcludeAccounts: {
+      type: Boolean,
+      default: false
+    },
     addTemplateHelpText: {
       type: String,
       default() {
@@ -185,6 +193,18 @@ export default {
   computed: {
     virtualAccount() {
       return virtualAccount
+    },
+    iRealChoices: {
+      get() {
+        let choices = this.realChoices.slice()
+        if (!this.enableNoneAccount) {
+          choices = choices.filter(i => i.value !== NoneAccount)
+        }
+        if (!this.enableExcludeAccounts) {
+          choices = choices.filter(i => i.value !== ExcludeAccount)
+        }
+        return choices
+      }
     }
   },
   watch: {

src/views/settings/Auth/Ldap/ImportDialog.vue

@@ -222,13 +222,11 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.el-select-dropdown.select-org-dropdown {
+::v-deep .el-select-dropdown.select-org-dropdown {
   max-width: 300px !important;
 }
-</style>
 
-<style lang="scss" scoped>
 .org-select {
   float: left;
   width: 300px;
@@ -245,5 +243,4 @@ export default {
     width: 180px !important;
   }
 }
-
 </style>

src/views/settings/Security/WatermarkHelpDialog.vue

@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.help-dialog.dialog .el-dialog__footer {
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
+::v-deep .help-table th,
+::v-deep .help-table td {
   height: 40px;
   padding: 0 8px;
   text-align: left;
-  }
+}
 
-  &::v-deep .item-td, .item-label {
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
   cursor: pointer;
   color: var(--color-primary);
-  }
 }
 </style>

src/views/settings/Terminal/Monitor/component/MonitorCard.vue

@@ -219,11 +219,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.el-popover.el-popper.monitor-popover {
+:global(.el-popover.el-popper.monitor-popover) {
   ul {
     padding-left: 15px;
     margin: 0;
+
     li {
       line-height: 24px;
       color: var(--color-primary);
@@ -231,19 +232,19 @@ export default {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+
       &:hover {
-        filter: opacity(65%)!important;
+        filter: opacity(65%) !important;
       }
     }
   }
 }
-</style>
 
-<style lang="less" scoped>
 .echarts {
   width: 100%;
   height: 150px;
 }
+
 .name {
   display: inline-block;
   margin-bottom: 8px;
@@ -256,6 +257,7 @@ export default {
   justify-content: space-between;
   font-size: 14px;
   margin-bottom: 8px;
+
   .num {
     margin-left: 2px;
     cursor: pointer;
@@ -279,9 +281,9 @@ export default {
   line-height: 20px;
   padding: 2px 0;
   color: #fff;
-  -webkit-transition: width .6s ease;
+  -webkit-transition: width 0.6s ease;
-  -o-transition: width .6s ease;
+  -o-transition: width 0.6s ease;
-  transition: width .6s ease;
+  transition: width 0.6s ease;
   overflow: hidden;
 }
 
@@ -292,9 +294,11 @@ export default {
   margin-right: 5px;
   border-radius: 4px;
   background-color: currentColor;
+
   &:hover {
     transform: scale(1.2);
   }
+
   &:last-child {
     margin-right: 0;
   }
@@ -303,6 +307,7 @@ export default {
 .session {
   margin-top: 13px;
   border-left: 1px solid #f3f3f3;
+
   .session-title {
     margin-bottom: 8px;
     color: #a3a3a4;

src/views/tickets/components/Steps.vue

@@ -115,14 +115,12 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.acceptance .el-message-box__content {
+::v-deep .acceptance .el-message-box__content {
   overflow-y: auto;
   max-height: 400px;
 }
-</style>
 
-<style lang='scss' scoped>
 .box {
   margin-bottom: 15px;
 }

yarn.lock

@@ -2340,13 +2340,13 @@ axios-retry@^3.1.9:
     "@babel/runtime" "^7.15.4"
     is-retry-allowed "^2.2.0"
 
-axios@0.30.2:
+axios@0.28.0:
-  version "0.30.2"
+  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.30.2.tgz#256d3a8ee765cc27188d08b8b545a5f5a0c77dad"
+  resolved "https://registry.npmmirror.com/axios/-/axios-0.28.0.tgz#801a4d991d0404961bccef46800e1170f8278c89"
-  integrity sha512-0pE4RQ4UQi1jKY6p7u6i1Tkzqmu+d+/tHS7Q7rKunWLB9WyilBTpHHpXzPNMDj5hTbK0B0PTLSz07yqMBiF6xg==
+  integrity sha512-Tu7NYoGY4Yoc7I+Npf9HhUMtEEpV7ZiLH9yndTCoNhcpBH0kwcvFbzYN9/u5QKI5A6uefjsNNWaz5olJVYS62Q==
   dependencies:
-    follow-redirects "^1.15.4"
+    follow-redirects "^1.15.0"
-    form-data "^4.0.4"
+    form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
@@ -6302,7 +6302,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.15.4:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.11"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz#777d73d72a92f8ec4d2e410eb47352a56b8e8340"
   integrity sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==
@@ -6339,9 +6339,9 @@ forever-agent@~0.6.1:
   resolved "https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
-form-data@^4.0.4:
+form-data@^4.0.0:
   version "4.0.4"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
   integrity sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==
   dependencies:
     asynckit "^0.4.0"
@@ -6916,7 +6916,7 @@ hasown@^2.0.0, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-he@1.2.x, he@^1.1.0, he@^1.1.1:
+he@1.2.x, he@^1.1.1, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -14423,32 +14423,27 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.6.10:
+vue-template-compiler@2.7.16:
-  version "2.6.10"
+  version "2.7.16"
-  resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
-  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
   dependencies:
     de-indent "^1.0.2"
-    he "^1.1.0"
+    he "^1.2.0"
 
 vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@2.6.10:
-  version "2.6.10"
-  resolved "https://registry.npmmirror.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
-  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
-
 vue@2.6.11:
   version "2.6.11"
   resolved "https://registry.npmmirror.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
-vue@^2.2.6:
+vue@2.7.16, vue@^2.2.6:
   version "2.7.16"
-  resolved "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
   integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
   dependencies:
     "@vue/compiler-sfc" "2.7.16"