修改日期问题弹出问题

src/publish_pages/publishBall/components/AiImportPopup/AiImportPopup.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { View, Text, Textarea, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import { ConfigProvider, Loading, Popup, Toast } from '@nutui/nutui-react-taro'
+import { ConfigProvider, Loading, Toast } from '@nutui/nutui-react-taro'
 import styles from './index.module.scss'
 import uploadFiles from '@/services/uploadFiles'
 import publishService from '@/services/publishService'
@@ -109,7 +109,10 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
   }
 
   const handleTextChange = (e: any) => {
-    setText(e.detail.value)
+    const text = e.detail.value;
+    const maxAllowedLength = 120;
+    const truncatedVal = text.length > maxAllowedLength ? text.slice(0, maxAllowedLength) : text
+    setText(truncatedVal)
   }
 
   // 使用全局键盘状态监听
@@ -191,73 +194,90 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
   }
 
   const showManualButton = uploadFailCount >= maxFailCount
+  if (!visible) {
+    return null
+  }
 
+  // 阻止弹窗内的触摸事件冒泡
+  const handleTouchMoveInPopup = (e) => {
+    if (!isKeyboardVisible) {
+      e.stopPropagation()
+    }
+  }
+  
   return (
-    <Popup
-      visible={visible}
-      position="bottom"
-      round={true}
-      closeable={false}
-      onClose={closePopupBefore}
-      className={styles.aiImportPopup}
-      style={{ paddingBottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined }}
-    >
-      <View className={styles.popupContent}>
-        {/* 头部 */}
-        <View className={styles.header}>
-          <View className={styles.titleContainer}>
-            <Image src={images.ICON_IMPORTANT_BLACK} className={styles.lightningIcon} />
-            <Text className={styles.title}>智能导入球局信息</Text>
-          </View>
-          <View className={styles.closeButton} onClick={closePopupBefore}>
-            <Image src={images.ICON_CLOSE} className={styles.lightningIcon} />
-          </View>
-        </View>
-
-        {/* 文本域 */}
-        <View className={styles.textAreaContainer}>
-          <Textarea
-            className={styles.textArea}
-            value={text}
-            onInput={handleTextChange}
-            onFocus={() => {}}
-            onBlur={() => {}}
-            placeholder="在此「粘贴识别」或输入文本，智能拆分球局时间、费用、地点和其他信息，并帮你智能生成球局标题"
-            maxlength={-1}
-            showConfirmBar={false}
-            placeholderClass={styles.textArea_placeholder}
-            autoHeight
-            // 关闭系统自动上推，改为手动根据键盘高度加内边距
-            adjustPosition={false}
-          />
-          <View className={styles.charCount}>
-            <Text className={`${styles.charCountText} ${isCharCountExceeded ? styles.charCountTextExceeded : ''}`}>
-              {text.length}/100
-            </Text>
-          </View>
-        </View>
-
-        {/* 图片识别按钮 */}
-        <View className={styles.imageRecognitionContainer}>
-          <View className={`${styles.imageRecognitionButton} ${uploadLoading ? styles.uploadLoadingContainer : ''}`} onClick={handleImageRecognition}>
-            {
-              uploadLoading ? (<Image src={images.ICON_UPLOAD_SUCCESS} className={styles.cameraIcon} />) : (<Image src={images.ICON_UPLOAD_IMG} className={styles.cameraIcon} />)
-            }
-            <Text className={styles.imageRecognitionText}>图片识别</Text>
-            <Text className={styles.imageRecognitionDesc}>{uploadLoading ? '已上传 1 张图片' : '支持订场截图/小红书笔记截图等图片'}</Text>
-          </View>
-        </View>
-
-        {/* 底部按钮 */}
-        <View className={styles.bottomButtons}>
-          {showManualButton && (
-            <View className={styles.manualButton} onClick={handleManualPublish}>
-              <Text className={styles.manualButtonText}>手动发布球局</Text>
+    <View 
+      className={styles.aiImportPopupOverlay}
+      >
+      <View className={styles.aiImportPopupWrapper} onTouchMove={handleTouchMoveInPopup} catchMove></View>
+      <View
+        className={styles.aiImportPopup}
+        style={{ paddingBottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined }}
+      >
+        <View className={styles.popupContent}>
+          {/* 头部 */}
+          <View className={styles.header}>
+            <View className={styles.titleContainer}>
+              <Image src={images.ICON_IMPORTANT_BLACK} className={styles.lightningIcon} />
+              <Text className={styles.title}>智能导入球局信息</Text>
             </View>
-          )}
-          <View className={styles.pasteButton} onClick={handlePasteAndRecognize}>
-            {
-              loading ? (
+            <View className={styles.closeButton} onClick={closePopupBefore}>
+              <Image src={images.ICON_CLOSE} className={styles.lightningIcon} />
+            </View>
+          </View>
+
+          {/* 文本域 */}
+          <View className={styles.textAreaContainer}>
+            <Textarea
+              className={styles.textArea}
+              value={text}
+              onInput={handleTextChange}
+              onFocus={() => {}}
+              onBlur={() => {}}
+              placeholder="在此「粘贴识别」或输入文本，智能拆分球局时间、费用、地点和其他信息，并帮你智能生成球局标题"
+              maxlength={-1}
+              showConfirmBar={false}
+              placeholderClass={styles.textArea_placeholder}
+              autoHeight
+              // 关闭系统自动上推，改为手动根据键盘高度加内边距
+              adjustPosition={false}
+            />
+            <View className={styles.charCount}>
+              <Text className={`${styles.charCountText} ${isCharCountExceeded ? styles.charCountTextExceeded : ''}`}>
+                {text.length}/100
+              </Text>
+            </View>
+          </View>
+
+          {/* 图片识别按钮 */}
+          <View className={styles.imageRecognitionContainer}>
+            <View
+              className={`${styles.imageRecognitionButton} ${
+                uploadLoading ? styles.uploadLoadingContainer : ''
+              }`}
+              onClick={handleImageRecognition}
+            >
+              {uploadLoading ? (
+                <Image src={images.ICON_UPLOAD_SUCCESS} className={styles.cameraIcon} />
+              ) : (
+                <Image src={images.ICON_UPLOAD_IMG} className={styles.cameraIcon} />
+              )}
+              <Text className={styles.imageRecognitionText}>图片识别</Text>
+              <Text className={styles.imageRecognitionDesc}>
+                {uploadLoading ? '已上传 1 张图片' : '支持订场截图/小红书笔记截图等图片'}
+              </Text>
+            </View>
+          </View>
+
+          {/* 底部按钮 */}
+          <View className={styles.bottomButtons}>
+            {showManualButton && (
+              <View className={styles.manualButton} onClick={handleManualPublish}>
+                <Text className={styles.manualButtonText}>手动发布球局</Text>
+              </View>
+            )}
+            <View className={styles.pasteButton} onClick={handlePasteAndRecognize}>
+              {loading ? (
                 <View className={styles.loadingContainer}>
                   <ConfigProvider theme={{ nutuiLoadingIconColor: '#fff', nutuiLoadingIconSize: '20px' }}>
                     <Loading type="circular" />
@@ -269,13 +289,13 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
                   <Image src={images.ICON_COPY} className={styles.clipboardIcon} />
                   <Text className={styles.pasteButtonText}>粘贴并识别</Text>
                 </>
-              )
-            }
+              )}
+            </View>
           </View>
         </View>
+        <Toast id="toast" />
       </View>
-      <Toast id="toast" />
-    </Popup>
+    </View>
   )
 }