feat(web): 从 Notion 风格切换到 Pinterest 设计系统
Some checks failed
CI / rust-check (push) Has been cancelled
CI / rust-test (push) Has been cancelled
CI / frontend-build (push) Has been cancelled
CI / security-audit (push) Has been cancelled

- 替换 DESIGN.md 为 Pinterest 设计规格(暖色调、红色主题、大圆角)
- 更新 CSS 变量:主色 #0075de→#e60023, 圆角 4px→16px, 背景 #f6f5f4→#f6f6f3
- 更新 Ant Design 主题令牌:更大圆角、Pinterest 色板、更大触控目标
- 批量更新 24 个页面/组件文件中的硬编码颜色值
- 暗色模式同步适配 Pinterest 暖色调暗色方案
This commit is contained in:
iven
2026-04-20 22:13:20 +08:00
parent 8f3d2d58e7
commit 85e732cf12
27 changed files with 547 additions and 657 deletions

View File

@@ -13,10 +13,10 @@ import { getProcessDefinition, type NodeDef, type EdgeDef } from '../../api/work
import ProcessViewer from './ProcessViewer';
const statusStyles: Record<string, { bg: string; color: string; text: string }> = {
running: { bg: '#f2f9ff', color: '#0075de', text: '运行中' },
suspended: { bg: '#FFFBEB', color: '#dd5b00', text: '已挂起' },
completed: { bg: '#ECFDF5', color: '#1aae39', text: '已完成' },
terminated: { bg: '#FEF2F2', color: '#e5534b', text: '已终止' },
running: { bg: '#fef0f0', color: '#e60023', text: '运行中' },
suspended: { bg: '#FFFBEB', color: '#b56e1a', text: '已挂起' },
completed: { bg: '#ECFDF5', color: '#103c25', text: '已完成' },
terminated: { bg: '#FEF2F2', color: '#9e0a0a', text: '已终止' },
};
export default function InstanceMonitor() {
@@ -129,7 +129,7 @@ export default function InstanceMonitor() {
key: 'status',
width: 100,
render: (s: string) => {
const info = statusStyles[s] || { bg: '#f6f5f4', color: '#615d59', text: s };
const info = statusStyles[s] || { bg: '#f6f6f3', color: '#62625b', text: s };
return (
<Tag style={{
background: info.bg,
@@ -154,7 +154,7 @@ export default function InstanceMonitor() {
key: 'started_at',
width: 180,
render: (v: string) => (
<span style={{ color: isDark ? '#615d59' : '#a39e98', fontSize: 13 }}>
<span style={{ color: isDark ? '#62625b' : '#91918c', fontSize: 13 }}>
{new Date(v).toLocaleString()}
</span>
),
@@ -214,7 +214,7 @@ export default function InstanceMonitor() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
overflow: 'hidden',
}}>
<Table