89fc482d99
从 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 个组件文件
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import type React from 'react';
|
|
import {
|
|
TeamOutlined,
|
|
PhoneOutlined,
|
|
TagsOutlined,
|
|
RiseOutlined,
|
|
DashboardOutlined,
|
|
BarChartOutlined,
|
|
PieChartOutlined,
|
|
LineChartOutlined,
|
|
FunnelPlotOutlined,
|
|
AppstoreOutlined,
|
|
UserOutlined,
|
|
ShoppingOutlined,
|
|
FileTextOutlined,
|
|
DatabaseOutlined,
|
|
} from '@ant-design/icons';
|
|
|
|
// ── 通用调色板 ──
|
|
|
|
const UNIVERSAL_COLORS = [
|
|
{ gradient: 'linear-gradient(135deg, #2563eb, #60a5fa)', 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, #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' },
|
|
{ gradient: 'linear-gradient(135deg, #EA580C, #F97316)', iconBg: 'rgba(234, 88, 12, 0.12)', tagColor: 'orange' },
|
|
{ gradient: 'linear-gradient(135deg, #DB2777, #EC4899)', iconBg: 'rgba(219, 39, 119, 0.12)', tagColor: 'magenta' },
|
|
];
|
|
|
|
export const DEFAULT_PALETTE = {
|
|
gradient: 'linear-gradient(135deg, #2563EB, #3B82F6)',
|
|
iconBg: 'rgba(37, 99, 235, 0.12)',
|
|
tagColor: 'blue',
|
|
};
|
|
|
|
export const TAG_COLORS = [
|
|
'blue', 'green', 'orange', 'red', 'purple', 'cyan',
|
|
'magenta', 'gold', 'lime', 'geekblue', 'volcano',
|
|
];
|
|
|
|
// ── 按实体顺序自动分配颜色 ──
|
|
|
|
const paletteCache = new Map<string, { gradient: string; iconBg: string; tagColor: string }>();
|
|
|
|
export function getEntityPalette(entityName: string, index: number) {
|
|
const cached = paletteCache.get(entityName);
|
|
if (cached) return cached;
|
|
const safeIndex = index >= 0 ? index : 0;
|
|
const palette = UNIVERSAL_COLORS[safeIndex % UNIVERSAL_COLORS.length];
|
|
paletteCache.set(entityName, palette);
|
|
return palette;
|
|
}
|
|
|
|
// ── 通用图标映射 ──
|
|
|
|
const ICON_MAP: Record<string, React.ReactNode> = {
|
|
team: <TeamOutlined />,
|
|
user: <UserOutlined />,
|
|
users: <TeamOutlined />,
|
|
message: <PhoneOutlined />,
|
|
phone: <PhoneOutlined />,
|
|
tags: <TagsOutlined />,
|
|
tag: <TagsOutlined />,
|
|
apartment: <RiseOutlined />,
|
|
dashboard: <DashboardOutlined />,
|
|
shopping: <ShoppingOutlined />,
|
|
file: <FileTextOutlined />,
|
|
database: <DatabaseOutlined />,
|
|
appstore: <AppstoreOutlined />,
|
|
};
|
|
|
|
export function getEntityIcon(iconName?: string): React.ReactNode {
|
|
if (!iconName) return <AppstoreOutlined />;
|
|
return ICON_MAP[iconName.toLowerCase().replace('outlined', '')] ?? <AppstoreOutlined />;
|
|
}
|
|
|
|
export const WIDGET_ICON_MAP: Record<string, React.ReactNode> = {
|
|
stat_card: <DashboardOutlined />,
|
|
bar_chart: <BarChartOutlined />,
|
|
pie_chart: <PieChartOutlined />,
|
|
funnel_chart: <FunnelPlotOutlined />,
|
|
line_chart: <LineChartOutlined />,
|
|
stat_cards: <DashboardOutlined />,
|
|
action_list: <AppstoreOutlined />,
|
|
funnel: <FunnelPlotOutlined />,
|
|
card_list: <DatabaseOutlined />,
|
|
};
|
|
|
|
// ── 延迟类名工具 ──
|
|
|
|
const DELAY_CLASSES = [
|
|
'erp-fade-in erp-fade-in-delay-1',
|
|
'erp-fade-in erp-fade-in-delay-2',
|
|
'erp-fade-in erp-fade-in-delay-3',
|
|
'erp-fade-in erp-fade-in-delay-4',
|
|
'erp-fade-in erp-fade-in-delay-4',
|
|
];
|
|
|
|
export function getDelayClass(index: number): string {
|
|
return DELAY_CLASSES[index % DELAY_CLASSES.length];
|
|
}
|