update: login & register page

packages/frontend/src/components/NavigationDrawer.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import {onMount} from 'svelte';
+	import {fly} from 'svelte/transition';
+	import {fade} from 'svelte/transition';
+
+	export let show: boolean = false;
+	export let onClose: () => void;
+
+	let drawer: HTMLDivElement;
+	let cover: HTMLDivElement;
+
+	onMount(() => {
+		const handleOutsideClick = (event: MouseEvent) => {
+			if (show && event.target === cover) {
+				onClose();
+			}
+		};
+
+		window.addEventListener('click', handleOutsideClick);
+
+		return () => {
+			window.removeEventListener('click', handleOutsideClick);
+		};
+	});
+</script>
+
+<div class="absolute z-50 ">
+	{#if show}
+		<div
+				bind:this={cover}
+				transition:fade="{{ duration: 300 }}"
+				class="fixed top-0 left-0 w-full h-full z-40 bg-[#00000020]"
+				aria-hidden="true">
+
+		</div>
+
+		<div
+				bind:this={drawer}
+				transition:fly="{{ x: -500, duration: 300 }}" class="fixed top-0 left-0 h-full
+			bg-[#fff0ee] dark:bg-[#231918] z-50"
+				style="width: min(22.5rem, 70vw);"
+				role="dialog" aria-modal="true">
+			<slot></slot>
+		</div>
+	{/if}
+</div>

packages/frontend/src/components/SearchBox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import SearchIcon from "@components/SearchIcon.svelte";
-	import CloseIcon from "@components/CloseIcon.svelte";
+	import SearchIcon from "src/components/icon/SearchIcon.svelte";
+	import CloseIcon from "src/components/icon/CloseIcon.svelte";
 
 	let inputBox: HTMLInputElement | null = null;
 	export let close = () => {};
@@ -43,7 +43,8 @@
 	<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 ?? "")}>
-			<SearchIcon className="h-full inline-flex items-center text-[1.5rem] text-on-surface-variant" />
+			<SearchIcon className="h-full inline-flex items-center text-[1.5rem]
+			text-on-surface-variant dark:text-dark-on-surface-variant" />
 		</button>
 		<!--suppress HtmlUnknownAttribute -->
 		<input
@@ -56,8 +57,9 @@
 				class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none"
 				on:keydown={handleKeydown}
 		/>
-		<button class="w-6" on:click={close}>
-			<CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem] text-on-surface-variant"/>
+		<button class="w-6" on:click={() => {inputBox.value = ""; close();}}>
+			<CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem]
+			text-on-surface-variant dark:text-dark-on-surface-variant"/>
 		</button>
 	</div>
 </div>

packages/frontend/src/components/TitleBarDesktop.astro

@@ -5,7 +5,7 @@ import DarkModeImage from "@components/DarkModeImage.svelte";
 import SearchBox from "@components/SearchBox.svelte";
 ---
 
-<div class="hidden md:flex relative top-0 left-0 w-full h-28 z-50 justify-between">
+<div class="hidden md:flex relative top-0 left-0 w-full h-28 z-20 justify-between">
 	<div class="w-[305px] xl:ml-8 inline-flex items-center">
 		<a href="/">
 			<DarkModeImage

packages/frontend/src/components/TitleBarMobile.svelte

@@ -1,31 +1,55 @@
 <script lang="ts">
 	import logoMobileDark from "@assets/TitleBar Mobile Dark.svg";
 	import logoMobileLight from "@assets/TitleBar Mobile Light.svg";
-	import SearchBox from "./SearchBox.svelte";
-	import SearchIcon from "./SearchIcon.svelte";
-	import MenuIcon from "./MenuIcon.svelte";
-	import DarkModeImage from "./DarkModeImage.svelte";
+	import SearchBox from "@components/SearchBox.svelte";
+	import SearchIcon from "src/components/icon/SearchIcon.svelte";
+	import MenuIcon from "@components/icon/MenuIcon.svelte";
+	import DarkModeImage from "@components/DarkModeImage.svelte";
+	import NavigationDrawer from "@components/NavigationDrawer.svelte";
+	import HomeIcon from "@components/icon/HomeIcon.svelte";
+	import InfoIcon from "@components/icon/InfoIcon.svelte";
+	import RegisterIcon from "@components/icon/RegisterIcon.svelte";
 
 	let searchBox: SearchBox | null = null;
 	let showSearchBox = false;
+	let showDrawer = false;
 
 	$: if (showSearchBox && searchBox) {
 		searchBox.changeFocusState(true);
 	}
 </script>
 
