refactor: 统一样式变量并规范过渡动画

assets/style.css

@@ -27,6 +27,30 @@
     --gradient-color-simple: linear-gradient(135deg, #4a9eff 0%, #a855f7 100%);
     --sidebar-width: 240px;
     --sidebar-collapsed-width: 60px;
+
+    /* Spacing System */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+
+    /* Border Radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Transitions */
+    --transition-fast: 0.2s ease;
+    --transition-normal: 0.3s ease;
+    --transition-slow: 0.5s ease;
+    --transition-bounce: cubic-bezier(0.4, 0, 0.2, 1);
+    
+    /* RGB Values for opacity manipulation */
+    --card-bg-rgb: 47, 48, 53;
 }
 
 /* 浅色主题：预加载阶段同样应用变量，避免读取默认暗色值 */
@@ -56,6 +80,7 @@ body.light-theme {
     --white-color: #ffffff;
     --gradient-color: linear-gradient(135deg, #4a9eff 0%, #a855f7 50%, #ff6b6b 100%);
     --gradient-color-simple: linear-gradient(135deg, #4a9eff 0%, #a855f7 100%);
+    --card-bg-rgb: 240, 240, 235;
 }
 
 /* 预加载主题 - 在JS完全加载前显示正确的主题 */
@@ -85,18 +110,19 @@ html.preload * {
 /* 主题切换按钮 */
 .theme-toggle {
     position: fixed;
-    bottom: 2rem;
+    bottom: var(--spacing-xl);
-    right: 2rem;
+    right: var(--spacing-xl);
-    width: 40px;
+    width: 2.5rem;
-    height: 40px;
+    height: 2.5rem;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
     color: var(--text-bright);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--transition-normal);
+    transition-timing-function: var(--transition-bounce);
     z-index: 100;
     box-shadow: 0 4px 16px var(--shadow-color);
     border: 1px solid var(--border-color);
@@ -154,7 +180,7 @@ html {
 /* 搜索高亮样式 */
 .highlight {
     background-color: var(--highlight-bg);
-    border-radius: 2px;
+    border-radius: var(--radius-sm);
     padding: 0 2px;
     font-weight: bold;
     color: var(--text-color);
@@ -193,14 +219,14 @@ body.loaded .layout {
 .mobile-buttons {
     display: none;
     position: fixed;
-    top: 1rem;
+    top: var(--spacing-md);
     left: 0;
     right: 0;
     width: 100%;
-    padding: 0 1rem;
+    padding: 0 var(--spacing-md);
     justify-content: space-between;
-    z-index: 900; /* 修改z-index，确保按钮层级高于基础内容但低于弹出面板 */
+    z-index: 900;
-    pointer-events: none; /* 防止按钮区域阻挡其他内容 */
+    pointer-events: none;
 }
 
 .menu-toggle,
@@ -208,16 +234,16 @@ body.loaded .layout {
     background: var(--sidebar-bg);
     border: none;
     color: var(--text-color);
-    width: 40px;
+    width: 2.5rem;
-    height: 40px;
+    height: 2.5rem;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.25s var(--transition-bounce);
     box-shadow: 0 2px 8px var(--shadow-color);
-    pointer-events: auto; /* 恢复按钮的点击事件 */
+    pointer-events: auto;
 }
 
 .menu-toggle:hover,
@@ -264,19 +290,17 @@ body.loaded .layout {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform: translateZ(0);
-    height: 100vh; /* 确保高度固定 */
+    height: 100vh;
-    /* 使用Grid布局分为三个部分 */
     display: grid;
     grid-template-rows: auto 1fr auto;
     grid-template-areas: 
         "header"
         "content"
         "footer";
-    /* 应用自定义滚动条样式 */
+    scrollbar-width: thin;
-    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: var(--scrollbar-color) transparent;
-    scrollbar-color: var(--scrollbar-color) transparent; /* Firefox */
+    overflow-y: hidden;
-    overflow-y: hidden; /* 防止整个侧边栏滚动 */
+    transition: background-color var(--transition-normal);
-    transition: background-color 0.3s ease;
 }
 
 /* 侧边栏折叠状态 */
@@ -291,7 +315,7 @@ body.loaded .layout {
     justify-content: center;
     display: flex;
     align-items: center;
-    height: 60px; /* 确保与展开状态高度一致 */
+    height: 3.75rem; /* 确保与展开状态高度一致 */
     margin-bottom: 0.8rem; /* 收起态同样拉开与按钮的间距 */
 }
 
@@ -327,7 +351,7 @@ body.loaded .layout {
     justify-content: space-between;
     overflow: hidden; /* 防止内容溢出 */
     position: relative; /* 添加相对定位，作为按钮的参考 */
-    height: 60px; /* 固定高度，确保两种状态下一致 */
+    height: 3.75rem; /* 固定高度 60px */
     margin-bottom: 0.8rem; /* 与下方按钮区域拉开间距 */
     transition: padding 0.3s ease; /* 添加padding过渡，避免突变 */
 }
@@ -484,12 +508,12 @@ body.loaded .layout {
 .sidebar.collapsed .nav-item {
     padding: 0;
     justify-content: center;
-    width: 44px; /* 增大按钮方块尺寸 */
+    width: 2.75rem; /* 增大按钮方块尺寸 44px */
-    height: 44px; /* 增大按钮方块尺寸 */
+    height: 2.75rem; /* 增大按钮方块尺寸 44px */
     text-align: center;
     margin-left: auto;
     margin-right: auto;
-    border-radius: 10px; /* 略增圆角 */
+    border-radius: var(--radius-md); /* 略增圆角 */
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -524,29 +548,28 @@ body.loaded .layout {
 .nav-item {
     display: flex;
     align-items: center;
-    height: 44px; /* 增大按钮高度 */
+    height: 44px;
-    padding: 0 0.9rem; /* 略增左右内边距 */
+    padding: 0 0.9rem;
     color: var(--nav-item-color);
     text-decoration: none;
-    border-radius: 10px; /* 略增圆角，与增大高度协调 */
+    border-radius: var(--radius-md);
-    /* 限定可过渡属性，避免折叠/展开时Y向抖动 */
+    transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
-    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
     position: relative;
 }
 
 .nav-item .icon-container {
     width: 24px;
-    height: 100%; /* 与按钮高度一致，垂直对齐更稳定 */
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 1rem;
+    margin-right: var(--spacing-md);
-    transition: margin 0.3s ease;
+    transition: margin var(--transition-normal);
 }
 
 .nav-item .nav-text {
     flex: 1;
-    transition: opacity 0.3s ease, transform 0.3s ease;
+    transition: opacity var(--transition-normal), transform var(--transition-normal);
     white-space: nowrap;
     overflow: hidden;
 }
@@ -555,7 +578,7 @@ body.loaded .layout {
     font-size: 0.9rem;
     opacity: 0.6;
     margin-left: 0.5rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .nav-item:hover {
@@ -637,17 +660,18 @@ body .content.expanded {
 .category-toggle {
     position: fixed;
     bottom: 5rem;
-    right: 2rem;
+    right: var(--spacing-xl);
-    width: 40px;
+    width: 2.5rem;
-    height: 40px;
+    height: 2.5rem;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
     color: var(--text-bright);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--transition-normal);
+    transition-timing-function: var(--transition-bounce);
     z-index: 100;
     box-shadow: 0 4px 16px var(--shadow-color);
     border: 1px solid var(--border-color);
@@ -675,8 +699,8 @@ body .content.expanded {
     width: 100%;
     max-width: 600px;
     background-color: var(--sidebar-bg);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
-    transition: background-color 0.3s ease;
+    transition: background-color var(--transition-normal);
 }
 
 .search-box::after {
@@ -689,8 +713,8 @@ body .content.expanded {
     height: 6px;
     border-radius: 50%;
     opacity: 0;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
-    pointer-events: none; /* 不阻挡点击，避免遮住图标可点击区域 */
+    pointer-events: none;
 }
 
 .search-box.has-results::after {
@@ -705,13 +729,13 @@ body .content.expanded {
 
 .search-box input {
     width: 100%;
-    padding: 1rem 6rem 1rem 1.5rem; /* 扩大右侧内边距，给左移的点留空间 */
+    padding: var(--spacing-md) 6rem var(--spacing-md) var(--spacing-lg); /* 扩大右侧内边距，给左移的点留空间 */
     border: none;
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background-color: transparent;
     color: var(--text-color);
     font-size: 1rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
     box-shadow: 0 2px 8px var(--shadow-color);
 }
 
@@ -776,7 +800,7 @@ body .content.expanded {
     top: calc(100% + 5px);
     right: 1rem;
     background-color: var(--sidebar-bg);
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     box-shadow: 0 4px 15px var(--shadow-color);
     display: none;
     z-index: 100;
@@ -906,26 +930,26 @@ body .content.expanded {
 /* 分类样式 */
 .category {
     background: linear-gradient(145deg, var(--card-bg-gradient-1), var(--card-bg-gradient-2));
-    border-radius: 16px;
+    border-radius: var(--radius-xl);
-    padding: 1.2rem;
+    padding: var(--spacing-lg);
-    margin: 0 1rem 1.5rem 2rem;
+    margin: 0 var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
     width: calc(100% - 3rem);
     max-width: 1300px;
     position: relative;
     z-index: 1;
-    opacity: 1; /* 移除进入时的浮动/淡入动画，避免切页时跳动 */
+    opacity: 1;
     box-shadow: 0 4px 20px var(--shadow-color);
     border: 1px solid var(--border-color);
-    transition: background 0.3s ease, box-shadow 0.3s ease;
+    transition: background var(--transition-normal), box-shadow var(--transition-normal);
 }
 
 /* 分类标题容器 - 添加交互效果 */
 .category-header {
     cursor: pointer;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     padding: 0.5rem;
     margin: -0.5rem -0.5rem 1.5rem -0.5rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .category-header:hover {
@@ -968,17 +992,17 @@ body .content.expanded {
         rgba(var(--card-bg-rgb), 0.8),
         rgba(var(--card-bg-rgb), 0.6));
     border-left: 3px solid var(--accent-color);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     width: calc(100% - 3.5rem);
 }
 
 /* 层级2: 子分类标题交互 */
 .category-level-2 .category-header {
     cursor: pointer;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     padding: 0.5rem;
     margin: -0.5rem -0.5rem 1rem -0.5rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .category-level-2 .category-header:hover {
@@ -1017,7 +1041,7 @@ body .content.expanded {
     padding: 0.5rem;
     background: rgba(var(--card-bg-rgb), 0.4);
     border-left: 2px solid var(--secondary-color);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     width: calc(100% - 1.7rem);
 }
 
@@ -1025,10 +1049,10 @@ body .content.expanded {
 .group-level-3 .group-header,
 .category-level-3 .category-header {
     cursor: pointer;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     padding: 0.4rem;
     margin: -0.4rem -0.4rem 0.5rem -0.4rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .group-level-3 .group-header:hover,
@@ -1071,7 +1095,7 @@ body .content.expanded {
     padding: 0.6rem;
     background: rgba(var(--card-bg-rgb), 0.2);
     border-left: 1px solid var(--tertiary-color);
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     width: calc(100% - 1.8rem);
 }
 
@@ -1079,10 +1103,10 @@ body .content.expanded {
 .group-level-4 .group-header,
 .category-level-4 .category-header {
     cursor: pointer;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     padding: 0.4rem;
     margin: -0.4rem -0.4rem 0.6rem -0.4rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .group-level-4 .group-header:hover,
@@ -1291,11 +1315,11 @@ body .content.expanded {
 /* 网站卡片样式 */
 .site-card {
     background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
-    padding: 1.2rem;
+    padding: var(--spacing-md);
     text-decoration: none;
     color: inherit;
-    transition: all 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+    transition: all var(--transition-normal);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1328,8 +1352,8 @@ body .content.expanded {
     display: inline-block;
     width: 1.8rem;
     height: 1.8rem;
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-md);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     object-fit: cover;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
@@ -1339,8 +1363,8 @@ body .content.expanded {
     display: inline-block;
     width: 1.8rem;
     height: 1.8rem;
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-md);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     flex-shrink: 0;
     vertical-align: middle;
     text-align: center;
@@ -1354,7 +1378,7 @@ body .content.expanded {
     display: inline-block;
     width: 1.8rem;
     height: 1.8rem;
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-md);
     position: relative;
     vertical-align: middle;
 }
@@ -1472,11 +1496,12 @@ body .content.expanded {
 .add-site-btn {
     background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
     border: 2px dashed var(--border-color);
-    border-radius: 14px;
+    border-radius: var(--radius-lg);
     padding: 1.5rem;
     color: var(--text-muted);
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--transition-normal);
+    transition-timing-function: var(--transition-bounce);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1524,8 +1549,8 @@ body .content.expanded {
 
 .modal-content {
     background-color: var(--sidebar-bg);
-    border-radius: 16px;
+    border-radius: var(--radius-xl);
-    padding: 2.2rem;
+    padding: var(--spacing-xl);
     width: 90%;
     max-width: 520px;
     position: relative;
@@ -1557,9 +1582,9 @@ body .content.expanded {
     color: var(--text-muted);
     cursor: pointer;
     font-size: 1.5rem;
-    padding: 0.5rem;
+    padding: var(--spacing-sm);
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
 }
 
 .close-modal:hover {
@@ -1590,11 +1615,11 @@ body .content.expanded {
 .form-group input, .form-group select {
     background-color: var(--secondary-bg);
     border: 1px solid transparent;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
-    padding: 0.9rem 1.2rem;
+    padding: var(--spacing-md) var(--spacing-lg);
     color: var(--text-color);
     font-size: 1rem;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
     box-shadow: 0 2px 6px var(--shadow-color);
 }
 
@@ -1617,14 +1642,15 @@ body .content.expanded {
 }
 
 .btn {
-    padding: 0.9rem 1.8rem;
+    padding: var(--spacing-md) var(--spacing-xl);
     border: none;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
     letter-spacing: 0.3px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--transition-normal);
+    transition-timing-function: var(--transition-bounce);
     box-shadow: 0 2px 6px var(--shadow-color);
 }
 
@@ -1797,18 +1823,18 @@ body .content.expanded {
 
     /* 分类样式优化 */
     .category {
-        margin: 0 0.15rem 1.5rem 0.15rem;
+        margin: 0 var(--spacing-xs) var(--spacing-lg) var(--spacing-xs);
-        padding: 1.1rem;
+        padding: var(--spacing-md);
-        width: calc(100% - 0.3rem);
+        width: calc(100% - var(--spacing-sm));
     }
 
     .sites-grid {
-        gap: 0.7rem;
+        gap: var(--spacing-sm);
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
     
     .site-card {
-        padding: 0.9rem 0.7rem;
+        padding: var(--spacing-md) var(--spacing-sm);
     }
     
     .site-card i {
@@ -1841,7 +1867,7 @@ body .content.expanded {
 
     /* 移动端滚动进度条调整 */
     .scroll-progress {
-        height: 4px; /* 移动端略粗一些 */
+        height: var(--radius-sm); /* 移动端略粗一些 */
     }
 
     .sidebar .submenu {