From 7804d741a06afd3ec892d80b65620d65d891d28a Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 1 Mar 2024 17:13:58 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20asset=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/theme/element-extra.css                |   2 +-
 src/components/Apps/AssetTreeTable/index.vue  |   2 +
 .../Apps/ResourceActivity/index.vue           |   2 +-
 src/components/DataActions/index.vue          |  10 ++
 src/components/Table/AutoDataTable/index.vue  |  16 +-
 .../Table/ListTable/TableAction/LeftSide.vue  |   1 +
 .../Table/ListTable/TableAction/RightSide.vue |   4 +-
 .../Table/ListTable/TableAction/index.vue     | 151 ++++++++----------
 src/components/Table/TabTree/index.vue        |  24 ++-
 .../TableFormatters/ActionsFormatter.vue      |   2 +-
 .../Tree/DataZTree/components/ZTree/index.vue |   9 +-
 .../GenericCreateUpdateForm/index.vue         |   4 +-
 src/router/workbench/index.js                 |   4 +-
 .../assets/Asset/AssetDetail/Account.vue      |   4 +-
 .../components/PermUserGroupCard.vue          |   6 +-
 src/views/myassets/index.vue                  |   2 +
 src/views/myhome/components/User.vue          |   2 +-
 src/views/ops/Execution/index.vue             |  11 +-
 src/views/ops/File/index.vue                  |   4 +-
 src/views/settings/Task/TaskDetail/index.vue  |   2 +-
 .../users/Group/UserGroupDetail/GroupInfo.vue |   2 +-
 .../UserDetail/UserAssetPermissionRules.vue   |   3 +-
 .../users/User/UserDetail/UserLoginAcl.vue    |   2 +-
 .../users/User/UserDetail/UserSession.vue     |   2 +-
 24 files changed, 159 insertions(+), 112 deletions(-)

diff --git a/public/theme/element-extra.css b/public/theme/element-extra.css
index 3ff7a7a4c..8a8ae3e79 100644
--- a/public/theme/element-extra.css
+++ b/public/theme/element-extra.css
@@ -85,7 +85,7 @@
 
 
 td .el-button.el-button--mini {
-  padding: 1px 3px;
+  padding: 1px 5px;
   line-height: 1.5;
 }
 
