frontend-react-team/manage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui风格封装

Browse Source
This commit is contained in:
liamzi
2024-12-25 17:52:30 +08:00
parent 4cbec25b53
commit ac0f7ccbb7
3 changed files with 204 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/App.jsx
View File

@@ -15,31 +15,106 @@ const ThemedApp = () => {
theme={{
algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: "#1677ff",
borderRadius: 4,
colorBgContainer: isDarkMode ? "#141414" : "#ffffff",
colorBgElevated: isDarkMode ? "#1f1f1f" : "#ffffff",
colorText: isDarkMode
? "rgba(255, 255, 255, 0.85)"
: "rgba(0, 0, 0, 0.85)",
colorTextSecondary: isDarkMode
? "rgba(255, 255, 255, 0.45)"
: "rgba(0, 0, 0, 0.45)",
// 颜色
colorPrimary: '#006494',
colorSuccess: '#16A34A',
colorWarning: '#FBBF24',
colorError: '#DC2626',
colorInfo: '#006494',
// 中性色
colorText: isDarkMode ? 'rgba(255, 255, 255, 0.87)' : 'rgba(0, 0, 0, 0.87)',
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: {
// 为所有支持 variant 的组件设置 filled 模式
Form: {
variant: 'filled',
// 按钮样式
Button: {
borderRadius: 8,
controlHeight: 40,
paddingContentHorizontal: 24,
primaryShadow: 'none',
},
// 输入框样式
Input: {
controlHeight: 48,
borderRadius: 8,
paddingContentHorizontal: 16,
variant: 'filled',
},
// 选择器样式
Select: {
controlHeight: 48,
borderRadius: 8,
variant: 'filled',
},
TreeSelect: {
// 表单样式
Form: {
labelFontSize: 14,
margin: 24,
itemMarginBottom: 24,
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: {
variant: 'filled',
},
@@ -49,10 +124,13 @@ const ThemedApp = () => {
Cascader: {
variant: 'filled',
},
TreeSelect: {
variant: 'filled',
},
AutoComplete: {
variant: 'filled',
},
}
},
}}
>
<div className={isDarkMode ? "dark" : ""}>

2
src/pages/auth/Login.jsx
View File

@@ -101,7 +101,7 @@ const Login = () => {
{/* 右侧图片 */}
<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>

121
tailwind.config.js
View File

@@ -8,25 +8,124 @@ export default {
theme: {
extend: {
colors: {
// Material Design 3 调色板
primary: {
DEFAULT: '#1677ff',
dark: '#0958d9',
DEFAULT: '#006494', // 主色
50: '#F0F9FF',
100: '#E0F2FE',
200: '#B9E6FE',
300: '#7CD4FD',
400: '#36BFFA',
500: '#0BA5EC',
600: '#0086C9',
700: '#006494',
800: '#00497D',
900: '#003356',
},
success: {
DEFAULT: '#52c41a',
dark: '#389e0d',
secondary: {
DEFAULT: '#625B71',
50: '#F6F5F7',
100: '#ECEAEF',
200: '#D9D6DF',
300: '#B3AEBF',
400: '#8C859E',
500: '#625B71',
600: '#4E495A',
700: '#3B3744',
800: '#27242D',
900: '#141217',
},
warning: {
DEFAULT: '#faad14',
dark: '#d48806',
surface: {
DEFAULT: '#FFFFFF',
dark: '#121212',
},
error: {
DEFAULT: '#ff4d4f',
dark: '#d9363e',
DEFAULT: '#DC2626',
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: {
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,
},
}
},
},
},