perf: ui走查问题调整

This commit is contained in:
rd
2025-08-15 10:32:00 +08:00
parent 0b8dd4b86a
commit af174dbbed
28 changed files with 176 additions and 103 deletions

View File

@ -45,7 +45,7 @@ export default {
const textAreaRef = ref(null);
const aiReview = computed(() => props.dataSource.ai_review);
const violationItems = computed(() => props.dataSource?.ai_review?.violation_items ?? []);
const inspectionItems = computed(() => props.dataSource?.ai_review?.inspection_items ?? []);
const closeReplay = () => {
isReplay.value = false;
@ -212,7 +212,7 @@ export default {
const renderAiSuggest = () => {
if (isEmpty(aiReview.value)) return null;
const hasViolationItems = violationItems.value.length > 0
const hasInspectionItems = inspectionItems.value.length > 0
return (
<>
@ -220,7 +220,7 @@ export default {
<div class="flex items-center justify-between mb-16px">
<p class="cts bold !color-#000 !text-16px">审核结果</p>
{
hasViolationItems && (
hasInspectionItems && (
<Button
type="text"
class="!color-#6D4CFE hover:!color-#8A70FE"
@ -243,20 +243,23 @@ export default {
</div>
</div>
<div class={`collapse-box mb-16px overflow-hidden ${isCollapse.value ? 'h-0 ' : 'h-auto'}`}>
{hasViolationItems && (
<div class="result-box p-16px rounded-8px mt-16px">
<p class="cts bold !color-#000 !text-16px mb-16px">敏感词检测</p>
{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">
{violationItems.value.map((item, index) => (
{parentItem.items.map((item, index) => (
<div class="audit-item" key={index}>
<div class="flex items-center h-20px">
{_iconMap.get(item.risk_level)?.icon}
<TextOverTips context={item.word} class="cts ml-4px !color-#000" />
{_iconMap.get(item.level)?.icon}
<TextOverTips context={item.name} class="cts ml-4px !color-#000" />
</div>
</div>
))}
</div>
</div>
)))
)}
</div>
</>

View File

@ -49,7 +49,7 @@
.result-item {
.s1 {
color: var(--Brand-6, #6d4cfe);
font-family: $font-family-manrope-regular;
font-family: $font-family-manrope-medium;
font-size: 24px;
font-style: normal;
font-weight: 700;

View File

@ -217,8 +217,8 @@ export const INITIAL_QUERY = {
sort_order: undefined,
};
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon1 from '@/assets/img/platform/icon-dy.png';
import icon2 from '@/assets/img/platform/icon-xhs.png';
export const PLATFORMS = [
{

View File

@ -5,11 +5,16 @@ import TextOverTips from '@/components/text-over-tips';
import icon1 from '@/assets/img/error-img.png';
export default {
emits: ['cardClick'],
setup(props, { emit, expose }) {
const visible = ref(false);
const dataSource = ref([]);
const selectCardInfo = ref({});
const handleCardClick = (item) => {
emit('cardClick', item);
onClose();
};
const open = (data, _selectCardInfo) => {
dataSource.value = data;
selectCardInfo.value = _selectCardInfo;
@ -32,22 +37,24 @@ export default {
class="check-list-drawer-xt"
footer={false}
header={false}
onCancel={onClose}
>
<div class="flex justify-between items-center h-56px px-24px">
<div class="flex items-center">
<div class="w-3px h-16px rounded-2px bg-#6D4CFE mr-8px"></div>
<span class="mr-8px cts bold">批量审核列表</span>
<span class="mr-8px cts !lh-22px">{`${dataSource.value.length}`}</span>
<span class="mr-8px cts !lh-22px !text-14px">{`${dataSource.value.length}`}</span>
</div>
<icon-menu-unfold size={16} class="color-##55585F cursor-pointer hover:color-#6D4CFE" onClick={onClose} />
</div>
<div class="flex-1 overflow-y-auto px-24px">
{dataSource.value.map((item) => (
<div
key={item.id}
onClick={() => handleCardClick(item)}
class={`card-item flex rounded-8px bg-#F7F8FA p-8px ${
selectCardInfo.value.id === item.id ? 'active' : ''
}`}
key={item.id}
>
<Image
width={48}
@ -61,8 +68,10 @@ export default {
}}
/>
<div class="flex-1 overflow-hidden flex flex-col items-start">
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
<p class="cts">{`合规程度:${90}%`}</p>
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px !text-14px`} />
<p class="cts !text-14px">{`合规程度:${
item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'
}`}</p>
</div>
</div>
))}

View File

@ -1,30 +1,44 @@
.check-list-drawer-xt {
.arco-drawer-body {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 0 24px;
.cts {
color: var(--Text-1, #939499);
.arco-drawer-mask {
background-color: transparent;
}
.arco-drawer {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
.arco-drawer-body {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 0 24px;
.cts {
color: var(--Text-1, #939499);
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
&.bold {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
&.bold {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
}
}
}
.card-item {
border: 1px solid transparent;
&:not(:last-child) {
margin-bottom: 12px;
}
&.active {
border-color: #6d4cfe;
background-color: #f0edff;
.card-item {
cursor: pointer;
border: 1px solid transparent;
transition: all;
&:hover {
background-color: #e6e6e8;
}
&:not(:last-child) {
margin-bottom: 12px;
}
&.active {
border-color: #6d4cfe;
background-color: #f0edff;
:deep(.overflow-text) {
font-family: $font-family-medium !important;
}
}
}
}
}

View File

@ -41,7 +41,7 @@ export const RESULT_LIST = [
},
{
label: '检验项',
value: 'inspection_items',
value: 'inspection_count',
color: '#211F24',
},
{

View File

@ -193,7 +193,7 @@ export default {
再次审核
</Button>
{isTextTab.value ? (
<Button size="medium" type="outline" class="w-123px" onClick={onAiReplace} disabled={isDisabled.value}>
<Button size="medium" type="outline" class="w-123px check-btn" onClick={onAiReplace} disabled={isDisabled.value}>
{aiReplaceLoading.value ? (
<>
<IconLoading size={14} />

View File

@ -10,11 +10,16 @@
font-family: $font-family-medium;
}
}
.check-text {
background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.check-btn {
.check-text {
background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
&:hover {
opacity: 0.8;
}
}
.left-box {
:deep(.arco-tabs) {
@ -138,7 +143,7 @@
height: fit-content;
max-height: 100%;
.s1 {
font-family: $font-family-manrope-regular;
font-family: $font-family-manrope-medium;
font-size: 24px;
font-style: normal;
font-weight: 700;

View File

@ -64,7 +64,7 @@ export default {
/>
<div class="flex-1 overflow-hidden flex flex-col items-start">
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
<p class="cts">{`合规程度:${90}%`}</p>
<p class="cts">{`合规程度:${item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'}`}</p>
</div>
</SwiperSlide>
))}

View File

@ -62,7 +62,6 @@ export default {
selectCardInfo.value = cloneDeep(item);
selectedImageInfo.value = cloneDeep(files?.[0] ?? {});
console.log({ ai_review });
if (isEmpty(ai_review)) {
handleStartCheck();
}
@ -210,7 +209,7 @@ export default {
class="check-list-icon"
onClick={() => checkListDrawerRef.value.open(dataSource.value, selectCardInfo.value)}
>
<icon-menu-fold size={16} class="color-#55585F mr-4px hover:color-#6D4CFE" />
<icon-menu-fold size={16} class="color-#55585F mr-4px icon" />
<span class="cts !color-#211F24">审核列表</span>
</div>
)}
@ -244,7 +243,7 @@ export default {
<CancelCheckModal ref={cancelCheckModalRef} onSelectCard={onChangeCard} />
<CheckSuccessModal ref={checkSuccessModalRef} />
<CheckListDrawer ref={checkListDrawerRef} />
<CheckListDrawer ref={checkListDrawerRef} onCardClick={onCardClick}/>
</>
);
},

View File

@ -27,6 +27,12 @@ $footer-height: 68px;
position: absolute;
right: 0;
top: calc($navbar-height + 8px);
&:hover {
.icon,
.cts {
color: #6d4cfe !important;
}
}
}
}
.footer-row {

View File

@ -227,8 +227,8 @@ export const INITIAL_QUERY = {
sort_order: undefined,
};
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon1 from '@/assets/img/platform/icon-dy.png';
import icon2 from '@/assets/img/platform/icon-xhs.png';
export const PLATFORMS = [
{

View File

@ -5,11 +5,16 @@ import TextOverTips from '@/components/text-over-tips';
import icon1 from '@/assets/img/error-img.png';
export default {
emits: ['cardClick'],
setup(props, { emit, expose }) {
const visible = ref(false);
const dataSource = ref([]);
const selectCardInfo = ref({});
const handleCardClick = (item) => {
emit('cardClick', item);
onClose();
};
const open = (data, _selectCardInfo) => {
dataSource.value = data;
selectCardInfo.value = _selectCardInfo;
@ -32,22 +37,24 @@ export default {
class="check-list-drawer-xt"
footer={false}
header={false}
onCancel={onClose}
>
<div class="flex justify-between items-center h-56px px-24px">
<div class="flex items-center">
<div class="w-3px h-16px rounded-2px bg-#6D4CFE mr-8px"></div>
<span class="mr-8px cts bold">批量审核列表</span>
<span class="mr-8px cts !lh-22px">{`${dataSource.value.length}`}</span>
<span class="mr-8px cts !lh-22px !text-14px">{`${dataSource.value.length}`}</span>
</div>
<icon-menu-unfold size={16} class="color-##55585F cursor-pointer hover:color-#6D4CFE" onClick={onClose} />
</div>
<div class="flex-1 overflow-y-auto px-24px">
{dataSource.value.map((item) => (
<div
onClick={() => handleCardClick(item)}
key={item.id}
class={`card-item flex rounded-8px bg-#F7F8FA p-8px ${
selectCardInfo.value.id === item.id ? 'active' : ''
}`}
key={item.id}
>
<Image
width={48}
@ -61,8 +68,10 @@ export default {
}}
/>
<div class="flex-1 overflow-hidden flex flex-col items-start">
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
<p class="cts">{`合规程度:${90}%`}</p>
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px !text-14px`} />
<p class="cts !text-14px">{`合规程度:${
item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'
}`}</p>
</div>
</div>
))}

View File

@ -1,30 +1,44 @@
.check-list-drawer-xt {
.arco-drawer-body {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 0 24px;
.cts {
color: var(--Text-1, #939499);
.arco-drawer-mask {
background-color: transparent;
}
.arco-drawer {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
.arco-drawer-body {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 0 24px;
.cts {
color: var(--Text-1, #939499);
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
&.bold {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
&.bold {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
}
}
}
.card-item {
border: 1px solid transparent;
&:not(:last-child) {
margin-bottom: 12px;
}
&.active {
border-color: #6d4cfe;
background-color: #f0edff;
.card-item {
cursor: pointer;
border: 1px solid transparent;
transition: all;
&:hover {
background-color: #e6e6e8;
}
&:not(:last-child) {
margin-bottom: 12px;
}
&.active {
border-color: #6d4cfe;
background-color: #f0edff;
:deep(.overflow-text) {
font-family: $font-family-medium !important;
}
}
}
}
}

View File

@ -41,7 +41,7 @@ export const RESULT_LIST = [
},
{
label: '检验项',
value: 'inspection_items',
value: 'inspection_count',
color: '#211F24',
},
{

View File

@ -194,7 +194,7 @@ export default {
再次审核
</Button>
{isTextTab.value ? (
<Button size="medium" type="outline" class="w-123px" onClick={onAiReplace} disabled={isDisabled.value}>
<Button size="medium" type="outline" class="w-123px check-btn" onClick={onAiReplace} disabled={isDisabled.value}>
{aiReplaceLoading.value ? (
<>
<IconLoading size={14} />

View File

@ -10,12 +10,18 @@
font-family: $font-family-medium;
}
}
.check-text {
background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.check-btn {
.check-text {
background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
&:hover {
opacity: 0.8;
}
}
.left-box {
:deep(.arco-tabs) {
.arco-tabs-nav {
@ -130,15 +136,17 @@
}
}
.right-box {
border: 1px solid #E6E6E8;
border: 1px solid #e6e6e8;
flex: 1;
border-radius: 8px; padding: 16px; display: flex;
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
overflow-y: auto;
height: fit-content;
max-height: 100%;
.s1 {
font-family: $font-family-manrope-regular;
font-family: $font-family-manrope-medium;
font-size: 24px;
font-style: normal;
font-weight: 700;

View File

@ -64,7 +64,7 @@ export default {
/>
<div class="flex-1 overflow-hidden flex flex-col items-start">
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
<p class="cts">{`合规程度:${90}%`}</p>
<p class="cts">{`合规程度:${item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'}`}</p>
</div>
</SwiperSlide>
))}

View File

@ -210,7 +210,7 @@ export default {
class="check-list-icon"
onClick={() => checkListDrawerRef.value.open(dataSource.value, selectCardInfo.value)}
>
<icon-menu-fold size={16} class="color-#55585F mr-4px hover:color-#6D4CFE" />
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
<span class="cts !color-#211F24">审核列表</span>
</div>
)}
@ -244,7 +244,7 @@ export default {
<CancelCheckModal ref={cancelCheckModalRef} onSelectCard={onChangeCard} />
<CheckSuccessModal ref={checkSuccessModalRef} />
<CheckListDrawer ref={checkListDrawerRef} />
<CheckListDrawer ref={checkListDrawerRef} onCardClick={onCardClick} />
</>
);
},

View File

@ -27,6 +27,12 @@ $footer-height: 68px;
position: absolute;
right: 0;
top: calc($navbar-height + 8px);
&:hover {
.icon,
.cts {
color: #6d4cfe !important;
}
}
}
}
.footer-row {

View File

@ -143,8 +143,8 @@ import icon1 from '@/assets/img/media-account/icon5.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon-dy.png';
import icon6 from '@/assets/img/media-account/icon-xhs.png';
import icon5 from '@/assets/img/platform/icon-dy.png';
import icon6 from '@/assets/img/platform/icon-xhs.png';
const route = useRoute();
const id = route.params.id;

View File

@ -145,8 +145,8 @@ import ReauthorizeAccountModal from '../reauthorize-account-modal';
import AuthorizedAccountModal from '../authorized-account-modal';
import FooterBtn from './footer-btn';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon1 from '@/assets/img/platform/icon-dy.png';
import icon2 from '@/assets/img/platform/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-warn.png';
const props = defineProps({

View File

@ -41,8 +41,8 @@ import {
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
import icon3 from '@/assets/img/media-account/icon-dy.png';
import icon4 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/platform/icon-dy.png';
import icon4 from '@/assets/img/platform/icon-xhs.png';
// import icon5 from '@/assets/img/media-account/icon-warn-1.png';
// import icon6 from '@/assets/img/media-account/icon-success.png';