perf: ui走查问题修改

This commit is contained in:
rd
2025-08-15 15:36:03 +08:00
parent d4617f6db1
commit 997c765eaa
23 changed files with 142 additions and 96 deletions

View File

@ -13,6 +13,7 @@ import { useUserStore } from '@/stores';
import icon1 from '@/assets/img/creative-generation-workshop/icon-line.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-avatar-default.png';
import icon3 from '@/assets/img/error-img.png';
import icon4 from '@/assets/img/creative-generation-workshop/icon-avatar-default-v2.png';
const _iconMap = new Map([
// [3, { icon: <icon-check-circle-fill size={16} class="color-#25C883 flex-shrink-0" /> }],
@ -29,7 +30,7 @@ export default {
},
dataSource: {
type: Object,
default: () => { },
default: () => {},
},
},
emits: ['toggle', 'updateComment', 'deleteComment'],
@ -55,17 +56,17 @@ export default {
const onReplay = (item) => {
isReplay.value = true;
replayTarget.value = item;
textAreaRef.value.focus();
};
const onComment = async () => {
console.log(textAreaRef.value.focus());
const { code, data } = await postShareWorksComments(props.dataSource.id, route.params.shareCode, {
content: comment.value,
comment_id: replayTarget.value.id,
});
if (code === 200) {
emit('updateComment');
comment.value = '';
onClearComment();
textAreaRef.value.focus();
}
};
@ -110,7 +111,7 @@ export default {
<div class="sticky bottom-0 left-0 w-full z-22 px-24px">
<div class="relative">
{isReplay.value && (
<div class="px-12px pt-8px absolute top-0 left-0 z-2 mb-8px w-full">
<div class="px-8px pt-8px absolute top-0 left-0 z-2 mb-8px w-full">
<div class="rounded-4px bg-#F2F3F5 h-30px px-8px flex justify-between items-center ">
<div class="flex items-center mr-12px flex-1 overflow-hidden">
<span class="mr-4px cts !color-#737478 flex-shrink-0">回复</span>
@ -163,7 +164,7 @@ export default {
{props.dataSource.comments?.map((item) => (
<div class="comment-item flex px-12px py-8px group" key={item.id}>
<Image
src={item.commenter_id === 0 ? icon2 : item.commenter?.head_image}
src={item.commenter_id === 0 ? icon2 : item.commenter?.head_image || icon4}
width={40}
height={40}
preview={false}
@ -212,55 +213,51 @@ export default {
const renderAiSuggest = () => {
if (isEmpty(aiReview.value)) return null;
const hasInspectionItems = inspectionItems.value.length > 0
const hasInspectionItems = inspectionItems.value.length > 0;
return (
<>
<div class="result-box p-16px rounded-8px">
<div class="flex items-center justify-between mb-16px">
<p class="cts bold !color-#000 !text-16px">审核结果</p>
{
hasInspectionItems && (
<Button
type="text"
class="!color-#6D4CFE hover:!color-#8A70FE"
onClick={() => (isCollapse.value = !isCollapse.value)}
>
{isCollapse.value ? '展开详情' : '收起详情'}
</Button>
)
}
{hasInspectionItems && (
<Button
type="text"
class="!color-#6D4CFE hover:!color-#8A70FE"
onClick={() => (isCollapse.value = !isCollapse.value)}
>
{isCollapse.value ? '展开详情' : '收起详情'}
</Button>
)}
</div>
<div class="flex items-center">
{RESULT_LIST.map((item, index) => (
<div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
<span class="s1" style={{ color: item.color }}>{`${aiReview.value?.[item.value]}${item.suffix || ''
}`}</span>{' '}
<span class="s1" style={{ color: item.color }}>{`${aiReview.value?.[item.value]}${
item.suffix || ''
}`}</span>{' '}
<span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
</div>
))}
</div>
</div>
<div class={`collapse-box mb-16px overflow-hidden ${isCollapse.value ? 'h-0 ' : 'h-auto'}`}>
{hasInspectionItems && (
inspectionItems.value.map(( (parentItem, parentIndex) => (
{hasInspectionItems &&
inspectionItems.value.map((parentItem, parentIndex) => (
<div class="result-box p-16px rounded-8px mt-16px" key={parentIndex}>
<p class="cts bold !color-#000 !text-16px mb-16px">{parentItem.name}</p>
<div class="grid grid-cols-3 gap-x-24px gap-y-8px">
{parentItem.items.map((item, index) => (
<div class="audit-item" key={index}>
<div class="flex items-center h-20px">
{_iconMap.get(item.level)?.icon}
<TextOverTips context={item.name} class="cts ml-4px !color-#000" />
<p class="cts bold !color-#000 !text-16px mb-16px">{parentItem.name}</p>
<div class="grid grid-cols-3 gap-x-24px gap-y-8px">
{parentItem.items.map((item, index) => (
<div class="audit-item" key={index}>
<div class="flex items-center h-20px">
{_iconMap.get(item.level)?.icon}
<TextOverTips context={item.name} class="cts ml-4px !color-#000" />
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
)))
)}
))}
</div>
</>
);
@ -300,7 +297,7 @@ export default {
/>
{/**主体 */}
<div class="flex-1 overflow-y-auto px-24px">
<div class="flex-1 overflow-y-auto px-24px main-box">
{/* AI审核结果 */}
{renderAiSuggest()}
{/* 评论与回复 */}

View File

@ -36,6 +36,10 @@
background-color: #fff;
color: #211f24 !important;
transition: all 0.3s;
.arco-textarea-mirror,
.arco-textarea {
padding: 8px 16px !important;
}
&:hover {
border-color: #6d4cfe !important;
}
@ -87,7 +91,27 @@
&:not(:last-child) {
margin-bottom: 8px;
}
&:hover {
border-radius: 8px;
background: rgba(255, 255, 255, 0.8);
}
}
}
}
.main-box {
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border: none;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
}

View File

@ -213,7 +213,7 @@ export default {
<div class="explore-page">
<header class="page-header">
<div class="content w-full px-24px flex items-center bg-#fff justify-between">
<div class="h-full flex items-center cursor-pointer" onClick={handleUserHome}>
<div class="h-full flex items-center">
<img src={icon1} alt="" width={130} />
</div>
<div class="flex items-center">{renderActionRow()}</div>

View File

@ -45,7 +45,7 @@ export default {
<div class="explore-page">
<header class="page-header">
<div class="content w-full px-24px flex items-center bg-#fff">
<div class="h-full flex items-center cursor-pointer" onClick={handleUserHome}>
<div class="h-full flex items-center">
<img src={icon2} alt="" />
</div>
</div>
@ -56,7 +56,11 @@ export default {
) : (
<div class="explore-container">
<div class="explore-list-wrap pt-24px pb-28px">
<TextOverTips context={`${works.value[0]?.title}${works.value.length}个文件`} class="mb-8px" />
<div class="mb-8px flex items-center w-fit">
<TextOverTips context={`${works.value[0]?.title?.slice(0,10)}...`} class="!w-fit mr-4px" />
<span class="cts color-#211F24">{`${works.value.length}个文件`}</span>
</div>
{/* <TextOverTips context={`${works.value[0]?.title}等${works.value.length}个文件`} /> */}
<p class="cts !color-#939499 mb-24px">
{`分享时间:${exactFormatTime(dataSource.value.created_at, 'YYYY-MM-DD HH:mm:ss')} 有效期${
dataSource.value.days

View File

@ -100,7 +100,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { PLATFORMS, AuditStatus } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
import { PLATFORMS, AuditStatus } from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
const props = defineProps({
query: {

View File

@ -118,13 +118,13 @@
<script setup>
import { ref } from 'vue';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts';
import {
AuditStatus,
CUSTOMER_OPINION,
PLATFORMS,
} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
} from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
import { slsWithCatch } from '@/utils/stroage.ts';
import TextOverTips from '@/components/text-over-tips';

View File

@ -18,11 +18,11 @@ export const TABLE_COLUMNS1 = [
dataIndex: 'title',
width: 300,
},
{
title: '客户意见',
dataIndex: 'customer_opinion',
width: 120,
},
// {
// title: '客户意见',
// dataIndex: 'customer_opinion',
// width: 120,
// },
{
title: '稿件类型',
dataIndex: 'type',
@ -71,11 +71,11 @@ export const TABLE_COLUMNS2 = [
dataIndex: 'title',
width: 300,
},
{
title: '客户意见',
dataIndex: 'customer_opinion',
width: 120,
},
// {
// title: '客户意见',
// dataIndex: 'customer_opinion',
// width: 120,
// },
{
title: '审核平台',
dataIndex: 'platform',
@ -140,11 +140,11 @@ export const TABLE_COLUMNS3 = [
dataIndex: 'title',
width: 300,
},
{
title: '客户意见',
dataIndex: 'customer_opinion',
width: 120,
},
// {
// title: '客户意见',
// dataIndex: 'customer_opinion',
// width: 120,
// },
{
title: '审核平台',
dataIndex: 'platform',

View File

@ -49,7 +49,7 @@ import {
INITIAL_QUERY,
AUDIT_STATUS_LIST,
TABLE_COLUMNS1,
} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
} from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
const {
dataSource,

View File

@ -10,8 +10,8 @@
<div class="flex items-center flex-col justify-center">
<img :src="icon1" width="80" height="80" class="mb-16px" />
<span class="text-18px lh-26px font-400 color-#211F24 md mb-8px">内容稿件已通过审核</span>
<p class="text-14px lh-22px font-400 color-#737478 ld">想让内容更抓眼球更吸流量吗</p>
<p class="text-14px lh-22px font-400 color-#737478 ld">试试内容稿件分析功能吧</p>
<!-- <p class="text-14px lh-22px font-400 color-#737478 ld">想让内容更抓眼球更吸流量吗</p>
<p class="text-14px lh-22px font-400 color-#737478 ld">试试内容稿件分析功能吧</p> -->
</div>
<!-- <template #footer>
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">内容稿件分析</a-button>
@ -20,15 +20,20 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, onUnmounted } from 'vue';
import icon1 from '@/assets/img/media-account/icon-feedback-success.png';
const router = useRouter();
const route = useRoute();
const visible = ref(false);
const workIds = ref([]);
let autoCloseTimer = null;
const onClose = () => {
if (autoCloseTimer) {
clearTimeout(autoCloseTimer);
autoCloseTimer = null;
}
if (workIds.value.length === 1) {
router.push({ path: `/writer/manuscript/check-list/${route.params.writerCode}` });
}
@ -39,8 +44,22 @@ const onClose = () => {
const open = (ids) => {
workIds.value = cloneDeep(ids);
visible.value = true;
if (autoCloseTimer) {
clearTimeout(autoCloseTimer);
autoCloseTimer = null;
}
autoCloseTimer = setTimeout(() => {
onClose();
}, 3000);
};
onUnmounted(() => {
if (autoCloseTimer) {
clearTimeout(autoCloseTimer);
autoCloseTimer = null;
}
});
defineExpose({ open });
</script>
<style lang="scss">

View File

@ -22,7 +22,7 @@ import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
import { FORM_RULES, enumTab, TAB_LIST, RESULT_LIST, LEVEL_MAP, escapeRegExp } from './constants';
import { getImagePreSignedUrl } from '@/api/all/common';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
import icon1 from '@/assets/img/creative-generation-workshop/icon-magic.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-line.png';

View File

@ -6,7 +6,7 @@ import TextOverTips from '@/components/text-over-tips';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
import { PLATFORMS } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
import { PLATFORMS } from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
import icon1 from '@/assets/img/error-img.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-lf.png';

View File

@ -7,7 +7,7 @@ import TextOverTips from '@/components/text-over-tips';
import ImgBox from './img-box';
import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from '@/utils/tools';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
import { getVideoPreSignedUrlWriter, getImagePreSignedUrlWriter } from '@/api/all/generationWorkshop-writer';
// import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png';

View File

@ -2,9 +2,9 @@
import { Button, Message as AMessage, Spin } from '@arco-design/web-vue';
import { useRouter, useRoute } from 'vue-router';
import { AuditStatus } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
import { AuditStatus } from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
import { getWorksDetailWriter } from '@/api/all/generationWorkshop-writer.ts';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
import { convertVideoUrlToCoverUrl, exactFormatTime } from '@/utils/tools.ts';
import { slsWithCatch } from '@/utils/stroage.ts';

View File

@ -4,7 +4,7 @@ import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/
import CancelEditModal from './cancel-edit-modal.vue';
import { getWorksDetailWriter, putWorksUpdateWriter } from '@/api/all/generationWorkshop-writer.ts';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
import { formatDuration, formatFileSize, convertVideoUrlToCoverUrl } from '@/utils/tools';
import { slsWithCatch } from '@/utils/stroage.ts';

View File

@ -98,7 +98,7 @@
import { ref } from 'vue';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
import TextOverTips from '@/components/text-over-tips';
import HoverImagePreview from '@/components/hover-image-preview';

View File

@ -51,7 +51,7 @@ export default {
// 响应式状态
const visible = ref(false);
const formRef = ref(null);
const uploadType = ref(UPLOAD_TYPE.LINK);
const uploadType = ref(UPLOAD_TYPE.LOCAL);
const taskStatus = ref(TASK_STATUS.DEFAULT);
const form = ref(cloneDeep(INITIAL_FORM));
const works = ref([]);
@ -343,21 +343,18 @@ export default {
>
<Form
ref={formRef}
rules={{
link: [{ required: true, message: '请输入飞书链接地址' }],
}}
model={form.value}
layout="horizontal"
auto-label-width
>
{isDefault.value && (
{/* {isDefault.value && (
<FormItem label="上传方式">
<RadioGroup v-model={uploadType.value} onChange={onUploadTypeChange}>
<Radio value={UPLOAD_TYPE.LINK}>外部链接上传</Radio>
<Radio value={UPLOAD_TYPE.LOCAL}>本地上传</Radio>
</RadioGroup>
</FormItem>
)}
)} */}
{renderFormContent()}
</Form>

View File

@ -47,7 +47,7 @@ import UploadManuscriptModal from './components/upload-manuscript-modal';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { getWorksPageWriter } from '@/api/all/generationWorkshop-writer.ts';
import { INITIAL_QUERY, EnumCheckStatus } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
import { INITIAL_QUERY, EnumCheckStatus } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
onPageChange: () => {

View File

@ -5,7 +5,7 @@ import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/
import CancelUploadModal from './cancel-upload-modal.vue';
import UploadSuccessModal from './upload-success-modal.vue';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
import { postWorksBatchWriter } from '@/api/all/generationWorkshop-writer.ts';
import { glsWithCatch, rlsWithCatch, slsWithCatch } from '@/utils/stroage.ts';
import { formatDuration, formatFileSize, convertVideoUrlToCoverUrl } from '@/utils/tools';
@ -199,10 +199,9 @@ export default {
_data.videoInfo.poster = convertVideoUrlToCoverUrl(url);
}
return _data
return _data;
});
works.value = _works;
selectCardInfo.value = cloneDeep(_works[0] ?? {});
};
@ -266,7 +265,7 @@ export default {
<div
key={item.id}
id={`card-${item.id}`}
class={`group relative mb-12px px-8px py-12px flex flex-col rounded-8px bg-#F7F8FA border-1px border-solid border-transparent transition-all duration-300 cursor-pointer hover:bg-#E6E6E8 ${getCardClass(
class={`group h-66px relative mb-12px px-12px py-8px flex flex-col rounded-8px bg-#F7F8FA border-1px border-solid border-transparent transition-all duration-300 cursor-pointer hover:bg-#E6E6E8 ${getCardClass(
item,
)}`}
onClick={() => onSelect(item)}
@ -277,7 +276,7 @@ export default {
onClick={(e) => onDelete(e, item, index)}
/>
<TextOverTips
context={item.title}
context={item.title || '-'}
line={1}
class={`cts !color-#211F24 mb-8px ${selectCardInfo.value.id === item.id ? 'bold' : ''}`}
/>
@ -285,18 +284,20 @@ export default {
<div class="flex items-center ">
<img
src={item.type === EnumManuscriptType.Image ? icon1 : icon2}
width="16"
height="16"
width="14"
height="14"
class="mr-4px"
/>
<span
class={`cts ${item.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'}`}
class={`cts !text-12px ${
item.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
}`}
>
{item.type === EnumManuscriptType.Image ? '图文' : '视频'}
</span>
</div>
{errorDataCards.value.find((v) => v.id === item.id) && (
<p class="cts !color-#F64B31">必填项未填</p>
<p class="cts !text-12px !color-#F64B31">必填项未填</p>
)}
</div>
</div>

View File

@ -1,7 +1,8 @@
$footer-height: 68px;
.manuscript-upload-wrap {
height: calc(100% - 72px);
.cts {
.cts,
:deep(.overflow-text) {
color: #939499;
font-family: $font-family-regular;
font-size: 14px;

View File

@ -116,7 +116,7 @@ export default {
}}
>
<Form ref={formRef} rules={rules} model={formData.value} auto-label-width>
<FormItem label="有效期" prop="days">
<FormItem label="有效期" prop="days" row-class="items-center">
<CommonSelect
v-model={formData.value.days}
options={OPTIONS}
@ -130,6 +130,7 @@ export default {
<FormItem
label="分享对象"
prop="receiver"
row-class="items-center"
v-slots={{
label: () => (
<div class="flex items-center">

View File

@ -199,8 +199,7 @@ export default {
_data.videoInfo.poster = convertVideoUrlToCoverUrl(url);
}
return _data
return _data;
});
works.value = _works;
@ -267,7 +266,7 @@ export default {
<div
key={item.id}
id={`card-${item.id}`}
class={`group relative mb-12px px-8px py-12px flex flex-col rounded-8px bg-#F7F8FA border-1px border-solid border-transparent transition-all duration-300 cursor-pointer hover:bg-#E6E6E8 ${getCardClass(
class={`group h-66px relative mb-12px px-12px py-8px flex flex-col rounded-8px bg-#F7F8FA border-1px border-solid border-transparent transition-all duration-300 cursor-pointer hover:bg-#E6E6E8 ${getCardClass(
item,
)}`}
onClick={() => onSelect(item)}
@ -278,7 +277,7 @@ export default {
onClick={(e) => onDelete(e, item, index)}
/>
<TextOverTips
context={item.title}
context={item.title || '-'}
line={1}
class={`cts !color-#211F24 mb-8px ${selectCardInfo.value.id === item.id ? 'bold' : ''}`}
/>
@ -286,18 +285,20 @@ export default {
<div class="flex items-center ">
<img
src={item.type === EnumManuscriptType.Image ? icon1 : icon2}
width="16"
height="16"
width="14"
height="14"
class="mr-4px"
/>
<span
class={`cts ${item.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'}`}
class={`cts !text-12px ${
item.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
}`}
>
{item.type === EnumManuscriptType.Image ? '图文' : '视频'}
</span>
</div>
{errorDataCards.value.find((v) => v.id === item.id) && (
<p class="cts !color-#F64B31">必填项未填</p>
<p class="cts !text-12px !color-#F64B31">必填项未填</p>
)}
</div>
</div>

View File

@ -1,7 +1,8 @@
$footer-height: 68px;
.manuscript-upload-wrap {
height: calc(100% - 72px);
.cts {
.cts,
:deep(.overflow-text) {
color: #939499;
font-family: $font-family-regular;
font-size: 14px;