oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 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>

27
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"
/>
</ElSelect>
</ElFormItem>
</ElForm>
:options="articles.map((item) => ({ label: item.title, value: item.id }))"
@search="queryArticleList"
/>
</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>