工具完成

src/style.css

@@ -1,79 +1,334 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* FontAwesome 图标预加载优化 */
+.fontawesome-i2svg-active body .icon-container .icon {
+  opacity: 1;
+  transition: opacity 0.2s ease-in;
+}
+
+.fontawesome-i2svg-pending body .icon-container .icon {
+  opacity: 0;
+}
+
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  /* 主题色 */
+  --color-primary: 99, 102, 241; /* #6366F1 - 深邃紫色 */
+  --color-primary-hover: 139, 92, 246; /* #8B5CF6 - 紫罗兰 */
+  --color-primary-light: 129, 140, 248; /* #818CF8 - 亮紫色 */
+  
+  /* 背景色系 */
+  --color-bg-main: 18, 24, 39; /* #121827 - 深炭黑 */
+  --color-bg-card: 30, 41, 59; /* #1E293B - 暗灰蓝 */
+  --color-bg-secondary: 45, 55, 72; /* #2D3748 - 深靛蓝 */
+  
+  /* 文字颜色 */
+  --color-text-primary: 241, 245, 249; /* #F1F5F9 - 银月白 */
+  --color-text-secondary: 203, 213, 225; /* #CBD5E1 - 淡灰蓝 */
+  --color-text-tertiary: 148, 163, 184; /* #94A3B8 - 冷钢灰 */
+  
+  /* 点缀色 */
+  --color-success: 16, 185, 129; /* #10B981 - 暗翠绿 */
+  --color-warning: 245, 158, 11; /* #F59E0B - 暗琥珀 */
+  --color-error: 239, 68, 68; /* #EF4444 - 暗珊瑚 */
+  
+  /* 块级元素背景色 */
+  --color-block: 38, 53, 72; /* #263548 - 深灰蓝色块 */
+  --color-block-strong: 45, 55, 72; /* #2D3748 - 更深的块色 */
+  --color-block-hover: 61, 74, 92; /* #3D4A5C - 悬停态块色 */
+  
+  /* 边框和阴影 */
+  --color-border: rgba(99, 102, 241, 0.15);
+  --color-shadow: rgba(0, 0, 0, 0.25);
+  --purple-glow: rgba(99, 102, 241, 0.15);
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+/* 浅色主题变量 */
+[data-theme='light'] {
+  /* 主题色保持不变，以保持品牌一致性 */
+  --color-primary: 99, 102, 241; /* #6366F1 - 深邃紫色 */
+  --color-primary-hover: 139, 92, 246; /* #8B5CF6 - 紫罗兰 */
+  --color-primary-light: 124, 58, 237; /* #7C3AED - 更深的紫色，提高对比度 */
+  
+  /* 背景色系 */
+  --color-bg-main: 249, 250, 251; /* #F9FAFB - 浅灰背景 */
+  --color-bg-card: 255, 255, 255; /* #FFFFFF - 纯白卡片 */
+  --color-bg-secondary: 243, 244, 246; /* #F3F4F6 - 次级灰背景 */
+  
+  /* 文字颜色 */
+  --color-text-primary: 17, 24, 39; /* #111827 - 近黑色 */
+  --color-text-secondary: 55, 65, 81; /* #374151 - 深灰色 */
+  --color-text-tertiary: 107, 114, 128; /* #6B7280 - 中灰色 */
+  
+  /* 点缀色保持不变 */
+  --color-success: 16, 185, 129; /* #10B981 - 暗翠绿 */
+  --color-warning: 245, 158, 11; /* #F59E0B - 暗琥珀 */
+  --color-error: 239, 68, 68; /* #EF4444 - 暗珊瑚 */
+  
+  /* 块级元素背景色 */
+  --color-block: 241, 245, 249; /* #F1F5F9 - 浅灰色块 */
+  --color-block-strong: 226, 232, 240; /* #E2E8F0 - 更强调的块色 */
+  --color-block-hover: 203, 213, 225; /* #CBD5E1 - 悬停态块色 */
+  
+  /* 边框和阴影 */
+  --color-border: rgba(99, 102, 241, 0.2);
+  --color-shadow: rgba(0, 0, 0, 0.1);
+  --purple-glow: rgba(99, 102, 241, 0.2);
 }
 
+/* 全局样式 */
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
+  color: rgb(var(--color-text-primary));
+  background: rgb(var(--color-bg-main));
   min-height: 100vh;
