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,
|
FaFileAlt,
|
||||||
} from "react-icons/fa";
|
} from "react-icons/fa";
|
||||||
|
|
||||||
|
// 使用统一主题
|
||||||
|
import { COLORS, GLASS, glassCardStyle } from "@views/Company/theme";
|
||||||
import { THEME } from "../config";
|
import { THEME } from "../config";
|
||||||
import { useBasicInfo } from "../../hooks/useBasicInfo";
|
import { useBasicInfo } from "../../hooks/useBasicInfo";
|
||||||
|
|
||||||
@@ -30,38 +32,23 @@ interface BusinessInfoPanelProps {
|
|||||||
stockCode: string;
|
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 }> = ({
|
const SectionTitle: React.FC<{ icon: React.ElementType; title: string }> = ({
|
||||||
icon,
|
icon,
|
||||||
title,
|
title,
|
||||||
}) => (
|
}) => (
|
||||||
<HStack spacing={2} mb={4}>
|
<HStack spacing={2} mb={4}>
|
||||||
<Icon as={icon} color={THEME.gold} boxSize={4} />
|
<Icon as={icon} color={COLORS.gold} boxSize={4} />
|
||||||
<Text
|
<Text
|
||||||
fontSize="14px"
|
fontSize="14px"
|
||||||
fontWeight="700"
|
fontWeight="700"
|
||||||
color={THEME.gold}
|
color={COLORS.gold}
|
||||||
textTransform="uppercase"
|
textTransform="uppercase"
|
||||||
letterSpacing="0.05em"
|
letterSpacing="0.05em"
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</Text>
|
</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>
|
</HStack>
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -80,12 +67,12 @@ const InfoRow: React.FC<{
|
|||||||
py={2}
|
py={2}
|
||||||
px={3}
|
px={3}
|
||||||
borderRadius="8px"
|
borderRadius="8px"
|
||||||
bg="rgba(0, 0, 0, 0.2)"
|
bg={GLASS.bgDark}
|
||||||
_hover={{ bg: "rgba(212, 175, 55, 0.05)" }}
|
_hover={{ bg: GLASS.bgGold }}
|
||||||
transition="all 0.15s ease"
|
transition="all 0.15s ease"
|
||||||
>
|
>
|
||||||
{icon && <Icon as={icon} color={THEME.goldLight} boxSize={3.5} opacity={0.8} />}
|
{icon && <Icon as={icon} color={COLORS.goldLight} boxSize={3.5} opacity={0.8} />}
|
||||||
<Text fontSize="13px" color={THEME.textSecondary} minW="70px" flexShrink={0}>
|
<Text fontSize="13px" color={COLORS.textSecondary} minW="70px" flexShrink={0}>
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</Text>
|
||||||
{isCode ? (
|
{isCode ? (
|
||||||
@@ -93,7 +80,7 @@ const InfoRow: React.FC<{
|
|||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
fontFamily="mono"
|
fontFamily="mono"
|
||||||
bg="rgba(212, 175, 55, 0.15)"
|
bg="rgba(212, 175, 55, 0.15)"
|
||||||
color={THEME.goldLight}
|
color={COLORS.goldLight}
|
||||||
px={2}
|
px={2}
|
||||||
py={0.5}
|
py={0.5}
|
||||||
borderRadius="4px"
|
borderRadius="4px"
|
||||||
@@ -104,7 +91,7 @@ const InfoRow: React.FC<{
|
|||||||
) : (
|
) : (
|
||||||
<Text
|
<Text
|
||||||
fontSize="13px"
|
fontSize="13px"
|
||||||
color={THEME.textPrimary}
|
color={COLORS.textPrimary}
|
||||||
fontWeight="500"
|
fontWeight="500"
|
||||||
noOfLines={isMultiline ? 2 : 1}
|
noOfLines={isMultiline ? 2 : 1}
|
||||||
flex={1}
|
flex={1}
|
||||||
@@ -124,18 +111,18 @@ const ServiceCard: React.FC<{
|
|||||||
<Box
|
<Box
|
||||||
p={4}
|
p={4}
|
||||||
borderRadius="10px"
|
borderRadius="10px"
|
||||||
bg="rgba(0, 0, 0, 0.2)"
|
bg={GLASS.bgDark}
|
||||||
border="1px solid rgba(212, 175, 55, 0.1)"
|
border={`1px solid ${COLORS.borderSubtle}`}
|
||||||
_hover={{ borderColor: "rgba(212, 175, 55, 0.25)" }}
|
_hover={{ borderColor: COLORS.border }}
|
||||||
transition="all 0.15s ease"
|
transition="all 0.15s ease"
|
||||||
>
|
>
|
||||||
<HStack spacing={2} mb={2}>
|
<HStack spacing={2} mb={2}>
|
||||||
<Icon as={icon} color={THEME.goldLight} boxSize={3.5} />
|
<Icon as={icon} color={COLORS.goldLight} boxSize={3.5} />
|
||||||
<Text fontSize="12px" color={THEME.textSecondary}>
|
<Text fontSize="12px" color={COLORS.textSecondary}>
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
<Text fontSize="13px" color={THEME.textPrimary} fontWeight="500" noOfLines={2}>
|
<Text fontSize="13px" color={COLORS.textPrimary} fontWeight="500" noOfLines={2}>
|
||||||
{value || "-"}
|
{value || "-"}
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -152,7 +139,7 @@ const TextSection: React.FC<{
|
|||||||
<Text
|
<Text
|
||||||
fontSize="13px"
|
fontSize="13px"
|
||||||
lineHeight="1.8"
|
lineHeight="1.8"
|
||||||
color={THEME.textSecondary}
|
color={COLORS.textSecondary}
|
||||||
sx={{
|
sx={{
|
||||||
textIndent: "2em",
|
textIndent: "2em",
|
||||||
textAlign: "justify",
|
textAlign: "justify",
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
/**
|
/**
|
||||||
* Company 页面 FUI 主题统一导出
|
* 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 { default as FUI_THEME } from './fui';
|
||||||
export {
|
export {
|
||||||
FUI_COLORS,
|
FUI_COLORS,
|
||||||
@@ -15,3 +19,85 @@ export {
|
|||||||
|
|
||||||
// 主题组件
|
// 主题组件
|
||||||
export * from './components';
|
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;
|
||||||
|
|||||||
Reference in New Issue
Block a user