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 个前端文件的硬编码颜色值
This commit is contained in:
iven
2026-04-20 13:08:22 +08:00
parent 40b37cc776
commit 8f3d2d58e7
27 changed files with 825 additions and 406 deletions

View File

@@ -50,7 +50,7 @@ export default function NotificationPanel() {
<Button
type="text"
size="small"
style={{ fontSize: 12, color: '#4F46E5' }}
style={{ fontSize: 12, color: '#0075de' }}
onClick={() => navigate('/messages')}
>
@@ -76,7 +76,7 @@ export default function NotificationPanel() {
cursor: 'pointer',
transition: 'background 0.15s ease',
border: 'none',
background: !item.is_read ? (isDark ? '#1E293B' : '#F5F3FF') : 'transparent',
background: !item.is_read ? (isDark ? '#1e1e1d' : '#f2f9ff') : 'transparent',
}}
onClick={() => {
if (!item.is_read) {
@@ -85,7 +85,7 @@ export default function NotificationPanel() {
}}
onMouseEnter={(e) => {
if (item.is_read) {
e.currentTarget.style.background = isDark ? '#1E293B' : '#F8FAFC';
e.currentTarget.style.background = isDark ? '#1e1e1d' : '#fafaf9';
}
}}
onMouseLeave={(e) => {
@@ -109,7 +109,7 @@ export default function NotificationPanel() {
width: 6,
height: 6,
borderRadius: '50%',
background: '#4F46E5',
background: '#0075de',
flexShrink: 0,
}} />
)}
@@ -132,12 +132,12 @@ export default function NotificationPanel() {
textAlign: 'center',
paddingTop: 8,
marginTop: 4,
borderTop: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
borderTop: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
}}>
<Button
type="text"
onClick={() => navigate('/messages')}
style={{ fontSize: 13, color: '#4F46E5', fontWeight: 500 }}
style={{ fontSize: 13, color: '#0075de', fontWeight: 500 }}
>
</Button>
@@ -166,7 +166,7 @@ export default function NotificationPanel() {
position: 'relative',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = isDark ? '#1E293B' : '#F1F5F9';
e.currentTarget.style.background = isDark ? '#1e1e1d' : '#f6f5f4';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
@@ -175,7 +175,7 @@ export default function NotificationPanel() {
<Badge count={unreadCount} size="small" offset={[4, -4]}>
<BellOutlined style={{
fontSize: 16,
color: isDark ? '#94A3B8' : '#64748B',
color: isDark ? '#a39e98' : '#615d59',
}} />
</Badge>
</div>