vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(StockChangeIndicators): 添加 iconMode 紧凑模式

Browse Source 
- 新增 iconMode prop 支持图标+数字的紧凑显示
- iconMode 时使用 TbArrowBigUpFilled/TbArrowBigDownFilled 图标
- 保持原有标签+数字模式作为默认

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2026-01-09 16:11:15 +08:00
parent 7bb6e6c423
commit a57ca92d7c
1 changed files with 58 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/StockChangeIndicators.js
View File

@@ -4,6 +4,7 @@
import React from 'react';
import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
import { ChevronUp, ChevronDown } from 'lucide-react';
import { TbArrowBigUpFilled, TbArrowBigDownFilled } from 'react-icons/tb';
import { getChangeColor } from '../utils/colorUtils';
/**
@@ -13,12 +14,14 @@ import { getChangeColor } from '../utils/colorUtils';
* @param {number} props.maxChange - 最大超额涨幅
* @param {number} props.expectationScore - 超预期得分（0-100）
* @param {'default'|'comfortable'|'large'} props.size - 尺寸模式：default=紧凑，comfortable=舒适（事件列表），large=大卡片（详情面板）
* @param {boolean} props.iconMode - 图标模式：用 ↗/↘ 图标替代文字标签
*/
const StockChangeIndicators = ({
avgChange,
maxChange,
expectationScore,
size = 'default',
iconMode = false,
}) => {
const isLarge = size === 'large';
const isComfortable = size === 'comfortable';
@@ -96,48 +99,64 @@ const StockChangeIndicators = ({
flex="0 1 auto"
minW="0"
>
{/* Large 和 Default 模式：标签单独一行 */}
{(isLarge || isDefault) && (
<Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
{label}
</Text>
)}
{/* 数值 + 图标 */}
<Flex align="center" gap={isLarge ? 2 : (isDefault ? 1 : 1)}>
{/* 三角形图标 */}
{value !== 0 && (
value > 0 ? (
<ChevronUp
style={{ width: '8px', height: '8px', color: numberColor }}
/>
{/* iconMode 时只显示图标 + 数字 */}
{iconMode ? (
<Flex align="center" gap={1}>
{value >= 0 ? (
<TbArrowBigUpFilled size={14} style={{ color: numberColor }} />
) : (
<ChevronDown
style={{ width: '8px', height: '8px', color: numberColor }}
/>
)
)}
{/* 数字 */}
<Text
fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
fontWeight="bold"
color={numberColor}
lineHeight="1.2"
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
>
{/* Comfortable 模式：标签和数字在同一行 */}
{!isLarge && !isDefault && (
<Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
{label}{' '}
<TbArrowBigDownFilled size={14} style={{ color: numberColor }} />
)}
<Text fontSize="sm" fontWeight="bold" color={numberColor}>
{sign}{numStr}%
</Text>
</Flex>
) : (
<>
{/* Large 和 Default 模式：标签单独一行 */}
{(isLarge || isDefault) && (
<Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
{label}
</Text>
)}
{sign}{numStr}
<Text as="span" fontWeight="medium" fontSize="sm">%</Text>
</Text>
</Flex>
{/* 数值 + 图标 */}
<Flex align="center" gap={isLarge ? 2 : (isDefault ? 1 : 1)}>
{/* 三角形图标 */}
{value !== 0 && (
value > 0 ? (
<ChevronUp
style={{ width: '8px', height: '8px', color: numberColor }}
/>
) : (
<ChevronDown
style={{ width: '8px', height: '8px', color: numberColor }}
/>
)
)}
{/* 数字 */}
<Text
fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
fontWeight="bold"
color={numberColor}
lineHeight="1.2"
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
>
{/* Comfortable 模式：标签和数字在同一行 */}
{!isLarge && !isDefault && (
<Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
{label}{' '}
</Text>
)}
{sign}{numStr}
<Text as="span" fontWeight="medium" fontSize="sm">%</Text>
</Text>
</Flex>
</>
)}
</Box>
);
};