优化样式，修复文章dom绑定问题

src/components/ThemeToggle.astro

@@ -19,6 +19,8 @@ const {
   transitionDuration = 700, // 默认动画时间(毫秒)
 } = Astro.props;
 
+// 导入外部CSS样式文件
+import "../styles/theme-toggle.css";
 ---
 
 <button
@@ -62,63 +64,6 @@ const {
   <span id="ripple-container" class="absolute inset-0 pointer-events-none z-0"></span>
 </button>
 
-<style is:global>
-  /* 波纹效果相关样式 */
-  @keyframes ripple-effect {
-    from {
-      transform: scale(0);
-      opacity: 0.8;
-    }
-    to {
-      transform: scale(10);
-      opacity: 0;
-    }
-  }
-  
-  .theme-ripple {
-    position: absolute;
-    border-radius: 50%;
-    background-color: rgba(var(--theme-ripple-color, 100, 100, 100), 0.15);
-    width: 10px;
-    height: 10px;
-    pointer-events: none;
-    transform-origin: center;
-    animation: ripple-effect 800ms ease-out forwards;
-  }
-  
-  /* 暗色模式下使用不同颜色变量 */
-  .dark .theme-ripple {
-    background-color: rgba(var(--theme-ripple-color, 200, 200, 200), 0.15);
-  }
-  
-  /* View Transitions 样式控制 */
-  ::view-transition-old(root),
-  ::view-transition-new(root) {
-    animation: none !important;
-    mix-blend-mode: normal !important;
-    isolation: auto !important;
-  }
-  
-  /* 新增特殊模式样式 */
-  html.theme-transition-active {
-    transition: none !important;
-  }
-
-  ::view-transition-old(root) {
-    z-index: 999 !important;
-  }
-  
-  ::view-transition-new(root) {
-    z-index: 1000 !important;
-  }
-  
-  /* 设置主题容器在移动设备上的样式 */
-  #theme-toggle-container {
-    position: relative;
-    overflow: hidden;
-  }
-</style>
-
 <script is:inline>
   // 主题切换逻辑 - 自销毁模式
   (function() {
@@ -165,7 +110,7 @@ const {
     // 添加事件监听器并记录，方便后续统一清理
     function addListener(element, eventType, handler, options) {
       if (!element) {
-        console.warn(`主题切换尝试为不存在的元素添加事件:`, eventType);
+        console.error(`主题切换尝试为不存在的元素添加事件:`, eventType);
         return null;
       }
 
@@ -180,14 +125,8 @@ const {
       if (window._themeTransition && typeof window._themeTransition.skipTransition === 'function') {
         try {
           window._themeTransition.skipTransition();
-          console.debug(`主题切换清理阶段取消transition成功`);
         } catch (err) {
-          // 降级为debug日志
-          if (err.name === 'AbortError') {
-            console.debug(`主题切换清理阶段: 过渡已被跳过，这是正常现象`);
-          } else {
-            console.debug(`主题切换清理阶段取消transition出错:`, err);
-          }
+          // 忽略AbortError，这是正常现象
         } finally {
           window._themeTransition = null;
         }
@@ -336,8 +275,7 @@ const {
             window._themeTransition.skipTransition();
           }
         } catch (e) {
-          // 降级为debug日志，不需要显示警告
-          console.debug(`主题切换取消先前过渡失败:`, e);
+          // 忽略取消先前过渡的错误
         } finally {
           // 无论成功与否，都清除引用
           window._themeTransition = null;
@@ -470,7 +408,7 @@ const {
             // 最后执行用户回调
             callback();
           } catch (err) {
-            console.error(`主题切换 回调执行出错:`, err);
+            console.error(`主题切换回调执行出错:`, err);
           }
         };
         
@@ -504,20 +442,14 @@ const {
               // 等待过渡准备完成
               await readyPromise;
             } catch (err) {
-              // 超时处理 - 只记录警告日志，继续执行动画
-              if (err.message === 'Ready timeout') {
-                console.debug(`主题切换过渡准备超时，使用备用策略`);
-                // 收缩模式时此处超时更常见，立即使用备用方案
-                if (animationType === TRANSITION_MODES.SHRINK) {
-                  applyFallbackAnimation();
-                  return; // 跳过后续代码，使用备用方案
-                }
+              // 超时处理或过渡中断，使用备用方案
+              if (err.message === 'Ready timeout' && animationType === TRANSITION_MODES.SHRINK) {
+                applyFallbackAnimation();
+                return; // 跳过后续代码，使用备用方案
               } else if (err.name === 'AbortError') {
                 // 如果是AbortError，我们也立即使用备用方案
                 applyFallbackAnimation();
                 return; // 跳过后续代码，使用备用方案
-              } else {
-                console.debug(`主题切换过渡准备错误:`, err);
               }
             }
             
@@ -634,18 +566,9 @@ const {
               }
             }, TOTAL_TRANSITION_TIME);
           } catch (error) {
-            // AbortError是正常的，我们完全可以忽略它，但仍保留调试日志
-            if (error.name === 'AbortError') {
-              // 降级为debug级别日志，不要吓到用户
-              console.debug(`主题切换过渡被跳过，这是正常现象`);
-              // 使用备用动画方案
-              applyFallbackAnimation();
-            } else if (error.message === 'Ready timeout') {
-              // 超时是我们主动抛出的，只需要降级处理
-              console.debug(`主题切换过渡准备超时，继续执行动画`);
-              
-              // 即使ready超时，我们仍然可以应用样式
-              // 这里可以直接调用备用方案应用动画
+            // 处理错误情况
+            if (error.name === 'AbortError' || error.message === 'Ready timeout') {
+              // AbortError或超时是正常的，使用备用动画方案
               applyFallbackAnimation();
             } else {
               // 只有真正意外的错误才输出error级别日志
@@ -766,7 +689,7 @@ const {
               }
             }, TOTAL_TRANSITION_TIME);
           } catch (err) {
-            console.debug(`主题切换应用备用动画方案出错:`, err);
+            console.error(`主题切换应用备用动画方案出错:`, err);
           }
         };
         
@@ -783,9 +706,7 @@ const {
             window._themeTransition = null;
           })
           .catch(error => {
-            if (error.name === 'AbortError') {
-              console.debug(`主题切换过渡被中断: 这是正常现象，可能是新的过渡开始或页面导航变化`);
-            } else {
+            if (error.name !== 'AbortError') {
               console.error(`主题切换过渡动画错误:`, error);
             }
             // 确保标记类被移除
@@ -810,7 +731,7 @@ const {
       const themeToggleButtons = document.querySelectorAll("#theme-toggle-button");
 
       if (!themeToggleButtons.length) {
-        console.warn(`主题切换未找到主题切换按钮`);
+        console.error(`主题切换未找到主题切换按钮`);
         return;
       }
 
@@ -838,8 +759,6 @@ const {
             ripple.parentNode.removeChild(ripple);
           }
         });
-        
-        console.debug('主题切换: 状态已重置');
       };
       
       // 监听Astro的页面切换事件
@@ -869,7 +788,6 @@ const {
         if (window._themeTransitioning && 
             (e.target.closest('#theme-toggle-button') || 
              e.target.closest('#theme-toggle-container'))) {
-          console.debug('全局拦截: 主题切换正在进行中，忽略额外点击');
           e.stopPropagation();
           e.preventDefault();
         }
@@ -930,25 +848,19 @@ const {
 
         // 第1层保护：全局事件防抖
         if (isThrottled()) {
-          console.debug('主题切换: 防抖拦截，忽略点击');
           return;
         }
 
         // 第2层保护：transitioning状态检查
         if (window._themeTransitioning) {
-          console.debug('主题切换: 已有过渡进行中，忽略点击');
           return;
         }
 
         // 第3层保护：视图过渡检查
         if (window._themeTransition) {
-          console.debug('主题切换: 视图过渡已存在，忽略点击');
           return;
         }
 
-        // 所有检查通过后，开始处理主题切换
-        console.debug('主题切换: 开始处理');
-
         // 立即设置transitioning状态，阻止后续点击
         window._themeTransitioning = true;
         
@@ -1022,7 +934,6 @@ const {
             // 过渡完成后恢复状态
             setTimeout(() => {
               window._themeTransitioning = false;
-              console.debug('主题切换: 过渡完成，恢复状态');
             }, ANIMATION_BUFFER); // 添加缓冲时间
           }).catch(error => {
             // 出现错误时强制执行主题切换以确保功能可用
@@ -1030,20 +941,16 @@ const {
               console.error(`主题切换过渡动画错误:`, error);
               // 如果不是因为过渡被跳过而是真正的错误，直接执行主题切换
               safeThemeChangeCallback();
-            } else {
-              console.debug(`主题切换过渡被跳过，这是正常现象`);
             }
             
             setTimeout(() => {
               window._themeTransitioning = false;
-              console.debug('主题切换: 过渡被取消，恢复状态');
             }, ANIMATION_BUFFER);
           });
 
           // 设置防抖保底 - 防止transition.finished不触发导致状态卡死
           transitionTimeout = setTimeout(() => {
             window._themeTransitioning = false;
-            console.debug('主题切换: 过渡超时，强制恢复状态');
           }, TOTAL_TRANSITION_TIME + 200); // 总过渡时间加额外缓冲
         } catch (err) {
           // 即使发生错误，也要确保主题能切换
@@ -1070,7 +977,6 @@ const {
           
           // 确保状态被重置
           window._themeTransitioning = false;
-          console.debug('主题切换: 发生错误，恢复状态');
         }
       };
 
@@ -1154,7 +1060,6 @@ const {
           document._themeToggleCleanedUp = true;
           // 执行清理
           selfDestruct();
-          console.debug('主题切换: 自动清理已执行');
         }
       }, 30000);
     }

