feat(style): 前台强制切换浅色主题，保护后台管理页暗色

- variables.css: 新增 body[data-frontend]:not(.admin-body) 作用域浅色系变量包含 --accent-purple/pink/blue 三色花点缀色，圆角上限 8px 硬边设计 - theme-protection.css: 前台页面及表单控件强制 color-scheme: light - default.vue: onMounted 时为 body 注入 data-frontend=true 标记 - dashboard.vue: 根容器添加 admin-body class，阻断前台浅色变量污染
2026-09-13 18:26:25 +08:00
parent c2114f0d82
commit e8eada885a
4 changed files with 128 additions and 2 deletions
@@ -21,6 +21,15 @@
  color-scheme: light;
 }

+/* ===== 前台页面强制浅色 color-scheme（防止系统深色干扰）===== */
+body[data-frontend="true"]:not(.admin-body),
+body[data-frontend="true"]:not(.admin-body) input,
+body[data-frontend="true"]:not(.admin-body) textarea,
+body[data-frontend="true"]:not(.admin-body) select,
+body[data-frontend="true"]:not(.admin-body) button {
+  color-scheme: light;
+}
+
 /* 保护表单元素外观，但不强锁 color-scheme = none（none 会导致控件 fallback 到浅色） */
 input[type='text'],
 input[type='email'],
@@ -398,6 +398,121 @@
  --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 {