feat: 功能

2025-12-28 13:49:45 +08:00
parent 36195ea55a
commit bbf8093ca3
25 changed files with 1046 additions and 1970 deletions
--- a/frontend/app/web-gold/src/style.less
+++ b/frontend/app/web-gold/src/style.less
@@ -0,0 +1,242 @@
+@import "tailwindcss";
+
+/* ================================
+   模块化CSS设计系统
+   ================================ */
+
+/* ================================
+   1. 设计令牌 (Design Tokens)
+   ================================ */
+:root {
+  /* 主色系 - Slate（石板色） */
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+
+  /* 强调色 - Blue（蓝色） */
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+
+  /* 辅助色 - Indigo（靛蓝） */
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+
+  /* 功能色 */
+  --color-green-500: #10b981;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-red-500: #ef4444;
+  --color-red-800: #991b1b;
+
+  /* 中性色 */
+  --color-gray-100: #f3f4f6;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-700: #374151;
+
+  /* 主题设计令牌 */
+  --color-bg: var(--color-slate-50);
+  --color-surface: #ffffff;
+  --color-header: var(--color-slate-900);
+  --color-text: var(--color-slate-700);
+  --color-text-secondary: var(--color-slate-500);
+  --color-text-inverse: #ffffff;
+  --color-border: var(--color-slate-200);
+  --color-border-focus: var(--color-blue-500);
+  --color-border-selected: var(--color-indigo-500);
+  --color-primary: var(--color-blue-500);
+  --color-primary-hover: var(--color-blue-600);
+
+  /* 尺寸系统 */
+  --radius-card: 12px;
+  --radius-button: 8px;
+  --radius-tag: 4px;
+
+  /* 阴影系统 */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-blue: 0 10px 15px -3px rgb(59 130 246 / 0.2);
+
+  /* 间距系统 */
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+}
+
+/* ================================
+   2. 全局基础样式 (Global Base)
+   ================================ */
+html, body, #app {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+body { scrollbar-gutter: stable both-edges; }
+
+
+
+/* ================================
+   3. 组件样式 (Component Styles)
+   ================================ */
+
+/* Button 组件 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-button);
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  border: none;
+  outline: none;
+  padding: var(--space-2) var(--space-6);
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--primary {
+    background: var(--color-slate-900);
+    color: white;
+    box-shadow: var(--shadow-lg);
+
+    &:hover:not(:disabled) {
+      background: var(--color-slate-800);
+    }
+  }
+
+  &--secondary {
+    background: white;
+    color: var(--color-slate-700);
+    border: 1px solid var(--color-border);
+    padding: var(--space-1) var(--space-4);
+
+    &:hover:not(:disabled) {
+      background: var(--color-slate-50);
+    }
+  }
+
+  &--gradient {
+    background: linear-gradient(to right, var(--color-indigo-600), var(--color-indigo-800));
+    color: white;
+    box-shadow: var(--shadow-blue);
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(to right, var(--color-indigo-700), var(--color-indigo-900));
+    }
+  }
+}
+
+/* Input 组件 */
+.input {
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-button);
+  font-size: 14px;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  background: white;
+  color: var(--color-text);
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-border-focus);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--color-slate-400);
+  }
+}
+
+/* Card 组件 */
+.card {
+  background: white;
+  border: 1px solid var(--color-slate-200);
+  border-radius: var(--radius-card);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-sm);
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: var(--shadow-md);
+  }
+}
+
+/* Table 组件 */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th {
+    background: var(--color-slate-50);
+    padding: var(--space-3) var(--space-4);
+    text-align: left;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-slate-500);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--color-slate-200);
+  }
+
+  td {
+    padding: var(--space-4);
+    border-bottom: 1px solid var(--color-slate-100);
+  }
+
+  tr:hover {
+    background: var(--color-slate-50);
+  }
+}
+
+/* Tag 组件 */
+.tag {
+  display: inline-block;
+  padding: var(--space-0-5) var(--space-2);
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: var(--radius-tag);
+  background: var(--color-gray-100);
+  color: var(--color-slate-700);
+
+  &--red {
+    background: #fee2e2;
+    color: var(--color-red-800);
+  }
+
+  &--yellow {
+    background: #fef3c7;
+    color: var(--color-yellow-600);
+  }
+
+  &--vip {
+    color: var(--color-yellow-500);
+    border: 1px solid var(--color-yellow-500);
+    background: transparent;
+  }
+}