src/styles/articles-mermaid.css

@@ -1,34 +1,6 @@
-:root {
-  --mermaid-text-color: #1e293b;
-  --mermaid-bg-color: #ffffff;
-  --mermaid-primary-color: #4f46e5;
-  --mermaid-secondary-color: #6366f1;
-  --mermaid-border-color: #9ca3af;
-  --mermaid-line-color: #4b5563;
-  --mermaid-edge-label-bg: #ffffff;
-  --mermaid-title-color: #0f172a;
-  --mermaid-section-bg: #f8fafc;
-  --mermaid-node-bg: #f1f5f9;
-}
-
-/* 暗色模式样式变量 */
-[data-theme='dark'], .dark {
-  --mermaid-text-color: #e2e8f0;
-  --mermaid-bg-color: #1e293b;
-  --mermaid-primary-color: #818cf8;
-  --mermaid-secondary-color: #a5b4fc;
-  --mermaid-border-color: #64748b;
-  --mermaid-line-color: #94a3b8;
-  --mermaid-edge-label-bg: #1e293b;
-  --mermaid-title-color: #f8fafc;
-  --mermaid-section-bg: #334155;
-  --mermaid-node-bg: #475569;
-}
-
 /* 基础Mermaid样式覆盖 */
 .mermaid {
   background-color: transparent !important;
-  transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
 }
 
 /* Mermaid文本颜色统一 */
