feat(merchant): 添加JSON编辑器折叠功能

- 新增可折叠的JSON批量编辑区域
- 实现点击标题展开/收起编辑器
- 添加折叠状态图标切换显示
- 设置默认折叠状态以节省空间
- 增加上下箭头图标指示折叠状态
- 优化样式布局和悬停效果
This commit is contained in:
danial
2025-11-06 15:26:15 +08:00
parent fb79dfa691
commit 32ef2187a5

View File

@@ -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>