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>
This commit is contained in:
zdl
2025-12-18 18:29:42 +08:00
parent 50d59fd2ad
commit 3953efc2ed
2 changed files with 105 additions and 32 deletions

View File

@@ -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",