renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 聚焦样式调整

Browse Source
This commit is contained in:
rd
2025-08-13 15:01:54 +08:00
parent 7b95fe6017
commit 0037b7c877
2 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
View File

@ -10,11 +10,14 @@
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
@focus="() => (focus = true)"
@blur="() => (focus = false)"
/>
<div
ref="highlightRef"
class="textarea-highlight"
:class="{ focus: focus }"
:style="{ visibility: inputValue ? 'visible' : 'hidden' }"
v-html="highlightedHtml"
/>
@ -52,6 +55,7 @@ const textareaRef = ref<HTMLTextAreaElement | null>(null);
const highlightRef = ref<HTMLTextAreaElement | null>(null);
const inputValue = ref(props.modelValue || '');
const scrollTop = ref(0);
const focus = ref(false);
const highlightedHtml = computed(() => generateHighlightedHtml());
// 监听外部modelValue变化
@ -148,7 +152,7 @@ const handleTextareaScroll = (e: Event) => {
font-size: 14px;
line-height: 22px;
font-weight: 400px;
border: 1px solid #e5e6eb;
border: 1px solid #d7d7d9;
border-radius: 4px;
resize: vertical;
white-space: pre-wrap;
@ -156,15 +160,18 @@ const handleTextareaScroll = (e: Event) => {
}
.textarea-highlight {
@include textarea-style;
padding: 8px 12px;
position: absolute;
top: 0;
left: 0;
z-index: 0;
@include textarea-padding;
pointer-events: none;
background: #fff;
overflow: hidden;
@include textarea-padding;
&.focus {
border-color: rgb(var(--primary-6)) !important;
box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
}
}
:deep(.arco-textarea-wrapper) {
@include textarea-style;
@ -191,13 +198,5 @@ const handleTextareaScroll = (e: Event) => {
}
}
}
/* 字数统计样式 */
.word-count {
margin-top: 8px;
text-align: right;
font-size: 12px;
color: #86909c;
}
}
</style>

18
src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
View File

@ -10,11 +10,14 @@
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
@focus="() => (focus = true)"
@blur="() => (focus = false)"
/>
<div
ref="highlightRef"
class="textarea-highlight"
:class="{ focus: focus }"
:style="{ visibility: inputValue ? 'visible' : 'hidden' }"
v-html="highlightedHtml"
/>
@ -52,6 +55,7 @@ const textareaRef = ref<HTMLTextAreaElement | null>(null);
const highlightRef = ref<HTMLTextAreaElement | null>(null);
const inputValue = ref(props.modelValue || '');
const scrollTop = ref(0);
const focus = ref(false);
const highlightedHtml = computed(() => generateHighlightedHtml());
// 监听外部modelValue变化
@ -148,7 +152,7 @@ const handleTextareaScroll = (e: Event) => {
font-size: 14px;
line-height: 22px;
font-weight: 400px;
border: 1px solid #e5e6eb;
border: 1px solid #d7d7d9;
border-radius: 4px;
resize: vertical;
white-space: pre-wrap;
@ -164,6 +168,10 @@ const handleTextareaScroll = (e: Event) => {
background: #fff;
overflow: hidden;
@include textarea-padding;
&.focus {
border-color: rgb(var(--primary-6)) !important;
box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
}
}
:deep(.arco-textarea-wrapper) {
@include textarea-style;
@ -190,13 +198,5 @@ const handleTextareaScroll = (e: Event) => {
}
}
}
/* 字数统计样式 */
.word-count {
margin-top: 8px;
text-align: right;
font-size: 12px;
color: #86909c;
}
}
</style>