UI优化

src/components/EditModal/EditModal.scss

@@ -34,7 +34,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
+  padding: 16px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 
   .modal_title {
@@ -43,7 +43,6 @@
     font-size: 22px;
     line-height: 1.27em;
     color: #000000;
-    flex: 1;
     text-align: center;
   }
 
@@ -68,8 +67,9 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        width: 10px;
-        height: 2px;
+        width: 17px;
+        height: 3px;
+        border-radius: 3px;
         background: #000000;
         transform: translate(-50%, -50%) rotate(45deg);
 
@@ -176,12 +176,18 @@
     box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(32px);
 
+    &.disabled {
+      .save_text {
+        color: rgba(255, 255, 255, 0.3) !important;
+      }
+    }
+
     .save_text {
       font-family: 'PingFang SC';
       font-weight: 600;
       font-size: 16px;
       line-height: 1.4em;
-      color: rgba(255, 255, 255, 0.3);
+      color: #fff
     }
 
     &:active {

src/components/EditModal/index.tsx

@@ -49,6 +49,8 @@ const EditModal: React.FC<EditModalProps> = ({
   useEffect(() => {
     if (visible) {
       setValue(initialValue);
+      const valid = initialValue.length >= 2 && initialValue.length <= maxLength;
+      setIsValid(valid);
     }
   }, [visible, initialValue]);
 
@@ -70,7 +72,6 @@ const EditModal: React.FC<EditModalProps> = ({
       });
       return;
     }
-
     onSave(value);
   };
 
@@ -85,7 +86,7 @@ const EditModal: React.FC<EditModalProps> = ({
 
   return (
     <View className="edit_modal_overlay">
-      <View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight }px`) : undefined }}>
+      <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>
@@ -144,7 +145,7 @@ const EditModal: React.FC<EditModalProps> = ({
 
         {/* 底部按钮 */}
         <View className="modal_footer">
-          <View className="save_button" onClick={handle_save}>
+          <View className={`save_button ${!isValid ? "disabled" : ""}`} onClick={handle_save}>
             <Text className="save_text">保存</Text>
           </View>
         </View>