smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【antd】【mall】diy-editor 修复 element-plus 组件之路：部分解决 20%

Browse Source
This commit is contained in:
YunaiV
2025-10-26 10:11:36 +08:00
parent 289f6e3de4
commit 21d03d8bac
52 changed files with 325 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { PREDEFINE_COLORS } from '@vben/constants';
// import { PREDEFINE_COLORS } from '@vben/constants';
import { Input, InputGroup } from 'ant-design-vue';
@@ -29,7 +29,9 @@ const color = computed({
<template>
<InputGroup compact>
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
<Input v-model:value="color" class="flex-1" />
</InputGroup>
</template>

16
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
View File

@@ -5,6 +5,8 @@ import { ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { Button, Form, FormItem, Typography } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import ComponentContainerProperty from '../../component-container-property.vue';
@@ -28,8 +30,8 @@ const handleOpenEditDialog = () => {
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<ElForm label-width="80px" :model="formData" class="mt-2">
<ElFormItem label="上传图片" prop="imgUrl">
<Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" class="mt-2">
<FormItem label="上传图片" prop="imgUrl">
<UploadImg
v-model="formData.imgUrl"
height="50px"
@@ -38,15 +40,15 @@ const handleOpenEditDialog = () => {
:show-description="false"
>
<template #tip>
<ElText type="info" size="small"> 推荐宽度 750</ElText>
<Typography.Text type="secondary" class="text-xs"> 推荐宽度 750</Typography.Text>
</template>
</UploadImg>
</ElFormItem>
</ElForm>
</FormItem>
</Form>
<ElButton type="primary" plain class="w-full" @click="handleOpenEditDialog">
<Button type="primary" class="w-full" @click="handleOpenEditDialog">
设置热区
</ElButton>
</Button>
</ComponentContainerProperty>
<!-- 热区编辑对话框 -->
<HotZoneEditDialog

14
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
View File

@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Form, FormItem } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components';
@@ -18,8 +20,8 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData">
<ElFormItem label="上传图片" prop="imgUrl">
<Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<FormItem label="上传图片" prop="imgUrl">
<UploadImg
v-model="formData.imgUrl"
draggable="false"
@@ -30,11 +32,11 @@ const formData = useVModel(props, 'modelValue', emit);
>
<template #tip> 建议宽度750 </template>
</UploadImg>
</ElFormItem>
<ElFormItem label="链接" prop="url">
</FormItem>
<FormItem label="链接" prop="url">
<AppLinkInput v-model="formData.url" />
</ElFormItem>
</ElForm>
</FormItem>
</Form>
</ComponentContainerProperty>
</template>

63
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
View File

@@ -3,12 +3,13 @@ import type { MenuGridProperty } from './config';
import { useVModel } from '@vueuse/core';
import {
ElCard,
ElForm,
ElFormItem,
ElRadio,
ElRadioGroup,
ElSwitch,
Card,
Form,
FormItem,
Radio,
RadioGroup,
Switch,
} from 'ant-design-vue';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
@@ -27,21 +28,21 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<ElForm label-width="80px" :model="formData" class="mt-2">
<ElFormItem label="每行数量" prop="column">
<ElRadioGroup v-model="formData.column">
<ElRadio :value="3">3个</ElRadio>
<ElRadio :value="4">4个</ElRadio>
</ElRadioGroup>
</ElFormItem>
<Form label-width="80px" :model="formData" class="mt-2">
<FormItem label="每行数量" prop="column">
<RadioGroup v-model="formData.column">
<Radio :value="3">3个</Radio>
<Radio :value="4">4个</Radio>
</RadioGroup>
</FormItem>
<ElCard header="菜单设置" class="property-group" shadow="never">
<Card header="菜单设置" class="property-group" shadow="never">
<Draggable
v-model="formData.list"
:empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
>
<template #default="{ element }">
<ElFormItem label="图标" prop="iconUrl">
<FormItem label="图标" prop="iconUrl">
<UploadImg
v-model="element.iconUrl"
height="80px"
@@ -50,40 +51,40 @@ const formData = useVModel(props, 'modelValue', emit);
>
<template #tip> 建议尺寸：44 * 44 </template>
</UploadImg>
</ElFormItem>
<ElFormItem label="标题" prop="title">
</FormItem>
<FormItem label="标题" prop="title">
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</ElFormItem>
<ElFormItem label="副标题" prop="subtitle">
</FormItem>
<FormItem label="副标题" prop="subtitle">
<InputWithColor
v-model="element.subtitle"
v-model:color="element.subtitleColor"
/>
</ElFormItem>
<ElFormItem label="链接" prop="url">
</FormItem>
<FormItem label="链接" prop="url">
<AppLinkInput v-model="element.url" />
</ElFormItem>
<ElFormItem label="显示角标" prop="badge.show">
<ElSwitch v-model="element.badge.show" />
</ElFormItem>
</FormItem>
<FormItem label="显示角标" prop="badge.show">
<Switch v-model="element.badge.show" />
</FormItem>
<template v-if="element.badge.show">
<ElFormItem label="角标内容" prop="badge.text">
<FormItem label="角标内容" prop="badge.text">
<InputWithColor
v-model="element.badge.text"
v-model:color="element.badge.textColor"
/>
</ElFormItem>
<ElFormItem label="背景颜色" prop="badge.bgColor">
</FormItem>
<FormItem label="背景颜色" prop="badge.bgColor">
<ColorInput v-model="element.badge.bgColor" />
</ElFormItem>
</FormItem>
</template>
</template>
</Draggable>
</ElCard>
</ElForm>
</Card>
</Form>
</ComponentContainerProperty>
</template>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
View File

@@ -3,6 +3,8 @@ import type { PageConfigProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Form, FormItem, Textarea } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
@@ -22,8 +24,8 @@ const formData = useVModel(props, 'modelValue', emit);
<Form
:model="formData"
:rules="rules"
label-col="{ span: 6 }"
wrapper-col="{ span: 18 }"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<FormItem label="页面描述" name="description">
<Textarea

119
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
View File

@@ -5,6 +5,18 @@ import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
@@ -22,48 +34,48 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData">
<ElCard header="商品列表" class="property-group" shadow="never">
<Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<Card title="商品列表" class="property-group" :bordered="false">
<!-- <SpuShowcase v-model="formData.spuIds" /> -->
</ElCard>
<ElCard header="商品样式" class="property-group" shadow="never">
<ElFormItem label="布局" prop="type">
<ElRadioGroup v-model="formData.layoutType">
<ElTooltip class="item" content="双列" placement="bottom">
<ElRadioButton value="twoCol">
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="布局" prop="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</ElRadioButton>
</ElTooltip>
<ElTooltip class="item" content="三列" placement="bottom">
<ElRadioButton value="threeCol">
</RadioButton>
</Tooltip>
<Tooltip title="三列" placement="bottom">
<RadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</ElRadioButton>
</ElTooltip>
<ElTooltip class="item" content="水平滑动" placement="bottom">
<ElRadioButton value="horizSwiper">
</RadioButton>
</Tooltip>
<Tooltip title="水平滑动" placement="bottom">
<RadioButton value="horizSwiper">
<IconifyIcon icon="system-uicons:carousel" />
</ElRadioButton>
</ElTooltip>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="商品名称" prop="fields.name.show">
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" prop="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<ElCheckbox v-model="formData.fields.name.show" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</ElFormItem>
<ElFormItem label="商品价格" prop="fields.price.show">
</FormItem>
<FormItem label="商品价格" prop="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<ElCheckbox v-model="formData.fields.price.show" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</ElFormItem>
</ElCard>
<ElCard header="角标" class="property-group" shadow="never">
<ElFormItem label="角标" prop="badge.show">
<ElSwitch v-model="formData.badge.show" />
</ElFormItem>
<ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
</FormItem>
</Card>
<Card title="角标" class="property-group" :bordered="false">
<FormItem label="角标" prop="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
@@ -72,41 +84,32 @@ const formData = useVModel(props, 'modelValue', emit);
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</ElFormItem>
</ElCard>
<ElCard header="商品样式" class="property-group" shadow="never">
<ElFormItem label="上圆角" prop="borderRadiusTop">
<ElSlider
v-model="formData.borderRadiusTop"
</FormItem>
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="上圆角" prop="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</ElFormItem>
<ElFormItem label="下圆角" prop="borderRadiusBottom">
<ElSlider
v-model="formData.borderRadiusBottom"
</FormItem>
<FormItem label="下圆角" prop="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</ElFormItem>
<ElFormItem label="间隔" prop="space">
<ElSlider
v-model="formData.space"
</FormItem>
<FormItem label="间隔" prop="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</ElFormItem>
</ElCard>
</ElForm>
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

25
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -7,6 +7,8 @@ import { onMounted, ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { Form, FormItem, Select } from 'ant-design-vue';
import * as ArticleApi from '#/api/mall/promotion/article/index';
import ComponentContainerProperty from '../../component-container-property.vue';
@@ -42,26 +44,19 @@ onMounted(() => {
<template>
<ComponentContainerProperty v-model="formData.style">
<ElForm label-width="40px" :model="formData">
<ElFormItem label="文章" prop="id">
<ElSelect
v-model="formData.id"
<Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<FormItem label="文章" prop="id">
<Select
v-model:value="formData.id"
placeholder="请选择文章"
class="w-full"
filterable
remote
:remote-method="queryArticleList"
:loading="loading"
>
<ElOption
v-for="article in articles"
:key="article.id"
:label="article.title"
:value="article.id"
:options="articles.map((item) => ({ label: item.title, value: item.id }))"
@search="queryArticleList"
/>
</ElSelect>
</ElFormItem>
</ElForm>
</FormItem>
</Form>
</ComponentContainerProperty>
</template>

184
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
View File

@@ -10,6 +10,20 @@ import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
Radio,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
import UploadImg from '#/components/upload/image-upload.vue';
import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
@@ -35,102 +49,97 @@ onMounted(async () => {
<template>
<ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData">
<ElCard header="拼团活动" class="property-group" shadow="never">
<Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<Card title="拼团活动" class="property-group" :bordered="false">
<CombinationShowcase v-model="formData.activityIds" />
</ElCard>
<ElCard header="商品样式" class="property-group" shadow="never">
<ElFormItem label="布局" prop="type">
<ElRadioGroup v-model="formData.layoutType">
<ElTooltip class="item" content="单列大图" placement="bottom">
<ElRadioButton value="oneColBigImg">
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="布局" prop="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</ElRadioButton>
</ElTooltip>
<ElTooltip class="item" content="单列小图" placement="bottom">
<ElRadioButton value="oneColSmallImg">
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</ElRadioButton>
</ElTooltip>
<ElTooltip class="item" content="双列" placement="bottom">
<ElRadioButton value="twoCol">
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</ElRadioButton>
</ElTooltip>
<!--<el-tooltip class="item" content="三列" placement="bottom">
<el-radio-button value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</ElRadioButton>
</ElTooltip>-->
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="商品名称" prop="fields.name.show">
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" prop="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<ElCheckbox v-model="formData.fields.name.show" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</ElFormItem>
<ElFormItem label="商品简介" prop="fields.introduction.show">
</FormItem>
<FormItem label="商品简介" prop="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<ElCheckbox v-model="formData.fields.introduction.show" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</ElFormItem>
<ElFormItem label="商品价格" prop="fields.price.show">
</FormItem>
<FormItem label="商品价格" prop="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<ElCheckbox v-model="formData.fields.price.show" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</ElFormItem>
<ElFormItem label="市场价" prop="fields.marketPrice.show">
</FormItem>
<FormItem label="市场价" prop="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<ElCheckbox v-model="formData.fields.marketPrice.show" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</ElFormItem>
<ElFormItem label="商品销量" prop="fields.salesCount.show">
</FormItem>
<FormItem label="商品销量" prop="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<ElCheckbox v-model="formData.fields.salesCount.show" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</ElFormItem>
<ElFormItem label="商品库存" prop="fields.stock.show">
</FormItem>
<FormItem label="商品库存" prop="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<ElCheckbox v-model="formData.fields.stock.show" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</ElFormItem>
</ElCard>
<ElCard header="角标" class="property-group" shadow="never">
<ElFormItem label="角标" prop="badge.show">
<ElSwitch v-model="formData.badge.show" />
</ElFormItem>
<ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
</FormItem>
</Card>
<Card title="角标" class="property-group" :bordered="false">
<FormItem label="角标" prop="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
<template #tip> 建议尺寸：36 * 22</template>
</UploadImg>
</ElFormItem>
</ElCard>
<ElCard header="按钮" class="property-group" shadow="never">
<ElFormItem label="按钮类型" prop="btnBuy.type">
<ElRadioGroup v-model="formData.btnBuy.type">
<ElRadioButton value="text">文字</ElRadioButton>
<ElRadioButton value="img">图片</ElRadioButton>
</ElRadioGroup>
</ElFormItem>
</FormItem>
</Card>
<Card title="按钮" class="property-group" :bordered="false">
<FormItem label="按钮类型" prop="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<ElFormItem label="按钮文字" prop="btnBuy.text">
<ElInput v-model="formData.btnBuy.text" />
</ElFormItem>
<ElFormItem label="左侧背景" prop="btnBuy.bgBeginColor">
<FormItem label="按钮文字" prop="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</ElFormItem>
<ElFormItem label="右侧背景" prop="btnBuy.bgEndColor">
</FormItem>
<FormItem label="右侧背景" prop="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</ElFormItem>
</FormItem>
</template>
<template v-else>
<ElFormItem label="图片" prop="btnBuy.imgUrl">
<FormItem label="图片" prop="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
@@ -139,42 +148,33 @@ onMounted(async () => {
>
<template #tip> 建议尺寸：56 * 56</template>
</UploadImg>
</ElFormItem>
</FormItem>
</template>
</ElCard>
<ElCard header="商品样式" class="property-group" shadow="never">
<ElFormItem label="上圆角" prop="borderRadiusTop">
<ElSlider
v-model="formData.borderRadiusTop"
</Card>
<Card title="商品样式" class="property-group" :bordered="false">
<FormItem label="上圆角" prop="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</ElFormItem>
<ElFormItem label="下圆角" prop="borderRadiusBottom">
<ElSlider
v-model="formData.borderRadiusBottom"
</FormItem>
<FormItem label="下圆角" prop="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</ElFormItem>
<ElFormItem label="间隔" prop="space">
<ElSlider
v-model="formData.space"
</FormItem>
<FormItem label="间隔" prop="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</ElFormItem>
</ElCard>
</ElForm>
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

20
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
View File

@@ -5,6 +5,16 @@ import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Select,
SelectOption,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
@@ -35,7 +45,7 @@ const handleThemeChange = () => {
<template>
<div class="tab-bar">
<!-- 表单 -->
<Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
<Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
<FormItem label="主题" name="theme">
<Select v-model:value="formData!.theme" @change="handleThemeChange">
<SelectOption
@@ -109,8 +119,8 @@ const handleThemeChange = () => {
<FormItem
name="text"
label="文字"
label-col="{ span: 4 }"
wrapper-col="{ span: 20 }"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
class="mb-2"
>
<Input v-model:value="element.text" placeholder="请输入文字" />
@@ -118,8 +128,8 @@ const handleThemeChange = () => {
<FormItem
name="url"
label="链接"
label-col="{ span: 4 }"
wrapper-col="{ span: 20 }"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
class="mb-0"
>
<AppLinkInput v-model="element.url" />

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
View File

@@ -3,6 +3,8 @@ import type { VideoPlayerProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Form, FormItem, Slider, Switch } from 'ant-design-vue';
import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue';
@@ -23,7 +25,7 @@ const formData = useVModel(props, 'modelValue', emit);
<Slider v-model:value="formData.style.height" :max="500" :min="100" />
</FormItem>
</template>
<Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
<Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
<FormItem label="上传视频" name="videoUrl">
<UploadFile
v-model="formData.videoUrl"

4
apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { PREDEFINE_COLORS } from '@vben/constants';
// import { PREDEFINE_COLORS } from '@vben/constants';
import { useVModels } from '@vueuse/core';
import { Input, InputGroup } from 'ant-design-vue';
@@ -26,7 +26,9 @@ const { modelValue, color } = useVModels(props, emit);
<template>
<InputGroup compact>
<Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
</InputGroup>
</template>
<style scoped lang="scss"></style>

8
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -1,8 +1,5 @@
<script setup lang="ts">
import type {
ComponentStyle,
DiyComponent,
} from '../util';
import type { ComponentStyle, DiyComponent } from '../util';
import { computed } from 'vue';
@@ -10,9 +7,10 @@ import { IconifyIcon } from '@vben/icons';
import { ElButton, ElTooltip } from 'element-plus';
import { components } from './mobile';
import { VerticalButtonGroup } from '#/views/mall/promotion/components';
import { components } from './mobile';
/**
* 组件容器：目前在中间部分
* 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
View File

@@ -1,8 +1,5 @@
<script setup lang="ts">
import type {
DiyComponent,
DiyComponentLibrary,
} from '../util';
import type { DiyComponent, DiyComponentLibrary } from '../util';
import { reactive, watch } from 'vue';

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 轮播图属性 */
export interface CarouselProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
View File

@@ -16,11 +16,12 @@ import {
ElTooltip,
} from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 轮播图属性面板
defineOptions({ name: 'CarouselProperty' });

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品卡片属性 */
export interface CouponCardProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
View File

@@ -24,9 +24,10 @@ import {
} from 'element-plus';
import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// TODO: 添加组件
// import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { HotZoneItemProperty } from '../../config';
import type { ControlDot } from './controller';
import type { HotZoneItemProperty } from '../../config';
import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
import { ref } from 'vue';

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 热区属性 */
export interface HotZoneProperty {

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
View File

@@ -6,9 +6,9 @@ import { ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import ComponentContainerProperty from '../../component-container-property.vue';
import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
/** 热区属性面板 */

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 图片展示属性 */
export interface ImageBarProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
View File

@@ -4,10 +4,11 @@ import type { ImageBarProperty } from './config';
import { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 图片展示属性面板
defineOptions({ name: 'ImageBarProperty' });

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 广告魔方属性 */
export interface MagicCubeProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
View File

@@ -6,13 +6,14 @@ import { ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
MagicCubeEditor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 广告魔方属性面板 */
defineOptions({ name: 'MagicCubeProperty' });

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
import { cloneDeep } from '@vben/utils';

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
View File

@@ -11,10 +11,10 @@ import {
ElSwitch,
} from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
/** 宫格导航属性面板 */

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
import { cloneDeep } from '@vben/utils';

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
View File

@@ -4,7 +4,6 @@ import type { MenuListProperty } from './config';
import { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElText } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
@@ -12,6 +11,7 @@ import {
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
/** 列表导航属性面板 */

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
import { cloneDeep } from '@vben/utils';

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
View File

@@ -13,7 +13,6 @@ import {
ElSwitch,
} from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
@@ -22,6 +21,7 @@ import {
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
/** 菜单导航属性面板 */

4
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import type { StyleValue } from 'vue';
import type { SearchProperty } from '../search-bar/config';
import type {
NavigationBarCellProperty,
NavigationBarProperty,
} from './config';
import type { SearchProperty } from '../search-bar/config';
import { computed } from 'vue';
import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
import SearchBar from '../search-bar/index.vue';
/** 页面顶部导航栏 */

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 公告栏属性 */
export interface NoticeBarProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
View File

@@ -4,7 +4,6 @@ import type { NoticeBarProperty } from './config';
import { useVModel } from '@vueuse/core';
import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
@@ -12,6 +11,8 @@ import {
Draggable,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 通知栏属性面板
defineOptions({ name: 'NoticeBarProperty' });
const props = defineProps<{ modelValue: NoticeBarProperty }>();

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品卡片属性 */
export interface ProductCardProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品栏属性 */
export interface ProductListProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
View File

@@ -15,9 +15,10 @@ import {
ElTooltip,
} from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// TODO: 添加组件
// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 营销文章属性 */
export interface PromotionArticleProperty {

1
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -9,6 +9,7 @@ import { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
import * as ArticleApi from '#/api/mall/promotion/article/index';
import ComponentContainerProperty from '../../component-container-property.vue';
// 营销文章属性面板

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 拼团属性 */
export interface PromotionCombinationProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 积分商城属性 */
export interface PromotionPointProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 秒杀属性 */
export interface PromotionSeckillProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 搜索框属性 */
export interface SearchProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
View File

@@ -18,9 +18,10 @@ import {
ElTooltip,
} from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import { Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 搜索框属性面板 */
defineOptions({ name: 'SearchProperty' });

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 标题栏属性 */
export interface TitleBarProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
View File

@@ -16,13 +16,14 @@ import {
ElTooltip,
} from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 导航栏属性面板
defineOptions({ name: 'TitleBarProperty' });

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户卡片属性 */
export interface UserCardProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户卡券属性 */
export interface UserCouponProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户订单属性 */
export interface UserOrderProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户资产属性 */
export interface UserWalletProperty {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
View File

@@ -1,7 +1,4 @@
import type {
ComponentStyle,
DiyComponent,
} from '../../../util';
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 视频播放属性 */
export interface VideoPlayerProperty {

3
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
View File

@@ -4,10 +4,11 @@ import type { VideoPlayerProperty } from './config';
import { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import ComponentContainerProperty from '../../component-container-property.vue';
// 视频播放属性面板
defineOptions({ name: 'VideoPlayerProperty' });

68
apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
View File

@@ -10,7 +10,6 @@ import { cloneDeep, isEmpty, isString } from '@vben/utils';
import { useQRCode } from '@vueuse/integrations/useQRCode';
import {
ElAside,
ElButtonGroup,
ElCard,
ElContainer,
ElDialog,
@@ -20,18 +19,14 @@ import {
ElText,
ElTooltip,
} from 'element-plus';
import draggable from 'vuedraggable';
import statusBarImg from '#/assets/imgs/diy/statusBar.png';
import {
componentConfigs,
components,
} from './components/mobile';
import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
import ComponentContainer from './components/component-container.vue';
import ComponentLibrary from './components/component-library.vue';
import { componentConfigs, components } from './components/mobile';
import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
/** 页面装修详情页 */
defineOptions({
@@ -312,35 +307,40 @@ onMounted(() => {
<span>{{ title }}</span>
</div>
<!-- 右侧操作区 -->
<ElButtonGroup class="header-right">
<ElTooltip content="重置">
<div class="header-right">
<ElTooltip title="重置">
<ElButton @click="handleReset">
<IconifyIcon :size="24" icon="system-uicons:reset-alt" />
</ElButton>
</ElTooltip>
<ElTooltip v-if="previewUrl" content="预览">
<ElTooltip v-if="previewUrl" title="预览">
<ElButton @click="handlePreview">
<IconifyIcon :size="24" icon="ep:view" />
</ElButton>
</ElTooltip>
<ElTooltip content="保存">
<ElTooltip title="保存">
<ElButton @click="handleSave">
<IconifyIcon :size="24" icon="ep:check" />
</ElButton>
</ElTooltip>
</ElButtonGroup>
</div>
</ElHeader>
<!-- 中心区域 -->
<ElContainer class="editor-container">
<!-- 左侧：组件库（ComponentLibrary） -->
<ElAside width="200px" class="editor-left">
<ComponentLibrary
v-if="libs && libs.length > 0"
ref="componentLibrary"
:list="libs"
/>
</ElAside>
<!-- 中心：设计区域（ComponentContainer） -->
<div class="editor-center page-prop-area" @click="handlePageSelected">
<ElContainer
class="editor-center page-prop-area"
@click="handlePageSelected"
>
<!-- 手机顶部 -->
<div class="editor-design-top">
<!-- 手机顶部状态栏 -->
@@ -371,15 +371,7 @@ onMounted(() => {
/>
</div>
<!-- 手机页面编辑区域 -->
<ElScrollbar
:view-style="{
backgroundColor: pageConfigComponent.property.backgroundColor,
backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
}"
view-class="phone-container"
wrap-class="editor-design-center page-prop-area"
style="height: calc(100vh - 135px - 120px)"
>
<ElScrollbar class="phone-container">
<draggable
v-model="pageComponents"
:animation="200"
@@ -424,42 +416,36 @@ onMounted(() => {
<div class="fixed-component-action-group gap-2">
<ElTag
v-if="showPageConfig"
:effect="
:color="
selectedComponent?.uid === pageConfigComponent.uid
? 'dark'
: 'plain'
"
:type="
selectedComponent?.uid === pageConfigComponent.uid
? 'primary'
: 'info'
? 'blue'
: 'default'
"
:bordered="false"
size="large"
@click="handleComponentSelected(pageConfigComponent)"
>
<IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
<span>{{ pageConfigComponent.name }}</span>
<ElText>{{ pageConfigComponent.name }}</ElText>
</ElTag>
<template v-for="(component, index) in pageComponents" :key="index">
<ElTag
v-if="component.position === 'fixed'"
:effect="
selectedComponent?.uid === component.uid ? 'dark' : 'plain'
"
:type="
selectedComponent?.uid === component.uid ? 'primary' : 'info'
:color="
selectedComponent?.uid === component.uid ? 'blue' : 'default'
"
:bordered="false"
closable
size="large"
@click="handleComponentSelected(component)"
@close="handleDeleteComponent(index)"
>
<IconifyIcon :icon="component.icon" :size="12" />
<span>{{ component.name }}</span>
<ElText>{{ component.name }}</ElText>
</ElTag>
</template>
</div>
</div>
</ElContainer>
<!-- 右侧：属性面板（ComponentContainerProperty） -->
<ElAside
v-if="selectedComponent?.property"
@@ -469,13 +455,13 @@ onMounted(() => {
<ElCard
body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
class="h-full"
shadow="never"
:bordered="false"
>
<!-- 组件名称 -->
<template #header>
<div class="flex items-center gap-2">
<IconifyIcon :icon="selectedComponent?.icon" color="gray" />
<span>{{ selectedComponent?.name }}</span>
<ElText>{{ selectedComponent?.name }}</ElText>
</div>
</template>
<ElScrollbar
@@ -494,7 +480,7 @@ onMounted(() => {
</ElContainer>
<!-- 预览弹框 -->
<ElDialog v-model="previewDialogVisible" title="预览" width="700">
<ElDialog v-model:open="previewDialogVisible" title="预览" width="700">
<div class="flex justify-around">
<IFrame
:src="previewUrl"