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" class="bg-card flex h-64 items-center justify-center"
v-if="property.items.length === 0" 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>
<div v-else class="relative"> <div v-else class="relative">
<Carousel <Carousel

View File

@@ -43,7 +43,11 @@ const handleActive = (index: number) => {
<Image :src="item.imgUrl" fit="contain" class="h-7 w-7"> <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
<template #error> <template #error>
<div class="flex h-full w-full items-center justify-center"> <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> </div>
</template> </template>
</Image> </Image>

View File

@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { Image } from 'ant-design-vue';
/** 图片展示 */ /** 图片展示 */
defineOptions({ name: 'ImageBar' }); defineOptions({ name: 'ImageBar' });
@@ -17,18 +19,9 @@ defineProps<{ property: ImageBarProperty }>();
<IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" /> <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
</div> </div>
<Image <Image
class="min-h-8 w-full" class="block h-full min-h-8 w-full"
v-else v-else
:src="property.imgUrl" :src="property.imgUrl"
:preview="false" :preview="false"
/> />
</template> </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"> <RadioGroup v-model:value="formData!.borderRadius">
<Tooltip title="方形" placement="top"> <Tooltip title="方形" placement="top">
<RadioButton :value="0"> <RadioButton :value="0">
<IconifyIcon icon="tabler:input-search" /> <IconifyIcon icon="tabler:input-search" class="size-6" />
</RadioButton> </RadioButton>
</Tooltip> </Tooltip>
<Tooltip title="圆形" placement="top"> <Tooltip title="圆形" placement="top">
<RadioButton :value="10"> <RadioButton :value="10">
<IconifyIcon icon="iconoir:input-search" /> <IconifyIcon icon="iconoir:input-search" class="size-6" />
</RadioButton> </RadioButton>
</Tooltip> </Tooltip>
</RadioGroup> </RadioGroup>
@@ -87,12 +87,18 @@ watch(
<RadioGroup v-model:value="formData!.placeholderPosition"> <RadioGroup v-model:value="formData!.placeholderPosition">
<Tooltip title="居左" placement="top"> <Tooltip title="居左" placement="top">
<RadioButton value="left"> <RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" /> <IconifyIcon
icon="ant-design:align-left-outlined"
class="size-6"
/>
</RadioButton> </RadioButton>
</Tooltip> </Tooltip>
<Tooltip title="居中" placement="top"> <Tooltip title="居中" placement="top">
<RadioButton value="center"> <RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" /> <IconifyIcon
icon="ant-design:align-center-outlined"
class="size-6"
/>
</RadioButton> </RadioButton>
</Tooltip> </Tooltip>
</RadioGroup> </RadioGroup>

View File

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

View File

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

View File

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