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