From 7cea671430a9569307ff7f68525e4704f31deb47 Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Tue, 16 Apr 2024 15:07:12 +0800
Subject: [PATCH] =?UTF-8?q?update(Comment):=20=E6=8F=90=E4=BA=A4=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Comment/MainComment/CommentItem.tsx       |  9 ++++---
 .../Comment/SubComment/SubCommentForm.tsx     | 24 ++++++++++---------
 src/components/Login/LoginForm.tsx            |  4 ++--
 src/components/ui/button.tsx                  |  1 -
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/Comment/MainComment/CommentItem.tsx b/src/components/Comment/MainComment/CommentItem.tsx
index 759dbe3..c5c24ed 100644
--- a/src/components/Comment/MainComment/CommentItem.tsx
+++ b/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;
   };
 
diff --git a/src/components/Comment/SubComment/SubCommentForm.tsx b/src/components/Comment/SubComment/SubCommentForm.tsx
index 5a0da4b..ffb1c91 100644
--- a/src/components/Comment/SubComment/SubCommentForm.tsx
+++ b/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}
-        className="w-[80px] h-[35px] mt-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
-        onClick={handleSubmit}
+        disabled={loading || !value.trim()}
+        className="w-[80px] h-[35px] my-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
+        onClick={debounce(handleSubmit)}
       >
         确定
       </Button>
diff --git a/src/components/Login/LoginForm.tsx b/src/components/Login/LoginForm.tsx
index c850035..50057a6 100644
--- a/src/components/Login/LoginForm.tsx
+++ b/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>
   );
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 9df0d74..7eaaf16 100644
--- a/src/components/ui/button.tsx
+++ b/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';