Merge remote-tracking branch 'origin/feature/v1.2灵机空间-内容上传审核_rxd' into test

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>

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>