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

feat: UI调整

Browse Source
This commit is contained in:
zdl
2025-11-05 18:04:49 +08:00
parent 2e89469d05
commit dc0c8e2c60
1 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/StockChangeIndicators.js
View File

@@ -21,6 +21,7 @@ const StockChangeIndicators = ({
}) => { }) => {
const isLarge = size === 'large'; const isLarge = size === 'large';
const isComfortable = size === 'comfortable'; const isComfortable = size === 'comfortable';
const isDefault = size === 'default';
// 根据涨跌幅获取数字颜色（统一颜色，不分级） // 根据涨跌幅获取数字颜色（统一颜色，不分级）
const getNumberColor = (value) => { const getNumberColor = (value) => {
@@ -89,42 +90,50 @@ const StockChangeIndicators = ({
borderWidth={isLarge ? "2px" : "1px"} borderWidth={isLarge ? "2px" : "1px"}
borderColor={borderColor} borderColor={borderColor}
borderRadius="md" borderRadius="md"
px={isLarge ? 4 : (isComfortable ? 3 : 2)} px={isLarge ? 4 : (isDefault ? 2 : (isComfortable ? 3 : 2))}
py={isLarge ? 3 : (isComfortable ? 2 : 1)} py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))}
display="flex" display="flex"
flexDirection={isLarge ? "column" : "row"} flexDirection={(isLarge || isDefault) ? "column" : "row"}
alignItems={isLarge ? "flex-start" : "center"} alignItems={(isLarge || isDefault) ? "flex-start" : "center"}
gap={isLarge ? 2 : 1} gap={(isLarge || isDefault) ? (isLarge ? 2 : 1) : 1}
maxW={isLarge ? "200px" : "none"} maxW={isLarge ? "200px" : (isDefault ? "120px" : "none")}
> >
{/* Large 模式：标签单独一行 */} {/* Large 和 Default 模式：标签单独一行 */}
{isLarge && ( {(isLarge || isDefault) && (
<Text fontSize="sm" color={labelColor} fontWeight="medium"> <Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
{label.trim()} {label.trim()}
</Text> </Text>
)} )}
{/* 数值 + 图标 */} {/* 数值 + 图标 */}
<Flex align="center" gap={isLarge ? 2 : 1}> <Flex align="center" gap={isLarge ? 2 : (isDefault ? 1 : 1)}>
{/* 三角形图标 */} {/* 三角形图标 */}
{value !== 0 && ( {value !== 0 && (
value > 0 ? ( value > 0 ? (
<TriangleUpIcon w={isLarge ? 4 : 2} h={isLarge ? 4 : 2} color={numberColor} /> <TriangleUpIcon
w={isLarge ? 4 : (isDefault ? 3 : 2)}
h={isLarge ? 4 : (isDefault ? 3 : 2)}
color={numberColor}
/>
) : ( ) : (
<TriangleDownIcon w={isLarge ? 4 : 2} h={isLarge ? 4 : 2} color={numberColor} /> <TriangleDownIcon
w={isLarge ? 4 : (isDefault ? 3 : 2)}
h={isLarge ? 4 : (isDefault ? 3 : 2)}
color={numberColor}
/>
) )
)} )}
{/* 数字 */} {/* 数字 */}
<Text <Text
fontSize={isLarge ? "2xl" : "lg"} fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
fontWeight="bold" fontWeight="bold"
color={numberColor} color={numberColor}
lineHeight="1.2" lineHeight="1.2"
whiteSpace="nowrap" whiteSpace="nowrap"
> >
{/* Default 模式：标签和数字在同一行 */} {/* Comfortable 模式：标签和数字在同一行 */}
{!isLarge && ( {!isLarge && !isDefault && (
<Text as="span" color={labelColor} fontWeight="medium" fontSize="sm"> <Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
{label} {label}
</Text> </Text>
@@ -142,7 +151,7 @@ const StockChangeIndicators = ({
} }
return ( return (
<Flex width="fit-content" justify="flex-start" align="center" gap={isLarge ? 4 : 1}> <Flex width="fit-content" justify="flex-start" align="center" gap={isLarge ? 4 : (isDefault ? 2 : 1)}>
{renderIndicator('平均涨幅', avgChange)} {renderIndicator('平均涨幅', avgChange)}
{renderIndicator('最大涨幅', maxChange)} {renderIndicator('最大涨幅', maxChange)}
{renderIndicator('周涨幅', weekChange)} {renderIndicator('周涨幅', weekChange)}