perf: ui走查问题调整

This commit is contained in:
rd
2025-08-14 17:42:05 +08:00
parent 97f02b1785
commit e173b11750
16 changed files with 150 additions and 68 deletions

View File

@ -285,7 +285,7 @@ export default {
<div class="ai-suggest-box relative py-24px flex flex-col">
{!isEmpty(aiReview.value) && (
<div class="relative w-fit ml-24px mb-16px">
<span class="ai-text">AI 智能审核</span>
<span class="ai-text relative z-2">AI 智能审核</span>
<img src={icon1} class="w-80px h-10.8px absolute bottom-1px left--9px" />
</div>
)}

View File

@ -102,7 +102,7 @@ export default {
} else {
return (
<div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
<img src={coverImageUrl.value} class="w-100% h-100% object-cover absolute z-0 top-0 left-0" />
<img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
</div>
);
}

View File

@ -68,10 +68,10 @@
aspect-ratio: 3 / 4;
}
.main-img-box {
width: 347px;
width: 320px;
height: auto;
max-height: 472px;
background: #fff;
aspect-ratio: 3/4;
}
.desc-img-wrap {
display: grid;

View File

@ -1,11 +1,25 @@
<template>
<div class="highlight-textarea-container">
<a-textarea ref="textareaWrapRef" v-model="inputValue" placeholder="请输入作品描述" :disabled="disabled" show-word-limit
:max-length="1000" size="large" class="textarea-input h-full w-full" @input="handleInput"
@focus="() => (focus = true)" @blur="() => (focus = false)" />
<a-textarea
ref="textareaWrapRef"
v-model="inputValue"
placeholder="请输入作品描述"
:disabled="disabled"
show-word-limit
:max-length="1000"
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
@focus="() => (focus = true)"
@blur="() => (focus = false)"
/>
<div class="textarea-highlight" :class="{ focus: focus }" :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
v-html="highlightedHtml" />
<div
class="textarea-highlight"
:class="{ focus: focus }"
:style="{ visibility: inputValue ? 'visible' : 'hidden' }"
v-html="highlightedHtml"
/>
</div>
</template>
@ -97,7 +111,8 @@ const generateHighlightedHtml = (): string => {
};
onMounted(() => {
nativeTextarea = (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
nativeTextarea =
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
document.querySelector('.textarea-input .arco-textarea');
if (nativeTextarea) {
@ -158,7 +173,7 @@ const handleCompositionUpdate = () => {
font-weight: 400px;
border: 1px solid #d7d7d9;
border-radius: 4px;
resize: vertical;
resize: none;
white-space: pre-wrap;
word-wrap: break-word;
z-index: inherit;
@ -193,9 +208,8 @@ const handleCompositionUpdate = () => {
background: transparent;
color: transparent;
caret-color: #211f24 !important;
resize: none;
@include textarea-padding;
// -webkit-text-fill-color: transparent !important;
overflow-y: auto;
}

View File

@ -81,7 +81,7 @@ export default {
} else {
return (
<div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
<img src={coverImageUrl.value} class="w-100% h-100% object-contain absolute z-0 top-0 left-0" />
<img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
</div>
);
}

View File

@ -22,8 +22,8 @@ $footer-height: 68px;
.main-img-box {
width: 320px;
height: auto;
max-height: 472px;
background: #fff;
aspect-ratio: 3/4;
}
.desc-img-wrap {
display: grid;

View File

@ -93,7 +93,7 @@ export default {
<>
<div class="manuscript-edit-wrap">
<div class="flex items-center mb-8px">
<span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
<span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
内容稿件列表
</span>
<icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />

View File

@ -1,11 +1,25 @@
<template>
<div class="highlight-textarea-container">
<a-textarea ref="textareaWrapRef" v-model="inputValue" placeholder="请输入作品描述" :disabled="disabled" show-word-limit
:max-length="1000" size="large" class="textarea-input h-full w-full" @input="handleInput"
@focus="() => (focus = true)" @blur="() => (focus = false)" />
<a-textarea
ref="textareaWrapRef"
v-model="inputValue"
placeholder="请输入作品描述"
:disabled="disabled"
show-word-limit
:max-length="1000"
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
@focus="() => (focus = true)"
@blur="() => (focus = false)"
/>
<div class="textarea-highlight" :class="{ focus: focus }" :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
v-html="highlightedHtml" />
<div
class="textarea-highlight"
:class="{ focus: focus }"
:style="{ visibility: inputValue ? 'visible' : 'hidden' }"
v-html="highlightedHtml"
/>
</div>
</template>
@ -98,7 +112,8 @@ const generateHighlightedHtml = (): string => {
};
onMounted(() => {
nativeTextarea = (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
nativeTextarea =
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
document.querySelector('.textarea-input .arco-textarea');
if (nativeTextarea) {
@ -159,7 +174,7 @@ const handleCompositionUpdate = () => {
font-weight: 400px;
border: 1px solid #d7d7d9;
border-radius: 4px;
resize: vertical;
resize: none;
white-space: pre-wrap;
word-wrap: break-word;
z-index: inherit;
@ -194,9 +209,8 @@ const handleCompositionUpdate = () => {
background: transparent;
color: transparent;
caret-color: #211f24 !important;
resize: none;
@include textarea-padding;
// -webkit-text-fill-color: transparent !important;
overflow-y: auto;
}

View File

@ -221,7 +221,7 @@ export default {
class="flex items-center w-fit h-24px px-8px rounded-2px"
style={{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }}
>
<span class="cts s1" style={{ color: getStatusInfo(record.audit_status).color }}>
<span class="cts s1 bold" style={{ color: getStatusInfo(record.audit_status).color }}>
{getStatusInfo(record.audit_status).name}
</span>
</div>
@ -238,20 +238,23 @@ export default {
class="mr-4px"
/>
<span
class="cts"
class={
class={`cts !text-14px !lh-22px ${
record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
}
}`}
>
{record.type === EnumManuscriptType.Image ? '图文' : '视频'}
</span>
</div>
);
} else if (column.dataIndex === 'last_modified_at') {
return exactFormatTime(
record.last_modified_at,
'YYYY-MM-DD HH:mm:ss',
'YYYY-MM-DD HH:mm:ss',
return (
<span class="cts num">
{exactFormatTime(
record.last_modified_at,
'YYYY-MM-DD HH:mm:ss',
'YYYY-MM-DD HH:mm:ss',
)}
</span>
);
} else {
return formatTableField(column, record, true);

View File

@ -8,6 +8,9 @@
&.bold {
font-family: $font-family-medium;
}
&.num {
font-family: $font-family-manrope-regular;
}
}
.filter-row-item {
.label {
@ -23,5 +26,43 @@
.arco-scrollbar-track {
display: none !important;
}
.arco-table {
.arco-table-container {
.arco-table-element {
thead {
.arco-table-tr {
.arco-table-th {
.arco-table-cell {
padding: 10px 16px !important;
}
}
}
}
tbody {
.arco-table-tr {
.arco-table-td {
.arco-table-cell {
padding: 6px 16px;
.arco-table-cell-content,
.arco-table-td-content {
font-size: 12px;
line-height: 20px;
}
}
}
}
}
}
}
}
.arco-pagination {
.arco-pagination-total,
.arco-pagination-jumper-prepend {
font-size: 14px;
}
.arco-pagination-jumper-prepend {
font-family: $font-family-regular;
}
}
}
}

View File

@ -79,8 +79,8 @@ export default {
);
} else {
return (
<div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
<img src={coverImageUrl.value} class="w-100% h-100% object-contain absolute z-0 top-0 left-0" />
<div class="main-img-box mb-16px overflow-hidden cursor-pointer">
<img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
</div>
);
}

View File

@ -22,8 +22,9 @@ $footer-height: 68px;
.main-img-box {
width: 320px;
height: auto;
max-height: 472px;
background: #fff;
aspect-ratio: 3/4;
// aspect-ratio: 3/4;
}
.desc-img-wrap {
display: grid;

View File

@ -91,7 +91,7 @@ export default {
<>
<div class="manuscript-edit-wrap">
<div class="flex items-center mb-8px">
<span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
<span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
内容稿件列表
</span>
<icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />