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

@ -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();