更新ios

2026-01-23 15:59:33 +08:00
parent b9177fcbf0
commit c7f340f0ed
4 changed files with 381 additions and 86 deletions
--- a/src/components/Navbars/components/NavStockSearch/index.js
+++ b/src/components/Navbars/components/NavStockSearch/index.js
@@ -0,0 +1,213 @@
+// src/components/Navbars/components/NavStockSearch/index.js
+// 导航栏股票搜索组件 - 支持代码、名称、拼音缩写搜索
+
+import React, { useRef, useEffect, useCallback, memo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  IconButton,
+  Text,
+  VStack,
+  HStack,
+  Spinner,
+  Tag,
+  Center,
+  List,
+  ListItem,
+  Flex,
+  Portal,
+} from '@chakra-ui/react';
+import { Search, X } from 'lucide-react';
+import { useStockSearch } from '@hooks/useStockSearch';
+
+/**
+ * 导航栏股票搜索组件
+ * 浅色主题，适配导航栏使用
+ */
+const NavStockSearch = memo(() => {
+  const navigate = useNavigate();
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // 浅色主题颜色配置
+  const searchIconColor = 'gray.400';
+  const inputBg = 'gray.50';
+  const dropdownBg = 'white';
+  const borderColor = 'gray.200';
+  const hoverBg = 'gray.50';
+  const textColor = 'gray.800';
+  const subTextColor = 'gray.500';
+  const accentColor = 'blue.500';
+
+  // 使用搜索 Hook
+  const {
+    searchQuery,
+    searchResults,
+    isSearching,
+    showResults,
+    handleSearch,
+    clearSearch,
+    setShowResults,
+  } = useStockSearch({ limit: 8, debounceMs: 300 });
+
+  // 点击外部关闭下拉
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowResults(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [setShowResults]);
+
+  // 选择股票 - 跳转到详情页
+  const handleSelectStock = useCallback((stock) => {
+    clearSearch();
+    navigate(`/company/${stock.stock_code}`);
+  }, [navigate, clearSearch]);
+
+  // 处理键盘事件
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter' && searchResults.length > 0) {
+      handleSelectStock(searchResults[0]);
+    } else if (e.key === 'Escape') {
+      setShowResults(false);
+      inputRef.current?.blur();
+    }
+  }, [searchResults, handleSelectStock, setShowResults]);
+
+  // 计算下拉框位置
+  const getDropdownPosition = () => {
+    if (!containerRef.current) return {};
+    const rect = containerRef.current.getBoundingClientRect();
+    return {
+      position: 'fixed',
+      top: `${rect.bottom + 8}px`,
+      left: `${rect.left}px`,
+      width: '300px',
+    };
+  };
+
+  return (
+    <Box ref={containerRef} position="relative">
+      <InputGroup size="sm" w="180px">
+        <InputLeftElement pointerEvents="none">
+          <Search color="#A0AEC0" size={14} />
+        </InputLeftElement>
+        <Input
+          ref={inputRef}
+          fontSize="sm"
+          bg={inputBg}
+          placeholder="搜索股票"
+          value={searchQuery}
+          onChange={(e) => handleSearch(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => searchQuery && searchResults.length > 0 && setShowResults(true)}
+          borderColor={borderColor}
+          borderRadius="md"
+          _hover={{ borderColor: 'gray.300' }}
+          _focus={{
+            borderColor: accentColor,
+            boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
+            bg: 'white'
+          }}
+          _placeholder={{ color: 'gray.400' }}
+        />
+        {(searchQuery || isSearching) && (
+          <InputRightElement>
+            {isSearching ? (
+              <Spinner size="xs" color={accentColor} />
+            ) : (
+              <IconButton
+                size="xs"
+                variant="ghost"
+                icon={<X size={12} />}
+                onClick={clearSearch}
+                aria-label="清除搜索"
+                color="gray.400"
+                _hover={{ bg: 'transparent', color: 'gray.600' }}
+              />
+            )}
+          </InputRightElement>
+        )}
+      </InputGroup>
+
+      {/* 搜索结果下拉 - 使用 Portal 避免被导航栏裁剪 */}
+      {showResults && (
+        <Portal>
+          <Box
+            {...getDropdownPosition()}
+            bg={dropdownBg}
+            border="1px solid"
+            borderColor={borderColor}
+            borderRadius="lg"
+            boxShadow="lg"
+            maxH="360px"
+            overflowY="auto"
+            zIndex={9999}
+          >
+            {searchResults.length > 0 ? (
+              <List spacing={0}>
+                {searchResults.map((stock, index) => (
+                  <ListItem
+                    key={stock.stock_code}
+                    px={3}
+                    py={2.5}
+                    cursor="pointer"
+                    _hover={{ bg: hoverBg }}
+                    onClick={() => handleSelectStock(stock)}
+                    borderBottomWidth={index < searchResults.length - 1 ? '1px' : '0'}
+                    borderColor="gray.100"
+                  >
+                    <Flex align="center" justify="space-between">
+                      <VStack align="start" spacing={0} flex={1}>
+                        <Text fontWeight="medium" color={textColor} fontSize="sm">
+                          {stock.stock_name}
+                        </Text>
+                        <HStack spacing={2}>
+                          <Text fontSize="xs" color={subTextColor}>
+                            {stock.stock_code}
+                          </Text>
+                          {stock.pinyin_abbr && (
+                            <Text fontSize="xs" color="gray.400">
+                              {stock.pinyin_abbr.toUpperCase()}
+                            </Text>
+                          )}
+                        </HStack>
+                      </VStack>
+                      {stock.exchange && (
+                        <Tag
+                          size="sm"
+                          colorScheme={stock.exchange === 'SH' ? 'red' : 'blue'}
+                          variant="subtle"
+                          fontSize="xs"
+                        >
+                          {stock.exchange === 'SH' ? '沪' : stock.exchange === 'SZ' ? '深' : stock.exchange}
+                        </Tag>
+                      )}
+                    </Flex>
+                  </ListItem>
+                ))}
+              </List>
+            ) : (
+              <Center p={4}>
+                <Text color={subTextColor} fontSize="sm">
+                  {searchQuery ? '未找到相关股票' : '输入代码/名称/拼音搜索'}
+                </Text>
+              </Center>
+            )}
+          </Box>
+        </Portal>
+      )}
+    </Box>
+  );
+});
+
+NavStockSearch.displayName = 'NavStockSearch';
+
+export default NavStockSearch;
--- a/src/components/Navbars/components/NavbarActions/index.js
+++ b/src/components/Navbars/components/NavbarActions/index.js
@@ -8,6 +8,7 @@ import LoginButton from '../LoginButton';
 // import CalendarButton from '../CalendarButton'; // 暂时注释
 import { DesktopUserMenu, TabletUserMenu } from '../UserMenu';
 import { MySpaceButton, MoreMenu } from '../Navigation';
