From ea44fe7c13da2a214017e8477985c0fc4be450a0 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 25 Jun 2024 19:35:25 +0800
Subject: [PATCH] perf: change krry paging

---
 .../Apps/BlockedIPs/BlockedIPList.vue         |  6 ++-
 .../FormFields/JSONManyToManySelect/index.vue | 50 +++++++++++--------
 src/components/Libs/Krry/paging/index.vue     | 14 +++---
 .../Libs/Krry/paging/models/box.vue           |  5 +-
 src/styles/index.scss                         |  2 +-
 .../AccountDetail/TaskSyncAssetList.vue       |  5 +-
 6 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/Apps/BlockedIPs/BlockedIPList.vue b/src/components/Apps/BlockedIPs/BlockedIPList.vue
index db292465d..633d6610f 100644
--- a/src/components/Apps/BlockedIPs/BlockedIPList.vue
+++ b/src/components/Apps/BlockedIPs/BlockedIPList.vue
@@ -27,7 +27,7 @@ export default {
         ],
         columnsMeta: {
           ip: {
-            label: this.$t('Ip')
+            label: this.$t('IP')
           },
           actions: {
             formatterArgs: {
@@ -77,7 +77,9 @@ export default {
               vm.$axios.post(
                 '/api/v1/settings/security/unlock-ip/',
                 {
-                  ips: selectedRows.map(v => { return v.ip })
+                  ips: selectedRows.map(v => {
+                    return v.ip
+                  })
                 }
               ).then(res => {
                 vm.$message.success(vm.$tc('UnlockSuccessMsg'))
diff --git a/src/components/Form/FormFields/JSONManyToManySelect/index.vue b/src/components/Form/FormFields/JSONManyToManySelect/index.vue
index b47efd6a4..8da372296 100644
--- a/src/components/Form/FormFields/JSONManyToManySelect/index.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/index.vue
@@ -101,8 +101,8 @@ export default {
       ids: this.value.ids || [],
       editIndex: -1,
       types: [
-        { name: 'all', label: this.$t('All') + ' ' + this.resource },
-        { name: 'ids', label: this.$t('Spec') + ' ' + this.resource },
+        { name: 'all', label: this.$t('All') + this.$t('WordSep') + this.resource.toLowerCase() },
+        { name: 'ids', label: this.$t('Spec') + this.$t('WordSep') + this.resource.toLowerCase() },
         { name: 'attrs', label: this.$t('SelectByAttr') }
       ],
       tableConfig: {
@@ -110,26 +110,32 @@ export default {
           { prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
           { prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
           { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
-          { prop: 'action', label: this.$t('Action'), align: 'center', width: '120px', formatter: (row, col, cellValue, index) => {
-            return (
-              <div className='input-button'>
-                <el-button
-                  icon='el-icon-edit'
-                  size='mini'
-                  style={{ 'flexShrink': 0 }}
-                  type='primary'
-                  onClick={this.handleAttrEdit({ row, col, cellValue, index })}
-                />
-                <el-button
-                  icon='el-icon-minus'
-                  size='mini'
-                  style={{ 'flexShrink': 0 }}
-                  type='danger'
-                  onClick={this.handleAttrDelete({ row, col, cellValue, index })}
-                />
-              </div>
-            )
-          } }
+          {
+            prop: 'action',
+            label: this.$t('Action'),
+            align: 'center',
+            width: '120px',
+            formatter: (row, col, cellValue, index) => {
+              return (
+                <div className='input-button'>
+                  <el-button
+                    icon='el-icon-edit'
+                    size='mini'
+                    style={{ 'flexShrink': 0 }}
+                    type='primary'
+                    onClick={this.handleAttrEdit({ row, col, cellValue, index })}
+                  />
+                  <el-button
+                    icon='el-icon-minus'
+                    size='mini'
+                    style={{ 'flexShrink': 0 }}
+                    type='danger'
+                    onClick={this.handleAttrDelete({ row, col, cellValue, index })}
+                  />
+                </div>
+              )
+            }
+          }
         ],
         totalData: this.value.attrs || [],
         hasPagination: false
diff --git a/src/components/Libs/Krry/paging/index.vue b/src/components/Libs/Krry/paging/index.vue
index 827fdd0f0..930400c87 100644
--- a/src/components/Libs/Krry/paging/index.vue
+++ b/src/components/Libs/Krry/paging/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="krry-main">
     <el-row :gutter="10">
-      <el-col :md="10" :sm="24">
+      <el-col :md="11" :sm="24">
         <krry-box
           ref="noSelect"
           :async="async"
@@ -25,7 +25,7 @@
           @clear-input="clearQueryInp('left')"
         />
       </el-col>
-      <el-col :md="4" :sm="24" class="buttons">
+      <el-col :md="2" :sm="24" class="buttons">
         <div class="opera">
           <svg-icon v-if="transferOnCheck" class="arrow" icon-class="arrow" />
           <template v-else>
@@ -47,7 +47,7 @@
           </template>
         </div>
       </el-col>
-      <el-col :md="10" :sm="24">
+      <el-col :md="11" :sm="24">
         <krry-box
           ref="hasSelect"
           :data-show-list="checkedData"
@@ -140,7 +140,7 @@ export default {
     },
     transferOnCheck: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
   data() {
@@ -418,6 +418,7 @@ export default {
 .krry-main {
   min-width: 600px;
 }
+
 .inner-center {
   margin: 0 5px;
 }
@@ -431,8 +432,6 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: 10px;
-  width: calc(100% - 5px);
   height: 415px;
 
   .arrow {
@@ -443,7 +442,7 @@ export default {
 
   @media screen and (max-width: 992px) {
     margin: 8px 8px;
-    text-align:start
+    text-align: start
   }
 
   .el-button.is-circle {
@@ -452,6 +451,7 @@ export default {
     display: block;
     margin: 25px auto;
   }
+
   .el-transfer__button {
     padding: 5px;
   }
diff --git a/src/components/Libs/Krry/paging/models/box.vue b/src/components/Libs/Krry/paging/models/box.vue
index 5daf677d9..e359f9bd8 100644
--- a/src/components/Libs/Krry/paging/models/box.vue
+++ b/src/components/Libs/Krry/paging/models/box.vue
@@ -26,7 +26,7 @@
           type="text"
           @change="handleKeyword"
         >
-        <span class="el-input__prefix" style="left: 0px">
+        <span class="el-input__prefix" style="left: 0">
           <i class="el-input__icon el-icon-search" />
         </span>
         <span v-if="searchWord && showClearBtn" class="clear-input">
@@ -288,7 +288,7 @@ export default {
 <style lang="scss" scoped>
 
 .district-panel {
-  width: 280px;
+  width: 298px;
 
   .el-transfer-panel__header {
     .el-checkbox {
@@ -302,7 +302,6 @@ export default {
 
   .el-transfer-panel__body {
     height: 335px;
-    //padding: 6px 0;
 
     .el-transfer-panel__filter {
       margin: 6px 14px;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d36d1b9e9..72142011b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -392,7 +392,7 @@ input[type=file] {
 }
 
 .el-select-group__title {
-  color: $--color-primary !important;
+  color: #909399 !important;
 }
 
 .el-button.el-button--small, .el-button--small.is-round {
diff --git a/src/views/assets/Cloud/Account/AccountDetail/TaskSyncAssetList.vue b/src/views/assets/Cloud/Account/AccountDetail/TaskSyncAssetList.vue
index 82435cee9..4198ed3f1 100644
--- a/src/views/assets/Cloud/Account/AccountDetail/TaskSyncAssetList.vue
+++ b/src/views/assets/Cloud/Account/AccountDetail/TaskSyncAssetList.vue
@@ -12,7 +12,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -46,7 +47,7 @@ export default {
           'instance_id',
           {
             prop: 'asset_ip',
-            label: this.$t('Ip')
+            label: this.$t('IP')
           },
           'region',
           {