feat: hover-image-preview失效问题调整

This commit is contained in:
renxiaodong
2025-09-07 17:10:20 +08:00
parent 03478c89f5
commit 2576ba856c
29 changed files with 307 additions and 154 deletions

View File

@ -16,7 +16,7 @@
<img :src="props.src" alt="preview" class="preview-image" />
</div>
</template>
<slot />
</Popover>
</template>
@ -29,7 +29,19 @@ import { Popover } from 'ant-design-vue';
interface Props {
src: string;
position?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
position?:
| 'top'
| 'topLeft'
| 'topRight'
| 'bottom'
| 'bottomLeft'
| 'bottomRight'
| 'left'
| 'leftTop'
| 'leftBottom'
| 'right'
| 'rightTop'
| 'rightBottom';
enterDelay?: number;
leaveDelay?: number;
}
@ -38,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
position: 'right',
enterDelay: 100,
leaveDelay: 200,
src: '',
});
// const orientation = ref<ImageOrientation>('landscape');
@ -71,7 +84,7 @@ const props = withDefaults(defineProps<Props>(), {
.ant-popover-content {
padding: 0 !important;
}
.ant-popover-inner {
padding: 16px !important;
border-radius: 8px;

View File

@ -0,0 +1,90 @@
<template>
<div class="img-lazy" v-lazy:background-image="imgSrc" :key="src" :class="imgClass" :style="style" />
</template>
<script setup>
import { ref, onMounted, watch, computed } from 'vue';
const emit = defineEmits(['click']);
const props = defineProps({
width: {
type: [String, Number],
},
height: {
type: [String, Number],
},
loadingSize: {
type: [String],
default: '5',
},
errorSize: {
type: [String],
default: '5',
},
fit: {
type: [String],
default: 'cover',
},
src: {
type: String,
},
customImg: {
type: String,
},
});
const style = computed(() => {
return {
'background-size': props.fit,
width: props.width ? parseInt(props.width) + 'px' : undefined,
height: props.height ? parseInt(props.height) + 'px' : undefined,
};
});
const imgClass = computed(() => {
return {
['loading-size-' + props.loadingSize]: true,
};
});
const imgSrc = computed(() => {
return props.innerSrc || props.src;
});
const innerSrc = ref('');
watch(
() => props.customImg,
() => {
innerSrc.value = '';
if (props.customImg) {
const img = new Image();
img.src = props.src;
img.onerror = () => {
innerSrc.value = props.customImg;
};
img.onload = () => {
innerSrc.value = props.src;
};
}
},
{ immediate: true },
);
onMounted(() => {});
</script>
<style scoped lang="scss">
.img-lazy.block {
display: block;
}
.img-lazy {
display: inline-block;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
@for $i from 0 to 10 {
&.loading-size-#{$i}[lazy='loading'] {
background-size: #{$i * 10 + '%'} !important;
}
}
}
</style>

View File

@ -7,6 +7,7 @@ import router from './router';
import store from './stores';
import * as directives from '@/directives';
import VueLazyLoad from "vue-lazyload";
import NoData from '@/components/no-data/index.vue';
import SvgIcon from '@/components/svg-icon/index.vue';
@ -18,6 +19,9 @@ import 'normalize.css';
import 'uno.css';
import 'virtual:svg-icons-register';
import errorImage from '@/assets/img/error-img.png';
import loadingImage from '@/assets/img/error-img.png';
// import '@/styles/vars.css'; // 优先加载
const app = createApp(App);
@ -27,6 +31,10 @@ app.component('SvgIcon', SvgIcon);
app.use(store);
app.use(router);
app.use(VueLazyLoad, {
error: errorImage,
loading: loadingImage,
});
Object.values(directives).forEach((directive) => {
app.use(directive);

View File

@ -0,0 +1,6 @@
.ant-spin-nested-loading {
height: 100%;
.ant-spin-container {
height: 100%;
}
}

View File

@ -0,0 +1,56 @@
.ant-steps {
.ant-steps-item {
padding: 0;
padding-inline-start: 0 !important;
.ant-steps-item-container {
.ant-steps-item-icon {
width: 28px;
height: 28px;
line-height: 28px;
margin-right: 12px;
border-radius: 50%;
background: var(--BG-200, #f2f3f5);
.ant-steps-icon {
color: #55585f;
font-size: 16px;
font-style: normal;
font-weight: 500;
// line-height: 24px;
font-family: $font-family-manrope-medium;
}
}
.ant-steps-item-content {
.ant-steps-item-title {
padding-right: 12px;
color: #55585f;
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
&::after {
background-color: #e6e6e8 !important;
}
}
}
}
&:not(:last-child) {
margin-left: 12px;
}
&.ant-steps-item-active,
&.ant-steps-item-finish {
.ant-steps-item-icon {
background-color: #6d4cfe !important;
.ant-steps-icon {
color: #fff !important;
}
}
.ant-steps-item-content {
.ant-steps-item-title {
color: #211f24;
font-family: $font-family-medium;
font-weight: 500;
}
}
}
}
}

View File

@ -24,4 +24,6 @@
@import './ant-tabs.scss';
@import "./ant-notification.scss";
@import "./ant-tag.scss";
@import "./ant-switch.scss";
@import "./ant-switch.scss";
@import "./ant-step.scss";
@import "./ant-spin.scss";

View File

@ -5,7 +5,7 @@
width: 28px;
height: 28px;
border-radius: 32px;
color: #3c4043;
color: #55585F;
font-size: 16px;
font-style: normal;
font-weight: 500;
@ -16,7 +16,7 @@
}
.arco-steps-item-content {
.arco-steps-item-title {
color: #3c4043;
color: #55585F;
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;

View File

@ -95,7 +95,7 @@
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
</div>
<div class="res h-full">
<Spin v-if="loading" class="spin-center" tip="生成中。。。" />
<Spin v-if="loading" wrapperClassName="spin-center" tip="生成中。。。" />
<div
class="markdown-container"
v-if="workFlowRes.output != '' && loading === false"

View File

@ -221,7 +221,7 @@ export default {
</div>
</header>
{loading.value ? (
<Spin spinning={loading.value} class="flex-1 w-full flex justify-center items-center" size={60} />
<Spin spinning={loading.value} wrapperClassName="flex-1 w-full flex justify-center items-center" size="large" />
) : (
<section class={`page-wrap relative ${isExpand.value ? 'expand' : ''}`}>
<div class="fold-box cursor-pointer" onClick={() => (isExpand.value = true)}>

View File

@ -52,7 +52,7 @@ export default {
</header>
<section class="page-wrapper flex justify-center">
{loading.value ? (
<Spin spinning={loading.value} class="w-full flex justify-center items-center" size={60} />
<Spin spinning={loading.value} wrapperClassName="w-full flex justify-center items-center" size="large" />
) : (
<div class="explore-container">
<div class="explore-list-wrap pt-24px pb-28px">

View File

@ -43,7 +43,7 @@
<div class="filter-row-item" v-if="query.audit_status === AuditStatus.Pending">
<span class="label">上传时间</span>
<DatePicker.RangePicker
v-model="created_at"
v-model:value="created_at"
size="medium"
allow-clear
format="YYYY-MM-DD"
@ -70,7 +70,7 @@
<div class="filter-row-item">
<span class="label">审核时间</span>
<DatePicker.RangePicker
v-model="audit_started_at"
v-model:value="audit_started_at"
size="medium"
allowClear
format="YYYY-MM-DD"
@ -141,6 +141,7 @@ const onDateChange = (value, type) => {
const handleReset = () => {
created_at.value = [];
audit_started_at.value = [];
emits('reset');
};
</script>

View File

@ -79,11 +79,7 @@
</template>
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
<HoverImagePreview :src="record.cover">
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
<template #error>
<img :src="icon4" class="w-full h-full" />
</template>
</Image>
<ImgLazyLoad :width="64" :height="64" :src="record.cover" class="!rounded-6px" />
</HoverImagePreview>
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
@ -127,14 +123,15 @@ import { AuditStatus } from '@/views/material-center/components/finished-product
import { slsWithCatch } from '@/utils/stroage.ts';
import TextOverTips from '@/components/text-over-tips';
import TextOverTips from '@/components/text-over-tips'
import ImgLazyLoad from "@/components/img-lazy-load";
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
import HoverImagePreview from '@/components/hover-image-preview';
import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
import icon4 from '@/assets/img/error-img.png';
// import icon4 from '@/assets/img/error-img.png';
const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
const router = useRouter();

View File

@ -386,10 +386,10 @@ export default {
<div class="right-box">
<p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
<Spin
loading={true}
spinning={true}
tip={`${isTextTab.value ? '文本' : '图片'}检测中`}
size={72}
class="h-298px !flex flex-col justify-center items-center"
size="large"
wrapperClassName="h-298px !flex flex-col justify-center items-center"
/>
</div>
);
@ -398,7 +398,7 @@ export default {
<div class="right-box">
<p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
{props.getDataLoading ? (
<Spin loading={true} size={72} class="h-298px !flex justify-center items-center" />
<Spin spinning={true} size="large" wrapperClassName="h-298px !flex justify-center items-center" />
) : (
renderCheckSuccessBox()
)}

View File

@ -33,7 +33,7 @@ const INITIAL_FORM = {
export default {
setup(props, { emit, expose }) {
const update = inject('update');
// const update = inject('update');
const router = useRouter();
// 响应式状态

View File

@ -1,6 +1,5 @@
<script lang="jsx">
import { Spin } from 'ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { Button, Spin, message } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
@ -158,7 +157,7 @@ export default {
});
return () => (
<Spin loading={loading.value} class="manuscript-detail-wrap" size={50}>
<Spin spinning={loading.value} wrapperClassName="manuscript-detail-wrap" size="large">
<div class="h-full w-full flex flex-col">
<div class="flex items-center mb-8px">
<span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>

View File

@ -53,7 +53,7 @@
<div class="filter-row-item">
<span class="label">上传时间</span>
<DatePicker.RangePicker
v-model="created_at"
v-model:value="created_at"
size="medium"
allow-clear
format="YYYY-MM-DD"

View File

@ -73,11 +73,7 @@
</template>
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
<HoverImagePreview :src="record.cover">
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
<template #error>
<img :src="icon4" class="w-full h-full" />
</template>
</Image>
<ImgLazyLoad :width="64" :height="64" :src="record.cover" class="!rounded-6px" />
</HoverImagePreview>
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
@ -108,11 +104,11 @@ import { CUSTOMER_OPINION } from '@/views/material-center/components/finished-pr
import TextOverTips from '@/components/text-over-tips';
import HoverImagePreview from '@/components/hover-image-preview';
import ImgLazyLoad from "@/components/img-lazy-load";
import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
import icon4 from '@/assets/img/error-img.png';
const emits = defineEmits(['edit', 'sorterChange', 'delete']);
const router = useRouter();

View File

@ -34,11 +34,7 @@
<template v-if="column.dataIndex === 'name'" #customRender="{ record }">
<div class="flex items-center">
<HoverImagePreview :src="record.cover">
<Image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" :preview="false">
<template #error>
<img :src="icon4" class="w-full h-full" />
</template>
</Image>
<ImgLazyLoad :width="64" :height="64" :src="record.cover" class="!rounded-6px mr-16px" />
</HoverImagePreview>
<div class="flex-1 flex flex-col overflow-hidden">
<TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
@ -83,13 +79,14 @@ import { slsWithCatch } from '@/utils/stroage.ts';
import { TABS_LIST, ORIGIN_LIST } from '../../constants';
import TextOverTips from '@/components/text-over-tips';
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
// import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
import HoverImagePreview from '@/components/hover-image-preview';
import ImgLazyLoad from '@/components/img-lazy-load';
import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
import icon4 from '@/assets/img/error-img.png';
// import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
// import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
// import icon4 from '@/assets/img/error-img.png';
const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
const router = useRouter();

View File

@ -9,7 +9,7 @@
@cancel="onClose"
>
<div class="content">
<Steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px w-full">
<Steps changeable :current="currentStep" @change="setCurrent" class="mb-24px px-79px w-full">
<Steps.Step v-for="(step, index) in STEPS" :key="index" :title="step.label" />
</Steps>
@ -41,22 +41,22 @@ import StepFour from './stepFour.vue';
const STEPS = [
{
label: '项目信息',
index: 1,
index: 0,
comp: StepOne,
},
{
label: '关联平台账号',
index: 2,
index: 1,
comp: StepTwo,
},
{
label: '关联渠道账户',
index: 3,
index: 2,
comp: StepThree,
},
{
label: '关联内容稿件',
index: 4,
index: 3,
comp: StepFour,
},
];
@ -73,14 +73,14 @@ const INITIAL_QUERY = {
const update = inject('update');
const visible = ref(false);
const currentStep = ref(1);
const currentStep = ref(0);
const formQuery = ref(cloneDeep(INITIAL_QUERY));
const compRef = ref(null);
const projectId = ref(null);
const isFirstStep = computed(() => currentStep.value === 1);
const isFirstStep = computed(() => currentStep.value === 0);
const isEdit = computed(() => projectId.value);
const isLastStep = computed(() => currentStep.value === STEPS.length);
const isLastStep = computed(() => currentStep.value === STEPS.length - 1);
const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
const open = (id = null) => {
@ -100,7 +100,7 @@ const getDetail = (id) => {
});
};
const onClose = () => {
currentStep.value = 1;
currentStep.value = 0;
formQuery.value = cloneDeep(INITIAL_QUERY);
projectId.value = '';
compRef.value?.reset?.();
@ -143,14 +143,13 @@ const handleEdit = () => {
};
const setCurrent = (current) => {
if (isFirstStep.value) {
compRef.value.validate().then(() => {
if (isFirstStep.value) {
compRef.value?.validate().then(() => {
currentStep.value = current;
});
return;
}
currentStep.value = current;
};
const onPrev = () => {
currentStep.value--;

View File

@ -53,7 +53,7 @@
<div class="filter-row-item">
<span class="label">时间筛选</span>
<DatePicker.RangePicker
v-model="data_time"
v-model:value="data_time"
:allowClear="false"
format="YYYY-MM-DD"
class="w-240px"
@ -145,8 +145,12 @@ const onDateChange = (date) => {
handleSearch();
};
const init = () => {
data_time.value = [dayjs().subtract(1, 'day'), dayjs().subtract(1, 'day')];
};
const handleReset = () => {
data_time.value = [];
init();
emits('onReset');
};
@ -163,13 +167,6 @@ const getOperators = async () => {
}
};
const getYesterdayDays = () => {
const today = new Date();
const last7Days = new Date(today);
last7Days.setDate(today.getDate() - 1);
return [last7Days.toISOString().split('T')[0], today.toISOString().split('T')[0]];
};
const getAccounts = async () => {
const { code, data } = await getPlacementAccountsList();
if (code === 200) {
@ -178,8 +175,7 @@ const getAccounts = async () => {
};
onMounted(() => {
const defaultTime = getYesterdayDays();
data_time.value = defaultTime;
init();
getGroups();
getOperators();

View File

@ -25,7 +25,7 @@
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<DatePicker.RangePicker v-model="data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" @change="onDateChange" />
<DatePicker.RangePicker v-model:value="data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" @change="onDateChange" />
</div>
<div class="filter-row-item flex items-center">

View File

@ -43,7 +43,7 @@
<div class="filter-row-item" v-if="query.audit_status === AuditStatus.Pending">
<span class="label">上传时间</span>
<DatePicker.RangePicker
v-model="created_at"
v-model:value="created_at"
size="medium"
allow-clear
format="YYYY-MM-DD"
@ -70,7 +70,7 @@
<div class="filter-row-item">
<span class="label">审核时间</span>
<DatePicker.RangePicker
v-model="audit_started_at"
v-model:value="audit_started_at"
size="medium"
allow-clear
format="YYYY-MM-DD"
@ -139,6 +139,7 @@ const onDateChange = (value, type) => {
const handleReset = () => {
created_at.value = [];
audit_started_at.value = [];
emits('reset');
};
</script>

View File

@ -64,12 +64,7 @@
</template>
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
<div class="flex items-center">
<img
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
width="16"
height="16"
class="mr-4px"
/>
<img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
record.type === EnumManuscriptType.Image ? '图文' : '视频'
}}</span>
@ -77,30 +72,19 @@
</template>
<template
#customRender="{ record }"
v-else-if="
['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
"
v-else-if="['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)"
>
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
</template>
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
<HoverImagePreview :src="record.cover">
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
<template #error>
<img :src="icon4" class="w-full h-full" />
</template>
</Image>
<ImgLazyLoad :width="64" :height="64" :src="record.cover" class="!rounded-6px" />
</HoverImagePreview>
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<Button
type="primary"
ghost
size="small"
@click="onCheck(record)"
v-if="audit_status === AuditStatus.Pending"
<Button type="primary" ghost size="small" @click="onCheck(record)" v-if="audit_status === AuditStatus.Pending"
>审核</Button
>
<Button
@ -138,11 +122,12 @@ import { slsWithCatch } from '@/utils/stroage.ts';
import TextOverTips from '@/components/text-over-tips';
import HoverImagePreview from '@/components/hover-image-preview';
import ImgLazyLoad from "@/components/img-lazy-load";
import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
import icon4 from '@/assets/img/error-img.png';
// import icon4 from '@/assets/img/error-img.png';
const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
const router = useRouter();

View File

@ -387,10 +387,10 @@ export default {
<div class="right-box h-210px">
<p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
<Spin
loading={true}
spinning={true}
tip={`${isTextTab.value ? '文本' : '图片'}检测中`}
size={72}
class="h-298px !flex flex-col justify-center items-center color-#6d4cfe"
size="large"
wrapperClassName="h-298px !flex flex-col justify-center items-center color-#6d4cfe"
/>
</div>
);
@ -399,7 +399,7 @@ export default {
<div class="right-box">
<p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
{props.getDataLoading ? (
<Spin loading={true} size={72} class="h-298px !flex justify-center items-center" />
<Spin spinning={true} size="large" wrapperClassName="h-298px !flex justify-center items-center" />
) : (
renderCheckSuccessBox()
)}

View File

@ -35,7 +35,7 @@ const INITIAL_FORM = {
export default {
setup(props, { emit, expose }) {
const update = inject('update');
// const update = inject('update');
const router = useRouter();
const route = useRoute();

View File

@ -169,7 +169,7 @@ export default {
});
return () => (
<Spin loading={loading.value} class="manuscript-detail-wrap" size={50}>
<Spin spinning={loading.value} wrapperClassName="manuscript-detail-wrap" size="large">
<div class="h-full w-full flex flex-col">
<div class="flex items-center mb-8px">
<span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>

View File

@ -51,12 +51,7 @@
</template>
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
<div class="flex items-center">
<img
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
width="16"
height="16"
class="mr-4px"
/>
<img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
record.type === EnumManuscriptType.Image ? '图文' : '视频'
}}</span>
@ -70,11 +65,7 @@
</template>
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
<HoverImagePreview :src="record.cover">
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
<template #error>
<img :src="icon4" class="w-full h-full" />
</template>
</Image>
<ImgLazyLoad :width="64" :height="64" :src="record.cover" class="!rounded-6px" />
</HoverImagePreview>
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
@ -104,11 +95,12 @@ import {
import TextOverTips from '@/components/text-over-tips';
import HoverImagePreview from '@/components/hover-image-preview';
import ImgLazyLoad from "@/components/img-lazy-load";
import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
import icon4 from '@/assets/img/error-img.png';
// import icon4 from '@/assets/img/error-img.png';
const emits = defineEmits(['edit', 'sorterChange', 'delete']);
const router = useRouter();