From 3323a39767f1bd449b555786f5dd35e9f34352d9 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 21 Mar 2024 16:42:29 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20tab=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/theme/element-extra.css                |  4 +-
 src/components/Table/ListTable/index.vue      |  2 +-
 src/layout/components/Page/index.vue          | 10 +++-
 src/layout/components/TabPage/index.vue       | 54 ++++++++++++-------
 src/styles/index.scss                         |  4 ++
 .../Platform/AutomationParamsSetting.vue      |  4 +-
 .../assets/Platform/PlatformCreateUpdate.vue  |  2 +-
 .../Platform/PlatformDetail/Automation.vue    | 21 +++++++-
 8 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/public/theme/element-extra.css b/public/theme/element-extra.css
index 35190087a..c9032c0a1 100644
--- a/public/theme/element-extra.css
+++ b/public/theme/element-extra.css
@@ -85,8 +85,8 @@
 
 
 td .el-button.el-button--mini {
-  padding: 1px 5px;
-  line-height: 1;
+  padding: 2px 4px;
+  line-height: 1.5;
 }
 
 .el-tabs__item.is-active, .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
diff --git a/src/components/Table/ListTable/index.vue b/src/components/Table/ListTable/index.vue
index 2696dd508..ef11e235a 100644
--- a/src/components/Table/ListTable/index.vue
+++ b/src/components/Table/ListTable/index.vue
@@ -242,7 +242,7 @@ export default {
   }
 
   & > > > .el-button-ungroup .el-dropdown > .more-action {
-    height: 24.6px;
+    //height: 24.6px;
   }
 }
 
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index 438e85a53..29df24b55 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -9,7 +9,7 @@
         <slot name="headingRightSide" />
       </template>
     </PageHeading>
-    <PageContent>
+    <PageContent class="page-content">
       <el-alert v-if="helpMessage" type="success">
         <span class="announcement-main" v-html="helpMessage" />
       </el-alert>
@@ -75,13 +75,19 @@ export default {
 <style lang="scss" scoped>
 .page {
   height: calc(100vh - 50px);
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
 
   .el-alert {
     margin-top: -5px;
     margin-bottom: 5px;
   }
+
+  .page-content {
+    height: calc(100% - 50px);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 }
 
 .go-back {
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index 55e0482fc..4c8827e13 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <Page v-bind="$attrs">
+  <Page class="tab-page" v-bind="$attrs">
     <template #headingRightSide>
       <slot name="headingRightSide" />
     </template>
 
-    <div>
+    <div style="height: 100%">
       <el-tabs
         v-if="tabIndices.length > 0"
         slot="submenu"
@@ -28,17 +28,18 @@
         </template>
       </el-tabs>
 
-      <el-alert v-if="helpMessage" type="success">
-        <span class="announcement-main" v-html="helpMessage" />
-      </el-alert>
-
-      <transition v-if="loading" appear mode="out-in" name="fade-transform">
-        <slot>
-          <keep-alive>
-            <component :is="computeActiveComponent" />
-          </keep-alive>
-        </slot>
-      </transition>
+      <div class="tab-page-content">
+        <el-alert v-if="helpMessage" type="success">
+          <span class="announcement-main" v-html="helpMessage" />
+        </el-alert>
+        <transition v-if="loading" appear mode="out-in" name="fade-transform">
+          <slot>
+            <keep-alive>
+              <component :is="computeActiveComponent" />
+            </keep-alive>
+          </slot>
+        </transition>
+      </div>
     </div>
   </Page>
 </template>
@@ -159,14 +160,11 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+
 .page-submenu >>> .el-tabs__header {
   background-color: white;
-  margin-left: -25px;
-  padding-left: 25px;
-  margin-right: -25px;
-  padding-right: 25px;
-  margin-top: -20px;
-  width: 100vw;
+  margin-top: -10px;
+  padding: 0 30px;
 
   .el-tabs__item {
     i {
@@ -175,6 +173,24 @@ export default {
   }
 }
 
+.tab-page {
+   >>> .page-content {
+     overflow-y: hidden;
+     padding: 0;
+  }
+
+  .tab-page-content {
+    padding: 12px 30px 22px;
+    overflow-y: auto;
+    height: calc(100% - 50px);
+
+    .el-alert {
+      margin-top: -10px;
+      margin-bottom: 5px;
+    }
+  }
+}
+
 .page-submenu >>> .el-tabs__nav-wrap {
   position: static;
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 71fd92824..cb31660d8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -407,3 +407,7 @@ button, input, optgroup, select, textarea {
 .el-select .el-input .el-input__inner {
   height: 30px;
 }
+
+button .el-icon--right {
+  margin-left: 3px;
+}
diff --git a/src/views/assets/Platform/AutomationParamsSetting.vue b/src/views/assets/Platform/AutomationParamsSetting.vue
index 3f8bc1d44..f8f6305ac 100644
--- a/src/views/assets/Platform/AutomationParamsSetting.vue
+++ b/src/views/assets/Platform/AutomationParamsSetting.vue
@@ -4,7 +4,7 @@
       v-if="hasButton"
       :disabled="!canSetting"
       :icon="icon"
-      class="setting"
+      class="proto-setting"
       size="small"
       type="primary"
       @click="onSetting"
@@ -168,7 +168,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.setting {
+.proto-setting {
   margin-top: 1px;
   height: 30px;
   vertical-align: super;
diff --git a/src/views/assets/Platform/PlatformCreateUpdate.vue b/src/views/assets/Platform/PlatformCreateUpdate.vue
index 729da613e..a60f27f5f 100644
--- a/src/views/assets/Platform/PlatformCreateUpdate.vue
+++ b/src/views/assets/Platform/PlatformCreateUpdate.vue
@@ -178,7 +178,7 @@ export default {
   display: inline-block;
   width: 100%;
   .el-form-item__content {
-    width: 70%;
+    width: calc(70% - 50px)
   }
   .el-select {
     width: 100%;
diff --git a/src/views/assets/Platform/PlatformDetail/Automation.vue b/src/views/assets/Platform/PlatformDetail/Automation.vue
index f41cbde19..70e38db65 100644
--- a/src/views/assets/Platform/PlatformDetail/Automation.vue
+++ b/src/views/assets/Platform/PlatformDetail/Automation.vue
@@ -77,8 +77,27 @@ export default {
 </script>
 
 <style scoped>
-.form >>> .el-select {
+.platform-form >>> {
+  .el-cascader {
+    width: 100%;
+  }
+}
+
+>>> .item-method.el-form-item {
+  display: inline-block;
   width: 100%;
+  .el-form-item__content {
+    width: calc(70% - 50px)
+  }
+  .el-select {
+    width: 100%;
+  }
+}
+
+>>> .item-params.el-form-item {
+  display: inline-block;
+  position: absolute;
+  right: 18px;
 }
 
 </style>