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:
@@ -7,7 +7,6 @@ import {
|
||||
Box,
|
||||
HStack,
|
||||
Input,
|
||||
Button,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Text,
|
||||
@@ -66,12 +65,11 @@ const SearchBar = ({
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// 选择股票
|
||||
// 选择股票 - 直接触发搜索跳转
|
||||
const handleSelectStock = (stock) => {
|
||||
onInputChange(stock.code);
|
||||
setShowDropdown(false);
|
||||
// 自动触发搜索
|
||||
setTimeout(() => onSearch(), 0);
|
||||
onSearch(stock.code);
|
||||
};
|
||||
|
||||
// 处理键盘事件
|
||||
@@ -83,47 +81,30 @@ const SearchBar = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Box ref={containerRef} position="relative">
|
||||
<HStack spacing={3}>
|
||||
<InputGroup size="lg" maxW="300px">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="#C9A961" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
placeholder="输入股票代码或名称"
|
||||
value={inputCode}
|
||||
onChange={(e) => onInputChange(e.target.value)}
|
||||
onKeyDown={handleKeyDownWrapper}
|
||||
onFocus={() => inputCode && filteredStocks.length > 0 && setShowDropdown(true)}
|
||||
borderRadius="md"
|
||||
color="white"
|
||||
borderColor="#C9A961"
|
||||
_placeholder={{ color: '#C9A961' }}
|
||||
_focus={{
|
||||
borderColor: '#F4D03F',
|
||||
boxShadow: '0 0 0 1px #F4D03F',
|
||||
}}
|
||||
_hover={{
|
||||
borderColor: '#F4D03F',
|
||||
}}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
setShowDropdown(false);
|
||||
onSearch();
|
||||
}}
|
||||
leftIcon={<SearchIcon />}
|
||||
bg="#1A202C"
|
||||
color="#C9A961"
|
||||
borderWidth="1px"
|
||||
<Box ref={containerRef} position="relative" w="300px">
|
||||
<InputGroup size="lg">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="#C9A961" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
placeholder="输入股票代码或名称"
|
||||
value={inputCode}
|
||||
onChange={(e) => onInputChange(e.target.value)}
|
||||
onKeyDown={handleKeyDownWrapper}
|
||||
onFocus={() => inputCode && filteredStocks.length > 0 && setShowDropdown(true)}
|
||||
borderRadius="md"
|
||||
color="white"
|
||||
borderColor="#C9A961"
|
||||
_hover={{ bg: '#1a1a1a', borderColor: '#F4D03F', color: '#F4D03F' }}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</HStack>
|
||||
_placeholder={{ color: '#C9A961' }}
|
||||
_focus={{
|
||||
borderColor: '#F4D03F',
|
||||
boxShadow: '0 0 0 1px #F4D03F',
|
||||
}}
|
||||
_hover={{
|
||||
borderColor: '#F4D03F',
|
||||
}}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* 模糊搜索下拉列表 */}
|
||||
{showDropdown && (
|
||||
@@ -132,7 +113,7 @@ const SearchBar = ({
|
||||
top="100%"
|
||||
left={0}
|
||||
mt={1}
|
||||
w="300px"
|
||||
w="100%"
|
||||
bg="#1A202C"
|
||||
border="1px solid #C9A961"
|
||||
borderRadius="md"
|
||||
|
||||
Reference in New Issue
Block a user