add forum

src/theme/forumTheme.js

@@ -0,0 +1,227 @@
+/**
+ * 价值论坛黑金主题配置
+ * 采用深色背景 + 金色点缀的高端配色方案
+ */
+
+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,
+};