From 92704d663791e2f4207a12a70052a295ca490b32 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 13 Sep 2026 19:32:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(front):=20=E5=89=8D=E5=8F=B0=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E6=B5=85=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=B9=B6=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=B1=85=E4=B8=AD=E6=8A=95=E7=A8=BF=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=B8=8E=E5=AE=9E=E6=97=B6=E7=A9=BA=E9=97=B2=E6=A1=A3=E6=9C=9F?=
 =?UTF-8?q?=20-=20=E4=B8=BB=E9=A2=98:=20useTheme=20=E9=BB=98=E8=AE=A4=20Mo?=
 =?UTF-8?q?dernLight=20+=20variables.css=20SSR-safe=20=E6=B5=85=E5=80=BC?=
 =?UTF-8?q?=E5=B9=B6=E7=B2=BE=E4=BF=AE=E7=BB=84=E4=BB=B6=E5=AF=B9=E6=AF=94?=
 =?UTF-8?q?=E5=BA=A6=20-=20=E9=A6=96=E9=A1=B5:=20=E6=8F=92=E5=85=A5?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=8A=95=E7=A8=BF=20CTA=20+=20=E7=B4=A7?=
 =?UTF-8?q?=E9=82=BB=E6=A1=A3=E6=9C=9F=E6=A6=82=E8=A7=88=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?(=E4=BB=8A=E6=97=A5=E6=8E=92=E6=9C=9F/=E5=BE=85=E6=92=AD?=
 =?UTF-8?q?=E6=AD=8C=E6=9B=B2/=E7=A9=BA=E9=97=B2=E6=A1=A3=E6=9C=9F?=
 =?UTF-8?q?=E6=95=B0)=20-=20=E6=95=B0=E6=8D=AE:=20useSongs=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20fetchExpectedPlayDates=20=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E7=A9=BA=E9=97=B2=E6=A1=A3=E6=9C=9F=E5=B9=B6=E8=B5=B0=20revisi?=
 =?UTF-8?q?on=20=E8=BD=AE=E8=AF=A2=E5=AE=9E=E6=97=B6=E5=88=B7=E6=96=B0=20-?=
 =?UTF-8?q?=20=E8=A7=86=E8=A7=89:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BC=98?=
 =?UTF-8?q?=E5=85=88=EF=BC=8C=E5=B0=91=E5=9C=86=E8=A7=92=E7=A1=AC=E8=BE=B9?=
 =?UTF-8?q?=E5=87=A0=E4=BD=95=20+=20=E6=A6=82=E8=A7=88=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=203=E2=86=921=20=E5=88=97=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/css/main.css               |  341 +++++++-
 app/assets/css/variables.css          |  319 +++----
 app/components/Songs/RequestForm.vue  |   78 +-
 app/components/Songs/ScheduleList.vue | 1105 +++++++++++--------------
 app/composables/useSongs.ts           |   56 ++
 app/composables/useTheme.ts           |   10 +-
 app/pages/index.vue                   | 1059 +++++++++++++-----------
 package-lock.json                     |  328 +++++---
 package.json                          |    3 +-
 9 files changed, 1836 insertions(+), 1463 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 505427d..4e30d33 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -7,7 +7,7 @@
 
 /* 防止浏览器自动应用深色主题：改为跟随 data-theme 动态覆盖（见 theme-protection.css） */
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
 }
 
 /* 流体背景与全局样式 */
@@ -82,9 +82,9 @@ body::before {
   width: 100%;
   height: 100%;
   background:
-    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.03) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.01) 0%, transparent 50%),
-    radial-gradient(circle at 40% 80%, rgba(120, 119, 198, 0.02) 0%, transparent 50%);
+    radial-gradient(circle at 20% 50%, rgba(79, 70, 229, 0.035) 0%, transparent 55%),
+    radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.025) 0%, transparent 55%),
+    radial-gradient(circle at 40% 80%, rgba(79, 70, 229, 0.02) 0%, transparent 55%);
   z-index: -1;
   pointer-events: none;
 }
@@ -472,3 +472,336 @@ body::before {
     max-width: none !important;
   }
 }
+
+/* =========================================================
+ *  前台浅色模式对比度覆盖（ScheduleList / RequestForm 等组件）
+ *  将所有硬编码的 rgba(255,255,255,*) 白系文字统一替换为
+ *  适配浅底的深灰/主题色，保证 WCAG AA 可读性
+ * =======================================================*/
+html[data-theme='light'],
+html[data-theme='ClassicLight'],
+html[data-theme='ModernLight'] {
+  /* ScheduleList.vue 主区块硬编码颜色校正 */
+  color-scheme: light;
+}
+
+html[data-theme='light'] .schedule-list .date-item,
+html[data-theme='ClassicLight'] .schedule-list .date-item,
+html[data-theme='ModernLight'] .schedule-list .date-item,
+html[data-theme='light'] .song-list .date-item,
+html[data-theme='ClassicLight'] .song-list .date-item,
+html[data-theme='ModernLight'] .song-list .date-item {
+  color: var(--text-secondary) !important;
+}
+
+html[data-theme='light'] .schedule-list .empty-dates,
+html[data-theme='ClassicLight'] .schedule-list .empty-dates,
+html[data-theme='ModernLight'] .schedule-list .empty-dates,
+html[data-theme='light'] .schedule-list .loading,
+html[data-theme='ClassicLight'] .schedule-list .loading,
+html[data-theme='ModernLight'] .schedule-list .loading,
+html[data-theme='light'] .schedule-list .error,
+html[data-theme='ClassicLight'] .schedule-list .error,
+html[data-theme='ModernLight'] .schedule-list .error,
+html[data-theme='light'] .schedule-list .empty,
+html[data-theme='ClassicLight'] .schedule-list .empty,
+html[data-theme='ModernLight'] .schedule-list .empty {
+  color: var(--text-tertiary) !important;
+}
+
+html[data-theme='light'] .schedule-list .playtime-header h4,
+html[data-theme='ClassicLight'] .schedule-list .playtime-header h4,
+html[data-theme='ModernLight'] .schedule-list .playtime-header h4 {
+  color: var(--text-secondary) !important;
+}
+
+html[data-theme='light'] .schedule-list .playtime-time,
+html[data-theme='ClassicLight'] .schedule-list .playtime-time,
+html[data-theme='ModernLight'] .schedule-list .playtime-time {
+  color: var(--text-tertiary) !important;
+}
+
+html[data-theme='light'] .schedule-list .playlist-modal,
+html[data-theme='ClassicLight'] .schedule-list .playlist-modal,
+html[data-theme='ModernLight'] .schedule-list .playlist-modal {
+  border-color: var(--border-secondary) !important;
+}
+
+html[data-theme='light'] .schedule-list .playlist-modal-header,
+html[data-theme='ClassicLight'] .schedule-list .playlist-modal-header,
+html[data-theme='ModernLight'] .schedule-list .playlist-modal-header,
+html[data-theme='light'] .schedule-list .playlist-modal-footer,
+html[data-theme='ClassicLight'] .schedule-list .playlist-modal-footer,
+html[data-theme='ModernLight'] .schedule-list .playlist-modal-footer {
+  border-color: var(--border-secondary) !important;
+}
+
+html[data-theme='light'] .schedule-list .song-meta .meta-secondary,
+html[data-theme='ClassicLight'] .schedule-list .song-meta .meta-secondary,
+html[data-theme='ModernLight'] .schedule-list .song-meta .meta-secondary,
+html[data-theme='light'] .schedule-list .song-meta .meta-placeholder,
+html[data-theme='ClassicLight'] .schedule-list .song-meta .meta-placeholder,
+html[data-theme='ModernLight'] .schedule-list .song-meta .meta-placeholder,
+html[data-theme='light'] .schedule-list .slot-hint,
+html[data-theme='ClassicLight'] .schedule-list .slot-hint,
+html[data-theme='ModernLight'] .schedule-list .slot-hint,
+html[data-theme='light'] .schedule-list .requestor-text,
+html[data-theme='ClassicLight'] .schedule-list .requestor-text,
+html[data-theme='ModernLight'] .schedule-list .requestor-text,
+html[data-theme='light'] .schedule-list .pill-empty,
+html[data-theme='ClassicLight'] .schedule-list .pill-empty,
+html[data-theme='ModernLight'] .schedule-list .pill-empty,
+html[data-theme='light'] .schedule-list .empty-slot,
+html[data-theme='ClassicLight'] .schedule-list .empty-slot,
+html[data-theme='ModernLight'] .schedule-list .empty-slot {
+  color: var(--text-tertiary) !important;
+}
+
+html[data-theme='light'] .schedule-list .chip,
+html[data-theme='ClassicLight'] .schedule-list .chip,
+html[data-theme='ModernLight'] .schedule-list .chip,
+html[data-theme='light'] .schedule-list .tag,
+html[data-theme='ClassicLight'] .schedule-list .tag,
+html[data-theme='ModernLight'] .schedule-list .tag,
+html[data-theme='light'] .schedule-list .badge-soft,
+html[data-theme='ClassicLight'] .schedule-list .badge-soft,
+html[data-theme='ModernLight'] .schedule-list .badge-soft {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-secondary) !important;
+  color: var(--text-secondary) !important;
+}
+
+html[data-theme='light'] .schedule-list .divider-subtle,
+html[data-theme='ClassicLight'] .schedule-list .divider-subtle,
+html[data-theme='ModernLight'] .schedule-list .divider-subtle,
+html[data-theme='light'] .schedule-list .card-border,
+html[data-theme='ClassicLight'] .schedule-list .card-border,
+html[data-theme='ModernLight'] .schedule-list .card-border {
+  border-color: var(--border-secondary) !important;
+}
+
+/* RequestForm / SongList / Dialog 通用硬编码白字校正 */
+html[data-theme='light'] .request-form .label-subtle,
+html[data-theme='ClassicLight'] .request-form .label-subtle,
+html[data-theme='ModernLight'] .request-form .label-subtle,
+html[data-theme='light'] .request-form .hint-subtle,
+html[data-theme='ClassicLight'] .request-form .hint-subtle,
+html[data-theme='ModernLight'] .request-form .hint-subtle,
+html[data-theme='light'] .request-form .placeholder-subtle,
+html[data-theme='ClassicLight'] .request-form .placeholder-subtle,
+html[data-theme='ModernLight'] .request-form .placeholder-subtle,
+html[data-theme='light'] .song-list .muted,
+html[data-theme='ClassicLight'] .song-list .muted,
+html[data-theme='ModernLight'] .song-list .muted,
+html[data-theme='light'] .song-list .subtle-text,
+html[data-theme='ClassicLight'] .song-list .subtle-text,
+html[data-theme='ModernLight'] .song-list .subtle-text {
+  color: var(--text-tertiary) !important;
+}
+
+html[data-theme='light'] .request-form .glass-surface,
+html[data-theme='ClassicLight'] .request-form .glass-surface,
+html[data-theme='ModernLight'] .request-form .glass-surface,
+html[data-theme='light'] .request-form .surface-chip,
+html[data-theme='ClassicLight'] .request-form .surface-chip,
+html[data-theme='ModernLight'] .request-form .surface-chip,
+html[data-theme='light'] .song-list .glass-surface,
+html[data-theme='ClassicLight'] .song-list .glass-surface,
+html[data-theme='ModernLight'] .song-list .glass-surface,
+html[data-theme='light'] .song-list .surface-chip,
+html[data-theme='ClassicLight'] .song-list .surface-chip,
+html[data-theme='ModernLight'] .song-list .surface-chip {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-secondary) !important;
+}
+
+/* =========================================================
+ *  首页 Hero CTA 区样式 — 投稿按钮居中 + 档期概览卡片
+ *  移动端优先 / 少圆角 / 硬边几何 / 现代浅色专业风格
+ * =======================================================*/
+.hero-cta-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 28px 16px 20px;
+  gap: 14px;
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+}
+
+.hero-request-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 240px;
+  width: min(86%, 360px);
+  height: 58px;
+  padding: 0 22px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
+  color: #ffffff;
+  font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  cursor: pointer;
+  user-select: none;
+  box-shadow:
+    0 10px 24px -10px rgba(79, 70, 229, 0.55),
+    0 4px 10px -4px rgba(79, 70, 229, 0.35);
+  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
+    box-shadow 0.18s ease, filter 0.18s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.hero-request-btn:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.03);
+  box-shadow:
+    0 14px 28px -10px rgba(79, 70, 229, 0.62),
+    0 6px 12px -4px rgba(79, 70, 229, 0.42);
+}
+.hero-request-btn:active {
+  transform: translateY(0);
+  filter: brightness(0.97);
+  box-shadow:
+    0 6px 14px -6px rgba(79, 70, 229, 0.5),
+    0 2px 6px -2px rgba(79, 70, 229, 0.35);
+}
+.hero-request-btn .btn-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+.hero-request-btn .btn-icon.pulse::after {
+  content: '';
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
+}
+
+.schedule-overview-card {
+  width: 100%;
+  max-width: 720px;
+  padding: 18px 18px;
+  border-radius: 12px;
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--card-border, #e4e4e7);
+  box-shadow: var(--card-shadow);
+}
+.schedule-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+@media (max-width: 520px) {
+  .schedule-overview-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+.overview-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 14px 16px;
+  border-radius: 10px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
+  min-height: 96px;
+}
+.overview-stat .stat-icon {
+  font-size: 16px;
+  line-height: 1;
+  margin-bottom: 6px;
+  color: var(--text-tertiary);
+}
+.overview-stat .stat-label {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  margin-bottom: 6px;
+  letter-spacing: 0.2px;
+}
+.overview-stat .stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+  letter-spacing: -0.3px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.overview-stat .stat-value .unit {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+  letter-spacing: 0;
+}
+.overview-stat.primary {
+  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(14, 165, 233, 0.06));
+  border-color: rgba(79, 70, 229, 0.15);
+}
+.overview-stat.primary .stat-value {
+  color: var(--primary);
+  font-size: 28px;
+}
+.overview-stat.primary .stat-icon {
+  color: var(--primary);
+}
+.overview-stat .stat-detail {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--text-tertiary);
+  line-height: 1.35;
+}
+.overview-stat .live-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  margin-right: 5px;
+  vertical-align: middle;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  animation: live-pulse 1.6s ease-in-out infinite;
+}
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.65; transform: scale(0.92); }
+}
+
+@media (max-width: 640px) {
+  .hero-cta-section {
+    padding: 22px 12px 16px;
+    gap: 12px;
+  }
+  .hero-request-btn {
+    height: 54px;
+    font-size: 16px;
+    border-radius: 12px;
+    width: 88%;
+  }
+  .schedule-overview-card {
+    padding: 14px 12px;
+    border-radius: 10px;
+  }
+  .overview-stat {
+    padding: 12px 14px;
+    min-height: 84px;
+  }
+  .overview-stat.primary .stat-value {
+    font-size: 26px;
+  }
+}
diff --git a/app/assets/css/variables.css b/app/assets/css/variables.css
index 6db83c9..2159045 100644
--- a/app/assets/css/variables.css
+++ b/app/assets/css/variables.css
@@ -1,69 +1,59 @@
 /* 全局CSS变量 - 统一配色方案 */
