智能解析

src/components/PublishMenu/PublishMenu.tsx

@@ -3,6 +3,7 @@ import { View, Text, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import styles from './index.module.scss'
 import images from '@/config/images'
+import AiImportPopup from '@/publish_pages/publishBall/components/AiImportPopup'
 
 export interface PublishMenuProps {
   onPersonalPublish?: () => void
@@ -11,25 +12,53 @@ export interface PublishMenuProps {
 
 const PublishMenu: React.FC<PublishMenuProps> = () => {
   const [isVisible, setIsVisible] = useState(false)
-
+  const [aiImportVisible, setAiImportVisible] = useState(false)
+  
   const handleIconClick = () => {
     setIsVisible(!isVisible)
   }
-
-  const handleMenuItemClick = (type: 'individual' | 'group') => {
+  const handleOverlayClick = () => {
+    setIsVisible(false)
+  }
+  const handleMenuItemClick = (type: 'individual' | 'group' | 'ai') => {
     // 跳转到publishBall页面并传递type参数
     console.log(type, 'type');
+    if (type === 'ai') {
+      setAiImportVisible(true)
+      setIsVisible(false)
+      return
+    }
     Taro.navigateTo({
       url: `/publish_pages/publishBall/index?type=${type}`
     })
     setIsVisible(false)
   }
 
+  const handleAiImportClose = () => {
+    setAiImportVisible(false)
+  }
 
+  const handleManualPublish = () => {
+    Taro.navigateTo({
+      url: '/publish_pages/publishBall/index?type=individual'
+    })
+  }
+
+  const handlePasteAndRecognize = (text: string) => {
+    console.log('识别的文本:', text)
+    // TODO: 实现文本识别逻辑
+    Taro.showToast({
+      title: '文本识别功能开发中',
+      icon: 'none'
+    })
+  }
 
   return (
     <View className={styles.publishMenu}>
-
+       {/* 蒙层 */}
+       {isVisible && (
+        <View className={styles.overlay} onClick={handleOverlayClick} />
+      )}
       {/* 菜单选项 */}
       {isVisible && (
         <View className={styles.menuCard}>
@@ -37,15 +66,16 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
             className={styles.menuItem}
             onClick={() => handleMenuItemClick('individual')}
           >
-            <View className={styles.menuIcon}>
-              <Image src={images.ICON_PERSON} />
-            </View>
             <View className={styles.menuContent}>
-              <Text className={styles.menuTitle}>发布个人约球</Text>
+              <View className={styles.menuTitle}>发布个人约球
+                <View className={styles.menuArrow}>
+                  <Image src={images.ICON_ARROW_RIGHT_BLACK} className={styles.img} />
+                </View>
+              </View>
               <Text className={styles.menuDesc}>已订场，找球友；未订场，找搭子</Text>
             </View>
-            <View className={styles.menuArrow}>
-              <Image src={images.ICON_ARROW_RIGHT} className={styles.img} />
+            <View className={styles.menuIcon}>
+              <Image src={images.ICON_PERSON} />
             </View>
           </View>
 
@@ -53,15 +83,34 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
             className={styles.menuItem}
             onClick={() => handleMenuItemClick('group')}
           >
-            <View className={styles.menuIcon}>
-              <Image src={images.ICON_GROUP} />
-            </View>
+            
             <View className={styles.menuContent}>
-              <Text className={styles.menuTitle}>发布畅打活动</Text>
+              <View className={styles.menuTitle}>发布畅打活动
+                <View className={styles.menuArrow}>
+                  <Image src={images.ICON_ARROW_RIGHT_BLACK} className={styles.img} />
+                </View>
+              </View>
               <Text className={styles.menuDesc}>认证球场官方组织</Text>
             </View>
-            <View className={styles.menuArrow}>
-              <Image src={images.ICON_ARROW_RIGHT} className={styles.img} />
+            <View className={styles.menuIcon}>
+                <Image src={images.ICON_GROUP} />
+              </View>
+          </View>
+          <View
+            className={`${styles.menuItem} ${styles.aiItem}`}
+            onClick={() => handleMenuItemClick('ai')}
+          >
+            <View className={styles.menuContent}>
+              <View className={styles.menuTitle}>智能导入球局信息
+                <View className={styles.menuArrow}>
+                <Image src={images.ICON_ARROW_RIGHT_WHITE} className={styles.img} />
+              </View>
+              </View>
+              <Text className={styles.menuDesc}>识别文本，快速导入球局信息</Text>
+            </View>
+            
+            <View className={styles.menuIcon}>
+              <Image src={images.ICON_IMPORTANT_BTN} />
             </View>
           </View>
         </View>
@@ -74,6 +123,14 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
       >
         <Image src={images.ICON_PUBLISH} className={styles.closeIcon} />
       </View>
+
+      {/* AI导入弹窗 */}
+      <AiImportPopup
+        visible={aiImportVisible}
+        onClose={handleAiImportClose}
+        onManualPublish={handleManualPublish}
+        onPasteAndRecognize={handlePasteAndRecognize}
+      />
     </View>
   )
 }