update(comment): Add tumb feature and check empty string when submit.

src/components/Comment/ButtonBar.tsx

@@ -27,6 +27,7 @@ export default function ButtonBar({
   };
 
   const handleThumbup = async () => {
+    setThumbup(!thumbup);
     const res = await onThumbup();
     if (res) setThumbup(!thumbup);
   };
@@ -51,14 +52,16 @@ export default function ButtonBar({
         </div>
       )}
       {/* 点赞 */}
-      <div className="flex flex-row items-center w-[49px] h-[24px] group cursor-pointer" onClick={handleThumbup}>
+      <div className="w-[49px] h-[24px] group cursor-pointer" onClick={handleThumbup}>
         {thumbupCount > 0 && (
-          <div className="mr-[2px] pt-[5px] text-[rgba(0,0,0,0.7)] text-[12px] leading-[16.8px] group-hover:text-theme">
+          <div
+            className={`float-left mr-[2px] pt-[5px] ${thumbup ? 'text-theme' : 'text-[rgba(0, 0, 0, 0.7)]'} text-[12px] leading-[16.8px] group-hover:text-theme`}
+          >
             {thumbupCount}
           </div>
         )}
         <div
-          className={`w-[24px] h-[24px] ${thumbup ? 'bg-[url(/img/icon/thumb-active.svg)]' : 'bg-[url(/img/icon/thumb.svg)]'} group-hover:bg-[bg-[url(/img/icon/thumb-active.svg)]]`}
+          className={`float-left w-[24px] h-[24px] ${thumbup ? 'bg-[url(/img/icon/thumb-active.svg)]' : 'bg-[url(/img/icon/thumb.svg)]'} group-hover:bg-[url(/img/icon/thumb-active.svg)]`}
         />
       </div>
     </div>

src/components/Comment/Comment.tsx

@@ -39,7 +39,6 @@ export default function Comment({ journalId, className, totalCommentReply, total
 
   // 加载评论
   const handleLoadMore = useCallback(async () => {
-    console.log(commentList.length, totalCommentReplyInt);
     if (commentList.length >= totalCommentReplyInt) return;
     if (loading) return;
     setLoading(true);

src/components/Comment/CommentForm.tsx

@@ -31,7 +31,7 @@ export default function CommentItem({ onSubmit }: Props) {
       />
       <Button
         type="primary"
-        disabled={loading || !value}
+        disabled={loading || !value.trim()}
         className="w-[80px] h-[35px] my-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
         onClick={handleSubmit}
       >

src/components/Comment/CommentInput.tsx

@@ -18,7 +18,7 @@ export default function CommentInput({ nickName, avatar, className, onSubmit }:
   const [loading, setLoading] = useState<boolean>(false);
 
   const btnDisabled = useMemo(() => {
-    return loading && !value;
+    return loading && !value.trim();
   }, [loading, value]);
 
   const handleReplySubmit = async () => {

src/components/Comment/CommentItem.tsx

@@ -9,11 +9,6 @@ import SubCommentItem from './CommentSubItem';
 import { Avatar } from '@/components';
 import { apiCommentThumbup, apiCommentSave, apiGetSubComment } from '@/services';
 
-// 回复
-const handleReply = async (params: { content: string; journalId: string; parentId: string }) => {
-  await apiCommentSave(params);
-};
-
 export default function CommentItem({
   _id,
   avatar,

src/components/Comment/CommentSubInput.tsx

@@ -1,10 +0,0 @@
-/** 子评论输入框 */
-import { Avatar } from '@/components';
-
-export default function CommentSubInput() {
-  return (
-    <div>
-      <Avatar />
-    </div>
-  );
-}

src/components/Comment/CommentSubItem.tsx

@@ -15,7 +15,7 @@ export default function SubCommentItem({
         <div className="ml-[5px]">
           <div className="w-[630px] text-[13px] leading-[20px] text-overflow">
             <span className="text-[rgba(0,0,0,0.4)]">{`${nickName}:  `}</span>
-            <span className="text-base">{content}</span>
+            <span className="text-base text-overflow">{content}</span>
             {/* 归属地 */}
           </div>
           <div className="mt-[4px] text-[rgba(0,0,0,0.4)] text-[10px] leading-[14px]">{`${publishTime} ${location}`}</div>