@@ -39,10 +11,9 @@
 .mermaid .loopText,
 .mermaid .noteText,
 .mermaid .taskText {
-  color: var(--mermaid-text-color) !important;
-  fill: var(--mermaid-text-color) !important;
+  color: var(--color-secondary-800) !important;
+  fill: var(--color-secondary-800) !important;
   font-family: inherit !important;
-  transition: color 0.3s ease, fill 0.3s ease;
 }
 
 /* 节点样式设置 */
@@ -51,10 +22,9 @@
 .mermaid .node ellipse, 
 .mermaid .node polygon,
 .mermaid .node path {
-  fill: var(--mermaid-node-bg) !important;
-  stroke: var(--mermaid-border-color) !important;
+  fill: var(--color-gray-100) !important;
+  stroke: var(--color-gray-400) !important;
   stroke-width: 1px !important;
-  transition: fill 0.3s ease, stroke 0.3s ease;
 }
 
 /* 连接线样式 */
@@ -63,88 +33,156 @@
 .mermaid line,
 .mermaid .messageLine0,
 .mermaid .messageLine1 {
-  stroke: var(--mermaid-line-color) !important;
+  stroke: var(--color-gray-600) !important;
   stroke-width: 1px !important;
-  transition: stroke 0.3s ease;
+  fill: none !important; /* 确保线条没有填充 */
 }
 
 /* 箭头填充 */
 .mermaid .arrowheadPath,
 .mermaid marker path {
-  fill: var(--mermaid-line-color) !important;
+  fill: var(--color-gray-600) !important;
   stroke: none !important;
-  transition: fill 0.3s ease;
 }
 
 /* 文本标签背景 */
 .mermaid .edgeLabel rect,
 .mermaid .labelBox {
-  fill: var(--mermaid-edge-label-bg) !important;
-  background-color: var(--mermaid-edge-label-bg) !important;
-  transition: fill 0.3s ease, background-color 0.3s ease;
+  fill: white !important;
+  background-color: white !important;
 }
 
 /* 标题样式 */
 .mermaid .titleText,
 .mermaid .classTitle,
 .mermaid .cluster-label text {
-  fill: var(--mermaid-title-color) !important;
-  color: var(--mermaid-title-color) !important;
+  fill: var(--color-secondary-900) !important;
+  color: var(--color-secondary-900) !important;
   font-weight: bold !important;
-  transition: fill 0.3s ease, color 0.3s ease;
 }
 
 /* 集群/子图样式 */
 .mermaid .cluster rect,
 .mermaid .cluster polygon {
-  fill: var(--mermaid-section-bg) !important;
-  stroke: var(--mermaid-border-color) !important;
+  fill: var(--color-gray-50) !important;
+  stroke: var(--color-gray-400) !important;
   stroke-width: 1px !important;
   opacity: 0.8 !important;
-  transition: fill 0.3s ease, stroke 0.3s ease;
 }
 
 /* 序列图特殊样式 */
 .mermaid .actor {
-  fill: var(--mermaid-node-bg) !important;
-  stroke: var(--mermaid-border-color) !important;
+  fill: var(--color-gray-100) !important;
+  stroke: var(--color-gray-400) !important;
   stroke-width: 1px !important;
-  transition: fill 0.3s ease, stroke 0.3s ease;
 }
 
 .mermaid .note {
-  fill: var(--mermaid-secondary-color) !important;
+  fill: var(--color-primary-500) !important;
   opacity: 0.7 !important;
-  transition: fill 0.3s ease;
 }
 
 /* 甘特图特殊样式 */
 .mermaid .section0,
 .mermaid .section2 {
-  fill: var(--mermaid-section-bg) !important;
+  fill: var(--color-gray-50) !important;
   opacity: 0.5 !important;
-  transition: fill 0.3s ease;
 }
 
 .mermaid .section1,
 .mermaid .section3 {
-  fill: var(--mermaid-node-bg) !important;
+  fill: var(--color-gray-100) !important;
   opacity: 0.4 !important;
-  transition: fill 0.3s ease;
 }
 
 .mermaid .task0,
 .mermaid .task1,
 .mermaid .task2,
 .mermaid .task3 {
-  fill: var(--mermaid-primary-color) !important;
-  stroke: var(--mermaid-border-color) !important;
-  transition: fill 0.3s ease, stroke 0.3s ease;
+  fill: var(--color-primary-600) !important;
+  stroke: var(--color-gray-400) !important;
 }
 
 /* 类图特殊样式 */
 .mermaid .classLabel .label {
-  fill: var(--mermaid-text-color) !important;
-  color: var(--mermaid-text-color) !important;
-  transition: fill 0.3s ease, color 0.3s ease;
+  fill: var(--color-secondary-800) !important;
+  color: var(--color-secondary-800) !important;
+}
+
+/* 暗色模式样式 */
+[data-theme='dark'] .mermaid .label,
+[data-theme='dark'] .mermaid text,
+[data-theme='dark'] .mermaid span,
+[data-theme='dark'] .mermaid .messageText,
+[data-theme='dark'] .mermaid .loopText,
+[data-theme='dark'] .mermaid .noteText,
+[data-theme='dark'] .mermaid .taskText,
+[data-theme='dark'] .mermaid .classLabel .label {
+  color: var(--color-secondary-300) !important;
+  fill: var(--color-secondary-300) !important;
+}
+
+[data-theme='dark'] .mermaid .node rect, 
+[data-theme='dark'] .mermaid .node circle, 
+[data-theme='dark'] .mermaid .node ellipse, 
+[data-theme='dark'] .mermaid .node polygon,
+[data-theme='dark'] .mermaid .node path,
+[data-theme='dark'] .mermaid .actor {
+  fill: var(--color-dark-hover) !important;
+  stroke: var(--color-gray-600) !important;
+}
+
+/* 暗色模式连接线样式 - 分开处理 */
+[data-theme='dark'] .mermaid .edgePath .path,
+[data-theme='dark'] .mermaid .flowchart-link,
+[data-theme='dark'] .mermaid line,
+[data-theme='dark'] .mermaid .messageLine0,
+[data-theme='dark'] .mermaid .messageLine1 {
+  stroke: var(--color-gray-400) !important;
+  fill: none !important; /* 确保线条没有填充 */
+}
+
+/* 暗色模式箭头样式 - 分开处理 */
+[data-theme='dark'] .mermaid .arrowheadPath,
+[data-theme='dark'] .mermaid marker path {
+  fill: var(--color-gray-400) !important;
+  stroke: none !important;
+}
+
+[data-theme='dark'] .mermaid .edgeLabel rect,
+[data-theme='dark'] .mermaid .labelBox {
+  fill: var(--color-dark-surface) !important;
+  background-color: var(--color-dark-surface) !important;
+}
+
+[data-theme='dark'] .mermaid .titleText,
+[data-theme='dark'] .mermaid .classTitle,
+[data-theme='dark'] .mermaid .cluster-label text {
+  fill: var(--color-secondary-100) !important;
+  color: var(--color-secondary-100) !important;
+}
+
+[data-theme='dark'] .mermaid .cluster rect,
+[data-theme='dark'] .mermaid .cluster polygon,
+[data-theme='dark'] .mermaid .section0,
+[data-theme='dark'] .mermaid .section2 {
+  fill: var(--color-dark-card) !important;
+  stroke: var(--color-gray-600) !important;
+}
+
+[data-theme='dark'] .mermaid .section1,
+[data-theme='dark'] .mermaid .section3 {
+  fill: var(--color-dark-hover) !important;
+}
+
+[data-theme='dark'] .mermaid .note {
+  fill: var(--color-primary-300) !important;
+}
+
+[data-theme='dark'] .mermaid .task0,
+[data-theme='dark'] .mermaid .task1,
+[data-theme='dark'] .mermaid .task2,
+[data-theme='dark'] .mermaid .task3 {
+  fill: var(--color-primary-400) !important;
+  stroke: var(--color-gray-600) !important;
 }

