使用VALKEY缓存登录装唐

public/css/style.css

@@ -10,6 +10,17 @@
     --font-main: 'Inter', sans-serif;
 }
 
+:root[data-theme="dark"] {
+    --bg-dark: #0f172a;
+    --panel-bg: rgba(30, 41, 59, 0.85);
+    --panel-border: rgba(148, 163, 184, 0.15);
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --accent: #3b82f6;
+    --accent-hover: #60a5fa;
+    --accent-glow: rgba(59, 130, 246, 0.35);
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -109,7 +120,7 @@ header p {
     align-items: flex-start;
 }
 
-.dashboard > * {
+.dashboard>* {
     min-width: 0;
 }
 
@@ -247,10 +258,37 @@ header p {
     margin-bottom: 1.5rem;
     color: var(--text-primary);
     font-size: 1.25rem;
-    font-weight: 700;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: space-between;
+}
+
+.banner-title {
+    font-weight: 700;
+}
+
+.user-controls {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+#theme-selector {
+    background: var(--panel-bg);
+    color: var(--text-primary);
+    border: 1px solid var(--panel-border);
+    padding: 0.35rem 0.5rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    outline: none;
 }
 
 .top-banner.hidden {
@@ -699,8 +737,15 @@ header p {
 }
 
 @keyframes statusPulse {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
-    50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
+    }
+
+    50% {
+        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+    }
 }
 
 .control-btn {
@@ -907,8 +952,15 @@ header p {
 }
 
 @keyframes phaseIn {
-    from { opacity: 0; transform: translateY(12px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(12px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .phase-container h3 {
@@ -940,8 +992,15 @@ header p {
 }
 
 @keyframes pulse-download {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.3); }
-    50% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); }
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 0 0 12px rgba(6, 182, 212, 0);
+    }
 }
 
 .phase-icon.transcode-icon {
@@ -951,8 +1010,15 @@ header p {
 }
 
 @keyframes pulse-transcode {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3); }
-    50% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
+    }
 }
 
 /* Transcode stats */
@@ -1089,4 +1155,4 @@ header p {
     .control-seek {
         min-width: 220px;
     }
-}
+}