From c962b3a550639f6d01ad5a1447d837834e4a2f47 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 13:10:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(Concept):=20=E4=BC=98=E5=8C=96=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E6=96=B9=E5=BC=8F=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/TradeDatePicker/index.tsx |  25 ++---
 src/views/Concept/index.js               | 118 ++++++++++++++---------
 2 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/src/components/TradeDatePicker/index.tsx b/src/components/TradeDatePicker/index.tsx
index a3df510e..65835426 100644
--- a/src/components/TradeDatePicker/index.tsx
+++ b/src/components/TradeDatePicker/index.tsx
@@ -31,6 +31,8 @@ export interface TradeDatePickerProps {
   showIcon?: boolean;
   /** 是否使用深色模式（强制覆盖 Chakra 颜色模式） */
   isDarkMode?: boolean;
+  /** 是否显示最新交易日期提示，默认 true */
+  showLatestTradeDateTip?: boolean;
 }
 
 /**
@@ -50,6 +52,7 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
   inputWidth = { base: '100%', lg: '200px' },
   showIcon = true,
   isDarkMode = false,
+  showLatestTradeDateTip = true,
 }) => {
   // 颜色主题 - 支持 isDarkMode 强制覆盖
   const defaultLabelColor = useColorModeValue('purple.700', 'purple.300');
@@ -142,21 +145,21 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
         } : undefined}
       />
 
-      {/* 最新交易日期提示 */}
-      {latestTradeDate && (
+      {/* 最新交易日期提示 - 靠右显示，样式更低调避免误认为按钮 */}
+      {showLatestTradeDateTip && latestTradeDate && (
         <Tooltip label="数据库中最新的交易日期">
           <HStack
-            spacing={2}
-            bg={tipBg}
-            px={3}
-            py={1.5}
-            borderRadius="full"
-            border="1px solid"
-            borderColor={tipBorderColor}
+            spacing={1.5}
+            ml="auto"
+            px={2}
+            py={1}
+            opacity={0.7}
+            _hover={{ opacity: 1 }}
+            transition="opacity 0.2s"
           >
             <Icon as={InfoIcon} color={tipIconColor} boxSize={3} />
-            <Text fontSize="sm" color={tipTextColor} fontWeight="medium">
-              最新: {latestTradeDate.toLocaleDateString('zh-CN')}
+            <Text fontSize="xs" color={tipTextColor}>
+              数据更新至 {latestTradeDate.toLocaleDateString('zh-CN')}
             </Text>
           </HStack>
         </Tooltip>
diff --git a/src/views/Concept/index.js b/src/views/Concept/index.js
index a7e61fa9..9ce1b7b5 100644
--- a/src/views/Concept/index.js
+++ b/src/views/Concept/index.js
@@ -1417,7 +1417,7 @@ const ConceptCenter = () => {
                 align={{ base: 'stretch', lg: 'center' }}
                 gap={4}
             >
-                {/* 使用通用日期选择器组件 */}
+                {/* 使用通用日期选择器组件 - 不显示最新日期提示，由下方单独渲染 */}
                 <TradeDatePicker
                     value={selectedDate}
                     onChange={(date) => {
@@ -1432,9 +1432,10 @@ const ConceptCenter = () => {
                     latestTradeDate={latestTradeDate}
                     label="交易日期"
                     isDarkMode={true}
+                    showLatestTradeDateTip={false}
                 />
 
-                {/* 快捷按钮 - 深色主题，更有区分度 */}
+                {/* 快捷按钮 - 紧跟日期选择器 */}
                 <ButtonGroup size="sm" flexWrap="wrap" spacing={2}>
                     <Button
                         onClick={() => handleQuickDateSelect(0)}
@@ -1505,6 +1506,26 @@ const ConceptCenter = () => {
                         一月前
                     </Button>
                 </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>
         </Box>
     );
@@ -1752,52 +1773,55 @@ const ConceptCenter = () => {
                                     align={{ base: 'stretch', md: 'center' }}
                                     gap={4}
                                 >
-                                    <HStack spacing={4} align="center">
-                                        <Icon as={FaTags} boxSize={4} color="purple.300" />
-                                        <Text fontWeight="bold" color="white">排序方式：</Text>
-                                        <Select
-                                            value={sortBy}
-                                            onChange={(e) => handleSortChange(e.target.value)}
-                                            width="200px"
-                                            focusBorderColor="purple.400"
-                                            borderColor="whiteAlpha.300"
-                                            borderRadius="lg"
-                                            fontWeight="medium"
-                                            color="white"
-                                            bg="whiteAlpha.50"
-                                            _hover={{ borderColor: 'purple.400' }}
-                                            sx={{
-                                                option: {
-                                                    bg: 'gray.800',
-                                                    color: 'white',
-                                                },
-                                            }}
-                                        >
-                                            <option value="change_pct">涨跌幅</option>
-                                            <option value="_score">相关度</option>
-                                            <option value="stock_count">股票数量</option>
-                                            <option value="outbreak_date">爆发日期</option>
-                                        </Select>
-                                        {searchQuery && sortBy === '_score' && (
-                                            <Tooltip label="搜索时自动切换到相关度排序，以显示最匹配的结果。您也可以手动切换其他排序方式。">
-                                                <HStack
-                                                    spacing={1}
-                                                    bg="blue.500"
-                                                    px={3}
-                                                    py={1}
-                                                    borderRadius="full"
-                                                    boxShadow="0 0 10px rgba(59, 130, 246, 0.4)"
-                                                >
-                                                    <Icon as={InfoIcon} color="white" boxSize={3} />
-                                                    <Text fontSize="xs" color="white" fontWeight="medium">
-                                                        智能排序
-                                                    </Text>
-                                                </HStack>
-                                            </Tooltip>
-                                        )}
-                                    </HStack>
+                                    {/* 排序方式 - 仅在列表视图显示 */}
+                                    {viewMode === 'list' && (
+                                        <HStack spacing={4} align="center">
+                                            <Icon as={FaTags} boxSize={4} color="purple.300" />
+                                            <Text fontWeight="bold" color="white">排序方式：</Text>
+                                            <Select
+                                                value={sortBy}
+                                                onChange={(e) => handleSortChange(e.target.value)}
+                                                width="200px"
+                                                focusBorderColor="purple.400"
+                                                borderColor="whiteAlpha.300"
+                                                borderRadius="lg"
+                                                fontWeight="medium"
+                                                color="white"
+                                                bg="whiteAlpha.50"
+                                                _hover={{ borderColor: 'purple.400' }}
+                                                sx={{
+                                                    option: {
+                                                        bg: 'gray.800',
+                                                        color: 'white',
+                                                    },
+                                                }}
+                                            >
+                                                <option value="change_pct">涨跌幅</option>
+                                                <option value="_score">相关度</option>
+                                                <option value="stock_count">股票数量</option>
+                                                <option value="outbreak_date">爆发日期</option>
+                                            </Select>
+                                            {searchQuery && sortBy === '_score' && (
+                                                <Tooltip label="搜索时自动切换到相关度排序，以显示最匹配的结果。您也可以手动切换其他排序方式。">
+                                                    <HStack
+                                                        spacing={1}
+                                                        bg="blue.500"
+                                                        px={3}
+                                                        py={1}
+                                                        borderRadius="full"
+                                                        boxShadow="0 0 10px rgba(59, 130, 246, 0.4)"
+                                                    >
+                                                        <Icon as={InfoIcon} color="white" boxSize={3} />
+                                                        <Text fontSize="xs" color="white" fontWeight="medium">
+                                                            智能排序
+                                                        </Text>
+                                                    </HStack>
+                                                </Tooltip>
+                                            )}
+                                        </HStack>
+                                    )}
 
-                                    <ButtonGroup size="sm" isAttached variant="outline">
+                                    <ButtonGroup size="sm" isAttached variant="outline" ml={viewMode !== 'list' ? 'auto' : undefined}>
                                         <Tooltip label="概念矩形树图" placement="top">
                                             <IconButton
                                                 icon={<FaCube />}