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