From d49a9ef31f8ecd4a85ac5c1a58128f4787accaeb Mon Sep 17 00:00:00 2001 From: mei Date: Mon, 10 Feb 2025 10:16:11 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B4=A7=E6=80=A5=E9=81=BF=E9=99=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ui/dialog.tsx | 122 ++++++++++++++++++++++++++++++++++++ components/video-search.tsx | 60 +++++++++++++++--- package-lock.json | 37 +++++++++++ package.json | 1 + 4 files changed, 213 insertions(+), 7 deletions(-) create mode 100644 components/ui/dialog.tsx diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx new file mode 100644 index 0000000..1647513 --- /dev/null +++ b/components/ui/dialog.tsx @@ -0,0 +1,122 @@ +"use client" + +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { X } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogTrigger, + DialogClose, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +} diff --git a/components/video-search.tsx b/components/video-search.tsx index 6dfb850..4fa9128 100644 --- a/components/video-search.tsx +++ b/components/video-search.tsx @@ -5,6 +5,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Loader2 } from "lucide-react" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogFooter, +} from "@/components/ui/dialog" interface Video { video_stat: { @@ -68,6 +76,9 @@ export default function VideoSearch() { const [videos, setVideos] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) + const [showCoverDialog, setShowCoverDialog] = useState(false) + const [confirmText, setConfirmText] = useState("") + const [showCover, setShowCover] = useState(false) const handleSearch = async () => { if (!searchTerm) { @@ -90,13 +101,13 @@ export default function VideoSearch() { const data = await response.json() const weekly_data = await weekly_response.json() - // 合并 data 和 weekly_data const combinedData = { ...data, score_rank: weekly_data.score_rank, } setVideos([combinedData]) + setShowCover(false) if (videos.length === 0) { setError("未找到匹配的视频") } @@ -108,6 +119,17 @@ export default function VideoSearch() { } } + const handleShowCover = () => { + setShowCoverDialog(true) + } + + const handleConfirmShowCover = () => { + if (confirmText === "我已知晓") { + setShowCover(true) + setShowCoverDialog(false) + } + } + return ( @@ -134,12 +156,16 @@ export default function VideoSearch() {
  • - {/* eslint-disable-next-line @next/next/no-img-element */} - 视频封面 + {showCover ? ( + // eslint-disable-next-line @next/next/no-img-element + 视频封面 + ) : ( + + )}

    {video.video_info.title}

    @@ -219,6 +245,26 @@ export default function VideoSearch() { !loading && !error &&

    暂无数据

    )} + + + + 确认显示封面 + + 出于对著作权人的尊重建议给出说明：仅以介绍目的从哔哩哔哩实时引用，除另有说明外著作权人保留所有权利，内容不代表本站观点，本站也不是这些内容的著作权人。 + + +
    + setConfirmText(e.target.value)} + /> +
    + + + +     +     ) } diff --git a/package-lock.json b/package-lock.json index a1b65f3..9fb7b31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "vocal-rank", "version": "0.1.0", "dependencies": { + "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-slot": "^1.1.2", "class-variance-authority": "^0.7.1", @@ -574,6 +575,42 @@ } } }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.1.6", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz", + "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.2", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-direction": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", diff --git a/package.json b/package.json index 4bdcbfa..bf1c5b1 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-slot": "^1.1.2", "class-variance-authority": "^0.7.1",