improve: UI/UX for info page and search box
This commit is contained in:
parent
6d1698fcb6
commit
92e00d033d
GPG Key ID:
56209E0CCD8420C6
@ -2,15 +2,16 @@
|
||||
import SearchIcon from "src/components/icon/SearchIcon.svelte";
|
||||
import CloseIcon from "src/components/icon/CloseIcon.svelte";
|
||||
|
||||
let inputBox: HTMLInputElement | null = null;
|
||||
export let close = () => {};
|
||||
let inputValue = ""; // 使用一个变量来绑定 input 的值
|
||||
export let close = () => {
|
||||
};
|
||||
|
||||
export function changeFocusState(target: boolean) {
|
||||
if (!inputBox) return;
|
||||
if (!inputElement) return; // 使用 inputElement 而不是 inputBox
|
||||
if (target) {
|
||||
inputBox.focus();
|
||||
inputElement.focus();
|
||||
} else {
|
||||
inputBox.blur();
|
||||
inputElement.blur();
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,12 +22,13 @@
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
const input = event.target as HTMLInputElement;
|
||||
const value = input.value.trim();
|
||||
const value = inputValue.trim(); // 使用绑定的变量
|
||||
if (!value) return;
|
||||
search(value);
|
||||
}
|
||||
}
|
||||
|
||||
let inputElement: HTMLInputElement; // 引用 input 元素
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -37,18 +39,17 @@
|
||||
}
|
||||
</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
|
||||
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
|
||||
backdrop-blur-lg flex justify-between md:px-5">
|
||||
<button class="w-6" on:click={() => search(inputBox?.value ?? "")}>
|
||||
backdrop-blur-lg flex justify-between md:px-5">
|
||||
<button class="w-6" on:click={() => search(inputValue)}>
|
||||
<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>
|
||||
<!--suppress HtmlUnknownAttribute -->
|
||||
<input
|
||||
bind:this={inputBox}
|
||||
bind:this={inputElement}
|
||||
bind:value={inputValue}
|
||||
type="search"
|
||||
placeholder="搜索"
|
||||
autocomplete="off"
|
||||
@ -57,9 +58,9 @@
|
||||
class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none"
|
||||
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]
|
||||
text-on-surface-variant dark:text-dark-on-surface-variant"/>
|
||||
text-on-surface-variant dark:text-dark-on-surface-variant"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -5,11 +5,12 @@ import pg from "pg";
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
const databaseHost = process.env.DB_HOST
|
||||
const databaseName = process.env.DB_NAME
|
||||
const databaseUser = process.env.DB_USER
|
||||
const databasePassword = process.env.DB_PASSWORD
|
||||
const databasePort = process.env.DB_PORT
|
||||
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,
|
||||
@ -121,47 +122,47 @@ interface Snapshot {
|
||||
<table class="table-fixed">
|
||||
<tbody>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user