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,
|
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"
|
||||||
|
|||||||
@@ -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) {
|
||||||
// 触发变化回调(用于追踪)
|
// 触发变化回调(用于追踪)
|
||||||
|
|||||||
Reference in New Issue
Block a user