feat: 添加Company 页面头部组件 CompanyHeader

index.js            # 组合导出
SearchBar.js        # 股票搜索栏
WatchlistButton.js  # 自选股按钮
This commit is contained in:
zdl
2025-12-09 14:59:24 +08:00
parent 15f5c445c5
commit ed1c7b9fa9
4 changed files with 354 additions and 0 deletions

View 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;