diff --git a/src/components/EditModal/EditModal.scss b/src/components/EditModal/EditModal.scss index a5f11fd..759f8e5 100644 --- a/src/components/EditModal/EditModal.scss +++ b/src/components/EditModal/EditModal.scss @@ -23,6 +23,7 @@ from { transform: translateY(100%); } + to { transform: translateY(0); } @@ -82,7 +83,7 @@ // 内容区域 .modal_content { - padding: 16px 20px; + padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; @@ -90,19 +91,18 @@ .input_container { display: flex; - flex-direction: column; + align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; padding: 10px 16px; box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06); - + // 名字输入时的容器样式 &:has(.nickname_input) { min-height: 40px; - padding: 10px 16px; } .text_input { @@ -110,14 +110,12 @@ font-family: 'PingFang SC'; font-weight: 400; font-size: 14px; - line-height: 1.71em; color: #000000; border: none; background: transparent; outline: none; resize: none; - - min-height: 120px; + height: 100px; &::placeholder { color: rgba(60, 60, 67, 0.3); @@ -125,8 +123,6 @@ // 名字输入特殊样式 &.nickname_input { - min-height: 80px; - min-height: 20px; height: 20px; line-height: 20px; padding: 0; @@ -163,7 +159,7 @@ // 底部按钮 .modal_footer { - padding: 8px 10px; + padding: 8px 10px 20px; display: flex; gap: 8px; diff --git a/src/components/EditModal/index.tsx b/src/components/EditModal/index.tsx index 3fb59b6..6f7f211 100644 --- a/src/components/EditModal/index.tsx +++ b/src/components/EditModal/index.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import { View, Text, Textarea, Input, Picker } from '@tarojs/components'; import Taro from '@tarojs/taro'; import './EditModal.scss'; +import { useKeyboardHeight } from '@/store/keyboardStore' interface EditModalProps { visible: boolean; @@ -29,6 +30,22 @@ const EditModal: React.FC = ({ const [value, setValue] = useState(initialValue); const [isValid, setIsValid] = useState(true); + // 使用全局键盘状态 + const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight() + // 使用全局键盘状态监听 + useEffect(() => { + // 初始化全局键盘监听器 + initializeKeyboardListener() + + // 添加本地监听器 + const removeListener = addListener((height, visible) => { + console.log('AiImportPopup 收到键盘变化:', height, visible) + }) + + return () => { + removeListener() + } + }, [initializeKeyboardListener, addListener]) useEffect(() => { if (visible) { setValue(initialValue); @@ -38,7 +55,7 @@ const EditModal: React.FC = ({ const handle_input_change = (e: any) => { const new_value = e.detail.value; setValue(new_value); - + // 验证输入 const valid = new_value.length >= 2 && new_value.length <= maxLength; setIsValid(valid); @@ -68,7 +85,7 @@ const EditModal: React.FC = ({ return ( - + {/* 标题栏 */} {title} @@ -85,33 +102,34 @@ const EditModal: React.FC = ({ {/* 文本输入区域 */} - {type === 'nickname' ? ( - - ) : ( - <> -