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