update(Comment): 提交评论

src/components/Comment/MainComment/CommentItem.tsx

@@ -5,9 +5,10 @@ import { useState, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
 import ButtonBar from '../ButtonBar';
-import CommentContent from './CommentContent';
 import SubCommentForm from '../SubComment/SubCommentForm';
-import SubCommentItem from './CommentItem';
+import SubCommentItem from '../SubComment/SubCommentItem';
+
+import CommentContent from './CommentContent';
 
 import { Avatar } from '@/components';
 import { apiCommentThumbup, apiCommentSave, apiGetSubComment, apiCommentDelete } from '@/services';
@@ -60,7 +61,9 @@ export default function CommentItem({
   // 提交回复
   const handleReplySubmit = async (value: string) => {
     const res = await apiCommentSave({ content: value, journalId: journalId, parentId: _id });
-    if (res.code === 200) setShowInput(false);
+    if (res.code === 200) {
+      setShowInput(false);
+    }
     return res.code === 200;
   };
 

src/components/Comment/SubComment/SubCommentForm.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 /** 子评论输入框 */
-import { useState, useRef, useMemo, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
+
+import { debounce } from 'lodash';
 
 import { Avatar, Button } from '@/components';
 
@@ -18,15 +20,15 @@ export default function SubCommentForm({ nickName, avatar, className, onSubmit,
   const [value, setValue] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
 
-  const btnDisabled = useMemo(() => {
-    return loading && !value.trim();
-  }, [loading, value]);
-
   const handleSubmit = async () => {
-    if (!value) return;
+    if (!value.trim()) return;
+
     setLoading(true);
     const res = await onSubmit(value);
-    if (res) onClose();
+    if (res) {
+      onClose();
+    }
+
     setLoading(false);
   };
 
@@ -35,7 +37,7 @@ export default function SubCommentForm({ nickName, avatar, className, onSubmit,
   });
 
   return (
-    <form className={`${className}`} onBlur={onClose}>
+    <form className={`${className}`}>
       <div className={`flex flex-row items-center`}>
         <Avatar size={40} src={avatar} className="mr-[6px]" />
         <input
@@ -51,9 +53,9 @@ export default function SubCommentForm({ nickName, avatar, className, onSubmit,
 
       <Button
         type="primary"
-        disabled={btnDisabled}
+        disabled={loading || !value.trim()}
-        className="w-[80px] h-[35px] mt-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
+        className="w-[80px] h-[35px] my-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
-        onClick={handleSubmit}
+        onClick={debounce(handleSubmit)}
       >
         确定
       </Button>

src/components/Login/LoginForm.tsx

@@ -73,7 +73,7 @@ export default function LoginForm() {
   }, [time]);
 
   return (
-    <form autoComplete="on">
+    <div>
       <div className="w-full flex flex-col">
         <input
           className="w-full h-[56px] rounded-[100px] px-[39px] bg-[#fff] leading-[20px]"
@@ -115,6 +115,6 @@ export default function LoginForm() {
       </Button>
 
       <p className="mt-[16px] text-center text-brand text-[13px] leading-[18.2px]">{errorText}</p>
-    </form>
+    </div>
   );
 }

src/components/ui/button.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';