diff --git a/public/img/icon/like-active.svg b/public/img/icon/like-active.svg
new file mode 100644
index 0000000..f78158f
--- /dev/null
+++ b/public/img/icon/like-active.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.74229 18.4016H6.82182C6.48226 18.4016 6.15661 18.2667 5.9165 18.0266C5.67639 17.7865 5.5415 17.4609 5.5415 17.1213V12.6402C5.5415 12.3006 5.67639 11.975 5.9165 11.7349C6.15661 11.4948 6.48226 11.3599 6.82182 11.3599H8.74229M13.2234 10.0795V7.51891C13.2234 7.00957 13.0211 6.52109 12.6609 6.16093C12.3007 5.80077 11.8123 5.59843 11.3029 5.59843L8.74229 11.3599V18.4016H15.9633C16.272 18.4051 16.5717 18.2969 16.8069 18.0969C17.0422 17.8969 17.1973 17.6186 17.2436 17.3133L18.127 11.5519C18.1549 11.3684 18.1425 11.1811 18.0907 11.0028C18.039 10.8246 17.9491 10.6597 17.8273 10.5197C17.7055 10.3796 17.5548 10.2677 17.3854 10.1917C17.2161 10.1157 17.0323 10.0774 16.8467 10.0795H13.2234Z" stroke="#B44343" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/icon/like.svg b/public/img/icon/like.svg
new file mode 100644
index 0000000..5127207
--- /dev/null
+++ b/public/img/icon/like.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.74229 18.4016H6.82182C6.48226 18.4016 6.15661 18.2667 5.9165 18.0266C5.67639 17.7865 5.5415 17.4609 5.5415 17.1213V12.6402C5.5415 12.3006 5.67639 11.975 5.9165 11.7349C6.15661 11.4948 6.48226 11.3599 6.82182 11.3599H8.74229M13.2234 10.0796V7.51893C13.2234 7.00958 13.0211 6.5211 12.6609 6.16094C12.3007 5.80079 11.8123 5.59845 11.3029 5.59845L8.74229 11.3599V18.4016H15.9633C16.272 18.4051 16.5717 18.2969 16.8069 18.0969C17.0422 17.8969 17.1973 17.6187 17.2436 17.3134L18.127 11.5519C18.1549 11.3684 18.1425 11.1811 18.0907 11.0028C18.039 10.8246 17.9491 10.6597 17.8273 10.5197C17.7055 10.3796 17.5548 10.2677 17.3854 10.1917C17.2161 10.1157 17.0323 10.0775 16.8467 10.0796H13.2234Z" stroke="black" stroke-opacity="0.7" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index 7fdd800..78882c0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,6 +26,10 @@ input {
   outline: none;
 }
 
