refactor(theme): 统一黑金主题常量，减少硬编码

- theme/index.ts: 添加 COLORS, GLOW, GLASS 便捷常量 - theme/index.ts: 导出 glassCardStyle 可复用样式 - BusinessInfoPanel: 迁移到使用统一主题常量迁移指南： - import { COLORS, GLASS, glassCardStyle } from '@views/Company/theme' - 替换 rgba(212, 175, 55, x) → COLORS.border / COLORS.borderHover - 替换硬编码背景 → GLASS.bgDark / COLORS.bgGlass 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-18 18:29:42 +08:00
parent 50d59fd2ad
commit 3953efc2ed
2 changed files with 105 additions and 32 deletions
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
+++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
@@ -23,6 +23,8 @@ import {
  FaFileAlt,
 } from "react-icons/fa";

+// 使用统一主题
+import { COLORS, GLASS, glassCardStyle } from "@views/Company/theme";
 import { THEME } from "../config";
 import { useBasicInfo } from "../../hooks/useBasicInfo";

@@ -30,38 +32,23 @@ interface BusinessInfoPanelProps {
  stockCode: string;
 }

-// 玻璃态卡片样式
-const glassCardStyle = {
-  bg: "rgba(15, 18, 35, 0.6)",
-  borderRadius: "12px",
-  border: "1px solid rgba(212, 175, 55, 0.2)",
-  backdropFilter: "blur(8px)",
-  position: "relative" as const,
-  overflow: "hidden",
-  transition: "all 0.2s ease",
-  _hover: {
-    borderColor: "rgba(212, 175, 55, 0.4)",
-    bg: "rgba(15, 18, 35, 0.7)",
-  },
-};
-
 // 区块标题组件
 const SectionTitle: React.FC<{ icon: React.ElementType; title: string }> = ({
  icon,
  title,
 }) => (
  <HStack spacing={2} mb={4}>
-    <Icon as={icon} color={THEME.gold} boxSize={4} />
+    <Icon as={icon} color={COLORS.gold} boxSize={4} />
    <Text
      fontSize="14px"
      fontWeight="700"
-      color={THEME.gold}
+      color={COLORS.gold}
      textTransform="uppercase"
      letterSpacing="0.05em"
    >
      {title}
    </Text>
-    <Box flex={1} h="1px" bg={`linear-gradient(90deg, ${THEME.border}, transparent)`} />
+    <Box flex={1} h="1px" bg={`linear-gradient(90deg, ${COLORS.border}, transparent)`} />
  </HStack>
 );

