From 73cc319e7be2b64123729550e5b0363079203f99 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 15 Oct 2024 15:15:46 +0800
Subject: [PATCH] perf: table action flex

---
 .../Table/ListTable/TableAction/index.vue     | 93 +++++++++++--------
 .../accounts/AccountChangeSecret/index.vue    | 12 +--
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/src/components/Table/ListTable/TableAction/index.vue b/src/components/Table/ListTable/TableAction/index.vue
index e5f3ccc91..0fe9af407 100644
--- a/src/components/Table/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="device" class="table-header clearfix">
+  <div :class="device" class="table-header clearfix container">
     <slot name="header">
       <LeftSide
         v-if="hasLeftActions"
@@ -10,6 +10,7 @@
         v-on="$listeners"
         @init-actions-done="handleActionsDone"
       />
+
       <RightSide
         v-if="hasRightActions"
         :selected-rows="selectedRows"
@@ -18,6 +19,7 @@
         v-bind="$attrs"
         v-on="$listeners"
       />
+
       <div :class="searchClass" class="search">
         <LabelSearch
           v-if="hasLabelSearch"
@@ -158,7 +160,7 @@ $headerHeight: 30px;
 .table-header {
   .left-side {
     display: block;
-    float: left;
+    //float: left;
 
     ::v-deep .action-item.el-dropdown > .el-button {
       height: 100%;
@@ -166,13 +168,14 @@ $headerHeight: 30px;
   }
 
   .right-side {
-    float: right;
+    //float: right;
     height: 30px;
   }
 
   .search {
     display: flex;
     flex-direction: row;
+    justify-content: flex-end;
 
     .right-side-item.action-search {
       border: 1px solid var(--color-border);
@@ -181,45 +184,69 @@ $headerHeight: 30px;
   }
 
   .search.left {
-    float: left;
+    //float: left;
     padding: 0 !important;
   }
 
   .search.right {
-    float: right;
+    //float: right;
   }
 }
 
-.export-item {
-  display: block;
-  padding: 5px 20px;
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &.mobile {
+    //flex-direction: column; /* 改为纵向排列 */
+    //align-items: stretch; /* 让子元素充满容器的宽度 */
+    display: block;
+
+    .left-side {
+      //width: 100%;
+      display: inline-block;
+    }
+
+    .search {
+      //width: 100vw;
+      align-items: stretch; /* 让子元素充满容器的宽度 */
+    }
+
+    .right-side {
+      float: right;
+      align-items: flex-end;
+      display: inline-block;
+    }
+  }
 }
 
-.mobile .search {
-  display: inherit;
+.left-side {
+  order: 1;
 }
 
-.mobile .search .datepicker {
-  margin-left: 0;
+.search {
+  order: 2;
+  flex-grow: 1; /* This allows it to grow and fill available space */
 }
 
-.mobile .search.right {
-  clear: both;
-  float: none;
-  padding-top: 10px;
+.right-side {
+  order: 3;
+}
 
-  .label-search {
-    margin-right: 0;
+/* When .left-side is not present, adjust the layout */
+.container:not(:has(.left-side)) .search {
+  margin-right: auto; /* Pushes .search to the left */
+  justify-content: flex-start;
+}
 
-    ::v-deep .el-button.label-button {
-      border: 1px solid var(--color-border);
-    }
+.export-item {
+  display: block;
+  padding: 5px 20px;
+}
 
-    ::v-deep .label-cascader {
-      display: block;
-      width: 100%;
-    }
-  }
+.mobile .search .datepicker {
+  margin-left: 0;
 }
 
 .mobile .search.right .action-search {
@@ -228,18 +255,4 @@ $headerHeight: 30px;
   margin-top: 5px;
 }
 
-.mobile .right-side {
-  padding-top: 3px;
-}
-
-@media (max-width: 481px) {
-  .mobile .right-side {
-    float: left;
-    margin-left: -15px;
-  }
-
-  .mobile .left-side {
-    width: 100%;
-  }
-}
 </style>
diff --git a/src/views/accounts/AccountChangeSecret/index.vue b/src/views/accounts/AccountChangeSecret/index.vue
index c780fa518..6ed5c7147 100644
--- a/src/views/accounts/AccountChangeSecret/index.vue
+++ b/src/views/accounts/AccountChangeSecret/index.vue
@@ -20,6 +20,12 @@ export default {
             name: 'AccountChangeDashboard',
             component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeDashboard.vue')
           },
+          {
+            title: this.$t('AccountChangeSecret'),
+            name: 'AccountChangeSecretList',
+            hidden: () => !this.$hasPerm('accounts.view_changesecretautomation'),
+            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue')
+          },
           {
             title: this.$t('ExecutionList'),
             name: 'AccountChangeSecretExecutionList',
@@ -27,12 +33,6 @@ export default {
             component: () => import(
               '@/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue'
               )
-          },
-          {
-            title: this.$t('AccountChangeSecret'),
-            name: 'AccountChangeSecretList',
-            hidden: () => !this.$hasPerm('accounts.view_changesecretautomation'),
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue')
           }
         ]
       }