iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 采用 Notion 设计系统 — 暖色调 + 白色侧边栏 + Inter 字体

Browse Source 
引入 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
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/web/src/pages/Home.tsx
View File

@@ -167,7 +167,7 @@ export default function Home() {
title: '用户总数',
value: stats.userCount,
icon: <UserOutlined />,
gradient: 'linear-gradient(135deg, #4F46E5, #6366F1)',
gradient: 'linear-gradient(135deg, #0075de, #62aef0)',
iconBg: 'rgba(79, 70, 229, 0.12)',
delay: 'erp-fade-in erp-fade-in-delay-1',
trend: { value: '+2', direction: 'up', label: '较上周' },
@@ -179,7 +179,7 @@ export default function Home() {
title: '角色数量',
value: stats.roleCount,
icon: <SafetyCertificateOutlined />,
gradient: 'linear-gradient(135deg, #059669, #10B981)',
gradient: 'linear-gradient(135deg, #1aae39, #10B981)',
iconBg: 'rgba(5, 150, 105, 0.12)',
delay: 'erp-fade-in erp-fade-in-delay-2',
trend: { value: '+1', direction: 'up', label: '较上月' },
@@ -191,7 +191,7 @@ export default function Home() {
title: '流程实例',
value: stats.processInstanceCount,
icon: <FileTextOutlined />,
gradient: 'linear-gradient(135deg, #D97706, #F59E0B)',
gradient: 'linear-gradient(135deg, #dd5b00, #F59E0B)',
iconBg: 'rgba(217, 119, 6, 0.12)',
delay: 'erp-fade-in erp-fade-in-delay-3',
trend: { value: '0', direction: 'neutral', label: '较昨日' },
@@ -213,18 +213,18 @@ export default function Home() {
];
const quickActions = [
{ icon: <UserOutlined />, label: '用户管理', path: '/users', color: '#4F46E5' },
{ icon: <SafetyCertificateOutlined />, label: '权限管理', path: '/roles', color: '#059669' },
{ icon: <ApartmentOutlined />, label: '组织架构', path: '/organizations', color: '#D97706' },
{ icon: <UserOutlined />, label: '用户管理', path: '/users', color: '#0075de' },
{ icon: <SafetyCertificateOutlined />, label: '权限管理', path: '/roles', color: '#1aae39' },
{ icon: <ApartmentOutlined />, label: '组织架构', path: '/organizations', color: '#dd5b00' },
{ icon: <PartitionOutlined />, label: '工作流', path: '/workflow', color: '#7C3AED' },
{ icon: <BellOutlined />, label: '消息中心', path: '/messages', color: '#E11D48' },
{ icon: <SettingOutlined />, label: '系统设置', path: '/settings', color: '#64748B' },
{ icon: <SettingOutlined />, label: '系统设置', path: '/settings', color: '#615d59' },
];
const pendingTasks: TaskItem[] = [
{ id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#DC2626', icon: <UserOutlined />, path: '/users' },
{ id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#D97706', icon: <PartitionOutlined />, path: '/workflow' },
{ id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#059669', icon: <SafetyCertificateOutlined />, path: '/roles' },
{ id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#e5534b', icon: <UserOutlined />, path: '/users' },
{ id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#dd5b00', icon: <PartitionOutlined />, path: '/workflow' },
{ id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#1aae39', icon: <SafetyCertificateOutlined />, path: '/roles' },
];
const recentActivities: ActivityItem[] = [
@@ -243,13 +243,13 @@ export default function Home() {
<h2 style={{
fontSize: 24,
fontWeight: 700,
color: isDark ? '#F1F5F9' : '#0F172A',
color: isDark ? '#f6f5f4' : 'rgba(0,0,0,0.95)',
margin: '0 0 4px',
letterSpacing: '-0.5px',
}}>
工作台
</h2>
<p style={{ fontSize: 14, color: isDark ? '#94A3B8' : '#475569', margin: 0 }}>
<p style={{ fontSize: 14, color: isDark ? '#a39e98' : '#615d59', margin: 0 }}>
欢迎回来，这是您的系统概览
</p>
</div>
@@ -313,7 +313,7 @@ export default function Home() {
<span style={{
marginLeft: 'auto',
fontSize: 12,
color: isDark ? '#94A3B8' : '#64748B',
color: isDark ? '#a39e98' : '#615d59',
}}>
{pendingTasks.length} 项待处理
</span>
@@ -340,7 +340,7 @@ export default function Home() {
<span className={`erp-task-priority erp-task-priority-${task.priority}`}>
{priorityLabel[task.priority]}
</span>
<RightOutlined style={{ color: isDark ? '#475569' : '#CBD5E1', fontSize: 12 }} />
<RightOutlined style={{ color: isDark ? '#615d59' : '#CBD5E1', fontSize: 12 }} />
</div>
))}
</div>
@@ -351,7 +351,7 @@ export default function Home() {
<Col xs={24} lg={10}>
<div className="erp-content-card erp-fade-in erp-fade-in-delay-3" style={{ height: '100%' }}>
<div className="erp-section-header">
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#6366F1' }} />
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#62aef0' }} />
<span className="erp-section-title">最近动态</span>
</div>
<div className="erp-activity-list">
@@ -400,7 +400,7 @@ export default function Home() {
<Col xs={24} lg={8}>
<div className="erp-content-card erp-fade-in erp-fade-in-delay-4" style={{ height: '100%' }}>
<div className="erp-section-header">
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#6366F1' }} />
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#62aef0' }} />
<span className="erp-section-title">系统信息</span>
</div>
<div className="erp-system-info-list">

10
apps/web/src/pages/Login.tsx
View File

@@ -30,7 +30,7 @@ export default function Login() {
<div
style={{
flex: 1,
background: 'linear-gradient(135deg, #312E81 0%, #4F46E5 50%, #6366F1 100%)',
background: 'linear-gradient(135deg, #312E81 0%, #0075de 50%, #62aef0 100%)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
@@ -151,7 +151,7 @@ export default function Login() {
<h2 style={{ marginBottom: 4, fontWeight: 700, fontSize: 24 }}>
欢迎回来
</h2>
<p style={{ fontSize: 14, color: '#64748B' }}>
<p style={{ fontSize: 14, color: '#615d59' }}>
请登录您的账户以继续
</p>
@@ -163,7 +163,7 @@ export default function Login() {
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input
prefix={<UserOutlined style={{ color: '#94A3B8' }} />}
prefix={<UserOutlined style={{ color: '#a39e98' }} />}
placeholder="用户名"
style={{ height: 44, borderRadius: 10 }}
/>
@@ -173,7 +173,7 @@ export default function Login() {
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password
prefix={<LockOutlined style={{ color: '#94A3B8' }} />}
prefix={<LockOutlined style={{ color: '#a39e98' }} />}
placeholder="密码"
style={{ height: 44, borderRadius: 10 }}
/>
@@ -197,7 +197,7 @@ export default function Login() {
</Form>
<div style={{ marginTop: 32, textAlign: 'center' }}>
<p style={{ fontSize: 12, color: '#64748B', margin: 0 }}>
<p style={{ fontSize: 12, color: '#615d59', margin: 0 }}>
ERP Platform v0.1.0 · Powered by Rust + React
</p>
</div>

18
apps/web/src/pages/Organizations.tsx
View File

@@ -44,7 +44,7 @@ export default function Organizations() {
const cardStyle = {
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
};
// --- Org tree state ---
@@ -264,9 +264,9 @@ export default function Organizations() {
{item.name}{' '}
{item.code && <Tag style={{
marginLeft: 4,
background: isDark ? '#1E293B' : '#EEF2FF',
background: isDark ? '#1e1e1d' : '#f2f9ff',
border: 'none',
color: '#4F46E5',
color: '#0075de',
fontSize: 11,
}}>{item.code}</Tag>}
</span>
@@ -282,9 +282,9 @@ export default function Organizations() {
{item.name}{' '}
{item.code && <Tag style={{
marginLeft: 4,
background: isDark ? '#1E293B' : '#ECFDF5',
background: isDark ? '#1e1e1d' : '#ECFDF5',
border: 'none',
color: '#059669',
color: '#1aae39',
fontSize: 11,
}}>{item.code}</Tag>}
</span>
@@ -343,7 +343,7 @@ export default function Organizations() {
<div className="erp-page-header">
<div>
<h4>
<ApartmentOutlined style={{ marginRight: 8, color: '#4F46E5' }} />
<ApartmentOutlined style={{ marginRight: 8, color: '#0075de' }} />
组织架构管理
</h4>
<div className="erp-page-subtitle">管理组织、部门和岗位的层级结构</div>
@@ -356,7 +356,7 @@ export default function Organizations() {
<div style={{ width: 300, flexShrink: 0, ...cardStyle, overflow: 'hidden' }}>
<div style={{
padding: '14px 20px',
borderBottom: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
borderBottom: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@@ -418,7 +418,7 @@ export default function Organizations() {
<div style={{ width: 300, flexShrink: 0, ...cardStyle, overflow: 'hidden' }}>
<div style={{
padding: '14px 20px',
borderBottom: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
borderBottom: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@@ -471,7 +471,7 @@ export default function Organizations() {
<div style={{ flex: 1, ...cardStyle, overflow: 'hidden' }}>
<div style={{
padding: '14px 20px',
borderBottom: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
borderBottom: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',

10
apps/web/src/pages/PluginAdmin.tsx
View File

@@ -41,11 +41,11 @@ import {
import PluginSettingsForm from '../components/PluginSettingsForm';
const STATUS_CONFIG: Record<PluginStatus, { color: string; label: string }> = {
uploaded: { color: '#64748B', label: '已上传' },
uploaded: { color: '#615d59', label: '已上传' },
installed: { color: '#2563EB', label: '已安装' },
enabled: { color: '#059669', label: '已启用' },
running: { color: '#059669', label: '运行中' },
disabled: { color: '#DC2626', label: '已禁用' },
enabled: { color: '#1aae39', label: '已启用' },
running: { color: '#1aae39', label: '运行中' },
disabled: { color: '#e5534b', label: '已禁用' },
uninstalled: { color: '#9333EA', label: '已卸载' },
};
@@ -215,7 +215,7 @@ export default function PluginAdmin() {
key: 'status',
width: 100,
render: (status: PluginStatus) => {
const cfg = STATUS_CONFIG[status] || { color: '#64748B', label: status };
const cfg = STATUS_CONFIG[status] || { color: '#615d59', label: status };
return <Tag color={cfg.color}>{cfg.label}</Tag>;
},
},

8
apps/web/src/pages/PluginDashboardPage.tsx
View File

@@ -299,7 +299,7 @@ export function PluginDashboardPage() {
style={{
fontSize: 24,
fontWeight: 700,
color: isDark ? '#F1F5F9' : '#0F172A',
color: isDark ? '#f6f5f4' : 'rgba(0,0,0,0.95)',
margin: '0 0 4px',
letterSpacing: '-0.5px',
}}
@@ -309,7 +309,7 @@ export function PluginDashboardPage() {
<p
style={{
fontSize: 14,
color: isDark ? '#94A3B8' : '#475569',
color: isDark ? '#a39e98' : '#615d59',
margin: 0,
}}
>
@@ -352,7 +352,7 @@ export function PluginDashboardPage() {
<div className="erp-section-header">
<DashboardOutlined
className="erp-section-icon"
style={{ color: '#4F46E5' }}
style={{ color: '#0075de' }}
/>
<span className="erp-section-title">图表分析</span>
</div>
@@ -389,7 +389,7 @@ export function PluginDashboardPage() {
<div className="erp-section-header">
<DashboardOutlined
className="erp-section-icon"
style={{ color: currentPalette.tagColor === 'purple' ? '#4F46E5' : '#3B82F6' }}
style={{ color: currentPalette.tagColor === 'purple' ? '#0075de' : '#3B82F6' }}
/>
<span className="erp-section-title">
{currentEntity?.display_name || selectedEntity} 数据分布

4
apps/web/src/pages/PluginGraphPage.tsx
View File

@@ -313,8 +313,8 @@ export function PluginGraphPage() {
const r = degreeToRadius(degree, isCenter);
// Determine node color from its most common edge type, or default palette
let nodeColorBase = '#4F46E5';
let nodeColorLight = '#818CF8';
let nodeColorBase = '#0075de';
let nodeColorLight = '#62aef0';
let nodeColorGlow = 'rgba(79,70,229,0.3)';
if (isCenter) {

12
apps/web/src/pages/PluginMarket.tsx
View File

@@ -37,12 +37,12 @@ import {
const { Title, Text, Paragraph } = Typography;
const CATEGORY_COLORS: Record<string, string> = {
'财务': '#059669',
'财务': '#1aae39',
'CRM': '#2563EB',
'进销存': '#9333EA',
'生产': '#DC2626',
'人力资源': '#D97706',
'基础': '#64748B',
'生产': '#e5534b',
'人力资源': '#dd5b00',
'基础': '#615d59',
};
export default function PluginMarket() {
@@ -190,7 +190,7 @@ export default function PluginMarket() {
<div style={{ marginBottom: 8 }}>
<Text strong style={{ fontSize: 16 }}>{plugin.name}</Text>
<Tag
color={CATEGORY_COLORS[plugin.category ?? ''] ?? '#64748B'}
color={CATEGORY_COLORS[plugin.category ?? ''] ?? '#615d59'}
style={{ marginLeft: 8 }}
>
{plugin.category}
@@ -244,7 +244,7 @@ export default function PluginMarket() {
<div>
<div style={{ marginBottom: 16 }}>
<Space>
<Tag color={CATEGORY_COLORS[selectedPlugin.category ?? ''] ?? '#64748B'}>
<Tag color={CATEGORY_COLORS[selectedPlugin.category ?? ''] ?? '#615d59'}>
{selectedPlugin.category}
</Tag>
<Text type="secondary">v{selectedPlugin.version}</Text>

26
apps/web/src/pages/Roles.tsx
View File

@@ -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={{

38
apps/web/src/pages/Users.tsx
View File

@@ -35,9 +35,9 @@ import { listRoles, type RoleInfo } from '../api/roles';
import type { UserInfo } from '../api/auth';
const STATUS_COLOR_MAP: Record<string, string> = {
active: '#059669',
disabled: '#DC2626',
locked: '#D97706',
active: '#1aae39',
disabled: '#e5534b',
locked: '#dd5b00',
};
const STATUS_BG_MAP: Record<string, string> = {
@@ -219,7 +219,7 @@ export default function Users() {
width: 32,
height: 32,
borderRadius: 8,
background: 'linear-gradient(135deg, #4F46E5, #818CF8)',
background: 'linear-gradient(135deg, #0075de, #62aef0)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -233,7 +233,7 @@ export default function Users() {
<div>
<div style={{ fontWeight: 500, fontSize: 14 }}>{v}</div>
{record.display_name && (
<div style={{ fontSize: 12, color: isDark ? '#64748B' : '#94A3B8' }}>
<div style={{ fontSize: 12, color: isDark ? '#615d59' : '#a39e98' }}>
{record.display_name}
</div>
)}
@@ -261,8 +261,8 @@ export default function Users() {
render: (status: string) => (
<Tag
style={{
color: STATUS_COLOR_MAP[status] || '#64748B',
background: STATUS_BG_MAP[status] || '#F1F5F9',
color: STATUS_COLOR_MAP[status] || '#615d59',
background: STATUS_BG_MAP[status] || '#f6f5f4',
border: 'none',
fontWeight: 500,
}}
@@ -279,14 +279,14 @@ export default function Users() {
roles.length > 0
? roles.map((r) => (
<Tag key={r.id} style={{
background: isDark ? '#1E293B' : '#F1F5F9',
background: isDark ? '#1e1e1d' : '#f6f5f4',
border: 'none',
color: isDark ? '#CBD5E1' : '#475569',
color: isDark ? '#CBD5E1' : '#615d59',
}}>
{r.name}
</Tag>
))
: <span style={{ color: isDark ? '#475569' : '#CBD5E1' }}>-</span>,
: <span style={{ color: isDark ? '#615d59' : '#CBD5E1' }}>-</span>,
},
{
title: '操作',
@@ -299,14 +299,14 @@ export default function Users() {
type="text"
icon={<EditOutlined />}
onClick={() => openEditModal(record)}
style={{ color: isDark ? '#94A3B8' : '#64748B' }}
style={{ color: isDark ? '#a39e98' : '#615d59' }}
/>
<Button
size="small"
type="text"
icon={<SafetyCertificateOutlined />}
onClick={() => openRoleModal(record)}
style={{ color: isDark ? '#94A3B8' : '#64748B' }}
style={{ color: isDark ? '#a39e98' : '#615d59' }}
/>
{record.status === 'active' ? (
<Popconfirm
@@ -326,7 +326,7 @@ export default function Users() {
type="text"
icon={<CheckCircleOutlined />}
onClick={() => handleToggleStatus(record.id, 'active')}
style={{ color: '#059669' }}
style={{ color: '#1aae39' }}
/>
)}
<Popconfirm
@@ -356,7 +356,7 @@ export default function Users() {
<Space size={8}>
<Input
placeholder="搜索用户名..."
prefix={<SearchOutlined style={{ color: '#94A3B8' }} />}
prefix={<SearchOutlined style={{ color: '#a39e98' }} />}
value={searchText}
onChange={(e) => {
setSearchText(e.target.value);
@@ -379,7 +379,7 @@ export default function Users() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table
@@ -415,7 +415,7 @@ export default function Users() {
label="用户名"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input prefix={<UserOutlined style={{ color: '#94A3B8' }} />} disabled={!!editUser} />
<Input prefix={<UserOutlined style={{ color: '#a39e98' }} />} disabled={!!editUser} />
</Form.Item>
{!editUser && (
<Form.Item
@@ -465,13 +465,13 @@ export default function Users() {
style={{
padding: '10px 14px',
borderRadius: 8,
border: `1px solid ${isDark ? '#1E293B' : '#E2E8F0'}`,
background: isDark ? '#0B0F1A' : '#F8FAFC',
border: `1px solid ${isDark ? '#1e1e1d' : '#E2E8F0'}`,
background: isDark ? '#0B0F1A' : '#fafaf9',
}}
>
<Checkbox value={r.id}>
<span style={{ fontWeight: 500 }}>{r.name}</span>
<span style={{ color: isDark ? '#475569' : '#94A3B8', marginLeft: 8, fontSize: 12 }}>
<span style={{ color: isDark ? '#615d59' : '#a39e98', marginLeft: 8, fontSize: 12 }}>
{r.code}
</span>
</Checkbox>

14
apps/web/src/pages/dashboard/DashboardWidgets.tsx
View File

@@ -46,7 +46,7 @@ function prepareChartData(data: WidgetData['data'], dimensionOrder?: string[]) {
const TAG_COLOR_MAP: Record<string, string> = {
blue: '#3B82F6', green: '#10B981', orange: '#F59E0B', red: '#EF4444',
purple: '#8B5CF6', cyan: '#06B6D4', magenta: '#EC4899', gold: '#EAB308',
lime: '#84CC16', geekblue: '#6366F1', volcano: '#F97316',
lime: '#84CC16', geekblue: '#62aef0', volcano: '#F97316',
};
function tagStrokeColor(color: string): string {
@@ -204,7 +204,7 @@ export function SkeletonBreakdownCard({ index }: { index: number }) {
function StatWidgetCard({ widgetData }: { widgetData: WidgetData }) {
const { widget, count } = widgetData;
const animatedValue = useCountUp(count ?? 0);
const color = widget.color || '#4F46E5';
const color = widget.color || '#0075de';
return (
<Card size="small" className="erp-fade-in" style={{ height: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
@@ -229,7 +229,7 @@ function StatWidgetCard({ widgetData }: { widgetData: WidgetData }) {
function BarWidgetCard({ widgetData, isDark }: { widgetData: WidgetData; isDark: boolean }) {
const { widget, data } = widgetData;
const chartData = prepareChartData(data, widget.dimension_order);
const axisLabelStyle = { fill: isDark ? '#94A3B8' : '#475569' };
const axisLabelStyle = { fill: isDark ? '#a39e98' : '#615d59' };
return (
<WidgetCardShell title={widget.title} widgetType={widget.type}>
{chartData.length > 0 ? (
@@ -275,7 +275,7 @@ function FunnelWidgetCard({ widgetData }: { widgetData: WidgetData }) {
function LineWidgetCard({ widgetData, isDark }: { widgetData: WidgetData; isDark: boolean }) {
const { widget, data } = widgetData;
const chartData = prepareChartData(data, widget.dimension_order);
const axisLabelStyle = { fill: isDark ? '#94A3B8' : '#475569' };
const axisLabelStyle = { fill: isDark ? '#a39e98' : '#615d59' };
return (
<WidgetCardShell title={widget.title} widgetType={widget.type}>
{chartData.length > 0 ? (
@@ -315,7 +315,7 @@ function StatCardsWidget({ widgetData }: { widgetData: WidgetData }) {
{statCards.map((sc, i) => (
<Col xs={12} sm={6} key={`${sc.card.entity}-${sc.card.label}-${i}`}>
<div style={{
background: `${sc.card.color || '#4F46E5'}10`,
background: `${sc.card.color || '#0075de'}10`,
borderRadius: 8,
padding: '12px 16px',
display: 'flex',
@@ -324,9 +324,9 @@ function StatCardsWidget({ widgetData }: { widgetData: WidgetData }) {
}}>
<div style={{
width: 36, height: 36, borderRadius: 8,
background: `${sc.card.color || '#4F46E5'}20`,
background: `${sc.card.color || '#0075de'}20`,
display: 'flex', alignItems: 'center', justifyContent: 'center',
color: sc.card.color || '#4F46E5', fontSize: 18,
color: sc.card.color || '#0075de', fontSize: 18,
}}>
<DashboardOutlined />
</div>

6
apps/web/src/pages/dashboard/dashboardConstants.tsx
View File

@@ -19,9 +19,9 @@ import {
// ── 通用调色板 ──
const UNIVERSAL_COLORS = [
{ gradient: 'linear-gradient(135deg, #4F46E5, #6366F1)', iconBg: 'rgba(79, 70, 229, 0.12)', tagColor: 'purple' },
{ gradient: 'linear-gradient(135deg, #059669, #10B981)', iconBg: 'rgba(5, 150, 105, 0.12)', tagColor: 'green' },
{ gradient: 'linear-gradient(135deg, #D97706, #F59E0B)', iconBg: 'rgba(217, 119, 6, 0.12)', tagColor: 'orange' },
{ gradient: 'linear-gradient(135deg, #0075de, #62aef0)', iconBg: 'rgba(79, 70, 229, 0.12)', tagColor: 'purple' },
{ gradient: 'linear-gradient(135deg, #1aae39, #10B981)', iconBg: 'rgba(5, 150, 105, 0.12)', tagColor: 'green' },
{ gradient: 'linear-gradient(135deg, #dd5b00, #F59E0B)', iconBg: 'rgba(217, 119, 6, 0.12)', tagColor: 'orange' },
{ gradient: 'linear-gradient(135deg, #7C3AED, #A78BFA)', iconBg: 'rgba(124, 58, 237, 0.12)', tagColor: 'volcano' },
{ gradient: 'linear-gradient(135deg, #E11D48, #F43F5E)', iconBg: 'rgba(225, 29, 72, 0.12)', tagColor: 'red' },
{ gradient: 'linear-gradient(135deg, #0891B2, #06B6D4)', iconBg: 'rgba(8, 145, 178, 0.12)', tagColor: 'cyan' },

8
apps/web/src/pages/graph/graphRenderer.ts
View File

@@ -11,11 +11,11 @@ import type { GraphEdge } from './graphTypes';
/** 关系类型对应的色板 (base / light / glow) — 通用调色板自动分配 */
const EDGE_PALETTE: Array<{ base: string; light: string; glow: string }> = [
{ base: '#4F46E5', light: '#818CF8', glow: 'rgba(79,70,229,0.3)' },
{ base: '#059669', light: '#34D399', glow: 'rgba(5,150,105,0.3)' },
{ base: '#D97706', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' },
{ base: '#0075de', light: '#62aef0', glow: 'rgba(79,70,229,0.3)' },
{ base: '#1aae39', light: '#34D399', glow: 'rgba(5,150,105,0.3)' },
{ base: '#dd5b00', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' },
{ base: '#0891B2', light: '#22D3EE', glow: 'rgba(8,145,178,0.3)' },
{ base: '#DC2626', light: '#F87171', glow: 'rgba(220,38,38,0.3)' },
{ base: '#e5534b', light: '#F87171', glow: 'rgba(220,38,38,0.3)' },
{ base: '#7C3AED', light: '#A78BFA', glow: 'rgba(124,58,237,0.3)' },
{ base: '#EA580C', light: '#FB923C', glow: 'rgba(234,88,12,0.3)' },
{ base: '#DB2777', light: '#F472B6', glow: 'rgba(219,39,119,0.3)' },

18
apps/web/src/pages/messages/MessageTemplates.tsx
View File

@@ -5,9 +5,9 @@ import type { ColumnsType } from 'antd/es/table';
import { listTemplates, createTemplate, type MessageTemplateInfo } from '../../api/messageTemplates';
const channelMap: Record<string, { label: string; color: string }> = {
in_app: { label: '站内', color: '#4F46E5' },
email: { label: '邮件', color: '#059669' },
sms: { label: '短信', color: '#D97706' },
in_app: { label: '站内', color: '#0075de' },
email: { label: '邮件', color: '#1aae39' },
sms: { label: '短信', color: '#dd5b00' },
wechat: { label: '微信', color: '#7C3AED' },
};
@@ -64,9 +64,9 @@ export default function MessageTemplates() {
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,
}}>
@@ -80,7 +80,7 @@ export default function MessageTemplates() {
key: 'channel',
width: 90,
render: (c: string) => {
const info = channelMap[c] || { label: c, color: '#64748B' };
const info = channelMap[c] || { label: c, color: '#615d59' };
return (
<Tag style={{
background: info.color + '15',
@@ -111,7 +111,7 @@ export default function MessageTemplates() {
key: 'created_at',
width: 180,
render: (v: string) => (
<span style={{ color: isDark ? '#64748B' : '#94A3B8', fontSize: 13 }}>{v}</span>
<span style={{ color: isDark ? '#615d59' : '#a39e98', fontSize: 13 }}>{v}</span>
),
},
];
@@ -124,7 +124,7 @@ export default function MessageTemplates() {
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={() => setModalOpen(true)}>
@@ -135,7 +135,7 @@ export default function MessageTemplates() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

30
apps/web/src/pages/messages/NotificationList.tsx
View File

@@ -11,9 +11,9 @@ interface Props {
}
const priorityStyles: Record<string, { bg: string; color: string; text: string }> = {
urgent: { bg: '#FEF2F2', color: '#DC2626', text: '紧急' },
important: { bg: '#FFFBEB', color: '#D97706', text: '重要' },
normal: { bg: '#EEF2FF', color: '#4F46E5', text: '普通' },
urgent: { bg: '#FEF2F2', color: '#e5534b', text: '紧急' },
important: { bg: '#FFFBEB', color: '#dd5b00', text: '重要' },
normal: { bg: '#f2f9ff', color: '#0075de', text: '普通' },
};
export default function NotificationList({ queryFilter }: Props) {
@@ -83,7 +83,7 @@ export default function NotificationList({ queryFilter }: Props) {
content: (
<div>
<Paragraph>{record.body}</Paragraph>
<div style={{ marginTop: 8, color: isDark ? '#475569' : '#94A3B8', fontSize: 12 }}>
<div style={{ marginTop: 8, color: isDark ? '#615d59' : '#a39e98', fontSize: 12 }}>
{record.created_at}
</div>
</div>
@@ -104,7 +104,7 @@ export default function NotificationList({ queryFilter }: Props) {
style={{
fontWeight: record.is_read ? 400 : 600,
cursor: 'pointer',
color: record.is_read ? (isDark ? '#94A3B8' : '#64748B') : 'inherit',
color: record.is_read ? (isDark ? '#a39e98' : '#615d59') : 'inherit',
}}
onClick={() => showDetail(record)}
>
@@ -114,7 +114,7 @@ export default function NotificationList({ queryFilter }: Props) {
width: 6,
height: 6,
borderRadius: '50%',
background: '#4F46E5',
background: '#0075de',
marginRight: 8,
}} />
)}
@@ -128,7 +128,7 @@ export default function NotificationList({ queryFilter }: Props) {
key: 'priority',
width: 90,
render: (p: string) => {
const info = priorityStyles[p] || { bg: '#F1F5F9', color: '#64748B', text: p };
const info = priorityStyles[p] || { bg: '#f6f5f4', color: '#615d59', text: p };
return (
<Tag style={{
background: info.bg,
@@ -146,7 +146,7 @@ export default function NotificationList({ queryFilter }: Props) {
dataIndex: 'sender_type',
key: 'sender_type',
width: 80,
render: (s: string) => <span style={{ color: isDark ? '#64748B' : '#94A3B8' }}>{s === 'system' ? '系统' : '用户'}</span>,
render: (s: string) => <span style={{ color: isDark ? '#615d59' : '#a39e98' }}>{s === 'system' ? '系统' : '用户'}</span>,
},
{
title: '状态',
@@ -155,9 +155,9 @@ export default function NotificationList({ queryFilter }: Props) {
width: 80,
render: (r: boolean) => (
<Tag style={{
background: r ? (isDark ? '#1E293B' : '#F1F5F9') : '#EEF2FF',
background: r ? (isDark ? '#1e1e1d' : '#f6f5f4') : '#f2f9ff',
border: 'none',
color: r ? (isDark ? '#64748B' : '#94A3B8') : '#4F46E5',
color: r ? (isDark ? '#615d59' : '#a39e98') : '#0075de',
fontWeight: 500,
}}>
{r ? '已读' : '未读'}
@@ -170,7 +170,7 @@ export default function NotificationList({ queryFilter }: Props) {
key: 'created_at',
width: 180,
render: (v: string) => (
<span style={{ color: isDark ? '#64748B' : '#94A3B8', fontSize: 13 }}>{v}</span>
<span style={{ color: isDark ? '#615d59' : '#a39e98', fontSize: 13 }}>{v}</span>
),
},
{
@@ -185,7 +185,7 @@ export default function NotificationList({ queryFilter }: Props) {
size="small"
icon={<CheckOutlined />}
onClick={() => handleMarkRead(record.id)}
style={{ color: '#4F46E5' }}
style={{ color: '#0075de' }}
/>
)}
<Button
@@ -193,7 +193,7 @@ export default function NotificationList({ queryFilter }: Props) {
size="small"
icon={<EyeOutlined />}
onClick={() => showDetail(record)}
style={{ color: isDark ? '#64748B' : '#94A3B8' }}
style={{ color: isDark ? '#615d59' : '#a39e98' }}
/>
<Button
type="text"
@@ -215,7 +215,7 @@ export default function NotificationList({ queryFilter }: Props) {
alignItems: 'center',
marginBottom: 16,
}}>
<span style={{ fontSize: 13, color: isDark ? '#64748B' : '#94A3B8' }}>
<span style={{ fontSize: 13, color: isDark ? '#615d59' : '#a39e98' }}>
共 {total} 条消息
</span>
<Button icon={<CheckOutlined />} onClick={handleMarkAllRead}>
@@ -226,7 +226,7 @@ export default function NotificationList({ queryFilter }: Props) {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

4
apps/web/src/pages/messages/NotificationPreferences.tsx
View File

@@ -48,12 +48,12 @@ export default function NotificationPreferences() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
padding: 24,
maxWidth: 600,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
<BellOutlined style={{ fontSize: 16, color: '#4F46E5' }} />
<BellOutlined style={{ fontSize: 16, color: '#0075de' }} />
<span style={{ fontSize: 15, fontWeight: 600 }}>通知偏好设置</span>
</div>

8
apps/web/src/pages/plugins/graph/graphConstants.ts
View File

@@ -5,11 +5,11 @@
// 通用边调色板
const EDGE_PALETTE: Array<{ base: string; light: string; glow: string }> = [
{ base: '#4F46E5', light: '#818CF8', glow: 'rgba(79,70,229,0.3)' },
{ base: '#059669', light: '#34D399', glow: 'rgba(5,150,105,0.3)' },
{ base: '#D97706', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' },
{ base: '#0075de', light: '#62aef0', glow: 'rgba(79,70,229,0.3)' },
{ base: '#1aae39', light: '#34D399', glow: 'rgba(5,150,105,0.3)' },
{ base: '#dd5b00', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' },
{ base: '#0891B2', light: '#22D3EE', glow: 'rgba(8,145,178,0.3)' },
{ base: '#DC2626', light: '#F87171', glow: 'rgba(220,38,38,0.3)' },
{ base: '#e5534b', light: '#F87171', glow: 'rgba(220,38,38,0.3)' },
{ base: '#7C3AED', light: '#A78BFA', glow: 'rgba(124,58,237,0.3)' },
{ base: '#EA580C', light: '#FB923C', glow: 'rgba(234,88,12,0.3)' },
{ base: '#DB2777', light: '#F472B6', glow: 'rgba(219,39,119,0.3)' },

4
apps/web/src/pages/plugins/graph/graphRenderer.ts
View File

@@ -295,8 +295,8 @@ export function drawFullGraph(
const degree = degreeMap.get(node.id) || 0;
const r = degreeToRadius(degree, isCenter);
let nodeColorBase = '#4F46E5';
let nodeColorLight = '#818CF8';
let nodeColorBase = '#0075de';
let nodeColorLight = '#62aef0';
let nodeColorGlow = 'rgba(79,70,229,0.3)';
if (isCenter) {

24
apps/web/src/pages/settings/AuditLogViewer.tsx
View File

@@ -17,9 +17,9 @@ const RESOURCE_TYPE_OPTIONS = [
];
const ACTION_STYLES: Record<string, { bg: string; color: string; text: string }> = {
create: { bg: '#ECFDF5', color: '#059669', text: '创建' },
update: { bg: '#EEF2FF', color: '#4F46E5', text: '更新' },
delete: { bg: '#FEF2F2', color: '#DC2626', text: '删除' },
create: { bg: '#ECFDF5', color: '#1aae39', text: '创建' },
update: { bg: '#f2f9ff', color: '#0075de', text: '更新' },
delete: { bg: '#FEF2F2', color: '#e5534b', text: '删除' },
};
function formatDateTime(value: string): string {
@@ -80,7 +80,7 @@ export default function AuditLogViewer() {
key: 'action',
width: 100,
render: (action: string) => {
const info = ACTION_STYLES[action] || { bg: '#F1F5F9', color: '#64748B', text: action };
const info = ACTION_STYLES[action] || { bg: '#f6f5f4', color: '#615d59', text: action };
return (
<Tag style={{
background: info.bg,
@@ -100,9 +100,9 @@ export default function AuditLogViewer() {
width: 120,
render: (v: string) => (
<Tag style={{
background: isDark ? '#1E293B' : '#F1F5F9',
background: isDark ? '#1e1e1d' : '#f6f5f4',
border: 'none',
color: isDark ? '#CBD5E1' : '#475569',
color: isDark ? '#CBD5E1' : '#615d59',
}}>
{v}
</Tag>
@@ -115,7 +115,7 @@ export default function AuditLogViewer() {
width: 200,
ellipsis: true,
render: (v: string) => (
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#94A3B8' : '#64748B' }}>
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#a39e98' : '#615d59' }}>
{v}
</span>
),
@@ -127,7 +127,7 @@ export default function AuditLogViewer() {
width: 200,
ellipsis: true,
render: (v: string) => (
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#94A3B8' : '#64748B' }}>
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#a39e98' : '#615d59' }}>
{v}
</span>
),
@@ -138,7 +138,7 @@ export default function AuditLogViewer() {
key: 'created_at',
width: 180,
render: (value: string) => (
<span style={{ color: isDark ? '#64748B' : '#94A3B8', fontSize: 13 }}>
<span style={{ color: isDark ? '#615d59' : '#a39e98', fontSize: 13 }}>
{formatDateTime(value)}
</span>
),
@@ -156,7 +156,7 @@ export default function AuditLogViewer() {
padding: 12,
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 10,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
}}>
<Select
allowClear
@@ -173,7 +173,7 @@ export default function AuditLogViewer() {
value={query.user_id ?? ''}
onChange={(e) => handleFilterChange('user_id', e.target.value)}
/>
<span style={{ fontSize: 13, color: isDark ? '#64748B' : '#94A3B8', marginLeft: 'auto' }}>
<span style={{ fontSize: 13, color: isDark ? '#615d59' : '#a39e98', marginLeft: 'auto' }}>
共 {total} 条日志
</span>
</div>
@@ -182,7 +182,7 @@ export default function AuditLogViewer() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

10
apps/web/src/pages/settings/SystemSettings.tsx
View File

@@ -132,9 +132,9 @@ export default function SystemSettings() {
width: 250,
render: (v: string) => (
<Tag style={{
background: isDark ? '#1E293B' : '#F1F5F9',
background: isDark ? '#1e1e1d' : '#f6f5f4',
border: 'none',
color: isDark ? '#CBD5E1' : '#475569',
color: isDark ? '#CBD5E1' : '#615d59',
fontFamily: 'monospace',
fontSize: 12,
}}>
@@ -162,7 +162,7 @@ export default function SystemSettings() {
type="text"
icon={<EditOutlined />}
onClick={() => openEdit(record)}
style={{ color: isDark ? '#94A3B8' : '#64748B' }}
style={{ color: isDark ? '#a39e98' : '#615d59' }}
/>
<Popconfirm
title="确定删除此设置？"
@@ -191,7 +191,7 @@ export default function SystemSettings() {
<Space>
<Input
placeholder="输入设置键名查询"
prefix={<SearchOutlined style={{ color: '#94A3B8' }} />}
prefix={<SearchOutlined style={{ color: '#a39e98' }} />}
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
onPressEnter={handleSearch}
@@ -207,7 +207,7 @@ export default function SystemSettings() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

12
apps/web/src/pages/workflow/CompletedTasks.tsx
View File

@@ -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: '#059669', text: '同意' },
rejected: { bg: '#FEF2F2', color: '#DC2626', text: '拒绝' },
delegated: { bg: '#EEF2FF', color: '#4F46E5', text: '已委派' },
approved: { bg: '#ECFDF5', color: '#1aae39', text: '同意' },
rejected: { bg: '#FEF2F2', color: '#e5534b', text: '拒绝' },
delegated: { bg: '#f2f9ff', color: '#0075de', 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: '#F1F5F9', color: '#64748B', text: o };
const info = outcomeStyles[o] || { bg: '#f6f5f4', color: '#615d59', 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 ? '#64748B' : '#94A3B8', fontSize: 13 }}>
<span style={{ color: isDark ? '#615d59' : '#a39e98', 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 ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

14
apps/web/src/pages/workflow/InstanceMonitor.tsx
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: '#EEF2FF', color: '#4F46E5', text: '运行中' },
suspended: { bg: '#FFFBEB', color: '#D97706', text: '已挂起' },
completed: { bg: '#ECFDF5', color: '#059669', text: '已完成' },
terminated: { bg: '#FEF2F2', color: '#DC2626', text: '已终止' },
running: { bg: '#f2f9ff', color: '#0075de', text: '运行中' },
suspended: { bg: '#FFFBEB', color: '#dd5b00', text: '已挂起' },
completed: { bg: '#ECFDF5', color: '#1aae39', text: '已完成' },
terminated: { bg: '#FEF2F2', color: '#e5534b', 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: '#F1F5F9', color: '#64748B', text: s };
const info = statusStyles[s] || { bg: '#f6f5f4', color: '#615d59', 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 ? '#64748B' : '#94A3B8', fontSize: 13 }}>
<span style={{ color: isDark ? '#615d59' : '#a39e98', 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 ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

12
apps/web/src/pages/workflow/PendingTasks.tsx
View File

@@ -76,9 +76,9 @@ export default function PendingTasks() {
key: 'business_key',
render: (v: string | undefined) => v ? (
<Tag style={{
background: isDark ? '#1E293B' : '#F1F5F9',
background: isDark ? '#1e1e1d' : '#f6f5f4',
border: 'none',
color: isDark ? '#94A3B8' : '#64748B',
color: isDark ? '#a39e98' : '#615d59',
fontFamily: 'monospace',
fontSize: 12,
}}>
@@ -93,9 +93,9 @@ export default function PendingTasks() {
width: 100,
render: (s: string) => (
<Tag style={{
background: '#EEF2FF',
background: '#f2f9ff',
border: 'none',
color: '#4F46E5',
color: '#0075de',
fontWeight: 500,
}}>
{s}
@@ -108,7 +108,7 @@ export default function PendingTasks() {
key: 'created_at',
width: 180,
render: (v: string) => (
<span style={{ color: isDark ? '#64748B' : '#94A3B8', fontSize: 13 }}>
<span style={{ color: isDark ? '#615d59' : '#a39e98', 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 ? '#1E293B' : '#F1F5F9'}`,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
overflow: 'hidden',
}}>
<Table

16
apps/web/src/pages/workflow/ProcessDefinitions.tsx
View File

@@ -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