0de4a1f7af
- SearchBar: 添加股票代码/名称模糊搜索下拉列表 - SearchBar: 使用 Redux allStocks 数据源进行过滤 - SearchBar: 点击外部自动关闭下拉，选择后自动搜索 - useCompanyStock: handleKeyPress 改为 handleKeyDown（兼容性优化） - Company/index: 初始化时加载全部股票列表 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
// src/views/Company/components/CompanyHeader/index.js
|
|
// 公司详情页面头部区域组件
|
|
|
|
import React from 'react';
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
HStack,
|
|
VStack,
|
|
Heading,
|
|
Text,
|
|
} from '@chakra-ui/react';
|
|
|
|
import SearchBar from './SearchBar';
|
|
|
|
/**
|
|
* 公司详情页面头部区域组件
|
|
*
|
|
* 包含：
|
|
* - 页面标题和描述（金色主题）
|
|
* - 股票搜索栏（支持模糊搜索）
|
|
*
|
|
* @param {Object} props
|
|
* @param {string} props.inputCode - 搜索输入框值
|
|
* @param {Function} props.onInputChange - 输入变化回调
|
|
* @param {Function} props.onSearch - 搜索回调
|
|
* @param {Function} props.onKeyDown - 键盘事件回调
|
|
* @param {string} props.bgColor - 背景颜色
|
|
*/
|
|
const CompanyHeader = ({
|
|
inputCode,
|
|
onInputChange,
|
|
onSearch,
|
|
onKeyDown,
|
|
bgColor,
|
|
}) => {
|
|
return (
|
|
<Card bg={bgColor} shadow="md">
|
|
<CardBody>
|
|
<HStack justify="space-between" align="center">
|
|
{/* 标题区域 - 金色主题 */}
|
|
<VStack align="start" spacing={1}>
|
|
<Heading size="lg" color="#F4D03F">个股详情</Heading>
|
|
<Text color="#C9A961" fontSize="sm">
|
|
查看股票实时行情、财务数据和盈利预测
|
|
</Text>
|
|
</VStack>
|
|
|
|
{/* 搜索栏 */}
|
|
<SearchBar
|
|
inputCode={inputCode}
|
|
onInputChange={onInputChange}
|
|
onSearch={onSearch}
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
</HStack>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CompanyHeader;
|