@@ -80,12 +67,12 @@ const InfoRow: React.FC<{
    py={2}
    px={3}
    borderRadius="8px"
-    bg="rgba(0, 0, 0, 0.2)"
-    _hover={{ bg: "rgba(212, 175, 55, 0.05)" }}
+    bg={GLASS.bgDark}
+    _hover={{ bg: GLASS.bgGold }}
    transition="all 0.15s ease"
  >
-    {icon && <Icon as={icon} color={THEME.goldLight} boxSize={3.5} opacity={0.8} />}
-    <Text fontSize="13px" color={THEME.textSecondary} minW="70px" flexShrink={0}>
+    {icon && <Icon as={icon} color={COLORS.goldLight} boxSize={3.5} opacity={0.8} />}
+    <Text fontSize="13px" color={COLORS.textSecondary} minW="70px" flexShrink={0}>
      {label}
    </Text>
    {isCode ? (
@@ -93,7 +80,7 @@ const InfoRow: React.FC<{
        fontSize="12px"
        fontFamily="mono"
        bg="rgba(212, 175, 55, 0.15)"
-        color={THEME.goldLight}
+        color={COLORS.goldLight}
        px={2}
        py={0.5}
        borderRadius="4px"
@@ -104,7 +91,7 @@ const InfoRow: React.FC<{
    ) : (
      <Text
        fontSize="13px"
-        color={THEME.textPrimary}
+        color={COLORS.textPrimary}
        fontWeight="500"
        noOfLines={isMultiline ? 2 : 1}
        flex={1}
@@ -124,18 +111,18 @@ const ServiceCard: React.FC<{
  <Box
    p={4}
    borderRadius="10px"
-    bg="rgba(0, 0, 0, 0.2)"
-    border="1px solid rgba(212, 175, 55, 0.1)"
-    _hover={{ borderColor: "rgba(212, 175, 55, 0.25)" }}
+    bg={GLASS.bgDark}
+    border={`1px solid ${COLORS.borderSubtle}`}
+    _hover={{ borderColor: COLORS.border }}
    transition="all 0.15s ease"
  >
    <HStack spacing={2} mb={2}>
-      <Icon as={icon} color={THEME.goldLight} boxSize={3.5} />
-      <Text fontSize="12px" color={THEME.textSecondary}>
+      <Icon as={icon} color={COLORS.goldLight} boxSize={3.5} />
+      <Text fontSize="12px" color={COLORS.textSecondary}>
        {label}
      </Text>
    </HStack>
-    <Text fontSize="13px" color={THEME.textPrimary} fontWeight="500" noOfLines={2}>
+    <Text fontSize="13px" color={COLORS.textPrimary} fontWeight="500" noOfLines={2}>
      {value || "-"}
    </Text>
  </Box>
@@ -152,7 +139,7 @@ const TextSection: React.FC<{
    <Text
      fontSize="13px"
      lineHeight="1.8"
-      color={THEME.textSecondary}
+      color={COLORS.textSecondary}
      sx={{
        textIndent: "2em",
        textAlign: "justify",
--- a/src/views/Company/theme/index.ts
+++ b/src/views/Company/theme/index.ts
@@ -1,8 +1,12 @@
 /**
 * Company 页面 FUI 主题统一导出
+ *
+ * 使用方式：
+ * import { COLORS, GLOW, GLASS } from '@views/Company/theme';
+ * import { FUI_COLORS, FUI_THEME } from '@views/Company/theme';
 */

-// 主题配置
+// 完整主题对象
 export { default as FUI_THEME } from './fui';
 export {
  FUI_COLORS,
@@ -15,3 +19,85 @@ export {

 // 主题组件
 export * from './components';
+
+// ============================================
+// 便捷常量导出（推荐使用）
+// ============================================
+
+import { FUI_COLORS, FUI_GLOW, FUI_GLASS } from './fui';
+
+/**
+ * 常用颜色常量
+ * 用于替换硬编码的 rgba(212, 175, 55, x) 等值
+ */
+export const COLORS = {
+  // 金色系
+  gold: '#D4AF37',
+  goldLight: '#F0D78C',
+  goldDark: '#B8960C',
+  goldMuted: 'rgba(212, 175, 55, 0.5)',
+
+  // 背景
+  bgDeep: '#0A0A14',
+  bgPrimary: '#0F0F1A',
+  bgElevated: '#1A1A2E',
+  bgSurface: '#252540',
+  bgOverlay: 'rgba(26, 26, 46, 0.95)',
+  bgGlass: 'rgba(15, 18, 35, 0.6)',
+
+  // 边框
+  border: 'rgba(212, 175, 55, 0.2)',
+  borderHover: 'rgba(212, 175, 55, 0.4)',
+  borderSubtle: 'rgba(212, 175, 55, 0.1)',
+  borderEmphasis: 'rgba(212, 175, 55, 0.6)',
+
+  // 文字
+  textPrimary: 'rgba(255, 255, 255, 0.95)',
+  textSecondary: 'rgba(255, 255, 255, 0.7)',
+  textMuted: 'rgba(255, 255, 255, 0.5)',
+  textDim: 'rgba(255, 255, 255, 0.3)',
+
+  // 状态
+  positive: '#EF4444',
+  negative: '#22C55E',
+  warning: '#F59E0B',
+  info: '#3B82F6',
+} as const;
+
+/**
+ * 发光效果
+ */
+export const GLOW = {
+  goldSm: '0 0 8px rgba(212, 175, 55, 0.3)',
+  goldMd: '0 0 16px rgba(212, 175, 55, 0.4)',
+  goldLg: '0 0 32px rgba(212, 175, 55, 0.5)',
+  goldPulse: '0 0 20px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.3)',
+  textGold: '0 0 10px rgba(212, 175, 55, 0.5)',
+} as const;
+
+/**
+ * 玻璃效果
+ */
+export const GLASS = {
+  blur: 'blur(16px)',
+  blurSm: 'blur(8px)',
+  blurLg: 'blur(24px)',
+  bgLight: 'rgba(255, 255, 255, 0.03)',
+  bgDark: 'rgba(0, 0, 0, 0.2)',
+  bgGold: 'rgba(212, 175, 55, 0.05)',
+} as const;
+
+/**
+ * 玻璃态卡片样式（可直接 spread 到组件）
+ */
+export const glassCardStyle = {
+  bg: COLORS.bgGlass,
+  borderRadius: '12px',
+  border: `1px solid ${COLORS.border}`,
+  backdropFilter: GLASS.blur,
+  transition: 'all 0.2s ease',
+  _hover: {
+    borderColor: COLORS.borderHover,
+    bg: 'rgba(15, 18, 35, 0.7)',
+  },
+} as const;