-<div class="md:hidden relative top-0 left-0 w-full h-16 z-50">
+<NavigationDrawer show={showDrawer} onClose={() => showDrawer = false}>
+	<div class="flex flex-col w-full">
+		<div class="w-full h-14 flex items-center px-4">
+			<HomeIcon className="text-2xl pr-4"/>
+			<a href="/">首页</a>
+		</div>
+		<div class="w-full h-14 flex items-center px-4">
+			<InfoIcon className="text-2xl pr-4"/>
+			<a href="/about">关于</a>
+		</div>
+		<div class="w-full h-14 flex items-center px-4">
+			<RegisterIcon className="text-2xl pr-4"/>
+			<a href="/register">注册</a>
+		</div>
+	</div>
+</NavigationDrawer>
+
+<div class="md:hidden relative top-0 left-0 w-full h-16 z-20">
 	{#if !showSearchBox}
-		<button class="inline-flex absolute left-0 ml-4 h-full items-center dark:text-white">
+		<button class="inline-flex absolute left-0 ml-4 h-full items-center dark:text-white"
+				onclick={() => showDrawer = true}
+		>
 			<MenuIcon/>
 		</button>
 		<div class="absolute left-1/2 -translate-x-1/2 -translate-y-0.5 inline-flex h-full items-center">
 			<a href="/">
 				<DarkModeImage
-					lightSrc={logoMobileLight.src}
-					darkSrc={logoMobileDark.src}
-					alt="Logo"
-					className="w-24 h-8 translate-y-[2px]"
+						lightSrc={logoMobileLight.src}
+						darkSrc={logoMobileDark.src}
+						alt="Logo"
+						className="w-24 h-8 translate-y-[2px]"
 				/>
 			</a>
 		</div>
@@ -35,8 +59,8 @@
 	{/if}
 	{#if !showSearchBox}
 		<button
-			class="inline-flex absolute right-0 h-full items-center mr-4"
-			onclick={() => (showSearchBox = !showSearchBox)}
+				class="inline-flex absolute right-0 h-full items-center mr-4"
+				onclick={() => (showSearchBox = !showSearchBox)}
 		>
 			<SearchIcon className="text-[1.625rem]"/>
 		</button>

packages/frontend/src/components/icon/CloseIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    export let className = "";
+    export let className = '';
 </script>
 
 <div class={className}>

packages/frontend/src/components/icon/HomeIcon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let className = '';
+</script>
+
+<div class={className}>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+		<path fill="currentColor"
+			  d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1"/>
+	</svg>
+</div>

packages/frontend/src/components/icon/InfoIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let className = '';
+</script>
+
+<div class={className}>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+		<path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22" />
+	</svg>
+</div>

packages/frontend/src/components/icon/RegisterIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let className = '';
+</script>
+
+<div class={className}>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+		<path fill="currentColor" d="M15 14c-2.67 0-8 1.33-8 4v2h16v-2c0-2.67-5.33-4-8-4m-9-4V7H4v3H1v2h3v3h2v-3h3v-2m6 2a4 4 0 0 0 4-4a4 4 0 0 0-4-4a4 4 0 0 0-4 4a4 4 0 0 0 4 4" />
+	</svg>
+</div>

packages/frontend/src/pages/login/index.astro

@@ -0,0 +1,13 @@
+---
+import Layout from "@layouts/Layout.astro";
+---
+
+<Layout title="登录">
+	<main class="relative flex-grow pt-36 px-4 md:w-full md:flex md:items-center md:flex-col">
+		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-container md:dark:bg-dark-container">
+			<h1 class="text-5xl leading-[4rem] font-extralight">登录</h1>
+			<p class="mt-4 leading-8 font-medium">很抱歉，但您现在无法登录。</p>
+			<p class="text-sm text-[#534341] dark:text-[#d8c2be]">因为目前还没有写好啦~</p>
+		</div>
+	</main>
+</Layout>

packages/frontend/src/pages/register/index.astro

@@ -1,25 +1,30 @@
 ---
 import Layout from "@layouts/Layout.astro";
-import RightArrow from "../../components/icon/RightArrow.astro";
+import RightArrow from "@components/icon/RightArrow.astro";
 ---
 
 <Layout title="注册">
-	<main class="relative flex-grow pt-36 px-4 ">
-		<h1 class="text-5xl leading-[4rem] font-extralight">欢迎</h1>
-		<p class="h-14 mt-2.5">
-			欢迎来到中 V 档案馆。<br/>
-			这里是中文虚拟歌手相关信息的收集站与档案馆。
-		</p>
-		<p class="h-14">
-			注册一个账号，<br/>
-			让我们一起见证中 V 的历史，现在，与未来。
-		</p>
-		<p>
-			已有账户？
-			<a>
-				<span>登录</span>
-				<RightArrow class="inline -translate-y-0.5" aria-hidden="true"/>
-			</a>
-		</p>
+	<main class="relative flex-grow pt-36 px-4 md:w-full md:flex md:items-center md:flex-col">
+		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-container md:dark:bg-dark-container">
+			<h1 class="text-5xl leading-[4rem] font-extralight">欢迎</h1>
+			<p class="h-14 mt-2.5 md:mt-4">
+				欢迎来到中 V 档案馆。<br/>
+				这里是中文虚拟歌手相关信息的收集站与档案馆。
+			</p>
+			<p class="h-14">
+				注册一个账号，<br/>
+				让我们一起见证中 V 的历史，现在，与未来。
+			</p>
+			<p class="md:mt-2">
+				已有账户？
+				<a href="/login">
+					<span>登录</span>
+					<RightArrow class="inline -translate-y-0.5" aria-hidden="true"/>
+				</a>
+			</p>
+			<p class="mt-4 leading-8 font-medium">很抱歉，但您现在无法注册。</p>
+			<p class="text-sm text-[#534341] dark:text-[#d8c2be]">因为目前还没有写好啦~</p>
+			<p class="mt-4"><a href="/">返回首页</a></p>
+		</div>
 	</main>
 </Layout>

packages/frontend/src/styles/global.css

@@ -5,6 +5,10 @@
 @theme {
     --color-surface-container-high: #f7e4e1;
     --color-on-surface-variant: #534341;
+    --color-dark-on-surface-variant: #d8c2be;
+    --color-dark-surface-container-high: #322826;
+    --color-dark-container: #271d1c;
+    --color-container: #fceae7;
 }
 
 a {