重构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,60 @@
+import { ChevronDown, ChevronUp, MessageSquareText } from "lucide-react";
+import type { Neighbors } from "../types";
+
+interface NavigationButtonsProps {
+  neighbors: Neighbors;
+  commentsCount: number;
+  onNavigatePrev: () => void;
+  onNavigateNext: () => void;
+  onToggleComments: () => void;
+}
+
+export function NavigationButtons({
+  neighbors,
+  commentsCount,
+  onNavigatePrev,
+  onNavigateNext,
+  onToggleComments,
+}: NavigationButtonsProps) {
+  return (
+    <>
+      {/* 评论开关（右侧中部） */}
+      <button
+        className="z-10 grid place-items-center w-[54px] h-[54px] rounded-full absolute right-4 top-2/3 -translate-y-1/2 cursor-pointer"
+        onClick={onToggleComments}
+        aria-label="切换评论"
+      >
+        <div className="grid place-items-center gap-1 drop-shadow-lg">
+          <MessageSquareText size={40} className="" />
+
+          {commentsCount > 0 ? <span className="text-[18px] font-semibold text-white/90 drop-shadow">{commentsCount}</span> :
+            <span className="text-[12px] font-semibold text-white/90 drop-shadow">暂无评论</span>
+          }
+
+        </div>
+      </button>
+
+      {/* 上下切换按钮（右侧胶囊形状） */}
+      <div className="absolute right-4 top-6/11 -translate-y-1/2 z-10">
+        <div className="flex flex-col rounded-full bg-black/40 backdrop-blur-sm border border-white/20 overflow-hidden">
+          <button
+            className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors"
+            onClick={onNavigatePrev}
+            disabled={!neighbors.prev}
+            aria-label="上一条"
+          >
+            <ChevronUp size={24} />
+          </button>
+          <button
+            className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors border-t border-white/20"
+            onClick={onNavigateNext}
+            disabled={!neighbors.next}
+            aria-label="下一条"
+          >
+            <ChevronDown size={24} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}