From db5ea97faedb5b91cc37b07684a29aff3399654a Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sun, 30 Mar 2025 07:58:37 +0800 Subject: [PATCH] update: song info page --- deno.json | 3 +- .../frontend/src/components/Welcome.astro | 1 + .../frontend/src/pages/song/[id]/info.astro | 97 +++++++++++++++---- 3 files changed, 79 insertions(+), 22 deletions(-) diff --git a/deno.json b/deno.json index 5e9eac4..fcee853 100644 --- a/deno.json +++ b/deno.json @@ -15,6 +15,7 @@ "imports": { "@astrojs/node": "npm:@astrojs/node@^9.1.3", "@astrojs/svelte": "npm:@astrojs/svelte@^7.0.8", - "@core/db/": "./packages/core/db/" + "@core/db/": "./packages/core/db/", + "date-fns": "npm:date-fns@^4.1.0" } } diff --git a/packages/frontend/src/components/Welcome.astro b/packages/frontend/src/components/Welcome.astro index c55f130..04130ae 100644 --- a/packages/frontend/src/components/Welcome.astro +++ b/packages/frontend/src/components/Welcome.astro @@ -6,4 +6,5 @@ import TitleBar from "@components/TitleBar.astro";

正在施工中……

+

在搜索栏输入BV号或AV号，可以查询目前数据库收集到的信息~

diff --git a/packages/frontend/src/pages/song/[id]/info.astro b/packages/frontend/src/pages/song/[id]/info.astro index edc08c0..7c1c859 100644 --- a/packages/frontend/src/pages/song/[id]/info.astro +++ b/packages/frontend/src/pages/song/[id]/info.astro @@ -1,19 +1,22 @@ --- import Layout from "@layouts/Layout.astro"; -import pg from 'pg' +import TitleBar from "@components/TitleBar.astro"; +import pg from "pg"; import { postgresConfig } from "@core/db/pgConfig.ts"; +import { format } from 'date-fns'; +import { zhCN } from 'date-fns/locale'; // 路由参数 const { id } = Astro.params; -const { Client } = pg +const { Client } = pg; const client = new Client(postgresConfig); await client.connect(); // 数据库查询函数 async function getVideoMetadata(aid: number) { - const res = await client.query('SELECT * FROM bilibili_metadata WHERE aid = $1', [aid]); + const res = await client.query("SELECT * FROM bilibili_metadata WHERE aid = $1", [aid]); if (res.rows.length <= 0) { - return null + return null; } const row = res.rows[0]; if (row) { @@ -23,18 +26,19 @@ async function getVideoMetadata(aid: number) { } async function getVideoSnapshots(aid: number) { - // TODO: 实现video_snapshot表查询，按created_at排序，限制100条 - const res = await client.query('SELECT * FROM video_snapshot WHERE aid = $1 ORDER BY created_at DESC LIMIT 100', [aid]); + const res = await client.query("SELECT * FROM video_snapshot WHERE aid = $1 ORDER BY created_at DESC", [ + aid, + ]); if (res.rows.length <= 0) { - return null + return null; } return res.rows; } async function getAidFromBV(bv: string) { - const res = await client.query('SELECT aid FROM bilibili_metadata WHERE bvid = $1', [bv]); + const res = await client.query("SELECT aid FROM bilibili_metadata WHERE bvid = $1", [bv]); if (res.rows.length <= 0) { - return null + return null; } const row = res.rows[0]; if (row && row.aid) { @@ -67,22 +71,73 @@ if (!aid || isNaN(aid)) { const videoInfo = await getVideoMetadata(aid); const snapshots = await getVideoSnapshots(aid); client.end(); + +interface Snapshot { + created_at: Date; + views: number; + danmakus: number; + replies: number; + coins: number; + likes: number; + favorites: number; + shares: number; + id: number; +} --- -
-

视频信息: {aid}

+ +
+
+

视频信息: av{aid}

- -
-

基本信息

- 
{JSON.stringify(videoInfo, null, 2)}
-
+
+

基本信息

+ 
{JSON.stringify(videoInfo, null, 2)}
+
- -
-

快照历史数据 (最新100条)

- 
{JSON.stringify(snapshots, null, 2)}
+ +
+

播放量历史数据

+ {snapshots && snapshots.length > 0 ? ( +
+ + + + + + + + + + + + + + + {snapshots.map((snapshot: Snapshot) => ( + + + + + + + + + + + ))} + +
创建时间观看硬币点赞收藏分享弹幕评论
{format(new Date(snapshot.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })}{snapshot.views}{snapshot.coins}{snapshot.likes}{snapshot.favorites}{snapshot.shares}{snapshot.danmakus}{snapshot.replies}
+
+ ) : ( +

暂无历史数据。

+ )} +
-
+