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
@@ -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>
|
||||||
|
|||||||
@@ -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,52 +1773,55 @@ const ConceptCenter = () => {
|
|||||||
align={{ base: 'stretch', md: 'center' }}
|
align={{ base: 'stretch', md: 'center' }}
|
||||||
gap={4}
|
gap={4}
|
||||||
>
|
>
|
||||||
<HStack spacing={4} align="center">
|
{/* 排序方式 - 仅在列表视图显示 */}
|
||||||
<Icon as={FaTags} boxSize={4} color="purple.300" />
|
{viewMode === 'list' && (
|
||||||
<Text fontWeight="bold" color="white">排序方式：</Text>
|
<HStack spacing={4} align="center">
|
||||||
<Select
|
<Icon as={FaTags} boxSize={4} color="purple.300" />
|
||||||
value={sortBy}
|
<Text fontWeight="bold" color="white">排序方式：</Text>
|
||||||
onChange={(e) => handleSortChange(e.target.value)}
|
<Select
|
||||||
width="200px"
|
value={sortBy}
|
||||||
focusBorderColor="purple.400"
|
onChange={(e) => handleSortChange(e.target.value)}
|
||||||
borderColor="whiteAlpha.300"
|
width="200px"
|
||||||
borderRadius="lg"
|
focusBorderColor="purple.400"
|
||||||
fontWeight="medium"
|
borderColor="whiteAlpha.300"
|
||||||
color="white"
|
borderRadius="lg"
|
||||||
bg="whiteAlpha.50"
|
fontWeight="medium"
|
||||||
_hover={{ borderColor: 'purple.400' }}
|
color="white"
|
||||||
sx={{
|
bg="whiteAlpha.50"
|
||||||
option: {
|
_hover={{ borderColor: 'purple.400' }}
|
||||||
bg: 'gray.800',
|
sx={{
|
||||||
color: 'white',
|
option: {
|
||||||
},
|
bg: 'gray.800',
|
||||||
}}
|
color: 'white',
|
||||||
>
|
},
|
||||||
<option value="change_pct">涨跌幅</option>
|
}}
|
||||||
<option value="_score">相关度</option>
|
>
|
||||||
<option value="stock_count">股票数量</option>
|
<option value="change_pct">涨跌幅</option>
|
||||||
<option value="outbreak_date">爆发日期</option>
|
<option value="_score">相关度</option>
|
||||||
</Select>
|
<option value="stock_count">股票数量</option>
|
||||||
{searchQuery && sortBy === '_score' && (
|
<option value="outbreak_date">爆发日期</option>
|
||||||
<Tooltip label="搜索时自动切换到相关度排序，以显示最匹配的结果。您也可以手动切换其他排序方式。">
|
</Select>
|
||||||
<HStack
|
{searchQuery && sortBy === '_score' && (
|
||||||
spacing={1}
|
<Tooltip label="搜索时自动切换到相关度排序，以显示最匹配的结果。您也可以手动切换其他排序方式。">
|
||||||
bg="blue.500"
|
<HStack
|
||||||
px={3}
|
spacing={1}
|
||||||
py={1}
|
bg="blue.500"
|
||||||
borderRadius="full"
|
px={3}
|
||||||
boxShadow="0 0 10px rgba(59, 130, 246, 0.4)"
|
py={1}
|
||||||
>
|
borderRadius="full"
|
||||||
<Icon as={InfoIcon} color="white" boxSize={3} />
|
boxShadow="0 0 10px rgba(59, 130, 246, 0.4)"
|
||||||
<Text fontSize="xs" color="white" fontWeight="medium">
|
>
|
||||||
智能排序
|
<Icon as={InfoIcon} color="white" boxSize={3} />
|
||||||
</Text>
|
<Text fontSize="xs" color="white" fontWeight="medium">
|
||||||
</HStack>
|
智能排序
|
||||||
</Tooltip>
|
</Text>
|
||||||
)}
|
</HStack>
|
||||||
</HStack>
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</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 />}
|
||||||
|
|||||||
Reference in New Issue
Block a user