修改弹窗

src/components/TextareaTag/TextareaTag.scss

@@ -7,6 +7,9 @@
   box-sizing: border-box;
   .input-wrapper {
     margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     .additional-input {
       width: 100%;
       min-height: 46px;
@@ -22,6 +25,15 @@
         color: theme.$textarea-placeholder-color;
       }
     }
+    .char-count {
+      color: #999;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: right;
+      &.char-count--error {
+        color: #ff4d4f;
+      }
+    }
   }
 
   .options-wrapper {

src/components/TextareaTag/TextareaTag.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 import { View,  Textarea } from '@tarojs/components'
 
 import { Checkbox } from '@nutui/nutui-react-taro'
@@ -21,14 +21,15 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
   value, 
   onChange, 
   placeholder = '请输入',
-  maxLength = 1000,
+  maxLength = 200,
   options = [],
   onFocus,
   onBlur
 }) => {
   // 处理文本输入变化
-  const handleTextChange = useCallback((e: any) => {
-    onChange({...value, description: e.detail.value})
+  const handleTextChange = useCallback((val: string) => {
+    console.log(val,'e.detail.value')
+    onChange({...value, description: val})
   }, [onChange])
 
   // 处理标签选择变化
@@ -36,7 +37,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
     onChange({...value, description_tag: selectedTags})
   }, [onChange])
 
-  console.log(options, 'options')
+  const isOverflow = value.description.length > maxLength
+
   return (
     <View className='textarea-tag'>
         {/* 选择选项 */}
@@ -70,12 +72,15 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
             placeholder={placeholder}
             value={value.description}
             placeholderClass='textarea-placeholder'
-            onInput={handleTextChange}
-            maxlength={maxLength}
+            onInput={(e) => handleTextChange(e.detail.value)}
+            maxlength={-1}
             autoHeight={true}
             onFocus={onFocus}
             onBlur={onBlur}
           />
+          <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
+            {value.description.length}/{maxLength}
+          </View>
         </View>
         
         

src/components/TitleTextarea/TitleTextarea.tsx

@@ -21,12 +21,13 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
   onFocus,
   onBlur
 }) => {
+  const isOverflow = value.length > maxLength
   const handleChange = useCallback((values) => {
-    if (values.length > maxLength ) {
-      const newValues = values.slice(0, maxLength)
-      onChange(newValues)
-      return;
-    }
+    // if (values.length > maxLength ) {
+    //   const newValues = values.slice(0, maxLength)
+    //   onChange(newValues)
+    //   return;
+    // }
    onChange(values)
   }, [])
   return (
@@ -42,7 +43,9 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
         onFocus={onFocus}
         onBlur={onBlur}
       />
-      <View className='char-count'>{value.length}/{maxLength}</View>
+      <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
+        {value.length}/{maxLength}
+      </View>
     </View>
   )
 }

src/components/TitleTextarea/index.scss

@@ -41,5 +41,8 @@
     font-size: 14px;
     font-weight: 400;
     line-height: 24px;
+    &.char-count--error {
+      color: #ff4d4f;
+    }
   }
 }