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,9 +81,8 @@ const SearchBar = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Box ref={containerRef} position="relative">
|
||||
<HStack spacing={3}>
|
||||
<InputGroup size="lg" maxW="300px">
|
||||
<Box ref={containerRef} position="relative" w="300px">
|
||||
<InputGroup size="lg">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="#C9A961" />
|
||||
</InputLeftElement>
|
||||
@@ -108,22 +105,6 @@ const SearchBar = ({
|
||||
}}
|
||||
/>
|
||||
</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 && (
|
||||
@@ -132,7 +113,7 @@ const SearchBar = ({
|
||||
top="100%"
|
||||
left={0}
|
||||
mt={1}
|
||||
w="300px"
|
||||
w="100%"
|
||||
bg="#1A202C"
|
||||
border="1px solid #C9A961"
|
||||
borderRadius="md"
|
||||
|
||||
@@ -50,9 +50,10 @@ export const useCompanyStock = (options = {}) => {
|
||||
|
||||
/**
|
||||
* 执行搜索 - 更新 stockCode 和 URL
|
||||
* @param {string} [code] - 可选,直接传入股票代码(用于下拉选择)
|
||||
*/
|
||||
const handleSearch = useCallback(() => {
|
||||
const trimmedCode = inputCode?.trim();
|
||||
const handleSearch = useCallback((code) => {
|
||||
const trimmedCode = code || inputCode?.trim();
|
||||
|
||||
if (trimmedCode && trimmedCode !== stockCode) {
|
||||
// 触发变化回调(用于追踪)
|
||||
|
||||
Reference in New Issue
Block a user