chore(usr): replace hardcoded colors with CSS design tokens

zichun
1 parent e792984d
Showing 4 changed files with 29 additions and 12 deletions
frontend/src/components/AppShell.tsx
frontend/src/components/NavOverlay.tsx
frontend/src/pages/usr/LoginPage.tsx
frontend/src/styles/tokens.css
@@ -71,7 +71,7 @@ export default function AppShell() {
                 <button
                   aria-label={`关闭 ${tab.title}`}
                   onClick={e => handleTabClose(e, tab.id)}
-                  style={{ marginLeft: 6, width: 14, height: 14, borderRadius: '50%', border: 'none', background: 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: '#9aa0a8', cursor: 'pointer', padding: 0 }}
+                  style={{ marginLeft: 6, width: 14, height: 14, borderRadius: '50%', border: 'none', background: 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--color-tab-text)', cursor: 'pointer', padding: 0 }}
                 >
                   ✕
                 </button>
@@ -41,14 +41,14 @@ export default function NavOverlay({ onClose }: Props) {
     >
       <div onClick={e => e.stopPropagation()} style={{ display: 'flex', flex: 1 }}>
         {/* Left sidebar */}
-        <div style={{ width: 200, background: '#2b3137', borderRight: '1px solid #1e2226', padding: '8px 0', overflowY: 'auto' }}>
+        <div style={{ width: 200, background: 'var(--color-nav-overlay-bg)', borderRight: '1px solid var(--color-nav-sidebar-border)', padding: '8px 0', overflowY: 'auto' }}>
           {LEFT_MODULES.map(mod => (
             <div
               key={mod}
               style={{
                 display: 'flex', alignItems: 'center', gap: 10, padding: '11px 18px', fontSize: 14, cursor: 'pointer',
-                color: mod === '系统设置' ? 'var(--color-tab-active)' : '#d3d6db',
-                background: mod === '系统设置' ? '#34393f' : 'transparent',
+                color: mod === '系统设置' ? 'var(--color-tab-active)' : 'var(--color-nav-item-text)',
+                background: mod === '系统设置' ? 'var(--color-nav-sidebar-active-bg)' : 'transparent',
               }}
             >
               {mod}
@@ -59,21 +59,21 @@ export default function NavOverlay({ onClose }: Props) {
         <div style={{ flex: 1, padding: '30px 40px', display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '30px 40px', alignContent: 'start', overflowY: 'auto' }}>
           {NAV_COLS.map(col => (
             <div key={col.title}>
-              <h3 style={{ fontSize: 15, color: '#e8eaee', fontWeight: 500, margin: '0 0 18px', borderBottom: '1px solid #4a4f57', paddingBottom: 10 }}>
+              <h3 style={{ fontSize: 15, color: 'var(--color-nav-col-header)', fontWeight: 500, margin: '0 0 18px', borderBottom: '1px solid var(--color-nav-col-divider)', paddingBottom: 10 }}>
                 {col.title}
               </h3>
               {col.items.map(item => {
                 if (typeof item === 'string') {
-                  return <div key={item} style={{ padding: '7px 0', color: '#cfd3da', fontSize: 14 }}>{item}</div>
+                  return <div key={item} style={{ padding: '7px 0', color: 'var(--color-nav-item-text)', fontSize: 14 }}>{item}</div>
                 }
                 return (
                   <div
                     key={item.label}
                     onClick={item.go === 'userlist' ? handleUserList : undefined}
-                    style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 0', color: '#cfd3da', fontSize: 14, cursor: item.go === 'userlist' ? 'pointer' : 'default' }}
+                    style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 0', color: 'var(--color-nav-item-text)', fontSize: 14, cursor: item.go === 'userlist' ? 'pointer' : 'default' }}
                   >
                     {item.label}
-                    {item.star && <span style={{ color: '#f3b526' }}>★</span>}
+                    {item.star && <span style={{ color: 'var(--color-nav-item-star)' }}>★</span>}
                   </div>
                 )
               })}
@@ -43,7 +43,7 @@ export default function LoginPage() {
   }
   return (
-    <div style={{ position: 'absolute', inset: 0, background: '#eaedf2', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ position: 'absolute', inset: 0, background: 'var(--color-login-bg)', display: 'flex', flexDirection: 'column' }}>
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '18px 36px' }}>
         <div style={{ width: 42, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -51,11 +51,11 @@ export default function LoginPage() {
             {ANTLER_PATHS.map((d, i) => <path key={i} d={d} />)}
           </svg>
         </div>
-        <span style={{ fontSize: 24, fontWeight: 700, color: '#e0a020', letterSpacing: 2 }}>Antler ERP</span>
+        <span style={{ fontSize: 24, fontWeight: 700, color: 'var(--color-login-brand)', letterSpacing: 2 }}>Antler ERP</span>
         <span style={{ color: '#444', fontSize: 14, marginLeft: 6 }}>欢迎登录EBC平台</span>
       </div>
       {/* Hero */}
-      <div style={{ flex: 1, position: 'relative', background: 'radial-gradient(ellipse at center, #1a4ea0 0%, #0a1d44 60%, #050d20 100%)', overflow: 'hidden' }}>
+      <div style={{ flex: 1, position: 'relative', background: 'radial-gradient(ellipse at center, var(--color-login-hero-start) 0%, var(--color-login-hero-mid) 60%, var(--color-login-hero-end) 100%)', overflow: 'hidden' }}>
         {/* Brand text */}
         <div style={{ position: 'absolute', left: '8%', top: '35%', color: '#fff', zIndex: 2 }}>
           <div style={{ fontSize: 30, fontWeight: 300, color: '#cfe1ff', marginBottom: 6 }}>Enterprise Business Capability</div>
@@ -84,7 +84,7 @@ export default function LoginPage() {
         </div>
       </div>
       {/* Footer */}
-      <div style={{ background: '#eaedf2', textAlign: 'center', padding: '14px 8px', color: '#666', fontSize: 12, borderTop: '1px solid #d8dce2' }}>
+      <div style={{ background: 'var(--color-login-bg)', textAlign: 'center', padding: '14px 8px', color: 'var(--color-login-text-muted)', fontSize: 12, borderTop: '1px solid var(--color-login-border)' }}>
         🛠 ©Copyright Antler Software | 印刷ERP | 400-880-6237
       </div>
     </div>
@@ -53,4 +53,21 @@
   --color-table-row-alt: #f7f8fa;
   --color-filterbar-bg: #ffffff;
   --color-nav-overlay-bg: #2b3137;
+
+  /* === 4. NavOverlay colors === */
+  --color-nav-sidebar-border: #1e2226;
+  --color-nav-sidebar-active-bg: #34393f;
+  --color-nav-col-header: #e8eaee;
+  --color-nav-col-divider: #4a4f57;
+  --color-nav-item-text: #cfd3da;
+  --color-nav-item-star: #f3b526;
+
+  /* === 5. Login hero === */
+  --color-login-hero-start: #1a4ea0;
+  --color-login-hero-mid: #0a1d44;
+  --color-login-hero-end: #050d20;
+  --color-login-bg: #eaedf2;
+  --color-login-border: #d8dce2;
+  --color-login-brand: #e0a020;
+  --color-login-text-muted: #666666;
 }