feat: 添加Company 页面头部组件 CompanyHeader
index.js # 组合导出 SearchBar.js # 股票搜索栏 WatchlistButton.js # 自选股按钮
This commit is contained in:
59
src/views/Company/components/CompanyHeader/SearchBar.js
Normal file
59
src/views/Company/components/CompanyHeader/SearchBar.js
Normal file
@@ -0,0 +1,59 @@
|
||||
// src/views/Company/components/CompanyHeader/SearchBar.js
|
||||
// 股票搜索栏组件
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
HStack,
|
||||
Input,
|
||||
Button,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
} from '@chakra-ui/react';
|
||||
import { SearchIcon } from '@chakra-ui/icons';
|
||||
|
||||
/**
|
||||
* 股票搜索栏组件
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {string} props.inputCode - 输入框当前值
|
||||
* @param {Function} props.onInputChange - 输入变化回调
|
||||
* @param {Function} props.onSearch - 搜索按钮点击回调
|
||||
* @param {Function} props.onKeyPress - 键盘事件回调
|
||||
*/
|
||||
const SearchBar = ({
|
||||
inputCode,
|
||||
onInputChange,
|
||||
onSearch,
|
||||
onKeyPress,
|
||||
}) => {
|
||||
return (
|
||||
<HStack spacing={3}>
|
||||
<InputGroup size="lg" maxW="300px">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.400" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
placeholder="输入股票代码"
|
||||
value={inputCode}
|
||||
onChange={(e) => onInputChange(e.target.value)}
|
||||
onKeyPress={onKeyPress}
|
||||
borderRadius="md"
|
||||
_focus={{
|
||||
borderColor: 'blue.500',
|
||||
boxShadow: '0 0 0 1px #3182ce',
|
||||
}}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
onClick={onSearch}
|
||||
leftIcon={<SearchIcon />}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
Reference in New Issue
Block a user