From 93eac7e146e994a8fac83ff148db5dd1d878811c Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sun, 27 Sep 2026 22:00:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20DataTable=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=9D=A1=E7=BA=B9=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/admin/DataTable.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/admin/DataTable.svelte b/src/lib/components/admin/DataTable.svelte
index 8316ecf..b38f247 100644
--- a/src/lib/components/admin/DataTable.svelte
+++ b/src/lib/components/admin/DataTable.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	let { children }: { children: Snippet } = $props();
+
+	let {
+		children,
+		striped = true
+	}: {
+		children: Snippet;
+		striped?: boolean;
+	} = $props();
 </script>
 
 <div class="table-container">
-	<table class="data-table">
+	<table class="data-table" class:striped>
 		{@render children()}
 	</table>
 </div>
@@ -58,7 +65,11 @@
 		transition: background-color 0.2s ease;
 	}
 
+	:global(.data-table.striped tbody tr:nth-child(even)) {
+		background-color: rgba(0, 0, 0, 0.025);
+	}
+
 	:global(.data-table tbody tr:hover) {
-		background-color: rgba(0, 0, 0, 0.02);
+		background-color: rgba(0, 0, 0, 0.05);
 	}
 </style>