重构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,71 @@
+import { X } from "lucide-react";
+import type { Comment, User } from "../types";
+import { CommentList } from "./CommentList";
+
+interface CommentPanelProps {
+  open: boolean;
+  onClose: () => void;
+  author: User;
+  createdAt: string | Date;
+  comments: Comment[];
+  mounted: boolean;
+}
+
+export function CommentPanel({ open, onClose, author, createdAt, comments, mounted }: CommentPanelProps) {
+  return (
+    <>
+      {/* 横屏评论面板：并排分栏 */}
+      <aside
+        className={`
+          hidden landscape:flex
+          z-30 flex-col bg-[rgba(22,22,22,0.92)] text-white
+          relative h-full overflow-hidden
+          ${mounted ? "transition-[width] duration-200 ease-out" : ""}
+          ${open ? "w-[min(420px,36vw)] border-l border-white/10" : "w-0"}
+        `}
+      >
+        <div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
+          <button
+            className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
+            onClick={onClose}
+            aria-label="关闭评论"
+          >
+            <X size={18} />
+          </button>
+          <div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
+        </div>
+
+        <div className="p-3 overflow-auto">
+          <CommentList author={author} createdAt={createdAt} comments={comments} />
+        </div>
+      </aside>
+
+      {/* 竖屏评论面板：bottom sheet */}
+      <aside
+        className={`
+          landscape:hidden
+          z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white
+          fixed inset-x-0 bottom-0 w-full h-[min(80vh,88dvh)]
+          ${mounted ? "transition-transform duration-200 ease-out" : ""}
+          border-t border-white/10
+          ${open ? "translate-y-0" : "translate-y-full"}
+        `}
+      >
+        <div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
+          <div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
+          <button
+            className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
+            onClick={onClose}
+            aria-label="关闭评论"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="p-3 overflow-auto">
+          <CommentList author={author} createdAt={createdAt} comments={comments} />
+        </div>
+      </aside>
+    </>
+  );
+}