+import NavStockSearch from '../NavStockSearch';

 /**
 * Navbar 右侧功能区组件
@@ -50,9 +51,10 @@ const NavbarActions = memo(({
                    {/* 投资日历 - 暂时注释 */}
                    {/* {isDesktop && <CalendarButton />} */}

-                    {/* 桌面端布局：[我的空间] | [头像][用户名] */}
+                    {/* 桌面端布局：[搜索框] [我的空间] | [头像][用户名] */}
                    {isDesktop ? (
                        <>
+                            <NavStockSearch />
                            <MySpaceButton />
                            <Divider
                                orientation="vertical"
--- a/src/views/Community/index.js
+++ b/src/views/Community/index.js
@@ -153,13 +153,16 @@ const Community = () => {
      {/* 主内容区域 - padding 由 MainLayout 统一设置 */}
      <Box ref={containerRef} pt={0} pb={0}>
        {/* ⚡ 顶部说明面板（懒加载）：产品介绍 + 沪深指数 + 热门概念词云 */}
-        <Suspense fallback={
-          <Box mb={6} p={4} borderRadius="xl" bg="rgba(255,255,255,0.02)">
-            <Skeleton height="200px" borderRadius="lg" startColor="gray.800" endColor="gray.700" />
-          </Box>
-        }>
-          <HeroPanel />
-        </Suspense>
+        {/* 📱 移动端隐藏：HeroPanel 在小屏幕上显示效果不佳，仅在 md 及以上尺寸显示 */}
+        <Box display={{ base: 'none', md: 'block' }}>
+          <Suspense fallback={
+            <Box mb={6} p={4} borderRadius="xl" bg="rgba(255,255,255,0.02)">
+              <Skeleton height="200px" borderRadius="lg" startColor="gray.800" endColor="gray.700" />
+            </Box>
+          }>
+            <HeroPanel />
+          </Suspense>
+        </Box>

        {/* 实时要闻·动态追踪 - 横向滚动 */}
        <DynamicNewsCard
--- a/src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js
+++ b/src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js
@@ -1,8 +1,21 @@
 // 关注股票面板 - 紧凑版
 import React, { useState } from 'react';
-import { Box, Text, VStack, HStack, Icon, Badge } from '@chakra-ui/react';
+import {
+  Box,
+  Text,
+  VStack,
+  HStack,
+  Icon,
+  Badge,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  Portal,
+} from '@chakra-ui/react';
 import { BarChart2, Plus } from 'lucide-react';
 import FavoriteButton from '@/components/FavoriteButton';
+import { MiniTimelineChart } from '@components/Charts/Stock';

 /**
 * 格式化涨跌幅
@@ -104,87 +117,151 @@ const WatchlistPanel = ({
              const weeklyChg = formatChange(quote?.weekly_chg ?? stock.weekly_chg);

              return (
-                <Box
+                <Popover
                  key={stock.stock_code}
-                  py={2}
-                  px={2}
-                  cursor="pointer"
-                  borderRadius="md"
-                  bg="rgba(37, 37, 64, 0.3)"
-                  _hover={{ bg: 'rgba(37, 37, 64, 0.6)' }}
-                  onClick={() => onStockClick?.(stock)}
-                  role="group"
+                  trigger="hover"
+                  placement="left"
+                  openDelay={300}
+                  closeDelay={100}
+                  isLazy
                >
-                  {/* 第一行：股票名称 + 价格/涨跌幅 + 取消关注按钮 */}
-                  <HStack justify="space-between" mb={1.5}>
-                    <VStack align="start" spacing={0} flex={1} minW={0}>
-                      <Text
-                        fontSize="xs"
-                        fontWeight="medium"
-                        color="rgba(255, 255, 255, 0.9)"
-                        noOfLines={1}
-                      >
-                        {stock.stock_name || stock.stock_code}
-                      </Text>
-                      <Text fontSize="10px" color="rgba(255, 255, 255, 0.4)">
-                        {stock.stock_code}
-                      </Text>
-                    </VStack>
-                    <HStack spacing={1}>
-                      <VStack align="end" spacing={0}>
-                        <Text fontSize="xs" fontWeight="bold" color={changeColor}>
-                          {quote?.current_price?.toFixed(2) || stock.current_price || '--'}
-                        </Text>
-                        <Text fontSize="10px" color={changeColor}>
-                          {changePercent !== undefined && changePercent !== null
-                            ? `${isUp ? '+' : ''}${Number(changePercent).toFixed(2)}%`
-                            : '--'}
-                        </Text>
-                      </VStack>
-                      <Box onClick={(e) => e.stopPropagation()}>
-                        <FavoriteButton
-                          isFavorite={true}
-                          isLoading={isRemoving}
-                          onClick={() => handleUnwatch(stock.stock_code)}
-                          size="sm"
-                          colorScheme="gold"
-                          showTooltip={true}
-                        />
-                      </Box>
-                    </HStack>
-                  </HStack>
-                  {/* 第二行：日均、周涨 Badge */}
-                  {(dailyChg || weeklyChg) && (
-                    <HStack spacing={1.5} fontSize="10px">
-                      {dailyChg && (
-                        <Badge
-                          bg="rgba(255, 255, 255, 0.08)"
-                          color={dailyChg.color}
-                          fontSize="9px"
-                          fontWeight="medium"
-                          px={1.5}
-                          py={0.5}
-                          borderRadius="sm"
-                        >
-                          日均 {dailyChg.text}
-                        </Badge>
+                  <PopoverTrigger>
+                    <Box
+                      py={2}
+                      px={2}
+                      cursor="pointer"
+                      borderRadius="md"
+                      bg="rgba(37, 37, 64, 0.3)"
+                      _hover={{ bg: 'rgba(37, 37, 64, 0.6)' }}
+                      onClick={() => onStockClick?.(stock)}
+                      role="group"
+                    >
+                      {/* 第一行：股票名称 + 价格/涨跌幅 + 取消关注按钮 */}
+                      <HStack justify="space-between" mb={1.5}>
+                        <VStack align="start" spacing={0} flex={1} minW={0}>
+                          <Text
+                            fontSize="xs"
+                            fontWeight="medium"
+                            color="rgba(255, 255, 255, 0.9)"
+                            noOfLines={1}
+                          >
+                            {stock.stock_name || stock.stock_code}
+                          </Text>
+                          <Text fontSize="10px" color="rgba(255, 255, 255, 0.4)">
+                            {stock.stock_code}
+                          </Text>
+                        </VStack>
+                        <HStack spacing={1}>
+                          <VStack align="end" spacing={0}>
+                            <Text fontSize="xs" fontWeight="bold" color={changeColor}>
+                              {quote?.current_price?.toFixed(2) || stock.current_price || '--'}
+                            </Text>
+                            <Text fontSize="10px" color={changeColor}>
+                              {changePercent !== undefined && changePercent !== null
+                                ? `${isUp ? '+' : ''}${Number(changePercent).toFixed(2)}%`
+                                : '--'}
+                            </Text>
+                          </VStack>
+                          <Box onClick={(e) => e.stopPropagation()}>
+                            <FavoriteButton
+                              isFavorite={true}
+                              isLoading={isRemoving}
+                              onClick={() => handleUnwatch(stock.stock_code)}
+                              size="sm"
+                              colorScheme="gold"
+                              showTooltip={true}
+                            />
+                          </Box>
+                        </HStack>
+                      </HStack>
+                      {/* 第二行：日均、周涨 Badge */}
+                      {(dailyChg || weeklyChg) && (
+                        <HStack spacing={1.5} fontSize="10px">
+                          {dailyChg && (
+                            <Badge
+                              bg="rgba(255, 255, 255, 0.08)"
+                              color={dailyChg.color}
+                              fontSize="9px"
+                              fontWeight="medium"
+                              px={1.5}
+                              py={0.5}
+                              borderRadius="sm"
+                            >
+                              日均 {dailyChg.text}
+                            </Badge>
+                          )}
+                          {weeklyChg && (
+                            <Badge
+                              bg="rgba(255, 255, 255, 0.08)"
+                              color={weeklyChg.color}
+                              fontSize="9px"
+                              fontWeight="medium"
+                              px={1.5}
+                              py={0.5}
+                              borderRadius="sm"
+                            >
+                              周涨 {weeklyChg.text}
+                            </Badge>
+                          )}
+                        </HStack>
                      )}
-                      {weeklyChg && (
-                        <Badge
-                          bg="rgba(255, 255, 255, 0.08)"
-                          color={weeklyChg.color}
-                          fontSize="9px"
-                          fontWeight="medium"
-                          px={1.5}
-                          py={0.5}
-                          borderRadius="sm"
+                    </Box>
+                  </PopoverTrigger>
+                  <Portal>
+                    <PopoverContent
+                      bg="rgba(26, 32, 44, 0.98)"
+                      borderColor="rgba(59, 130, 246, 0.3)"
+                      borderWidth="1px"
+                      borderRadius="lg"
+                      boxShadow="0 4px 20px rgba(0, 0, 0, 0.4)"
+                      w="280px"
+                      _focus={{ outline: 'none' }}
+                    >
+                      <PopoverBody p={3}>
+                        {/* 股票信息头部 */}
+                        <HStack justify="space-between" mb={2}>
+                          <VStack align="start" spacing={0}>
+                            <Text fontSize="sm" fontWeight="bold" color="white">
+                              {stock.stock_name}
+                            </Text>
+                            <Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
+                              {stock.stock_code}
+                            </Text>
+                          </VStack>
+                          <VStack align="end" spacing={0}>
+                            <Text fontSize="md" fontWeight="bold" color={changeColor}>
+                              {quote?.current_price?.toFixed(2) || stock.current_price || '--'}
+                            </Text>
+                            <Text fontSize="sm" fontWeight="medium" color={changeColor}>
+                              {changePercent !== undefined && changePercent !== null
+                                ? `${isUp ? '+' : ''}${Number(changePercent).toFixed(2)}%`
+                                : '--'}
+                            </Text>
+                          </VStack>
+                        </HStack>
+                        {/* 分时图 */}
+                        <Box
+                          h="100px"
+                          bg="rgba(15, 15, 22, 0.6)"
+                          borderRadius="md"
+                          p={1}
+                          border="1px solid rgba(59, 130, 246, 0.2)"
                        >
-                          周涨 {weeklyChg.text}
-                        </Badge>
-                      )}
-                    </HStack>
-                  )}
-                </Box>
+                          <MiniTimelineChart stockCode={stock.stock_code} />
+                        </Box>
+                        {/* 提示文字 */}
+                        <Text
+                          fontSize="10px"
+                          color="rgba(255, 255, 255, 0.4)"
+                          textAlign="center"
+                          mt={2}
+                        >
+                          点击查看详情
+                        </Text>
+                      </PopoverBody>
+                    </PopoverContent>
+                  </Portal>
+                </Popover>
              );
            })}
          </VStack>