1

2025-09-07 13:26:43 +08:00
parent 9830cd4b2d
commit 8fdee42ab8
7 changed files with 726 additions and 296 deletions
--- a/src/components/EditModal/index.tsx
+++ b/src/components/EditModal/index.tsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Textarea, Button } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './EditModal.scss';
+
+interface EditModalProps {
+  visible: boolean;
+  title: string;
+  placeholder: string;
+  initialValue: string;
+  maxLength: number;
+  onSave: (value: string) => void;
+  onCancel: () => void;
+  validationMessage?: string;
+}
+
+const EditModal: React.FC<EditModalProps> = ({
+  visible,
+  title,
+  placeholder,
+  initialValue,
+  maxLength,
+  onSave,
+  onCancel,
+  validationMessage
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const [isValid, setIsValid] = useState(true);
+
+  useEffect(() => {
+    if (visible) {
+      setValue(initialValue);
+    }
+  }, [visible, initialValue]);
+
+  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);
+  };
+
+  const handle_save = () => {
+    if (!isValid) {
+      Taro.showToast({
+        title: validationMessage || `请填写 2-${maxLength} 个字符`,
+        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">
+        {/* 标题栏 */}
+        <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">
+            <Textarea
+              className="text_input"
+              value={value}
+              placeholder={placeholder}
+              maxlength={maxLength}
+              onInput={handle_input_change}
+              autoFocus={true}
+            />
+            <View className="char_count">
+              <Text className="count_text">{value.length}/{maxLength}</Text>
+            </View>
+          </View>
+
+          {/* 验证提示 */}
+          {!isValid && (
+            <View className="validation_message">
+              <Text className="validation_text">
+                {validationMessage || `请填写 2-${maxLength} 个字符`}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {/* 底部按钮 */}
+        <View className="modal_footer">
+          <View className="save_button" onClick={handle_save}>
+            <Text className="save_text">保存</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default EditModal;