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/Roles.tsx

@@ -153,12 +153,12 @@ export default function Roles() {
               height: 32,
               borderRadius: 8,
               background: record.is_system
-                ? 'linear-gradient(135deg, #4F46E5, #818CF8)'
-                : isDark ? '#1E293B' : '#F1F5F9',
+                ? 'linear-gradient(135deg, #0075de, #62aef0)'
+                : isDark ? '#1e1e1d' : '#f6f5f4',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              color: record.is_system ? '#fff' : isDark ? '#94A3B8' : '#64748B',
+              color: record.is_system ? '#fff' : isDark ? '#a39e98' : '#615d59',
               fontSize: 14,
             }}
           >
@@ -174,9 +174,9 @@ export default function Roles() {
       key: 'code',
       render: (v: string) => (
         <Tag style={{
-          background: isDark ? '#1E293B' : '#F1F5F9',
+          background: isDark ? '#1e1e1d' : '#f6f5f4',
           border: 'none',
-          color: isDark ? '#94A3B8' : '#64748B',
+          color: isDark ? '#a39e98' : '#615d59',
           fontFamily: 'monospace',
           fontSize: 12,
         }}>
@@ -190,7 +190,7 @@ export default function Roles() {
       key: 'description',
       ellipsis: true,
       render: (v: string | undefined) => (
-        <span style={{ color: isDark ? '#64748B' : '#94A3B8' }}>{v || '-'}</span>
+        <span style={{ color: isDark ? '#615d59' : '#a39e98' }}>{v || '-'}</span>
       ),
     },
     {
@@ -201,8 +201,8 @@ export default function Roles() {
       render: (v: boolean) => (
         <Tag
           style={{
-            color: v ? '#4F46E5' : (isDark ? '#94A3B8' : '#64748B'),
-            background: v ? '#EEF2FF' : (isDark ? '#1E293B' : '#F1F5F9'),
+            color: v ? '#0075de' : (isDark ? '#a39e98' : '#615d59'),
+            background: v ? '#f2f9ff' : (isDark ? '#1e1e1d' : '#f6f5f4'),
             border: 'none',
             fontWeight: 500,
           }}
@@ -222,7 +222,7 @@ export default function Roles() {
             type="text"
             icon={<SafetyCertificateOutlined />}
             onClick={() => openPermModal(record)}
-            style={{ color: '#4F46E5' }}
+            style={{ color: '#0075de' }}
           >
             权限
           </Button>
@@ -233,7 +233,7 @@ export default function Roles() {
                 type="text"
                 icon={<EditOutlined />}
                 onClick={() => openEditModal(record)}
-                style={{ color: isDark ? '#94A3B8' : '#64748B' }}
+                style={{ color: isDark ? '#a39e98' : '#615d59' }}
               />
               <Popconfirm
                 title="确定删除此角色？"
@@ -279,7 +279,7 @@ export default function Roles() {
       <div style={{
         background: isDark ? '#111827' : '#FFFFFF',
         borderRadius: 12,
-        border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
+        border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
         overflow: 'hidden',
       }}>
         <Table
@@ -336,8 +336,8 @@ export default function Roles() {
                 marginBottom: 16,
                 padding: 16,
                 borderRadius: 10,
-                border: `1px solid ${isDark ? '#1E293B' : '#E2E8F0'}`,
-                background: isDark ? '#0B0F1A' : '#F8FAFC',
+                border: `1px solid ${isDark ? '#1e1e1d' : '#E2E8F0'}`,
+                background: isDark ? '#0B0F1A' : '#fafaf9',
               }}
             >
               <div style={{