refactor: v2

backend & frontend
2026-06-17 14:06:28 +00:00 · 2026-01-01 18:38:21 +08:00
parent 3d201bc497
commit fdc725b893
109 changed files with 22918 additions and 1135 deletions
@@ -0,0 +1,155 @@
+/* TailwindCSS directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Global styles */
+@layer base {
+  :root {
+    font-family: 'Inter', 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif;
+    line-height: 1.6;
+    font-weight: 400;
+    color-scheme: light;
+
+    /* Material Design 3 color tokens */
+    --md-sys-color-primary: #4caf50;
+    --md-sys-color-on-primary: #ffffff;
+    --md-sys-color-secondary: #2196f3;
+    --md-sys-color-on-secondary: #ffffff;
+    --md-sys-color-surface: #fafafa;
+    --md-sys-color-on-surface: #1c1b1f;
+    --md-sys-color-background: #ffffff;
+    --md-sys-color-on-background: #1c1b1f;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+    color: var(--md-sys-color-on-background);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #app {
+    width: 100%;
+    min-height: 100vh;
+  }
+}
+
+/* Custom utility classes */
+@layer components {
+  /* Material Design 3 Card */
+  .md3-card {
+    @apply bg-white rounded-md3 shadow-md3-2 overflow-hidden transition-all duration-300;
+  }
+
+  .md3-card:hover {
+    @apply shadow-md3-3;
+  }
+
+  .md3-card-elevated {
+    @apply bg-white rounded-md3-lg shadow-md3-3;
+  }
+
+  /* Material Design 3 Button */
+  .md3-button {
+    @apply px-6 py-2.5 rounded-full font-medium transition-all duration-200;
+    @apply inline-flex items-center justify-center gap-2;
+  }
+
+  .md3-button-filled {
+    @apply md3-button bg-primary-600 text-white hover:bg-primary-700 hover:shadow-md3-2;
+  }
+
+  .md3-button-outlined {
+    @apply md3-button border-2 border-primary-600 text-primary-600 hover:bg-primary-50;
+  }
+
+  .md3-button-text {
+    @apply md3-button text-primary-600 hover:bg-primary-50;
+  }
+
+  /* Fluent Design elements */
+  .fluent-card {
+    @apply bg-white/80 backdrop-blur-xl rounded-lg border border-gray-200/50 shadow-lg;
+    @apply transition-all duration-300 hover:shadow-xl hover:border-gray-300/50;
+  }
+
+  .fluent-acrylic {
+    @apply bg-white/70 backdrop-blur-2xl backdrop-saturate-150;
+  }
+
+  /* Status badges */
+  .status-badge {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
+  }
+
+  .status-success {
+    @apply status-badge bg-green-100 text-green-800;
+  }
+
+  .status-warning {
+    @apply status-badge bg-yellow-100 text-yellow-800;
+  }
+
+  .status-error {
+    @apply status-badge bg-red-100 text-red-800;
+  }
+
+  .status-info {
+    @apply status-badge bg-blue-100 text-blue-800;
+  }
+
+  /* Loading skeleton */
+  .skeleton {
+    @apply animate-pulse bg-gray-200 rounded;
+  }
+}
+
+/* Custom animations */
+@layer utilities {
+  .transition-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .glass-effect {
+    @apply bg-white/60 backdrop-blur-md backdrop-saturate-150;
+  }
+
+  .text-gradient {
+    @apply bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent;
+  }
+}
+
+/* Element Plus customization to work with Tailwind */
+.el-button {
+  @apply transition-smooth;
+}
+
+.el-card {
+  @apply transition-smooth;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-gray-100 rounded;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 rounded hover:bg-gray-400;
+}