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

fix: lint

Browse Source
This commit is contained in:
xingyu4j
2025-11-04 17:56:30 +08:00
parent 689d4cd2a1
commit 58dc5aefab
29 changed files with 138 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
View File

@@ -27,7 +27,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit); const formData = useVModel(props, 'modelValue', emit);
const treeData = [ const treeData: any[] = [
{ {
label: '外部边距', label: '外部边距',
prop: 'margin', prop: 'margin',
@@ -96,7 +96,7 @@ const treeData = [
}, },
]; ];
const handleSliderChange = (prop: string) => { function handleSliderChange(prop: string) {
switch (prop) { switch (prop) {
case 'borderRadius': { case 'borderRadius': {
formData.value.borderTopLeftRadius = formData.value.borderRadius; formData.value.borderTopLeftRadius = formData.value.borderRadius;
@@ -120,7 +120,7 @@ const handleSliderChange = (prop: string) => {
break; break;
} }
} }
}; }
</script> </script>
<template> <template>
@@ -161,7 +161,9 @@ const handleSliderChange = (prop: string) => {
<FormItem <FormItem
:label="dataRef.label" :label="dataRef.label"
:name="dataRef.prop" :name="dataRef.prop"
:label-col="dataRef.children ? { span: 6 } : { span: 5, offset: 1 }" :label-col="
dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
"
:wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }" :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
class="mb-0 w-full" class="mb-0 w-full"
> >

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

@@ -129,7 +129,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none; border-bottom: none;
} }
/* 组件 hover 和 active 状态（需要 CSS 变量）*/ /* 组件 hover 和 active 状态（需要 CSS 变量） */
.component.active, .component.active,
.component:hover { .component:hover {
color: var(--ant-color-white); color: var(--ant-color-white);

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

@@ -4,6 +4,17 @@ import type { CarouselProperty } from './config';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Radio,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} 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';
@@ -21,33 +32,33 @@ 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-width="80px" :model="formData">
<ElCard header="样式设置" class="property-group" shadow="never"> <Card header="样式设置" class="property-group" shadow="never">
<ElFormItem label="样式" prop="type"> <FormItem label="样式" prop="type">
<ElRadioGroup v-model="formData.type"> <RadioGroup v-model="formData.type">
<ElTooltip class="item" content="默认" placement="bottom"> <Tooltip class="item" content="默认" placement="bottom">
<ElRadioButton value="default"> <RadioButton value="default">
<IconifyIcon icon="system-uicons:carousel" /> <IconifyIcon icon="system-uicons:carousel" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
<ElTooltip class="item" content="卡片" placement="bottom"> <Tooltip class="item" content="卡片" placement="bottom">
<ElRadioButton value="card"> <RadioButton value="card">
<IconifyIcon icon="ic:round-view-carousel" /> <IconifyIcon icon="ic:round-view-carousel" />
</ElRadioButton> </RadioButton>
</ElTooltip> </Tooltip>
</ElRadioGroup> </RadioGroup>
</ElFormItem> </FormItem>
<ElFormItem label="指示器" prop="indicator"> <FormItem label="指示器" prop="indicator">
<ElRadioGroup v-model="formData.indicator"> <RadioGroup v-model="formData.indicator">
<ElRadio value="dot">小圆点</ElRadio> <Radio value="dot">小圆点</Radio>
<ElRadio value="number">数字</ElRadio> <Radio value="number">数字</Radio>
</ElRadioGroup> </RadioGroup>
</ElFormItem> </FormItem>
<ElFormItem label="是否轮播" prop="autoplay"> <FormItem label="是否轮播" prop="autoplay">
<ElSwitch v-model="formData.autoplay" /> <Switch v-model="formData.autoplay" />
</ElFormItem> </FormItem>
<ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay"> <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
<ElSlider <Slider
v-model="formData.interval" v-model="formData.interval"
:max="10" :max="10"
:min="0.5" :min="0.5"
@@ -56,24 +67,19 @@ const formData = useVModel(props, 'modelValue', emit);
input-size="small" input-size="small"
:show-input-controls="false" :show-input-controls="false"
/> />
<ElText type="info">单位：秒</ElText> <p class="text-info">单位：秒</p>
</ElFormItem> </FormItem>
</ElCard> </Card>
<ElCard header="内容设置" class="property-group" shadow="never"> <Card header="内容设置" class="property-group" shadow="never">
<Draggable v-model="formData.items" :empty-item="{ type: 'img' }"> <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
<template #default="{ element }"> <template #default="{ element }">
<ElFormItem <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
label="类型" <RadioGroup v-model="element.type">
prop="type" <Radio value="img">图片</Radio>
class="mb-2" <Radio value="video">视频</Radio>
label-width="40px" </RadioGroup>
> </FormItem>
<ElRadioGroup v-model="element.type"> <FormItem
<ElRadio value="img">图片</ElRadio>
<ElRadio value="video">视频</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem
label="图片" label="图片"
class="mb-2" class="mb-2"
label-width="40px" label-width="40px"
@@ -87,9 +93,9 @@ const formData = useVModel(props, 'modelValue', emit);
class="min-w-[80px]" class="min-w-[80px]"
:show-description="false" :show-description="false"
/> />
</ElFormItem> </FormItem>
<template v-else> <template v-else>
<ElFormItem label="封面" class="mb-2" label-width="40px"> <FormItem label="封面" class="mb-2" label-width="40px">
<UploadImg <UploadImg
v-model="element.imgUrl" v-model="element.imgUrl"
draggable="false" draggable="false"
@@ -98,8 +104,8 @@ const formData = useVModel(props, 'modelValue', emit);
width="100%" width="100%"
class="min-w-[80px]" class="min-w-[80px]"
/> />
</ElFormItem> </FormItem>
<ElFormItem label="视频" class="mb-2" label-width="40px"> <FormItem label="视频" class="mb-2" label-width="40px">
<UploadFile <UploadFile
v-model="element.videoUrl" v-model="element.videoUrl"
:file-type="['mp4']" :file-type="['mp4']"
@@ -107,15 +113,15 @@ const formData = useVModel(props, 'modelValue', emit);
:file-size="100" :file-size="100"
class="min-w-[80px]" class="min-w-[80px]"
/> />
</ElFormItem> </FormItem>
</template> </template>
<ElFormItem label="链接" class="mb-2" label-width="40px"> <FormItem label="链接" class="mb-2" label-width="40px">
<AppLinkInput v-model="element.url" /> <AppLinkInput v-model="element.url" />
</ElFormItem> </FormItem>
</template> </template>
</Draggable> </Draggable>
</ElCard> </Card>
</ElForm> </Form>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </template>

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

@@ -50,11 +50,7 @@ const formData = useVModel(props, 'modelValue', emit);
<template> <template>
<Form :model="formData"> <Form :model="formData">
<FormItem label="高度" name="height"> <FormItem label="高度" name="height">
<Slider <Slider v-model:value="formData.height" :min="1" :max="100" />
v-model:value="formData.height"
:min="1"
:max="100"
/>
</FormItem> </FormItem>
<FormItem label="选择样式" name="borderType"> <FormItem label="选择样式" name="borderType">
<RadioGroup v-model:value="formData!.borderType"> <RadioGroup v-model:value="formData!.borderType">
@@ -72,11 +68,7 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem> </FormItem>
<template v-if="formData.borderType !== 'none'"> <template v-if="formData.borderType !== 'none'">
<FormItem label="线宽" name="lineWidth"> <FormItem label="线宽" name="lineWidth">
<Slider <Slider v-model:value="formData.lineWidth" :min="1" :max="30" />
v-model:value="formData.lineWidth"
:min="1"
:max="30"
/>
</FormItem> </FormItem>
<FormItem label="左右边距" name="paddingType"> <FormItem label="左右边距" name="paddingType">
<RadioGroup v-model:value="formData!.paddingType"> <RadioGroup v-model:value="formData!.paddingType">

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

@@ -2,13 +2,7 @@
import type { PopoverProperty } from './config'; import type { PopoverProperty } from './config';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { import { Form, FormItem, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
Form,
FormItem,
Radio,
RadioGroup,
Tooltip,
} from 'ant-design-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';
@@ -40,10 +34,7 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem> </FormItem>
<FormItem label="显示次数" :name="`list[${index}].showType`"> <FormItem label="显示次数" :name="`list[${index}].showType`">
<RadioGroup v-model:value="element.showType"> <RadioGroup v-model:value="element.showType">
<Tooltip <Tooltip title="只显示一次，下次打开时不显示" placement="bottom">
title="只显示一次，下次打开时不显示"
placement="bottom"
>
<Radio value="once">一次</Radio> <Radio value="once">一次</Radio>
</Tooltip> </Tooltip>
<Tooltip title="每次打开时都会显示" placement="bottom"> <Tooltip title="每次打开时都会显示" placement="bottom">

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
View File

@@ -23,7 +23,7 @@ export const CouponDiscountDesc = defineComponent({
const discountDesc = const discountDesc =
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
? `减${floatToFixed2(coupon.discountPrice)}元` ? `减${floatToFixed2(coupon.discountPrice)}元`
: `打${coupon.discountPercent / 10}折`; : `打${coupon.discountPercent ?? 0 / 10}折`;
return () => ( return () => (
<div> <div>
<span>{useCondition}</span> <span>{useCondition}</span>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
View File

@@ -17,7 +17,7 @@ export const CouponDiscount = defineComponent({
setup(props) { setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate; const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
// 折扣 // 折扣
let value = `${coupon.discountPercent / 10}`; let value = `${coupon.discountPercent ?? 0 / 10}`;
let suffix = ' 折'; let suffix = ' 折';
// 满减 // 满减
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) { if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
View File

@@ -5,6 +5,8 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue';
import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
import { import {
CouponDiscount, CouponDiscount,
CouponDiscountDesc, CouponDiscountDesc,

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

@@ -33,8 +33,6 @@ import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
const { Text: ATypographyText } = Typography;
/** 优惠券卡片属性面板 */ /** 优惠券卡片属性面板 */
defineOptions({ name: 'CouponCardProperty' }); defineOptions({ name: 'CouponCardProperty' });
@@ -42,6 +40,8 @@ const props = defineProps<{ modelValue: CouponCardProperty }>();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const { Text: ATypographyText } = Typography;
const formData = useVModel(props, 'modelValue', emit); const formData = useVModel(props, 'modelValue', emit);
const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表 const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
@@ -90,7 +90,9 @@ watch(
:key="index" :key="index"
class="flex items-center justify-between" class="flex items-center justify-between"
> >
<ATypographyText ellipsis class="text-base">{{ coupon.name }}</ATypographyText> <ATypographyText ellipsis class="text-base">
{{ coupon.name }}
</ATypographyText>
<ATypographyText type="secondary" ellipsis> <ATypographyText type="secondary" ellipsis>
<span v-if="coupon.usePrice > 0"> <span v-if="coupon.usePrice > 0">
满{{ floatToFixed2(coupon.usePrice) }}元， 满{{ floatToFixed2(coupon.usePrice) }}元，
@@ -158,11 +160,7 @@ watch(
<ColorInput v-model="formData.button.color" /> <ColorInput v-model="formData.button.color" />
</FormItem> </FormItem>
<FormItem label="间隔" name="space"> <FormItem label="间隔" name="space">
<Slider <Slider v-model:value="formData.space" :max="100" :min="0" />
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
</Card> </Card>
</Form> </Form>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
View File

@@ -5,7 +5,7 @@ import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { Image, message } from 'ant-design-vue'; import { Button, Image, message } from 'ant-design-vue';
/** 悬浮按钮 */ /** 悬浮按钮 */
defineOptions({ name: 'FloatingActionButton' }); defineOptions({ name: 'FloatingActionButton' });
@@ -57,13 +57,13 @@ const handleActive = (index: number) => {
</div> </div>
</template> </template>
<!-- todo: @owen 使用APP主题色 --> <!-- todo: @owen 使用APP主题色 -->
<el-button type="primary" size="large" circle @click="handleToggleFab"> <Button type="primary" size="large" circle @click="handleToggleFab">
<IconifyIcon <IconifyIcon
icon="ep:plus" icon="ep:plus"
class="fab-icon" class="fab-icon"
:class="[{ active: expanded }]" :class="[{ active: expanded }]"
/> />
</el-button> </Button>
</div> </div>
<!-- 模态背景：展开时显示，点击后折叠 --> <!-- 模态背景：展开时显示，点击后折叠 -->
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div> <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>

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

@@ -11,7 +11,7 @@ import { IconifyIcon } from '@vben/icons';
import { Button, Image } from 'ant-design-vue'; import { Button, Image } from 'ant-design-vue';
import { AppLinkSelectDialog } from '#/views/mall/promotion/components'; import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
import { import {
CONTROL_DOT_LIST, CONTROL_DOT_LIST,
@@ -201,7 +201,8 @@ const handleAppLinkChange = (appLink: AppLink) => {
top: `${item.top}px`, top: `${item.top}px`,
left: `${item.left}px`, left: `${item.left}px`,
color: 'var(--ant-color-primary)', color: 'var(--ant-color-primary)',
background: 'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)', background:
'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
borderColor: 'var(--ant-color-primary)', borderColor: 'var(--ant-color-primary)',
}" }"
@mousedown="handleMove(item, $event)" @mousedown="handleMove(item, $event)"

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

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HotZoneProperty } from './config'; import type { HotZoneProperty } from './config';
import { Image } from 'ant-design-vue';
/** 热区 */ /** 热区 */
defineOptions({ name: 'HotZone' }); defineOptions({ name: 'HotZone' });
const props = defineProps<{ property: HotZoneProperty }>(); const props = defineProps<{ property: HotZoneProperty }>();

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

@@ -14,8 +14,6 @@ import {
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
const { Text: ATypographyText } = Typography;
/** 广告魔方属性面板 */ /** 广告魔方属性面板 */
defineOptions({ name: 'MagicCubeProperty' }); defineOptions({ name: 'MagicCubeProperty' });
@@ -23,6 +21,8 @@ const props = defineProps<{ modelValue: MagicCubeProperty }>();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const { Text: ATypographyText } = Typography;
const formData = useVModel(props, 'modelValue', emit); const formData = useVModel(props, 'modelValue', emit);
const selectedHotAreaIndex = ref(-1); // 选中的热区 const selectedHotAreaIndex = ref(-1); // 选中的热区
@@ -37,7 +37,9 @@ const handleHotAreaSelected = (_: any, index: number) => {
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<Form :model="formData" class="mt-2"> <Form :model="formData" class="mt-2">
<ATypographyText tag="p"> 魔方设置 </ATypographyText> <ATypographyText tag="p"> 魔方设置 </ATypographyText>
<ATypographyText type="secondary" class="text-sm"> 每格尺寸187 * 187 </ATypographyText> <ATypographyText type="secondary" class="text-sm">
每格尺寸187 * 187
</ATypographyText>
<MagicCubeEditor <MagicCubeEditor
class="my-4" class="my-4"
v-model="formData.list" v-model="formData.list"
@@ -61,11 +63,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
</template> </template>
</template> </template>
<FormItem label="上圆角" name="borderRadiusTop"> <FormItem label="上圆角" name="borderRadiusTop">
<Slider <Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
<FormItem label="下圆角" name="borderRadiusBottom"> <FormItem label="下圆角" name="borderRadiusBottom">
<Slider <Slider
@@ -75,11 +73,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
/> />
</FormItem> </FormItem>
<FormItem label="间隔" name="space"> <FormItem label="间隔" name="space">
<Slider <Slider v-model:value="formData.space" :max="100" :min="0" />
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
</Form> </Form>
</ComponentContainerProperty> </ComponentContainerProperty>

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

@@ -11,10 +11,10 @@ import {
Switch, Switch,
} from 'ant-design-vue'; } from 'ant-design-vue';
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';
/** 宫格导航属性面板 */ /** 宫格导航属性面板 */

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
View File

@@ -19,14 +19,14 @@ defineProps<{ property: MenuListProperty }>();
> >
<div class="flex flex-1 flex-row items-center gap-2"> <div class="flex flex-1 flex-row items-center gap-2">
<Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" /> <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
<span class="text-base" :style="{ color: item.titleColor }">{{ <span class="text-base" :style="{ color: item.titleColor }">
item.title {{ item.title }}
}}</span> </span>
</div> </div>
<div class="item-center flex flex-row justify-center gap-1"> <div class="item-center flex flex-row justify-center gap-1">
<span class="text-xs" :style="{ color: item.subtitleColor }">{{ <span class="text-xs" :style="{ color: item.subtitleColor }">
item.subtitle {{ item.subtitle }}
}}</span> </span>
<IconifyIcon icon="ep:arrow-right" color="#000" :size="16" /> <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
</div> </div>
</div> </div>

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

@@ -14,8 +14,6 @@ import {
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config'; import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
const { Text: ATypographyText } = Typography;
/** 列表导航属性面板 */ /** 列表导航属性面板 */
defineOptions({ name: 'MenuListProperty' }); defineOptions({ name: 'MenuListProperty' });
@@ -23,13 +21,17 @@ const props = defineProps<{ modelValue: MenuListProperty }>();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const { Text: ATypographyText } = Typography;
const formData = useVModel(props, 'modelValue', emit); const formData = useVModel(props, 'modelValue', emit);
</script> </script>
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<ATypographyText tag="p"> 菜单设置 </ATypographyText> <ATypographyText tag="p"> 菜单设置 </ATypographyText>
<ATypographyText type="secondary" class="text-sm"> 拖动左侧的小圆点可以调整顺序 </ATypographyText> <ATypographyText type="secondary" class="text-sm">
拖动左侧的小圆点可以调整顺序
</ATypographyText>
<Form :model="formData" class="mt-2"> <Form :model="formData" class="mt-2">
<Draggable <Draggable
v-model="formData.list" v-model="formData.list"

11
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
View File

@@ -6,7 +6,14 @@ import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/u
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { FormItem, Input, Radio, RadioGroup, Slider } from 'ant-design-vue'; import {
FormItem,
Image,
Input,
Radio,
RadioGroup,
Slider,
} from 'ant-design-vue';
import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png'; import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
@@ -71,7 +78,7 @@ const handleHotAreaSelected = (
class="m-b-16px" class="m-b-16px"
@hot-area-selected="handleHotAreaSelected" @hot-area-selected="handleHotAreaSelected"
/> />
<img <Image
v-if="isMp" v-if="isMp"
alt="" alt=""
style="width: 76px; height: 30px" style="width: 76px; height: 30px"

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
View File

@@ -32,7 +32,7 @@ watch(
* 计算商品的间距 * 计算商品的间距
* @param index 商品索引 * @param index 商品索引
*/ */
const calculateSpace = (index: number) => { function calculateSpace(index: number) {
// 商品的列数 // 商品的列数
const columns = props.property.layoutType === 'twoCol' ? 2 : 1; const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
// 第一列没有左边距 // 第一列没有左边距
@@ -41,19 +41,19 @@ const calculateSpace = (index: number) => {
const marginTop = index < columns ? '0' : `${props.property.space}px`; const marginTop = index < columns ? '0' : `${props.property.space}px`;
return { marginLeft, marginTop }; return { marginLeft, marginTop };
}; }
// 容器 // 容器
const containerRef = ref(); const containerRef = ref();
// 计算商品的宽度 // 计算商品的宽度
const calculateWidth = () => { function calculateWidth() {
let width = '100%'; let width = '100%';
// 双列时每列的宽度为：（总宽度 - 间距）/ 2 // 双列时每列的宽度为：（总宽度 - 间距）/ 2
if (props.property.layoutType === 'twoCol') { if (props.property.layoutType === 'twoCol') {
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`; width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
} }
return { width }; return { width };
}; }
</script> </script>
<template> <template>
<div <div

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

@@ -158,11 +158,7 @@ const formData = useVModel(props, 'modelValue', emit);
/> />
</FormItem> </FormItem>
<FormItem label="间隔" name="space"> <FormItem label="间隔" name="space">
<Slider <Slider v-model:value="formData.space" :max="100" :min="0" />
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
</Card> </Card>
</Form> </Form>

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

@@ -56,7 +56,7 @@ onMounted(() => {
filterable filterable
:loading="loading" :loading="loading"
:options=" :options="
articles.map((item) => ({ label: item.title, value: item.id })) articles.map((item: any) => ({ label: item.title, value: item.id }))
" "
@search="queryArticleList" @search="queryArticleList"
/> />

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

@@ -156,11 +156,7 @@ const formData = useVModel(props, 'modelValue', emit);
/> />
</FormItem> </FormItem>
<FormItem label="间隔" name="space"> <FormItem label="间隔" name="space">
<Slider <Slider v-model:value="formData.space" :max="100" :min="0" />
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
</Card> </Card>
</Form> </Form>

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

@@ -19,7 +19,8 @@ import {
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 { SeckillShowcase } from '#/views/mall/promotion/seckill/components'; // TODO: 添加组件
// import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
import ComponentContainerProperty from '../../component-container-property.vue'; import ComponentContainerProperty from '../../component-container-property.vue';
@@ -158,11 +159,7 @@ const formData = useVModel(props, 'modelValue', emit);
/> />
</FormItem> </FormItem>
<FormItem label="间隔" name="space"> <FormItem label="间隔" name="space">
<Slider <Slider v-model:value="formData.space" :max="100" :min="0" />
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
</Card> </Card>
</Form> </Form>

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

@@ -101,11 +101,7 @@ watch(
<Switch v-model:checked="formData!.showScan" /> <Switch v-model:checked="formData!.showScan" />
</FormItem> </FormItem>
<FormItem label="框体高度" name="height"> <FormItem label="框体高度" name="height">
<Slider <Slider v-model:value="formData!.height" :max="50" :min="28" />
v-model:value="formData!.height"
:max="50"
:min="28"
/>
</FormItem> </FormItem>
<FormItem label="框体颜色" name="backgroundColor"> <FormItem label="框体颜色" name="backgroundColor">
<ColorInput v-model="formData.backgroundColor" /> <ColorInput v-model="formData.backgroundColor" />

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

@@ -65,18 +65,10 @@ const rules = {}; // 表单校验
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem label="偏移量" name="marginLeft"> <FormItem label="偏移量" name="marginLeft">
<Slider <Slider v-model:value="formData.marginLeft" :max="100" :min="0" />
v-model:value="formData.marginLeft"
:max="100"
:min="0"
/>
</FormItem> </FormItem>
<FormItem label="高度" name="height"> <FormItem label="高度" name="height">
<Slider <Slider v-model:value="formData.height" :max="200" :min="20" />
v-model:value="formData.height"
:max="200"
:min="20"
/>
</FormItem> </FormItem>
</Card> </Card>
<Card title="主标题" class="property-group"> <Card title="主标题" class="property-group">
@@ -89,11 +81,7 @@ const rules = {}; // 表单校验
/> />
</FormItem> </FormItem>
<FormItem label="大小" name="titleSize"> <FormItem label="大小" name="titleSize">
<Slider <Slider v-model:value="formData.titleSize" :max="60" :min="10" />
v-model:value="formData.titleSize"
:max="60"
:min="10"
/>
</FormItem> </FormItem>
<FormItem label="粗细" name="titleWeight"> <FormItem label="粗细" name="titleWeight">
<Slider <Slider

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { UserCouponProperty } from './config'; import type { UserCouponProperty } from './config';
import { Image } from 'ant-design-vue';
/** 用户卡券 */ /** 用户卡券 */
defineOptions({ name: 'UserCoupon' }); defineOptions({ name: 'UserCoupon' });
// 定义属性 // 定义属性

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { UserOrderProperty } from './config'; import type { UserOrderProperty } from './config';
import { Image } from 'ant-design-vue';
/** 用户订单 */ /** 用户订单 */
defineOptions({ name: 'UserOrder' }); defineOptions({ name: 'UserOrder' });
// 定义属性 // 定义属性

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { UserWalletProperty } from './config'; import type { UserWalletProperty } from './config';
import { Image } from 'ant-design-vue';
/** 用户资产 */ /** 用户资产 */
defineOptions({ name: 'UserWallet' }); defineOptions({ name: 'UserWallet' });
// 定义属性 // 定义属性

6
apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
View File

@@ -80,7 +80,11 @@ const handleDelete = function (index: number) {
</div> </div>
</template> </template>
</VueDraggable> </VueDraggable>
<Tooltip :title="limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined"> <Tooltip
:title="
limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
"
>
<Button <Button
type="primary" type="primary"
ghost ghost

2
apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
View File

@@ -258,9 +258,9 @@ function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
.cube { .cube {
box-sizing: border-box; box-sizing: border-box;
line-height: 1;
color: var(--ant-color-text-secondary); color: var(--ant-color-text-secondary);
text-align: center; text-align: center;
line-height: 1;
cursor: pointer; cursor: pointer;
border: 1px solid var(--ant-color-border); border: 1px solid var(--ant-color-border);