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