From 980dd542eeff215128a881c960e43f1bb1e26dc4 Mon Sep 17 00:00:00 2001
From: alikia2x <alikia2x@outlook.com>
Date: Sun, 11 May 2025 03:57:26 +0800
Subject: [PATCH] add: video info page in frontend

---
 packages/core/db/pgConfigNew.ts               | 18 +++--
 .../src/components/InfoPage/MetadataRow.astro |  2 +-
 .../frontend/src/components/SearchBox.svelte  |  6 +-
 .../components/VideoInfoPage/StatRow.astro    | 12 ++++
 .../frontend/src/pages/song/[id]/info.astro   | 36 ++--------
 .../frontend/src/pages/video/[id]/info.astro  | 68 +++++++++++++++++++
 packages/frontend/src/styles/global.css       |  2 +
 7 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 packages/frontend/src/components/VideoInfoPage/StatRow.astro
 create mode 100644 packages/frontend/src/pages/video/[id]/info.astro

diff --git a/packages/core/db/pgConfigNew.ts b/packages/core/db/pgConfigNew.ts
index d6cb437..238adfd 100644
--- a/packages/core/db/pgConfigNew.ts
+++ b/packages/core/db/pgConfigNew.ts
@@ -1,17 +1,21 @@
 const requiredEnvVars = ["DB_HOST", "DB_NAME", "DB_USER", "DB_PASSWORD", "DB_PORT", "DB_NAME_CRED"];
 
-const unsetVars = requiredEnvVars.filter((key) => process.env[key] === undefined);
+const getEnvVar = (key: string) => {
+    return process.env[key] || import.meta.env[key];
+}
+
+const unsetVars = requiredEnvVars.filter((key) => getEnvVar(key) === undefined);
 
 if (unsetVars.length > 0) {
 	throw new Error(`Missing required environment variables: ${unsetVars.join(", ")}`);
 }
 
-const databaseHost = process.env["DB_HOST"]!;
-const databaseName = process.env["DB_NAME"];
-const databaseNameCred = process.env["DB_NAME_CRED"]!;
-const databaseUser = process.env["DB_USER"]!;
-const databasePassword = process.env["DB_PASSWORD"]!;
-const databasePort = process.env["DB_PORT"]!;
+const databaseHost = getEnvVar("DB_HOST")!;
+const databaseName = getEnvVar("DB_NAME");
+const databaseNameCred = getEnvVar("DB_NAME_CRED")!;
+const databaseUser = getEnvVar("DB_USER")!;
+const databasePassword = getEnvVar("DB_PASSWORD")!;
+const databasePort = getEnvVar("DB_PORT")!;
 
 export const postgresConfig = {
 	hostname: databaseHost,
diff --git a/packages/frontend/src/components/InfoPage/MetadataRow.astro b/packages/frontend/src/components/InfoPage/MetadataRow.astro
index ff18c32..c03e948 100644
--- a/packages/frontend/src/components/InfoPage/MetadataRow.astro
+++ b/packages/frontend/src/components/InfoPage/MetadataRow.astro
@@ -3,6 +3,6 @@ const { title, description } = Astro.props;
 ---
 
 <tr>
-	<td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">{title}</td>
+	<td class="max-w-14 min-w-14 md:max-w-24 md:min-w-24 border dark:border-zinc-500 px-2 md:px-3 py-2 font-semibold">{title}</td>
 	<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{description}</td>
 </tr>
\ No newline at end of file
diff --git a/packages/frontend/src/components/SearchBox.svelte b/packages/frontend/src/components/SearchBox.svelte
index c9ecb1d..5395a0e 100644
--- a/packages/frontend/src/components/SearchBox.svelte
+++ b/packages/frontend/src/components/SearchBox.svelte
@@ -7,7 +7,7 @@
 	};
 
 	export function changeFocusState(target: boolean) {
-		if (!inputElement) return; // 使用 inputElement 而不是 inputBox
+		if (!inputElement) return;
 		if (target) {
 			inputElement.focus();
 		} else {
@@ -22,13 +22,13 @@
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === "Enter") {
 			event.preventDefault();
-			const value = inputValue.trim(); // 使用绑定的变量
+			const value = inputValue.trim();
 			if (!value) return;
 			search(value);
 		}
 	}
 
