From 32ef2187a50d59250dc4fc72652bdc35e0acb8e1 Mon Sep 17 00:00:00 2001
From: danial <danial@gmail.com>
Date: Thu, 6 Nov 2025 15:26:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(merchant):=20=E6=B7=BB=E5=8A=A0JSON?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增可折叠的JSON批量编辑区域
- 实现点击标题展开/收起编辑器
- 添加折叠状态图标切换显示
- 设置默认折叠状态以节省空间
- 增加上下箭头图标指示折叠状态
- 优化样式布局和悬停效果
---
 .../deploy/components/rate-table.vue          | 73 +++++++++++++++----
 1 file changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/views/merchant/config/components/deploy/components/rate-table.vue b/src/views/merchant/config/components/deploy/components/rate-table.vue
index 29e79cb..fe2878c 100644
--- a/src/views/merchant/config/components/deploy/components/rate-table.vue
+++ b/src/views/merchant/config/components/deploy/components/rate-table.vue
@@ -1,25 +1,44 @@
 <template>
   <div class="rate-table-container">
     <div class="serialization-section">
-      <a-space direction="vertical" style="width: 100%; margin-bottom: 16px">
+      <div
+        class="section-header"
+        @click="isJsonEditorCollapsed = !isJsonEditorCollapsed"
+      >
         <a-typography-text type="secondary">
           批量编辑 (JSON格式) - 与表格实时同步
         </a-typography-text>
-        <a-textarea
-          v-model="serializationData"
-          placeholder="在此编辑JSON数据，表格会实时同步更新"
-          auto-size
-          allow-clear
-        />
-        <a-space>
-          <a-button size="small" status="warning" @click="resetToDefault">
-            <template #icon>
-              <icon-refresh />
-            </template>
-            还原默认
-          </a-button>
-        </a-space>
-      </a-space>
+        <a-button size="mini" type="text">
+          <template #icon>
+            <icon-down v-if="isJsonEditorCollapsed" />
+            <icon-up v-else />
+          </template>
+        </a-button>
+      </div>
+
+      <a-collapse-transition>
+        <div v-show="!isJsonEditorCollapsed">
+          <a-space
+            direction="vertical"
+            style="width: 100%; margin-bottom: 16px"
+          >
+            <a-textarea
+              v-model="serializationData"
+              placeholder="在此编辑JSON数据，表格会实时同步更新"
+              auto-size
+              allow-clear
+            />
+            <a-space>
+              <a-button size="small" status="warning" @click="resetToDefault">
+                <template #icon>
+                  <icon-refresh />
+                </template>
+                还原默认
+              </a-button>
+            </a-space>
+          </a-space>
+        </div>
+      </a-collapse-transition>
     </div>
     <a-table
       :data="tableData"
@@ -124,6 +143,7 @@ const generateTableData = () => {
 };
 const tableData = defineModel<merchantDeployRate[]>();
 const serializationData = ref('');
+const isJsonEditorCollapsed = ref(true); // 默认折叠
 
 const { copy } = useClipboard();
 
@@ -281,6 +301,27 @@ const resetToDefault = () => {
     border-radius: 6px;
     border: 1px solid #e5e6eb;
     margin-bottom: 16px;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 4px 0;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: rgb(0 0 0 / 2%);
+        border-radius: 4px;
+        margin: 0 -4px;
+        padding: 4px;
+      }
+    }
+
+    // 折叠动画容器
+    .arco-collapse-transition {
+      margin-top: 8px;
+    }
   }
 }
 </style>