feat(web): 采用 Notion 设计系统 — 暖色调 + 白色侧边栏 + Inter 字体

引入 Notion 风格的 DESIGN.md 设计系统文件，并全面重构前端 UI：

- 主色从 Indigo (#4F46E5) 迁移到 Notion Blue (#0075de)
- 页面背景从冷灰 (#F1F5F9) 迁移到暖白 (#f6f5f4)
- 侧边栏从深色 (#0F172A) 迁移到白色，活跃项用蓝色指示
- 文字从 Slate 冷色迁移到暖灰系列 (Warm Gray 500/300)
- 圆角从 8px 缩小到 4px（按钮/输入），8px（卡片）
- 阴影改为多层超轻 Notion 风格（最大 opacity 0.05）
- 字体优先使用 Inter，保留中文回退
- 暗色模式适配暖黑色调 (#191918)
- 更新 27 个前端文件的硬编码颜色值

apps/web/src/pages/Users.tsx

@@ -35,9 +35,9 @@ import { listRoles, type RoleInfo } from '../api/roles';
 import type { UserInfo } from '../api/auth';
 
 const STATUS_COLOR_MAP: Record<string, string> = {
-  active: '#059669',
-  disabled: '#DC2626',
-  locked: '#D97706',
+  active: '#1aae39',
+  disabled: '#e5534b',
+  locked: '#dd5b00',
 };
 
 const STATUS_BG_MAP: Record<string, string> = {
@@ -219,7 +219,7 @@ export default function Users() {
               width: 32,
               height: 32,
               borderRadius: 8,
-              background: 'linear-gradient(135deg, #4F46E5, #818CF8)',
+              background: 'linear-gradient(135deg, #0075de, #62aef0)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -233,7 +233,7 @@ export default function Users() {
           <div>
             <div style={{ fontWeight: 500, fontSize: 14 }}>{v}</div>
             {record.display_name && (
-              <div style={{ fontSize: 12, color: isDark ? '#64748B' : '#94A3B8' }}>
+              <div style={{ fontSize: 12, color: isDark ? '#615d59' : '#a39e98' }}>
                 {record.display_name}
               </div>
             )}
@@ -261,8 +261,8 @@ export default function Users() {
       render: (status: string) => (
         <Tag
           style={{
-            color: STATUS_COLOR_MAP[status] || '#64748B',
-            background: STATUS_BG_MAP[status] || '#F1F5F9',
+            color: STATUS_COLOR_MAP[status] || '#615d59',
+            background: STATUS_BG_MAP[status] || '#f6f5f4',
             border: 'none',
             fontWeight: 500,
           }}
@@ -279,14 +279,14 @@ export default function Users() {
         roles.length > 0
           ? roles.map((r) => (
             <Tag key={r.id} style={{
-              background: isDark ? '#1E293B' : '#F1F5F9',
+              background: isDark ? '#1e1e1d' : '#f6f5f4',
               border: 'none',
-              color: isDark ? '#CBD5E1' : '#475569',
+              color: isDark ? '#CBD5E1' : '#615d59',
             }}>
               {r.name}
             </Tag>
           ))
-          : <span style={{ color: isDark ? '#475569' : '#CBD5E1' }}>-</span>,
+          : <span style={{ color: isDark ? '#615d59' : '#CBD5E1' }}>-</span>,
     },
     {
       title: '操作',
@@ -299,14 +299,14 @@ export default function Users() {
             type="text"
             icon={<EditOutlined />}
             onClick={() => openEditModal(record)}
-            style={{ color: isDark ? '#94A3B8' : '#64748B' }}
+            style={{ color: isDark ? '#a39e98' : '#615d59' }}
           />
           <Button
             size="small"
             type="text"
             icon={<SafetyCertificateOutlined />}
             onClick={() => openRoleModal(record)}
-            style={{ color: isDark ? '#94A3B8' : '#64748B' }}
+            style={{ color: isDark ? '#a39e98' : '#615d59' }}
           />
           {record.status === 'active' ? (
             <Popconfirm
@@ -326,7 +326,7 @@ export default function Users() {
               type="text"
               icon={<CheckCircleOutlined />}
               onClick={() => handleToggleStatus(record.id, 'active')}
-              style={{ color: '#059669' }}
+              style={{ color: '#1aae39' }}
             />
           )}
           <Popconfirm
@@ -356,7 +356,7 @@ export default function Users() {
         <Space size={8}>
           <Input
             placeholder="搜索用户名..."
-            prefix={<SearchOutlined style={{ color: '#94A3B8' }} />}
+            prefix={<SearchOutlined style={{ color: '#a39e98' }} />}
             value={searchText}
             onChange={(e) => {
               setSearchText(e.target.value);
@@ -379,7 +379,7 @@ export default function Users() {
       <div style={{
         background: isDark ? '#111827' : '#FFFFFF',
         borderRadius: 12,
-        border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
+        border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
         overflow: 'hidden',
       }}>
         <Table
@@ -415,7 +415,7 @@ export default function Users() {
             label="用户名"
             rules={[{ required: true, message: '请输入用户名' }]}
           >
-            <Input prefix={<UserOutlined style={{ color: '#94A3B8' }} />} disabled={!!editUser} />
+            <Input prefix={<UserOutlined style={{ color: '#a39e98' }} />} disabled={!!editUser} />
           </Form.Item>
           {!editUser && (
             <Form.Item
@@ -465,13 +465,13 @@ export default function Users() {
                 style={{
                   padding: '10px 14px',
                   borderRadius: 8,
-                  border: `1px solid ${isDark ? '#1E293B' : '#E2E8F0'}`,
-                  background: isDark ? '#0B0F1A' : '#F8FAFC',
+                  border: `1px solid ${isDark ? '#1e1e1d' : '#E2E8F0'}`,
+                  background: isDark ? '#0B0F1A' : '#fafaf9',
                 }}
               >
                 <Checkbox value={r.id}>
                   <span style={{ fontWeight: 500 }}>{r.name}</span>
-                  <span style={{ color: isDark ? '#475569' : '#94A3B8', marginLeft: 8, fontSize: 12 }}>
+                  <span style={{ color: isDark ? '#615d59' : '#a39e98', marginLeft: 8, fontSize: 12 }}>
                     {r.code}
                   </span>
                 </Checkbox>