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

index.js            # 组合导出
SearchBar.js        # 股票搜索栏
WatchlistButton.js  # 自选股按钮

src/views/Company/components/CompanyHeader/index.js

@@ -0,0 +1,94 @@
+// src/views/Company/components/CompanyHeader/index.js
+// 公司详情页面头部区域组件
+
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  HStack,
+  VStack,
+  Heading,
+  Text,
+  Badge,
+} from '@chakra-ui/react';
+
+import SearchBar from './SearchBar';
+import WatchlistButton from './WatchlistButton';
+
+/**
+ * 公司详情页面头部区域组件
+ *
+ * 包含：
+ * - 页面标题和描述
+ * - 股票搜索栏
+ * - 自选股按钮
+ * - 当前股票代码显示
+ *
+ * @param {Object} props
+ * @param {string} props.stockCode - 当前股票代码
+ * @param {string} props.inputCode - 搜索输入框值
+ * @param {Function} props.onInputChange - 输入变化回调
+ * @param {Function} props.onSearch - 搜索回调
+ * @param {Function} props.onKeyPress - 键盘事件回调
+ * @param {boolean} props.isInWatchlist - 是否在自选股中
+ * @param {boolean} props.isWatchlistLoading - 自选股操作加载中
+ * @param {Function} props.onWatchlistToggle - 自选股切换回调
+ * @param {string} props.bgColor - 背景颜色
+ */
+const CompanyHeader = ({
+  stockCode,
+  inputCode,
+  onInputChange,
+  onSearch,
+  onKeyPress,
+  isInWatchlist,
+  isWatchlistLoading,
+  onWatchlistToggle,
+  bgColor,
+}) => {
+  return (
+    <Card bg={bgColor} shadow="md">
+      <CardBody>
+        <HStack justify="space-between" align="center">
+          {/* 标题区域 */}
+          <VStack align="start" spacing={1}>
+            <Heading size="lg">个股详情</Heading>
+            <Text color="gray.600" fontSize="sm">
+              查看股票实时行情、财务数据和盈利预测
+            </Text>
+          </VStack>
+
+          {/* 操作区域 */}
+          <HStack spacing={3}>
+            {/* 搜索栏 */}
+            <SearchBar
+              inputCode={inputCode}
+              onInputChange={onInputChange}
+              onSearch={onSearch}
+              onKeyPress={onKeyPress}
+            />
+
+            {/* 自选股按钮 */}
+            <WatchlistButton
+              isInWatchlist={isInWatchlist}
+              isLoading={isWatchlistLoading}
+              onClick={onWatchlistToggle}
+            />
+          </HStack>
+        </HStack>
+
+        {/* 当前股票信息 */}
+        <HStack mt={4} spacing={4}>
+          <Badge colorScheme="blue" fontSize="md" px={3} py={1}>
+            股票代码: {stockCode}
+          </Badge>
+          <Text fontSize="sm" color="gray.600">
+            更新时间: {new Date().toLocaleString()}
+          </Text>
+        </HStack>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CompanyHeader;