From b7849011109bbd4751c7a2d60520c3c326f3cc57 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sat, 15 Aug 2026 15:06:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E7=AE=A1=E7=90=86=E5=90=8E=E5=8F=B0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E3=80=81=E8=A1=A8=E6=A0=BC=E5=92=8C=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/admin/Alert.svelte     |  34 +++++
 src/lib/components/admin/Button.svelte    | 147 ++++++++++++++++++++++
 src/lib/components/admin/DataTable.svelte |  50 ++++++++
 3 files changed, 231 insertions(+)
 create mode 100644 src/lib/components/admin/Alert.svelte
 create mode 100644 src/lib/components/admin/Button.svelte
 create mode 100644 src/lib/components/admin/DataTable.svelte

diff --git a/src/lib/components/admin/Alert.svelte b/src/lib/components/admin/Alert.svelte
new file mode 100644
index 0000000..86b3af7
--- /dev/null
+++ b/src/lib/components/admin/Alert.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let {
+		type = 'error',
+		message,
+		children
+	}: {
+		type?: 'error';
+		message?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="alert alert-{type}">
+	{#if message}
+		{message}
+	{:else if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.alert {
+		padding: 12px 16px;
+		margin-bottom: 20px;
+		font-weight: 600;
+	}
+
+	.alert-error {
+		background-color: #fdf7f7;
+		border: 2px solid #d9534f;
+		color: #d9534f;
+	}
+</style>
diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte
new file mode 100644
index 0000000..7507c2e
--- /dev/null
+++ b/src/lib/components/admin/Button.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+	type BaseProps = {
+		variant?: 'primary' | 'secondary' | 'danger' | 'action';
+		size?: 'sm' | 'md';
+		fullWidth?: boolean;
+		class?: string;
+		children?: Snippet;
+	};
+
+	type ButtonProps = BaseProps &
+		HTMLButtonAttributes & {
+			href?: undefined;
+		};
+
+	type AnchorProps = BaseProps &
+		HTMLAnchorAttributes & {
+			href: string;
+		};
+
+	let {
+		variant = 'secondary',
+		size = 'md',
+		fullWidth = false,
+		href,
+		class: className = '',
+		children,
+		...rest
+	}: ButtonProps | AnchorProps = $props();
+
+	let baseClass = $derived.by(() => {
+		if (variant === 'action') {
+			return `action-btn ${className}`;
+		}
+		let c = `btn btn-${variant}`;
+		if (size === 'sm') c += ' btn-sm';
+		if (fullWidth) c += ' w-full';
+		return `${c} ${className}`;
+	});
+</script>
+
+{#if href !== undefined}
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+	<a {href} class={baseClass} {...rest as HTMLAnchorAttributes}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button class={baseClass} {...rest as HTMLButtonAttributes}>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		padding: 10px 20px;
+		text-decoration: none;
+		font-size: 0.95rem;
+		font-weight: 600;
+		transition: all 0.3s ease;
+		cursor: pointer;
+		border: 1px solid var(--text-color);
+		background-color: transparent;
+		color: var(--text-color);
+		font-family: inherit;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		line-height: 1;
+	}
+
+	.btn.w-full {
+		width: 100%;
+		text-align: center;
+	}
+
+	.btn-sm {
+		padding: 6px 12px;
+		font-size: 0.85rem;
+	}
+
+	.btn-primary {
+		background-color: var(--text-color);
+		color: var(--bg-color, #ffffff);
+	}
+
+	.btn-primary:hover {
+		background-color: var(--accent-color, #419b38);
+		border-color: var(--accent-color, #419b38);
+		color: white;
+	}
+
+	.btn-secondary:hover {
+		border-color: var(--accent-color, #419b38);
+		color: var(--accent-color, #419b38);
+	}
+
+	.btn-danger {
+		border-color: #d9534f;
+		color: #d9534f;
+	}
+
+	.btn-danger:hover {
+		background-color: #d9534f;
+		color: white;
+	}
+
+	.action-btn {
+		display: inline-block;
+		background: transparent;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-family: inherit;
+		font-size: 0.9rem;
+		font-weight: 500;
+		line-height: 1;
+		vertical-align: baseline;
+		color: var(--text-color);
+		cursor: pointer;
+		text-decoration: none;
+		transition:
+			color 0.2s,
+			text-decoration-color 0.2s;
+	}
+
+	.action-btn:hover {
+		color: var(--accent-color, #419b38);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+
+	/* We can target .action-btn.delete directly via class prop */
+	:global(.action-btn.delete) {
+		color: var(--text-color);
+	}
+
+	:global(.action-btn.delete:hover) {
+		color: #d9534f;
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+</style>
diff --git a/src/lib/components/admin/DataTable.svelte b/src/lib/components/admin/DataTable.svelte
new file mode 100644
index 0000000..1e9154b
--- /dev/null
+++ b/src/lib/components/admin/DataTable.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="table-container">
+	<table class="data-table">
+		{@render children()}
+	</table>
+</div>
+
+<style>
+	.table-container {
+		border: 2px solid var(--text-color);
+		overflow-x: auto;
+	}
+
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+		text-align: left;
+	}
+
+	:global(.data-table th),
+	:global(.data-table td) {
+		padding: 16px 20px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.data-table th) {
+		font-weight: 700;
+		text-transform: uppercase;
+		font-size: 0.9rem;
+		letter-spacing: 1px;
+		color: var(--text-color);
+		background-color: transparent;
+	}
+
+	:global(.data-table tr:last-child td) {
+		border-bottom: none;
+	}
+
+	:global(.data-table tbody tr) {
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.data-table tbody tr:hover) {
+		background-color: rgba(0, 0, 0, 0.02);
+	}
+</style>