+textarea {
+  outline: none;
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index b0f322c..20dff32 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 const Avatar = ({ src, alt = 'avatar', size, className = '' }: Props) => {
   return (
-    <div className={`rounded-[50%] bg-[#fff] overflow-hidden ${className}`} style={{ width: size, height: size }}>
+    <div className={`rounded-full bg-[#fff] overflow-hidden ${className}`} style={{ width: size, height: size }}>
       <Image className="w-full h-full object-cover" width={size} height={size} src={src} alt={alt} unoptimized />
     </div>
   );
diff --git a/src/components/Comment/ButtonBar.tsx b/src/components/Comment/ButtonBar.tsx
new file mode 100644
index 0000000..8e3cc28
--- /dev/null
+++ b/src/components/Comment/ButtonBar.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+
+interface Props {
+  commentCount: number;
+  thumbupCount: number;
+  haveThumbup: boolean;
+  className?: string;
+  onShowInput: () => void;
+  onShowAll: () => Promise<boolean>;
+  onThumbup: () => Promise<boolean>;
+}
+export default function ButtonBar({
+  commentCount,
+  thumbupCount,
+  haveThumbup,
+  className,
+  onShowAll,
+  onShowInput,
+  onThumbup,
+}: Props) {
+  const [showAll, setShowAll] = useState<boolean>(false);
+  const [thumbup, setThumbup] = useState<boolean>(false);
+
+  const handleShowAll = async () => {
+    const res = await onShowAll();
+    setShowAll(res);
+  };
+
+  const handleThumbup = async () => {
+    const res = await onThumbup();
+    if (res) setThumbup(!thumbup);
+  };
+
+  useEffect(() => {
+    setThumbup(haveThumbup);
+  }, []);
+
+  return (
+    <div className={`flex flex-row items-start gap-[18px] ${className}`}>
+      {/* 回复 */}
+      <div
+        className="pt-[3px] text-[14px] leading-[19.6px] text-[rgba(0,0,0,0.4)] hover:text-theme cursor-pointer"
+        onClick={onShowInput}
+      >
+        回复
+      </div>
+      {/* 展开回复 */}
+      {commentCount > 1 && !showAll && (
+        <div className="pt-[3px] text-theme text-[14px] leading-[19.6px] cursor-pointer" onClick={handleShowAll}>
+          展开{commentCount}条回复
+        </div>
+      )}
+      {/* 点赞 */}
+      <div className="flex flex-row items-center 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">
+            {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)]]`}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 1d5e76e..8b56c23 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -1,20 +1,56 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
 import { CommentForm, CommentHeader, CommentList } from '@/components';
+import { apiGetComment, apiCommentSave } from '@/services';
+
+interface Props {
+  journalId: string;
+  className: string;
+  totalCommentReply: string;
+}
+
+export default function Comment({ journalId, className, totalCommentReply }: Props) {
+  const [commentType, setCommentType] = useState<'hot' | 'new'>('hot');
+  const [commentList, setCommentList] = useState<Comment[]>([]);
+  const [page, setPage] = useState<number>(1);
+
+  // 切换热门/最新
+  const handleChangeType = async (type: 'hot' | 'new') => {
+    setCommentType(type);
+    setPage(1);
+  };
+
+  // 发表评论
+  const handleSubmit = async (content: string) => {
+    const res = await apiCommentSave({ journalId, parentId: '', content });
+    return res.code === 200;
+  };
+
+  useEffect(() => {
+    const getCommentList = async () => {
+      if (page === 1) setCommentList([]);
+      const res = await apiGetComment({ type: commentType, journalId, page, size: 3 });
+      if (res.code === 200 && res.data?.rows.length) {
+        setCommentList([...commentList, ...res.data.rows]);
+      }
+    };
+
+    getCommentList();
+  }, [commentType, page]);
 
-export default function Comment({
-  commentList,
-  className,
-  totalCommentReply,
-}: {
-  commentList: any;
-  className?: string;
-  totalCommentReply: number;
-}) {
   return (
     <div className={className}>
-      <CommentForm />
+      <CommentForm onSubmit={handleSubmit} />
       {!!totalCommentReply && (
         <>
-          <CommentHeader count={totalCommentReply} />
+          <CommentHeader
+            type={commentType}
+            count={totalCommentReply}
+            onChange={(type: 'hot' | 'new') => handleChangeType(type)}
+            clssName="mt-[25px]"
+          />
           <CommentList commentList={commentList} />
         </>
       )}
diff --git a/src/components/Comment/CommentForm.tsx b/src/components/Comment/CommentForm.tsx
index 590a6a5..e915333 100644
--- a/src/components/Comment/CommentForm.tsx
+++ b/src/components/Comment/CommentForm.tsx
@@ -1,3 +1,42 @@
-export default function CommentItem() {
-  return <div></div>;
+'use client';
+
+import { useState } from 'react';
+
+import { Button } from '@/components';
+
+interface Props {
+  onSubmit: (value: string) => Promise<boolean>;
+}
+
+export default function CommentItem({ onSubmit }: Props) {
+  const [value, setValue] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    await onSubmit(value);
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      <textarea
+        value={value}
+        cols={30}
+        rows={10}
+        disabled={loading}
+        placeholder="发布评论"
+        className="w-[712px] h-[89px] p-[15px] radounded-[3px] bg-[#F2F3F7] text-[15px] leading-[21px] resize-none"
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <Button
+        type="primary"
+        disabled={loading || !value}
+        className="w-[80px] h-[35px] my-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
+        onClick={handleSubmit}
+      >
+        确定
+      </Button>
+    </div>
+  );
 }
diff --git a/src/components/Comment/CommentHeader.tsx b/src/components/Comment/CommentHeader.tsx
index 5336992..e0330d9 100644
--- a/src/components/Comment/CommentHeader.tsx
+++ b/src/components/Comment/CommentHeader.tsx
@@ -1,15 +1,35 @@
-export default function CommentHeader({ count }: { count: number }) {
+export default function CommentHeader({
+  type,
+  count,
+  clssName,
+  onChange,
+}: {
+  type: 'hot' | 'new';
+  count: string;
+  clssName: string;
+  onChange: (value: 'hot' | 'new') => void;
+}) {
   return (
-    <div className="flex flex-row items-center justify-between">
+    <div className={`flex flex-row items-center justify-between mb-[10px] ${clssName}`}>
       <div className="flex flex-row items-center text-[15px] leading-[21px] gap-[12px]">
         <div className="text-base">全部评论</div>
         <div className="text-[rgba(0,0,0,0.4)]">{`${count}条`}</div>
       </div>
 
       <div className="flex flex-row items-center text-[14px] leading-[19.6px] gap-[12px]">
-        <div>热门</div>
-        <div className="text-[rgba(0,0,0,0.4)]">|</div>
-        <div className="text-[rgba(0,0,0,0.4)]">最新</div>
+        <div
+          className={`${type === 'hot' ? 'text-base' : 'text-[rgba(0,0,0,0.4)] hover:text-theme cursor-pointer'}`}
+          onClick={() => onChange('hot')}
+        >
+          热门
+        </div>
+        <div className="text-[rgba(0,0,0,0.4)] cursor-pointer hover:text-theme">|</div>
+        <div
+          className={`${type === 'new' ? 'text-base' : 'text-[rgba(0,0,0,0.4)] hover:text-theme cursor-pointer'}`}
+          onClick={() => onChange('new')}
+        >
+          最新
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Comment/CommentInput.tsx b/src/components/Comment/CommentInput.tsx
new file mode 100644
index 0000000..4884b4a
--- /dev/null
+++ b/src/components/Comment/CommentInput.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+/** 评论输入框 */
+import { useState, useRef, useMemo, useEffect } from 'react';
+
+import { Avatar, Button, Input } from '@/components';
+
+interface Props {
+  nickName: string;
+  avatar: string;
+  className?: string;
+  onSubmit: (value: string) => Promise<boolean>;
+}
+
+export default function CommentInput({ nickName, avatar, className, onSubmit }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const btnDisabled = useMemo(() => {
+    return loading && !value;
+  }, [loading, value]);
+
+  const handleReplySubmit = async () => {
+    if (!value) return;
+    setLoading(true);
+    await onSubmit(value);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    inputRef.current && inputRef.current.focus();
+  });
+
+  return (
+    <div className={`${className}`}>
+      <div className={`flex flex-row items-center`}>
+        <Avatar size={40} src={avatar} className="mr-[6px]" />
+        <input
+          ref={inputRef}
+          type="text"
+          disabled={loading}
+          value={value}
+          placeholder={` 回复 ${nickName}`}
+          onChange={(e) => setValue(e.target.value)}
+          className="w-[600px] h-[48px] px-[14px] rounded-[3px] bg-[#F2F3F7] text-[rgba(0,0,0,0.4)] text-[14px] leading-[19.6px]"
+        />
+      </div>
+      <Button
+        type="primary"
+        disabled={btnDisabled}
+        className="w-[80px] h-[35px] mt-[15px] rounded-[16px] text-[13px] leading-[18.2px]"
+        onClick={handleReplySubmit}
+      >
+        确定
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/Comment/CommentItem.tsx b/src/components/Comment/CommentItem.tsx
index 590a6a5..5ded39f 100644
--- a/src/components/Comment/CommentItem.tsx
+++ b/src/components/Comment/CommentItem.tsx
@@ -1,3 +1,102 @@
-export default function CommentItem() {
-  return <div></div>;
+'use client';
+
+import { useState, useRef } from 'react';
+
+import ButtonBar from './ButtonBar';
+import CommentInput from './CommentInput';
+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,
+  nickName,
+  publishTime,
+  location,
+  content,
+  haveThumbup,
+  thumbupCount,
+  commentCount,
+  topChildrenComment,
+  journalId,
+  className,
+}: Comment & { className?: string }) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [showAll, setShowAll] = useState<boolean>(false);
+  const [showInput, setShowInput] = useState<boolean>(false);
+  const [subCommentList, setSubCommentList] = useState<Comment[]>(topChildrenComment ? [topChildrenComment] : []);
+
+  // 展示全部评论
+  const handleShowAll = async () => {
+    setShowAll(true);
+    const res = await apiGetSubComment({ parentId: _id, size: commentCount, page: 1 });
+    if (res.code === 200) setSubCommentList(res.data.rows);
+    return res.code === 200;
+  };
+
+  // 展示回复框
+  const handleShowInput = () => {
+    setShowInput(true);
+    inputRef.current && inputRef.current.focus();
+  };
+
+  // 提交回复
+  const handleReplySubmit = async (value: string) => {
+    const res = await apiCommentSave({ content: value, journalId: journalId, parentId: _id });
+    if (res.code === 200) setShowInput(false);
+    return res.code === 200;
+  };
+
+  // 点赞
+  const handleThumbup = async () => {
+    const res = await apiCommentThumbup(_id);
+    return res.code === 200;
+  };
+
+  return (
+    <div className={`${className}`}>
+      {/* 一级评论 */}
+      <div className={`flex flex-row flex-shrink`}>
+        <Avatar size={40} src={avatar} />
+        <div className="ml-[15px]">
+          <div className="text-[rgba(0,0,0,0.7)] text-[13px] leading-[18.2px]">{nickName}</div>
+          <div className="mt-[4px] text-[rgba(0,0,0,0.4)] text-[10px] leading-[14px]">{`${publishTime} ${location}`}</div>
+          <div className="mt-[6px] w-[657px] text-base text-[14px] leading-[19.6spx] text-overflow">{content}</div>
+          {/* 子评论 */}
+          <div>
+            {subCommentList.length > 0 &&
+              subCommentList.map((subComment) => (
+                <SubCommentItem key={subComment._id} className="mt-[12px]" {...subComment} />
+              ))}
+          </div>
+        </div>
+      </div>
+      {/* 按钮 */}
+      <ButtonBar
+        className={`mt-[15px] ${topChildrenComment ? 'ml-[79px]' : 'ml-[54px]'}`}
+        commentCount={commentCount}
+        thumbupCount={thumbupCount}
+        haveThumbup={haveThumbup}
+        onShowInput={handleShowInput}
+        onShowAll={handleShowAll}
+        onThumbup={handleThumbup}
+      />
+      {/* 回复 */}
+      {showInput && (
+        <CommentInput
+          nickName={nickName}
+          avatar={avatar}
+          className="mt-[25px] ml-[55px]"
+          onSubmit={handleReplySubmit}
+        />
+      )}
+    </div>
+  );
 }
diff --git a/src/components/Comment/CommentList.tsx b/src/components/Comment/CommentList.tsx
index a1ba10e..690817c 100644
--- a/src/components/Comment/CommentList.tsx
+++ b/src/components/Comment/CommentList.tsx
@@ -1,3 +1,10 @@
+import CommentItem from './CommentItem';
+
 export default function CommentList({ commentList }: { commentList: Comment[] }) {
-  return <div></div>;
+  return (
+    <div>
+      {commentList.length > 0 &&
+        commentList.map((comment) => <CommentItem key="_id" {...comment} className="py-[20px]" />)}
+    </div>
+  );
 }
diff --git a/src/components/Comment/CommentSubInput.tsx b/src/components/Comment/CommentSubInput.tsx
new file mode 100644
index 0000000..83aa37f
--- /dev/null
+++ b/src/components/Comment/CommentSubInput.tsx
@@ -0,0 +1,10 @@
+/** 子评论输入框 */
+import { Avatar } from '@/components';
+
+export default function CommentSubInput() {
+  return (
+    <div>
+      <Avatar />
+    </div>
+  );
+}
diff --git a/src/components/Comment/CommentSubItem.tsx b/src/components/Comment/CommentSubItem.tsx
new file mode 100644
index 0000000..f53c88f
--- /dev/null
+++ b/src/components/Comment/CommentSubItem.tsx
@@ -0,0 +1,26 @@
+import { Avatar } from '@/components';
+
+export default function SubCommentItem({
+  avatar,
+  nickName,
+  publishTime,
+  location,
+  content,
+  className,
+}: Comment & { className?: string }) {
+  return (
+    <div className={`w-[655px] ${className}`}>
+      <div className="flex flex-row">
+        <Avatar size={20} src={avatar} />
+        <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>
+            {/* 归属地 */}
+          </div>
+          <div className="mt-[4px] text-[rgba(0,0,0,0.4)] text-[10px] leading-[14px]">{`${publishTime} ${location}`}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Header/HeaderAvatar.tsx b/src/components/Header/HeaderAvatar.tsx
index 39e3b3f..170d042 100644
--- a/src/components/Header/HeaderAvatar.tsx
+++ b/src/components/Header/HeaderAvatar.tsx
@@ -15,10 +15,9 @@ export default function HeaderAvatar({ className }: { className?: string }) {
 
   return (
     <div className={`${className}`}>
-      {/* 已登录 展示头像 */}
-      {!!userInfo.id && <Avatar size={36} src={userInfo.avatar} className="cursor-pointer" />}
-      {/* 未登录 展示按钮 */}
-      {!userInfo.id && (
+      {!!userInfo.id ? (
+        <Avatar size={36} src={userInfo.avatar} className="cursor-pointer" />
+      ) : (
         <button
           className="w-[74px] h-[36px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-theme hover:border-theme hover:text-[#fff] "
           onClick={() => setShowLogin(true)}
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index f4e0da1..af7ce86 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -8,6 +8,8 @@ const Input = ({
 }: {
   type: string;
   value: string | number;
+  width?: string;
+  height?: string;
   placeholder?: string;
   maxLength?: number;
   className?: string;
@@ -15,7 +17,7 @@ const Input = ({
 }) => {
   return (
     <input
-      className={`w-full h-[56px] py-[18px] pl-[39px] rounded-[100px] px-[14px] bg-[#F2F3F7] leading-[20px] ${className}`}
+      className={`w-full h-[56px] rounded-[100px] px-[14px] bg-[#F2F3F7] leading-[20px] ${className}`}
       type={type}
       value={value}
       placeholder={placeholder}
diff --git a/src/components/index.ts b/src/components/index.ts
index d0213ac..b3655b4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -37,5 +37,5 @@ export { default as CommentHeader } from './Comment/CommentHeader';
 export { default as CommentForm } from './Comment/CommentForm';
 export { default as CommentItem } from './Comment/CommentItem';
 export { default as CommentList } from './Comment/CommentList';
-
-export { default as Coolect } from './Collect';
+export { default as Collect } from './Collect';
+export { default as Thumb } from './Thumb';
diff --git a/src/services/client/comment.ts b/src/services/client/comment.ts
new file mode 100644
index 0000000..cff24fa
--- /dev/null
+++ b/src/services/client/comment.ts
@@ -0,0 +1,73 @@
+import clientHttp from '@/utils/request/client';
+
+interface CommentRequest {
+  journalId: string;
+  page: number;
+  size: number;
+}
+
+export const apiGetCommentHot = async ({ journalId, page, size }: CommentRequest) => {
+  const result: FetchResponse<Paging<Comment>> = await clientHttp.get(
+    `/queyueapi/luoo-comment/comment/hot/${journalId}/${page}/${size}`,
+  );
+  return result;
+};
+
+export const apiGetCommentNew = async ({ journalId, page, size }: CommentRequest) => {
+  const result: FetchResponse<Paging<Comment>> = await clientHttp.get(
+    `/queyueapi/luoo-comment/comment/new/${journalId}/${page}/${size}`,
+  );
+  return result;
+};
+
+/**
+ * @description 根据期刊ID获取分页评论列表（热门）,按点赞数倒序
+ * 根据期刊ID获取根节点评论分页列表，
+ * 数据库中保存的有期刊号的都是根节点，
+ * 期刊号为空的代表有父评论且parentID一定有值，
+ * 拿到当然根节点评论列表，每个根评论有 commentCount字段，
+ * 页面可以显示有 280个回复，然后根据 @GetMapping("/comment/{parentId}/{page}/{size}") 接口，
+ * 分页拿到该评论下的子评论列表，页面在请求添加评论的时候，当给评论添加子评论的时候，父评论parentID有值，就无法添加子评论并且不显示回复2字，控制到两级
+ * @type 类型 热门: hot 最新: new
+ * @journalId 期刊id
+ * @page 分页: 页码，以1开始
+ * @size 分页: 每页数量
+ */
+export const apiGetComment = async ({ type, journalId, page, size }: CommentRequest & { type: 'hot' | 'new' }) => {
+  const fn = {
+    hot: apiGetCommentHot,
+    new: apiGetCommentNew,
+  };
+  const res: FetchResponse<Paging<Comment>> = await fn[type]({ journalId, page, size });
+  return res;
+};
+
+/**
+ * @description 获取评论下的子评论列表
+ * @
+ */
+export const apiGetSubComment = async ({ parentId, page, size }: { parentId: string; page: number; size: number }) => {
+  const result: FetchResponse<Paging<Comment>> = await clientHttp.get(
+    `/queyueapi/luoo-comment/comment/comment/${parentId}/${page}/${size}`,
+  );
+  return result;
+};
+
+/**
+ * @description 点赞/取消点赞评论
+ */
+export const apiCommentThumbup = async (commentId: string) => {
+  const result: FetchResponse<string> = await clientHttp.put(`/luoo-comment/comment/thumbup/${commentId}`);
+  return result;
+};
+
+/**
+ * @description 添加评论
+ * @content 评论内容
+ * @journalId 期刊id
+ * @parentId 父评论id
+ */
+export const apiCommentSave = async (params: { content: string; journalId: string; parentId: string }) => {
+  const result: FetchResponse<string> = await clientHttp.post(`/luoo-comment/comment`, params);
+  return result;
+};
diff --git a/src/services/client/operate.ts b/src/services/client/operate.ts
index 5b7ba3d..98934ae 100644
--- a/src/services/client/operate.ts
+++ b/src/services/client/operate.ts
@@ -18,7 +18,6 @@ export const apiCollectAdd = async (params: { objectId: string; collectType: str
 export const apiCollectRemove = async ({ objectId, collectType }: { objectId: string; collectType: string }) => {
   const result: FetchResponse<string> = await clientHttp.delete(
     `/queyueapi/user/collect?objectId=${objectId}&collectType=${collectType}`,
-    {},
   );
   return result;
 };
diff --git a/src/services/index.ts b/src/services/index.ts
index 4fe3b19..7267461 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -10,3 +10,4 @@ export * from './server/journal';
  */
 export * from './client/user';
 export * from './client/operate';
+export * from './client/comment';
diff --git a/src/services/server/journal.ts b/src/services/server/journal.ts
index 75787a4..01267cc 100644
--- a/src/services/server/journal.ts
+++ b/src/services/server/journal.ts
@@ -14,7 +14,7 @@ export const apiJournalList: (params: {
   journalNoRange?: string;
   pageNum?: number;
   pageSize?: number;
-}) => Promise<FetchResponse<JournalList>> = async ({
+}) => Promise<FetchResponse<Paging<JournalInfo>>> = async ({
   categoryId = '',
   journalNoRange = '',
   pageNum = 1,
diff --git a/src/types/reqeust.d.ts b/src/types/reqeust.d.ts
index c13fb25..d47632d 100644
--- a/src/types/reqeust.d.ts
+++ b/src/types/reqeust.d.ts
@@ -4,6 +4,11 @@ declare interface FetchResponse<T> {
   data: T;
 }
 
+declare interface Paging<T> {
+  total: number;
+  rows: T[];
+}
+
 /**
  * @description 分类
  */
@@ -22,32 +27,6 @@ declare interface Category {
   description: string;
 }
 
-/**
- * @description 期刊列表
- */
-declare interface JournalList {
-  total: number;
-  rows: JournalInfo[];
-}
-
-/**
- * @description 评论
- */
-declare interface Comment {
-  _id: string;
-  avatar: string;
-  commentCount: number;
-  content: string;
-  journalId: string;
-  location: string;
-  nickName: string;
-  parentId: string;
-  publishTime: string;
-  state: number;
-  thumbupCount: number;
-  userId: string;
-}
-
 /**
  * @description 歌曲信息
  */
@@ -149,3 +128,47 @@ declare interface UserInfo {
   /** 获赞数 */
   thumbUpCount: number;
 }
+
+/** 评论信息 */
+interface Comment {
+  /** 评论ID */
+  _id: string;
+  /** 内容 */
+  content: string;
+  /** 发布时间 */
+  publishTime: string;
+  /** 发布者ID */
+  userId: string;
+  /** 发布者昵称 */
+  nickName: string;
+  /** 发布者头像链接 */
+  avatar: string;
+  /** 点赞数 */
+  thumbupCount: number;
+  /** 评论数 */
+  commentCount: number;
+  /** 状态 */
+  state: number;
+  /** 属地 */
+  location: string;
+  /** 父评论ID，如果是顶级评论则为null */
+  parentId: string | null;
+  /** 日志ID */
+  journalId: string;
+  /** 是否点过赞 */
+  haveThumbup: boolean;
+  /** 根评论ID */
+  rootId: string;
+  /** 根日志ID */
+  rootJournalId: string;
+  /** 根日志名称 */
+  rootJournalName: string;
+  /** 回复的用户ID，如果不是回复则为null */
+  replyToUserId: string | null;
+  /** 回复的用户昵称，如果不是回复则为null */
+  replyToNickname: string | null;
+  /** 最顶级子评论，可选 */
+  topChildrenComment?: Comment;
+  /** 徽章列表 */
+  badgeList: number[];
+}
diff --git a/src/utils/request/client/index.ts b/src/utils/request/client/index.ts
index 648a2b8..4465443 100644
--- a/src/utils/request/client/index.ts
+++ b/src/utils/request/client/index.ts
@@ -1,6 +1,20 @@
 import { getAuthorization, handleResponse, createFormBody } from '@/utils/request/client/utils';
 import { IResponse } from '@/utils/request/type';
 
+export const get = async <T>(url: string, data: any = null, revalidate = 20): Promise<IResponse<T>> => {
+  const token = await getAuthorization();
+  const response = await fetch(url, {
+    headers: {
+      Authorization: token || '',
+    },
+    method: 'GET',
+    next: {
+      revalidate: revalidate,
+    },
+  });
+  return await handleResponse(response);
+};
+
 export const post = async <T>(url: string, data: any, revalidate = 20): Promise<IResponse<T>> => {
   const token = await getAuthorization();
   const response = await fetch(url, {
@@ -19,21 +33,25 @@ export const post = async <T>(url: string, data: any, revalidate = 20): Promise<
   return await handleResponse(response);
 };
 
-export const get = async <T>(url: string, data: any = null, revalidate = 20): Promise<IResponse<T>> => {
+export const remove = async <T>(url: string, data: any = {}, revalidate = 20): Promise<IResponse<T>> => {
   const token = await getAuthorization();
   const response = await fetch(url, {
     headers: {
       Authorization: token || '',
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      Connection: 'keep-alive',
     },
-    method: 'GET',
+    method: 'DELETE',
+    body: data && createFormBody(data),
     next: {
       revalidate: revalidate,
     },
   });
+
   return await handleResponse(response);
 };
 
-export const remove = async <T>(url: string, data: any, revalidate = 20): Promise<IResponse<T>> => {
+export const put = async <T>(url: string, data: any = {}, revalidate = 20): Promise<IResponse<T>> => {
   const token = await getAuthorization();
   const response = await fetch(url, {
     headers: {
@@ -41,7 +59,7 @@ export const remove = async <T>(url: string, data: any, revalidate = 20): Promis
       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
       Connection: 'keep-alive',
     },
-    method: 'DELETE',
+    method: 'PUT',
     body: data && createFormBody(data),
     next: {
       revalidate: revalidate,
@@ -67,8 +85,9 @@ export const uploadFile = async <T>(url: string, file: File): Promise<IResponse<
 
 const clientHttp = {
   get,
-  delete: remove,
   post,
+  delete: remove,
+  put,
   uploadFile,
 };
 export default clientHttp;