perf: table action flex

jumpserver · Oct 15, 2024 · 73cc319 · 73cc319
1 parent d90aba3
commit 73cc319
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git 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,21 +160,22 @@ $headerHeight: 30px;
 .table-header {
   .left-side {
     display: block;
-    float: left;
+    //float: left;
 
     ::v-deep .action-item.el-dropdown > .el-button {
       height: 100%;
     }
   }
 
   .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
@@ -20,19 +20,19 @@ 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',
             hidden: () => !this.$hasPerm('accounts.view_changesecretexecution'),
             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')
           }
         ]
       }