ui风格封装
This commit is contained in:
liamzi
108
src/App.jsx
108
src/App.jsx
@@ -15,31 +15,106 @@ const ThemedApp = () => {
|
|||||||
theme={{
|
theme={{
|
||||||
algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
||||||
token: {
|
token: {
|
||||||
colorPrimary: "#1677ff",
|
// 颜色
|
||||||
borderRadius: 4,
|
colorPrimary: '#006494',
|
||||||
colorBgContainer: isDarkMode ? "#141414" : "#ffffff",
|
colorSuccess: '#16A34A',
|
||||||
colorBgElevated: isDarkMode ? "#1f1f1f" : "#ffffff",
|
colorWarning: '#FBBF24',
|
||||||
colorText: isDarkMode
|
colorError: '#DC2626',
|
||||||
? "rgba(255, 255, 255, 0.85)"
|
colorInfo: '#006494',
|
||||||
: "rgba(0, 0, 0, 0.85)",
|
|
||||||
colorTextSecondary: isDarkMode
|
// 中性色
|
||||||
? "rgba(255, 255, 255, 0.45)"
|
colorText: isDarkMode ? 'rgba(255, 255, 255, 0.87)' : 'rgba(0, 0, 0, 0.87)',
|
||||||
: "rgba(0, 0, 0, 0.45)",
|
colorTextSecondary: isDarkMode ? 'rgba(255, 255, 255, 0.60)' : 'rgba(0, 0, 0, 0.60)',
|
||||||
|
colorTextTertiary: isDarkMode ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)',
|
||||||
|
colorBgContainer: isDarkMode ? '#121212' : '#ffffff',
|
||||||
|
colorBgElevated: isDarkMode ? '#242424' : '#ffffff',
|
||||||
|
colorBorder: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
|
||||||
|
|
||||||
|
// 字体
|
||||||
|
fontFamily: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||||
|
fontSize: 16,
|
||||||
|
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 8,
|
||||||
|
borderRadiusLG: 12,
|
||||||
|
borderRadiusSM: 4,
|
||||||
|
borderRadiusXS: 2,
|
||||||
|
|
||||||
|
// 线框
|
||||||
|
lineWidth: 1,
|
||||||
|
lineType: 'solid',
|
||||||
|
|
||||||
|
// 动画
|
||||||
|
motionDurationMid: '0.2s',
|
||||||
|
motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
motionEaseOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
||||||
|
motionEaseIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
boxShadow: isDarkMode
|
||||||
|
? '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15)'
|
||||||
|
: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 3px rgba(0, 0, 0, 0.08)',
|
||||||
|
boxShadowSecondary: isDarkMode
|
||||||
|
? '0 4px 12px 6px rgba(0, 0, 0, 0.4)'
|
||||||
|
: '0 4px 12px 6px rgba(0, 0, 0, 0.12)',
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
// 为所有支持 variant 的组件设置 filled 模式
|
// 按钮样式
|
||||||
Form: {
|
Button: {
|
||||||
variant: 'filled',
|
borderRadius: 8,
|
||||||
|
controlHeight: 40,
|
||||||
|
paddingContentHorizontal: 24,
|
||||||
|
primaryShadow: 'none',
|
||||||
},
|
},
|
||||||
|
// 输入框样式
|
||||||
Input: {
|
Input: {
|
||||||
|
controlHeight: 48,
|
||||||
|
borderRadius: 8,
|
||||||
|
paddingContentHorizontal: 16,
|
||||||
variant: 'filled',
|
variant: 'filled',
|
||||||
},
|
},
|
||||||
|
// 选择器样式
|
||||||
Select: {
|
Select: {
|
||||||
|
controlHeight: 48,
|
||||||
|
borderRadius: 8,
|
||||||
variant: 'filled',
|
variant: 'filled',
|
||||||
},
|
},
|
||||||
TreeSelect: {
|
// 表单样式
|
||||||
|
Form: {
|
||||||
|
labelFontSize: 14,
|
||||||
|
margin: 24,
|
||||||
|
itemMarginBottom: 24,
|
||||||
variant: 'filled',
|
variant: 'filled',
|
||||||
},
|
},
|
||||||
|
// 卡片样式
|
||||||
|
Card: {
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 24,
|
||||||
|
},
|
||||||
|
// 模态框样式
|
||||||
|
Modal: {
|
||||||
|
borderRadius: 12,
|
||||||
|
paddingContentHorizontal: 24,
|
||||||
|
paddingContentVertical: 24,
|
||||||
|
},
|
||||||
|
// 下拉菜单样式
|
||||||
|
Dropdown: {
|
||||||
|
borderRadius: 8,
|
||||||
|
controlHeight: 40,
|
||||||
|
},
|
||||||
|
// 标签页样式
|
||||||
|
Tabs: {
|
||||||
|
inkBarColor: '#006494',
|
||||||
|
cardGutter: 8,
|
||||||
|
},
|
||||||
|
// 表格样式
|
||||||
|
Table: {
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: 16,
|
||||||
|
cellPaddingBlock: 16,
|
||||||
|
cellPaddingInline: 16,
|
||||||
|
},
|
||||||
|
// 其他组件的 filled 变体设置
|
||||||
DatePicker: {
|
DatePicker: {
|
||||||
variant: 'filled',
|
variant: 'filled',
|
||||||
},
|
},
|
||||||
@@ -49,10 +124,13 @@ const ThemedApp = () => {
|
|||||||
Cascader: {
|
Cascader: {
|
||||||
variant: 'filled',
|
variant: 'filled',
|
||||||
},
|
},
|
||||||
|
TreeSelect: {
|
||||||
|
variant: 'filled',
|
||||||
|
},
|
||||||
AutoComplete: {
|
AutoComplete: {
|
||||||
variant: 'filled',
|
variant: 'filled',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={isDarkMode ? "dark" : ""}>
|
<div className={isDarkMode ? "dark" : ""}>
|
||||||
|
|||||||
@@ -101,7 +101,7 @@ const Login = () => {
|
|||||||
|
|
||||||
{/* 右侧图片 */}
|
{/* 右侧图片 */}
|
||||||
<div className="hidden md:flex md:w-1/2 items-center justify-center p-12">
|
<div className="hidden md:flex md:w-1/2 items-center justify-center p-12">
|
||||||
<div className="w-full h-full rounded-3xl bg-[url('https://uppeta.com/img/svg/main.svg')] bg-center bg-contain bg-no-repeat dark:opacity-90 transform hover:scale-105 transition-all duration-500" />
|
<div className="w-full h-full rounded-3xl bg-[url('https://uppeta.com/img/svg/main.svg')] bg-center bg-contain bg-no-repeat dark:opacity-90 animate-pulse-slow transform hover:scale-105 transition-all duration-500" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,25 +8,124 @@ export default {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
// Material Design 3 调色板
|
||||||
primary: {
|
primary: {
|
||||||
DEFAULT: '#1677ff',
|
DEFAULT: '#006494', // 主色
|
||||||
dark: '#0958d9',
|
50: '#F0F9FF',
|
||||||
|
100: '#E0F2FE',
|
||||||
|
200: '#B9E6FE',
|
||||||
|
300: '#7CD4FD',
|
||||||
|
400: '#36BFFA',
|
||||||
|
500: '#0BA5EC',
|
||||||
|
600: '#0086C9',
|
||||||
|
700: '#006494',
|
||||||
|
800: '#00497D',
|
||||||
|
900: '#003356',
|
||||||
},
|
},
|
||||||
success: {
|
secondary: {
|
||||||
DEFAULT: '#52c41a',
|
DEFAULT: '#625B71',
|
||||||
dark: '#389e0d',
|
50: '#F6F5F7',
|
||||||
|
100: '#ECEAEF',
|
||||||
|
200: '#D9D6DF',
|
||||||
|
300: '#B3AEBF',
|
||||||
|
400: '#8C859E',
|
||||||
|
500: '#625B71',
|
||||||
|
600: '#4E495A',
|
||||||
|
700: '#3B3744',
|
||||||
|
800: '#27242D',
|
||||||
|
900: '#141217',
|
||||||
},
|
},
|
||||||
warning: {
|
surface: {
|
||||||
DEFAULT: '#faad14',
|
DEFAULT: '#FFFFFF',
|
||||||
dark: '#d48806',
|
dark: '#121212',
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
DEFAULT: '#ff4d4f',
|
DEFAULT: '#DC2626',
|
||||||
dark: '#d9363e',
|
50: '#FEF2F2',
|
||||||
|
100: '#FEE2E2',
|
||||||
|
200: '#FECACA',
|
||||||
|
300: '#FCA5A5',
|
||||||
|
400: '#F87171',
|
||||||
|
500: '#EF4444',
|
||||||
|
600: '#DC2626',
|
||||||
|
700: '#B91C1C',
|
||||||
|
800: '#991B1B',
|
||||||
|
900: '#7F1D1D',
|
||||||
},
|
},
|
||||||
|
success: {
|
||||||
|
DEFAULT: '#16A34A',
|
||||||
|
50: '#F0FDF4',
|
||||||
|
100: '#DCFCE7',
|
||||||
|
200: '#BBF7D0',
|
||||||
|
300: '#86EFAC',
|
||||||
|
400: '#4ADE80',
|
||||||
|
500: '#22C55E',
|
||||||
|
600: '#16A34A',
|
||||||
|
700: '#15803D',
|
||||||
|
800: '#166534',
|
||||||
|
900: '#14532D',
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
DEFAULT: '#FBBF24',
|
||||||
|
50: '#FFFBEB',
|
||||||
|
100: '#FEF3C7',
|
||||||
|
200: '#FDE68A',
|
||||||
|
300: '#FCD34D',
|
||||||
|
400: '#FBBF24',
|
||||||
|
500: '#F59E0B',
|
||||||
|
600: '#D97706',
|
||||||
|
700: '#B45309',
|
||||||
|
800: '#92400E',
|
||||||
|
900: '#78350F',
|
||||||
|
}
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Poppins', 'sans-serif'],
|
sans: ['Roboto', 'sans-serif'], // Google 字体
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
// Material Design 3 阴影
|
||||||
|
'elevation-1': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||||
|
'elevation-2': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||||
|
'elevation-3': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||||
|
'elevation-4': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||||
|
'elevation-5': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
// Material Design 3 圆角
|
||||||
|
'none': '0',
|
||||||
|
'sm': '4px',
|
||||||
|
DEFAULT: '8px',
|
||||||
|
'md': '12px',
|
||||||
|
'lg': '16px',
|
||||||
|
'xl': '28px',
|
||||||
|
'2xl': '32px',
|
||||||
|
'full': '9999px',
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
'ripple': 'ripple 0.6s linear',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
pulse: {
|
||||||
|
'0%, 100%': {
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale(1)',
|
||||||
|
},
|
||||||
|
'50%': {
|
||||||
|
opacity: .9,
|
||||||
|
transform: 'scale(0.98)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ripple: {
|
||||||
|
'0%': {
|
||||||
|
transform: 'scale(0)',
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
'100%': {
|
||||||
|
transform: 'scale(4)',
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user