-	let inputElement: HTMLInputElement; // 引用 input 元素
+	let inputElement: HTMLInputElement;
 </script>
 
 <style>
diff --git a/packages/frontend/src/components/VideoInfoPage/StatRow.astro b/packages/frontend/src/components/VideoInfoPage/StatRow.astro
new file mode 100644
index 0000000..07a79ea
--- /dev/null
+++ b/packages/frontend/src/components/VideoInfoPage/StatRow.astro
@@ -0,0 +1,12 @@
+---
+const { title, description } = Astro.props;
+---
+
+<div class="flex justify-between w-36">
+	<span>
+		{title}
+	</span>
+	<span>
+		{description}
+	</span>
+</div>
diff --git a/packages/frontend/src/pages/song/[id]/info.astro b/packages/frontend/src/pages/song/[id]/info.astro
index 55b73b3..0e0dbc4 100644
--- a/packages/frontend/src/pages/song/[id]/info.astro
+++ b/packages/frontend/src/pages/song/[id]/info.astro
@@ -9,22 +9,6 @@ import { getAidFromBV } from "src/db/bilibili_metadata/getAidFromBV";
 import { getVideoMetadata } from "src/db/bilibili_metadata/getVideoMetadata";
 import { aidExists as idExists } from "src/db/bilibili_metadata/aidExists";
 