src/styles/articles-table.css

@@ -1,293 +1,100 @@
-/* 表格基础样式 */
+/* 表格样式 - 与全局主题配色协调 */
 table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1.5em 0;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
-    overflow: hidden;
-    border-radius: 0.5rem;
-  }
-  
-  /* 表格边框样式 */
-  table, th, td {
-    border: 1px solid #e2e8f0;
-  }
-  
-  /* 表头样式 */
-  thead {
-    background-color: #f0f5ff;
-  }
-  
-  th {
-    padding: 1rem;
-    font-weight: 600;
-    text-align: left;
-    vertical-align: middle;
-    border-bottom: 2px solid #d6e0ff;
-    color: #3451db;
-  }
-  
-  /* 表格单元格样式 */
-  td {
-    padding: 0.875rem 1rem;
-    vertical-align: middle;
-    color: #1e293b;
-    position: relative;
-  }
-  
-  /* 内容对齐方式 */
-  th[align="center"],
-  td[align="center"] {
-    text-align: center;
-  }
-  
-  th[align="right"],
-  td[align="right"] {
-    text-align: right;
-  }
-  
-  th[align="left"],
-  td[align="left"] {
-    text-align: left;
-  }
-  
-  /* 表格行交替颜色 */
-  tbody tr:nth-child(even) {
-    background-color: #f8fafc;
-  }
-  
-  tbody tr:nth-child(odd) {
-    background-color: #ffffff;
-  }
-  
-  /* 鼠标悬停效果 */
-  tbody tr:hover {
-    background-color: #f5f7ff;
-  }
-  
-  /* 特定表格类型样式 */
-  table.feature-comparison td,
-  .feature-table td,
-  .function-table td,
-  .comparison-table td {
-    text-align: center;
-  }
-  
-  table.feature-comparison td:first-child,
-  .feature-table td:first-child,
-  .function-table td:first-child,
-  .comparison-table td:first-child {
-    text-align: left;
-    font-weight: 500;
-  }
-  
-  .feature-table th,
-  .function-table th,
-  .comparison-table th {
-    text-align: center;
-  }
-  
-  .feature-table th:first-child,
-  .function-table th:first-child,
-  .comparison-table th:first-child {
-    text-align: left;
-  }
-  
-  /* 勾号和叉号样式 */
-  .tick, .yes, .true, .check-mark, .checkmark, .check, .✓ {
-    display: inline-block;
-    text-align: center;
-    color: #059669;
-    font-weight: bold;
-    font-size: 1.25em;
-  }
-  
-  .cross, .no, .false, .cross-mark, .crossmark, .cross-symbol, .✗ {
-    display: inline-block;
-    text-align: center;
-    color: #dc2626;
-    font-weight: bold;
-    font-size: 1.25em;
-  }
-  
-  /* 添加内容 */
-  .tick::before, .yes::before, .true::before {
-    content: "✓";
-  }
-  
-  .cross::before, .no::before, .false::before {
-    content: "✗";
-  }
-  
-  /* 状态标识符号样式 */
-  td:has(> :is(svg[aria-label="yes"], .yes, .tick, .true)) {
-    color: #047857;
-  }
-  
-  td:has(> :is(svg[aria-label="no"], .no, .cross, .false)) {
-    color: #b91c1c;
-  }
-  
-  /* 单个单元格居中 */
-  td:only-child {
-    text-align: center;
-  }
-  
-  /* 全局状态颜色 */
-  .text-success, 
-  .text-green,
-  .success-mark {
-    color: #059669 !important;
-    font-weight: bold;
-  }
-  
-  .text-danger,
-  .text-red,
-  .danger-mark {
-    color: #dc2626 !important;
-    font-weight: bold;
-  }
-  
-  /* Prose 内表格样式 */
-  .prose table {
-    border-collapse: collapse !important;
-    border-radius: 0.5rem !important;
-    overflow: hidden !important;
-  }
-  
-  .prose table th,
-  .prose table td {
-    border: 1px solid #e2e8f0 !important;
-  }
-  
-  /* 表格内行内样式覆盖 */
-  table[style] th,
-  table[style] td {
-    border: 1px solid #e2e8f0 !important;
-  }
-  
-  table[style] td {
-    vertical-align: middle;
-  }
-  
-  /* 响应式表格样式 */
-  @media (max-width: 640px) {
-    /* 表格容器 */
-    table {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-    
-    /* 表格包装容器 - 注意：需要在HTML中添加div.table-wrapper包围表格 */
-    .table-wrapper {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      max-width: 100%;
-      margin: 1.5em 0;
-    }
-    
-    /* 确保标题和内容宽度一致 */
-    table th,
-    table td {
-      min-width: 8rem;
-      padding: 0.75rem;
-      white-space: nowrap;
-    }
-  }
-  
-  /* 暗色模式 */
-  [data-theme="dark"] table {
-    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.3), 0 2px 6px -1px rgba(0, 0, 0, 0.2);
-    border-color: #475569;
-    background-color: #0f172a;
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-  
-  [data-theme="dark"] table, 
-  [data-theme="dark"] th, 
-  [data-theme="dark"] td {
-    border-color: #475569;
-  }
-  
-  [data-theme="dark"] table[style] th,
-  [data-theme="dark"] table[style] td,
-  [data-theme="dark"] .prose table th,
-  [data-theme="dark"] .prose table td {
-    border-color: #475569 !important;
-  }
-  
-  [data-theme="dark"] thead {
-    background-color: #1e293b;
-    border-bottom: 2px solid #4b6bff;
-  }
-  
-  [data-theme="dark"] th {
-    border-bottom-color: #4b6bff;
-    color: #adc2ff;
-    background-color: transparent;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-  }
-  
-  [data-theme="dark"] th:not(:last-child) {
-    border-right-color: #374151;
-  }
-  
-  [data-theme="dark"] td {
-    color: #e2e8f0;
-  }
-  
-  [data-theme="dark"] td:not(:last-child) {
-    border-right-color: #374151;
-  }
-  
-  [data-theme="dark"] tbody tr:nth-child(even) {
-    background-color: #1e293b;
-  }
-  
-  [data-theme="dark"] tbody tr:nth-child(odd) {
-    background-color: #111827;
-  }
-  
-  [data-theme="dark"] tbody tr:hover {
-    background-color: #272f45;
-    box-shadow: inset 0 0 0 2px rgba(75, 107, 255, 0.3);
-  }
-  
-  [data-theme="dark"] tbody tr:last-child td {
-    border-bottom: none;
-  }
-  
-  /* 暗色模式下的勾叉符号 */
-  [data-theme="dark"] .tick, 
-  [data-theme="dark"] .yes, 
-  [data-theme="dark"] .true, 
-  [data-theme="dark"] .check-mark,
-  [data-theme="dark"] .checkmark, 
-  [data-theme="dark"] .check, 
-  [data-theme="dark"] .✓,
-  [data-theme="dark"] .text-success, 
-  [data-theme="dark"] .text-green,
-  [data-theme="dark"] .success-mark {
-    color: #10b981 !important;
-    text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
-  }
-  
-  [data-theme="dark"] .cross, 
-  [data-theme="dark"] .no, 
-  [data-theme="dark"] .false, 
-  [data-theme="dark"] .cross-mark,
-  [data-theme="dark"] .crossmark, 
-  [data-theme="dark"] .cross-symbol, 
-  [data-theme="dark"] .✗,
-  [data-theme="dark"] .text-danger,
-  [data-theme="dark"] .text-red,
-  [data-theme="dark"] .danger-mark {
-    color: #ef4444 !important;
-    text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
-  }
+  width: 100%;
+  margin-bottom: 1.5rem;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  display: block;
+  max-width: 100%;
+}
+
+thead {
+  background-color: var(--color-primary-700);
+  color: white;
+}
+
+thead th {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  text-align: left;
+  border-bottom: 2px solid var(--color-primary-800);
+  border-right: 1px solid var(--color-primary-600);
+}
+
+thead th:last-child {
+  border-right: none;
+}
+
+tbody tr {
+  background-color: white;
+  transition: background-color 0.2s ease;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: var(--color-gray-50);
+}
+
+tbody tr:hover {
+  background-color: var(--color-primary-50);
+}
+
+tbody td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-gray-200);
+  border-right: 1px solid var(--color-gray-200);
+  vertical-align: top;
+  white-space: nowrap;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+tbody td:last-child {
+  border-right: none;
+}
+
+tbody tr:last-child td {
+  border-bottom: none;
+}
+
+
+[data-theme='dark'] thead {
+  background-color: var(--color-primary-900);
+}
+
+[data-theme='dark'] thead th {
+  border-bottom: 2px solid var(--color-primary-800);
+  border-right: 1px solid var(--color-primary-800);
+}
+
+[data-theme='dark'] thead th:last-child {
+  border-right: none;
+}
+
+[data-theme='dark'] tbody tr {
+  background-color: var(--color-gray-800);
+  color: var(--color-gray-100);
+}
+
+[data-theme='dark'] tbody tr:nth-child(odd) {
+  background-color: var(--color-gray-900);
+}
+
+[data-theme='dark'] tbody tr:hover {
+  background-color: var(--color-gray-700);
+}
+
+[data-theme='dark'] tbody td {
+  border-bottom: 1px solid var(--color-gray-700);
+  border-right: 1px solid var(--color-gray-700);
+}
+
+[data-theme='dark'] tbody td:last-child {
+  border-right: none;
+}
+
+[data-theme='dark'] td:empty::before {
+  color: var(--color-gray-600);
+}

src/styles/theme-toggle.css

@@ -0,0 +1,54 @@
+/* 波纹效果相关样式 */
+@keyframes ripple-effect {
+  from {
+    transform: scale(0);
+    opacity: 0.8;
+  }
+  to {
+    transform: scale(10);
+    opacity: 0;
+  }
+}
+
+.theme-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background-color: rgba(var(--theme-ripple-color, 100, 100, 100), 0.15);
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+  transform-origin: center;
+  animation: ripple-effect 800ms ease-out forwards;
+}
+
+/* 暗色模式下使用不同颜色变量 */
+.dark .theme-ripple {
+  background-color: rgba(var(--theme-ripple-color, 200, 200, 200), 0.15);
+}
+
+/* View Transitions 样式控制 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none !important;
+  mix-blend-mode: normal !important;
+  isolation: auto !important;
+}
+
+/* 新增特殊模式样式 */
+html.theme-transition-active {
+  transition: none !important;
+}
+
+::view-transition-old(root) {
+  z-index: 999 !important;
+}
+
+::view-transition-new(root) {
+  z-index: 1000 !important;
+}
+
+/* 设置主题容器在移动设备上的样式 */
+#theme-toggle-container {
+  position: relative;
+  overflow: hidden;
+}