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:
@@ -13,9 +13,9 @@ import {
|
||||
import ProcessDesigner from './ProcessDesigner';
|
||||
|
||||
const statusColors: Record<string, { bg: string; color: string; text: string }> = {
|
||||
draft: { bg: '#F1F5F9', color: '#64748B', text: '草稿' },
|
||||
published: { bg: '#ECFDF5', color: '#059669', text: '已发布' },
|
||||
deprecated: { bg: '#FEF2F2', color: '#DC2626', text: '已弃用' },
|
||||
draft: { bg: '#f6f5f4', color: '#615d59', text: '草稿' },
|
||||
published: { bg: '#ecfdf5', color: '#1aae39', text: '已发布' },
|
||||
deprecated: { bg: '#fef2f2', color: '#e5534b', text: '已弃用' },
|
||||
};
|
||||
|
||||
export default function ProcessDefinitions() {
|
||||
@@ -92,9 +92,9 @@ export default function ProcessDefinitions() {
|
||||
key: 'key',
|
||||
render: (v: string) => (
|
||||
<Tag style={{
|
||||
background: isDark ? '#1E293B' : '#F1F5F9',
|
||||
background: isDark ? '#1E293B' : '#f6f5f4',
|
||||
border: 'none',
|
||||
color: isDark ? '#94A3B8' : '#64748B',
|
||||
color: isDark ? '#a39e98' : '#615d59',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 12,
|
||||
}}>
|
||||
@@ -110,7 +110,7 @@ export default function ProcessDefinitions() {
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (s: string) => {
|
||||
const info = statusColors[s] || { bg: '#F1F5F9', color: '#64748B', text: s };
|
||||
const info = statusColors[s] || { bg: '#f6f5f4', color: '#615d59', text: s };
|
||||
return (
|
||||
<Tag style={{
|
||||
background: info.bg,
|
||||
@@ -152,7 +152,7 @@ export default function ProcessDefinitions() {
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
}}>
|
||||
<span style={{ fontSize: 13, color: isDark ? '#64748B' : '#94A3B8' }}>
|
||||
<span style={{ fontSize: 13, color: isDark ? '#615d59' : '#a39e98' }}>
|
||||
共 {total} 个流程定义
|
||||
</span>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
|
||||
@@ -163,7 +163,7 @@ export default function ProcessDefinitions() {
|
||||
<div style={{
|
||||
background: isDark ? '#111827' : '#FFFFFF',
|
||||
borderRadius: 12,
|
||||
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
|
||||
border: `1px solid ${isDark ? '#1E293B' : '#f6f5f4'}`,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Table
|
||||
|
||||
Reference in New Issue
Block a user