feat(web): 采用 UI UX Pro Max Soft UI Evolution 设计系统

从 Pinterest 风格切换到 Soft UI Evolution 设计系统，使用 UI UX Pro Max
推理引擎生成适合跨行业 ERP 业务用户的专业设计方案。

设计变更：
- 主色从 Pinterest Red (#e60023) 切换到 Trust Blue (#2563EB)
- 字体从系统默认切换到 Noto Sans SC（中文优先）
- 圆角从 16-20px 调整到 10-12px（专业但不夸张）
- 中性色从暖橄榄调切换到 Slate 石板蓝调
- 成功色 #103c25 → #059669，警告色 #b56e1a → #d97706
- 暗色模式从暖黑 (#1a1a18) 切换到深海军蓝 (#0f172a)

涉及文件：DESIGN.md + index.css + App.tsx + 24 个组件文件

apps/web/src/pages/workflow/CompletedTasks.tsx

@@ -4,9 +4,9 @@ import type { ColumnsType } from 'antd/es/table';
 import { listCompletedTasks, type TaskInfo } from '../../api/workflowTasks';
 
 const outcomeStyles: Record<string, { bg: string; color: string; text: string }> = {
-  approved: { bg: '#ECFDF5', color: '#103c25', text: '同意' },
-  rejected: { bg: '#FEF2F2', color: '#9e0a0a', text: '拒绝' },
-  delegated: { bg: '#fef0f0', color: '#e60023', text: '已委派' },
+  approved: { bg: '#ECFDF5', color: '#059669', text: '同意' },
+  rejected: { bg: '#FEF2F2', color: '#dc2626', text: '拒绝' },
+  delegated: { bg: '#eff6ff', color: '#2563eb', text: '已委派' },
 };
 
 export default function CompletedTasks() {
@@ -50,7 +50,7 @@ export default function CompletedTasks() {
       key: 'outcome',
       width: 100,
       render: (o: string) => {
-        const info = outcomeStyles[o] || { bg: '#f6f6f3', color: '#62625b', text: o };
+        const info = outcomeStyles[o] || { bg: '#f8fafc', color: '#475569', text: o };
         return (
           <Tag style={{
             background: info.bg,
@@ -69,7 +69,7 @@ export default function CompletedTasks() {
       key: 'completed_at',
       width: 180,
       render: (v: string) => (
-        <span style={{ color: isDark ? '#62625b' : '#91918c', fontSize: 13 }}>
+        <span style={{ color: isDark ? '#475569' : '#94a3b8', fontSize: 13 }}>
           {v ? new Date(v).toLocaleString() : '-'}
         </span>
       ),
@@ -80,7 +80,7 @@ export default function CompletedTasks() {
     <div style={{
       background: isDark ? '#111827' : '#FFFFFF',
       borderRadius: 12,
-      border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
+      border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
       overflow: 'hidden',
     }}>
       <Table

apps/web/src/pages/workflow/InstanceMonitor.tsx

@@ -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: '#fef0f0', color: '#e60023', text: '运行中' },
-  suspended: { bg: '#FFFBEB', color: '#b56e1a', text: '已挂起' },
-  completed: { bg: '#ECFDF5', color: '#103c25', text: '已完成' },
-  terminated: { bg: '#FEF2F2', color: '#9e0a0a', text: '已终止' },
+  running: { bg: '#eff6ff', color: '#2563eb', text: '运行中' },
+  suspended: { bg: '#FFFBEB', color: '#d97706', text: '已挂起' },
+  completed: { bg: '#ECFDF5', color: '#059669', text: '已完成' },
+  terminated: { bg: '#FEF2F2', color: '#dc2626', 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: '#f6f6f3', color: '#62625b', text: s };
+        const info = statusStyles[s] || { bg: '#f8fafc', color: '#475569', 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 ? '#62625b' : '#91918c', fontSize: 13 }}>
+        <span style={{ color: isDark ? '#475569' : '#94a3b8', 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 ? '#211922' : '#f6f6f3'}`,
+        border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
         overflow: 'hidden',
       }}>
         <Table

apps/web/src/pages/workflow/PendingTasks.tsx

@@ -76,9 +76,9 @@ export default function PendingTasks() {
       key: 'business_key',
       render: (v: string | undefined) => v ? (
         <Tag style={{
-          background: isDark ? '#211922' : '#f6f6f3',
+          background: isDark ? '#0f172a' : '#f8fafc',
           border: 'none',
-          color: isDark ? '#91918c' : '#62625b',
+          color: isDark ? '#94a3b8' : '#475569',
           fontFamily: 'monospace',
           fontSize: 12,
         }}>
@@ -93,9 +93,9 @@ export default function PendingTasks() {
       width: 100,
       render: (s: string) => (
         <Tag style={{
-          background: '#fef0f0',
+          background: '#eff6ff',
           border: 'none',
-          color: '#e60023',
+          color: '#2563eb',
           fontWeight: 500,
         }}>
           {s}
@@ -108,7 +108,7 @@ export default function PendingTasks() {
       key: 'created_at',
       width: 180,
       render: (v: string) => (
-        <span style={{ color: isDark ? '#62625b' : '#91918c', fontSize: 13 }}>
+        <span style={{ color: isDark ? '#475569' : '#94a3b8', fontSize: 13 }}>
           {new Date(v).toLocaleString()}
         </span>
       ),
@@ -145,7 +145,7 @@ export default function PendingTasks() {
       <div style={{
         background: isDark ? '#111827' : '#FFFFFF',
         borderRadius: 12,
-        border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
+        border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
         overflow: 'hidden',
       }}>
         <Table

apps/web/src/pages/workflow/ProcessDefinitions.tsx

@@ -13,9 +13,9 @@ import {
 import ProcessDesigner from './ProcessDesigner';
 
 const statusColors: Record<string, { bg: string; color: string; text: string }> = {
-  draft: { bg: '#f6f6f3', color: '#62625b', text: '草稿' },
-  published: { bg: '#ecfdf5', color: '#103c25', text: '已发布' },
-  deprecated: { bg: '#fef2f2', color: '#9e0a0a', text: '已弃用' },
+  draft: { bg: '#f8fafc', color: '#475569', text: '草稿' },
+  published: { bg: '#ecfdf5', color: '#059669', text: '已发布' },
+  deprecated: { bg: '#fef2f2', color: '#dc2626', text: '已弃用' },
 };
 
 export default function ProcessDefinitions() {
@@ -92,9 +92,9 @@ export default function ProcessDefinitions() {
       key: 'key',
       render: (v: string) => (
         <Tag style={{
-          background: isDark ? '#1E293B' : '#f6f6f3',
+          background: isDark ? '#1E293B' : '#f8fafc',
           border: 'none',
-          color: isDark ? '#91918c' : '#62625b',
+          color: isDark ? '#94a3b8' : '#475569',
           fontFamily: 'monospace',
           fontSize: 12,
         }}>
@@ -110,7 +110,7 @@ export default function ProcessDefinitions() {
       key: 'status',
       width: 100,
       render: (s: string) => {
-        const info = statusColors[s] || { bg: '#f6f6f3', color: '#62625b', text: s };
+        const info = statusColors[s] || { bg: '#f8fafc', color: '#475569', 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 ? '#62625b' : '#91918c' }}>
+        <span style={{ fontSize: 13, color: isDark ? '#475569' : '#94a3b8' }}>
           共 {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' : '#f6f6f3'}`,
+        border: `1px solid ${isDark ? '#1E293B' : '#f8fafc'}`,
         overflow: 'hidden',
       }}>
         <Table