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:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user