Feat: 新增评论组件，细化通知组件样式，引入环境变量，替换图标组件

2026-07-30 00:59:09 +08:00
parent d585fc909f
commit b66de3129d
18 changed files with 630 additions and 14 deletions
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { RiReplyFill, RiRobotFill } from "@remixicon/react";
+import CommentForm, { type CommentFormSubmitValues } from "../comment-form";
+
+interface CommentItemProps {
+  data: API.Comment.ICommentDetailData;
+  onSubmit: (values: CommentFormSubmitValues) => Promise<unknown>;
+}
+
+export default function CommentItem({ data, onSubmit }: CommentItemProps) {
+  const [active, setActive] = useState(false);
+
+  const onToggleCommentForm = () => setActive((prev) => !prev);
+
+  const onReplySubmit = (values: CommentFormSubmitValues) => {
+    return onSubmit(values).then(() => {
+      setActive(false);
+    });
+  };
+
+  return (
+    <div className="scroll-mt-28 mb-8 last:mb-0" id={`c${data.uuid}`}>
+      <div className="flex items-start gap-4 relative group">
+        <img
+          src={data.avatar || ""}
+          alt={data.name || ""}
+          className="w-12 h-12 rounded-xl bg-neutral-200 object-cover shrink-0"
+        />
+        <div className="flex-1 min-w-0">
+          <a
+            className="inline-block text-pink-400 font-medium mb-1 hover:underline"
+            href={data.site || "#"}
+            target="_blank"
+            rel="nofollow noreferrer"
+          >
+            {data.name}
+            {data.is_ai_bot && (
+              <span className="ml-2 text-cyan-500" title="AI 机器人评论">
+                <RiRobotFill className="size-4" />
+              </span>
+            )}
+          </a>
+          <p className="whitespace-pre-wrap text-neutral-600 leading-relaxed">
+            {data.content}
+            {data.status === "waiting" && (
+              <span className="text-neutral-400">（审核中）</span>
+            )}
+          </p>
+        </div>
+        <button
+          className="absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition-opacity text-pink-400 hover:text-pink-600 cursor-pointer"
+          onClick={onToggleCommentForm}
+          title="回复"
+        >
+          <RiReplyFill className="size-4" />
+        </button>
+      </div>
+
+      {active && (
+        <div className="mt-4 ml-16">
+          <CommentForm
+            parent={data.uuid}
+            root={data.root || data.uuid}
+            onSubmit={onReplySubmit}
+          />
+        </div>
+      )}
+
+      {data.children && data.children.length > 0 && (
+        <div className="mt-4 ml-4 md:ml-16 pl-4 border-l-2 border-cyan-200">
+          {data.children.map((item) => (
+            <CommentItem key={item.uuid} data={item} onSubmit={onSubmit} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}