重构client，拆分组件

2025-10-22 20:14:11 +08:00
parent 5868407216
commit fe9bc8fd6c
23 changed files with 1601 additions and 1137 deletions
@@ -0,0 +1,56 @@
+import { ThumbsUp } from "lucide-react";
+import type { Comment, User } from "../types";
+import { formatRelativeTime } from "../utils";
+import { CommentText } from "./CommentText";
+
+interface CommentListProps {
+  author: User;
+  createdAt: string | Date;
+  comments: Comment[];
+}
+
+export function CommentList({ author, createdAt, comments }: CommentListProps) {
+  return (
+    <>
+      <header className="flex items-center gap-4 mb-5">
+        <div className="size-10 rounded-full overflow-hidden bg-zinc-700/60">
+          {author.avatar_url ? (
+            <img src={author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
+          ) : null}
+        </div>
+        <div>
+          <div className="font-medium text-white/95 text-sm sm:text-base">{author.nickname}</div>
+          <div className="text-xs text-white/50" title={new Date(createdAt).toLocaleString()}>
+            发布于 {formatRelativeTime(createdAt)}
+          </div>
+        </div>
+      </header>
+
+      <ul className="space-y-4 sm:space-y-5">
+        {comments.map((c) => (
+          <li key={c.cid} className="flex items-start gap-3 sm:gap-4">
+            <div className="size-8 rounded-full overflow-hidden bg-zinc-700/60 shrink-0">
+              {c.user.avatar_url ? (
+                <img src={c.user.avatar_url} alt="avatar" className="w-full h-full object-cover" />
+              ) : null}
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-white/95 text-sm">{c.user.nickname}</span>
+                <span className="text-xs text-white/50">{formatRelativeTime(c.created_at)}</span>
+              </div>
+              <p className="mt-1 text-sm leading-relaxed text-white/90 break-words">
+                <CommentText text={c.text} />
+              </p>
+              <div className="mt-2 inline-flex items-center gap-1 text-xs text-white/70">
+                <ThumbsUp size={14} />
+                <span>{c.digg_count}</span>
+              </div>
+            </div>
+          </li>
+        ))}
+        {comments.length === 0 ? <li className="text-sm text-white/60">暂无评论</li> : null}
+      </ul>
+    </>
+  );
+}