From 96ee1a7f5c7f31622d711aa0da00394e952cb72a Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 18 Dec 2025 18:29:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor(theme):=20=E7=BB=9F=E4=B8=80=E9=BB=91?=
 =?UTF-8?q?=E9=87=91=E4=B8=BB=E9=A2=98=E5=B8=B8=E9=87=8F=EF=BC=8C=E5=87=8F?=
 =?UTF-8?q?=E5=B0=91=E7=A1=AC=E7=BC=96=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../components/BusinessInfoPanel.tsx          | 49 ++++-------
 src/views/Company/theme/index.ts              | 88 ++++++++++++++++++-
 2 files changed, 105 insertions(+), 32 deletions(-)

diff --git a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
index bc8b99d3..8e4a1b1f 100644
--- 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",
diff --git a/src/views/Company/theme/index.ts b/src/views/Company/theme/index.ts
index 632e5b32..10f75a8f 100644
--- 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;