mini-programs/src/components/EditModal/index.tsx

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;
  title: string;
  type: string;
  placeholder: string;
  initialValue: string;
  maxLength: number;
  onSave: (value: string) => void;
  onCancel: () => void;
  validationMessage?: string;
}

const EditModal: React.FC<EditModalProps> = ({
  visible,
  title,
  type,
  placeholder,
  initialValue,
  maxLength,
  onSave,
  onCancel,
  validationMessage
}) => {
  const [value, setValue] = useState(initialValue);
  const [isValid, setIsValid] = useState(true);
  const [isIllegal, setIsIllegal] = useState(false);

  // 使用全局键盘状态
  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);
      const valid = initialValue.length >= 2 && initialValue.length <= maxLength;
      setIsValid(valid);
    }
  }, [visible, initialValue]);

  const handle_input_change = (e: any) => {
    const new_value = e.detail.value;
    setValue(new_value);

    const illegal = /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|CREATE|EXEC|DECLARE)\b|('|--|\/\*|\*\/|;|#)|(=|'|"|`|\\|\|\|&&)|\bOR\s+['"]?[\w]+['"]?\s*=\s*['"]?[\w]+['"]?|\bUNION\s+SELECT\b|\bDROP\s+TABLE\b|\bINSERT\s+INTO\b|\bUPDATE\s+[\w]+\s+SET\b|\bDELETE\s+FROM\b/i.test(new_value)
    setIsIllegal(illegal)
    // 验证输入
    const valid = new_value.length >= 2 && new_value.length <= maxLength;
    setIsValid(valid);
  };

  const handle_save = () => {
    if (!isValid) {
      Taro.showToast({
        title: validationMessage || `请填写 2-${maxLength} 个字符`,
        icon: 'none',
        duration: 2000
      });
      return;
    }
    if (isIllegal) {
      Taro.showToast({
        title: "输入的字符非法",
        icon: 'none',
        duration: 2000
      });
      return;
    }
    onSave(value);
  };

  const handle_cancel = () => {
    setValue(initialValue);
    onCancel();
  };

  if (!visible) {
    return null;
  }

  return (
    <View className="edit_modal_overlay">
      <View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight}px`) : undefined }}>
        {/* 标题栏 */}
        <View className="modal_header">
          <Text className="modal_title">{title}</Text>
          <View className="close_button" onClick={handle_cancel}>
            <View className="close_icon">
              <View className="close_line"></View>
              <View className="close_line"></View>
            </View>
          </View>
        </View>

        {/* 内容区域 */}
        <View className="modal_content">
          {/* 文本输入区域 */}
          <View className="input_container">

            {type === 'nickname' ? (
              <>
                <Input
                  className="text_input nickname_input"
                  value={value}
                  type="nickname"
                  placeholder={placeholder}
                  // maxlength={maxLength}
                  onInput={handle_input_change}
                  adjustPosition={false}
                  confirmType="done"
                  autoFocus={true}
                />
                <View className="char_count">
                  <Text className={`count_text ${value.length > maxLength && "un-valid"}`}>{value.length}/{maxLength}</Text>
                </View>
              </>
            ) : (
              <>
                <Textarea
                  className="text_input"
                  value={value}
                  placeholder={placeholder}
                  // maxlength={maxLength}
                  onInput={handle_input_change}
                  autoFocus={true}
                  adjustPosition={false}
                />
                <View className="char_count">
                  <Text className={`count_text ${value.length > maxLength && "un-valid"}`}>{value.length}/{maxLength}</Text>
                </View>
              </>
            )}
          </View>

          {/* 验证提示 */}
          {
            isIllegal ?
              <View className="validation_message">
                <Text className="validation_text illegal">
                  输入的字符非法
                </Text>
              </View> :
              !isValid && (
                <View className="validation_message">
                  <Text className="validation_text">
                    {validationMessage || `请填写 2-${maxLength} 个字符`}
                  </Text>
                </View>
              )
          }
        </View>

        {/* 底部按钮 */}
        <View className="modal_footer">
          <View className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`} onClick={handle_save}>
            <Text className="save_text">保存</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default EditModal;