修改发布增加拖动

src/components/CommonPopup/CommonPopup.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { View, Text } from '@tarojs/components'
 import { Popup, Button } from '@nutui/nutui-react-taro'
 import styles from './index.module.scss'
@@ -19,6 +19,7 @@ export interface CommonPopupProps {
   children?: React.ReactNode
   className?: string
   style?: React.CSSProperties
+  enableDragToClose?: boolean
 }
 
 const CommonPopup: React.FC<CommonPopupProps> = ({
@@ -36,8 +37,14 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
   round = true,
   zIndex,
   style,
-  children
+  children,
+  enableDragToClose = true
 }) => {
+  const [dragOffset, setDragOffset] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
+  const touchStartY = useRef(0)
+  const popupRef = useRef<HTMLDivElement>(null)
+
   const handleCancel = () => {
     if (onCancel) {
       onCancel()
@@ -46,6 +53,39 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
     }
   }
 
+  const handleTouchStart = (e: any) => {
+    if (!enableDragToClose) return
+    
+    touchStartY.current = e.touches[0].clientY
+    setIsDragging(true)
+  }
+
+  const handleTouchMove = (e: any) => {
+    if (!enableDragToClose || !isDragging) return
+    
+    const currentY = e.touches[0].clientY
+    const deltaY = currentY - touchStartY.current
+    
+    // 只允许向下拖动，限制最大拖动距离
+    if (deltaY > 0) {
+      setDragOffset(Math.min(deltaY, 200))
+    }
+  }
+
+  const handleTouchEnd = () => {
+    if (!enableDragToClose || !isDragging) return
+    
+    setIsDragging(false)
+    
+    // 如果拖动距离超过阈值，关闭弹窗
+    if (dragOffset > 100) {
+      onClose()
+    }
+    
+    // 重置拖动偏移
+    setDragOffset(0)
+  }
+
   return (
     <Popup
       visible={visible}
@@ -54,8 +94,27 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
       closeable={false}
       onClose={onClose}
       className={`${styles['common-popup']} ${className ? className : ''}`}
-      style={{ zIndex: zIndex ? zIndex : undefined, ...style }}
+      style={{ 
+        zIndex: zIndex ? zIndex : undefined, 
+        ...style 
+      }}
     >
+      {enableDragToClose && (
+        <View className={styles['common-popup__drag-handle-container']}>
+          <View 
+            className={styles['common-popup__drag-handle']}
+            style={{
+              transform: `translateX(-50%) translateY(${dragOffset * 0.3}px)`,
+              opacity: isDragging ? 0.8 : 1,
+              transition: isDragging ? 'none' : 'all 0.3s ease-out'
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+          />
+        </View>
+      )}
+
       {showHeader && (
         <View className={styles['common-popup__header']}>
           {typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}

src/components/CommonPopup/index.module.scss

@@ -1,6 +1,25 @@
 @use '~@/scss/themeColor.scss' as theme;
 
 .common-popup {
+  .common-popup__drag-handle-container {
+    position: position;
+  }
+  .common-popup__drag-handle {
+    position: absolute;
+    top: 6px;
+    left: 50%;
+    width: 32px;
+    height: 4px;
+    background-color: rgba(22, 24, 35, 0.20);
+    border-radius: 2px;
+    z-index: 10;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    
+    &:active {
+      background-color: #9ca3af;
+    }
+  }
   padding: 0;
   box-sizing: border-box;
   max-height: calc(100vh - 10px);