feat: 一些更新

src/styles/main.scss

@@ -8,33 +8,33 @@
   --primary-light: rgba(139, 115, 85, 0.1);
   --danger: #dc3545;
   --warning: #ffc107;
-  
+
   // 背景
   --bg-primary: #F0EEE9;
   --bg-secondary: rgba(255, 255, 255, 0.7);
   --bg-tertiary: rgba(0, 0, 0, 0.03);
   --bg-hover: rgba(0, 0, 0, 0.05);
-  
+
   // 文字
   --text-primary: #3d3d3d;
   --text-secondary: #666666;
   --text-tertiary: #999999;
-  
+
   // 边框
   --border-color: rgba(0, 0, 0, 0.08);
   --border-radius: 9999px;
-  
+
   // 阴影
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-  
+
   // 侧边栏
   --sidebar-width: 220px;
-  
+
   // 主题渐变
   --bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
   --primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
-  
+
   // 卡片背景
   --card-bg: rgba(255, 255, 255, 0.7);
 }
@@ -235,7 +235,8 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   height: 100%;
   font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px;
@@ -263,7 +264,7 @@ html, body {
 ::-webkit-scrollbar-thumb {
   background: var(--text-tertiary);
   border-radius: 3px;
-  
+
   &:hover {
     background: var(--text-secondary);
   }
@@ -280,20 +281,20 @@ html, body {
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s;
-  
+
   &-primary {
     background: var(--primary);
     color: white;
-    
+
     &:hover {
       background: var(--primary-hover);
     }
   }
-  
+
   &-secondary {
     background: var(--bg-tertiary);
     color: var(--text-primary);
-    
+
     &:hover {
       background: var(--border-color);
     }
@@ -307,3 +308,60 @@ html, body {
   box-shadow: var(--shadow-sm);
   padding: 16px;
 }
+
+// 全局 Switch 开关样式
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .switch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--bg-tertiary);
+    transition: 0.3s;
+    border-radius: 24px;
+    border: 1px solid var(--border-color);
+
+    &::before {
+      position: absolute;
+      content: "";
+      height: 18px;
+      width: 18px;
+      left: 2px;
+      bottom: 2px;
+      background-color: var(--text-tertiary);
+      transition: 0.3s;
+      border-radius: 50%;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  input:checked+.switch-slider {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    &::before {
+      transform: translateX(20px);
+      background-color: #ffffff;
+    }
+  }
+
+  // 禁用状态
+  input:disabled+.switch-slider {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}