leefer/xiaobai-review
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify trading workspace visual system

Browse Source
This commit is contained in:
leefer
2026-08-06 02:48:46 +08:00
parent c6d648cebe
commit de635e4f9c
25 changed files with 803 additions and 800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/shared/tokens.css
+73 -28
View File
@@ -14,38 +14,38 @@
--color-white: #ffffff;
--color-gray-25: #fcfcfd;
--color-gray-50: #f8f9fb;
--color-gray-100: #f2f4f7;
--color-gray-200: #e5e8ee;
--color-gray-300: #d4d9e2;
--color-gray-500: #697386;
--color-gray-700: #344054;
--color-gray-900: #172033;
--color-shell-canvas: #f1f4f6;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #1f2937;
--color-shell-canvas: #f4f5f7;
--color-page-canvas: #f4f5f7;
--color-surface-muted: #f6f8fa;
--color-surface-muted: #f3f4f6;
--color-surface-subtle: #f8fafc;
--color-border: #e5e7eb;
--color-border-strong: #d1d5db;
--color-text-primary: #1f2937;
--color-text-secondary: #6b7280;
--color-text-tertiary: #9ca3af;
--color-action-base: #1769c2;
--color-action-base-hover: #10569f;
--color-action-base-soft: #eaf2fb;
--color-action-base: #2563eb;
--color-action-base-hover: #1d4ed8;
--color-action-base-soft: #eff4ff;
--color-action: #2563eb;
--color-action-hover: #1d4ed8;
--color-action-soft: #eff4ff;
--color-action-line: #c7d8fb;
--color-market-up-base: #d33f49;
--color-market-up-base-soft: #fff0f1;
--color-market-up-base: #e04536;
--color-market-up-base-soft: #fdecea;
--color-market-up: #e04536;
--color-market-up-soft: #fdecea;
--color-market-down-base: #07805b;
--color-market-down-base-soft: #eaf7f2;
--color-market-down-base: #16a34a;
--color-market-down-base-soft: #e9f7ee;
--color-market-down: #16a34a;
--color-market-down-soft: #e9f7ee;
--color-warning-base: #aa6800;
--color-warning-base-soft: #fff6e5;
--color-warning-base: #b45309;
--color-warning-base-soft: #fdf3e3;
--color-warning: #b45309;
--color-warning-soft: #fdf3e3;
@@ -55,16 +55,16 @@
--size-control: 32px;
--size-sidebar: 200px;
--size-topbar: 46px;
--size-summary: 34px;
--size-summary: 36px;
--size-statusbar: 30px;
--size-page-pad-y: 14px;
--size-page-pad-x: 16px;
--size-card-gap: 12px;
--elevation-card: 0 1px 2px rgba(16, 24, 40, .05);
--elevation-soft: 0 1px 2px rgba(22, 34, 46, .04), 0 5px 18px rgba(22, 34, 46, .035);
--elevation-soft: 0 1px 2px rgba(16, 24, 40, .05);
--elevation-raised: 0 4px 14px rgba(16, 24, 40, .06);
--elevation-float: 0 14px 38px rgba(16, 24, 40, .14);
--elevation-float: 0 12px 32px rgba(0, 0, 0, .18);
--motion-instant: 100ms;
--motion-fast: 140ms;
--motion-medium: 200ms;
@@ -79,12 +79,18 @@
--surface-subtle: var(--color-surface-subtle);
--surface-canvas: var(--color-page-canvas);
--surface-raised: var(--color-white);
--surface-selected: #eef4ff;
--surface-sunken: #eef0f3;
--surface-hover: #f8faff;
--surface-selected: #eff4ff;
--surface-overlay: var(--color-white);
--border: var(--color-border);
--border-strong: var(--color-border-strong);
--border-subtle: #eef0f3;
--text-primary: var(--color-text-primary);
--text-secondary: var(--color-text-secondary);
--text-tertiary: var(--color-text-tertiary);
--text-inverse: #ffffff;
--on-action: #ffffff;
--action: var(--color-action-base);
--action-hover: var(--color-action-base-hover);
--action-soft: var(--color-action-base-soft);
@@ -94,6 +100,14 @@
--market-down-soft: var(--color-market-down-base-soft);
--warning-color: var(--color-warning-base);
--warning-soft: var(--color-warning-base-soft);
--control-surface: var(--surface-raised);
--control-hover: var(--surface-hover);
--control-border: var(--border-strong);
--table-header: var(--surface-subtle);
--table-hover: #f8faff;
--table-selected: var(--surface-selected);
--focus-ring: rgba(37, 99, 235, .16);
--backdrop: rgba(17, 24, 39, .48);
--primary: var(--color-action);
--primary-hover: var(--color-action-hover);
--danger: var(--color-market-up);
@@ -116,6 +130,25 @@
--duration-fast: 150ms;
--duration-normal: 220ms;
--font-size-aux: 10.5px;
--font-size-caption: 11px;
--font-size-label: 12px;
--font-size-table: 12.5px;
--font-size-body: 13px;
--font-size-card-title: 14px;
--font-size-page-title: 17px;
--font-size-metric: 22px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-24: 24px;
--sidebar-width: var(--size-sidebar);
--topbar-height: var(--size-topbar);
--summary-height: var(--size-summary);
@@ -146,8 +179,7 @@
--mobile-shell-pad: 8px;
--mobile-page-pad: 10px;
--mobile-min-width: 320px;
--space-4: 4px;
--font-aux: 10.5px;
--font-aux: var(--font-size-aux);
--dragon-profile-list-width: 340px;
--dragon-profile-detail-min-height: 460px;
@@ -216,7 +248,7 @@
--sub: var(--text-secondary);
--faint: var(--text-tertiary);
--line: var(--border);
--line-soft: #eef0f3;
--line-soft: var(--border-subtle);
--line-strong: var(--border-strong);
--text: var(--text-primary);
--text-muted: var(--text-secondary);
@@ -253,7 +285,7 @@
--r2-sub: var(--text-secondary);
--r2-faint: var(--text-tertiary);
--r2-line: var(--border);
--r2-line-soft: #eef0f3;
--r2-line-soft: var(--border-subtle);
--r2-bg: var(--surface-canvas);
--r2-card: var(--surface-raised);
--r2-radius: var(--size-radius-lg);
@@ -271,12 +303,17 @@
--surface-subtle: #24282d;
--surface-canvas: var(--canvas);
--surface-raised: var(--surface);
--surface-sunken: #16191c;
--surface-hover: #24282d;
--surface-selected: #23364a;
--surface-overlay: #24282d;
--border: #343a40;
--border-strong: #474f57;
--border-subtle: #2a2f34;
--text-primary: #e8eaed;
--text-secondary: #adb5bd;
--text-tertiary: #7f8993;
--text-inverse: #ffffff;
--action: #6ca8e8;
--action-hover: #8bbcf0;
--action-soft: #23364a;
@@ -286,6 +323,14 @@
--market-down-soft: #1d382f;
--warning-color: #e2ad58;
--warning-soft: #3d3220;
--control-surface: #202428;
--control-hover: #2a2f34;
--control-border: #474f57;
--table-header: #202428;
--table-hover: #242f39;
--table-selected: #23364a;
--focus-ring: rgba(108, 168, 232, .22);
--backdrop: rgba(0, 0, 0, .66);
--primary: var(--action);
--primary-hover: var(--action-hover);
--danger: var(--market-up);
@@ -319,7 +364,7 @@
--sub: var(--text-secondary);
--faint: var(--text-tertiary);
--line: var(--border);
--line-soft: #2a2f34;
--line-soft: var(--border-subtle);
--line-strong: var(--border-strong);
--text: var(--text-primary);
--text-muted: var(--text-secondary);
@@ -352,7 +397,7 @@
--r2-sub: var(--text-secondary);
--r2-faint: var(--text-tertiary);
--r2-line: var(--border);
--r2-line-soft: #2a2f34;
--r2-line-soft: var(--border-subtle);
--r2-bg: var(--canvas);
--r2-card: var(--surface);
--r2-shadow: var(--shadow-soft);
@@ -384,7 +429,7 @@
--warning-line: #6d5a38;
--warning-line-strong: #66502d;
--control-shadow: 0 1px 3px rgba(0, 0, 0, .3);
--dialog-backdrop: rgba(0, 0, 0, .62);
--dialog-backdrop: var(--backdrop);
--ladder-level-1: #2d2426;
--ladder-level-2: #2b2822;
--ladder-level-3: #252a2d;