alikia2x/cvsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: UI/UX for info page and search box

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-04-28 02:15:50 +08:00
parent 6d1698fcb6
commit 92e00d033d
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
2 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/src/components/SearchBox.svelte
View File

@ -2,15 +2,16 @@
import SearchIcon from "src/components/icon/SearchIcon.svelte"; import SearchIcon from "src/components/icon/SearchIcon.svelte";
import CloseIcon from "src/components/icon/CloseIcon.svelte"; import CloseIcon from "src/components/icon/CloseIcon.svelte";
let inputBox: HTMLInputElement | null = null; let inputValue = ""; // 使用一个变量来绑定 input 的值
export let close = () => {}; export let close = () => {
};
export function changeFocusState(target: boolean) { export function changeFocusState(target: boolean) {
if (!inputBox) return; if (!inputElement) return; // 使用 inputElement 而不是 inputBox
if (target) { if (target) {
inputBox.focus(); inputElement.focus();
} else { } else {
inputBox.blur(); inputElement.blur();
} }
} }
@ -21,12 +22,13 @@
function handleKeydown(event: KeyboardEvent) { function handleKeydown(event: KeyboardEvent) {
if (event.key === "Enter") { if (event.key === "Enter") {
event.preventDefault(); event.preventDefault();
const input = event.target as HTMLInputElement; const value = inputValue.trim(); // 使用绑定的变量
const value = input.value.trim();
if (!value) return; if (!value) return;
search(value); search(value);
} }
} }
let inputElement: HTMLInputElement; // 引用 input 元素
</script> </script>
<style> <style>
@ -37,18 +39,17 @@
} }
</style> </style>
<!-- svelte-ignore a11y_autofocus -->
<div class="absolute md:relative left-0 h-full mr-0 inline-flex items-center w-full px-4 md:px-0 <div class="absolute md:relative left-0 h-full mr-0 inline-flex items-center w-full px-4 md:px-0
md:w-full xl:max-w-[50rem] md:mx-4"> md:w-full xl:max-w-[50rem] md:mx-4">
<div class="w-full h-10 lg:h-12 px-4 rounded-full bg-surface-container-high dark:bg-zinc-800/70 <div class="w-full h-10 lg:h-12 px-4 rounded-full bg-surface-container-high dark:bg-zinc-800/70
backdrop-blur-lg flex justify-between md:px-5"> backdrop-blur-lg flex justify-between md:px-5">
<button class="w-6" on:click={() => search(inputBox?.value ?? "")}> <button class="w-6" on:click={() => search(inputValue)}>
<SearchIcon className="h-full inline-flex items-center text-[1.5rem] <SearchIcon className="h-full inline-flex items-center text-[1.5rem]
text-on-surface-variant dark:text-dark-on-surface-variant" /> text-on-surface-variant dark:text-dark-on-surface-variant"/>
</button> </button>
<!--suppress HtmlUnknownAttribute -->
<input <input
bind:this={inputBox} bind:this={inputElement}
bind:value={inputValue}
type="search" type="search"
placeholder="搜索" placeholder="搜索"
autocomplete="off" autocomplete="off"
@ -57,7 +58,7 @@
class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none" class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none"
on:keydown={handleKeydown} on:keydown={handleKeydown}
/> />
<button class="w-6" on:click={() => {inputBox.value = ""; close();}}> <button class={"w-6 duration-100 " + (inputValue ? "md:opacity-100" : "md:opacity-0") } on:click={() => {inputValue = ""; close();}}>
<CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem] <CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem]
text-on-surface-variant dark:text-dark-on-surface-variant"/> text-on-surface-variant dark:text-dark-on-surface-variant"/>
</button> </button>

33
packages/frontend/src/pages/song/[id]/info.astro
View File

@ -5,11 +5,12 @@ import pg from "pg";
import { format } from 'date-fns'; import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale'; import { zhCN } from 'date-fns/locale';
const databaseHost = process.env.DB_HOST const databaseHost = import.meta.env.DB_HOST
const databaseName = process.env.DB_NAME const databaseName = import.meta.env.DB_NAME
const databaseUser = process.env.DB_USER const databaseUser = import.meta.env.DB_USER
const databasePassword = process.env.DB_PASSWORD const databasePassword = import.meta.env.DB_PASSWORD
const databasePort = process.env.DB_PORT const databasePort = import.meta.env.DB_PORT
const postgresConfig = { const postgresConfig = {
hostname: databaseHost, hostname: databaseHost,
@ -121,47 +122,47 @@ interface Snapshot {
<table class="table-fixed"> <table class="table-fixed">
<tbody> <tbody>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">ID</td> <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">ID</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.id}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.id}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">AID</td> <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">AID</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.aid}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.aid}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">BVID</td> <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">BVID</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.bvid}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.bvid}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标题</td> <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-[470]">标题</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.title}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.title}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">描述</td> <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-[470]">描述</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.description}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.description}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">UID</td> <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">UID</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.uid}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.uid}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标签</td> <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-[470]">标签</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.tags}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.tags}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">发布时间</td> <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-[470]">发布时间</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">时长 (秒)</td> <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-[470]">时长 (秒)</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.duration}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.duration}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">创建时间</td> <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-[470]">创建时间</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
</tr> </tr>
<tr> <tr>
<td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">封面</td> <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-[470]">封面</td>
<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td> <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td>
</tr> </tr>
</tbody> </tbody>