完成转录功能，中文脚本搜索，播放界面显示脚本

2025-10-25 19:22:41 +08:00
parent d1b4fb6be0
commit 0d18595b68
34 changed files with 1827 additions and 404 deletions
@@ -0,0 +1,79 @@
+"use client";
+
+import { MoreVertical, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+interface MoreMenuProps {
+  children: React.ReactNode;
+}
+
+export function MoreMenu({ children }: MoreMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // 点击外部关闭菜单
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        buttonRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  return (
+    <div className="relative">
+      {/* 更多按钮 */}
+      <button
+        ref={buttonRef}
+        className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="更多选项"
+        title="更多选项"
+      >
+        {isOpen ? <X size={18} /> : <MoreVertical size={18} />}
+      </button>
+
+      {/* 弹出菜单 */}
+      {isOpen && (
+        <div
+          ref={menuRef}
+          className="absolute bottom-full right-0 mb-2 bg-zinc-900/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200"
+          style={{ minWidth: "200px" }}
+        >
+          <div className="p-2 flex flex-col gap-1">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface MoreMenuItemProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export function MoreMenuItem({ icon, label, onClick }: MoreMenuItemProps) {
+  return (
+    <button
+      className="flex items-center gap-3 px-3 py-2.5 text-white/90 hover:bg-white/10 rounded-lg transition-colors text-left w-full"
+      onClick={onClick}
+    >
+      <span className="flex-shrink-0">{icon}</span>
+      <span className="text-sm">{label}</span>
+    </button>
+  );
+}