github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-12-12 11:22:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(form): group-list样式改成card的样式

Browse Source
This commit is contained in:
roymondchen 2025-10-30 19:56:45 +08:00
parent 1297939db2
commit 4f52fcb122
3 changed files with 107 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/form/src/containers/GroupList.vue
View File

@ -2,7 +2,7 @@
<div class="m-fields-group-list">
<div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
<div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
<span class="el-table__empty-text">暂无数据</span>
<span class="el-table__empty-text t-table__empty">暂无数据</span>
</div>
<MFieldsGroupListItem
@ -26,6 +26,11 @@
@addDiffCount="onAddDiffCount()"
></MFieldsGroupListItem>
<div class="m-fields-group-list-footer">
<TMagicButton v-if="config.enableToggleMode" :icon="Grid" size="small" @click="toggleMode"
>切换为表格</TMagicButton
>
<div style="display: flex; justify-content: flex-end; flex: 1">
<TMagicButton
v-if="addable"
type="primary"
@ -34,8 +39,8 @@
@click="addHandler"
>新增</TMagicButton
>
<TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
</div>
</div>
</div>
</template>

8
packages/form/src/containers/GroupListItem.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="m-fields-group-list-item">
<TMagicCard class="m-fields-group-list-item" :body-style="{ display: expand ? 'block' : 'none' }">
<template #header>
<div>
<TMagicButton link :disabled="disabled" @click="expandHandler">
<TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
@ -85,6 +86,7 @@
<span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
</div>
</template>
<Container
v-if="expand"
@ -99,14 +101,14 @@
@change="changeHandler"
@addDiffCount="onAddDiffCount()"
></Container>
</div>
</TMagicCard>
</template>
<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { CaretBottom, CaretRight, CaretTop, Delete, DocumentCopy, Position } from '@element-plus/icons-vue';
import { TMagicButton, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
import { filterFunction } from '../utils/form';

15
packages/form/src/theme/group-list.scss
View File

@ -20,4 +20,19 @@
border-bottom: 0;
}
}
.tmagic-design-card {
.el-card__header {
padding: 5px 20px;
}
.t-card__header {
padding: 5px 0;
}
}
.m-fields-group-list-footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
}