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

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

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

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

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

@@ -0,0 +1,35 @@
+// src/views/Company/components/CompanyHeader/WatchlistButton.js
+// 自选股按钮组件
+
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+import { StarIcon } from '@chakra-ui/icons';
+
+/**
+ * 自选股按钮组件
+ *
+ * @param {Object} props
+ * @param {boolean} props.isInWatchlist - 是否已在自选股中
+ * @param {boolean} props.isLoading - 是否正在加载
+ * @param {Function} props.onClick - 点击回调
+ */
+const WatchlistButton = ({
+  isInWatchlist,
+  isLoading,
+  onClick,
+}) => {
+  return (
+    <Button
+      colorScheme={isInWatchlist ? 'yellow' : 'teal'}
+      variant={isInWatchlist ? 'solid' : 'outline'}
+      size="lg"
+      onClick={onClick}
+      leftIcon={<StarIcon />}
+      isLoading={isLoading}
+    >
+      {isInWatchlist ? '已关注' : '关注'}
+    </Button>
+  );
+};
+
+export default WatchlistButton;

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;