bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

智能解析

Browse Source
This commit is contained in:
筱野
2025-09-17 20:13:34 +08:00
parent 30935f71df
commit 137a7321c9
20 changed files with 572 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/PublishMenu/PublishMenu.tsx
View File

@@ -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>
)
}

109
src/components/PublishMenu/index.module.scss
View File

@@ -3,48 +3,53 @@
z-index: 1000;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.menuCard {
position: absolute;
bottom: 80px;
right: 0;
width: 302px;
background: white;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 12px;
width: 278px;
animation: slideIn 0.3s ease-out;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
/* 小三角指示器 */
&::after {
content: '';
position: absolute;
bottom: -8px;
right: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
/* 移除阴影，避免连接处的黑色 */
}
z-index: 1001;
// /* 小三角指示器 */
// &::after {
// content: '';
// position: absolute;
// bottom: -8px;
// right: 20px;
// width: 0;
// height: 0;
// border-left: 8px solid transparent;
// border-right: 8px solid transparent;
// border-top: 8px solid white;
// /* 移除阴影，避免连接处的黑色 */
// }
/* 为小三角添加单独的阴影效果 */
&::before {
content: '';
position: absolute;
bottom: -9px;
right: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.1);
z-index: -1;
}
// /* 为小三角添加单独的阴影效果 */
// &::before {
// content: '';
// position: absolute;
// bottom: -9px;
// right: 20px;
// width: 0;
// height: 0;
// border-left: 8px solid transparent;
// border-right: 8px solid transparent;
// border-top: 8px solid rgba(0, 0, 0, 0.1);
// z-index: -1;
// }
}
@keyframes slideIn {
@@ -71,12 +76,20 @@
}
.menuIcon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
width: 48px;
height: 48px;
padding: 10px;
justify-content: center;
margin-right: 12px;
align-items: center;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.03);
box-sizing: border-box;
image{
width: 28px;
height: 28px;
}
}
.ballIcon {
@@ -143,6 +156,7 @@
flex: 1;
display: flex;
flex-direction: column;
padding-left: 8px;
}
.menuTitle {
@@ -151,6 +165,8 @@
color: #000;
margin-bottom: 2px;
line-height: 24px; /* 150% */
display: flex;
align-items: center;
}
.menuDesc {
@@ -162,7 +178,7 @@
.menuArrow {
font-size: 16px;
color: #ccc;
margin-left: 8px;
margin-left: 4px;
.img{
width: 16px;
height: 16px;
@@ -180,6 +196,8 @@
justify-content: center;
flex-shrink: 0;
overflow: hidden;
z-index: 1001;
position: relative;
&.rotated {
transform: rotate(-90deg);
}
@@ -193,3 +211,20 @@
font-weight: bold;
line-height: 1;
}
.aiItem{
border-radius: 20px;
border: 0.5px solid rgba(0, 0, 0, 0.08);
background: #000;
.menuTitle{
color: #FFF;
}
.menuDesc{
color: rgba(255, 255, 255, 0.60);
}
.menuIcon{
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.20);
}
}