fix: lint

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -11,7 +11,7 @@ import { IconifyIcon } from '@vben/icons';
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 {
CONTROL_DOT_LIST,
@@ -201,7 +201,8 @@ const handleAppLinkChange = (appLink: AppLink) => {
top: `${item.top}px`,
left: `${item.left}px`,
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)',
}"
@mousedown="handleMove(item, $event)"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -6,7 +6,14 @@ import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/u
import { computed, ref } from 'vue';
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 UploadImg from '#/components/upload/image-upload.vue';
@@ -71,7 +78,7 @@ const handleHotAreaSelected = (
class="m-b-16px"
@hot-area-selected="handleHotAreaSelected"
/>
<img
<Image
v-if="isMp"
alt=""
style="width: 76px; height: 30px"

View File

@@ -32,7 +32,7 @@ watch(
* 计算商品的间距
* @param index 商品索引
*/
const calculateSpace = (index: number) => {
function calculateSpace(index: number) {
// 商品的列数
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`;
return { marginLeft, marginTop };
};
}
// 容器
const containerRef = ref();
// 计算商品的宽度
const calculateWidth = () => {
function calculateWidth() {
let width = '100%';
// 双列时每列的宽度为:(总宽度 - 间距)/ 2
if (props.property.layoutType === 'twoCol') {
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
}
return { width };
};
}
</script>
<template>
<div

View File

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

View File

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

View File

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

View File

@@ -19,7 +19,8 @@ import {
import UploadImg from '#/components/upload/image-upload.vue';
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';
@@ -158,11 +159,7 @@ const formData = useVModel(props, 'modelValue', emit);
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
/>
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>
</Form>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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