fix(ScoreBar): 修复评分标题在深色背景上不清晰问题

- 标题文字颜色改为金色 (#F4D03F)
- 图标颜色调整为 colorScheme.400,提高对比度

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-26 15:36:13 +08:00
parent 03c925b53d
commit e93d1e5e81

View File

@@ -5,20 +5,23 @@
* 使用位置:竞争力分析区域(共 8 处) * 使用位置:竞争力分析区域(共 8 处)
*/ */
import React from 'react'; import React from "react";
import { Box, HStack, Text, Badge, Progress, Icon } from '@chakra-ui/react'; import { Box, HStack, Text, Badge, Progress, Icon } from "@chakra-ui/react";
import type { ScoreBarProps } from '../types'; import type { ScoreBarProps } from "../types";
/** /**
* 根据分数百分比获取颜色方案 * 根据分数百分比获取颜色方案
*/ */
const getColorScheme = (percentage: number): string => { const getColorScheme = (percentage: number): string => {
if (percentage >= 80) return 'purple'; if (percentage >= 80) return "purple";
if (percentage >= 60) return 'blue'; if (percentage >= 60) return "blue";
if (percentage >= 40) return 'yellow'; if (percentage >= 40) return "yellow";
return 'orange'; return "orange";
}; };
// 黑金主题颜色
const THEME_GOLD = "#F4D03F";
const ScoreBar: React.FC<ScoreBarProps> = ({ label, score, icon }) => { const ScoreBar: React.FC<ScoreBarProps> = ({ label, score, icon }) => {
const percentage = ((score || 0) / 100) * 100; const percentage = ((score || 0) / 100) * 100;
const colorScheme = getColorScheme(percentage); const colorScheme = getColorScheme(percentage);
@@ -27,10 +30,8 @@ const ScoreBar: React.FC<ScoreBarProps> = ({ label, score, icon }) => {
<Box> <Box>
<HStack justify="space-between" mb={1}> <HStack justify="space-between" mb={1}>
<HStack> <HStack>
{icon && ( {icon && <Icon as={icon} boxSize={4} color={`${colorScheme}.400`} />}
<Icon as={icon} boxSize={4} color={`${colorScheme}.500`} /> <Text fontSize="sm" fontWeight="medium" color={THEME_GOLD}>
)}
<Text fontSize="sm" fontWeight="medium">
{label} {label}
</Text> </Text>
</HStack> </HStack>