+  transition: color 0.3s ease, background-color 0.3s ease;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+/* 自定义滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+::-webkit-scrollbar-track {
+  background: rgba(var(--color-bg-secondary), 0.3);
 }
 
-.card {
-  padding: 2em;
+::-webkit-scrollbar-thumb {
+  background: rgba(var(--color-primary), 0.4);
+  border-radius: 4px;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--color-primary-hover), 0.6);
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
+/* Firefox滚动条样式 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--color-primary), 0.4) rgba(var(--color-bg-secondary), 0.3);
+}
+
+/* 主题通用样式类 */
+@layer utilities {
+  /* 文本颜色类 */
+  .text-primary {
+    color: rgb(var(--color-text-primary));
   }
-  a:hover {
-    color: #747bff;
+
+  .text-secondary {
+    color: rgb(var(--color-text-secondary));
   }
-  button {
-    background-color: #f9f9f9;
+
+  .text-tertiary {
+    color: rgb(var(--color-text-tertiary));
+  }
+
+  .text-purple {
+    color: rgb(var(--color-primary-light));
+  }
+
+  .text-error {
+    color: rgb(var(--color-error));
+  }
+
+  .text-success {
+    color: rgb(var(--color-success));
+  }
+
+  .text-warning {
+    color: rgb(var(--color-warning));
+  }
+
+  /* 背景色类 */
+  .bg-main {
+    background-color: rgb(var(--color-bg-main));
+  }
+
+  .bg-card {
+    background-color: rgb(var(--color-bg-card));
+  }
+
+  .bg-secondary {
+    background-color: rgb(var(--color-bg-secondary));
+  }
+
+  .bg-block {
+    background-color: rgb(var(--color-block));
+  }
+
+  .bg-block-strong {
+    background-color: rgb(var(--color-block-strong));
+  }
+
+  .bg-block-hover {
+    background-color: rgb(var(--color-block-hover));
+  }
+
+  .bg-purple-glow {
+    background-color: var(--purple-glow);
   }
 }
+
+/* 通用组件样式 */
+@layer components {
+  /* 卡片基础样式 */
+  .card {
+    @apply rounded-lg border shadow-lg transition-all duration-300;
+    background-color: rgb(var(--color-bg-card));
+    border-color: rgba(var(--color-primary), 0.15);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* 卡片悬停效果 */
+  .card:hover {
+    border-color: rgba(var(--color-primary), 0.3);
+    background-color: color-mix(in srgb, rgb(var(--color-bg-card)) 95%, rgb(var(--color-primary)) 5%);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+  
+  /* 主按钮样式 */
+  .btn-primary {
+    @apply bg-gradient-to-r text-white rounded-md px-4 py-2 font-medium transition-all duration-200;
+    background-image: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-primary-hover)));
+  }
+  
+  .btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(var(--color-primary), 0.3);
+  }
+  
+  /* 次按钮样式 */
+  .btn-secondary {
+    @apply rounded-md px-4 py-2 font-medium transition-all duration-200 border;
+    background-color: rgb(var(--color-bg-secondary));
+    color: rgb(var(--color-primary-light));
+    border-color: rgb(var(--color-primary));
+  }
+  
+  .btn-secondary:hover {
+    background-color: rgba(var(--color-primary), 0.1);
+    border-color: rgb(var(--color-primary-hover));
+  }
+  
+  /* 输入框样式 */
+  .input-field {
+    @apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2;
+    background-color: rgb(var(--color-bg-card));
+    border-color: rgba(var(--color-primary), 0.2);
+    color: rgb(var(--color-text-primary));
+  }
+  
+  .input-field:focus {
+    border-color: rgb(var(--color-primary));
+    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
+  }
+  
+  /* 文本区域样式 */
+  .textarea-field {
+    @apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2 resize-none;
+    background-color: rgb(var(--color-bg-card));
+    border-color: rgba(var(--color-primary), 0.2);
+    color: rgb(var(--color-text-primary));
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  }
+  
+  .textarea-field:focus {
+    border-color: rgb(var(--color-primary));
+    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
+  }
+
+  /* 选择框样式 */
+  .select-field {
+    @apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2;
+    background-color: rgb(var(--color-bg-card));
+    border-color: rgba(var(--color-primary), 0.2);
+    color: rgb(var(--color-text-primary));
+  }
+
+  .select-field:focus {
+    border-color: rgb(var(--color-primary));
+    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
+  }
+
+  /* 小按钮样式 */
+  .btn-sm {
+    @apply px-2 py-1 text-sm rounded transition-all duration-200;
+  }
+
+  /* 复选框样式 */
+  .form-checkbox {
+    @apply w-4 h-4 rounded border-2 transition-all duration-200;
+    border-color: rgba(var(--color-primary), 0.3);
+    background-color: rgb(var(--color-bg-card));
+  }
+
+  .form-checkbox:checked {
+    background-color: rgb(var(--color-primary));
+    border-color: rgb(var(--color-primary));
+  }
+
+  /* 边框颜色类 */
+  .border-border {
+    border-color: rgba(var(--color-primary), 0.2);
+  }
+
+  .border-primary {
+    border-color: rgb(var(--color-primary));
+  }
+
+  .border-error {
+    border-color: rgb(var(--color-error));
+  }
+
+  .border-success {
+    border-color: rgb(var(--color-success));
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scaleIn {
+  animation: scaleIn 0.3s ease-out;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}