style(highlight-textarea): 优化文本域样式和功能

src/views/material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue

@@ -110,7 +110,7 @@ const generateHighlightedHtml = (): string => {
     const levelStyle = props.levelMap?.get(wordInfo.risk_level);
     const color = levelStyle?.color || '#F64B31';
 
-    return `<span class="text-14px font-400 lh-22px" style="color: ${color};">${escapeHtml(match)}</span>`;
+    return `<span class="text-14px font-400 lh-22px font-family-regular" style="color: ${color};">${escapeHtml(match)}</span>`;
   });
 };
 
@@ -174,6 +174,7 @@ const handleCompositionUpdate = () => {
     font-size: 14px;
     line-height: 22px;
     font-weight: 400;
+    font-family: $font-family-regular;
     //border: 1px solid #d7d7d9;
     border-radius: 4px;
     resize: none;
@@ -209,15 +210,20 @@ const handleCompositionUpdate = () => {
       resize: none;
       @include textarea-padding;
       overflow-y: auto;
-    }
+      &.ant-input-disabled {
+        background: #f2f3f5 !important;
+        -webkit-text-fill-color: rgba(0, 0, 0, 0.25) !important;
+      }
 
-    .arco-textarea-word-limit {
-      z-index: 2;
     }
-
+    &.ant-input-textarea-show-count {
-    &.arco-textarea-disabled {
+      &::after {
-      .arco-textarea {
+        position: absolute;
-        background: #f2f3f5;
+        z-index: 2;
+        font-size: 12px;
+        right: 10px;
+        bottom: 6px;
+        user-select: none;
       }
     }
   }

src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="highlight-textarea-container">
-    <a-textarea
+    <TextArea
       ref="textareaWrapRef"
-      v-model="inputValue"
+      v-model:value="inputValue"
       placeholder="请输入作品描述"
       :disabled="disabled"
-      show-word-limit
+      showCount
-      :max-length="1000"
+      :maxlength="1000"
       size="large"
       class="textarea-input h-full w-full"
       @input="handleInput"
@@ -25,7 +25,8 @@
 
 <script setup lang="ts">
 import { Input } from 'ant-design-vue';
-const {TextArea}  = Input
+
+const { TextArea } = Input;
 import { ref, computed, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
 import { escapeRegExp } from './constants';
 
@@ -69,8 +70,8 @@ watch(
 );
 
 // 处理输入事件
-const handleInput = (value: string) => {
+const handleInput = (e) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', e.currentTarget.value);
 };
 
 const escapeHtml = (str: string): string => {
@@ -109,14 +110,12 @@ const generateHighlightedHtml = (): string => {
     const levelStyle = props.levelMap?.get(wordInfo.risk_level);
     const color = levelStyle?.color || '#F64B31';
 
-    return `<span class="text-14px font-400 lh-22px" style="color: ${color};">${escapeHtml(match)}</span>`;
+    return `<span class="text-14px font-400 lh-22px font-family-regular" style="color: ${color};">${escapeHtml(match)}</span>`;
   });
 };
 
 onMounted(() => {
-  nativeTextarea =
+  nativeTextarea = textareaWrapRef.value?.$el?.querySelector?.('textarea.ant-input');
-    (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
-    document.querySelector('.textarea-input .arco-textarea');
 
   if (nativeTextarea) {
     nativeTextarea.addEventListener('scroll', handleTextareaScroll);
@@ -146,6 +145,7 @@ const handleTextareaScroll = (e: Event) => {
 
 const handleCompositionUpdate = () => {
   if (!nativeTextarea) return;
+  console.log('handleCompositionUpdate', nativeTextarea.value);
   // 使用 rAF 等待浏览器把最新字符写入 textarea.value 再读取
   requestAnimationFrame(() => {
     if (!nativeTextarea) return;
@@ -173,8 +173,9 @@ const handleCompositionUpdate = () => {
     height: 100%;
     font-size: 14px;
     line-height: 22px;
-    font-weight: 400px;
+    font-weight: 400;
-    border: 1px solid #d7d7d9;
+    font-family: $font-family-regular;
+    //border: 1px solid #d7d7d9;
     border-radius: 4px;
     resize: none;
     white-space: pre-wrap;
@@ -192,43 +193,43 @@ const handleCompositionUpdate = () => {
     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) {
+  :deep(.ant-input-textarea) {
     @include textarea-style;
 
-    .arco-textarea {
+    textarea {
       padding: 0;
       overflow: hidden;
       position: absolute;
       z-index: 1;
       width: 100%;
-      background: transparent;
+      background-color: transparent !important;
       color: transparent;
       caret-color: #211f24 !important;
       resize: none;
       @include textarea-padding;
       overflow-y: auto;
-    }
+      &.ant-input-disabled {
+        background: #f2f3f5 !important;
+        -webkit-text-fill-color: rgba(0, 0, 0, 0.25) !important;
+      }
 
-    .arco-textarea-word-limit {
-      z-index: 2;
     }
-
+    &.ant-input-textarea-show-count {
-    &.arco-textarea-disabled {
+      &::after {
-      .arco-textarea {
+        position: absolute;
-        background: #f2f3f5;
+        z-index: 2;
+        font-size: 12px;
+        right: 10px;
+        bottom: 6px;
+        user-select: none;
       }
     }
   }
 
   // 处于中文输入法合成态时，显示真实文本并隐藏高亮层
-  :deep(.textarea-input.composing .arco-textarea) {
+  :deep(.ant-input-textarea.composing textarea) {
     color: #211f24 !important;
     -webkit-text-fill-color: #211f24 !important;
   }