style: StockQuoteCard 黑金主题 UI 调整

颜色配置:
- 背景:纯黑 #000000
- 边框/标签:金色 #C9A961
- 主要文字:亮金 #F4D03F
- 涨:红色 #F44336(红涨绿跌)
- 跌:绿色 #4CAF50

字体大小:
- 股票价格:48px bold
- 股票名称/代码:24px bold
- 涨跌幅 Badge:20px bold
- 关键指标数值:16px bold
- 标签文字:14px

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-09 18:54:19 +08:00
parent 4274341ed5
commit 4f38505a80

View File

@@ -51,16 +51,18 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
data = mockStockQuoteData, data = mockStockQuoteData,
isLoading = false, isLoading = false,
}) => { }) => {
// 颜色配置 // 黑金主题颜色配置
const cardBg = 'white'; const cardBg = '#000000';
const borderColor = 'gray.200'; const borderColor = '#C9A961';
const labelColor = 'gray.500'; const labelColor = '#C9A961';
const valueColor = 'gray.800'; const valueColor = '#F4D03F';
const sectionTitleColor = 'gray.600'; const sectionTitleColor = '#F4D03F';
// 涨跌颜色 // 涨跌颜色(红涨绿跌)
const priceColor = data.changePercent >= 0 ? 'green.500' : 'red.500'; const upColor = '#F44336'; // 涨 - 红色
const inflowColor = data.mainNetInflow >= 0 ? 'green.500' : 'red.500'; const downColor = '#4CAF50'; // 跌 - 绿色
const priceColor = data.changePercent >= 0 ? upColor : downColor;
const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;
if (isLoading) { if (isLoading) {
return ( return (
@@ -78,25 +80,26 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
{/* 顶部:股票名称 + 更新时间 */} {/* 顶部:股票名称 + 更新时间 */}
<Flex justify="space-between" align="center" mb={4}> <Flex justify="space-between" align="center" mb={4}>
<HStack spacing={3}> <HStack spacing={3}>
<Text fontSize="xl" fontWeight="bold" color={valueColor}> <Text fontSize="24px" fontWeight="bold" color={valueColor}>
{data.name} {data.name}
</Text> </Text>
<Text fontSize="md" color={labelColor}> <Text fontSize="24px" fontWeight="bold" color={labelColor}>
({data.code}) ({data.code})
</Text> </Text>
{data.indexTags.map((tag) => ( {data.indexTags.map((tag) => (
<Badge <Badge
key={tag} key={tag}
variant="outline" variant="outline"
colorScheme="gray" borderColor={borderColor}
fontSize="xs" color={labelColor}
fontSize="14px"
px={2} px={2}
> >
{tag} {tag}
</Badge> </Badge>
))} ))}
</HStack> </HStack>
<Text fontSize="sm" color={labelColor}> <Text fontSize="14px" color={labelColor}>
{data.updateTime} {data.updateTime}
</Text> </Text>
</Flex> </Flex>
@@ -106,28 +109,31 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
{/* 左栏:价格信息 */} {/* 左栏:价格信息 */}
<Box flex="1"> <Box flex="1">
<HStack align="baseline" spacing={3} mb={3}> <HStack align="baseline" spacing={3} mb={3}>
<Text fontSize="3xl" fontWeight="bold" color={priceColor}> <Text fontSize="48px" fontWeight="bold" color={priceColor}>
{formatPrice(data.currentPrice)} {formatPrice(data.currentPrice)}
</Text> </Text>
<Badge <Badge
colorScheme={data.changePercent >= 0 ? 'green' : 'red'} bg={data.changePercent >= 0 ? upColor : downColor}
fontSize="md" color="#FFFFFF"
px={2} fontSize="20px"
py={0.5} fontWeight="bold"
px={3}
py={1}
borderRadius="md"
> >
{formatChangePercent(data.changePercent)} {formatChangePercent(data.changePercent)}
</Badge> </Badge>
</HStack> </HStack>
<HStack spacing={6} color={labelColor} fontSize="sm"> <HStack spacing={6} fontSize="14px">
<Text> <Text color={labelColor}>
<Text as="span" color={valueColor} fontWeight="medium"> <Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
{formatPrice(data.todayOpen)} {formatPrice(data.todayOpen)}
</Text> </Text>
</Text> </Text>
<Text> <Text color={labelColor}>
<Text as="span" color={valueColor} fontWeight="medium"> <Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
{formatPrice(data.yesterdayClose)} {formatPrice(data.yesterdayClose)}
</Text> </Text>
</Text> </Text>
@@ -137,35 +143,35 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
{/* 中栏:关键指标 */} {/* 中栏:关键指标 */}
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}> <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
<Text <Text
fontSize="sm" fontSize="14px"
fontWeight="medium" fontWeight="bold"
color={sectionTitleColor} color={sectionTitleColor}
mb={3} mb={3}
> >
</Text> </Text>
<VStack align="stretch" spacing={2} fontSize="sm"> <VStack align="stretch" spacing={2} fontSize="14px">
<HStack justify="space-between"> <HStack justify="space-between">
<Text color={labelColor}>(PE)</Text> <Text color={labelColor}>(PE)</Text>
<Text color={valueColor} fontWeight="medium"> <Text color={valueColor} fontWeight="bold" fontSize="16px">
{data.pe.toFixed(2)} {data.pe.toFixed(2)}
</Text> </Text>
</HStack> </HStack>
<HStack justify="space-between"> <HStack justify="space-between">
<Text color={labelColor}>(PB)</Text> <Text color={labelColor}>(PB)</Text>
<Text color={valueColor} fontWeight="medium"> <Text color={valueColor} fontWeight="bold" fontSize="16px">
{data.pb.toFixed(2)} {data.pb.toFixed(2)}
</Text> </Text>
</HStack> </HStack>
<HStack justify="space-between"> <HStack justify="space-between">
<Text color={labelColor}></Text> <Text color={labelColor}></Text>
<Text color={valueColor} fontWeight="medium"> <Text color={valueColor} fontWeight="bold" fontSize="16px">
{data.marketCap} {data.marketCap}
</Text> </Text>
</HStack> </HStack>
<HStack justify="space-between"> <HStack justify="space-between">
<Text color={labelColor}>52</Text> <Text color={labelColor}>52</Text>
<Text color={valueColor} fontWeight="medium"> <Text color={valueColor} fontWeight="bold" fontSize="16px">
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)} {formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
</Text> </Text>
</HStack> </HStack>
@@ -175,23 +181,23 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
{/* 右栏:主力动态 */} {/* 右栏:主力动态 */}
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}> <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
<Text <Text
fontSize="sm" fontSize="14px"
fontWeight="medium" fontWeight="bold"
color={sectionTitleColor} color={sectionTitleColor}
mb={3} mb={3}
> >
</Text> </Text>
<VStack align="stretch" spacing={2} fontSize="sm"> <VStack align="stretch" spacing={2} fontSize="14px">
<HStack justify="space-between"> <HStack justify="space-between">
<Text color={labelColor}></Text> <Text color={labelColor}></Text>
<Text color={inflowColor} fontWeight="medium"> <Text color={inflowColor} fontWeight="bold" fontSize="16px">
{formatNetInflow(data.mainNetInflow)} {formatNetInflow(data.mainNetInflow)}
</Text> </Text>
</HStack> </HStack>
<HStack justify="space-between"> <HStack justify="space-between">
<Text color={labelColor}></Text> <Text color={labelColor}></Text>
<Text color={valueColor} fontWeight="medium"> <Text color={valueColor} fontWeight="bold" fontSize="16px">
{data.institutionHolding.toFixed(2)}% {data.institutionHolding.toFixed(2)}%
</Text> </Text>
</HStack> </HStack>
@@ -200,13 +206,15 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
<Progress <Progress
value={data.buyRatio} value={data.buyRatio}
size="sm" size="sm"
colorScheme="green" sx={{
bg="red.400" '& > div': { bg: upColor },
}}
bg={downColor}
borderRadius="full" borderRadius="full"
/> />
<HStack justify="space-between" mt={1} fontSize="xs"> <HStack justify="space-between" mt={1} fontSize="14px">
<Text color="green.500">{data.buyRatio}%</Text> <Text color={upColor}>{data.buyRatio}%</Text>
<Text color="red.500">{data.sellRatio}%</Text> <Text color={downColor}>{data.sellRatio}%</Text>
</HStack> </HStack>
</Box> </Box>
</VStack> </VStack>