refactor(前端): 集中管理设计令牌和工具函数
This commit is contained in:
@@ -48,6 +48,7 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { designTokens } from '../config/theme';
|
||||
import {
|
||||
inputStyles,
|
||||
selectStyles,
|
||||
@@ -62,68 +63,6 @@ const { Option } = Select;
|
||||
const { Text, Title } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
// 设计令牌 - 与接线/端口管理页面保持一致
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: {
|
||||
main: '#6366f1',
|
||||
gradient: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
light: '#818cf8',
|
||||
dark: '#4f46e5',
|
||||
bg: '#eef2ff',
|
||||
},
|
||||
success: {
|
||||
main: '#10b981',
|
||||
gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
light: '#34d399',
|
||||
dark: '#047857',
|
||||
bg: '#ecfdf5',
|
||||
},
|
||||
warning: {
|
||||
main: '#f59e0b',
|
||||
gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
||||
light: '#fbbf24',
|
||||
dark: '#b45309',
|
||||
bg: '#fffbeb',
|
||||
},
|
||||
error: {
|
||||
main: '#ef4444',
|
||||
gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
||||
light: '#f87171',
|
||||
dark: '#b91c1c',
|
||||
bg: '#fef2f2',
|
||||
},
|
||||
info: {
|
||||
main: '#3b82f6',
|
||||
bg: '#eff6ff',
|
||||
},
|
||||
neutral: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
sm: '6px',
|
||||
md: '10px',
|
||||
lg: '16px',
|
||||
xl: '20px',
|
||||
},
|
||||
shadows: {
|
||||
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
||||
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
||||
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
|
||||
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
};
|
||||
|
||||
// 动画配置
|
||||
const animations = {
|
||||
container: {
|
||||
|
||||
Reference in New Issue
Block a user