perf: 文本高亮组件替换

src/views/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 => {
@@ -114,9 +115,7 @@ const generateHighlightedHtml = (): string => {
 };
 
 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,8 @@ const handleCompositionUpdate = () => {
     height: 100%;
     font-size: 14px;
     line-height: 22px;
-    font-weight: 400px;
+    font-weight: 400;
-    border: 1px solid #d7d7d9;
+    //border: 1px solid #d7d7d9;
     border-radius: 4px;
     resize: none;
     white-space: pre-wrap;
@@ -192,23 +192,18 @@ 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;
@@ -228,7 +223,7 @@ const handleCompositionUpdate = () => {
   }
 
   // 处于中文输入法合成态时，显示真实文本并隐藏高亮层
-  :deep(.textarea-input.composing .arco-textarea) {
+  :deep(.ant-input-textarea.composing textarea) {
     color: #211f24 !important;
     -webkit-text-fill-color: #211f24 !important;
   }