feat: diy editor style

This commit is contained in:
xingyu4j
2025-11-05 15:31:07 +08:00
parent 109c6226b4
commit 318f142fa7
7 changed files with 25 additions and 31 deletions

View File

@@ -24,7 +24,7 @@ const handleIndexChange = (index: number) => {
class="bg-card flex h-64 items-center justify-center"
v-if="property.items.length === 0"
>
<IconifyIcon icon="tdesign:image" class="text-3xl text-gray-800" />
<IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
</div>
<div v-else class="relative">
<Carousel

View File

@@ -43,7 +43,11 @@ const handleActive = (index: number) => {
<Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon icon="ep:picture" :color="item.textColor" />
<IconifyIcon
icon="ep:picture"
:color="item.textColor"
class="size-6"
/>
</div>
</template>
</Image>

View File

@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { Image } from 'ant-design-vue';
/** 图片展示 */
defineOptions({ name: 'ImageBar' });
@@ -17,18 +19,9 @@ defineProps<{ property: ImageBarProperty }>();
<IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
</div>
<Image
class="min-h-8 w-full"
class="block h-full min-h-8 w-full"
v-else
:src="property.imgUrl"
:preview="false"
/>
</template>
<style scoped lang="scss">
/* 图片 */
img {
display: block;
width: 100%;
height: 100%;
}
</style>

View File

@@ -70,12 +70,12 @@ watch(
<RadioGroup v-model:value="formData!.borderRadius">
<Tooltip title="方形" placement="top">
<RadioButton :value="0">
<IconifyIcon icon="tabler:input-search" />
<IconifyIcon icon="tabler:input-search" class="size-6" />
</RadioButton>
</Tooltip>
<Tooltip title="圆形" placement="top">
<RadioButton :value="10">
<IconifyIcon icon="iconoir:input-search" />
<IconifyIcon icon="iconoir:input-search" class="size-6" />
</RadioButton>
</Tooltip>
</RadioGroup>
@@ -87,12 +87,18 @@ watch(
<RadioGroup v-model:value="formData!.placeholderPosition">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
<IconifyIcon
icon="ant-design:align-left-outlined"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
<IconifyIcon
icon="ant-design:align-center-outlined"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

View File

@@ -13,5 +13,3 @@ defineProps<{ property: UserWalletProperty }>();
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
/>
</template>
<style scoped lang="scss"></style>

View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

View File

@@ -10,10 +10,14 @@ defineProps<{ property: VideoPlayerProperty }>();
</script>
<template>
<div class="w-full" :style="{ height: `${property.style.height}px` }">
<Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
<Image
class="h-full w-full"
:src="property.posterUrl"
v-if="property.posterUrl"
/>
<video
v-else
class="w-full"
class="h-full w-full"
:src="property.videoUrl"
:poster="property.posterUrl"
:autoplay="property.autoplay"
@@ -21,12 +25,3 @@ defineProps<{ property: VideoPlayerProperty }>();
></video>
</div>
</template>
<style scoped lang="scss">
/* 图片 */
img {
display: block;
width: 100%;
height: 100%;
}
</style>