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 处)
|
* 使用位置:竞争力分析区域(共 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>
|
||||||
|
|||||||
Reference in New Issue
Block a user