style(TradeDatePicker): 支持标签字体大小配置
- theme.ts: SIZE_CONFIG 添加 labelFontSize 配置 - types.ts: SizeConfig 类型添加 labelFontSize 字段 - index.tsx: DateLabel 组件使用 fontSize prop 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -18,12 +18,16 @@ const DateLabel = memo<{
|
|||||||
showIcon: boolean;
|
showIcon: boolean;
|
||||||
iconSize: number;
|
iconSize: number;
|
||||||
spacing: number;
|
spacing: number;
|
||||||
}>(({ label, showIcon, iconSize, spacing }) => (
|
labelColor?: string;
|
||||||
|
fontSize?: string;
|
||||||
|
}>(({ label, showIcon, iconSize, spacing, labelColor, fontSize }) => (
|
||||||
<HStack spacing={spacing}>
|
<HStack spacing={spacing}>
|
||||||
{showIcon && <Icon as={Calendar} color={COLORS.icon} boxSize={iconSize} />}
|
{showIcon && <Icon as={Calendar} color={COLORS.icon} boxSize={iconSize} />}
|
||||||
<Text fontWeight="bold" color={COLORS.label}>
|
{label && (
|
||||||
{label}:
|
<Text fontWeight="bold" color={labelColor || COLORS.label} fontSize={fontSize}>
|
||||||
</Text>
|
{label}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
</HStack>
|
</HStack>
|
||||||
));
|
));
|
||||||
DateLabel.displayName = 'DateLabel';
|
DateLabel.displayName = 'DateLabel';
|
||||||
@@ -62,6 +66,7 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
|
|||||||
showIcon = true,
|
showIcon = true,
|
||||||
showLatestTradeDateTip = true,
|
showLatestTradeDateTip = true,
|
||||||
size = 'md',
|
size = 'md',
|
||||||
|
labelColor,
|
||||||
}) => {
|
}) => {
|
||||||
const sizeConfig = SIZE_CONFIG[size];
|
const sizeConfig = SIZE_CONFIG[size];
|
||||||
|
|
||||||
@@ -99,6 +104,8 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
|
|||||||
showIcon={showIcon}
|
showIcon={showIcon}
|
||||||
iconSize={sizeConfig.iconSize}
|
iconSize={sizeConfig.iconSize}
|
||||||
spacing={sizeConfig.spacing}
|
spacing={sizeConfig.spacing}
|
||||||
|
labelColor={labelColor}
|
||||||
|
fontSize={sizeConfig.labelFontSize}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@@ -18,12 +18,14 @@ export const SIZE_CONFIG = {
|
|||||||
sm: {
|
sm: {
|
||||||
inputHeight: '32px',
|
inputHeight: '32px',
|
||||||
fontSize: 'sm',
|
fontSize: 'sm',
|
||||||
|
labelFontSize: 'xs',
|
||||||
iconSize: 4,
|
iconSize: 4,
|
||||||
spacing: 2,
|
spacing: 2,
|
||||||
},
|
},
|
||||||
md: {
|
md: {
|
||||||
inputHeight: '40px',
|
inputHeight: '40px',
|
||||||
fontSize: 'md',
|
fontSize: 'md',
|
||||||
|
labelFontSize: 'sm',
|
||||||
iconSize: 5,
|
iconSize: 5,
|
||||||
spacing: 3,
|
spacing: 3,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -28,4 +28,6 @@ export interface TradeDatePickerProps {
|
|||||||
showLatestTradeDateTip?: boolean;
|
showLatestTradeDateTip?: boolean;
|
||||||
/** 尺寸:sm | md */
|
/** 尺寸:sm | md */
|
||||||
size?: 'sm' | 'md';
|
size?: 'sm' | 'md';
|
||||||
|
/** 标签颜色 */
|
||||||
|
labelColor?: string;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user