github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-12-13 12:12:54 +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 14e4a175b4
commit af20a3c51f
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 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="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"> <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> </div>
<MFieldsGroupListItem <MFieldsGroupListItem
@ -26,6 +26,11 @@
@addDiffCount="onAddDiffCount()" @addDiffCount="onAddDiffCount()"
></MFieldsGroupListItem> ></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 <TMagicButton
v-if="addable" v-if="addable"
type="primary" type="primary"
@ -34,8 +39,8 @@
@click="addHandler" @click="addHandler"
>新增</TMagicButton >新增</TMagicButton
> >
</div>
<TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton> </div>
</div> </div>
</template> </template>

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

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

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

@ -20,4 +20,19 @@
border-bottom: 0; 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;
}
} }