+/* SSR-safe 默认值 = ModernLight 浅色，防止 hydration 前出现深色闪屏 */
 :root {
-  /* 主色调 */
-  --primary: #3b82f6;
-  --primary-hover: #2563eb;
-  --primary-light: rgba(59, 130, 246, 0.1);
-  --primary-border: rgba(59, 130, 246, 0.2);
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --primary-light: rgba(79, 70, 229, 0.1);
+  --primary-border: rgba(79, 70, 229, 0.2);
 
-  /* 成功色 */
-  --success: #10b981;
-  --success-hover: #059669;
-  --success-light: rgba(16, 185, 129, 0.1);
-  --success-border: rgba(16, 185, 129, 0.2);
+  --success: #16a34a;
+  --success-hover: #15803d;
+  --success-light: rgba(22, 163, 74, 0.1);
+  --success-border: rgba(22, 163, 74, 0.2);
 
-  /* 警告色 */
-  --warning: #f59e0b;
-  --warning-hover: #d97706;
-  --warning-light: rgba(245, 158, 11, 0.1);
-  --warning-border: rgba(245, 158, 11, 0.2);
+  --warning: #ea580c;
+  --warning-hover: #c2410c;
+  --warning-light: rgba(234, 88, 12, 0.1);
+  --warning-border: rgba(234, 88, 12, 0.2);
 
-  /* 错误色 */
-  --error: #ef4444;
-  --error-hover: #dc2626;
-  --error-light: rgba(239, 68, 68, 0.1);
-  --error-border: rgba(239, 68, 68, 0.2);
+  --error: #e11d48;
+  --error-hover: #be123c;
+  --error-light: rgba(225, 29, 72, 0.1);
+  --error-border: rgba(225, 29, 72, 0.2);
 
-  /* 信息色 */
-  --info: #3b82f6;
-  --info-hover: #2563eb;
-  --info-light: rgba(59, 130, 246, 0.1);
-  --info-border: rgba(59, 130, 246, 0.2);
+  --info: #0ea5e9;
+  --info-hover: #0284c7;
+  --info-light: rgba(14, 165, 233, 0.1);
+  --info-border: rgba(14, 165, 233, 0.2);
 
-  /* 背景色 */
-  --bg-primary: #111111;
-  --bg-secondary: #1a1a1a;
-  --bg-tertiary: #2a2a2a;
-  --bg-quaternary: #3a3a3a;
-  --bg-hover: #1f1f1f;
+  --bg-primary: #fafafa;
+  --bg-secondary: #f4f4f5;
+  --bg-tertiary: #e4e4e7;
+  --bg-quaternary: #d4d4d8;
+  --bg-hover: #eeeeef;
 
-  /* 文字颜色 */
-  --text-primary: #ffffff;
-  --text-secondary: #cccccc;
-  --text-tertiary: #888888;
-  --text-quaternary: #666666;
-  --text-disabled: #444444;
+  --text-primary: #09090b;
+  --text-secondary: #3f3f46;
+  --text-tertiary: #71717a;
+  --text-quaternary: #a1a1aa;
+  --text-disabled: #d4d4d8;
 
-  /* 边框颜色 */
-  --border-primary: #1f1f1f;
-  --border-secondary: #2a2a2a;
-  --border-tertiary: #3a3a3a;
-  --border-quaternary: #4a4a4a;
+  --border-primary: #e4e4e7;
+  --border-secondary: #d4d4d8;
+  --border-tertiary: #a1a1aa;
+  --border-quaternary: #71717a;
 
-  /* 阴影 */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+  --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
+  --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px -4px rgba(0, 0, 0, 0.04);
+  --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 16px -8px rgba(0, 0, 0, 0.05);
 
-  /* 圆角 */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
+  --radius-xl: 10px;
+  --radius-2xl: 12px;
 
-  /* 间距 */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
@@ -72,7 +62,6 @@
   --spacing-2xl: 24px;
   --spacing-3xl: 32px;
 
-  /* 字体大小 */
   --text-xs: 12px;
   --text-sm: 14px;
   --text-base: 16px;
@@ -81,18 +70,15 @@
   --text-2xl: 24px;
   --text-3xl: 30px;
 
-  /* 字体粗细 */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
 
-  /* 过渡动画 */
   --transition-fast: 0.15s ease;
   --transition-normal: 0.2s ease;
   --transition-slow: 0.3s ease;
 
-  /* Z-index层级 */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
@@ -102,81 +88,72 @@
   --z-tooltip: 700;
   --z-toast: 800;
 
-  /* 特殊状态颜色 */
-  --status-pending: #fbbf24;
-  --status-pending-light: rgba(251, 191, 36, 0.1);
-  --status-approved: #10b981;
-  --status-approved-light: rgba(16, 185, 129, 0.1);
-  --status-played: #6b7280;
-  --status-played-light: rgba(107, 114, 128, 0.1);
+  --status-pending: #eab308;
+  --status-pending-light: rgba(234, 179, 8, 0.12);
+  --status-approved: #22c55e;
+  --status-approved-light: rgba(34, 197, 94, 0.12);
+  --status-played: #71717a;
+  --status-played-light: rgba(113, 113, 122, 0.12);
 
-  /* 投票相关颜色 */
   --vote-heart: #ef4444;
   --vote-heart-hover: #dc2626;
   --vote-count: var(--text-tertiary);
 
-  /* 拖拽状态颜色 */
   --drag-over: var(--primary-light);
   --drag-over-border: var(--primary);
   --dragging-opacity: 0.5;
 
-  /* 表格颜色 */
-  --table-header-bg: var(--bg-tertiary);
-  --table-row-hover: var(--bg-hover);
-  --table-border: var(--border-secondary);
-  --table-selected: var(--primary-light);
+  --table-header-bg: #f4f4f5;
+  --table-row-hover: #fafafa;
+  --table-border: #e4e4e7;
+  --table-selected: rgba(79, 70, 229, 0.08);
 
-  /* 卡片颜色 */
-  --card-bg: var(--bg-secondary);
-  --card-border: var(--border-secondary);
-  --card-hover-border: var(--border-tertiary);
-  --card-shadow: var(--shadow-md);
+  --card-bg: #ffffff;
+  --card-border: #e4e4e7;
+  --card-hover-border: #d4d4d8;
+  --card-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
 
-  /* 按钮颜色 */
   --btn-primary-bg: var(--primary);
   --btn-primary-hover: var(--primary-hover);
-  --btn-primary-text: var(--text-primary);
+  --btn-primary-text: #ffffff;
   --btn-primary-border: var(--primary-border);
 
-  --btn-secondary-bg: #3a3a3a;
-  --btn-secondary-hover: #4a4a4a;
-  --btn-secondary-text: var(--text-primary);
-  --btn-secondary-border: #555555;
+  --btn-secondary-bg: #f4f4f5;
+  --btn-secondary-hover: #e4e4e7;
+  --btn-secondary-text: #09090b;
+  --btn-secondary-border: #d4d4d8;
 
   --btn-success-bg: var(--success);
   --btn-success-hover: var(--success-hover);
-  --btn-success-text: var(--text-primary);
+  --btn-success-text: #ffffff;
   --btn-success-border: var(--success-border);
 
   --btn-warning-bg: var(--warning);
   --btn-warning-hover: var(--warning-hover);
-  --btn-warning-text: var(--text-primary);
+  --btn-warning-text: #ffffff;
   --btn-warning-border: var(--warning-border);
 
   --btn-error-bg: var(--error);
   --btn-error-hover: var(--error-hover);
-  --btn-error-text: var(--text-primary);
+  --btn-error-text: #ffffff;
   --btn-error-border: var(--error-border);
 
   --btn-disabled-bg: var(--bg-tertiary);
   --btn-disabled-text: var(--text-disabled);
 
-  /* 输入框颜色 */
-  --input-bg: var(--bg-tertiary);
-  --input-border: var(--border-tertiary);
-  --input-border-focus: var(--primary);
-  --input-text: var(--text-primary);
-  --input-placeholder: var(--text-quaternary);
-  --input-shadow-focus: 0 0 0 3px var(--primary-light);
+  --input-bg: #ffffff;
+  --input-border: #e4e4e7;
+  --input-border-focus: #4f46e5;
+  --input-text: #09090b;
+  --input-placeholder: #a1a1aa;
+  --input-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
 
-  /* 模态框颜色 */
-  --modal-backdrop: rgba(0, 0, 0, 0.7);
+  --modal-backdrop: rgba(0, 0, 0, 0.4);
   --modal-bg: var(--bg-secondary);
   --modal-border: var(--border-secondary);
   --modal-header-border: var(--border-secondary);
   --modal-footer-border: var(--border-secondary);
 
-  /* 通知颜色 */
   --notification-success-bg: var(--success-light);
   --notification-success-border: var(--success-border);
   --notification-success-text: var(--success);
@@ -193,14 +170,51 @@
   --notification-info-border: var(--info-border);
   --notification-info-text: var(--info);
 
-  /* 加载动画颜色 */
   --spinner-primary: var(--primary);
   --spinner-secondary: var(--bg-tertiary);
 
-  /* 滚动条颜色 */
+  --scrollbar-track: #f4f4f5;
+  --scrollbar-thumb: #d4d4d8;
+  --scrollbar-thumb-hover: #a1a1aa;
+}
+
+:root[data-theme='dark'] {
+  --bg-primary: #111111;
+  --bg-secondary: #1a1a1a;
+  --bg-tertiary: #2a2a2a;
+  --bg-quaternary: #3a3a3a;
+  --bg-hover: #1f1f1f;
+
+  --text-primary: #ffffff;
+  --text-secondary: #cccccc;
+  --text-tertiary: #888888;
+  --text-quaternary: #666666;
+  --text-disabled: #444444;
+
+  --border-primary: #1f1f1f;
+  --border-secondary: #2a2a2a;
+  --border-tertiary: #3a3a3a;
+  --border-quaternary: #4a4a4a;
+
+  --card-bg: #1a1a1a;
+  --card-border: #2a2a2a;
+
+  --btn-secondary-bg: #3a3a3a;
+  --btn-secondary-hover: #4a4a4a;
+  --btn-secondary-text: #ffffff;
+  --btn-secondary-border: #555555;
+
+  --input-bg: var(--bg-tertiary);
+  --input-border: var(--border-tertiary);
+  --input-text: var(--text-primary);
+  --input-placeholder: var(--text-quaternary);
+
   --scrollbar-track: var(--bg-tertiary);
   --scrollbar-thumb: var(--bg-quaternary);
   --scrollbar-thumb-hover: #4a4a4a;
+
+  --modal-backdrop: rgba(0, 0, 0, 0.7);
+  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 :root[data-theme='light'],
@@ -398,121 +412,6 @@
   --radius-2xl: 12px;
 }
 
