feat(Concept): 优化日期选择器布局和排序方式显示

日期选择器布局调整:
- TradeDatePicker 新增 showLatestTradeDateTip prop 控制是否显示最新日期提示
- 快捷按钮(今天/昨天/一周前/一月前)移到日期输入框后
- 「数据更新至」提示移到最右侧,样式更低调避免误认为按钮

排序方式条件显示:
- 排序方式下拉框仅在列表视图(viewMode='list')显示
- 其他视图(3D图/层级图)隐藏排序方式,视图切换按钮自动靠右

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-16 13:10:00 +08:00
parent fba95a6701
commit c962b3a550
2 changed files with 85 additions and 58 deletions

View File

@@ -31,6 +31,8 @@ export interface TradeDatePickerProps {
showIcon?: boolean; showIcon?: boolean;
/** 是否使用深色模式(强制覆盖 Chakra 颜色模式) */ /** 是否使用深色模式(强制覆盖 Chakra 颜色模式) */
isDarkMode?: boolean; isDarkMode?: boolean;
/** 是否显示最新交易日期提示,默认 true */
showLatestTradeDateTip?: boolean;
} }
/** /**
@@ -50,6 +52,7 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
inputWidth = { base: '100%', lg: '200px' }, inputWidth = { base: '100%', lg: '200px' },
showIcon = true, showIcon = true,
isDarkMode = false, isDarkMode = false,
showLatestTradeDateTip = true,
}) => { }) => {
// 颜色主题 - 支持 isDarkMode 强制覆盖 // 颜色主题 - 支持 isDarkMode 强制覆盖
const defaultLabelColor = useColorModeValue('purple.700', 'purple.300'); const defaultLabelColor = useColorModeValue('purple.700', 'purple.300');
@@ -142,21 +145,21 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
} : undefined} } : undefined}
/> />
{/* 最新交易日期提示 */} {/* 最新交易日期提示 - 靠右显示,样式更低调避免误认为按钮 */}
{latestTradeDate && ( {showLatestTradeDateTip && latestTradeDate && (
<Tooltip label="数据库中最新的交易日期"> <Tooltip label="数据库中最新的交易日期">
<HStack <HStack
spacing={2} spacing={1.5}
bg={tipBg} ml="auto"
px={3} px={2}
py={1.5} py={1}
borderRadius="full" opacity={0.7}
border="1px solid" _hover={{ opacity: 1 }}
borderColor={tipBorderColor} transition="opacity 0.2s"
> >
<Icon as={InfoIcon} color={tipIconColor} boxSize={3} /> <Icon as={InfoIcon} color={tipIconColor} boxSize={3} />
<Text fontSize="sm" color={tipTextColor} fontWeight="medium"> <Text fontSize="xs" color={tipTextColor}>
: {latestTradeDate.toLocaleDateString('zh-CN')} {latestTradeDate.toLocaleDateString('zh-CN')}
</Text> </Text>
</HStack> </HStack>
</Tooltip> </Tooltip>

View File

@@ -1417,7 +1417,7 @@ const ConceptCenter = () => {
align={{ base: 'stretch', lg: 'center' }} align={{ base: 'stretch', lg: 'center' }}
gap={4} gap={4}
> >
{/* 使用通用日期选择器组件 */} {/* 使用通用日期选择器组件 - 不显示最新日期提示,由下方单独渲染 */}
<TradeDatePicker <TradeDatePicker
value={selectedDate} value={selectedDate}
onChange={(date) => { onChange={(date) => {
@@ -1432,9 +1432,10 @@ const ConceptCenter = () => {
latestTradeDate={latestTradeDate} latestTradeDate={latestTradeDate}
label="交易日期" label="交易日期"
isDarkMode={true} isDarkMode={true}
showLatestTradeDateTip={false}
/> />
{/* 快捷按钮 - 深色主题,更有区分度 */} {/* 快捷按钮 - 紧跟日期选择器 */}
<ButtonGroup size="sm" flexWrap="wrap" spacing={2}> <ButtonGroup size="sm" flexWrap="wrap" spacing={2}>
<Button <Button
onClick={() => handleQuickDateSelect(0)} onClick={() => handleQuickDateSelect(0)}
@@ -1505,6 +1506,26 @@ const ConceptCenter = () => {
一月前 一月前
</Button> </Button>
</ButtonGroup> </ButtonGroup>
{/* 最新交易日期提示 - 靠右显示 */}
{latestTradeDate && (
<Tooltip label="数据库中最新的交易日期">
<HStack
spacing={1.5}
ml="auto"
px={2}
py={1}
opacity={0.7}
_hover={{ opacity: 1 }}
transition="opacity 0.2s"
>
<Icon as={InfoIcon} color="blue.300" boxSize={3} />
<Text fontSize="xs" color="blue.200">
数据更新至 {latestTradeDate.toLocaleDateString('zh-CN')}
</Text>
</HStack>
</Tooltip>
)}
</Flex> </Flex>
</Box> </Box>
); );
@@ -1752,6 +1773,8 @@ const ConceptCenter = () => {
align={{ base: 'stretch', md: 'center' }} align={{ base: 'stretch', md: 'center' }}
gap={4} gap={4}
> >
{/* 排序方式 - 仅在列表视图显示 */}
{viewMode === 'list' && (
<HStack spacing={4} align="center"> <HStack spacing={4} align="center">
<Icon as={FaTags} boxSize={4} color="purple.300" /> <Icon as={FaTags} boxSize={4} color="purple.300" />
<Text fontWeight="bold" color="white">排序方式</Text> <Text fontWeight="bold" color="white">排序方式</Text>
@@ -1796,8 +1819,9 @@ const ConceptCenter = () => {
</Tooltip> </Tooltip>
)} )}
</HStack> </HStack>
)}
<ButtonGroup size="sm" isAttached variant="outline"> <ButtonGroup size="sm" isAttached variant="outline" ml={viewMode !== 'list' ? 'auto' : undefined}>
<Tooltip label="概念矩形树图" placement="top"> <Tooltip label="概念矩形树图" placement="top">
<IconButton <IconButton
icon={<FaCube />} icon={<FaCube />}