From 0ac1e0d75a51c3186c208602cd3aefe354b056b9 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 3 Jan 2025 18:32:24 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20form=20=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/AutoDataForm/index.vue    |  1 +
 src/components/Form/FormGroupHeader/index.vue | 65 +++++++++++++++++--
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/Form/AutoDataForm/index.vue b/src/components/Form/AutoDataForm/index.vue
index 0619469e7..a63d32739 100644
--- a/src/components/Form/AutoDataForm/index.vue
+++ b/src/components/Form/AutoDataForm/index.vue
@@ -163,5 +163,6 @@ export default {
       return true
     }
   }
+
 }
 </script>
diff --git a/src/components/Form/FormGroupHeader/index.vue b/src/components/Form/FormGroupHeader/index.vue
index 82821ec22..87b92008e 100644
--- a/src/components/Form/FormGroupHeader/index.vue
+++ b/src/components/Form/FormGroupHeader/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="form-group-header">
+  <div ref="formGroup" class="form-group-header">
     <div v-if="line" class="hr-line-dashed" />
-    <h3>{{ group['title'] }} </h3>
+    <h3 @click="toggle">{{ group['title'] }} </h3>
+    <span class="compass" @click="toggle">
+      <i :class="iconClass" />
+    </span>
+    <div v-if="!isVisible" class="ellipsis">
+      <i class="el-icon-more-outline" />
+    </div>
   </div>
 </template>
 
@@ -20,16 +26,61 @@ export default {
       type: Object,
       default: () => ({})
     }
+  },
+  data() {
+    return {
+      isVisible: true
+    }
+  },
+  computed: {
+    iconClass() {
+      return this.isVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
+    }
+  },
+  methods: {
+    toggle() {
+      this.isVisible = !this.isVisible
+      this.toggleSiblingVisibility()
+    },
+    toggleSiblingVisibility() {
+      // 当前 form-group-header 的 DOM 元素
+      const formGroupHeader = this.$refs.formGroup
+      if (!formGroupHeader) return
+
+      // 找到当前 form-group-header 的下一个兄弟节点
+      let sibling = formGroupHeader.nextElementSibling
+
+      // 循环隐藏或显示直到找到下一个 form-group-header
+      while (sibling && !sibling.classList.contains('form-group-header')) {
+        sibling.style.display = this.isVisible ? '' : 'none'
+        sibling = sibling.nextElementSibling
+      }
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .hr-line-dashed {
-    border-top: 1px dashed #e7eaec;
-    color: #ffffff;
-    background-color: #ffffff;
-    height: 1px;
-    margin: 20px 0;
+  border-top: 1px dashed #e7eaec;
+  color: #ffffff;
+  background-color: #ffffff;
+  height: 1px;
+  margin: 20px 0;
+}
+
+h3 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.compass {
+  display: inline-block;
+  float: right;
+  cursor: pointer;
+}
+
+.ellipsis {
+  text-align: center;
 }
 </style>