diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 5ed514d..7cda89e 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -177,6 +177,166 @@ const isMobile = computed(() => { --font-mono: 'JetBrains Mono', monospace; } +/* ═══════════════════════════════════════════════════════════ + THEME: Minimal Dark — 极简深色 + ═══════════════════════════════════════════════════════════ */ + +:root[data-theme="minimal-dark"] { + /* ── Core palette ── */ + --ink: #E5E5E5; + --ink-light: #CCCCCC; + --ink-dark: #FFFFFF; + --vermilion: #F87171; + --vermilion-light: #FCA5A5; + --vermilion-dark: #EF4444; + --gold: #A78BFA; + --gold-light: #C4B5FD; + --gold-dark: #8B5CF6; + --paper: #1A1A1A; + --paper-dark: #141414; + --surface: #2D2D2D; + --sage: #4ADE80; + --amber: #FBBF24; + --warm-gray: #999999; + --warm-border: #3A3A3A; + + /* ── Semantic tokens ── */ + --c-primary: var(--ink); + --c-primary-light: var(--ink-light); + --c-primary-bg: #262626; + --c-accent: var(--vermilion); + --c-accent-light: var(--vermilion-light); + --c-gold: var(--gold); + --c-success: var(--sage); + --c-warning: var(--amber); + --c-danger: var(--vermilion); + --c-info: #60A5FA; + --c-text: #E5E5E5; + --c-text-secondary: #999999; + --c-text-muted: #666666; + --c-bg: var(--paper); + --c-bg-card: var(--surface); + --c-border: var(--warm-border); + + /* ── Effects ── */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.20); + --shadow: 0 1px 3px rgba(0,0,0,0.30); + --shadow-md: 0 2px 6px rgba(0,0,0,0.40); + --shadow-lg: 0 4px 12px rgba(0,0,0,0.50); + --radius: 0px; + --radius-sm: 0px; + --radius-xs: 0px; + --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); + + /* ── Sidebar — dark minimal ── */ + --sidebar-bg: #141414; + --sidebar-color: #E5E5E5; + --sidebar-accent: var(--gold); + --sidebar-nav-text: #777777; + --sidebar-nav-text-hover: #CCCCCC; + --sidebar-nav-text-active: #FFFFFF; + --sidebar-nav-bg-hover: rgba(255,255,255,0.04); + --sidebar-nav-bg-active: rgba(255,255,255,0.06); + --sidebar-nav-border-active: var(--gold); + --sidebar-divider: #2A2A2A; + --sidebar-brand-color: #FFFFFF; + --sidebar-brand-sub-color: #666666; + --sidebar-group-label-color: #555555; + --sidebar-footer-role-color: var(--gold); + --sidebar-footer-name-color: #999999; + + /* ── Mobile page accent ── */ + --page-accent-color: rgba(167,139,250,0.06); + + /* ── Manager chip tags ── */ + --mgr-chip-text: #E5E5E5; + + /* ── Fonts — sans-serif minimal ── */ + --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; + --font-heading: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; + --font-mono: 'JetBrains Mono', monospace; +} + +/* ═══════════════════════════════════════════════════════════ + THEME: Tech Dark — 科技深色 (编辑风暗色版) + ═══════════════════════════════════════════════════════════ */ + +:root[data-theme="tech-dark"] { + /* ── Core palette ── */ + --ink: #C8D6E5; + --ink-light: #A0B4CC; + --ink-dark: #E8EEF4; + --vermilion: #F26B6B; + --vermilion-light: #F59898; + --vermilion-dark: #E55555; + --gold: #5B8DEF; + --gold-light: #7BA5F5; + --gold-dark: #4070D0; + --paper: #0B1120; + --paper-dark: #080C18; + --surface: #111B2E; + --sage: #4EC9B0; + --amber: #E5C07B; + --warm-gray: #6B7A8D; + --warm-border: #1E2D45; + + /* ── Semantic tokens ── */ + --c-primary: var(--ink); + --c-primary-light: var(--ink-light); + --c-primary-bg: #131D30; + --c-accent: var(--vermilion); + --c-accent-light: var(--vermilion-light); + --c-gold: var(--gold); + --c-success: var(--sage); + --c-warning: var(--amber); + --c-danger: var(--vermilion); + --c-info: #5B8DEF; + --c-text: #C8D6E5; + --c-text-secondary: #6B7A8D; + --c-text-muted: #455570; + --c-bg: var(--paper); + --c-bg-card: var(--surface); + --c-border: var(--warm-border); + + /* ── Effects ── */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); + --shadow: 0 2px 6px rgba(0,0,0,0.35); + --shadow-md: 0 6px 18px rgba(0,0,0,0.45); + --shadow-lg: 0 12px 36px rgba(0,0,0,0.55); + --radius: 2px; + --radius-sm: 2px; + --radius-xs: 2px; + --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); + + /* ── Sidebar — dark tech ── */ + --sidebar-bg: #070D1A; + --sidebar-color: #C8D6E5; + --sidebar-accent: var(--gold); + --sidebar-nav-text: rgba(200,214,229,0.45); + --sidebar-nav-text-hover: rgba(200,214,229,0.80); + --sidebar-nav-text-active: #FFFFFF; + --sidebar-nav-bg-hover: rgba(91,141,239,0.06); + --sidebar-nav-bg-active: rgba(91,141,239,0.10); + --sidebar-nav-border-active: var(--gold); + --sidebar-divider: rgba(200,214,229,0.06); + --sidebar-brand-color: #FFFFFF; + --sidebar-brand-sub-color: rgba(200,214,229,0.35); + --sidebar-group-label-color: rgba(200,214,229,0.20); + --sidebar-footer-role-color: var(--gold); + --sidebar-footer-name-color: rgba(200,214,229,0.65); + + /* ── Mobile page accent ── */ + --page-accent-color: rgba(91,141,239,0.06); + + /* ── Manager chip tags ── */ + --mgr-chip-text: #C8D6E5; + + /* ── Fonts — editorial Chinese ── */ + --font-body: 'Noto Serif SC', STSong, Songti SC, '宋体', serif; + --font-heading: 'ZCOOL XiaoWei', STSong, Songti SC, serif; + --font-mono: 'JetBrains Mono', 'SF Mono', monospace; +} + /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; }