修改标题对齐问题

src/components/TitleTextarea/TitleTextarea.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { View } from '@tarojs/components'
 import { TextArea } from '@nutui/nutui-react-taro';
 
@@ -22,6 +22,10 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
   onBlur
 }) => {
   const isOverflow = value.length > maxLength
+  // const [isFocused, setIsFocused] = useState(false)
+
+  // const showPlaceholder = !isFocused && !value
+
   const handleChange = useCallback((values) => {
     // if (values.length > maxLength ) {
     //   const newValues = values.slice(0, maxLength)
@@ -29,20 +33,38 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
     //   return;
     // }
     onChange(values)
-  }, [])
+  }, [onChange])
+
+  const handleFocus = useCallback(() => {
+    // setIsFocused(true)
+    onFocus?.()
+  }, [onFocus])
+
+  const handleBlur = useCallback(() => {
+    // setIsFocused(false)
+    onBlur?.()
+  }, [onBlur])
+
   return (
     <View className='title-input-wrapper'>
+      <View className='title-input-box'>
         <TextArea
           className='title-input'
           placeholder={placeholder}
           value={value}
           onInput={(e) => handleChange(e.detail.value)}
          // maxlength={maxLength}
-        autoSize={true}
           placeholderClass='title-input-placeholder'
-        onFocus={onFocus}
+          autoSize={true}
-        onBlur={onBlur}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
         />
+        {/* {showPlaceholder && (
+          <View className='title-input-placeholder-custom'>
+            {placeholder}
+          </View>
+        )} */}
+      </View>
       <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
         {value.length}/{maxLength}
       </View>

src/components/TitleTextarea/index.scss

@@ -4,9 +4,22 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
+  padding: 10px 12px;
-  min-height: 36px;
+  min-height: 32px;
   box-sizing: border-box;
+  .title-input-box {
+    position: relative;
+    flex: 1;
+    display: flex;
+  }
+  .title-input-placeholder {
+    color: rgba(60, 60, 67, 0.60) !important;
+    font-weight: normal !important;
+    position: relative;
+    line-height: 22px !important;
+    height: 22px;
+    flex: 1;
+  }
   .title-input {
     flex: 1;
     padding: 0;
@@ -17,22 +30,23 @@
     display: flex;
     align-items: center;
     resize: none;
-    line-height: 26px;
+    line-height: 22px;
-    min-height: 26px;
+    min-height: 22px;
   }
-  
+  .title-input-placeholder-custom {
-  // 使用 placeholderClass 来控制 placeholder 样式
+    position: absolute;
-  .title-input-placeholder {
+    left: 7px;
-    color: rgba(60, 60, 67, 0.60) !important;
+    top: 50%;
-    font-size: 16px !important;
+    width: 100%;
-    font-weight: normal !important;
+    padding: 0;
-    line-height: 26px !important;
+    color: rgba(60, 60, 67, 0.60);
-    height: 26px;
+    font-size: 16px;
-    flex: 1;
+    font-weight: normal;
+    line-height: 22px;
+    pointer-events: none;
+    box-sizing: border-box;
+    transform: translateY(-50%);
   }
-  
-  
-  
   .char-count {
     color: #999;
     pointer-events: none;