完成大量美化

2026-05-01 14:44:18 +08:00
parent 1d0f0ae0ef
commit 6b65b24b0f
49 changed files with 2487 additions and 9019 deletions
--- a/frontend/src/styles/variables.css
+++ b/frontend/src/styles/variables.css
@@ -88,6 +88,11 @@
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
+  
+  /* Font Families */
+  --font-ui: "Microsoft YaHei UI", "微软雅黑 UI", "Segoe UI", sans-serif; /* UI 元素字体 */
+  --font-body: "Microsoft YaHei", "微软雅黑", "Segoe UI", sans-serif;      /* 正文字体 */
+  --font-code: "Consolas", "Monaco", "Courier New", monospace;              /* 代码字体 */
 }

 /* Global theme transition */
@@ -148,3 +153,125 @@
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.06);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.03);
 }
+
+/* ==================== Color Themes ==================== */
+
+/* 方案一：仿纸暖黄（最经典护眼）*/
+[data-color-theme='paper'] {
+  --color-bg-primary: #F5ECD7;
+  --color-bg-secondary: #F0EBE3;
+  --color-bg-tertiary: #FBF8F2;
+  --color-bg-elevated: #FFFFFF;
+  --color-bg-subtle: #EDE4D0; /* 比主背景略深 */
+  
+  --color-text-primary: #3E3A35;
+  --color-text-secondary: #5A5650;
+  --color-text-muted: #8B8580;
+  --color-text-inverse: #F5ECD7;
+  
+  --color-border: #D9D0C1;
+  --color-border-light: #E5DDD0;
+  --color-border-focus: #C9C0B1;
+  
+  --color-accent: #8B9A6B;
+  --color-accent-hover: #7A895A;
+  --color-accent-active: #697849;
+  --color-accent-light: rgba(139, 154, 107, 0.15);
+  --color-accent-ultra-light: rgba(139, 154, 107, 0.08);
+  
+  --color-scrollbar: #B8B0A0;
+  --color-scrollbar-hover: #9A9282;
+  
+  --gradient-primary: linear-gradient(135deg, #8B9A6B 0%, #A68B5B 100%);
+  --gradient-subtle: linear-gradient(180deg, rgba(139, 154, 107, 0.08) 0%, transparent 100%);
+}
+
+/* 方案二：现代清爽（极浅灰白）*/
+[data-color-theme='modern'] {
+  --color-bg-primary: #F8F8F8;
+  --color-bg-secondary: #F2F2F2;
+  --color-bg-tertiary: #FFFFFF;
+  --color-bg-elevated: #FFFFFF;
+  --color-bg-subtle: #F0F0F0; /* 比主背景略深 */
+  
+  --color-text-primary: #2C2C2C;
+  --color-text-secondary: #5A5A5A;
+  --color-text-muted: #999999;
+  --color-text-inverse: #F8F8F8;
+  
+  --color-border: #E0E0E0;
+  --color-border-light: #EBEBEB;
+  --color-border-focus: #D0D0D0;
+  
+  --color-accent: #4A9FB0;
+  --color-accent-hover: #3A8FA0;
+  --color-accent-active: #2A7F90;
+  --color-accent-light: rgba(74, 159, 176, 0.12);
+  --color-accent-ultra-light: rgba(74, 159, 176, 0.06);
+  
+  --color-scrollbar: #BBBBBB;
+  --color-scrollbar-hover: #999999;
+  
+  --gradient-primary: linear-gradient(135deg, #4A9FB0 0%, #5B8FB0 100%);
+  --gradient-subtle: linear-gradient(180deg, rgba(74, 159, 176, 0.05) 0%, transparent 100%);
+}
+
+/* 方案三：夜间暗色（黑底灰字）*/
+[data-color-theme='dark'] {
+  --color-bg-primary: #1E1E1E;
+  --color-bg-secondary: #252526;
+  --color-bg-tertiary: #2D2D30;
+  --color-bg-elevated: #333336;
+  --color-bg-subtle: #252526; /* 比主背景略亮 */
+  
+  --color-text-primary: #BDBBB6;
+  --color-text-secondary: #9E9E9E;
+  --color-text-muted: #757575;
+  --color-text-inverse: #1E1E1E;
+  
+  --color-border: #3E3E40;
+  --color-border-light: #333335;
+  --color-border-focus: #4E4E50;
+  
+  --color-accent: #D4A76A;
+  --color-accent-hover: #C4975A;
+  --color-accent-active: #B4874A;
+  --color-accent-light: rgba(212, 167, 106, 0.15);
+  --color-accent-ultra-light: rgba(212, 167, 106, 0.08);
+  
+  --color-scrollbar: #666666;
+  --color-scrollbar-hover: #888888;
+  
+  --gradient-primary: linear-gradient(135deg, #D4A76A 0%, #6A8CA8 100%);
+  --gradient-subtle: linear-gradient(180deg, rgba(212, 167, 106, 0.05) 0%, transparent 100%);
+}
+
+/* 方案四：豆沙绿（自然疗愈）*/
+[data-color-theme='green'] {
+  --color-bg-primary: #DCE5D9;
+  --color-bg-secondary: #E8EFE6;
+  --color-bg-tertiary: #F4F9F2;
+  --color-bg-elevated: #FFFFFF;
+  --color-bg-subtle: #D0D9CD; /* 比主背景略深 */
+  
+  --color-text-primary: #2B3330;
+  --color-text-secondary: #4A5550;
+  --color-text-muted: #7A8580;
+  --color-text-inverse: #DCE5D9;
+  
+  --color-border: #C0CFBB;
+  --color-border-light: #D0DFCB;
+  --color-border-focus: #B0BFAB;
+  
+  --color-accent: #7D9B7A;
+  --color-accent-hover: #6D8B6A;
+  --color-accent-active: #5D7B5A;
+  --color-accent-light: rgba(125, 155, 122, 0.15);
+  --color-accent-ultra-light: rgba(125, 155, 122, 0.08);
+  
+  --color-scrollbar: #A0B09D;
+  --color-scrollbar-hover: #889885;
+  
+  --gradient-primary: linear-gradient(135deg, #7D9B7A 0%, #6E8B6B 100%);
+  --gradient-subtle: linear-gradient(180deg, rgba(125, 155, 122, 0.08) 0%, transparent 100%);
+}