-const databaseHost = import.meta.env.DB_HOST;
-const databaseName = import.meta.env.DB_NAME;
-const databaseUser = import.meta.env.DB_USER;
-const databasePassword = import.meta.env.DB_PASSWORD;
-const databasePort = import.meta.env.DB_PORT;
-
-const postgresConfig = {
-    hostname: databaseHost,
-    port: parseInt(databasePort!),
-    database: databaseName,
-    user: databaseUser,
-    password: databasePassword,
-};
-
-console.log(postgresConfig);
-
 const { id } = Astro.params;
 
 async function getVideoAid(id: string) {
@@ -52,18 +36,6 @@ if (!aidExists) {
 }
 const videoInfo = await getVideoMetadata(aid);
 const snapshots = await getAllSnapshots(aid);
-
-interface Snapshot {
-    created_at: Date;
-    views: number;
-    danmakus: number;
-    replies: number;
-    coins: number;
-    likes: number;
-    favorites: number;
-    shares: number;
-    id: number;
-}
 ---
 
 <Layout>
@@ -79,9 +51,9 @@ interface Snapshot {
                 <div class="overflow-x-auto max-w-full px-2">
                     <table class="table-fixed">
                         <tbody>
-                            <MetadataRow title={id} description={videoInfo?.id} />
-                            <MetadataRow title={videoInfo?.aid} description={videoInfo?.aid} />
-                            <MetadataRow title={videoInfo?.bvid} description={videoInfo?.bvid} />
+                            <MetadataRow title="ID" description={videoInfo?.id} />
+                            <MetadataRow title="av 号" description={videoInfo?.aid} />
+                            <MetadataRow title="BV 号" description={videoInfo?.bvid} />
                             <MetadataRow title="标题" description={videoInfo?.title} />
                             <MetadataRow title="描述" description={videoInfo?.description} />
                             <MetadataRow title="UID" description={videoInfo?.uid} />
@@ -124,7 +96,7 @@ interface Snapshot {
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    {snapshots.map((snapshot: Snapshot) => (
+                                    {snapshots.map((snapshot) => (
                                         <tr>
                                             <td class="border dark:border-zinc-500 px-4 py-2">
                                                 {format(new Date(snapshot.created_at), "yyyy-MM-dd HH:mm:ss", {
diff --git a/packages/frontend/src/pages/video/[id]/info.astro b/packages/frontend/src/pages/video/[id]/info.astro
new file mode 100644
index 0000000..2b641d2
--- /dev/null
+++ b/packages/frontend/src/pages/video/[id]/info.astro
@@ -0,0 +1,68 @@
+---
+import Layout from "@layouts/Layout.astro";
+import TitleBar from "@components/TitleBar.astro";
+import MetadataRow from "@components/InfoPage/MetadataRow.astro";
+import { format } from "date-fns";
+import { zhCN } from "date-fns/locale";
+import { getAllSnapshots } from "src/db/snapshots/getAllSnapshots";
+import { getAidFromBV } from "src/db/bilibili_metadata/getAidFromBV";
+import { getVideoMetadata } from "src/db/bilibili_metadata/getVideoMetadata";
+import { aidExists as idExists } from "src/db/bilibili_metadata/aidExists";
+import StatRow from "@components/VideoInfoPage/StatRow.astro";
+
+const { id } = Astro.params;
+
+if (!id) {
+	Astro.response.status = 404;
+	return new Response(null, { status: 404 });
+}
+
+const backendURL = import.meta.env.BACKEND_URL;
+const res = await fetch(backendURL + `video/${id}/info`);
+const data = await res.json();
+---
+
+<Layout title={`${data.title ?? data.bvid} - 视频信息`}>
+	<TitleBar />
+	<main class="flex flex-col items-center min-h-screen gap-8 mt-10 md:mt-6 relative z-0 overflow-x-auto pb-8">
+		<div class="w-full lg:max-w-4xl lg:mx-auto lg:p-6 px-4">
+			<h2 class="text-lg md:text-2xl mb-2">
+                <a href={`https://www.bilibili.com/video/${data.bvid}`}>{data.title}</a>
+            </h2>
+			<p
+				class="text-sm md:text-base font-normal text-on-surface-variant
+                dark:text-dark-on-surface-variant mb-4"
+			>
+				<span>{data.bvid} · av{data.aid}</span><br />
+				<span>
+					发布于
+					{format(new Date(data.pubdate * 1000), "yyyy-MM-dd HH:mm:ss")}
+				</span><br />
+				<span>播放：{(data.stat?.view ?? 0).toLocaleString()}</span> ·
+				<span>弹幕：{(data.stat?.danmaku ?? 0).toLocaleString()}</span>
+                <br/>
+                <span>分区: {data.tname}, tid{data.tid} · v2: {data.tname_v2}, tid{data.tid_v2}</span>
+			</p>
+			<img src={data.pic} referrerpolicy="no-referrer" class="rounded-lg" />
+
+			<h3 class="font-medium text-lg mt-6 mb-1">简介</h3>
+			<pre
+				class="max-w-full wrap-anywhere break-all text-on-surface-variant
+                text-sm md:text-base whitespace-pre-wrap dark:text-dark-on-surface-variant
+                font-zh">{data.desc}</pre>
+
+			<div class="mb-6 mt-4">
+				<h2 class="mb-2 text-xl font-medium">统计数据</h2>
+				<div class="flex flex-col gap-1">
+					<StatRow title="播放" description={data.stat?.view} />
+					<StatRow title="点赞" description={data.stat?.like} />
+					<StatRow title="收藏" description={data.stat?.favorite} />
+					<StatRow title="硬币" description={data.stat?.coin} />
+					<StatRow title="评论" description={data.stat?.reply} />
+					<StatRow title="弹幕" description={data.stat?.danmaku} />
+					<StatRow title="分享" description={data.stat?.share} />
+				</div>
+			</div>
+		</div>
+	</main>
+</Layout>
diff --git a/packages/frontend/src/styles/global.css b/packages/frontend/src/styles/global.css
index 1e8a68f..94579ab 100644
--- a/packages/frontend/src/styles/global.css
+++ b/packages/frontend/src/styles/global.css
@@ -102,6 +102,8 @@
     --color-dark-surface-container-low: rgb(35 25 24);
     --color-surface-container-highest: rgb(241 223 220);
     --color-dark-surface-container-highest: rgb(61 50 48);
+
+    --font-zh: "InterVariable", "MiSans VF", sans-serif;
 }
 
 a {