feat: 搜索栏交互优化 - 移除查询按钮,选择后直接跳转

- SearchBar: 移除"查询"按钮,简化交互
- SearchBar: 选择股票后直接触发搜索跳转
- useCompanyStock: handleSearch 支持直接传入股票代码参数

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-10 10:52:04 +08:00
parent c8d704363d
commit 0997cd9992
2 changed files with 29 additions and 47 deletions

View File

@@ -7,7 +7,6 @@ import {
Box, Box,
HStack, HStack,
Input, Input,
Button,
InputGroup, InputGroup,
InputLeftElement, InputLeftElement,
Text, Text,
@@ -66,12 +65,11 @@ const SearchBar = ({
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
}, []); }, []);
// 选择股票 // 选择股票 - 直接触发搜索跳转
const handleSelectStock = (stock) => { const handleSelectStock = (stock) => {
onInputChange(stock.code); onInputChange(stock.code);
setShowDropdown(false); setShowDropdown(false);
// 自动触发搜索 onSearch(stock.code);
setTimeout(() => onSearch(), 0);
}; };
// 处理键盘事件 // 处理键盘事件
@@ -83,9 +81,8 @@ const SearchBar = ({
}; };
return ( return (
<Box ref={containerRef} position="relative"> <Box ref={containerRef} position="relative" w="300px">
<HStack spacing={3}> <InputGroup size="lg">
<InputGroup size="lg" maxW="300px">
<InputLeftElement pointerEvents="none"> <InputLeftElement pointerEvents="none">
<SearchIcon color="#C9A961" /> <SearchIcon color="#C9A961" />
</InputLeftElement> </InputLeftElement>
@@ -108,22 +105,6 @@ const SearchBar = ({
}} }}
/> />
</InputGroup> </InputGroup>
<Button
size="lg"
onClick={() => {
setShowDropdown(false);
onSearch();
}}
leftIcon={<SearchIcon />}
bg="#1A202C"
color="#C9A961"
borderWidth="1px"
borderColor="#C9A961"
_hover={{ bg: '#1a1a1a', borderColor: '#F4D03F', color: '#F4D03F' }}
>
查询
</Button>
</HStack>
{/* 模糊搜索下拉列表 */} {/* 模糊搜索下拉列表 */}
{showDropdown && ( {showDropdown && (
@@ -132,7 +113,7 @@ const SearchBar = ({
top="100%" top="100%"
left={0} left={0}
mt={1} mt={1}
w="300px" w="100%"
bg="#1A202C" bg="#1A202C"
border="1px solid #C9A961" border="1px solid #C9A961"
borderRadius="md" borderRadius="md"

View File

@@ -50,9 +50,10 @@ export const useCompanyStock = (options = {}) => {
/** /**
* 执行搜索 - 更新 stockCode 和 URL * 执行搜索 - 更新 stockCode 和 URL
* @param {string} [code] - 可选,直接传入股票代码(用于下拉选择)
*/ */
const handleSearch = useCallback(() => { const handleSearch = useCallback((code) => {
const trimmedCode = inputCode?.trim(); const trimmedCode = code || inputCode?.trim();
if (trimmedCode && trimmedCode !== stockCode) { if (trimmedCode && trimmedCode !== stockCode) {
// 触发变化回调(用于追踪) // 触发变化回调(用于追踪)