vf_react/src/theme/forumTheme.js

/**
 * 价值论坛黑金主题配置
 * 采用深色背景 + 金色点缀的高端配色方案
 */

export const forumColors = {
  // 主色调 - 黑金渐变
  primary: {
    50: '#FFF9E6',
    100: '#FFEEBA',
    200: '#FFE38D',
    300: '#FFD860',
    400: '#FFCD33',
    500: '#FFC107', // 主金色
    600: '#FFB300',
    700: '#FFA000',
    800: '#FF8F00',
    900: '#FF6F00',
  },

  // 背景色系 - 深黑渐变
  background: {
    main: '#0A0A0A', // 主背景 - 极黑
    secondary: '#121212', // 次级背景
    card: '#1A1A1A', // 卡片背景
    hover: '#222222', // 悬停背景
    elevated: '#2A2A2A', // 提升背景（模态框等）
  },

  // 文字色系
  text: {
    primary: '#FFFFFF', // 主文字 - 纯白
    secondary: '#B8B8B8', // 次要文字 - 灰色
    tertiary: '#808080', // 三级文字 - 深灰
    muted: '#5A5A5A', // 弱化文字
    gold: '#FFC107', // 金色强调文字
    goldGradient: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)', // 金色渐变
  },

  // 边框色系
  border: {
    default: '#333333',
    light: '#404040',
    gold: '#FFC107',
    goldGlow: 'rgba(255, 193, 7, 0.3)',
  },

  // 功能色
  semantic: {
    success: '#4CAF50',
    warning: '#FF9800',
    error: '#F44336',
    info: '#2196F3',
  },

  // 金色渐变系列
  gradients: {
    goldPrimary: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)',
    goldSecondary: 'linear-gradient(135deg, #FFC107 0%, #FF8F00 100%)',
    goldSubtle: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%)',
    blackGold: 'linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #2A2020 100%)',
    cardHover: 'linear-gradient(135deg, #1A1A1A 0%, #252525 100%)',
  },

  // 阴影色系
  shadows: {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.5)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.5)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.6)',
    gold: '0 0 20px rgba(255, 193, 7, 0.3), 0 0 40px rgba(255, 193, 7, 0.1)',
    goldHover: '0 0 30px rgba(255, 193, 7, 0.5), 0 0 60px rgba(255, 193, 7, 0.2)',
  },
};

/**
 * 论坛组件样式配置
 */
export const forumComponentStyles = {
  // 按钮样式
  Button: {
    baseStyle: {
      fontWeight: '600',
      borderRadius: 'md',
      transition: 'all 0.3s ease',
    },
    variants: {
      gold: {
        bg: forumColors.gradients.goldPrimary,
        color: '#0A0A0A',
        _hover: {
          transform: 'translateY(-2px)',
          boxShadow: forumColors.shadows.goldHover,
          _disabled: {
            transform: 'none',
          },
        },
        _active: {
          transform: 'translateY(0)',
        },
      },
      goldOutline: {
        bg: 'transparent',
        color: forumColors.primary[500],
        border: '2px solid',
        borderColor: forumColors.primary[500],
        _hover: {
          bg: forumColors.gradients.goldSubtle,
          boxShadow: forumColors.shadows.gold,
        },
      },
      dark: {
        bg: forumColors.background.card,
        color: forumColors.text.primary,
        border: '1px solid',
        borderColor: forumColors.border.default,
        _hover: {
          bg: forumColors.background.hover,
          borderColor: forumColors.border.light,
        },
      },
    },
  },

  // 卡片样式
  Card: {
    baseStyle: {
      container: {
        bg: forumColors.background.card,
        borderRadius: 'lg',
        border: '1px solid',
        borderColor: forumColors.border.default,
        transition: 'all 0.3s ease',
        _hover: {
          borderColor: forumColors.border.gold,
          boxShadow: forumColors.shadows.gold,
          transform: 'translateY(-4px)',
        },
      },
    },
  },

  // 输入框样式
  Input: {
    variants: {
      forum: {
        field: {
          bg: forumColors.background.secondary,
          border: '1px solid',
          borderColor: forumColors.border.default,
          color: forumColors.text.primary,
          _placeholder: {
            color: forumColors.text.tertiary,
          },
          _hover: {
            borderColor: forumColors.border.light,
          },
          _focus: {
            borderColor: forumColors.border.gold,
            boxShadow: `0 0 0 1px ${forumColors.border.goldGlow}`,
          },
        },
      },
    },
  },

  // 标签样式
  Tag: {
    variants: {
      gold: {
        container: {
          bg: forumColors.gradients.goldSubtle,
          color: forumColors.primary[500],
          border: '1px solid',
          borderColor: forumColors.border.gold,
        },
      },
    },
  },
};

/**
 * 论坛专用动画配置
 */
export const forumAnimations = {
  fadeIn: {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -20 },
    transition: { duration: 0.3 },
  },

  slideIn: {
    initial: { opacity: 0, x: -20 },
    animate: { opacity: 1, x: 0 },
    exit: { opacity: 0, x: 20 },
    transition: { duration: 0.3 },
  },

  scaleIn: {
    initial: { opacity: 0, scale: 0.9 },
    animate: { opacity: 1, scale: 1 },
    exit: { opacity: 0, scale: 0.9 },
    transition: { duration: 0.2 },
  },

  goldGlow: {
    animate: {
      boxShadow: [
        forumColors.shadows.gold,
        forumColors.shadows.goldHover,
        forumColors.shadows.gold,
      ],
    },
    transition: {
      duration: 2,
      repeat: Infinity,
      repeatType: 'reverse',
    },
  },
};

export default {
  colors: forumColors,
  components: forumComponentStyles,
  animations: forumAnimations,
};