From 6928d9250da805c0d9524083dec2c5465a626359 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sun, 24 May 2026 21:07:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20CSS=20=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=BA=E6=9A=97=E8=89=B2/=E6=B5=85?=
 =?UTF-8?q?=E8=89=B2=E5=8F=8C=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 :root 硬编码的深色变量拆分为 [data-theme="light"] 和 [data-theme="dark"]
两套主题块，新增导航栏、骨架屏、Toast 等预留变量，添加页面入场动画。
---
 frontend/src/styles/global.css | 76 ++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index dddaa4c..5ba89c9 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,4 +1,30 @@
-:root {
+[data-theme="light"] {
+  --bg-primary: #f8f9fa;
+  --bg-secondary: #ffffff;
+  --bg-card: #ffffff;
+  --bg-input: #f1f3f5;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --text-muted: #adb5bd;
+  --accent: #e94560;
+  --accent-hover: #d63851;
+  --accent-dim: rgba(233, 69, 96, 0.1);
+  --success: #2b8a3e;
+  --warning: #e67700;
+  --error: #c92a2a;
+  --border: #dee2e6;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --nav-bg: #ffffff;
+  --nav-border: #e9ecef;
+  --skeleton-base: #e9ecef;
+  --skeleton-shine: #f8f9fa;
+  --toast-bg: #ffffff;
+}
+
+[data-theme="dark"] {
   --bg-primary: #1a1a2e;
   --bg-secondary: #16213e;
   --bg-card: #0f3460;
@@ -15,6 +41,13 @@
   --border: #2a2a4a;
   --radius: 8px;
   --radius-lg: 12px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --nav-bg: #16213e;
+  --nav-border: #2a2a4a;
+  --skeleton-base: #2a2a4a;
+  --skeleton-shine: #3a3a5a;
+  --toast-bg: #1e1e3a;
 }
 
 *,
@@ -32,11 +65,13 @@ body {
   color: var(--text-primary);
   line-height: 1.6;
   min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 a {
   color: var(--accent);
   text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 a:hover {
@@ -60,13 +95,14 @@ select {
   border-radius: var(--radius);
   padding: 10px 14px;
   outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 input:focus,
 textarea:focus,
 select:focus {
   border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
 }
 
 button {
@@ -75,7 +111,7 @@ button {
   border-radius: var(--radius);
   padding: 10px 20px;
   font-weight: 600;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
 button:disabled {
@@ -92,6 +128,10 @@ button:disabled {
   background: var(--accent-hover);
 }
 
+.btn-primary:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 .btn-secondary {
   background: transparent;
   color: var(--text-primary);
@@ -101,6 +141,11 @@ button:disabled {
 .btn-secondary:hover:not(:disabled) {
   border-color: var(--accent);
   color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.btn-secondary:active:not(:disabled) {
+  transform: scale(0.97);
 }
 
 .card {
@@ -108,6 +153,8 @@ button:disabled {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 24px;
+  box-shadow: var(--shadow);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .container {
@@ -115,3 +162,26 @@ button:disabled {
   margin: 0 auto;
   padding: 0 20px;
 }
+
+.table-row-hover {
+  transition: background-color 0.15s ease;
+}
+
+.table-row-hover:hover {
+  background: var(--accent-dim);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.page-enter {
+  animation: fadeIn 0.3s ease forwards;
+}