-/* ===== 前台页面专属浅色主题覆盖（广播园艺风格）===== */
-body[data-frontend="true"]:not(.admin-body) {
-  /* 强调色：紫粉蓝渐变点缀（广播园艺三色花） */
-  --accent-purple: #A855F7;
-  --accent-pink: #EC4899;
-  --accent-blue: #3B82F6;
-
-  /* 背景色：纯白为主，留白优先 */
-  --bg-primary: #FFFFFF;
-  --bg-secondary: #F9FAFB;
-  --bg-tertiary: #F3F4F6;
-  --bg-quaternary: #E5E7EB;
-  --bg-hover: #F3F4F6;
-
-  /* 文字颜色：近黑高对比度 */
-  --text-primary: #111827;
-  --text-secondary: #4B5563;
-  --text-tertiary: #6B7280;
-  --text-quaternary: #9CA3AF;
-  --text-disabled: #D1D5DB;
-
-  /* 边框颜色：硬边清晰，4px 网格 */
-  --border-primary: #E5E7EB;
-  --border-secondary: #D1D5DB;
-  --border-tertiary: #9CA3AF;
-  --border-quaternary: #6B7280;
-
-  /* 卡片：白底薄边 + 极轻阴影，不抢视觉 */
-  --card-bg: #FFFFFF;
-  --card-border: #E5E7EB;
-  --card-hover-border: #D1D5DB;
-  --card-shadow: 0 1px 3px 0 rgba(17, 24, 39, 0.04), 0 1px 2px -1px rgba(17, 24, 39, 0.03);
-
-  /* 主色改为深靛蓝（不抢紫粉蓝点缀的风头） */
-  --primary: #4338CA;
-  --primary-hover: #3730A3;
-  --primary-light: rgba(67, 56, 202, 0.08);
-  --primary-border: rgba(67, 56, 202, 0.15);
-
-  /* 信息色沿用主蓝 */
-  --info: #4338CA;
-  --info-hover: #3730A3;
-  --info-light: rgba(67, 56, 202, 0.08);
-  --info-border: rgba(67, 56, 202, 0.15);
-
-  /* 语义色保持经典但略降饱和度 */
-  --success: #059669;
-  --success-hover: #047857;
-  --success-light: rgba(5, 150, 105, 0.08);
-  --success-border: rgba(5, 150, 105, 0.15);
-
-  --warning: #D97706;
-  --warning-hover: #B45309;
-  --warning-light: rgba(217, 119, 6, 0.08);
-  --warning-border: rgba(217, 119, 6, 0.15);
-
-  --error: #DC2626;
-  --error-hover: #B91C1C;
-  --error-light: rgba(220, 38, 38, 0.08);
-  --error-border: rgba(220, 38, 38, 0.15);
-
-  /* 状态色 */
-  --status-pending: #CA8A04;
-  --status-pending-light: rgba(202, 138, 4, 0.08);
-  --status-approved: #059669;
-  --status-approved-light: rgba(5, 150, 105, 0.08);
-  --status-played: #6B7280;
-  --status-played-light: rgba(107, 114, 128, 0.08);
-
-  /* 输入框：纯白底薄边 */
-  --input-bg: #FFFFFF;
-  --input-border: #D1D5DB;
-  --input-border-focus: #4338CA;
-  --input-text: #111827;
-  --input-placeholder: #9CA3AF;
-  --input-shadow-focus: 0 0 0 3px rgba(67, 56, 202, 0.1);
-
-  /* 按钮：次要按钮硬边设计 */
-  --btn-secondary-bg: #F9FAFB;
-  --btn-secondary-hover: #F3F4F6;
-  --btn-secondary-text: #111827;
-  --btn-secondary-border: #D1D5DB;
-
-  /* 模态框与通知 */
-  --modal-backdrop: rgba(17, 24, 39, 0.4);
-  --modal-bg: #FFFFFF;
-  --modal-border: #E5E7EB;
-  --modal-header-border: #E5E7EB;
-  --modal-footer-border: #E5E7EB;
-
-  /* 圆角：硬边设计，上限 rounded-lg (8px) */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 8px;
-  --radius-2xl: 8px;
-
-  /* 阴影：轻盈不厚重 */
-  --shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.04);
-  --shadow-md: 0 4px 6px -1px rgba(17, 24, 39, 0.05), 0 2px 4px -2px rgba(17, 24, 39, 0.03);
-  --shadow-lg: 0 10px 15px -3px rgba(17, 24, 39, 0.05), 0 4px 6px -4px rgba(17, 24, 39, 0.03);
-  --shadow-xl: 0 20px 25px -5px rgba(17, 24, 39, 0.05), 0 8px 10px -6px rgba(17, 24, 39, 0.03);
-
-  /* 滚动条 */
-  --scrollbar-track: #F3F4F6;
-  --scrollbar-thumb: #D1D5DB;
-  --scrollbar-thumb-hover: #9CA3AF;
-
-  /* 表格 */
-  --table-header-bg: #F9FAFB;
-  --table-row-hover: #F9FAFB;
-  --table-border: #E5E7EB;
-  --table-selected: rgba(67, 56, 202, 0.05);
-}
-
 /* 深色主题特定调整 */
 @media (prefers-color-scheme: dark) {
   :root {
diff --git a/app/components/Songs/RequestForm.vue b/app/components/Songs/RequestForm.vue
index 56a8645..5be91bd 100644
--- a/app/components/Songs/RequestForm.vue
+++ b/app/components/Songs/RequestForm.vue
@@ -176,27 +176,19 @@
               :key="item.seq"
               type="button"
               :class="[
-                'seq',
-                item.taken ? 'seq-taken' : '',
-                expectedPlaySequence === String(item.seq) ? 'seq-selected' : ''
+                'sequence-pill',
+                item.taken ? 'taken' : 'free',
+                expectedPlaySequence === String(item.seq) ? 'selected' : ''
               ]"
               :disabled="item.taken"
-              :title="getTakenSequenceTitle(item.seq)"
+              :title="item.taken ? getTakenSequenceTitle(item.seq) : ''"
               @click="chooseExpectedPlaySequence(item.seq)"
             >
               {{ item.seq }}
             </button>
           </div>
 
-          <div v-if="selectedExpectedPlayDate" class="sequence-hint">🟣 可选（紫粉蓝选中） · ⚪ 已占用（灰色带删除线）</div>
-          <div
-            v-if="selectedExpectedPlayDate && expectedPlaySequence"
-            class="sequence-locked"
-            style="margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; background:linear-gradient(90deg, rgba(168,85,247,.08), rgba(236,72,153,.08), rgba(59,130,246,.08)); border:1px solid rgba(168,85,247,.2); color:#7C3AED; font-size:13px; font-weight:700;"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-            已锁定 第 {{ expectedPlaySequence }} 首 位置
-          </div>
+          <div v-if="selectedExpectedPlayDate" class="sequence-hint">绿色可选，红色已占用</div>
         </div>
 
         <!-- 搜索结果容器 -->
@@ -3134,55 +3126,47 @@ defineExpose({
 }
 
 .sequence-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
-  gap: 8px;
-  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-.seq {
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: #fff;
-  border: 1.5px solid #d1d5db;
-  color: #111827;
-  font-size: 16px;
-  font-weight: 800;
-  transition: all 0.12s ease;
-  cursor: pointer;
+.sequence-pill {
+  height: 28px;
+  min-width: 28px;
+  padding: 0 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border-primary);
+  background: rgba(0, 0, 0, 0.25);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'MiSans', sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  transition: all 0.2s ease;
 }
 
-.seq:hover:not(:disabled) {
-  border-color: #4338ca;
-  color: #4338ca;
-  transform: scale(1.03);
+.sequence-pill.free {
+  border-color: rgba(16, 185, 129, 0.35);
+  background: rgba(16, 185, 129, 0.08);
+  color: rgba(16, 185, 129, 0.95);
 }
 
-.seq-taken {
-  background: #f3f4f6;
-  border-color: #e5e7eb;
-  color: #9ca3af;
-  text-decoration: line-through;
+.sequence-pill.taken {
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.08);
+  color: rgba(239, 68, 68, 0.95);
   cursor: not-allowed;
 }
 
-.seq-selected {
-  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
-  color: #fff;
-  border-color: transparent;
-  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.35);
-  transform: scale(1.05);
+.sequence-pill.selected {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+  border-color: rgba(59, 130, 246, 0.6);
 }
 
 .sequence-hint {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
-  margin-top: 8px;
 }
 
 .search-section {
diff --git a/app/components/Songs/ScheduleList.vue b/app/components/Songs/ScheduleList.vue
index ddd70a3..47f1754 100644
--- a/app/components/Songs/ScheduleList.vue
+++ b/app/components/Songs/ScheduleList.vue
@@ -1,206 +1,282 @@
 <template>
-  <div class="schedule-list-container">
-    <div class="date-strip">
-      <button
-        v-for="(date, index) in availableDates"
-        :key="date"
-        :class="['date-pill', { selected: currentDateIndex === index }]"
-        @click="selectDate(index)"
-      >
-        <span>{{ new Date(date + 'T00:00:00').getMonth() + 1 }}月{{ new Date(date + 'T00:00:00').getDate() }}日</span>
-        <span style="font-size:11px; opacity:0.75; font-weight:500;">周{{ ['日','一','二','三','四','五','六'][new Date(date + 'T00:00:00').getDay()] }}</span>
-      </button>
-      <div v-if="availableDates.length === 0" class="empty-dates">暂无排期日期</div>
-    </div>
-
-    <div v-if="isNeteaseLoggedIn" class="playlist-action-row">
-      <button class="add-playlist-btn-mini" type="button" @click="handleAddToPlaylistClick">
-        <Icon :size="14" color="#A855F7" name="music" />
-        <span>添加到歌单</span>
-      </button>
-    </div>
-
-    <div class="playtime-groups">
-      <Transition mode="out-in" name="schedule-fade">
-        <div v-if="loading" key="loading" class="loading-state">加载中...</div>
-
-        <div v-else-if="error" key="error" class="error-state">
-          {{ error }}
-        </div>
-
-        <div v-else-if="!schedules || schedules.length === 0" key="empty-all" class="empty-all-state">
-          <div class="empty-icon">🎵</div>
-          <p>暂无排期信息</p>
-          <p class="empty-hint">点歌后等待管理员安排播出时间</p>
-        </div>
-
-        <div v-else-if="currentDateSchedules.length === 0" key="empty-date" class="empty-all-state">
-          <div class="empty-icon">📅</div>
-          <p>当前日期暂无排期</p>
-          <p class="empty-hint">请选择其他日期查看</p>
-        </div>
-
-        <div v-else :key="currentDate" class="playtime-groups-inner">
-          <template v-if="schedulesByPlayTime && Object.keys(schedulesByPlayTime).length > 0">
-            <section
-              v-for="(schedules, playTimeId) in schedulesByPlayTime"
-              :key="playTimeId"
-              class="playtime-group-section"
+  <div class="schedule-list">
+    <!-- 两列布局：左侧日期选择，右侧排期展示 -->
+    <div class="schedule-container">
+      <!-- 左侧日期选择列表 -->
+      <div class="date-selector">
+        <!-- 移动端日期导航按钮 -->
+        <div class="mobile-date-nav">
+          <div class="nav-capsule">
+            <button :disabled="currentDateIndex === 0" class="nav-btn prev" @click="previousDate">
+              <Icon :size="18" name="chevron-left" />
+            </button>
+            <div class="current-date-display" @click="toggleDatePicker">
+              <span class="date-text" v-html="currentDateFormatted" />
+              <Icon :size="12" class="dropdown-icon" name="chevron-down" />
+            </div>
+            <button
+              :disabled="currentDateIndex >= availableDates.length - 1"
+              class="nav-btn next"
+              @click="nextDate"
             >
-              <div v-if="shouldShowPlayTimeHeader(playTimeId)" class="playtime-group-header">
-                <span class="playtime-name">
-                  <template v-if="playTimeId === 'null'">未指定时段</template>
-                  <template v-else-if="getPlayTimeById(playTimeId)">
+              <Icon :size="18" name="chevron-right" />
+            </button>
+          </div>
+          <button
+            v-if="isNeteaseLoggedIn"
+            class="mobile-action-btn"
+            type="button"
+            title="添加到歌单"
+            @click="handleAddToPlaylistClick"
+          >
+            <Icon :size="20" color="#ffffff" name="music" />
+          </button>
+        </div>
+
+        <!-- 移动端日期选择弹窗 -->
+        <Transition name="date-picker-fade">
+          <div v-if="showDatePicker" class="date-picker-modal">
+            <div class="date-picker-overlay" @click="showDatePicker = false" />
+            <div class="date-picker-content">
+              <div class="date-picker-header">
+                <h3>选择日期</h3>
+                <button class="close-btn" @click="showDatePicker = false">×</button>
+              </div>
+              <div class="date-picker-list">
+                <div
+                  v-for="(date, index) in availableDates"
+                  :key="date"
+                  v-ripple
+                  :class="['date-picker-item', { active: currentDateIndex === index }]"
+                  @click="selectDateAndClose(index)"
+                  v-html="formatDate(date, false)"
+                />
+
+                <div v-if="availableDates.length === 0" class="empty-dates">暂无排期日期</div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+
+        <!-- 桌面端日期列表 -->
+        <div class="date-list">
+          <div
+            v-for="(date, index) in availableDates"
+            :key="date"
+            v-ripple
+            :class="['date-item', { active: currentDateIndex === index }]"
+            @click="selectDate(index)"
+            v-html="formatDate(date)"
+          />
+
+          <div v-if="availableDates.length === 0" class="empty-dates">暂无排期日期</div>
+        </div>
+        <!-- 添加滚动指示器 -->
+        <div class="scroll-indicator-container">
+          <div class="scroll-indicator" />
+        </div>
+      </div>
+
+      <!-- 分隔线 - 添加径向渐变效果 -->
+      <div class="vertical-divider" />
+
+      <!-- 右侧排期内容 -->
+      <div class="schedule-content">
+        <div class="schedule-header">
+          <h2 class="current-date" v-html="currentDateFormatted" />
+          <button
+            v-if="isNeteaseLoggedIn"
+            class="add-playlist-btn"
+            type="button"
+            @click="handleAddToPlaylistClick"
+          >
+            <Icon :size="18" color="#ffffff" name="music" />
+            <span>添加到歌单</span>
+          </button>
+        </div>
+
+        <!-- 使用Transition组件包裹内容 -->
+        <Transition mode="out-in" name="schedule-fade">
+          <div v-if="loading" key="loading" class="loading">加载中...</div>
+
+          <div v-else-if="error" key="error" class="error">
+            {{ error }}
+          </div>
+
+          <div v-else-if="!schedules || schedules.length === 0" key="empty-all" class="empty">
+            <div class="icon mb-4">🎵</div>
+            <p>暂无排期信息</p>
+            <p class="text-sm text-text-secondary">点歌后等待管理员安排播出时间</p>
+          </div>
+
+          <div v-else-if="currentDateSchedules.length === 0" key="empty-date" class="empty">
+            <div class="icon mb-4">📅</div>
+            <p>当前日期暂无排期</p>
+            <p>请选择其他日期查看</p>
+          </div>
+
+          <div v-else :key="currentDate" class="schedule-items">
+            <!-- 按播出时段分组显示 -->
+            <template v-if="schedulesByPlayTime && Object.keys(schedulesByPlayTime).length > 0">
+              <div
+                v-for="(schedules, playTimeId) in schedulesByPlayTime"
+                :key="playTimeId"
+                class="playtime-group"
+              >
+                <div v-if="shouldShowPlayTimeHeader(playTimeId)" class="playtime-header">
+                  <h4 v-if="playTimeId === 'null'">未指定时段</h4>
+                  <h4 v-else-if="getPlayTimeById(playTimeId)">
                     {{ getPlayTimeById(playTimeId).name }}
                     <span
                       v-if="
                         getPlayTimeById(playTimeId).startTime || getPlayTimeById(playTimeId).endTime
                       "
-                      class="playtime-time-range"
+                      class="playtime-time"
                     >
                       ({{ formatPlayTimeRange(getPlayTimeById(playTimeId)) }})
                     </span>
-                  </template>
-                  <template v-else>{{ playTimeId }}</template>
-                </span>
-                <span class="playtime-count-badge">{{ schedules.length }} 首</span>
-              </div>
+                  </h4>
+                </div>
 
-              <div class="playtime-group-songs">
-                <div v-if="schedules.length === 0" class="empty-state">该时段暂无排期 📻</div>
-                <div
-                  v-for="schedule in schedules"
-                  :key="schedule.id"
-                  :class="[
-                    'schedule-song-card',
-                    {
-                      'card-played': schedule.song.played && schedule.song.replayRequestCount === 0,
-                      'card-playing': isCurrentPlaying(schedule.song.id)
-                    }
-                  ]"
-                >
-                  <div class="song-sequence-num">{{ schedule.sequence || '–' }}</div>
-
-                  <div class="song-main-info">
-                    <div
-                      class="song-title"
-                      :title="schedule.song.title + ' - ' + schedule.song.artist"
-                    >
-                      {{ schedule.song.title }}
-                      <span
-                        v-if="schedule.song.replayRequestCount > 0"
-                        class="replay-badge"
-                        title="重播歌曲"
-                      >
-                        <Icon name="repeat" :size="14" />
-                      </span>
-                    </div>
-                    <div class="song-meta">
-                      <span class="song-artist">{{ schedule.song.artist }}</span>
-                      <span class="meta-dot">·</span>
-                      <template v-if="schedule.song.replayRequestCount > 0">
-                        <span
-                          :title="
-                            '重播申请人：' +
-                            (schedule.song.replayRequesters || [])
-                              .map((r) => r.displayName || r.name)
-                              .join('、')
-                          "
-                          class="requester-tag"
-                        >
-                          申请人：{{
-                            (schedule.song.replayRequesters || [])[0]
-                              ? (schedule.song.replayRequesters[0].displayName ||
-                                  schedule.song.replayRequesters[0].name) +
-                                (schedule.song.replayRequestCount > 1 ? '...' : '')
-                              : '未知'
-                          }}
-                        </span>
-                      </template>
-                      <template v-else>
-                        <span
-                          :title="
-                            (schedule.song.collaborators && schedule.song.collaborators.length > 0
-                              ? '主投稿人: '
-                              : '投稿人: ') +
-                            schedule.song.requester +
-                            (schedule.song.collaborators && schedule.song.collaborators.length
-                              ? '\n联合投稿: ' +
-                                schedule.song.collaborators
-                                  .map((c) => c.displayName || c.name)
-                                  .join(', ')
-                              : '')
-                          "
-                          class="requester-tag"
-                        >
-                          投稿人：{{ schedule.song.requester }}
-                          <span
-                            v-if="
-                              schedule.song.collaborators &&
-                              schedule.song.collaborators.length > 0
-                            "
+                <div class="song-cards">
+                  <div
+                    v-for="schedule in schedules"
+                    :key="schedule.id"
+                    :class="{
+                      played: schedule.song.played && schedule.song.replayRequestCount === 0,
+                      playing: isCurrentPlaying(schedule.song.id)
+                    }"
+                    class="song-card"
+                  >
+                    <div class="song-card-main">
+                      <!-- 歌曲封面 -->
+                      <div class="song-cover" @click="togglePlaySong(schedule.song)">
+                        <template v-if="schedule.song.cover">
+                          <img
+                            :alt="schedule.song.title"
+                            :src="convertToHttps(schedule.song.cover)"
+                            class="cover-image"
+                            referrerpolicy="no-referrer"
+                            @error="handleImageError($event, schedule.song)"
                           >
-                            &
-                            {{
-                              schedule.song.collaborators
-                                .map((c) => c.displayName || c.name)
-                                .join(' & ')
+                        </template>
+                        <div v-else class="text-cover">
+                          {{ getFirstChar(schedule.song.title) }}
+                        </div>
+                        <!-- 播放按钮 (仅桌面端显示) -->
+                        <div
+                          v-if="
+                            (schedule.song.musicPlatform && schedule.song.musicId) ||
+                            schedule.song.playUrl
+                          "
+                          class="play-button-overlay"
+                        >
+                          <button
+                            :title="isCurrentPlaying(schedule.song.id) ? '暂停' : '播放'"
+                            class="play-button"
+                          >
+                            <Icon
+                              v-if="isCurrentPlaying(schedule.song.id)"
+                              :size="16"
+                              color="white"
+                              name="pause"
+                            />
+                            <Icon v-else :size="16" color="white" name="play" />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div class="song-info">
+                        <h3
+                          :title="schedule.song.title + ' - ' + schedule.song.artist"
+                          class="song-title"
+                        >
+                          <span class="title-text"
+                            >{{ schedule.song.title }} - {{ schedule.song.artist }}</span
+                          >
+                          <!-- 重播标识 -->
+                          <span
+                            v-if="schedule.song.replayRequestCount > 0"
+                            class="replay-badge"
+                            title="重播歌曲"
+                          >
+                            <Icon name="repeat" :size="14" />
+                          </span>
+                        </h3>
+                        <div class="song-meta">
+                          <span
+                            v-if="schedule.song.replayRequestCount > 0"
+                            :title="
+                              '重播申请人：' +
+                              (schedule.song.replayRequesters || [])
+                                .map((r) => r.displayName || r.name)
+                                .join('、')
+                            "
+                            class="requester replay-requester"
+                          >
+                            申请人：{{
+                              (schedule.song.replayRequesters || [])[0]
+                                ? (schedule.song.replayRequesters[0].displayName ||
+                                    schedule.song.replayRequesters[0].name) +
+                                  (schedule.song.replayRequestCount > 1 ? '...' : '')
+                                : '未知'
                             }}
                           </span>
-                        </span>
-                      </template>
+                          <span
+                            v-else
+                            :title="
+                              (schedule.song.collaborators && schedule.song.collaborators.length > 0
+                                ? '主投稿人: '
+                                : '投稿人: ') +
+                              schedule.song.requester +
+                              (schedule.song.collaborators && schedule.song.collaborators.length
+                                ? '\n联合投稿: ' +
+                                  schedule.song.collaborators
+                                    .map((c) => c.displayName || c.name)
+                                    .join(', ')
+                                : '')
+                            "
+                            class="requester"
+                          >
+                            投稿人：{{ schedule.song.requester }}
+                            <span
+                              v-if="
+                                schedule.song.collaborators &&
+                                schedule.song.collaborators.length > 0
+                              "
+                            >
+                              &
+                              {{
+                                schedule.song.collaborators
+                                  .map((c) => c.displayName || c.name)
+                                  .join(' & ')
+                              }}
+                            </span>
+                          </span>
+                        </div>
+                      </div>
+
+                      <!-- 人数展示 -->
+                      <div class="action-area">
+                        <div class="vote-count">
+                          <span class="count">{{
+                            schedule.song.replayRequestCount > 0
+                              ? schedule.song.replayRequestCount
+                              : schedule.song.voteCount
+                          }}</span>
+                          <span class="label">{{
+                            schedule.song.replayRequestCount > 0 ? '重播' : '热度'
+                          }}</span>
+                        </div>
+                      </div>
                     </div>
                   </div>
-
-                  <div
-                    v-if="
-                      (schedule.song.musicPlatform && schedule.song.musicId) ||
-                      schedule.song.playUrl
-                    "
-                    class="song-audio-btn"
-                    @click.stop="togglePlaySong(schedule.song)"
-                  >
-                    <button
-                      class="audio-btn-inner"
-                      :title="isCurrentPlaying(schedule.song.id) ? '暂停' : '试听'"
-                      type="button"
-                    >
-                      <Icon
-                        v-if="isCurrentPlaying(schedule.song.id)"
-                        :size="14"
-                        color="#A855F7"
-                        name="pause"
-                      />
-                      <Icon v-else :size="14" color="#A855F7" name="play" />
-                    </button>
-                  </div>
-
-                  <div class="status-badges">
-                    <span
-                      :class="[
-                        'status-badge',
-                        schedule.status === 'APPROVED'
-                          ? 'status-approved'
-                          : schedule.status === 'PENDING'
-                            ? 'status-pending'
-                            : 'status-played'
-                      ]"
-                    >
-                      {{
-                        schedule.status === 'APPROVED'
-                          ? '排期中'
-                          : schedule.status === 'PENDING'
-                            ? '审核中'
-                            : '已播出'
-                      }}
-                    </span>
-                  </div>
                 </div>
               </div>
-            </section>
-          </template>
-        </div>
-      </Transition>
+            </template>
+          </div>
+        </Transition>
+      </div>
     </div>
   </div>
 
@@ -224,6 +300,7 @@
           class="relative w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl flex flex-col max-h-[90vh] overflow-hidden"
           @click.stop
         >
+          <!-- 头部 -->
           <div class="flex items-center justify-between p-8 pb-4">
             <div class="flex items-center gap-4">
               <div
@@ -242,6 +319,7 @@
             </button>
           </div>
 
+          <!-- 主体 -->
           <div class="flex-1 overflow-y-auto p-8 pt-4 custom-scrollbar">
             <div
               v-if="!isNeteaseLoggedIn"
@@ -256,6 +334,7 @@
             </div>
 
             <div v-else class="space-y-8">
+              <!-- 用户信息栏 -->
               <div
                 v-if="neteaseUser"
                 class="flex items-center p-4 bg-zinc-800/30 border border-zinc-800/50 rounded-2xl"
@@ -282,7 +361,9 @@
                 </div>
               </div>
 
+              <!-- 歌单操作区域 -->
               <div class="space-y-6">
+                <!-- 选择歌单 -->
                 <div class="space-y-3">
                   <label class="text-[10px] font-black text-zinc-500 uppercase tracking-widest ml-1"
                     >选择目标歌单</label
@@ -334,6 +415,7 @@
                   >
                 </div>
 
+                <!-- 创建新歌单 -->
                 <div class="space-y-4">
                   <label class="text-[10px] font-black text-zinc-500 uppercase tracking-widest ml-1"
                     >创建新歌单</label
@@ -372,6 +454,7 @@
                 </div>
               </div>
 
+              <!-- 歌曲选择区域 -->
               <div class="space-y-4">
                 <div class="flex items-center justify-between px-1">
                   <label class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">
@@ -447,6 +530,7 @@
             </div>
           </div>
 
+          <!-- 底部操作栏 -->
           <div v-if="isNeteaseLoggedIn" class="p-8 pt-0">
             <div class="flex gap-3">
               <button
@@ -515,13 +599,17 @@ const props = defineProps({
   }
 })
 
+// 音频播放相关 - 使用全局音频播放器
 const audioPlayer = useAudioPlayer()
 const { checkNeteaseLoginStatus: updateGlobalNeteaseStatus } = useAudioQuality()
 
+// 获取播放时段启用状态
 const { playTimeEnabled } = useSongs()
 
+// 确保schedules不为null
 const safeSchedules = computed(() => props.schedules || [])
 
+// 日期选择器状态
 const showDatePicker = ref(false)
 
 const showPlaylistModal = ref(false)
@@ -553,6 +641,7 @@ const confirmDialog = ref({
 const isInitialized = ref(false)
 const lastSelectedDate = ref('')
 
+// 按日期分组排期
 const safeGroupedSchedules = computed(() => {
   const groups = {}
 
@@ -564,6 +653,7 @@ const safeGroupedSchedules = computed(() => {
     if (!schedule || !schedule.playDate) return
 
     try {
+      // 使用UTC时间处理日期
       const scheduleDate = new Date(schedule.playDate)
       const date = `${scheduleDate.getFullYear()}-${String(scheduleDate.getMonth() + 1).padStart(2, '0')}-${String(scheduleDate.getDate()).padStart(2, '0')}`
 
@@ -572,9 +662,11 @@ const safeGroupedSchedules = computed(() => {
       }
       groups[date].push(schedule)
     } catch (err) {
+      // 无需在此处记录错误
     }
   })
 
+  // 按日期排序
   const sortedGroups = {}
   Object.keys(groups)
     .sort()
@@ -585,21 +677,25 @@ const safeGroupedSchedules = computed(() => {
   return sortedGroups
 })
 
+// 日期导航
 const availableDates = computed(() => {
   return Object.keys(safeGroupedSchedules.value).sort()
 })
 
 const currentDateIndex = ref(0)
 
+// 当前显示的日期
 const currentDate = computed(() => {
   if (availableDates.value.length === 0) return ''
   return availableDates.value[currentDateIndex.value]
 })
 
+// 当日期列表变化时切换到今天日期
 watch(
   availableDates,
   (newDates) => {
     if (newDates.length > 0) {
+      // 如果已经初始化过且有上次选中的日期，尝试保持
       if (isInitialized.value && lastSelectedDate.value) {
         const index = newDates.indexOf(lastSelectedDate.value)
         if (index !== -1) {
@@ -607,16 +703,18 @@ watch(
           return
         }
       }
+      // 否则（首次加载或选中日期不存在），执行自动跳转逻辑
       findAndSelectTodayOrClosestDate()
     }
   },
   { immediate: false }
 )
 
+// 自动滚动到指定日期项的函数
 const scrollToDateItem = async (index) => {
-  if (isMobile.value) return
+  if (isMobile.value) return // 移动端不需要滚动日期列表
 
-  await nextTick()
+  await nextTick() // 等待DOM更新
 
   const dateList = document.querySelector('.date-list')
   const dateItems = document.querySelectorAll('.date-item')
@@ -627,16 +725,19 @@ const scrollToDateItem = async (index) => {
   const listRect = dateList.getBoundingClientRect()
   const itemRect = targetItem.getBoundingClientRect()
 
+  // 计算目标位置，使选中项居中显示
   const listCenter = listRect.height / 2
   const itemCenter = itemRect.height / 2
   const scrollTop = dateList.scrollTop + (itemRect.top - listRect.top) - listCenter + itemCenter
 
+  // 平滑滚动到目标位置
   dateList.scrollTo({
     top: Math.max(0, scrollTop),
     behavior: 'smooth'
   })
 }
 
+// 提取日期选择逻辑到独立函数
 const findAndSelectTodayOrClosestDate = async () => {
   if (availableDates.value.length === 0) return
 
@@ -645,11 +746,13 @@ const findAndSelectTodayOrClosestDate = async () => {
 
   let selectedIndex = 0
 
+  // 在宽屏模式下，优先显示最近的日期（今天或之后最近的日期）
   if (!isMobile.value) {
     const todayTime = today.getTime()
     let closestFutureIndex = -1
     let minFutureDiff = Number.MAX_SAFE_INTEGER
 
+    // 查找今天或之后最近的日期
     availableDates.value.forEach((dateStr, index) => {
       const dateParts = dateStr.split('-')
       const date = new Date(
@@ -659,15 +762,18 @@ const findAndSelectTodayOrClosestDate = async () => {
       )
       const diff = date.getTime() - todayTime
 
+      // 优先选择今天或未来的日期
       if (diff >= 0 && diff < minFutureDiff) {
         minFutureDiff = diff
         closestFutureIndex = index
       }
     })
 
+    // 如果找到了今天或未来的日期，选择它
     if (closestFutureIndex >= 0) {
       selectedIndex = closestFutureIndex
     } else {
+      // 如果没有今天或未来的日期，选择最近的过去日期
       let closestPastIndex = -1
       let minPastDiff = Number.MAX_SAFE_INTEGER
 
@@ -691,11 +797,14 @@ const findAndSelectTodayOrClosestDate = async () => {
       }
     }
   } else {
+    // 移动端保持原有逻辑：优先选择今天
     const todayIndex = availableDates.value.findIndex((date) => date === todayStr)
 
     if (todayIndex >= 0) {
+      // 如果找到今天的日期，则选择它
       selectedIndex = todayIndex
     } else {
+      // 如果今天没有排期，找到最接近今天的日期
       const todayTime = today.getTime()
       let closestDate = -1
       let minDiff = Number.MAX_SAFE_INTEGER
@@ -721,19 +830,24 @@ const findAndSelectTodayOrClosestDate = async () => {
     }
   }
 
+  // 设置选中的日期索引
   currentDateIndex.value = selectedIndex
 
+  // 标记为已初始化并保存选中日期
   isInitialized.value = true
   lastSelectedDate.value = availableDates.value[selectedIndex]
 
+  // 自动滚动到选中的日期项
   await scrollToDateItem(selectedIndex)
 }
 
+// 格式化当前日期
 const currentDateFormatted = computed(() => {
   if (!currentDate.value) return '无日期'
   return formatDate(currentDate.value, isMobile.value)
 })
 
+// 当前日期的排期
 const currentDateSchedules = computed(() => {
   if (!currentDate.value) return []
   return safeGroupedSchedules.value[currentDate.value] || []
@@ -758,41 +872,50 @@ const neteaseSongs = computed(() => {
   return Array.from(map.values())
 })
 
+// 上一个日期
 const previousDate = async () => {
   if (currentDateIndex.value > 0) {
     currentDateIndex.value--
+    // 在桌面端自动滚动到新选中的日期
     if (!isMobile.value) {
       await scrollToDateItem(currentDateIndex.value)
     }
   }
 }
 
+// 下一个日期
 const nextDate = async () => {
   if (currentDateIndex.value < availableDates.value.length - 1) {
     currentDateIndex.value++
+    // 在桌面端自动滚动到新选中的日期
     if (!isMobile.value) {
       await scrollToDateItem(currentDateIndex.value)
     }
   }
 }
 
+// 选择特定日期
 const selectDate = async (index) => {
   currentDateIndex.value = index
   lastSelectedDate.value = availableDates.value[index]
   showDatePicker.value = false
 
+  // 自动滚动到选中的日期项
   await scrollToDateItem(index)
 }
 
+// 切换日期选择器显示状态
 const toggleDatePicker = async () => {
   showDatePicker.value = !showDatePicker.value
 
+  // 如果弹窗打开，自动滚动到当前选中的日期
   if (showDatePicker.value) {
-    await nextTick()
+    await nextTick() // 等待DOM渲染完成
     scrollToSelectedDateInModal()
   }
 }
 
+// 在移动端弹窗中滚动到选中的日期项
 const scrollToSelectedDateInModal = () => {
   const modalList = document.querySelector('.date-picker-list')
   const modalItems = document.querySelectorAll('.date-picker-item')
@@ -803,33 +926,40 @@ const scrollToSelectedDateInModal = () => {
   const listRect = modalList.getBoundingClientRect()
   const itemRect = targetItem.getBoundingClientRect()
 
+  // 计算目标位置，使选中项在可视区域内，并增加向下偏移
   const listCenter = listRect.height / 2
   const itemCenter = itemRect.height / 2
   const downwardOffset = 280
   const scrollTop =
     modalList.scrollTop + (itemRect.top - listRect.top) - listCenter + itemCenter + downwardOffset
 
+  // 确保滚动位置不会超出边界
   const maxScrollTop = modalList.scrollHeight - modalList.clientHeight
   const finalScrollTop = Math.max(0, Math.min(scrollTop, maxScrollTop))
 
+  // 平滑滚动到目标位置
   modalList.scrollTo({
     top: finalScrollTop,
     behavior: 'smooth'
   })
 }
 
+// 选择日期并关闭弹窗
 const selectDateAndClose = (index) => {
   currentDateIndex.value = index
   lastSelectedDate.value = availableDates.value[index]
   showDatePicker.value = false
 }
 
+// 重置日期到第一天
 const resetDate = () => {
   currentDateIndex.value = 0
 }
 
+// 格式化日期
 const formatDate = (dateStr, isMobile = false) => {
   try {
+    // 解析日期字符串
     const parts = dateStr.split('-')
     if (parts.length !== 3) {
       throw new Error('无效的日期格式')
@@ -839,8 +969,10 @@ const formatDate = (dateStr, isMobile = false) => {
     const month = parseInt(parts[1])
     const day = parseInt(parts[2])
 
+    // 创建日期对象
     const date = new Date(year, month - 1, day)
 
+    // 检查日期是否有效
     if (isNaN(date.getTime())) {
       throw new Error('无效的日期')
     }
@@ -848,6 +980,7 @@ const formatDate = (dateStr, isMobile = false) => {
     const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
     const weekday = weekdays[date.getDay()]
 
+    // 移动端显示更紧凑的格式
     if (isMobile) {
       return `${month}月${day}日 ${weekday}`
     }
@@ -858,15 +991,18 @@ const formatDate = (dateStr, isMobile = false) => {
   }
 }
 
+// 添加窗口大小变化监听
 let resizeTimer = null
 const isMobile = ref(window.innerWidth <= 768)
 
+// 定义窗口大小变化处理函数
 const handleResize = () => {
   clearTimeout(resizeTimer)
   resizeTimer = setTimeout(async () => {
     const wasMobile = isMobile.value
     isMobile.value = window.innerWidth <= 768
 
+    // 如果从移动端切换到桌面端，需要重新滚动到当前选中的日期
     if (wasMobile && !isMobile.value && availableDates.value.length > 0) {
       await nextTick()
       await scrollToDateItem(currentDateIndex.value)
@@ -874,19 +1010,24 @@ const handleResize = () => {
   }, 100)
 }
 
+// 监听窗口大小变化
 onMounted(async () => {
   window.addEventListener('resize', handleResize)
+  // 初始化移动状态
   isMobile.value = window.innerWidth <= 768
 
+  // 寻找今天的日期并自动选择 - 初始加载时也尝试一次
   findAndSelectTodayOrClosestDate()
 
   checkNeteaseLoginStatus()
 })
 
+// 组件销毁前移除事件监听器
 onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize)
 })
 
+// 处理图片加载错误
 const handleImageError = (event, song) => {
   if (event?.target) {
     event.target.style.display = 'none'
@@ -897,6 +1038,7 @@ const handleImageError = (event, song) => {
   }
 }
 
+// 获取歌曲标题的第一个字符作为封面
 const getFirstChar = (title) => {
   if (!title) return '音'
   return title.trim().charAt(0)
@@ -909,6 +1051,7 @@ const checkNeteaseLoginStatus = () => {
   if (cookie) {
     neteaseCookie.value = cookie
     isNeteaseLoggedIn.value = true
+    // 同步全局网易云登录状态
     updateGlobalNeteaseStatus()
     if (userStr) {
       try {
@@ -921,6 +1064,7 @@ const checkNeteaseLoginStatus = () => {
     neteaseCookie.value = ''
     neteaseUser.value = null
     isNeteaseLoggedIn.value = false
+    // 同步全局网易云登录状态
     updateGlobalNeteaseStatus()
   }
 }
@@ -1055,6 +1199,7 @@ const handleDeletePlaylist = async () => {
             const text = message ? `歌单删除失败：${message}` : '歌单删除失败'
             window.$showNotification(text, 'error')
           }
+          // 失败也关闭弹窗，或者保留让用户重试？通常关闭比较好，避免死循环
           closeConfirmDialog()
         }
       } catch (error) {
@@ -1071,6 +1216,7 @@ const handleDeletePlaylist = async () => {
 
 const closeConfirmDialog = () => {
   confirmDialog.value.show = false
+  // 延迟清除回调，防止动画期间触发
   setTimeout(() => {
     confirmDialog.value.onConfirm = null
   }, 300)
@@ -1143,20 +1289,27 @@ const handleAddSongsToPlaylist = async () => {
   }
 }
 
+// 切换歌曲播放/暂停
 const togglePlaySong = async (song) => {
+  // 检查是否为当前歌曲且正在播放
   if (audioPlayer.isCurrentSong(song.id) && audioPlayer.getPlayingStatus().value) {
+    // 如果正在播放，则暂停
     audioPlayer.pauseSong()
     return
   }
 
+  // 如果是当前歌曲但已暂停，则恢复播放
   if (audioPlayer.isCurrentSong(song.id) && !audioPlayer.getPlayingStatus().value) {
+    // 检查当前全局歌曲是否有URL
     const currentGlobalSong = audioPlayer.getCurrentSong().value
     if (
       currentGlobalSong &&
       (currentGlobalSong.musicUrl)
     ) {
+      // 如果有URL或者是哔哩哔哩视频，直接恢复播放
       audioPlayer.playSong(currentGlobalSong)
     } else {
+      // 如果没有URL，重新获取
       if ((song.musicPlatform && song.musicId) || song.playUrl) {
         try {
           const url = await getMusicUrl(song)
@@ -1182,6 +1335,7 @@ const togglePlaySong = async (song) => {
     return
   }
 
+  // 如果有平台和ID信息或playUrl，动态获取URL
   if ((song.musicPlatform && song.musicId) || song.playUrl) {
     const buildPlaylistForSong = (targetSong) => {
       const currentTimeSlot = getCurrentTimeSlot(targetSong)
@@ -1219,6 +1373,7 @@ const togglePlaySong = async (song) => {
           playlist[songIndex] = playableSong
         }
 
+        // 后台预取后续歌曲的播放链接（不阻塞当前播放）
         ;(async () => {
           for (let i = songIndex + 1; i < playlist.length; i++) {
             const s = playlist[i]
@@ -1251,6 +1406,7 @@ const togglePlaySong = async (song) => {
   }
 }
 
+// 获取歌曲所在的时段
 const getCurrentTimeSlot = (song) => {
   if (!schedulesByPlayTime.value) return null
 
@@ -1265,18 +1421,22 @@ const getCurrentTimeSlot = (song) => {
   return null
 }
 
+// 动态获取音乐URL
 const getMusicUrl = async (song) => {
   const { musicPlatform: platform, musicId, playUrl, sourceInfo } = song
 
+  // 如果有自定义播放链接，优先使用
   if (playUrl && playUrl.trim()) {
     console.log(`[ScheduleList] 使用自定义播放链接: ${playUrl}`)
     return playUrl.trim()
   }
 
+  // 如果没有playUrl，检查platform和musicId是否有效
   if (!platform || !musicId) {
     throw new Error('歌曲缺少音乐平台或音乐ID信息，无法获取播放链接')
   }
 
+  // 检查是否为播客内容
   const isPodcast =
     platform === 'netease-podcast' ||
     sourceInfo?.type === 'voice' ||
@@ -1286,12 +1446,15 @@ const getMusicUrl = async (song) => {
   return resolveMusicUrl(platform, musicId, undefined, options)
 }
 
+// 判断当前是否正在播放指定ID的歌曲
 const isCurrentPlaying = (songId) => {
   return audioPlayer.isCurrentPlaying(songId)
 }
 
+// 格式化播放时间
 const formatPlayTime = (schedule) => {
   try {
+    // 根据歌曲播放状态显示不同文本
     if (schedule.song && schedule.song.played) {
       return '已播放'
     } else {
@@ -1302,6 +1465,7 @@ const formatPlayTime = (schedule) => {
   }
 }
 
+// 按播出时段分组的排期
 const schedulesByPlayTime = computed(() => {
   if (!currentDateSchedules.value || currentDateSchedules.value.length === 0) {
     return null
@@ -1309,22 +1473,29 @@ const schedulesByPlayTime = computed(() => {
 
   const grouped = {}
 
+  // 先对排期按时段和序号排序
   const sortedSchedules = [...currentDateSchedules.value].sort((a, b) => {
+    // 先按时段分组，确保转换为字符串
     const playTimeIdA =
       a.playTimeId !== null && a.playTimeId !== undefined ? String(a.playTimeId) : 'null'
     const playTimeIdB =
       b.playTimeId !== null && b.playTimeId !== undefined ? String(b.playTimeId) : 'null'
 
     if (playTimeIdA !== playTimeIdB) {
+      // 未指定时段排在最后
       if (playTimeIdA === 'null') return 1
       if (playTimeIdB === 'null') return -1
+      // 使用数字比较而不是字符串比较
       return parseInt(playTimeIdA) - parseInt(playTimeIdB)
     }
 
+    // 时段相同则按序号排序
     return a.sequence - b.sequence
   })
 
+  // 分组
   for (const schedule of sortedSchedules) {
+    // 确保正确处理播放时段ID
     const playTimeId =
       schedule.playTimeId !== null && schedule.playTimeId !== undefined
         ? String(schedule.playTimeId)
@@ -1340,6 +1511,7 @@ const schedulesByPlayTime = computed(() => {
   return grouped
 })
 
+// 根据ID获取播出时段信息
 const getPlayTimeById = (id) => {
   if (id === 'null') return null
 
@@ -1347,17 +1519,21 @@ const getPlayTimeById = (id) => {
     const numId = parseInt(id)
     if (isNaN(numId)) return null
 
+    // 从排期中查找
     for (const schedule of currentDateSchedules.value) {
+      // 确保正确比较
       if (schedule.playTimeId === numId && schedule.playTime) {
         return schedule.playTime
       }
     }
   } catch (err) {
+    // 无需在此处记录错误
   }
 
   return null
 }
 
+// 格式化播出时段时间范围
 const formatPlayTimeRange = (playTime) => {
   if (!playTime) return ''
 
@@ -1372,13 +1548,16 @@ const formatPlayTimeRange = (playTime) => {
   return '不限时间'
 }
 
+// 判断是否显示播放时段标题
 const shouldShowPlayTimeHeader = (playTimeId) => {
+  // 如果播放时段功能未启用且是未指定时段，则不显示
   if (!playTimeEnabled.value && playTimeId === 'null') {
     return false
   }
-  return true
+  return true // 显示其他所有时段
 }
 
+// 波纹效果指令
 const vRipple = {
   mounted(el) {
     el.addEventListener('click', (e) => {
@@ -1395,7 +1574,7 @@ const vRipple = {
 
       setTimeout(() => {
         ripple.remove()
-      }, 600)
+      }, 600) // 与CSS动画时间一致
     })
   }
 }
@@ -1411,10 +1590,11 @@ const vRipple = {
   max-width: none !important;
   display: flex;
   flex-direction: column;
-  flex: 1;
-  min-height: 0;
+  flex: 1; /* 占满父容器高度 */
+  min-height: 0; /* 允许 flex 子元素收缩 */
 }
 
+/* 学期选择器样式 */
 .semester-selector {
   display: flex;
   align-items: center;
@@ -1473,41 +1653,44 @@ const vRipple = {
   padding: 0.5rem;
 }
 
+/* 两列布局容器 */
 .schedule-container {
   display: flex;
-  gap: 0;
+  gap: 0; /* 移除间隙，使用分隔线 */
   width: 100% !important;
   box-sizing: border-box;
   margin: 0 !important;
   padding: 0 !important;
   max-width: none !important;
-  flex: 1;
-  min-height: 0;
+  flex: 1; /* 占据剩余空间 */
+  min-height: 0; /* 允许 flex 子元素收缩 */
 }
 
+/* 左侧日期选择器 */
 .date-selector {
   width: 200px;
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  min-height: 0;
+  height: 100%; /* 占满容器高度 */
+  min-height: 0; /* 允许 flex 子元素收缩 */
 }
 
 .date-list {
-  flex: 1;
+  flex: 1; /* 占据剩余空间 */
   overflow-y: auto;
   width: 100%;
-  min-height: 0;
+  min-height: 0; /* 允许 flex 子元素收缩 */
 }
 
+/* 增强日期项目样式 */
 .date-item {
   padding: 0.8rem 1rem;
   font-family: 'MiSans', sans-serif;
   font-weight: 400;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 0.5rem;
@@ -1520,24 +1703,24 @@ const vRipple = {
 }
 
 .date-item:hover {
-  background: var(--bg-tertiary, #21242d);
+  background: var(--bg-tertiary);
   transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .date-item.active {
-  background: var(--bg-tertiary, #21242d);
+  background: var(--bg-tertiary);
   color: var(--text-primary);
   font-weight: 600;
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(11, 90, 254, 0.2);
+  box-shadow: 0 4px 12px rgba(11, 90, 254, 0.12);
   border-left: 3px solid #0b5afe;
 }
 
 .empty-dates {
   padding: 2rem 1rem;
   text-align: center;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-tertiary);
   width: 100%;
   box-sizing: border-box;
   display: flex;
@@ -1553,6 +1736,7 @@ const vRipple = {
   margin-top: 2px;
 }
 
+/* 垂直分隔线 */
 .vertical-divider {
   width: 2px;
   background: linear-gradient(
@@ -1563,18 +1747,19 @@ const vRipple = {
   );
   margin: 0 1.5rem;
   position: relative;
-  align-self: stretch;
+  align-self: stretch; /* 占满父容器高度 */
   flex-shrink: 0;
 }
 
+/* 右侧排期内容 */
 .schedule-content {
   flex: 1;
   min-width: 0;
-  max-width: calc(100% - 250px);
+  max-width: calc(100% - 250px); /* 缩小右侧内容区域宽度 */
   display: flex;
   flex-direction: column;
-  height: 100%;
-  min-height: 0;
+  height: 100%; /* 占满容器高度 */
+  min-height: 0; /* 允许 flex 子元素收缩 */
 }
 
 .schedule-header {
@@ -1583,7 +1768,7 @@ const vRipple = {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  flex-shrink: 0;
+  flex-shrink: 0; /* 防止被压缩 */
 }
 
 .current-date {
@@ -1594,13 +1779,14 @@ const vRipple = {
   margin: 0;
 }
 
+/* 加载和错误状态 */
 .loading {
   padding: 3rem;
   text-align: center;
   border-radius: 10px;
-  background: var(--bg-tertiary, #21242d);
+  background: var(--bg-tertiary);
   margin: 1rem 0;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-tertiary);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1633,13 +1819,13 @@ const vRipple = {
   padding: 2rem;
   text-align: center;
   border-radius: 10px;
-  background: var(--bg-tertiary, #21242d);
+  background: var(--bg-tertiary);
   margin: 1rem 0;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-tertiary);
 }
 
 .error {
-  color: #ef4444;
+  color: var(--error);
 }
 
 .empty .icon {
@@ -1647,12 +1833,14 @@ const vRipple = {
   opacity: 0.5;
 }
 
+/* 排期内容区域 */
 .schedule-items {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
+  flex: 1; /* 占据剩余空间 */
+  overflow-y: auto; /* 允许滚动 */
+  min-height: 0; /* 允许 flex 子元素收缩 */
 }
 
+/* 排期时段分组 */
 .playtime-group {
   margin-bottom: 2rem;
 }
@@ -1661,16 +1849,17 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   margin: 0 0 1rem 0;
 }
 
 .playtime-time {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   margin-left: 0.5rem;
 }
 
+/* 歌曲卡片样式 */
 .song-cards {
   display: flex;
   flex-wrap: wrap;
@@ -1680,33 +1869,36 @@ const vRipple = {
 .song-card {
   width: 320px;
   flex-shrink: 0;
-  background: var(--bg-tertiary, #21242d);
+  background: var(--bg-tertiary);
   border-radius: 10px;
   overflow: hidden;
   position: relative;
 }
 
+/* ----------------------------------
+   添加歌单按钮
+   ---------------------------------- */
 .add-playlist-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.6rem 1.2rem;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  border: 1px solid var(--border-secondary);
+  background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(6px);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .add-playlist-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--bg-tertiary);
   transform: translateY(-1px);
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: var(--border-tertiary);
 }
 
 .add-playlist-btn:active {
@@ -1719,6 +1911,9 @@ const vRipple = {
   transform: none;
 }
 
+/* ----------------------------------
+   歌单模态框
+   ---------------------------------- */
 .playlist-modal-overlay {
   position: fixed;
   inset: 0;
@@ -1745,6 +1940,7 @@ const vRipple = {
   animation: modal-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* 头部样式 */
 .playlist-modal-header {
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
@@ -1792,6 +1988,7 @@ const vRipple = {
   transform: rotate(90deg);
 }
 
+/* 内容区域 */
 .playlist-modal-body {
   flex: 1;
   overflow-y: auto;
@@ -1799,6 +1996,7 @@ const vRipple = {
   background: var(--bg-secondary, #1e1e24);
 }
 
+/* 滚动条美化 */
 .custom-scrollbar::-webkit-scrollbar {
   width: 6px;
 }
@@ -1816,6 +2014,7 @@ const vRipple = {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
+/* 登录提示 */
 .login-prompt-container {
   display: flex;
   flex-direction: column;
@@ -1850,6 +2049,7 @@ const vRipple = {
   font-size: 15px;
 }
 
+/* 用户信息栏 */
 .user-profile-bar {
   display: flex;
   align-items: center;
@@ -1908,6 +2108,7 @@ const vRipple = {
   background-color: var(--success);
 }
 
+/* 控制面板（歌单选择与创建） */
 .control-panel {
   background: rgba(255, 255, 255, 0.02);
   border-radius: 16px;
@@ -1930,24 +2131,26 @@ const vRipple = {
   letter-spacing: 0.5px;
 }
 
+/* 创建新歌单的输入组样式优化 */
 .input-group {
   display: flex;
   gap: 0.75rem;
   align-items: center;
-  position: relative;
-  width: 100%;
+  position: relative; /* 确保定位上下文 */
+  width: 100%; /* 占满父容器宽度 */
 }
 
 .input-group .custom-input {
   flex: 1;
-  width: 0;
-  min-width: 0;
+  width: 0; /* 允许flex缩小 */
+  min-width: 0; /* 防止内容溢出 */
 }
 
+/* 确保按钮不被挤压，且不溢出 */
 .input-group .btn-secondary {
   flex-shrink: 0;
   white-space: nowrap;
-  margin-left: auto;
+  margin-left: auto; /* 在必要时推向右侧 */
 }
 
 .select-wrapper {
@@ -2108,6 +2311,7 @@ const vRipple = {
   color: rgba(255, 255, 255, 0.7);
 }
 
+/* 歌曲选择面板 */
 .songs-selection-panel {
   display: flex;
   flex-direction: column;
@@ -2235,6 +2439,7 @@ const vRipple = {
   line-height: 1.4;
 }
 
+/* 底部按钮栏 */
 .playlist-modal-footer {
   padding: 1.25rem 1.5rem;
   background: rgba(30, 30, 36, 0.95);
@@ -2300,6 +2505,7 @@ const vRipple = {
   color: var(--text-primary);
 }
 
+/* 动画定义 */
 @keyframes modal-slide-in {
   from {
     opacity: 0;
@@ -2321,6 +2527,7 @@ const vRipple = {
   opacity: 0;
 }
 
+/* 移动端添加歌单按钮 */
 .mobile-add-playlist-btn {
   display: none;
   align-items: center;
@@ -2342,6 +2549,7 @@ const vRipple = {
   background: rgba(255, 255, 255, 0.2);
 }
 
+/* 响应式调整 */
 @media (max-width: 768px) {
   .mobile-add-playlist-btn {
     display: flex;
@@ -2372,6 +2580,7 @@ const vRipple = {
     width: 100%;
   }
 
+  /* 移动端创建歌单输入组改为垂直排列 */
   .input-group.create-playlist-group {
     flex-direction: column;
     align-items: stretch;
@@ -2390,6 +2599,7 @@ const vRipple = {
   }
 }
 
+/* 针对不同屏幕尺寸的响应式调整 */
 @media (max-width: 1400px) {
   .song-card {
     width: 300px;
@@ -2418,12 +2628,13 @@ const vRipple = {
   padding: 1rem;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   position: relative;
-  height: 90px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
+  height: 90px; /* 减小卡片高度 */
+  display: flex; /* 使用flex布局 */
+  align-items: center; /* 垂直居中 */
+  gap: 15px; /* 元素之间的间隔 */
 }
 
+/* 歌曲封面样式 */
 .song-cover {
   width: 55px;
   height: 55px;
@@ -2442,6 +2653,7 @@ const vRipple = {
   display: block;
 }
 
+/* 文字封面样式 */
 .text-cover {
   width: 100%;
   height: 100%;
@@ -2456,6 +2668,7 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
 }
 
+/* 播放按钮叠加层 */
 .play-button-overlay {
   position: absolute;
   top: 0;
@@ -2475,6 +2688,7 @@ const vRipple = {
   opacity: 1;
 }
 
+/* 播放按钮样式 */
 .play-button {
   width: 30px;
   height: 30px;
@@ -2503,7 +2717,7 @@ const vRipple = {
 }
 
 .song-info {
-  width: calc(70% - 75px);
+  width: calc(70% - 75px); /* 减去封面宽度和间距 */
 }
 
 .song-title {
@@ -2528,6 +2742,7 @@ const vRipple = {
   text-overflow: ellipsis;
 }
 
+/* 重播标识 */
 .replay-badge {
   display: inline-flex;
   align-items: center;
@@ -2566,12 +2781,15 @@ const vRipple = {
   text-align: left;
 }
 
+/* 重播申请人数样式 */
 .replay-requester {
+  /* 使用和普通投稿人相同的颜色 */
   color: rgba(255, 255, 255, 0.4);
   font-weight: normal;
   cursor: help;
 }
 
+/* 热度样式 */
 .action-area {
   position: absolute;
   top: 50%;
@@ -2610,6 +2828,8 @@ const vRipple = {
   opacity: 0.4;
 }
 
+/* ==================== 移动端设计 ==================== */
+
 @media (max-width: 768px) {
   .schedule-list {
     width: 100% !important;
@@ -2637,6 +2857,7 @@ const vRipple = {
     padding: 0 !important;
   }
 
+  /* 移动端日期导航 - 胶囊式设计 */
   .mobile-date-nav {
     display: flex !important;
     align-items: center;
@@ -2729,12 +2950,14 @@ const vRipple = {
     box-shadow: 0 2px 8px rgba(11, 90, 254, 0.4);
   }
 
+  /* 移除旧样式 */
   .date-nav-btn,
   .current-date-mobile,
   .mobile-add-playlist-btn {
     display: none;
   }
 
+  /* 隐藏桌面端日期列表 */
   .date-list {
     height: 0;
     overflow: hidden;
@@ -2764,10 +2987,12 @@ const vRipple = {
     min-height: auto;
   }
 
+  /* 隐藏桌面端日期标题 */
   .schedule-header {
     display: none;
   }
 
+  /* 时段标题 */
   .playtime-group {
     margin-bottom: 20px;
   }
@@ -2790,6 +3015,7 @@ const vRipple = {
     color: rgba(255, 255, 255, 0.3);
   }
 
+  /* 歌曲卡片 - 无边框卡片设计 */
   .song-cards {
     gap: 8px;
     display: flex;
@@ -2855,6 +3081,7 @@ const vRipple = {
     flex-shrink: 0;
   }
 
+  /* 歌曲封面 - 更大的圆角 */
   .song-cover {
     width: 48px;
     height: 48px;
@@ -2867,6 +3094,7 @@ const vRipple = {
     font-size: 20px;
   }
 
+  /* 播放按钮 */
   .play-button-overlay {
     display: none !important;
   }
@@ -2900,6 +3128,7 @@ const vRipple = {
     font-weight: 400;
   }
 
+  /* 热度区域 */
   .vote-count .count {
     font-size: 22px;
     font-weight: 800;
@@ -2915,6 +3144,7 @@ const vRipple = {
     margin-top: 2px;
   }
 
+  /* 加载和空状态 - 无边框 */
   .loading,
   .error,
   .empty {
@@ -2936,6 +3166,7 @@ const vRipple = {
     margin-bottom: 12px;
   }
 
+  /* 日期选择弹窗 */
   .date-picker-content {
     background: var(--surface-primary, var(--bg-primary, #1a1a1f));
     border-radius: 20px 20px 0 0;
@@ -2991,6 +3222,7 @@ const vRipple = {
   }
 }
 
+/* 小屏幕设备额外优化 */
 @media (max-width: 480px) {
   .mobile-date-nav {
     padding: 10px 0 !important;
@@ -3038,6 +3270,7 @@ const vRipple = {
   }
 }
 
+/* 添加日期切换过渡动画 */
 .schedule-fade-enter-active,
 .schedule-fade-leave-active {
   transition:
@@ -3055,6 +3288,7 @@ const vRipple = {
   transform: translateX(-30px);
 }
 
+/* 波纹效果样式 */
 .ripple-effect {
   position: absolute;
   border-radius: 50%;
@@ -3075,6 +3309,7 @@ const vRipple = {
   }
 }
 
+/* 左侧日期选择器 - 移除背景和边框 */
 .date-selector {
   width: 200px;
   flex-shrink: 0;
@@ -3085,6 +3320,7 @@ const vRipple = {
   overflow-y: auto;
 }
 
+/* 移动端滑动提示 */
 .mobile-scroll-hint {
   display: none;
   text-align: center;
@@ -3093,6 +3329,7 @@ const vRipple = {
   margin-bottom: 0.5rem;
 }
 
+/* 滚动指示器 */
 .scroll-indicator-container {
   display: none;
   width: 100%;
@@ -3123,6 +3360,7 @@ const vRipple = {
   }
 }
 
+/* 移动端日期导航 */
 .mobile-date-nav {
   display: none;
   justify-content: space-between;
@@ -3187,6 +3425,7 @@ const vRipple = {
   color: #0b5afe;
 }
 
+/* 日期选择器弹窗样式 */
 .date-picker-modal {
   position: fixed;
   top: 0;
@@ -3276,6 +3515,7 @@ const vRipple = {
   border-left: 3px solid #0b5afe;
 }
 
+/* 过渡动画 */
 .date-picker-fade-enter-active,
 .date-picker-fade-leave-active {
   transition: opacity 0.2s ease;
@@ -3296,395 +3536,4 @@ const vRipple = {
     opacity: 1;
   }
 }
-
-.schedule-list-container {
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.date-strip {
-  white-space: nowrap;
-  overflow-x: auto;
-  padding: 8px 0 16px;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: thin;
-}
-
-.date-strip::-webkit-scrollbar {
-  height: 4px;
-}
-
-.date-strip::-webkit-scrollbar-thumb {
-  background: rgba(168, 85, 247, 0.3);
-  border-radius: 2px;
-}
-
-.date-pill {
-  height: 36px;
-  padding: 0 16px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  margin-right: 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  color: #374151;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-family: 'MiSans', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.date-pill:hover {
-  border-color: #d1d5db;
-}
-
-.date-pill.selected {
-  background: linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
-  color: #fff;
-  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
-  border: none;
-  height: 38px;
-  padding: 0 17px;
-}
-
-.playlist-action-row {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 12px;
-}
-
-.add-playlist-btn-mini {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border-radius: 999px;
-  border: 1px solid rgba(168, 85, 247, 0.25);
-  background: rgba(168, 85, 247, 0.08);
-  color: #a855f7;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.add-playlist-btn-mini:hover {
-  background: rgba(168, 85, 247, 0.15);
-  border-color: rgba(168, 85, 247, 0.4);
-}
-
-.playtime-groups {
-  width: 100%;
-}
-
-.playtime-groups-inner {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.playtime-group-section {
-  margin-bottom: 8px;
-}
-
-.playtime-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 700;
-  margin: 16px 0 12px;
-  padding: 0 2px;
-}
-
-.playtime-name {
-  font-size: 15px;
-  color: #111827;
-  font-family: 'MiSans', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.playtime-time-range {
-  font-size: 12px;
-  color: #6b7280;
-  font-weight: 500;
-  margin-left: 4px;
-}
-
-.playtime-count-badge {
-  font-size: 11px;
-  font-weight: 600;
-  padding: 3px 10px;
-  border-radius: 999px;
-  background: linear-gradient(90deg, rgba(168, 85, 247, 0.12), rgba(236, 72, 153, 0.12), rgba(59, 130, 246, 0.12));
-  color: #7c3aed;
-}
-
-.playtime-group-songs .empty-state {
-  padding: 24px;
-  background: #f9fafb;
-  border-radius: 8px;
-  color: #6b7280;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.schedule-song-card {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 14px 16px;
-  background: #ffffff;
-  border: 1px solid var(--border-primary, #e5e7eb);
-  border-radius: 8px;
-  margin-bottom: 10px;
-  transition: all 0.15s ease;
-  position: relative;
-}
-
-.schedule-song-card:hover {
-  border-color: #d1d5db;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.schedule-song-card.card-playing {
-  border-color: rgba(168, 85, 247, 0.5);
-  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.08);
-}
-
-.schedule-song-card.card-played {
-  opacity: 0.75;
-}
-
-.song-sequence-num {
-  font-size: 28px;
-  font-weight: 900;
-  background: linear-gradient(90deg, #a855f7, #ec4899, #3b82f6);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  min-width: 48px;
-  text-align: center;
-  letter-spacing: -0.02em;
-  font-family: 'MiSans-Bold', 'MiSans', -apple-system, sans-serif;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.song-main-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.song-main-info .song-title {
-  font-size: 16px;
-  font-weight: 700;
-  color: #111827;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0;
-  line-height: 1.3;
-  letter-spacing: 0.01em;
-}
-
-.song-main-info .song-meta {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 2px;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0;
-}
-
-.song-artist {
-  font-weight: 500;
-}
-
-.meta-dot {
-  margin: 0 6px;
-  color: #9ca3af;
-}
-
-.requester-tag {
-  color: #6b7280;
-}
-
-.song-main-info .replay-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 6px;
-  background: rgba(168, 85, 247, 0.12);
-  border: 1px solid rgba(168, 85, 247, 0.25);
-  border-radius: 4px;
-  color: #a855f7;
-  font-size: 11px;
-  font-weight: 600;
-  flex-shrink: 0;
-  cursor: help;
-  margin-left: 2px;
-}
-
-.song-audio-btn {
-  flex-shrink: 0;
-}
-
-.audio-btn-inner {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba(168, 85, 247, 0.1);
-  border: 1px solid rgba(168, 85, 247, 0.18);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.audio-btn-inner:hover {
-  background: rgba(168, 85, 247, 0.18);
-  border-color: rgba(168, 85, 247, 0.3);
-}
-
-.status-badges {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.status-badge {
-  padding: 4px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.4;
-  white-space: nowrap;
-  border-width: 1px;
-  border-style: solid;
-}
-
-.status-approved {
-  background: #ecfdf5;
-  color: #047857;
-  border-color: #a7f3d0;
-}
-
-.status-pending {
-  background: #fffbeb;
-  color: #b45309;
-  border-color: #fde68a;
-}
-
-.status-played {
-  background: #f3f4f6;
-  color: #6b7280;
-  border-color: #e5e7eb;
-}
-
-.loading-state {
-  padding: 48px 24px;
-  text-align: center;
-  color: #6b7280;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.error-state {
-  padding: 24px;
-  text-align: center;
-  border-radius: 8px;
-  background: #fef2f2;
-  color: #dc2626;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.empty-all-state {
-  padding: 48px 24px;
-  text-align: center;
-  border-radius: 12px;
-  background: #f9fafb;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.empty-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
-  opacity: 0.5;
-}
-
-.empty-hint {
-  font-size: 13px;
-  color: #9ca3af;
-  margin-top: 6px;
-}
-
-@media (max-width: 768px) {
-  .schedule-list-container {
-    padding: 0 4px;
-  }
-
-  .date-pill {
-    height: 34px;
-    padding: 0 14px;
-    font-size: 12px;
-  }
-
-  .date-pill.selected {
-    height: 36px;
-  }
-
-  .playtime-group-header {
-    margin: 12px 0 8px;
-  }
-
-  .playtime-name {
-    font-size: 14px;
-  }
-
-  .schedule-song-card {
-    gap: 10px;
-    padding: 12px;
-    flex-wrap: wrap;
-  }
-
-  .song-sequence-num {
-    font-size: 24px;
-    min-width: 36px;
-  }
-
-  .song-main-info {
-    min-width: calc(100% - 140px);
-  }
-
-  .song-main-info .song-title {
-    font-size: 15px;
-  }
-
-  .song-main-info .song-meta {
-    font-size: 11px;
-  }
-
-  .audio-btn-inner {
-    width: 30px;
-    height: 30px;
-  }
-
-  .status-badge {
-    padding: 3px 10px;
-    font-size: 11px;
-  }
-}
 </style>
diff --git a/app/composables/useSongs.ts b/app/composables/useSongs.ts
index 9c3f1cd..7054453 100644
--- a/app/composables/useSongs.ts
+++ b/app/composables/useSongs.ts
@@ -17,6 +17,7 @@ export const useSongs = () => {
   const playTimes = ref<PlayTime[]>([])
   const playTimeEnabled = ref(false)
   const songCount = ref(0)
+  const expectedPlayDates = ref<any[]>([])
 
   // 显示通知
   const showNotification = (message: string, type: 'success' | 'error' | 'info' = 'info') => {
@@ -916,6 +917,56 @@ export const useSongs = () => {
     }
   }
 
+  // 获取期望播出日期及空闲档期
+  const fetchExpectedPlayDates = async (silent = false, forceRefresh = false) => {
+    if (!silent) {
+      loading.value = true
+    }
+    try {
+      const data = await dedup.dedupedRequest(
+        'expected-play-dates',
+        async () => {
+          const url = forceRefresh
+            ? `/api/expected-play-dates?t=${Date.now()}`
+            : '/api/expected-play-dates'
+          return await $fetch(url)
+        },
+        undefined,
+        forceRefresh
+      )
+      if (Array.isArray(data)) {
+        expectedPlayDates.value = data
+      } else if (data && Array.isArray((data as any).data)) {
+        expectedPlayDates.value = (data as any).data
+      } else {
+        expectedPlayDates.value = []
+      }
+      return expectedPlayDates.value
+    } catch (err: any) {
+      if (!silent) {
+        error.value = err.message || '获取档期数据失败'
+      }
+      return expectedPlayDates.value
+    } finally {
+      if (!silent) {
+        loading.value = false
+      }
+    }
+  }
+
+  const totalFreeSlots = computed(() =>
+    expectedPlayDates.value.reduce(
+      (sum, d) => sum + (Array.isArray(d.freeSequences) ? d.freeSequences.length : 0),
+      0
+    )
+  )
+
+  const openDaysCount = computed(() =>
+    expectedPlayDates.value.filter((d) => !d.isFull).length
+  )
+
+  const expectedPlayDatesLoaded = computed(() => Array.isArray(expectedPlayDates.value))
+
   // 初始化加载
   const initialize = async () => {
     await fetchPlayTimes()
@@ -932,6 +983,10 @@ export const useSongs = () => {
     publicSchedules,
     visibleSongs,
     songCount,
+    expectedPlayDates,
+    totalFreeSlots,
+    openDaysCount,
+    expectedPlayDatesLoaded,
     loading,
     error,
     notification,
@@ -943,6 +998,7 @@ export const useSongs = () => {
     fetchPublicSchedules,
     fetchPlayTimes,
     fetchSongCount,
+    fetchExpectedPlayDates,
     refreshSongsSilent,
     refreshSchedulesSilent,
     checkSimilarSongs,
diff --git a/app/composables/useTheme.ts b/app/composables/useTheme.ts
index 5cdca88..7d0568f 100644
--- a/app/composables/useTheme.ts
+++ b/app/composables/useTheme.ts
@@ -99,13 +99,16 @@ export function useTheme() {
 
   const defaultTheme = computed<string>(() => {
     if (siteConfigLoaded.value && siteDefaultTheme.value) {
-      return siteDefaultTheme.value
+      const v = siteDefaultTheme.value
+      if (v === 'System' || v === 'dark' || v.endsWith('Dark')) return 'ModernLight'
+      return v
     }
     const fromRuntime = config.public?.defaultTheme
     if (typeof fromRuntime === 'string' && fromRuntime) {
+      if (fromRuntime === 'System' || fromRuntime === 'dark' || fromRuntime.endsWith('Dark')) return 'ModernLight'
       return fromRuntime
     }
-    return 'System'
+    return 'ModernLight'
   })
 
   const theme = computed<string>({
@@ -193,7 +196,8 @@ export function useTheme() {
 
     if (stored) {
       const valid = firstValidTheme(stored)
-      if (valid === stored || enabledThemes.value.includes(stored)) {
+      const effectiveStored = resolveEffectiveTheme(valid) as string
+      if ((valid === stored || enabledThemes.value.includes(stored)) && effectiveStored !== 'dark') {
         setTheme(stored)
         watchSystemTheme()
         return
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 39e73a7..4c4a995 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,36 @@
 <template>
-  <div class="home pb-24 lg:pb-0">
+  <div class="home">
+    <div class="ellipse-effect" />
     <div class="main-content">
-      <!-- 右上角浮动用户操作区（简化版，仅保留 user-section） -->
-      <div class="user-actions-floating">
+      <div class="top-bar">
+        <div class="logo-section">
+          <NuxtLink class="logo-link" to="/">
+            <img
+              alt="VoiceHub Logo"
+              class="logo-image"
+              :src="logo"
+              width="90"
+              height="90"
+              decoding="async"
+              fetchpriority="high"
+            >
+          </NuxtLink>
+          <!-- 横线和学校logo -->
+          <div v-if="schoolLogoHomeUrl && schoolLogoHomeUrl.trim()" class="logo-divider-container">
+            <div class="logo-divider" />
+            <img
+              :src="proxiedSchoolLogoUrl"
+              alt="学校Logo"
+              class="school-logo"
+              width="200"
+              height="80"
+              decoding="async"
+              fetchpriority="high"
+            >
+          </div>
+        </div>
+
+        <!-- 用户信息区域 -->
         <div class="user-section">
           <ClientOnly>
             <div v-if="isClientAuthenticated" class="user-info">
@@ -57,277 +85,410 @@
         </div>
       </div>
 
-      <!-- Section Hero -->
-      <section id="hero-section" class="hero-block">
-        <div class="hero-left">
-          <h1 class="hero-title">{{ siteTitle }}</h1>
-          <p class="hero-subtitle">下周校园，听你的。</p>
-
-          <div class="hero-cta">
-            <button
-              class="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 text-white px-6 py-3 rounded-lg font-bold shadow-lg hover:shadow-xl transition-shadow"
-              @click="scrollToSection('request-section')"
-            >
-              立即点歌
-            </button>
-            <button
-              class="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-bold hover:bg-gray-50"
-              @click="scrollToSection('schedule-section')"
-            >
-              查看排期
-            </button>
-          </div>
-
-          <div class="status-info">
-            <span>
-              {{ isRequestOpen ? '当前投稿开放' : '当前投稿关闭' }} · 共 {{ songCount || 0 }} 首投稿 · {{ scheduleCount || 0 }} 首已定排期
-            </span>
-          </div>
+      <div v-if="siteTitle" class="site-title">
+        <div class="title-container">
+          <h2 class="main-title">{{ siteTitle }}</h2>
+          <div class="title-divider" />
+          <span class="sub-title">VoiceHub 校园广播系统</span>
         </div>
+      </div>
 
-        <div id="hero-illustration-slot" class="w-full max-w-sm">
-          <ClientOnly><HeroIllustration /></ClientOnly>
-        </div>
-      </section>
+      <!-- Hero CTA：投稿按钮正中央 + 档期概览卡片（紧邻按钮下方） -->
+      <section class="hero-cta-section">
+        <button
+          type="button"
+          class="hero-request-btn"
+          :disabled="submissionClosed"
+          :title="submissionClosed ? '投稿通道已关闭' : '我要点歌投稿'"
+          @click="handleHeroRequestClick"
+        >
+          <Icon class="btn-icon" :class="{ pulse: !submissionClosed }" name="mic" :size="22" />
+          <span>{{ submissionClosed ? '投稿已关闭' : '我要点歌投稿' }}</span>
+        </button>
 
-      <!-- Section Schedule -->
-      <section id="schedule-section" class="content-block">
-        <div class="section-header">
-          <h2>本周排期</h2>
-          <span class="sub">播出时间表</span>
-        </div>
-        <ClientOnly>
-          <SongsScheduleList
-            :error="error"
-            :loading="loading"
-            :schedules="publicSchedules"
-            @semester-change="handleSemesterChange"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Section Songs -->
-      <section id="songs-section" class="content-block">
-        <div class="section-header">
-          <h2>热门投稿</h2>
-          <span class="sub">为喜欢的歌投票</span>
-        </div>
-        <ClientOnly>
-          <SongsSongList
-            :error="error"
-            :is-admin="isAdmin"
-            :loading="loading"
-            :songs="filteredSongs"
-            @refresh="refreshSongs"
-            @vote="handleVote"
-            @withdraw="handleWithdraw"
-            @cancel-replay="handleCancelReplay"
-            @request-replay="handleRequestReplay"
-            @semester-change="handleSemesterChange"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Section Request -->
-      <section id="request-section" class="content-block">
-        <div class="section-header">
-          <h2>投稿歌曲</h2>
-          <span class="sub" @click="showRules = true">点歌规则</span>
-        </div>
-        <ClientOnly>
-          <div v-if="!isClientAuthenticated" class="login-required-container">
-            <div class="login-required-content">
-              <Lock class="login-icon" :size="48" />
-              <h3>登录后投稿</h3>
-              <p>登录后可选择期望日期和播出位置</p>
-              <button class="login-button" @click="navigateToLogin">立即登录</button>
+        <div class="schedule-overview-card" aria-label="档期概览">
+          <div class="schedule-overview-grid">
+            <div class="overview-stat">
+              <span class="stat-icon">📅</span>
+              <span class="stat-label">今日可点排期</span>
+              <div class="stat-value">
+                <span>{{ todaySchedulesCount }}</span>
+                <span class="unit">首</span>
+              </div>
+              <div class="stat-detail">{{ todayLabel }}</div>
+            </div>
+            <div class="overview-stat">
+              <span class="stat-icon">🎵</span>
+              <span class="stat-label">待播歌曲总数</span>
+              <div class="stat-value">
+                <span>{{ totalSchedulesCount }}</span>
+                <span class="unit">首</span>
+              </div>
+              <div class="stat-detail">累计审核通过 / 审核中</div>
+            </div>
+            <div class="overview-stat primary">
+              <span class="stat-icon">✨</span>
+              <span class="stat-label">当前空闲档期</span>
+              <div class="stat-value">
+                <span>{{ totalFreeSlots }}</span>
+                <span class="unit">个</span>
+              </div>
+              <div class="stat-detail">
+                <span class="live-dot"></span>
+                实时更新 · {{ openDaysCount }} 天开放
+              </div>
             </div>
           </div>
-          <SongsRequestForm
-            v-else
-            ref="requestFormRef"
-            :loading="loading"
-            @request="handleRequest"
-            @vote="handleVote"
-          />
-        </ClientOnly>
+        </div>
       </section>
 
-      <!-- Section Notification -->
-      <section id="notification-section" class="content-block">
-        <div class="section-header">
-          <h2>我的消息</h2>
-          <button class="settings-icon" @click="toggleNotificationSettings">
-            <svg
-              fill="none"
-              height="20"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+      <!-- 中间主体内容区域 -->
+      <div class="content-area">
+        <!-- 选项卡区域 -->
+        <div class="tabs-row">
+          <div
+            :class="{ active: activeTab === 'schedule' }"
+            class="section-tab schedule-tab"
+            @click="handleTabClick('schedule')"
+          >
+            <Icon class="tab-icon" name="calendar" :size="20" />
+            <span class="tab-text">播出排期</span>
+          </div>
+          <div
+            :class="{ active: activeTab === 'songs' }"
+            class="section-tab songs-tab"
+            @click="handleTabClick('songs')"
+          >
+            <Icon class="tab-icon" name="music" :size="20" />
+            <span class="tab-text">歌曲列表</span>
+          </div>
+          <div
+            :class="{ active: activeTab === 'request' }"
+            class="section-tab request-tab"
+            @click="handleTabClick('request')"
+          >
+            <Icon class="tab-icon" name="search" :size="20" />
+            <span class="tab-text">投稿歌曲</span>
+          </div>
+          <ClientOnly>
+            <div
+              ref="notificationTabRef"
+              :class="{ active: activeTab === 'notification', disabled: !isClientAuthenticated }"
+              class="section-tab"
+              data-tab="notification"
+              @click="isClientAuthenticated ? handleTabClick('notification') : showLoginNotice()"
             >
-              <circle cx="12" cy="12" r="3" />
-              <path
-                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+              <div class="icon-wrapper">
+                <Icon class="tab-icon" name="message-circle" :size="20" />
+                <span
+                  v-if="isClientAuthenticated && hasUnreadNotifications"
+                  class="notification-badge-tab"
+                />
+              </div>
+              <span class="tab-text">
+                消息
+                <span
+                  v-if="isClientAuthenticated && hasUnreadNotifications"
+                  class="notification-badge-desktop"
+                />
+              </span>
+            </div>
+            <template #fallback>
+              <div class="section-tab disabled" data-tab="notification">
+                <Icon class="tab-icon" name="message-circle" :size="20" />
+                <span class="tab-text">消息</span>
+              </div>
+            </template>
+          </ClientOnly>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="tab-content-container">
+          <ClientOnly>
+            <!-- 播出排期内容 -->
+            <div v-if="activeTab === 'schedule'" key="schedule" class="tab-pane schedule-tab-pane">
+              <div class="full-width">
+                <SongsScheduleList
+                  :error="error"
+                  :loading="loading"
+                  :schedules="publicSchedules"
+                  @semester-change="handleSemesterChange"
+                />
+              </div>
+              
+              <!-- 用户使用指南组件 -->
+              <UserTutorial />
+            </div>
+
+            <!-- 歌曲列表内容 -->
+            <div v-else-if="activeTab === 'songs'" key="songs" class="tab-pane">
+              <div class="song-list-container">
+                <SongsSongList
+                  :error="error"
+                  :is-admin="isAdmin"
+                  :loading="loading"
+                  :songs="filteredSongs"
+                  @refresh="refreshSongs"
+                  @vote="handleVote"
+                  @withdraw="handleWithdraw"
+                  @cancel-replay="handleCancelReplay"
+                  @request-replay="handleRequestReplay"
+                  @semester-change="handleSemesterChange"
+                />
+              </div>
+            </div>
+
+            <!-- 投稿歌曲内容 -->
+            <div v-else-if="activeTab === 'request'" key="request" class="tab-pane request-pane">
+              <SongsRequestForm
+                ref="requestFormRef"
+                :loading="loading"
+                @request="handleRequest"
+                @vote="handleVote"
               />
-            </svg>
-          </button>
-        </div>
-        <ClientOnly>
-          <div v-if="!isClientAuthenticated" class="login-required-container">
-            <div class="login-required-content">
-              <Lock class="login-icon" :size="48" />
-              <h3>需要登录</h3>
-              <p>您需要登录才能查看通知</p>
-              <button class="login-button" @click="navigateToLogin">立即登录</button>
             </div>
-          </div>
-          <div v-else class="notification-container">
-            <!-- 通知列表 -->
-            <div class="notification-list">
-              <div v-if="notificationsLoading" class="loading-indicator">
-                <div class="loading-spinner" />
-                <span>加载中...</span>
-              </div>
 
-              <div v-else-if="userNotifications.length === 0" class="empty-notification">
-                <div class="empty-icon">
-                  <Icon :size="48" color="#6b7280" name="bell" />
+            <!-- 通知内容 -->
+            <div
+              v-else-if="activeTab === 'notification'"
+              key="notification"
+              class="tab-pane notification-pane"
+            >
+              <div v-if="!isClientAuthenticated" class="login-required-container">
+                <div class="login-required-content">
+                  <Lock class="login-icon" :size="48" />
+                  <h3>需要登录</h3>
+                  <p>您需要登录才能查看通知</p>
+                  <button class="login-button" @click="navigateToLogin">立即登录</button>
                 </div>
-                <p>暂无通知</p>
               </div>
+              <div v-else class="notification-container">
+                <!-- 标题和设置按钮 -->
+                <div class="notification-header">
+                  <h2 class="notification-title">通知中心</h2>
+                  <button class="settings-icon" @click="toggleNotificationSettings">
+                    <svg
+                      fill="none"
+                      height="20"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle cx="12" cy="12" r="3" />
+                      <path
+                        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+                      />
+                    </svg>
+                  </button>
+                </div>
 
-              <Transition mode="out-in" name="notification-list-fade">
-                <div
-                  v-if="userNotifications.length > 0"
-                  :key="notificationsService.currentPage.value"
-                  class="notification-items"
-                >
-                  <div
-                    v-for="(notification, index) in userNotifications"
-                    :key="notification.id"
-                    :class="{ unread: !notification.read }"
-                    :style="{ '--animation-delay': index * 0.1 + 's' }"
-                    class="notification-card"
-                    @click="viewNotification(notification)"
-                  >
-                    <div class="notification-card-header">
-                      <div class="notification-icon-type">
-                        <Icon
-                          v-if="notification.type === 'SONG_SELECTED'"
-                          :size="20"
-                          color="#4f46e5"
-                          name="check"
-                        />
-                        <Icon
-                          v-else-if="notification.type === 'SONG_PLAYED'"
-                          :size="20"
-                          color="#10b981"
-                          name="play"
-                        />
-                        <Icon
-                          v-else-if="notification.type === 'SONG_VOTED'"
-                          :size="20"
-                          color="#f59e0b"
-                          name="thumbs-up"
-                        />
-                        <Icon
-                          v-else-if="notification.type === 'SONG_REJECTED'"
-                          :size="20"
-                          color="#ef4444"
-                          name="x-circle"
-                        />
-                        <Icon
-                          v-else-if="notification.type === 'COLLABORATION_INVITE'"
-                          :size="20"
-                          color="#0B5AFE"
-                          name="users"
-                        />
-                        <Icon
-                          v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
-                          :size="20"
-                          color="#8b5cf6"
-                          name="message-circle"
-                        />
-                        <Icon v-else :size="20" color="#6b7280" name="bell" />
-                      </div>
-                      <div class="notification-title-row">
-                        <div class="notification-title">
-                          <span v-if="notification.type === 'SONG_SELECTED'">歌曲已选中</span>
-                          <span v-else-if="notification.type === 'SONG_PLAYED'"
-                            >歌曲已播放</span
-                          >
-                          <span v-else-if="notification.type === 'SONG_VOTED'">收到新投票</span>
-                          <span v-else-if="notification.type === 'SONG_REJECTED'"
-                            >歌曲被驳回</span
-                          >
-                          <span v-else-if="notification.type === 'COLLABORATION_INVITE'">
-                            联合投稿邀请
-                            <span
-                              v-if="notification.handled"
-                              :class="[
-                                'status-tag',
-                                notification.status === 'ACCEPTED'
-                                  ? 'accepted'
-                                  : notification.status === 'INVALID'
-                                    ? 'invalid'
-                                    : 'rejected'
-                              ]"
-                            >
-                              {{
-                                notification.status === 'ACCEPTED'
-                                  ? '- 已接受'
-                                  : notification.status === 'INVALID'
-                                    ? '- 已失效'
-                                    : '- 已拒绝'
-                              }}
-                            </span>
-                          </span>
-                          <span v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
-                            >联合投稿回复</span
-                          >
-                          <span v-else>系统通知</span>
-                          <span v-if="!notification.read" class="unread-indicator" />
-                        </div>
-                        <div class="notification-time">
-                          {{ formatNotificationTime(notification.createdAt) }}
-                        </div>
-                      </div>
+                <!-- 通知列表 -->
+                <div class="notification-list">
+                  <div v-if="notificationsLoading" class="loading-indicator">
+                    <div class="loading-spinner" />
+                    <span>加载中...</span>
+                  </div>
+
+                  <div v-else-if="userNotifications.length === 0" class="empty-notification">
+                    <div class="empty-icon">
+                      <Icon :size="48" color="#6b7280" name="bell" />
                     </div>
-                    <div class="notification-card-body">
-                      <div class="notification-text">{{ notification.message }}</div>
+                    <p>暂无通知</p>
+                  </div>
 
-                      <!-- 联合投稿邀请操作按钮 -->
+                  <Transition mode="out-in" name="notification-list-fade">
+                    <div
+                      v-if="userNotifications.length > 0"
+                      :key="notificationsService.currentPage.value"
+                      class="notification-items"
+                    >
                       <div
-                        v-if="
-                          notification.type === 'COLLABORATION_INVITE' && !notification.handled
-                        "
-                        class="invite-actions"
+                        v-for="(notification, index) in userNotifications"
+                        :key="notification.id"
+                        :class="{ unread: !notification.read }"
+                        :style="{ '--animation-delay': index * 0.1 + 's' }"
+                        class="notification-card"
+                        @click="viewNotification(notification)"
                       >
-                        <button
-                          :disabled="notification.processing"
-                          class="action-button accept-btn"
-                          @click.stop="handleCollaborationReply(notification, true)"
-                        >
-                          {{ notification.processing ? '处理中...' : '接受邀请' }}
-                        </button>
-                        <button
-                          :disabled="notification.processing"
-                          class="action-button reject-btn"
-                          @click.stop="handleCollaborationReply(notification, false)"
-                        >
-                          拒绝
-                        </button>
+                        <div class="notification-card-header">
+                          <div class="notification-icon-type">
+                            <Icon
+                              v-if="notification.type === 'SONG_SELECTED'"
+                              :size="20"
+                              color="#4f46e5"
+                              name="check"
+                            />
+                            <Icon
+                              v-else-if="notification.type === 'SONG_PLAYED'"
+                              :size="20"
+                              color="#10b981"
+                              name="play"
+                            />
+                            <Icon
+                              v-else-if="notification.type === 'SONG_VOTED'"
+                              :size="20"
+                              color="#f59e0b"
+                              name="thumbs-up"
+                            />
+                            <Icon
+                              v-else-if="notification.type === 'SONG_REJECTED'"
+                              :size="20"
+                              color="#ef4444"
+                              name="x-circle"
+                            />
+                            <Icon
+                              v-else-if="notification.type === 'COLLABORATION_INVITE'"
+                              :size="20"
+                              color="#0B5AFE"
+                              name="users"
+                            />
+                            <Icon
+                              v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
+                              :size="20"
+                              color="#8b5cf6"
+                              name="message-circle"
+                            />
+                            <Icon v-else :size="20" color="#6b7280" name="bell" />
+                          </div>
+                          <div class="notification-title-row">
+                            <div class="notification-title">
+                              <span v-if="notification.type === 'SONG_SELECTED'">歌曲已选中</span>
+                              <span v-else-if="notification.type === 'SONG_PLAYED'"
+                                >歌曲已播放</span
+                              >
+                              <span v-else-if="notification.type === 'SONG_VOTED'">收到新投票</span>
+                              <span v-else-if="notification.type === 'SONG_REJECTED'"
+                                >歌曲被驳回</span
+                              >
+                              <span v-else-if="notification.type === 'COLLABORATION_INVITE'">
+                                联合投稿邀请
+                                <span
+                                  v-if="notification.handled"
+                                  :class="[
+                                    'status-tag',
+                                    notification.status === 'ACCEPTED'
+                                      ? 'accepted'
+                                      : notification.status === 'INVALID'
+                                        ? 'invalid'
+                                        : 'rejected'
+                                  ]"
+                                >
+                                  {{
+                                    notification.status === 'ACCEPTED'
+                                      ? '- 已接受'
+                                      : notification.status === 'INVALID'
+                                        ? '- 已失效'
+                                        : '- 已拒绝'
+                                  }}
+                                </span>
+                              </span>
+                              <span v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
+                                >联合投稿回复</span
+                              >
+                              <span v-else>系统通知</span>
+                              <span v-if="!notification.read" class="unread-indicator" />
+                            </div>
+                            <div class="notification-time">
+                              {{ formatNotificationTime(notification.createdAt) }}
+                            </div>
+                          </div>
+                        </div>
+                        <div class="notification-card-body">
+                          <div class="notification-text">{{ notification.message }}</div>
+
+                          <!-- 联合投稿邀请操作按钮 -->
+                          <div
+                            v-if="
+                              notification.type === 'COLLABORATION_INVITE' && !notification.handled
+                            "
+                            class="invite-actions"
+                          >
+                            <button
+                              :disabled="notification.processing"
+                              class="action-button accept-btn"
+                              @click.stop="handleCollaborationReply(notification, true)"
+                            >
+                              {{ notification.processing ? '处理中...' : '接受邀请' }}
+                            </button>
+                            <button
+                              :disabled="notification.processing"
+                              class="action-button reject-btn"
+                              @click.stop="handleCollaborationReply(notification, false)"
+                            >
+                              拒绝
+                            </button>
+                          </div>
+                        </div>
+                        <div class="notification-card-actions">
+                          <button
+                            class="action-button delete"
+                            title="删除"
+                            @click.stop="deleteNotification(notification.id)"
+                          >
+                            <svg
+                              fill="none"
+                              height="16"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <polyline points="3 6 5 6 21 6" />
+                              <path
+                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+                              />
+                            </svg>
+                            <span>删除</span>
+                          </button>
+                        </div>
                       </div>
                     </div>
-                    <div class="notification-card-actions">
+                  </Transition>
+                </div>
+
+                <!-- 分页控件 -->
+                <div
+                  v-if="notificationsService.totalCount.value > 0"
+                  class="notification-pagination"
+                >
+                  <div class="pagination-info">
+                    <span class="pagination-text">
+                      共 {{ notificationsService.totalCount.value }} 条通知， 第
+                      {{ notificationsService.currentPage.value }} /
+                      {{ notificationsService.totalPages.value }} 页
+                    </span>
+                  </div>
+
+                  <div class="pagination-controls">
+                    <!-- 每页显示数量选择器 -->
+                    <div class="page-size-selector">
+                      <label for="pageSize">每页显示：</label>
+                      <CustomSelect
+                        id="pageSize"
+                        :model-value="notificationsService.pageSize.value"
+                        :options="pageSizeOptions"
+                        class="page-size-custom-select"
+                        @update:model-value="handlePageSizeChange"
+                      />
+                    </div>
+
+                    <!-- 页码导航 -->
+                    <div class="page-navigation">
                       <button
-                        class="action-button delete"
-                        title="删除"
-                        @click.stop="deleteNotification(notification.id)"
+                        :disabled="
+                          !notificationsService.hasPrevPage.value ||
+                          notificationsService.isPaginationLoading.value
+                        "
+                        class="page-nav-button"
+                        title="上一页"
+                        @click="notificationsService.prevPage()"
                       >
                         <svg
                           fill="none"
@@ -340,161 +501,98 @@
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
                         >
-                          <polyline points="3 6 5 6 21 6" />
-                          <path
-                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                          />
+                          <polyline points="15 18 9 12 15 6" />
+                        </svg>
+                      </button>
+
+                      <!-- 页码按钮 -->
+                      <div class="page-numbers">
+                        <template v-for="page in getVisiblePages()" :key="page">
+                          <button
+                            v-if="page !== '...'"
+                            :class="[
+                              'page-number-button',
+                              { active: page === notificationsService.currentPage.value }
+                            ]"
+                            :disabled="notificationsService.isPaginationLoading.value"
+                            @click="notificationsService.goToPage(page)"
+                          >
+                            {{ page }}
+                          </button>
+                          <span v-else class="page-ellipsis">...</span>
+                        </template>
+                      </div>
+
+                      <button
+                        :disabled="
+                          !notificationsService.hasNextPage.value ||
+                          notificationsService.isPaginationLoading.value
+                        "
+                        class="page-nav-button"
+                        title="下一页"
+                        @click="notificationsService.nextPage()"
+                      >
+                        <svg
+                          fill="none"
+                          height="16"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <polyline points="9 18 15 12 9 6" />
                         </svg>
-                        <span>删除</span>
                       </button>
                     </div>
                   </div>
-                </div>
-              </Transition>
-            </div>
 
-            <!-- 分页控件 -->
-            <div
-              v-if="notificationsService.totalCount.value > 0"
-              class="notification-pagination"
-            >
-              <div class="pagination-info">
-                <span class="pagination-text">
-                  共 {{ notificationsService.totalCount.value }} 条通知， 第
-                  {{ notificationsService.currentPage.value }} /
-                  {{ notificationsService.totalPages.value }} 页
-                </span>
-              </div>
-
-              <div class="pagination-controls">
-                <!-- 每页显示数量选择器 -->
-                <div class="page-size-selector">
-                  <label for="pageSize">每页显示：</label>
-                  <CustomSelect
-                    id="pageSize"
-                    :model-value="notificationsService.pageSize.value"
-                    :options="pageSizeOptions"
-                    class="page-size-custom-select"
-                    @update:model-value="handlePageSizeChange"
-                  />
-                </div>
-
-                <!-- 页码导航 -->
-                <div class="page-navigation">
-                  <button
-                    :disabled="
-                      !notificationsService.hasPrevPage.value ||
-                      notificationsService.isPaginationLoading.value
-                    "
-                    class="page-nav-button"
-                    title="上一页"
-                    @click="notificationsService.prevPage()"
+                  <!-- 分页加载状态 -->
+                  <div
+                    v-if="notificationsService.isPaginationLoading.value"
+                    class="pagination-loading"
                   >
-                    <svg
-                      fill="none"
-                      height="16"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      viewBox="0 0 24 24"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <polyline points="15 18 9 12 15 6" />
-                    </svg>
-                  </button>
-
-                  <!-- 页码按钮 -->
-                  <div class="page-numbers">
-                    <template v-for="page in getVisiblePages()" :key="page">
-                      <button
-                        v-if="page !== '...'"
-                        :class="[
-                          'page-number-button',
-                          { active: page === notificationsService.currentPage.value }
-                        ]"
-                        :disabled="notificationsService.isPaginationLoading.value"
-                        @click="notificationsService.goToPage(page)"
-                      >
-                        {{ page }}
-                      </button>
-                      <span v-else class="page-ellipsis">...</span>
-                    </template>
+                    <div class="loading-spinner" />
+                    <span>加载中...</span>
                   </div>
+                </div>
 
+                <!-- 底部操作按钮 -->
+                <div v-if="userNotifications.length > 0" class="notification-actions-bar">
                   <button
-                    :disabled="
-                      !notificationsService.hasNextPage.value ||
-                      notificationsService.isPaginationLoading.value
-                    "
-                    class="page-nav-button"
-                    title="下一页"
-                    @click="notificationsService.nextPage()"
+                    :class="{ disabled: !hasUnreadNotifications }"
+                    :disabled="!hasUnreadNotifications"
+                    class="action-button-large"
+                    @click="markAllNotificationsAsRead"
                   >
-                    <svg
-                      fill="none"
-                      height="16"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      viewBox="0 0 24 24"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <polyline points="9 18 15 12 9 6" />
-                    </svg>
+                    全部标记为已读
+                  </button>
+                  <button class="action-button-large danger" @click="clearAllNotifications">
+                    清空所有消息
                   </button>
                 </div>
-              </div>
 
-              <!-- 分页加载状态 -->
-              <div
-                v-if="notificationsService.isPaginationLoading.value"
-                class="pagination-loading"
-              >
-                <div class="loading-spinner" />
-                <span>加载中...</span>
+                <!-- 确认对话框 -->
+                <ConfirmDialog
+                  v-model:show="showConfirmDialog"
+                  :cancel-text="confirmDialogConfig.cancelText"
+                  :confirm-text="confirmDialogConfig.confirmText"
+                  :message="confirmDialogConfig.message"
+                  :title="confirmDialogConfig.title"
+                  :type="confirmDialogConfig.type"
+                  @cancel="handleCancelAction"
+                  @confirm="handleConfirmAction"
+                />
               </div>
             </div>
-
-            <!-- 底部操作按钮 -->
-            <div v-if="userNotifications.length > 0" class="notification-actions-bar">
-              <button
-                :class="{ disabled: !hasUnreadNotifications }"
-                :disabled="!hasUnreadNotifications"
-                class="action-button-large"
-                @click="markAllNotificationsAsRead"
-              >
-                全部标记为已读
-              </button>
-              <button class="action-button-large danger" @click="clearAllNotifications">
-                清空所有消息
-              </button>
-            </div>
-
-            <!-- 确认对话框 -->
-            <ConfirmDialog
-              v-model:show="showConfirmDialog"
-              :cancel-text="confirmDialogConfig.cancelText"
-              :confirm-text="confirmDialogConfig.confirmText"
-              :message="confirmDialogConfig.message"
-              :title="confirmDialogConfig.title"
-              :type="confirmDialogConfig.type"
-              @cancel="handleCancelAction"
-              @confirm="handleConfirmAction"
-            />
-          </div>
-        </ClientOnly>
-      </section>
+          </ClientOnly>
+        </div>
+      </div>
 
       <!-- 页脚信息显示 -->
       <SiteFooter />
-
-      <ClientOnly>
-        <MobileBottomNav @navigate="handleMobileNav" />
-      </ClientOnly>
     </div>
 
     <!-- 规则弹窗 -->
@@ -513,13 +611,13 @@
           @click.self="showRules = false"
         >
           <div
-            class="bg-zinc-900 border border-zinc-800 w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl flex flex-col"
+            class="bg-white border border-zinc-200 w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl flex flex-col"
           >
             <div class="p-8 pb-4 flex items-center justify-between">
               <div>
-                <h3 class="text-xl font-black text-zinc-100 tracking-tight flex items-center gap-3">
+                <h3 class="text-xl font-black text-zinc-900 tracking-tight flex items-center gap-3">
                   <div
-                    class="w-10 h-10 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-500"
+                    class="w-10 h-10 rounded-2xl bg-indigo-600/10 flex items-center justify-center text-indigo-600"
                   >
                     <Icon name="bell" :size="20" />
                   </div>
@@ -528,7 +626,7 @@
                 <p class="text-xs text-zinc-500 mt-1 ml-13">投稿前请仔细阅读以下规则</p>
               </div>
               <button
-                class="p-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 rounded-2xl transition-all"
+                class="p-3 bg-zinc-100 hover:bg-zinc-200 text-zinc-500 hover:text-zinc-900 rounded-2xl transition-all"
                 @click="showRules = false"
               >
                 <Icon name="x" :size="20" />
@@ -545,23 +643,23 @@
                 </h4>
                 <div
                   v-if="submissionGuidelines"
-                  class="text-sm text-zinc-400 leading-relaxed font-medium bg-zinc-950/50 p-6 rounded-3xl border border-zinc-800/50"
+                  class="text-sm text-zinc-700 leading-relaxed font-medium bg-zinc-50 p-6 rounded-3xl border border-zinc-200"
                   v-html="submissionGuidelines.replace(/\n/g, '<br>')"
                 />
                 <div
                   v-else
-                  class="space-y-3 bg-zinc-950/50 p-6 rounded-3xl border border-zinc-800/50"
+                  class="space-y-3 bg-zinc-50 p-6 rounded-3xl border border-zinc-200"
                 >
-                  <div class="flex gap-3 text-sm text-zinc-400 font-medium">
-                    <span class="text-blue-500 font-black">01</span>
+                  <div class="flex gap-3 text-sm text-zinc-700 font-medium">
+                    <span class="text-indigo-600 font-black">01</span>
                     <p>投稿时无需加入书名号</p>
                   </div>
-                  <div class="flex gap-3 text-sm text-zinc-400 font-medium">
-                    <span class="text-blue-500 font-black">02</span>
+                  <div class="flex gap-3 text-sm text-zinc-700 font-medium">
+                    <span class="text-indigo-600 font-black">02</span>
                     <p>除DJ外，其他类型歌曲均接收（包括小语种）</p>
                   </div>
-                  <div class="flex gap-3 text-sm text-zinc-400 font-medium">
-                    <span class="text-blue-500 font-black">03</span>
+                  <div class="flex gap-3 text-sm text-zinc-700 font-medium">
+                    <span class="text-indigo-600 font-black">03</span>
                     <p>禁止投递含有违规内容的歌曲</p>
                   </div>
                 </div>
@@ -575,15 +673,15 @@
                   播放时间
                 </h4>
                 <div
-                  class="bg-blue-600/10 border border-blue-500/20 p-6 rounded-3xl flex items-center gap-4"
+                  class="bg-indigo-50 border border-indigo-200 p-6 rounded-3xl flex items-center gap-4"
                 >
                   <div
-                    class="w-12 h-12 rounded-2xl bg-blue-600 flex items-center justify-center text-white shadow-lg shadow-blue-900/40"
+                    class="w-12 h-12 rounded-2xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20"
                   >
                     <Icon name="clock" :size="24" />
                   </div>
                   <div>
-                    <p class="text-sm font-black text-zinc-100">每天夜自修静班前</p>
+                    <p class="text-sm font-black text-zinc-900">每天夜自修静班前</p>
                     <p class="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mt-0.5">
                       PLAYBACK TIME
                     </p>
@@ -594,7 +692,7 @@
 
             <div class="p-8 pt-0">
               <button
-                class="w-full px-6 py-4 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-black rounded-2xl transition-all uppercase tracking-widest shadow-lg active:scale-95"
+                class="w-full px-6 py-4 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-black rounded-2xl transition-all uppercase tracking-widest shadow-lg shadow-indigo-500/20 active:scale-95"
                 @click="showRules = false"
               >
                 我知道了
@@ -622,8 +720,6 @@ import { useRouter } from 'vue-router'
 import logo from '~~/public/images/logo.png'
 import Icon from '~/components/UI/Icon.vue'
 import ConfirmDialog from '~/components/UI/ConfirmDialog.vue'
-import HeroIllustration from '~/components/UI/HeroIllustration.vue'
-import MobileBottomNav from '~/components/UI/MobileBottomNav.vue'
 
 import { useNotifications } from '~/composables/useNotifications'
 import { useSiteConfig } from '~/composables/useSiteConfig'
@@ -771,10 +867,15 @@ const setupRefreshInterval = async () => {
         await Promise.allSettled([
           songs.fetchSongs(false, undefined, true, true),
           songs.fetchPublicSchedules(false, undefined, true, true),
+          songs.fetchExpectedPlayDates(true, true),
           loadNotifications()
         ])
       } else {
-        await Promise.allSettled([songs.fetchPublicSchedules(false, undefined, true, true), songs.fetchSongCount()])
+        await Promise.allSettled([
+          songs.fetchPublicSchedules(false, undefined, true, true),
+          songs.fetchSongCount(),
+          songs.fetchExpectedPlayDates(true, true)
+        ])
       }
 
       await updateSongCounts()
@@ -1116,13 +1217,14 @@ onMounted(async () => {
       await Promise.allSettled([
         songs.fetchSongs(),
         songs.fetchPublicSchedules(),
+        songs.fetchExpectedPlayDates(),
         loadNotifications(),
         fetchNotificationSettings()
       ])
       await checkPasswordChangeRequired(currentUser)
     } else {
       hasInitializedAuthData.value = false
-      await Promise.allSettled([songs.fetchSongCount(), songs.fetchPublicSchedules()])
+      await Promise.allSettled([songs.fetchSongCount(), songs.fetchPublicSchedules(), songs.fetchExpectedPlayDates()])
     }
 
     await updateSongCounts()
@@ -1147,7 +1249,7 @@ onMounted(async () => {
     }
   } catch (error) {
     console.error('首页初始化失败:', error)
-    await Promise.allSettled([songs.fetchPublicSchedules(), songs.fetchSongCount()])
+    await Promise.allSettled([songs.fetchPublicSchedules(), songs.fetchSongCount(), songs.fetchExpectedPlayDates()])
     await updateSongCounts()
   }
 })
@@ -1164,6 +1266,73 @@ const realSongCount = computed(() => {
   return songs?.visibleSongs?.value?.length || 0
 })
 
+// Hero CTA & 档期概览相关计算属性
+const totalFreeSlots = computed(() => songs?.totalFreeSlots?.value ?? 0)
+const openDaysCount = computed(() => songs?.openDaysCount?.value ?? 0)
+const expectedPlayDates = computed(() => songs?.expectedPlayDates?.value ?? [])
+
+const todayDateStr = computed(() => {
+  const d = new Date()
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+})
+
+const todayLabel = computed(() => {
+  const d = new Date()
+  const md = `${d.getMonth() + 1}月${d.getDate()}日`
+  const wd = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()]
+  return `${md} · 周${wd}`
+})
+
+const totalSchedulesCount = computed(() => {
+  const list = songs?.publicSchedules?.value || []
+  return list.filter((s) => {
+    const song = s?.song
+    return song ? !song.played : true
+  }).length
+})
+
+const todaySchedulesCount = computed(() => {
+  const today = todayDateStr.value
+  const list = songs?.publicSchedules?.value || []
+  return list.filter((s) => {
+    const sDate = s?.expectedPlayDate || s?.playDate
+    if (!sDate) return false
+    const normalized = typeof sDate === 'string' ? sDate.slice(0, 10) : sDate
+    if (normalized !== today) return false
+    const song = s?.song
+    return song ? !song.played : true
+  }).length
+})
+
+// 投稿通道关闭判定（兼容 isRequestOpen ref）
+const submissionClosed = computed(() => {
+  if (typeof isRequestOpen?.value === 'boolean') return !isRequestOpen.value
+  const all = expectedPlayDates.value
+  if (all.length === 0) return false
+  return all.every((d) => !!d?.isFull)
+})
+
+// Hero 投稿按钮点击：未登录先提示登录，已登录跳到投稿 Tab
+const handleHeroRequestClick = () => {
+  if (!isClientAuthenticated.value) {
+    if (window.$showNotification) window.$showNotification('请先登录后再投稿音乐', 'info')
+    navigateTo('/login')
+    return
+  }
+  if (submissionClosed.value) {
+    if (window.$showNotification) window.$showNotification('当前所有档期已满，暂无法投稿', 'warning')
+    return
+  }
+  handleTabClick('request')
+  nextTick(() => {
+    const target = document.querySelector('.request-tab-pane')
+    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  })
+}
+
 // 使用计算属性安全地访问数据
 const publicSchedules = computed(() => songs?.publicSchedules?.value || [])
 const allSongs = computed(() => songs?.visibleSongs?.value || [])
@@ -1226,10 +1395,12 @@ const handleRequest = async (songData, done) => {
         await requestFormRef.value.refreshSubmissionStatus()
       }
 
-      // 投稿成功后自动滚动到歌曲列表
-      setTimeout(() => {
-        scrollToSection('songs-section')
-      }, 500)
+      // 如果当前在歌曲列表页，自动切换到该页面
+      if (activeTab.value !== 'songs') {
+        setTimeout(() => {
+          handleTabClick('songs')
+        }, 500)
+      }
 
       if (typeof done === 'function') done(true)
       return true
@@ -1474,22 +1645,9 @@ const vRipple = {
   }
 }
 
-// 处理标签点击事件（@deprecated 保留以防它处引用，页面现已改为纵向区块无标签切换）
+// 处理标签点击事件，添加动画效果
 const handleTabClick = (tab) => {
-  // activeTab.value = tab
-}
-
-// 滚动到指定区块
-const scrollToSection = (id) => {
-  const el = document.getElementById(id)
-  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-}
-
-// 移动端底部导航处理
-const handleMobileNav = (target) => {
-  if (target === 'account') { router.push('/account'); return }
-  const el = document.getElementById(target)
-  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  activeTab.value = tab
 }
 
 // 添加导航到登录页面的方法
@@ -1599,30 +1757,21 @@ if (
 /* 添加顶部Ellipse 1效果 */
 .ellipse-effect {
   position: absolute;
-  top: -165px;
+  top: -200px;
   left: 50%;
   transform: translateX(-50%) perspective(500px) rotateX(10deg);
   width: 1110px;
-  height: 309px;
+  height: 360px;
   background: radial-gradient(
     ellipse at center,
-    rgba(11, 90, 254, 0.3) 0%,
-    rgba(11, 90, 254, 0.15) 30%,
-    rgba(11, 90, 254, 0) 70%
+    rgba(79, 70, 229, 0.18) 0%,
+    rgba(79, 70, 229, 0.08) 35%,
+    rgba(79, 70, 229, 0) 72%
   );
   z-index: 0;
   pointer-events: none;
 }
 
-/* 右上角浮动用户操作区 */
-.user-actions-floating {
-  position: relative;
-  z-index: 100;
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 16px;
-}
-
 /* 顶部区域样式 */
 .top-bar {
   display: flex;
@@ -1922,7 +2071,7 @@ if (
 /* 站点标题 */
 .site-title {
   text-align: center;
-  margin: 3rem 0;
+  margin: 2.2rem 0 0.2rem;
   padding: 0 1rem;
 }
 
@@ -1930,15 +2079,15 @@ if (
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.6rem;
 }
 
 .main-title {
   font-family: 'MiSans', sans-serif;
   font-weight: 800;
-  font-size: 42px;
+  font-size: 34px;
   letter-spacing: -0.02em;
-  background: linear-gradient(135deg, var(--text-primary, #1a2332) 0%, var(--text-secondary, #4a5568) 100%);
+  background: linear-gradient(135deg, var(--text-primary, #09090b) 0%, var(--text-secondary, #3f3f46) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin: 0;
@@ -3632,18 +3781,4 @@ if (
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 67, 248, 0.3);
 }
-
-/* ============ 新增纵向五区块样式 ============ */
-.home { width:100%; flex:1; background: var(--bg-primary, #FFFFFF); padding: 0; color: var(--text-primary, #111827); min-height:100vh; }
-.main-content { max-width: 1200px; margin: 0 auto; padding: 24px 16px 32px; }
-.hero-block { padding: 48px 0 24px; display: flex; flex-direction: column; gap: 32px; }
-@media (min-width: 1024px) { .hero-block { flex-direction: row; align-items: center; justify-content: space-between; } }
-.hero-title { font-size: 44px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
-.hero-subtitle { font-size: 18px; color: var(--text-secondary, #4B5563); font-weight: 500; margin-bottom: 24px; }
-.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
-.status-info { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-secondary, #F9FAFB); border: 1px solid var(--border-primary, #E5E7EB); border-radius: 8px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
-.content-block { padding: 28px 0; border-top: 1px solid var(--border-primary, #E5E7EB); }
-.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
-.section-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
-.section-header .sub { font-size: 13px; color: var(--text-tertiary, #6B7280); font-weight: 500; cursor: pointer; }
 </style>
diff --git a/package-lock.json b/package-lock.json
index 5866f60..658c172 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -84,7 +84,8 @@
         "@nuxt/eslint": "^1.17.0",
         "eslint": "^9.39.5",
         "prettier": "^3.9.6",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "vue-tsc": "^3.3.11"
       },
       "engines": {
         "node": ">=22.11.0"
@@ -424,6 +425,7 @@
       "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.29.7.tgz",
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -929,6 +931,7 @@
       "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz",
       "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -2107,6 +2110,17 @@
       "integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
       "license": "MIT"
     },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
+      "integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.91.0",
       "resolved": "https://registry.npmmirror.com/@es-joy/jsdoccomment/-/jsdoccomment-0.91.0.tgz",
@@ -2975,7 +2989,7 @@
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
       "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
@@ -2994,7 +3008,7 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3007,7 +3021,7 @@
       "version": "4.12.2",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
       "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -3051,7 +3065,7 @@
       "version": "0.21.2",
       "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
       "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
@@ -3066,14 +3080,14 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@eslint/config-array/node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -3084,7 +3098,7 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
       "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3097,7 +3111,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
       "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/core": "^0.17.0"
@@ -3168,7 +3182,7 @@
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
       "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@types/json-schema": "^7.0.15"
@@ -3202,7 +3216,7 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-3.3.7.tgz",
       "integrity": "sha512-F42g89Qd5oAWtp0k0nnSrjziAKza7w8SVT4mStc18LZMaRb4J1HQAHLCalEtDCxrTuksx7NU9qsmeLwpOfPqWw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ajv": "^6.14.0",
@@ -3226,14 +3240,14 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
       "version": "1.1.18",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.18.tgz",
       "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -3244,7 +3258,7 @@
       "version": "14.0.0",
       "resolved": "https://registry.npmmirror.com/globals/-/globals-14.0.0.tgz",
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -3257,7 +3271,7 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.5.tgz",
       "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3270,7 +3284,7 @@
       "version": "9.39.5",
       "resolved": "https://registry.npmmirror.com/@eslint/js/-/js-9.39.5.tgz",
       "integrity": "sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3283,7 +3297,7 @@
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
       "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3293,7 +3307,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
       "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/core": "^0.17.0",
@@ -3313,7 +3327,7 @@
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18.18.0"
@@ -3323,7 +3337,7 @@
       "version": "0.16.7",
       "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
       "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@humanfs/core": "^0.19.1",
@@ -3337,7 +3351,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=12.22"
@@ -3351,7 +3365,7 @@
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18.18"
@@ -3854,7 +3868,8 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/citty/-/citty-0.2.2.tgz",
       "integrity": "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@nuxt/devalue": {
       "version": "2.0.2",
@@ -4224,6 +4239,7 @@
       "resolved": "https://registry.npmmirror.com/@nuxt/kit/-/kit-4.5.2.tgz",
       "integrity": "sha512-l66LU9DcJYjmNwqwAj2I5UGRrUbnG2DOKGChnN70zIGtn0eq/z87gi/FRgha6eMb9/FmB1PFHgtx6PWVml1C2Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "c12": "^3.3.4",
         "consola": "^3.4.2",
@@ -4385,6 +4401,7 @@
       "resolved": "https://registry.npmmirror.com/@nuxt/schema/-/schema-4.5.2.tgz",
       "integrity": "sha512-h9g1kt9O2iU9nX6HDFu9gvwtpn+8oSJX0RSTWRBnEx/Pkz+WlOHtjuS0SbkTAXw5aT1+H1GysWVwNTjJfBY/0w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/shared": "^3.5.40",
         "defu": "^6.1.7",
@@ -4568,6 +4585,7 @@
       "resolved": "https://registry.npmmirror.com/@opentelemetry/api/-/api-1.9.1.tgz",
       "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -4589,6 +4607,7 @@
       "resolved": "https://registry.npmmirror.com/@opentelemetry/core/-/core-2.11.0.tgz",
       "integrity": "sha512-7YP44XH0tV6+Mb54x2YGf84i7yi+31MBZlE8JwvozkxyTvXbSp10X7cI7YE49ChJ3shMJoBmCJF3+1QFBJctGA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/semantic-conventions": "^1.29.0"
       },
@@ -4604,6 +4623,7 @@
       "resolved": "https://registry.npmmirror.com/@opentelemetry/instrumentation/-/instrumentation-0.220.0.tgz",
       "integrity": "sha512-xQx3E2WxP1mDvKzxLxX+CTCtNLa560YJZ3087qYHerl2YmiKpv7AH+dAy7vmx+eVrZ5BwhfWUAVoKOoxCNHcpw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/api-logs": "0.220.0",
         "import-in-the-middle": "^3.0.0",
@@ -4654,6 +4674,7 @@
       "resolved": "https://registry.npmmirror.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.11.0.tgz",
       "integrity": "sha512-H19x/TX/LZdqiYOjM7fqtSxwlplC5pgelavqbQdHbhdq0q/AI/TGkM2dfGuuynTXmJPeF2HoZVoPDu+TGoW78A==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.11.0",
         "@opentelemetry/resources": "2.11.0",
@@ -4731,6 +4752,7 @@
       "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.148.0.tgz",
       "integrity": "sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/oxc-project"
       }
@@ -4744,41 +4766,6 @@
         "@noble/hashes": "^1.1.5"
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.6.0.tgz",
-      "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.3",
-        "is-glob": "^4.0.3",
-        "node-addon-api": "^7.0.0",
-        "picomatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.6.0",
-        "@parcel/watcher-darwin-arm64": "2.6.0",
-        "@parcel/watcher-darwin-x64": "2.6.0",
-        "@parcel/watcher-freebsd-x64": "2.6.0",
-        "@parcel/watcher-linux-arm-glibc": "2.6.0",
-        "@parcel/watcher-linux-arm-musl": "2.6.0",
-        "@parcel/watcher-linux-arm64-glibc": "2.6.0",
-        "@parcel/watcher-linux-arm64-musl": "2.6.0",
-        "@parcel/watcher-linux-x64-glibc": "2.6.0",
-        "@parcel/watcher-linux-x64-musl": "2.6.0",
-        "@parcel/watcher-win32-arm64": "2.6.0",
-        "@parcel/watcher-win32-x64": "2.6.0"
-      }
-    },
     "node_modules/@parcel/watcher-android-arm64": {
       "version": "2.6.0",
       "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz",
@@ -5209,6 +5196,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.4.3.tgz",
       "integrity": "sha512-opyWMuO0Ir8pf1DYUR++wAA6ZfNU+nIX2z95R2OD172HbcdhB4/HD7leLIIAny/LciEdMqlWEBhXK7N93YWbdg==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.3",
         "@pixi/display": "7.4.3"
@@ -5240,6 +5228,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/core/-/core-7.4.3.tgz",
       "integrity": "sha512-5YDs11faWgVVTL8VZtLU05/Fl47vaP5Tnsbf+y/WRR0VSW3KhRRGTBU1J3Gdc2xEWbJhUK07KGP7eSZpvtPVgA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@pixi/color": "7.4.3",
         "@pixi/constants": "7.4.3",
@@ -5260,6 +5249,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/display/-/display-7.4.3.tgz",
       "integrity": "sha512-b5m2dAaoNAVdxz1oDaxl3XZ059NEOcNtGkxTOZ4EYCw/jcp9sZXkgSROHRzsGn4k+NugH7+9MP4Id2Z0kkdUhw==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.3"
       }
@@ -5275,6 +5265,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-7.4.3.tgz",
       "integrity": "sha512-ZFzS9L/whdRbs5A/EUgF3yQaBcxNarmbuwaMgrfnpQ84mRczkGByqDLGToadiufyals07ufTrXBGRle9lbtEDA==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.3"
       }
@@ -5284,6 +5275,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/filter-bulge-pinch/-/filter-bulge-pinch-5.1.1.tgz",
       "integrity": "sha512-80I3g813td7Fnzi7IJSiR3z8gZlKblk6WN+5z6WnscQROcNEpck6lgWS/Lf/IdeHB/FtUKJCbx7RzxkUhiRTvA==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@pixi/core": "^7.0.0-X"
       }
@@ -5293,6 +5285,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-7.4.3.tgz",
       "integrity": "sha512-TNu0h20SrzjUWIb5v19dAp1vPpqtG0w2XF9kIHN91bMNaf3R1jzhpWG6TtaVO9eo1IolWcEJLw38jIohyC+KNw==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.3"
       }
@@ -5325,6 +5318,7 @@
       "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-7.4.3.tgz",
       "integrity": "sha512-iNBrpOFF9nXDT6m2jcyYy6l/sRzklLDDck1eFHprHZwvNquY2nzRfh+RGBCecxhBcijiLJ3fsZN33fP0LDXkvw==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.3",
         "@pixi/display": "7.4.3"
@@ -5424,6 +5418,7 @@
       "resolved": "https://registry.npmmirror.com/@redis/client/-/client-5.12.1.tgz",
       "integrity": "sha512-7aPGWeqA3uFm43o19umzdl16CEjK/JQGtSXVPevplTaOU3VJA/rseBC1QvYUz9lLDIMBimc4SW/zrW4S89BaCA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cluster-key-slot": "1.1.2"
       },
@@ -6578,6 +6573,7 @@
       "integrity": "sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
         "@typescript-eslint/types": "^8.56.0",
@@ -6802,6 +6798,7 @@
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
       "integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.8.0"
       }
@@ -6923,8 +6920,9 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
-      "license": "MIT"
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/jsonwebtoken": {
       "version": "9.0.10",
@@ -6995,6 +6993,7 @@
       "resolved": "https://registry.npmmirror.com/@types/pg/-/pg-8.20.0.tgz",
       "integrity": "sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "pg-protocol": "*",
@@ -7105,6 +7104,7 @@
       "integrity": "sha512-l4b0DhWioGg6Gt2ebGlvfkFMOjRsauxtsnDRwUSRX1qHq3HdTfQHV8wW9zEXeciai6HfeaKOedQn2Zoofx3WBw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.69.0",
         "@typescript-eslint/types": "8.69.0",
@@ -7925,6 +7925,35 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/language-core/-/language-core-2.4.28.tgz",
+      "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.28"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/source-map/-/source-map-2.4.28.tgz",
+      "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/typescript/-/typescript-2.4.28.tgz",
+      "integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
     "node_modules/@vue-macros/common": {
       "version": "3.1.4",
       "resolved": "https://registry.npmmirror.com/@vue-macros/common/-/common-3.1.4.tgz",
@@ -8030,6 +8059,7 @@
       "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.42.tgz",
       "integrity": "sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.29.8",
         "@vue/compiler-core": "3.5.42",
@@ -8104,6 +8134,22 @@
       "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==",
       "license": "MIT"
     },
+    "node_modules/@vue/language-core": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-3.3.11.tgz",
+      "integrity": "sha512-QJmpliwAVpC/OxubIByPAhNzsQPRc8/gxlN2qnVzVfIMjMDz/9RnXRFoetjz5yEgXVXyp4LqhXq3V53PjmNzFw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.2.1",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.4"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.42",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.42.tgz",
@@ -8191,6 +8237,7 @@
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.18.0.tgz",
       "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8211,7 +8258,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -8239,7 +8286,7 @@
       "version": "6.15.0",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.15.0.tgz",
       "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -8252,6 +8299,13 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alien-signals": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/alien-signals/-/alien-signals-3.2.1.tgz",
+      "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -8512,7 +8566,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "Python-2.0"
     },
     "node_modules/array-buffer-byte-length": {
@@ -8805,6 +8859,7 @@
       "resolved": "https://registry.npmmirror.com/bare-events/-/bare-events-2.9.2.tgz",
       "integrity": "sha512-AIPKioV7/Y/8KfZ3AAhjPJxLLbY49S64Ym5DakZlUg75qQiTgUq9hEJoEwa4eUezPUlXRy/i5NpsKvo9jgKmoA==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "bare-abort-controller": "*"
       },
@@ -9013,6 +9068,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.20",
         "caniuse-lite": "^1.0.30001810",
@@ -9240,7 +9296,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -10149,7 +10205,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/deepmerge": {
@@ -10357,6 +10413,7 @@
       "integrity": "sha512-aypfsr6t0uNvkqaZc6zvBfXzC6pLI0/sIulpkV6RwCVtZqG5ebBzv4weImKK0VNCj91Wl9F5j7p5WU4MNrybng==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "srvx": ">=0.11.5"
       },
@@ -10401,6 +10458,7 @@
       "integrity": "sha512-aOuk+yNJA61yA6eJJvQJxpJLIxz090hKMqDGzd35tGsvwaodi1RPuYSFUp5EINaJp7snjVwLkO2RXVMPZBYnnA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "srvx": "bin/srvx.mjs"
       },
@@ -11029,6 +11087,7 @@
       "resolved": "https://registry.npmmirror.com/drizzle-orm/-/drizzle-orm-0.45.2.tgz",
       "integrity": "sha512-kY0BSaTNYWnoDMVoyY8uxmyHjpJW1geOmBMdSSicKo9CIIWkSxMIj2rkeSR51b8KAPB7m+qysjuHme5nKP+E5Q==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "@aws-sdk/client-rds-data": ">=3",
         "@cloudflare/workers-types": ">=4",
@@ -11422,6 +11481,7 @@
       "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -11476,7 +11536,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -11490,8 +11550,9 @@
       "resolved": "https://registry.npmmirror.com/eslint/-/eslint-9.39.5.tgz",
       "integrity": "sha512-DgZS62aPLXKlnxILS/AYCoRvHaZeXceIzlXPkkGGzJWSow1aEk0lbTlxUSlyjC8jcaKxAdOnTDz+o1JFSBsyjw==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -11846,7 +11907,7 @@
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
       "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -11880,7 +11941,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -11893,14 +11954,14 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/eslint/node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -11911,7 +11972,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -11928,7 +11989,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "locate-path": "^6.0.0",
@@ -11945,7 +12006,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "p-locate": "^5.0.0"
@@ -11961,7 +12022,7 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
       "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -11974,7 +12035,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
@@ -11990,7 +12051,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "p-limit": "^3.0.2"
@@ -12006,7 +12067,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -12019,7 +12080,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -12032,7 +12093,7 @@
       "version": "10.4.0",
       "resolved": "https://registry.npmmirror.com/espree/-/espree-10.4.0.tgz",
       "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.15.0",
@@ -12050,7 +12111,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
       "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
@@ -12063,7 +12124,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -12076,7 +12137,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -12230,7 +12291,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-npm-meta": {
@@ -12335,7 +12396,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "flat-cache": "^4.0.0"
@@ -12432,7 +12493,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
@@ -12446,7 +12507,7 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.4.tgz",
       "integrity": "sha512-3+mMldrTAPdta5kjX2G2J7iX4zxtnwpdA8Tr2ZSjkyPSanvbZAcy6flmtnXbEybHrDcU9641lxrMfFuUxVz9vA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/fnv1a-64": {
@@ -13329,7 +13390,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -13373,7 +13434,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
@@ -14107,7 +14168,7 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.3.2.tgz",
       "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -14152,7 +14213,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-schema-to-typescript-lite": {
@@ -14170,14 +14231,14 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json5": {
@@ -14307,7 +14368,7 @@
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
@@ -14571,7 +14632,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1",
@@ -14595,6 +14656,7 @@
       "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.33.0.tgz",
       "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
       "license": "MPL-2.0",
+      "peer": true,
       "dependencies": {
         "detect-libc": "^2.0.3"
       },
@@ -15013,7 +15075,7 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/lodash.once": {
@@ -15423,7 +15485,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/negotiator": {
@@ -16194,6 +16256,7 @@
       "resolved": "https://registry.npmmirror.com/nuxt/-/nuxt-4.5.2.tgz",
       "integrity": "sha512-tR3fcqeHlHmmkLMpIg3V7Y+1ltr302lW8djMw/iy+myfo7QSSz+BVJDuQhg5j73b9oteSyBfOKTDYTgvMtj6TA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dxup/nuxt": "^0.5.6",
         "@nuxt/cli": "^3.37.0",
@@ -16332,6 +16395,7 @@
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.2.3.tgz",
       "integrity": "sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
@@ -16646,8 +16710,9 @@
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -16804,7 +16869,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -16839,6 +16904,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -17066,6 +17138,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.18",
         "picocolors": "^1.1.1",
@@ -17611,6 +17684,7 @@
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-7.1.6.tgz",
       "integrity": "sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -17661,6 +17735,7 @@
       "resolved": "https://registry.npmmirror.com/postgres/-/postgres-3.4.9.tgz",
       "integrity": "sha512-GD3qdB0x1z9xgFI6cdRD6xu2Sp2WCOEoe3mtnyB5Ee0XrrL5Pe+e4CCnJrRMnL1zYtRDZmQQVbvOttLnKDLnaw==",
       "license": "Unlicense",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17724,7 +17799,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8.0"
@@ -17816,7 +17891,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -18453,7 +18528,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -18560,6 +18635,7 @@
       "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.2.7.tgz",
       "integrity": "sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.148.0",
         "@rolldown/pluginutils": "^1.0.0"
@@ -19786,7 +19862,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -20044,6 +20120,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -20421,6 +20498,7 @@
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -20457,7 +20535,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1"
@@ -20578,8 +20656,9 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -20689,6 +20768,7 @@
       "resolved": "https://registry.npmmirror.com/unhead/-/unhead-3.4.0.tgz",
       "integrity": "sha512-OlgpyYjY+NkFyQCaMihg2uTFbbvyr5lZr6TokS68VdFTXJ5jo4JwFtGR8PwKy/wRpjbQYgKF7ZYO+pbRgxtSmw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "hookable": "^6.1.1",
         "unplugin": "^3.3.0"
@@ -20944,6 +21024,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.3.4"
       },
@@ -21197,7 +21278,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -21283,6 +21364,7 @@
       "resolved": "https://registry.npmmirror.com/vite/-/vite-8.2.2.tgz",
       "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.5",
@@ -21683,11 +21765,19 @@
         "vite": "^2 || ^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.2.0.tgz",
+      "integrity": "sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/vue": {
       "version": "3.5.42",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.42.tgz",
       "integrity": "sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.42",
         "@vue/compiler-sfc": "3.5.42",
@@ -21731,6 +21821,7 @@
       "integrity": "sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "eslint-scope": "^8.2.0 || ^9.0.0",
@@ -21754,6 +21845,7 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
       "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
       },
@@ -21764,6 +21856,24 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/vue-tsc": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-3.3.11.tgz",
+      "integrity": "sha512-gOb0B9rtU2+f1dszwPqSH5kAieIF9ReeLhD3kSRNHv5WZZUQz/JdVXW0RTdqhNTMlQkqKzrTTviqKr/4FYZraQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@volar/typescript": "2.4.28",
+        "@vue/language-core": "3.3.11"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
     "node_modules/wasm-media-encoders": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/wasm-media-encoders/-/wasm-media-encoders-0.7.0.tgz",
@@ -21939,7 +22049,7 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -22042,6 +22152,7 @@
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.20.0.tgz",
       "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -22429,8 +22540,9 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.9.0.tgz",
       "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
+      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
diff --git a/package.json b/package.json
index cf0977c..756363e 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,7 @@
     "@nuxt/eslint": "^1.17.0",
     "eslint": "^9.39.5",
     "prettier": "^3.9.6",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vue-tsc": "^3.3.11"
   }
 }