diff --git a/src/components/Apps/AssetTreeTable/index.vue b/src/components/Apps/AssetTreeTable/index.vue
index 8bcb54741..7b8523d9e 100644
--- a/src/components/Apps/AssetTreeTable/index.vue
+++ b/src/components/Apps/AssetTreeTable/index.vue
@@ -69,6 +69,7 @@ export default {
           {
             title: this.$t('AssetTree'),
             name: 'CustomTree',
+            icon: 'fa-tree',
             treeSetting: {
               showAssets,
               showMenu: false,
@@ -95,6 +96,7 @@ export default {
           },
           {
             title: this.$t('TypeTree'),
+            icon: 'fa-list-ul',
             name: 'BuiltinTree',
             treeSetting: {
               showRefresh: true,
diff --git a/src/components/Apps/ResourceActivity/index.vue b/src/components/Apps/ResourceActivity/index.vue
index ed3d9a552..d60929bd8 100644
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="18" :sm="24">
+      <el-col :md="20" :sm="24">
         <IBox :title="title" class="block" v-bind="$attrs">
           <el-timeline>
             <el-timeline-item
diff --git a/src/components/DataActions/index.vue b/src/components/DataActions/index.vue
index 90cc17101..046698660 100644
--- a/src/components/DataActions/index.vue
+++ b/src/components/DataActions/index.vue
@@ -90,6 +90,16 @@ export default {
     }
   },
   methods: {
+    hasIcon(action, type = '') {
+      const icon = action.icon
+      if (!icon) {
+        return false
+      }
+      if (type) {
+        return icon.startsWith(type)
+      }
+      return true
+    },
     handleDropdownCallback(command) {
       const [option, dropdown] = command
       const defaultCallback = () => this.$log.debug('No callback found: ', option, dropdown)
diff --git a/src/components/Table/AutoDataTable/index.vue b/src/components/Table/AutoDataTable/index.vue
index 275c19630..eab204fef 100644
--- a/src/components/Table/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -105,6 +105,7 @@ export default {
           col.formatter = DetailFormatter
           col.sortable = 'custom'
           col.showOverflowTooltip = true
+          col.minWidth = '150px'
           break
         case 'actions':
           col = {
@@ -284,11 +285,22 @@ export default {
       col = this.addHelpTipsIfNeed(col)
       col = this.addFilterIfNeed(col)
       col = this.addOrderingIfNeed(col)
-      col.label = toSentenceCase(col.label)
+      col = this.updateLabelIfNeed(col)
+      col = this.setDefaultWidthIfNeed(col)
+      return col
+    },
+    updateLabelIfNeed(col) {
+      if (!col.label) {
+        return col
+      }
+      col.label = col.label
         .replace(' Amount', '')
         .replace(' amount', '')
         .replace('数量', '')
-      col = this.setDefaultWidthIfNeed(col)
+      if (col.label.startsWith('Is ')) {
+        col.label = col.label.replace('Is ', '')
+      }
+      col.label = toSentenceCase(col.label)
       return col
     },
     generateTotalColumns() {
diff --git a/src/components/Table/ListTable/TableAction/LeftSide.vue b/src/components/Table/ListTable/TableAction/LeftSide.vue
index 11f69a281..98b14018c 100644
--- a/src/components/Table/ListTable/TableAction/LeftSide.vue
+++ b/src/components/Table/ListTable/TableAction/LeftSide.vue
@@ -136,6 +136,7 @@ export default {
           title: this.createTitle,
           type: 'primary',
           has: true,
+          icon: 'plus',
           can: this.canCreate,
           dropdown: [],
           callback: this.onCreate || this.handleCreate
diff --git a/src/components/Table/ListTable/TableAction/RightSide.vue b/src/components/Table/ListTable/TableAction/RightSide.vue
index ed9afeccf..26761f781 100644
--- a/src/components/Table/ListTable/TableAction/RightSide.vue
+++ b/src/components/Table/ListTable/TableAction/RightSide.vue
@@ -152,8 +152,6 @@ export default {
     border: none;
     padding: 5px;
     font-size: 14px;
-    width: 28px;
-    height: 28px;
     color: #888;
     background-color: transparent;
   }
@@ -177,6 +175,8 @@ export default {
     padding-left: 10px;
     align-items: center;
     justify-content:center;
+    height: 30px;
+    line-height: 30px;
   }
 
   .table-action-right-side {
diff --git a/src/components/Table/ListTable/TableAction/index.vue b/src/components/Table/ListTable/TableAction/index.vue
index 52629d7d0..dc5a54ce6 100644
--- a/src/components/Table/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -181,107 +181,98 @@ export default {
   .right-side-item {
   }
 
-  .right-side-actions >>> .el-button {
-    border: none;
-    padding: 5px;
-    font-size: 14px;
-    width: 26px;
-    height: 26px;
-    color: #888;
-    background-color: transparent;
-  }
-
-  .right-side-actions >>> .fa {
-    height: 16px;
-    width: 16px;
-  }
-
-  .right-side-actions >>> .el-button:hover {
-    background-color: rgb(0, 0, 0, 0.05);
-  }
-
-  .action-search >>> .el-input__suffix i {
-    font-weight: 500;
-    color: #888;
-  }
-
-  .action-search >>> .el-cascader {
-    line-height: $innerHeight !important;
-  }
-
   .right-side-actions {
     display: flex;
     padding-left: 10px;
     align-items: center;
     justify-content: center;
+    height: $headerHeight;
+
+    >>> .fa {
+      height: 16px;
+      width: 16px;
+    }
+
+    >>> .el-button:hover {
+      background-color: rgb(0, 0, 0, 0.05);
+    }
   }
 
-  .table-action-right-side {
-    display: flex;
-    justify-content: center;
-  }
+    .action-search >>> .el-input__suffix i {
+      font-weight: 500;
+      color: #888;
+    }
 
-  .export-item {
-    display: block;
-    padding: 5px 20px;
-  }
+    .action-search >>> .el-cascader {
+      line-height: $innerHeight !important;
+    }
 
-  .datepicker {
-    margin-left: 10px;
-  }
+    .table-action-right-side {
+      display: flex;
+      justify-content: center;
+    }
 
-  .left-side {
-    float: left;
-    display: block;
-    &>>> .action-item.el-dropdown {
-      &> .el-button {
-        height: 100%;
+    .export-item {
+      display: block;
+      padding: 5px 20px;
+    }
+
+    .datepicker {
+      margin-left: 10px;
+    }
+
+    .left-side {
+      float: left;
+      display: block;
+      &>>> .action-item.el-dropdown {
+        &> .el-button {
+          height: 100%;
+        }
+      }
+      >>> .el-button {
       }
     }
-    >>> .el-button {
+
+    .right-side {
+      float: right;
     }
-  }
 
-  .right-side {
-    float: right;
-  }
+    .search {
+      display: flex;
+      flex-direction: row;
+    }
 
-  .search {
-    display: flex;
-    flex-direction: row;
-  }
+    .mobile .search {
+      display: inherit;
+    }
 
-  .mobile .search {
-    display: inherit;
-  }
+    .mobile .search .datepicker {
+      margin-left: 0;
+    }
 
-  .mobile .search .datepicker {
-    margin-left: 0;
-  }
+    .search.left {
+      float: left;
+      padding: 0 !important;
+    }
 
-  .search.left {
-    float: left;
-    padding: 0 !important;
-  }
+    .search.right {
+      float: right;
+    }
 
-  .search.right {
-    float: right;
-  }
+    .mobile .search.right {
+      float: none;
+    }
 
-  .mobile .search.right {
-    float: none;
-  }
+    .mobile .search.right .action-search {
+      width: 100%;
+    }
 
-  .mobile .search.right .action-search {
-    width: 100%;
-  }
+    .mobile .right-side {
+      padding-top: 5px;
+    }
 
-  .mobile .right-side {
-    padding-top: 5px;
-  }
-
-  .filter-field.right-side-item.action-search {
-    height: 30px;
-  }
+    .filter-field.right-side-item.action-search {
+      height: 30px;
+    }
 
 </style>
diff --git a/src/components/Table/TabTree/index.vue b/src/components/Table/TabTree/index.vue
index e934ab552..31175c0f7 100644
--- a/src/components/Table/TabTree/index.vue
+++ b/src/components/Table/TabTree/index.vue
@@ -15,9 +15,9 @@
           :label-content="item.labelContent"
           :name="item.name"
         >
-          <span slot="label">
-            <i v-if="item.icon" :class="item.icon" class="fa " />
-            {{ item.title }}
+          <span slot="label" class="tab-container">
+            <i v-if="item.icon && !showText" :class="item.icon" class="tab-icon fa " />
+            <span v-if="showText" class="tab-text">{{ item.title }}</span>
             <slot :tab="item.name" name="badge" />
           </span>
         </el-tab-pane>
@@ -67,7 +67,8 @@ export default {
     return {
       flag: false,
       componentKey: 1,
-      activeTreeSetting: {}
+      activeTreeSetting: {},
+      showText: true
     }
   },
   computed: {
@@ -101,8 +102,19 @@ export default {
     this.$eventBus.$on('treeComponentKey', () => {
       this.componentKey += 1
     })
+    this.hiddenTextIfNeed()
   },
   methods: {
+    hiddenTextIfNeed() {
+      const vm = this
+      const hideOverflowingText = _.debounce(function() {
+        const tabs = document.querySelector('.tree-tab .el-tabs__nav-wrap.is-scrollable')
+        vm.showText = !tabs
+      }, 800)
+
+      hideOverflowingText()
+      window.addEventListener('resize', hideOverflowingText)
+    },
     hideRMenu() {
       this.$refs.AutoDataZTree?.hideRMenu()
     },
@@ -185,6 +197,10 @@ export default {
   .el-tabs__item.is-active {
     color:  var(--menu-text-active);
   }
+  .el-tabs__item {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 .only-submenu  {
   &>>> .el-tabs__active-bar {
diff --git a/src/components/Table/TableFormatters/ActionsFormatter.vue b/src/components/Table/TableFormatters/ActionsFormatter.vue
index 481d27969..caabe23f3 100644
--- a/src/components/Table/TableFormatters/ActionsFormatter.vue
+++ b/src/components/Table/TableFormatters/ActionsFormatter.vue
@@ -152,7 +152,7 @@ export default {
         v.has = this.cleanBoolean(v, 'has', true)
         v.can = this.cleanBoolean(v, 'can', true)
         v.callback = this.cleanCallback(v, 'callback')
-        v.fa = this.cleanValue(v, 'fa')
+        v.icon = this.cleanValue(v, 'icon')
         v.order = v.order || 100
         v.tip = this.cleanValue(v, 'tip')
         v.title = this.cleanValue(v, 'title')
diff --git a/src/components/Tree/DataZTree/components/ZTree/index.vue b/src/components/Tree/DataZTree/components/ZTree/index.vue
index 3b58280bb..fee1092a6 100644
--- a/src/components/Tree/DataZTree/components/ZTree/index.vue
+++ b/src/components/Tree/DataZTree/components/ZTree/index.vue
@@ -157,7 +157,7 @@ export default {
         </a>`
       const treeActions = `${showSearch ? searchIcon : ''}${showRefresh ? refreshIcon : ''}`
       const icons = `
-        <span style="float: right; margin-right: 10px">
+        <span style="float: right; margin-right: 10px; position: absolute">
           ${treeActions}
         </span>`
       if (rootNode) {
@@ -427,6 +427,12 @@ div.rMenu li {
     background-color: transparent;
     height: calc(100vh - 237px);
 
+    .level0 .node_name {
+      max-width: 120px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
     li {
       background-color: transparent !important;
 
@@ -442,7 +448,6 @@ div.rMenu li {
 }
 
 ::v-deep #tree-refresh {
-  margin-left: 3px;
 }
 
 ::v-deep .tree-banner-icon-zone {
diff --git a/src/layout/components/GenericCreateUpdateForm/index.vue b/src/layout/components/GenericCreateUpdateForm/index.vue
index 461de28c0..260dfd0ca 100644
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -359,9 +359,9 @@ export default {
           const url = `${curUrl}${cloneFrom}/${query ? ('?' + query) : ''}`
           object = await this.getObjectDetail(url)
           if (object['name']) {
-            object.name = this.$t('CloneFrom') + object.name
+            object.name = this.$t('CloneFrom') + ' ' + object.name
           } else if (object['hostname']) {
-            object.hostname = this.$t('CloneFrom') + object.hostname
+            object.hostname = this.$t('CloneFrom') + ' ' + object.hostname
             object.name = this.$t('CloneFrom') + '' + object.name
           }
         } else {
diff --git a/src/router/workbench/index.js b/src/router/workbench/index.js
index e5360b347..c5cccfa72 100644
--- a/src/router/workbench/index.js
+++ b/src/router/workbench/index.js
@@ -84,7 +84,7 @@ export default {
           path: `${BASE_URL}/koko/elfinder/sftp/`,
           name: '',
           meta: {
-            title: i18n.t('FileManagement'),
+            title: i18n.t('FileExplorer'),
             activeMenu: '/assets',
             permissions: ['rbac.view_filemanager']
           }
@@ -181,7 +181,7 @@ export default {
           name: 'Execution',
           component: () => import('@/views/ops/Execution'),
           meta: {
-            title: i18n.t('Execution'),
+            title: i18n.t('Executions'),
             permissions: ['ops.view_jobexecution']
           }
         },
diff --git a/src/views/assets/Asset/AssetDetail/Account.vue b/src/views/assets/Asset/AssetDetail/Account.vue
index 6b3c698d2..87b8831f8 100644
--- a/src/views/assets/Asset/AssetDetail/Account.vue
+++ b/src/views/assets/Asset/AssetDetail/Account.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="24">
-      <el-col :md="14" :sm="24">
+      <el-col :md="16" :sm="24">
         <AccountListTable
           ref="ListTable"
           :asset="object"
@@ -20,7 +20,7 @@
           @onConfirm="onConfirm"
         />
       </el-col>
-      <el-col :md="10" :sm="24">
+      <el-col :md="8" :sm="24">
         <QuickActions :actions="quickActions" :title="title" type="primary" />
       </el-col>
     </el-row>
diff --git a/src/views/assets/Asset/AssetDetail/components/PermUserGroupCard.vue b/src/views/assets/Asset/AssetDetail/components/PermUserGroupCard.vue
index 66e549d76..0b73da20d 100644
--- a/src/views/assets/Asset/AssetDetail/components/PermUserGroupCard.vue
+++ b/src/views/assets/Asset/AssetDetail/components/PermUserGroupCard.vue
@@ -118,8 +118,8 @@ export default {
     font-size: 13px;
   }
   tr td {
-    line-height: 1.42857;
-    padding: 8px;
+    line-height: 1.2;
+    padding: 4px 8px;
     vertical-align: top;
     display: inline;
     overflow: hidden;
@@ -128,7 +128,7 @@ export default {
   }
   tr.item {
     border-bottom: 1px solid #e7eaec;
-    padding: 8px;
+    padding: 4px  8px;
     display: block;
     &:last-child {
        border-bottom: 0;
diff --git a/src/views/myassets/index.vue b/src/views/myassets/index.vue
index eece3e018..85fe8b750 100644
--- a/src/views/myassets/index.vue
+++ b/src/views/myassets/index.vue
@@ -12,6 +12,7 @@
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
 import { AccountShowFormatter, DialogDetailFormatter } from '@/components/Table/TableFormatters'
+import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
 
 export default {
   components: {
@@ -122,6 +123,7 @@ export default {
           comment: {
             width: '100px'
           },
+          connectivity: connectivityMeta,
           actions: {
             width: '150px',
             align: 'center',
diff --git a/src/views/myhome/components/User.vue b/src/views/myhome/components/User.vue
index c553c5d91..c8de65ae7 100644
--- a/src/views/myhome/components/User.vue
+++ b/src/views/myhome/components/User.vue
@@ -8,7 +8,7 @@
         <el-col :span="5" class="left">
           <el-avatar :size="40" :src="avatarUrl" class="avatar" fit="fill" />
         </el-col>
-        <el-col :span="20">
+        <el-col ::md="20" :sm="24">
           <ul>
             <li><span class="title">{{ $t('Username') }}</span>：<span>{{ users.name }}</span></li>
             <li><span class="title">{{ $t('Email') }}</span>：<span>{{ users.email }}</span></li>
diff --git a/src/views/ops/Execution/index.vue b/src/views/ops/Execution/index.vue
index 055cb991f..2fade6689 100644
--- a/src/views/ops/Execution/index.vue
+++ b/src/views/ops/Execution/index.vue
@@ -30,11 +30,20 @@ export default {
         columnsShow: {
           min: ['material', 'actions'],
           default: [
-            'id', 'job', 'material', 'job_type', 'is_finished', 'is_success',
+            'id', 'job', 'material', 'job_type', 'is_success',
             'time_cost', 'date_created', 'actions'
           ]
         },
         columnsMeta: {
+          job_type: {
+            width: '100px'
+          },
+          id: {
+            width: '100px',
+            formatter(row) {
+              return row.id.slice(0, 8)
+            }
+          },
           count: {
             width: '96px',
             formatter: (row) => {
diff --git a/src/views/ops/File/index.vue b/src/views/ops/File/index.vue
index d4de879eb..98a669b6a 100644
--- a/src/views/ops/File/index.vue
+++ b/src/views/ops/File/index.vue
@@ -7,8 +7,8 @@
             <el-button
               :disabled="runButton.disabled"
               :type="runButton.el&&runButton.el.type"
-              size="mini"
-              style="display: inline-block; margin: 0 2px"
+              size="small"
+              style="display: inline-block; padding: 6px 10px"
               @click="runButton.callback()"
             >
               <i :class="runButton.icon" style="margin-right: 4px;" />{{ runButton.name }}
diff --git a/src/views/settings/Task/TaskDetail/index.vue b/src/views/settings/Task/TaskDetail/index.vue
index e30ca9cc5..418748eef 100644
--- a/src/views/settings/Task/TaskDetail/index.vue
+++ b/src/views/settings/Task/TaskDetail/index.vue
@@ -38,7 +38,7 @@ export default {
             name: 'TaskDetail'
           },
           {
-            title: this.$t('Execution'),
+            title: this.$t('Executions'),
             name: 'TaskHistory',
             hidden: () => !this.$hasPerm('ops.view_celerytaskexecution')
           }
diff --git a/src/views/users/Group/UserGroupDetail/GroupInfo.vue b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
index 80be7d153..8127afdcc 100644
--- a/src/views/users/Group/UserGroupDetail/GroupInfo.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="18" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/users/User/UserDetail/UserAssetPermissionRules.vue b/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
index 4b61687ad..060c17135 100644
--- a/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
+++ b/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="10">
-    <el-col :span="20">
+    <el-col ::md="20" :sm="24">
       <ListTable :header-actions="headerActions" :table-config="tableConfig" />
     </el-col>
   </el-row>
@@ -26,7 +26,6 @@ export default {
     return {
       tableConfig: {
         url: `/api/v1/perms/asset-permissions/?user_id=${this.object.id}`,
-        hasSelection: false,
         hasTree: true,
         columnsExclude: ['actions'],
         columnsExtra: ['action'],
diff --git a/src/views/users/User/UserDetail/UserLoginAcl.vue b/src/views/users/User/UserDetail/UserLoginAcl.vue
index bbce978ae..c93ef1feb 100644
--- a/src/views/users/User/UserDetail/UserLoginAcl.vue
+++ b/src/views/users/User/UserDetail/UserLoginAcl.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="10">
-    <el-col :span="20">
+    <el-col ::md="20" :sm="24">
       <UserLoginACLTable :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/users/User/UserDetail/UserSession.vue b/src/views/users/User/UserDetail/UserSession.vue
index e89717c3e..8f47cbc5f 100644
--- a/src/views/users/User/UserDetail/UserSession.vue
+++ b/src/views/users/User/UserDetail/UserSession.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="10">
-    <el-col :span="20">
+    <el-col ::md="20" :sm="24">
       <BaseList :columns-show="columnsShow" :url="url" />
     </el-col>
   </el-row>