From 0037b7c8770827a34ab7e329466adda153bb451d Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Wed, 13 Aug 2025 15:01:54 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=81=9A=E7=84=A6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content-card/highlight-textarea.vue       | 21 +++++++++----------
 .../content-card/highlight-textarea.vue       | 18 ++++++++--------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue b/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
index 16b0d81..384bc43 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
+++ b/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
@@ -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>
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue b/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
index 46fbdb3..384bc43 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
+++ b/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
@@ -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>