更新ios
This commit is contained in:
213
src/components/Navbars/components/NavStockSearch/index.js
Normal file
213
src/components/Navbars/components/NavStockSearch/index.js
Normal file
@@ -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;
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user