forked from gxwebsoft/mp-10550
feat(dealer): 重构分销中心页面
- 优化了分销中心首页、分销订单、提现申请和团队管理页面的视觉和功能- 新增了渐变设计指南和主题选择器组件 -改进了数据展示、功能导航和用户体验
This commit is contained in:
223
src/styles/gradients.ts
Normal file
223
src/styles/gradients.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* 渐变主题配置
|
||||
* 提供统一的渐变样式管理
|
||||
*/
|
||||
|
||||
export interface GradientTheme {
|
||||
name: string
|
||||
primary: string
|
||||
secondary?: string
|
||||
background: string
|
||||
textColor: string
|
||||
description: string
|
||||
}
|
||||
|
||||
// 预定义渐变主题
|
||||
export const gradientThemes: GradientTheme[] = [
|
||||
{
|
||||
name: 'ocean',
|
||||
primary: '#667eea',
|
||||
secondary: '#764ba2',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '海洋蓝紫 - 科技感与专业感'
|
||||
},
|
||||
{
|
||||
name: 'sunset',
|
||||
primary: '#f093fb',
|
||||
secondary: '#f5576c',
|
||||
background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '日落橙红 - 活力与热情'
|
||||
},
|
||||
{
|
||||
name: 'fresh',
|
||||
primary: '#4facfe',
|
||||
secondary: '#00f2fe',
|
||||
background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '清新蓝绿 - 清新与活力'
|
||||
},
|
||||
{
|
||||
name: 'nature',
|
||||
primary: '#43e97b',
|
||||
secondary: '#38f9d7',
|
||||
background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '自然绿青 - 生机与成长'
|
||||
},
|
||||
{
|
||||
name: 'warm',
|
||||
primary: '#fa709a',
|
||||
secondary: '#fee140',
|
||||
background: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '温暖金粉 - 温馨与友好'
|
||||
},
|
||||
{
|
||||
name: 'elegant',
|
||||
primary: '#a8edea',
|
||||
secondary: '#fed6e3',
|
||||
background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
|
||||
textColor: '#374151',
|
||||
description: '优雅淡彩 - 柔和与精致'
|
||||
},
|
||||
{
|
||||
name: 'royal',
|
||||
primary: '#667eea',
|
||||
secondary: '#764ba2',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '皇家紫蓝 - 高贵与权威'
|
||||
},
|
||||
{
|
||||
name: 'fire',
|
||||
primary: '#ff9a9e',
|
||||
secondary: '#fecfef',
|
||||
background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '火焰粉红 - 激情与浪漫'
|
||||
}
|
||||
]
|
||||
|
||||
// 业务场景渐变
|
||||
export const businessGradients = {
|
||||
// 分销商相关
|
||||
dealer: {
|
||||
header: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
card: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
|
||||
success: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
|
||||
warning: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
|
||||
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%)',
|
||||
completed: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
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%)',
|
||||
frozen: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
|
||||
total: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片渐变样式
|
||||
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)'
|
||||
},
|
||||
|
||||
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)'
|
||||
},
|
||||
|
||||
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)'
|
||||
}
|
||||
}
|
||||
|
||||
// 文字渐变样式
|
||||
export const textGradients = {
|
||||
primary: {
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
},
|
||||
|
||||
success: {
|
||||
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
},
|
||||
|
||||
warning: {
|
||||
background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
},
|
||||
|
||||
danger: {
|
||||
background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
export const gradientUtils = {
|
||||
// 根据用户ID获取主题
|
||||
getThemeByUserId: (userId?: number): GradientTheme => {
|
||||
if (!userId) return gradientThemes[0]
|
||||
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)
|
||||
const amt = Math.round(2.55 * percent)
|
||||
const R = (num >> 16) + amt
|
||||
const G = (num >> 8 & 0x00FF) + amt
|
||||
const B = (num & 0x0000FF) + amt
|
||||
return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
|
||||
(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}/)
|
||||
return match ? match[0] : '#667eea'
|
||||
}
|
||||
}
|
||||
|
||||
// 动画渐变
|
||||
export const animatedGradients = {
|
||||
flowing: {
|
||||
background: 'linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c)',
|
||||
backgroundSize: '400% 400%',
|
||||
animation: 'gradientFlow 15s ease infinite'
|
||||
},
|
||||
|
||||
pulse: {
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
animation: 'gradientPulse 3s ease-in-out infinite'
|
||||
}
|
||||
}
|
||||
|
||||
// CSS 动画关键帧（需要在全局样式中定义）
|
||||
export const gradientAnimations = `
|
||||
@keyframes gradientFlow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes gradientPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
`
|
||||
Reference in New Issue
Block a user