vf_react/src/views/StockOverview/theme/glassTheme.js

/**
 * Glassmorphism 主题系统 - Modern Spatial Design
 *
 * 设计理念：打造漂浮在深空中的半透明玻璃态数据终端
 * 强调光影深度、弥散背景光和极致圆角
 */

// 极光背景渐变配置
export const auroraGradients = {
  // 主背景 - 深空极光
  primary: `
    radial-gradient(ellipse at 20% 0%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(74, 144, 226, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 100%, rgba(131, 58, 180, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 50%, rgba(29, 78, 216, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0f 0%, #0d0d14 50%, #0a0a0f 100%)
  `,
  // 轻量版 - 用于嵌套组件
  light: `
    radial-gradient(ellipse at 50% 0%, rgba(120, 119, 198, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%)
  `,
  // 高亮版 - 用于活跃状态
  highlight: `
    radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%)
  `,
};

// 毛玻璃效果配置
export const glassEffect = {
  // 标准玻璃卡片
  card: {
    bg: 'rgba(255, 255, 255, 0.03)',
    backdropFilter: 'blur(20px) saturate(180%)',
    border: '1px solid rgba(255, 255, 255, 0.08)',
    borderRadius: '24px',
    boxShadow: `
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.05)
    `,
  },
  // 轻量玻璃 - 用于内部元素
  light: {
    bg: 'rgba(255, 255, 255, 0.02)',
    backdropFilter: 'blur(12px)',
    border: '1px solid rgba(255, 255, 255, 0.05)',
    borderRadius: '16px',
  },
  // 强调玻璃 - 用于重要元素
  accent: {
    bg: 'rgba(139, 92, 246, 0.1)',
    backdropFilter: 'blur(16px) saturate(200%)',
    border: '1px solid rgba(139, 92, 246, 0.2)',
    borderRadius: '20px',
    boxShadow: '0 4px 24px rgba(139, 92, 246, 0.15)',
  },
  // 悬浮玻璃 - 用于弹出层
  floating: {
    bg: 'rgba(20, 20, 30, 0.9)',
    backdropFilter: 'blur(24px) saturate(200%)',
    border: '1px solid rgba(255, 255, 255, 0.1)',
    borderRadius: '20px',
    boxShadow: `
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.05)
    `,
  },
};

// 发光效果配置
export const glowEffects = {
  // 文字发光
  textGlow: (color = '#8b5cf6') => ({
    textShadow: `0 0 20px ${color}60, 0 0 40px ${color}30`,
  }),
  // 边框发光
  borderGlow: (color = '#8b5cf6') => ({
    boxShadow: `0 0 20px ${color}30, inset 0 0 20px ${color}10`,
  }),
  // 图标发光
  iconGlow: (color = '#8b5cf6') => ({
    filter: `drop-shadow(0 0 8px ${color}80)`,
  }),
  // 数据发光 - 用于重要数值
  dataGlow: {
    up: { textShadow: '0 0 20px rgba(239, 68, 68, 0.5)' },
    down: { textShadow: '0 0 20px rgba(34, 197, 94, 0.5)' },
    neutral: { textShadow: '0 0 15px rgba(148, 163, 184, 0.3)' },
  },
};

// 颜色系统
export const colors = {
  // 主要颜色
  primary: {
    50: 'rgba(139, 92, 246, 0.1)',
    100: 'rgba(139, 92, 246, 0.2)',
    200: 'rgba(139, 92, 246, 0.3)',
    300: '#a78bfa',
    400: '#8b5cf6',
    500: '#7c3aed',
  },
  // 背景色
  background: {
    primary: '#0a0a0f',
    secondary: '#0d0d14',
    tertiary: '#12121a',
    card: 'rgba(255, 255, 255, 0.03)',
    hover: 'rgba(255, 255, 255, 0.06)',
  },
  // 文字颜色
  text: {
    primary: 'rgba(255, 255, 255, 0.95)',
    secondary: 'rgba(255, 255, 255, 0.7)',
    tertiary: 'rgba(255, 255, 255, 0.5)',
    muted: 'rgba(255, 255, 255, 0.35)',
  },
  // 边框颜色
  border: {
    primary: 'rgba(255, 255, 255, 0.08)',
    secondary: 'rgba(255, 255, 255, 0.05)',
    accent: 'rgba(139, 92, 246, 0.3)',
  },
  // 涨跌颜色
  market: {
    up: '#ef4444',
    upGlow: 'rgba(239, 68, 68, 0.5)',
    upBg: 'rgba(239, 68, 68, 0.1)',
    down: '#22c55e',
    downGlow: 'rgba(34, 197, 94, 0.5)',
    downBg: 'rgba(34, 197, 94, 0.1)',
    neutral: '#94a3b8',
  },
  // 强调色
  accent: {
    purple: '#8b5cf6',
    blue: '#3b82f6',
    cyan: '#06b6d4',
    pink: '#ec4899',
    orange: '#f97316',
  },
};

