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"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { PREDEFINE_COLORS } from '@vben/constants'; // import { PREDEFINE_COLORS } from '@vben/constants';
import { Input, InputGroup } from 'ant-design-vue'; import { Input, InputGroup } from 'ant-design-vue';
@@ -29,7 +29,9 @@ const color = computed({
<template> <template>
<InputGroup compact> <InputGroup compact>
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" /> <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
<Input v-model:value="color" class="flex-1" /> <Input v-model:value="color" class="flex-1" />
</InputGroup> </InputGroup>
</template> </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 { useVModel } from '@vueuse/core';
import { Button, Form, FormItem, Typography } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
@@ -28,8 +30,8 @@ const handleOpenEditDialog = () => {
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<!-- 表单 --> <!-- 表单 -->
<ElForm label-width="80px" :model="formData" class="mt-2"> <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" class="mt-2">
<ElFormItem label="上传图片" prop="imgUrl"> <FormItem label="上传图片" prop="imgUrl">
<UploadImg <UploadImg
v-model="formData.imgUrl" v-model="formData.imgUrl"
height="50px" height="50px"
@@ -38,15 +40,15 @@ const handleOpenEditDialog = () => {
:show-description="false" :show-description="false"
> >
<template #tip> <template #tip>
<ElText type="info" size="small"> 推荐宽度 750</ElText> <Typography.Text type="secondary" class="text-xs"> 推荐宽度 750</Typography.Text>
</template> </template>
</UploadImg> </UploadImg>
</ElFormItem> </FormItem>
</ElForm> </Form>
<ElButton type="primary" plain class="w-full" @click="handleOpenEditDialog"> <Button type="primary" class="w-full" @click="handleOpenEditDialog">
设置热区 设置热区
</ElButton> </Button>
</ComponentContainerProperty> </ComponentContainerProperty>
<!-- 热区编辑对话框 --> <!-- 热区编辑对话框 -->
<HotZoneEditDialog <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 { useVModel } from '@vueuse/core';
import { Form, FormItem } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components'; import { AppLinkInput } from '#/views/mall/promotion/components';
@@ -18,8 +20,8 @@ const formData = useVModel(props, 'modelValue', emit);
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData"> <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<ElFormItem label="上传图片" prop="imgUrl"> <FormItem label="上传图片" prop="imgUrl">
<UploadImg <UploadImg
v-model="formData.imgUrl" v-model="formData.imgUrl"
draggable="false" draggable="false"
@@ -30,11 +32,11 @@ const formData = useVModel(props, 'modelValue', emit);
> >
<template #tip> 建议宽度750 </template> <template #tip> 建议宽度750 </template>
</UploadImg> </UploadImg>
</ElFormItem> </FormItem>
<ElFormItem label="链接" prop="url"> <FormItem label="链接" prop="url">
<AppLinkInput v-model="formData.url" /> <AppLinkInput v-model="formData.url" />
</ElFormItem> </FormItem>
</ElForm> </Form>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </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 { useVModel } from '@vueuse/core';
import { import {
ElCard, Card,
ElForm, Form,
ElFormItem, FormItem,
ElRadio, Radio,
ElRadioGroup, RadioGroup,
ElSwitch, Switch,
} from 'ant-design-vue';
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
@@ -27,21 +28,21 @@ const formData = useVModel(props, 'modelValue', emit);
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<!-- 表单 --> <!-- 表单 -->
<ElForm label-width="80px" :model="formData" class="mt-2"> <Form label-width="80px" :model="formData" class="mt-2">
<ElFormItem label="每行数量" prop="column"> <FormItem label="每行数量" prop="column">
<ElRadioGroup v-model="formData.column"> <RadioGroup v-model="formData.column">
<ElRadio :value="3">3个</ElRadio> <Radio :value="3">3个</Radio>
<ElRadio :value="4">4个</ElRadio> <Radio :value="4">4个</Radio>
</ElRadioGroup> </RadioGroup>
</ElFormItem> </FormItem>
<ElCard header="菜单设置" class="property-group" shadow="never"> <Card header="菜单设置" class="property-group" shadow="never">
<Draggable <Draggable
v-model="formData.list" v-model="formData.list"
:empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
> >
<template #default="{ element }"> <template #default="{ element }">
<ElFormItem label="图标" prop="iconUrl"> <FormItem label="图标" prop="iconUrl">
<UploadImg <UploadImg
v-model="element.iconUrl" v-model="element.iconUrl"
height="80px" height="80px"
@@ -50,40 +51,40 @@ const formData = useVModel(props, 'modelValue', emit);
> >
<template #tip> 建议尺寸：44 * 44 </template> <template #tip> 建议尺寸：44 * 44 </template>
</UploadImg> </UploadImg>
</ElFormItem> </FormItem>
<ElFormItem label="标题" prop="title"> <FormItem label="标题" prop="title">
<InputWithColor <InputWithColor
v-model="element.title" v-model="element.title"
v-model:color="element.titleColor" v-model:color="element.titleColor"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="副标题" prop="subtitle"> <FormItem label="副标题" prop="subtitle">
<InputWithColor <InputWithColor
v-model="element.subtitle" v-model="element.subtitle"
v-model:color="element.subtitleColor" v-model:color="element.subtitleColor"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="链接" prop="url"> <FormItem label="链接" prop="url">
<AppLinkInput v-model="element.url" /> <AppLinkInput v-model="element.url" />
</ElFormItem> </FormItem>
<ElFormItem label="显示角标" prop="badge.show"> <FormItem label="显示角标" prop="badge.show">
<ElSwitch v-model="element.badge.show" /> <Switch v-model="element.badge.show" />
</ElFormItem> </FormItem>
<template v-if="element.badge.show"> <template v-if="element.badge.show">
<ElFormItem label="角标内容" prop="badge.text"> <FormItem label="角标内容" prop="badge.text">
<InputWithColor <InputWithColor
v-model="element.badge.text" v-model="element.badge.text"
v-model:color="element.badge.textColor" v-model:color="element.badge.textColor"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="背景颜色" prop="badge.bgColor"> <FormItem label="背景颜色" prop="badge.bgColor">
<ColorInput v-model="element.badge.bgColor" /> <ColorInput v-model="element.badge.bgColor" />
</ElFormItem> </FormItem>
</template> </template>
</template> </template>
</Draggable> </Draggable>
</ElCard> </Card>
</ElForm> </Form>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </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 { useVModel } from '@vueuse/core';
import { Form, FormItem, Textarea } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components'; import { ColorInput } from '#/views/mall/promotion/components';
@@ -22,8 +24,8 @@ const formData = useVModel(props, 'modelValue', emit);
<Form <Form
:model="formData" :model="formData"
:rules="rules" :rules="rules"
label-col="{ span: 6 }" :label-col="{ span: 6 }"
wrapper-col="{ span: 18 }" :wrapper-col="{ span: 18 }"
> >
<FormItem label="页面描述" name="description"> <FormItem label="页面描述" name="description">
<Textarea <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 { 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 UploadImg from '#/components/upload/image-upload.vue';
import { InputWithColor as ColorInput } from '#/views/mall/promotion/components'; import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
@@ -22,48 +34,48 @@ const formData = useVModel(props, 'modelValue', emit);
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData"> <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<ElCard header="商品列表" class="property-group" shadow="never"> <Card title="商品列表" class="property-group" :bordered="false">
<!-- <SpuShowcase v-model="formData.spuIds" /> --> <!-- <SpuShowcase v-model="formData.spuIds" /> -->
</ElCard> </Card>
<ElCard header="商品样式" class="property-group" shadow="never"> <Card title="商品样式" class="property-group" :bordered="false">
<ElFormItem label="布局" prop="type"> <FormItem label="布局" prop="type">
<ElRadioGroup v-model="formData.layoutType"> <RadioGroup v-model:value="formData.layoutType">
<ElTooltip class="item" content="双列" placement="bottom"> <Tooltip title="双列" placement="bottom">
<ElRadioButton value="twoCol"> <RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" /> <IconifyIcon icon="fluent:text-column-two-24-filled" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
<ElTooltip class="item" content="三列" placement="bottom"> <Tooltip title="三列" placement="bottom">
<ElRadioButton value="threeCol"> <RadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" /> <IconifyIcon icon="fluent:text-column-three-24-filled" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
<ElTooltip class="item" content="水平滑动" placement="bottom"> <Tooltip title="水平滑动" placement="bottom">
<ElRadioButton value="horizSwiper"> <RadioButton value="horizSwiper">
<IconifyIcon icon="system-uicons:carousel" /> <IconifyIcon icon="system-uicons:carousel" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
</ElRadioGroup> </RadioGroup>
</ElFormItem> </FormItem>
<ElFormItem label="商品名称" prop="fields.name.show"> <FormItem label="商品名称" prop="fields.name.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" /> <ColorInput v-model="formData.fields.name.color" />
<ElCheckbox v-model="formData.fields.name.show" /> <Checkbox v-model:checked="formData.fields.name.show" />
</div> </div>
</ElFormItem> </FormItem>
<ElFormItem label="商品价格" prop="fields.price.show"> <FormItem label="商品价格" prop="fields.price.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" /> <ColorInput v-model="formData.fields.price.color" />
<ElCheckbox v-model="formData.fields.price.show" /> <Checkbox v-model:checked="formData.fields.price.show" />
</div> </div>
</ElFormItem> </FormItem>
</ElCard> </Card>
<ElCard header="角标" class="property-group" shadow="never"> <Card title="角标" class="property-group" :bordered="false">
<ElFormItem label="角标" prop="badge.show"> <FormItem label="角标" prop="badge.show">
<ElSwitch v-model="formData.badge.show" /> <Switch v-model:checked="formData.badge.show" />
</ElFormItem> </FormItem>
<ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show"> <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<UploadImg <UploadImg
v-model="formData.badge.imgUrl" v-model="formData.badge.imgUrl"
height="44px" height="44px"
@@ -72,41 +84,32 @@ const formData = useVModel(props, 'modelValue', emit);
> >
<template #tip> 建议尺寸：36 * 22 </template> <template #tip> 建议尺寸：36 * 22 </template>
</UploadImg> </UploadImg>
</ElFormItem> </FormItem>
</ElCard> </Card>
<ElCard header="商品样式" class="property-group" shadow="never"> <Card title="商品样式" class="property-group" :bordered="false">
<ElFormItem label="上圆角" prop="borderRadiusTop"> <FormItem label="上圆角" prop="borderRadiusTop">
<ElSlider <Slider
v-model="formData.borderRadiusTop" v-model:value="formData.borderRadiusTop"
:max="100" :max="100"
:min="0" :min="0"
show-input
input-size="small"
:show-input-controls="false"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="下圆角" prop="borderRadiusBottom"> <FormItem label="下圆角" prop="borderRadiusBottom">
<ElSlider <Slider
v-model="formData.borderRadiusBottom" v-model:value="formData.borderRadiusBottom"
:max="100" :max="100"
:min="0" :min="0"
show-input
input-size="small"
:show-input-controls="false"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="间隔" prop="space"> <FormItem label="间隔" prop="space">
<ElSlider <Slider
v-model="formData.space" v-model:value="formData.space"
:max="100" :max="100"
:min="0" :min="0"
show-input
input-size="small"
:show-input-controls="false"
/> />
</ElFormItem> </FormItem>
</ElCard> </Card>
</ElForm> </Form>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </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 { useVModel } from '@vueuse/core';
import { Form, FormItem, Select } from 'ant-design-vue';
import * as ArticleApi from '#/api/mall/promotion/article/index'; import * as ArticleApi from '#/api/mall/promotion/article/index';
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
@@ -42,26 +44,19 @@ onMounted(() => {
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<ElForm label-width="40px" :model="formData"> <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<ElFormItem label="文章" prop="id"> <FormItem label="文章" prop="id">
<ElSelect <Select
v-model="formData.id" v-model:value="formData.id"
placeholder="请选择文章" placeholder="请选择文章"
class="w-full" class="w-full"
filterable filterable
remote
:remote-method="queryArticleList"
:loading="loading" :loading="loading"
> :options="articles.map((item) => ({ label: item.title, value: item.id }))"
<ElOption @search="queryArticleList"
v-for="article in articles"
:key="article.id"
:label="article.title"
:value="article.id"
/> />
</ElSelect> </FormItem>
</ElFormItem> </Form>
</ElForm>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </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 { 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 * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue'; import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
@@ -35,102 +49,97 @@ onMounted(async () => {
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData"> <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
<ElCard header="拼团活动" class="property-group" shadow="never"> <Card title="拼团活动" class="property-group" :bordered="false">
<CombinationShowcase v-model="formData.activityIds" /> <CombinationShowcase v-model="formData.activityIds" />
</ElCard> </Card>
<ElCard header="商品样式" class="property-group" shadow="never"> <Card title="商品样式" class="property-group" :bordered="false">
<ElFormItem label="布局" prop="type"> <FormItem label="布局" prop="type">
<ElRadioGroup v-model="formData.layoutType"> <RadioGroup v-model:value="formData.layoutType">
<ElTooltip class="item" content="单列大图" placement="bottom"> <Tooltip title="单列大图" placement="bottom">
<ElRadioButton value="oneColBigImg"> <RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" /> <IconifyIcon icon="fluent:text-column-one-24-filled" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
<ElTooltip class="item" content="单列小图" placement="bottom"> <Tooltip title="单列小图" placement="bottom">
<ElRadioButton value="oneColSmallImg"> <RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" /> <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
<ElTooltip class="item" content="双列" placement="bottom"> <Tooltip title="双列" placement="bottom">
<ElRadioButton value="twoCol"> <RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" /> <IconifyIcon icon="fluent:text-column-two-24-filled" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
<!--<el-tooltip class="item" content="三列" placement="bottom"> </RadioGroup>
<el-radio-button value="threeCol"> </FormItem>
<IconifyIcon icon="fluent:text-column-three-24-filled" /> <FormItem label="商品名称" prop="fields.name.show">
</ElRadioButton>
</ElTooltip>-->
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="商品名称" prop="fields.name.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" /> <ColorInput v-model="formData.fields.name.color" />
<ElCheckbox v-model="formData.fields.name.show" /> <Checkbox v-model:checked="formData.fields.name.show" />
</div> </div>
</ElFormItem> </FormItem>
<ElFormItem label="商品简介" prop="fields.introduction.show"> <FormItem label="商品简介" prop="fields.introduction.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" /> <ColorInput v-model="formData.fields.introduction.color" />
<ElCheckbox v-model="formData.fields.introduction.show" /> <Checkbox v-model:checked="formData.fields.introduction.show" />
</div> </div>
</ElFormItem> </FormItem>
<ElFormItem label="商品价格" prop="fields.price.show"> <FormItem label="商品价格" prop="fields.price.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" /> <ColorInput v-model="formData.fields.price.color" />
<ElCheckbox v-model="formData.fields.price.show" /> <Checkbox v-model:checked="formData.fields.price.show" />
</div> </div>
</ElFormItem> </FormItem>
<ElFormItem label="市场价" prop="fields.marketPrice.show"> <FormItem label="市场价" prop="fields.marketPrice.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" /> <ColorInput v-model="formData.fields.marketPrice.color" />
<ElCheckbox v-model="formData.fields.marketPrice.show" /> <Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div> </div>
</ElFormItem> </FormItem>
<ElFormItem label="商品销量" prop="fields.salesCount.show"> <FormItem label="商品销量" prop="fields.salesCount.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" /> <ColorInput v-model="formData.fields.salesCount.color" />
<ElCheckbox v-model="formData.fields.salesCount.show" /> <Checkbox v-model:checked="formData.fields.salesCount.show" />
</div> </div>
</ElFormItem> </FormItem>
<ElFormItem label="商品库存" prop="fields.stock.show"> <FormItem label="商品库存" prop="fields.stock.show">
<div class="flex gap-2"> <div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" /> <ColorInput v-model="formData.fields.stock.color" />
<ElCheckbox v-model="formData.fields.stock.show" /> <Checkbox v-model:checked="formData.fields.stock.show" />
</div> </div>
</ElFormItem> </FormItem>
</ElCard> </Card>
<ElCard header="角标" class="property-group" shadow="never"> <Card title="角标" class="property-group" :bordered="false">
<ElFormItem label="角标" prop="badge.show"> <FormItem label="角标" prop="badge.show">
<ElSwitch v-model="formData.badge.show" /> <Switch v-model:checked="formData.badge.show" />
</ElFormItem> </FormItem>
<ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show"> <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px"> <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
<template #tip> 建议尺寸：36 * 22</template> <template #tip> 建议尺寸：36 * 22</template>
</UploadImg> </UploadImg>
</ElFormItem> </FormItem>
</ElCard> </Card>
<ElCard header="按钮" class="property-group" shadow="never"> <Card title="按钮" class="property-group" :bordered="false">
<ElFormItem label="按钮类型" prop="btnBuy.type"> <FormItem label="按钮类型" prop="btnBuy.type">
<ElRadioGroup v-model="formData.btnBuy.type"> <RadioGroup v-model:value="formData.btnBuy.type">
<ElRadioButton value="text">文字</ElRadioButton> <RadioButton value="text">文字</RadioButton>
<ElRadioButton value="img">图片</ElRadioButton> <RadioButton value="img">图片</RadioButton>
</ElRadioGroup> </RadioGroup>
</ElFormItem> </FormItem>
<template v-if="formData.btnBuy.type === 'text'"> <template v-if="formData.btnBuy.type === 'text'">
<ElFormItem label="按钮文字" prop="btnBuy.text"> <FormItem label="按钮文字" prop="btnBuy.text">
<ElInput v-model="formData.btnBuy.text" /> <Input v-model:value="formData.btnBuy.text" />
</ElFormItem> </FormItem>
<ElFormItem label="左侧背景" prop="btnBuy.bgBeginColor"> <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" /> <ColorInput v-model="formData.btnBuy.bgBeginColor" />
</ElFormItem> </FormItem>
<ElFormItem label="右侧背景" prop="btnBuy.bgEndColor"> <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" /> <ColorInput v-model="formData.btnBuy.bgEndColor" />
</ElFormItem> </FormItem>
</template> </template>
<template v-else> <template v-else>
<ElFormItem label="图片" prop="btnBuy.imgUrl"> <FormItem label="图片" prop="btnBuy.imgUrl">
<UploadImg <UploadImg
v-model="formData.btnBuy.imgUrl" v-model="formData.btnBuy.imgUrl"
height="56px" height="56px"
@@ -139,42 +148,33 @@ onMounted(async () => {
> >
<template #tip> 建议尺寸：56 * 56</template> <template #tip> 建议尺寸：56 * 56</template>
</UploadImg> </UploadImg>
</ElFormItem> </FormItem>
</template> </template>
</ElCard> </Card>
<ElCard header="商品样式" class="property-group" shadow="never"> <Card title="商品样式" class="property-group" :bordered="false">
<ElFormItem label="上圆角" prop="borderRadiusTop"> <FormItem label="上圆角" prop="borderRadiusTop">
<ElSlider <Slider
v-model="formData.borderRadiusTop" v-model:value="formData.borderRadiusTop"
:max="100" :max="100"
:min="0" :min="0"
show-input
input-size="small"
:show-input-controls="false"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="下圆角" prop="borderRadiusBottom"> <FormItem label="下圆角" prop="borderRadiusBottom">
<ElSlider <Slider
v-model="formData.borderRadiusBottom" v-model:value="formData.borderRadiusBottom"
:max="100" :max="100"
:min="0" :min="0"
show-input
input-size="small"
:show-input-controls="false"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="间隔" prop="space"> <FormItem label="间隔" prop="space">
<ElSlider <Slider
v-model="formData.space" v-model:value="formData.space"
:max="100" :max="100"
:min="0" :min="0"
show-input
input-size="small"
:show-input-controls="false"
/> />
</ElFormItem> </FormItem>
</ElCard> </Card>
</ElForm> </Form>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </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 { 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 UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,
@@ -35,7 +45,7 @@ const handleThemeChange = () => {
<template> <template>
<div class="tab-bar"> <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"> <FormItem label="主题" name="theme">
<Select v-model:value="formData!.theme" @change="handleThemeChange"> <Select v-model:value="formData!.theme" @change="handleThemeChange">
<SelectOption <SelectOption
@@ -109,8 +119,8 @@ const handleThemeChange = () => {
<FormItem <FormItem
name="text" name="text"
label="文字" label="文字"
label-col="{ span: 4 }" :label-col="{ span: 4 }"
wrapper-col="{ span: 20 }" :wrapper-col="{ span: 20 }"
class="mb-2" class="mb-2"
> >
<Input v-model:value="element.text" placeholder="请输入文字" /> <Input v-model:value="element.text" placeholder="请输入文字" />
@@ -118,8 +128,8 @@ const handleThemeChange = () => {
<FormItem <FormItem
name="url" name="url"
label="链接" label="链接"
label-col="{ span: 4 }" :label-col="{ span: 4 }"
wrapper-col="{ span: 20 }" :wrapper-col="{ span: 20 }"
class="mb-0" class="mb-0"
> >
<AppLinkInput v-model="element.url" /> <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 { useVModel } from '@vueuse/core';
import { Form, FormItem, Slider, Switch } from 'ant-design-vue';
import UploadFile from '#/components/upload/file-upload.vue'; import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-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" /> <Slider v-model:value="formData.style.height" :max="500" :min="100" />
</FormItem> </FormItem>
</template> </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"> <FormItem label="上传视频" name="videoUrl">
<UploadFile <UploadFile
v-model="formData.videoUrl" 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> <script lang="ts" setup>
import { PREDEFINE_COLORS } from '@vben/constants'; // import { PREDEFINE_COLORS } from '@vben/constants';
import { useVModels } from '@vueuse/core'; import { useVModels } from '@vueuse/core';
import { Input, InputGroup } from 'ant-design-vue'; import { Input, InputGroup } from 'ant-design-vue';
@@ -26,7 +26,9 @@ const { modelValue, color } = useVModels(props, emit);
<template> <template>
<InputGroup compact> <InputGroup compact>
<Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" /> <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" /> <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
</InputGroup> </InputGroup>
</template> </template>
<style scoped lang="scss"></style> <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"> <script setup lang="ts">
import type { import type { ComponentStyle, DiyComponent } from '../util';
ComponentStyle,
DiyComponent,
} from '../util';
import { computed } from 'vue'; import { computed } from 'vue';
@@ -10,9 +7,10 @@ import { IconifyIcon } from '@vben/icons';
import { ElButton, ElTooltip } from 'element-plus'; import { ElButton, ElTooltip } from 'element-plus';
import { components } from './mobile';
import { VerticalButtonGroup } from '#/views/mall/promotion/components'; 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"> <script setup lang="ts">
import type { import type { DiyComponent, DiyComponentLibrary } from '../util';
DiyComponent,
DiyComponentLibrary,
} from '../util';
import { reactive, watch } from 'vue'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 轮播图属性 */ /** 轮播图属性 */
export interface CarouselProperty { 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, ElTooltip,
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadFile from '#/components/upload/file-upload.vue'; import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components'; import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 轮播图属性面板 // 轮播图属性面板
defineOptions({ name: 'CarouselProperty' }); 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 商品卡片属性 */ /** 商品卡片属性 */
export interface CouponCardProperty { 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'; } from 'element-plus';
import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate'; 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 UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components'; import { ColorInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// TODO: 添加组件 // TODO: 添加组件
// import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue'; // 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"> <script setup lang="ts">
import type { HotZoneItemProperty } from '../../config';
import type { ControlDot } from './controller'; import type { ControlDot } from './controller';
import type { HotZoneItemProperty } from '../../config';
import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data'; import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
import { ref } from 'vue'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 热区属性 */ /** 热区属性 */
export interface HotZoneProperty { 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 { useVModel } from '@vueuse/core';
import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus'; import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.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'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 图片展示属性 */ /** 图片展示属性 */
export interface ImageBarProperty { 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 { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem } from 'element-plus'; import { ElForm, ElFormItem } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components'; import { AppLinkInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 图片展示属性面板 // 图片展示属性面板
defineOptions({ name: 'ImageBarProperty' }); 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 广告魔方属性 */ /** 广告魔方属性 */
export interface MagicCubeProperty { 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 { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus'; import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,
MagicCubeEditor, MagicCubeEditor,
} from '#/views/mall/promotion/components'; } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 广告魔方属性面板 */ /** 广告魔方属性面板 */
defineOptions({ name: 'MagicCubeProperty' }); 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
import { cloneDeep } from '@vben/utils'; 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, ElSwitch,
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components'; import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
import { cloneDeep } from '@vben/utils'; 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 { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElText } from 'element-plus'; import { ElForm, ElFormItem, ElText } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,
@@ -12,6 +11,7 @@ import {
InputWithColor, InputWithColor,
} from '#/views/mall/promotion/components'; } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
import { cloneDeep } from '@vben/utils'; 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, ElSwitch,
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,
@@ -22,6 +21,7 @@ import {
InputWithColor, InputWithColor,
} from '#/views/mall/promotion/components'; } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config'; 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"> <script setup lang="ts">
import type { StyleValue } from 'vue'; import type { StyleValue } from 'vue';
import type { SearchProperty } from '../search-bar/config';
import type { import type {
NavigationBarCellProperty, NavigationBarCellProperty,
NavigationBarProperty, NavigationBarProperty,
} from './config'; } from './config';
import type { SearchProperty } from '../search-bar/config';
import { computed } from 'vue'; import { computed } from 'vue';
import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png'; import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
import SearchBar from '../search-bar/index.vue'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 公告栏属性 */ /** 公告栏属性 */
export interface NoticeBarProperty { 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 { useVModel } from '@vueuse/core';
import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus'; import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,
@@ -12,6 +11,8 @@ import {
Draggable, Draggable,
} from '#/views/mall/promotion/components'; } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 通知栏属性面板 // 通知栏属性面板
defineOptions({ name: 'NoticeBarProperty' }); defineOptions({ name: 'NoticeBarProperty' });
const props = defineProps<{ modelValue: 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 商品卡片属性 */ /** 商品卡片属性 */
export interface ProductCardProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 商品栏属性 */ /** 商品栏属性 */
export interface ProductListProperty { 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, ElTooltip,
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { InputWithColor as ColorInput } from '#/views/mall/promotion/components'; import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// TODO: 添加组件 // TODO: 添加组件
// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue'; // 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 营销文章属性 */ /** 营销文章属性 */
export interface PromotionArticleProperty { 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 { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
import * as ArticleApi from '#/api/mall/promotion/article/index'; import * as ArticleApi from '#/api/mall/promotion/article/index';
import ComponentContainerProperty from '../../component-container-property.vue'; 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 拼团属性 */ /** 拼团属性 */
export interface PromotionCombinationProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 积分商城属性 */ /** 积分商城属性 */
export interface PromotionPointProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 秒杀属性 */ /** 秒杀属性 */
export interface PromotionSeckillProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 搜索框属性 */ /** 搜索框属性 */
export interface SearchProperty { 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, ElTooltip,
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import { Draggable } from '#/views/mall/promotion/components'; import { Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 搜索框属性面板 */ /** 搜索框属性面板 */
defineOptions({ name: 'SearchProperty' }); 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 标题栏属性 */ /** 标题栏属性 */
export interface TitleBarProperty { 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, ElTooltip,
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,
InputWithColor, InputWithColor,
} from '#/views/mall/promotion/components'; } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
// 导航栏属性面板 // 导航栏属性面板
defineOptions({ name: 'TitleBarProperty' }); 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 用户卡片属性 */ /** 用户卡片属性 */
export interface UserCardProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 用户卡券属性 */ /** 用户卡券属性 */
export interface UserCouponProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 用户订单属性 */ /** 用户订单属性 */
export interface UserOrderProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 用户资产属性 */ /** 用户资产属性 */
export interface UserWalletProperty { 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 { import type { ComponentStyle, DiyComponent } from '../../../util';
ComponentStyle,
DiyComponent,
} from '../../../util';
/** 视频播放属性 */ /** 视频播放属性 */
export interface VideoPlayerProperty { 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 { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus'; import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadFile from '#/components/upload/file-upload.vue'; import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import ComponentContainerProperty from '../../component-container-property.vue';
// 视频播放属性面板 // 视频播放属性面板
defineOptions({ name: 'VideoPlayerProperty' }); 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 { useQRCode } from '@vueuse/integrations/useQRCode';
import { import {
ElAside, ElAside,
ElButtonGroup,
ElCard, ElCard,
ElContainer, ElContainer,
ElDialog, ElDialog,
@@ -20,18 +19,14 @@ import {
ElText, ElText,
ElTooltip, ElTooltip,
} from 'element-plus'; } from 'element-plus';
import draggable from 'vuedraggable';
import statusBarImg from '#/assets/imgs/diy/statusBar.png'; 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 ComponentContainer from './components/component-container.vue';
import ComponentLibrary from './components/component-library.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 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'; import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
/** 页面装修详情页 */ /** 页面装修详情页 */
defineOptions({ defineOptions({
@@ -312,35 +307,40 @@ onMounted(() => {
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </div>
<!-- 右侧操作区 --> <!-- 右侧操作区 -->
<ElButtonGroup class="header-right"> <div class="header-right">
<ElTooltip content="重置"> <ElTooltip title="重置">
<ElButton @click="handleReset"> <ElButton @click="handleReset">
<IconifyIcon :size="24" icon="system-uicons:reset-alt" /> <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
</ElButton> </ElButton>
</ElTooltip> </ElTooltip>
<ElTooltip v-if="previewUrl" content="预览"> <ElTooltip v-if="previewUrl" title="预览">
<ElButton @click="handlePreview"> <ElButton @click="handlePreview">
<IconifyIcon :size="24" icon="ep:view" /> <IconifyIcon :size="24" icon="ep:view" />
</ElButton> </ElButton>
</ElTooltip> </ElTooltip>
<ElTooltip content="保存"> <ElTooltip title="保存">
<ElButton @click="handleSave"> <ElButton @click="handleSave">
<IconifyIcon :size="24" icon="ep:check" /> <IconifyIcon :size="24" icon="ep:check" />
</ElButton> </ElButton>
</ElTooltip> </ElTooltip>
</ElButtonGroup> </div>
</ElHeader> </ElHeader>
<!-- 中心区域 --> <!-- 中心区域 -->
<ElContainer class="editor-container"> <ElContainer class="editor-container">
<!-- 左侧：组件库（ComponentLibrary） --> <!-- 左侧：组件库（ComponentLibrary） -->
<ElAside width="200px" class="editor-left">
<ComponentLibrary <ComponentLibrary
v-if="libs && libs.length > 0" v-if="libs && libs.length > 0"
ref="componentLibrary" ref="componentLibrary"
:list="libs" :list="libs"
/> />
</ElAside>
<!-- 中心：设计区域（ComponentContainer） --> <!-- 中心：设计区域（ComponentContainer） -->
<div class="editor-center page-prop-area" @click="handlePageSelected"> <ElContainer
class="editor-center page-prop-area"
@click="handlePageSelected"
>
<!-- 手机顶部 --> <!-- 手机顶部 -->
<div class="editor-design-top"> <div class="editor-design-top">
<!-- 手机顶部状态栏 --> <!-- 手机顶部状态栏 -->
@@ -371,15 +371,7 @@ onMounted(() => {
/> />
</div> </div>
<!-- 手机页面编辑区域 --> <!-- 手机页面编辑区域 -->
<ElScrollbar <ElScrollbar class="phone-container">
: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)"
>
<draggable <draggable
v-model="pageComponents" v-model="pageComponents"
:animation="200" :animation="200"
@@ -424,42 +416,36 @@ onMounted(() => {
<div class="fixed-component-action-group gap-2"> <div class="fixed-component-action-group gap-2">
<ElTag <ElTag
v-if="showPageConfig" v-if="showPageConfig"
:effect=" :color="
selectedComponent?.uid === pageConfigComponent.uid selectedComponent?.uid === pageConfigComponent.uid
? 'dark' ? 'blue'
: 'plain' : 'default'
"
:type="
selectedComponent?.uid === pageConfigComponent.uid
? 'primary'
: 'info'
" "
:bordered="false"
size="large" size="large"
@click="handleComponentSelected(pageConfigComponent)" @click="handleComponentSelected(pageConfigComponent)"
> >
<IconifyIcon :icon="pageConfigComponent.icon" :size="12" /> <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
<span>{{ pageConfigComponent.name }}</span> <ElText>{{ pageConfigComponent.name }}</ElText>
</ElTag> </ElTag>
<template v-for="(component, index) in pageComponents" :key="index"> <template v-for="(component, index) in pageComponents" :key="index">
<ElTag <ElTag
v-if="component.position === 'fixed'" v-if="component.position === 'fixed'"
:effect=" :color="
selectedComponent?.uid === component.uid ? 'dark' : 'plain' selectedComponent?.uid === component.uid ? 'blue' : 'default'
"
:type="
selectedComponent?.uid === component.uid ? 'primary' : 'info'
" "
:bordered="false"
closable closable
size="large" size="large"
@click="handleComponentSelected(component)" @click="handleComponentSelected(component)"
@close="handleDeleteComponent(index)" @close="handleDeleteComponent(index)"
> >
<IconifyIcon :icon="component.icon" :size="12" /> <IconifyIcon :icon="component.icon" :size="12" />
<span>{{ component.name }}</span> <ElText>{{ component.name }}</ElText>
</ElTag> </ElTag>
</template> </template>
</div> </div>
</div> </ElContainer>
<!-- 右侧：属性面板（ComponentContainerProperty） --> <!-- 右侧：属性面板（ComponentContainerProperty） -->
<ElAside <ElAside
v-if="selectedComponent?.property" v-if="selectedComponent?.property"
@@ -469,13 +455,13 @@ onMounted(() => {
<ElCard <ElCard
body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]" body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
class="h-full" class="h-full"
shadow="never" :bordered="false"
> >
<!-- 组件名称 --> <!-- 组件名称 -->
<template #header> <template #header>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<IconifyIcon :icon="selectedComponent?.icon" color="gray" /> <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
<span>{{ selectedComponent?.name }}</span> <ElText>{{ selectedComponent?.name }}</ElText>
</div> </div>
</template> </template>
<ElScrollbar <ElScrollbar
@@ -494,7 +480,7 @@ onMounted(() => {
</ElContainer> </ElContainer>
<!-- 预览弹框 --> <!-- 预览弹框 -->
<ElDialog v-model="previewDialogVisible" title="预览" width="700"> <ElDialog v-model:open="previewDialogVisible" title="预览" width="700">
<div class="flex justify-around"> <div class="flex justify-around">
<IFrame <IFrame
:src="previewUrl" :src="previewUrl"