forked from gxwebsoft/mp-10550
feat(theme): 实现主题切换系统并优化经销商相关页面
- 新增主题切换系统,支持智能主题和手动选择 - 更新经销商首页、团队、订单、提现等页面样式 - 添加主题相关的Hook和样式工具函数 - 优化部分组件样式以适配新主题
This commit is contained in:
@@ -91,7 +91,7 @@ export const businessGradients = {
|
||||
danger: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)',
|
||||
info: 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
|
||||
},
|
||||
|
||||
|
||||
// 订单相关
|
||||
order: {
|
||||
pending: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)',
|
||||
@@ -99,7 +99,7 @@ export const businessGradients = {
|
||||
cancelled: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
||||
processing: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)'
|
||||
},
|
||||
|
||||
|
||||
// 金额相关
|
||||
money: {
|
||||
available: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
@@ -108,51 +108,47 @@ export const businessGradients = {
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片渐变样式
|
||||
// 卡片渐变样式(小程序兼容版本)
|
||||
export const cardGradients = {
|
||||
glass: {
|
||||
background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||||
backdropFilter: 'blur(10px)'
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)'
|
||||
// 注意:小程序不支持 backdropFilter
|
||||
},
|
||||
|
||||
|
||||
subtle: {
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.8)',
|
||||
boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05)'
|
||||
border: '1px solid rgba(255, 255, 255, 0.8)'
|
||||
// 注意:小程序不支持 boxShadow,使用边框和背景替代
|
||||
},
|
||||
|
||||
|
||||
elevated: {
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.9)',
|
||||
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06)'
|
||||
border: '1px solid rgba(255, 255, 255, 0.9)'
|
||||
// 注意:小程序不支持 boxShadow,使用边框和背景替代
|
||||
}
|
||||
}
|
||||
|
||||
// 文字渐变样式
|
||||
// 文字渐变样式(小程序兼容版本 - 使用纯色替代)
|
||||
export const textGradients = {
|
||||
primary: {
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
color: '#667eea'
|
||||
// 注意:小程序不支持 WebkitBackgroundClip 和 WebkitTextFillColor,使用纯色替代
|
||||
},
|
||||
|
||||
|
||||
success: {
|
||||
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
color: '#10b981'
|
||||
// 注意:小程序不支持文字渐变,使用纯色替代
|
||||
},
|
||||
|
||||
|
||||
warning: {
|
||||
background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
color: '#f59e0b'
|
||||
// 注意:小程序不支持文字渐变,使用纯色替代
|
||||
},
|
||||
|
||||
|
||||
danger: {
|
||||
background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
color: '#ef4444'
|
||||
// 注意:小程序不支持文字渐变,使用纯色替代
|
||||
}
|
||||
}
|
||||
|
||||
@@ -164,12 +160,12 @@ export const gradientUtils = {
|
||||
const index = userId % gradientThemes.length
|
||||
return gradientThemes[index]
|
||||
},
|
||||
|
||||
|
||||
// 根据主题名获取主题
|
||||
getThemeByName: (name: string): GradientTheme | undefined => {
|
||||
return gradientThemes.find(theme => theme.name === name)
|
||||
},
|
||||
|
||||
|
||||
// 调整颜色亮度
|
||||
adjustColorBrightness: (color: string, percent: number): string => {
|
||||
const num = parseInt(color.replace("#", ""), 16)
|
||||
@@ -181,12 +177,12 @@ export const gradientUtils = {
|
||||
(G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
|
||||
(B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
|
||||
},
|
||||
|
||||
|
||||
// 生成自定义渐变
|
||||
createGradient: (color1: string, color2: string, direction = '135deg'): string => {
|
||||
return `linear-gradient(${direction}, ${color1} 0%, ${color2} 100%)`
|
||||
},
|
||||
|
||||
|
||||
// 获取渐变的主色调
|
||||
getPrimaryColor: (gradient: string): string => {
|
||||
const match = gradient.match(/#[a-fA-F0-9]{6}/)
|
||||
@@ -201,7 +197,7 @@ export const animatedGradients = {
|
||||
backgroundSize: '400% 400%',
|
||||
animation: 'gradientFlow 15s ease infinite'
|
||||
},
|
||||
|
||||
|
||||
pulse: {
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
animation: 'gradientPulse 3s ease-in-out infinite'
|
||||
|
||||
Reference in New Issue
Block a user