// 动画配置
export const animations = {
  // 极光动画 CSS
  auroraKeyframes: `
    @keyframes aurora {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }
  `,
  // 呼吸发光
  breatheKeyframes: `
    @keyframes breathe {
      0%, 100% {
        opacity: 0.5;
        transform: scale(1);
      }
      50% {
        opacity: 1;
        transform: scale(1.02);
      }
    }
  `,
  // 浮动
  floatKeyframes: `
    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-5px);
      }
    }
  `,
};

// 交互效果
export const interactions = {
  // 卡片悬浮效果
  cardHover: {
    transform: 'translateY(-4px)',
    boxShadow: `
      0 20px 40px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(139, 92, 246, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1)
    `,
    borderColor: 'rgba(139, 92, 246, 0.3)',
  },
  // 按钮悬浮
  buttonHover: {
    transform: 'translateY(-2px)',
    boxShadow: '0 10px 20px rgba(139, 92, 246, 0.2)',
  },
  // 列表项悬浮
  listItemHover: {
    bg: 'rgba(255, 255, 255, 0.05)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
  },
};

// 预设样式组合 - 可直接用于 Chakra sx prop
export const presets = {
  // 页面容器
  pageContainer: {
    minH: '100vh',
    bg: colors.background.primary,
    backgroundImage: auroraGradients.primary,
    backgroundAttachment: 'fixed',
    color: colors.text.primary,
  },
  // 主卡片
  glassCard: {
    ...glassEffect.card,
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    _hover: interactions.cardHover,
  },
  // 内容区块
  contentSection: {
    ...glassEffect.light,
    p: 5,
  },
  // 标题样式
  sectionTitle: {
    fontSize: 'lg',
    fontWeight: 'bold',
    color: colors.text.primary,
    ...glowEffects.textGlow(colors.accent.purple),
    letterSpacing: '0.5px',
  },
  // 数据标签
  dataLabel: {
    fontSize: 'xs',
    color: colors.text.tertiary,
    textTransform: 'uppercase',
    letterSpacing: '1px',
  },
  // 上涨数值
  valueUp: {
    color: colors.market.up,
    fontWeight: 'bold',
    ...glowEffects.dataGlow.up,
  },
  // 下跌数值
  valueDown: {
    color: colors.market.down,
    fontWeight: 'bold',
    ...glowEffects.dataGlow.down,
  },
};

// 指标提示样式
export const tooltipStyles = {
  container: {
    bg: 'rgba(15, 15, 25, 0.95)',
    backdropFilter: 'blur(16px)',
    border: '1px solid rgba(255, 255, 255, 0.1)',
    borderRadius: '12px',
    boxShadow: '0 20px 40px rgba(0, 0, 0, 0.5)',
    p: 3,
  },
  title: {
    color: colors.accent.purple,
    fontWeight: 'bold',
    fontSize: 'sm',
    mb: 1,
  },
  description: {
    color: colors.text.secondary,
    fontSize: 'xs',
    lineHeight: 1.5,
  },
};

// 工具函数：获取涨跌颜色
export const getMarketColor = (value) => {
  if (value > 0) return colors.market.up;
  if (value < 0) return colors.market.down;
  return colors.market.neutral;
};

// 工具函数：获取涨跌背景
export const getMarketBg = (value) => {
  if (value > 0) return colors.market.upBg;
  if (value < 0) return colors.market.downBg;
  return 'rgba(148, 163, 184, 0.1)';
};

// 工具函数：获取涨跌发光
export const getMarketGlow = (value) => {
  if (value > 0) return glowEffects.dataGlow.up;
  if (value < 0) return glowEffects.dataGlow.down;
  return glowEffects.dataGlow.neutral;
};

export default {
  auroraGradients,
  glassEffect,
  glowEffects,
  colors,
  animations,
  interactions,
  presets,
  tooltipStyles,
  getMarketColor,
  getMarketBg,
  getMarketGlow,
};