feat(merchant): 添加JSON编辑器折叠功能
- 新增可折叠的JSON批量编辑区域 - 实现点击标题展开/收起编辑器 - 添加折叠状态图标切换显示 - 设置默认折叠状态以节省空间 - 增加上下箭头图标指示折叠状态 - 优化样式布局和悬停效果
This commit is contained in:
@@ -1,10 +1,27 @@
|
||||
<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-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数据,表格会实时同步更新"
|
||||
@@ -21,6 +38,8 @@
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-collapse-transition>
|
||||
</div>
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user