perf(CompanyHeader): 性能优化与代码重构

- 移除不必要的 PageTitle 子组件（纯静态内容，memo 无意义）
- 提取样式常量到 constants.ts，避免每次渲染重新创建对象
- 简化 SearchBox props，移除未使用的 stockCode
- 点击搜索图标支持发起搜索
- 移除未使用的 FUI_GLASS 导入
- 简化 CompanyHeaderProps 类型定义

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Company/components/CompanyHeader/constants.ts

@@ -0,0 +1,70 @@
+/**
+ * CompanyHeader 组件常量
+ */
+
+import { FUI_COLORS, FUI_GLOW, FUI_ANIMATION } from '../../theme/fui';
+
+/** 下拉菜单样式 */
+export const DROPDOWN_STYLE: React.CSSProperties = {
+  backgroundColor: FUI_COLORS.bg.elevated,
+  borderRadius: '6px',
+  border: `1px solid ${FUI_COLORS.gold[400]}`,
+  boxShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
+};
+
+/** 搜索图标样式 */
+export const SEARCH_ICON_STYLE: React.CSSProperties = {
+  color: FUI_COLORS.gold[400],
+  fontSize: 16,
+  cursor: 'pointer',
+};
+
+/** 输入框样式 */
+export const INPUT_STYLE: React.CSSProperties = {
+  backgroundColor: 'transparent',
+  borderColor: FUI_COLORS.gold[400],
+  borderRadius: 6,
+  height: 44,
+  color: FUI_COLORS.gold[400],
+};
+
+/** AutoComplete 宽度样式 */
+export const AUTOCOMPLETE_STYLE: React.CSSProperties = {
+  width: 320,
+};
+
+/** 搜索框容器样式 */
+export const SEARCH_BOX_SX = {
+  '.ant-select': {
+    width: '320px !important',
+  },
+  '.ant-input-affix-wrapper': {
+    backgroundColor: 'transparent !important',
+    borderColor: `${FUI_COLORS.gold[400]} !important`,
+    borderWidth: '1px !important',
+    borderRadius: '6px !important',
+    height: '44px !important',
+    padding: '0 12px !important',
+    transition: `all ${FUI_ANIMATION.duration.fast} ${FUI_ANIMATION.easing.default}`,
+    '&:hover': {
+      borderColor: `${FUI_COLORS.gold[300]} !important`,
+      boxShadow: FUI_GLOW.gold.sm,
+    },
+    '&:focus-within, &.ant-input-affix-wrapper-focused': {
+      borderColor: `${FUI_COLORS.gold[300]} !important`,
+      boxShadow: `${FUI_GLOW.gold.md} !important`,
+    },
+  },
+  '.ant-input': {
+    backgroundColor: 'transparent !important',
+    color: `${FUI_COLORS.gold[400]} !important`,
+    fontSize: '14px !important',
+    '&::placeholder': {
+      color: `${FUI_COLORS.gold[400]} !important`,
+      opacity: '0.7 !important',
+    },
+  },
+  '.ant-input-prefix': {
+    marginRight: '8px !important',
+  },
+} as const;

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

@@ -1,71 +1,41 @@
 /**
  * Company 页面顶部搜索栏组件 - FUI 科幻风格
- *
- * 设计特点：
- * - 左侧固定标题 + 副标题
- * - 右侧简洁搜索框
- * - 深色背景 + 金色强调色
  */
 
 import React, { memo, useMemo, useCallback, useState } from 'react';
-import {
+import { Box, Flex, HStack, VStack, Text } from '@chakra-ui/react';
-  Box,
-  Flex,
-  HStack,
-  VStack,
-  Text,
-} from '@chakra-ui/react';
 import { AutoComplete, Input, Spin } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { useStockSearch } from '@hooks/useStockSearch';
 import { THEME } from '../../config';
-import { FUI_COLORS, FUI_GLOW, FUI_ANIMATION, FUI_GLASS } from '../../theme/fui';
+import { FUI_COLORS, FUI_GLOW } from '../../theme/fui';
 import type { CompanyHeaderProps, StockSearchResult } from '../../types';
+import {
+  DROPDOWN_STYLE,
+  SEARCH_ICON_STYLE,
+  INPUT_STYLE,
+  AUTOCOMPLETE_STYLE,
+  SEARCH_BOX_SX,
+} from './constants';
 
-/**
+// ============================================
- * 页面标题组件
+// SearchBox 子组件
- */
+// ============================================
-const PageTitle = memo(() => (
-  <VStack align="start" spacing={1}>
-    <Text
-      fontSize="2xl"
-      fontWeight="bold"
-      color={FUI_COLORS.gold[400]}
-      letterSpacing="wider"
-      textShadow={FUI_GLOW.text.gold}
-    >
-      个股详情
-    </Text>
-    <Text
-      fontSize="sm"
-      color={FUI_COLORS.text.muted}
-      letterSpacing="wide"
-    >
-      查看股票实时行情、财务数据和盈利预测
-    </Text>
-  </VStack>
-));
 
-PageTitle.displayName = 'PageTitle';
-
-/**
- * 搜索框组件（状态自管理，减少父组件重渲染）
- */
 const SearchBox = memo<{
-  stockCode: string;
   onStockChange: (value: string) => void;
-}>(({
+}>(({ onStockChange }) => {
-  stockCode,
-  onStockChange,
-}) => {
-  // 输入状态 - 默认为空，显示 placeholder
   const [inputCode, setInputCode] = useState('');
 
-  // 股票搜索 Hook
+  const {
-  const searchHook = useStockSearch({
+    searchResults,
+    isSearching,
+    handleSearch: doSearch,
+    clearSearch,
+  } = useStockSearch({
     limit: 10,
     debounceMs: 300,
-    onSearch: () => {}, // 空回调，追踪在父组件处理
+    onSearch: () => {},
   }) as {
     searchResults: StockSearchResult[];
     isSearching: boolean;
@@ -73,11 +43,8 @@ const SearchBox = memo<{
     clearSearch: () => void;
   };
 
-  const { searchResults, isSearching, handleSearch: doSearch, clearSearch } = searchHook;
+  const stockOptions = useMemo(() => (
-
+    searchResults.map((stock: StockSearchResult) => ({
-  // 转换为 AutoComplete options
-  const stockOptions = useMemo(() => {
-    return searchResults.map((stock: StockSearchResult) => ({
       value: stock.stock_code,
       label: (
         <Flex justify="space-between" align="center" py={1}>
@@ -92,62 +59,31 @@ const SearchBox = memo<{
           )}
         </Flex>
       ),
-    }));
+    }))
-  }, [searchResults]);
+  ), [searchResults]);
+
+  const handleSearch = useCallback(() => {
+    if (inputCode) {
+      onStockChange(inputCode);
+    }
+  }, [inputCode, onStockChange]);
 
-  // 选中股票
   const handleSelect = useCallback((value: string) => {
     clearSearch();
     setInputCode(value);
-    if (value !== stockCode) {
+    onStockChange(value);
-      onStockChange(value);
+  }, [clearSearch, onStockChange]);
-    }
-  }, [clearSearch, stockCode, onStockChange]);
 
-  // 键盘事件 - 回车搜索
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && inputCode && inputCode !== stockCode) {
+    if (e.key === 'Enter') handleSearch();
-      onStockChange(inputCode);
+  }, [handleSearch]);
-    }
+
-  }, [inputCode, stockCode, onStockChange]);
+  const searchIcon = useMemo(() => (
+    <SearchOutlined style={SEARCH_ICON_STYLE} onClick={handleSearch} />
+  ), [handleSearch]);
 
   return (
-    <Box
+    <Box sx={SEARCH_BOX_SX}>
-      sx={{
-        '.ant-select': {
-          width: '320px !important',
-        },
-        '.ant-input-affix-wrapper': {
-          backgroundColor: 'transparent !important',
-          borderColor: `${FUI_COLORS.gold[400]} !important`,
-          borderWidth: '1px !important',
-          borderRadius: '6px !important',
-          height: '44px !important',
-          padding: '0 12px !important',
-          transition: `all ${FUI_ANIMATION.duration.fast} ${FUI_ANIMATION.easing.default}`,
-          '&:hover': {
-            borderColor: `${FUI_COLORS.gold[300]} !important`,
-            boxShadow: FUI_GLOW.gold.sm,
-          },
-          '&:focus-within, &.ant-input-affix-wrapper-focused': {
-            borderColor: `${FUI_COLORS.gold[300]} !important`,
-            boxShadow: `${FUI_GLOW.gold.md} !important`,
-          },
-        },
-        '.ant-input': {
-          backgroundColor: 'transparent !important',
-          color: `${FUI_COLORS.gold[400]} !important`,
-          fontSize: '14px !important',
-          '&::placeholder': {
-            color: `${FUI_COLORS.gold[400]} !important`,
-            opacity: '0.7 !important',
-          },
-        },
-        '.ant-input-prefix': {
-          marginRight: '8px !important',
-        },
-      }}
-    >
       <AutoComplete
         popupClassName="fui-autocomplete-dropdown"
         value={inputCode}
@@ -155,26 +91,15 @@ const SearchBox = memo<{
         onSearch={doSearch}
         onSelect={handleSelect}
         onChange={setInputCode}
-        style={{ width: 320 }}
+        style={AUTOCOMPLETE_STYLE}
-        dropdownStyle={{
+        dropdownStyle={DROPDOWN_STYLE}
-          backgroundColor: FUI_COLORS.bg.elevated,
-          borderRadius: '6px',
-          border: `1px solid ${FUI_COLORS.gold[400]}`,
-          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
-        }}
         notFoundContent={isSearching ? <Spin size="small" /> : null}
       >
         <Input
           placeholder="输入股票代码或名称"
-          prefix={<SearchOutlined style={{ color: FUI_COLORS.gold[400], fontSize: 16 }} />}
+          prefix={searchIcon}
           onKeyDown={handleKeyDown}
-          style={{
+          style={INPUT_STYLE}
-            backgroundColor: 'transparent',
-            borderColor: FUI_COLORS.gold[400],
-            borderRadius: 6,
-            height: 44,
-            color: FUI_COLORS.gold[400],
-          }}
         />
       </AutoComplete>
     </Box>
@@ -183,42 +108,45 @@ const SearchBox = memo<{
 
 SearchBox.displayName = 'SearchBox';
 
-/**
+// ============================================
- * Company 页面顶部组件
+// CompanyHeader 主组件
- */
+// ============================================
-const CompanyHeader: React.FC<CompanyHeaderProps> = memo(({
-  stockCode,
-  onStockChange,
-}) => {
-  return (
-    <Box
-      position="relative"
-      bg={FUI_COLORS.bg.primary}
-      borderBottom="1px solid"
-      borderColor={FUI_COLORS.line.default}
-      px={6}
-      py={4}
-    >
-      <Flex
-        position="relative"
-        zIndex={1}
-        maxW="container.xl"
-        mx="auto"
-        justify="space-between"
-        align="center"
-      >
-        {/* 左侧：页面标题 */}
-        <PageTitle />
 
-        {/* 右侧：搜索框 */}
+const CompanyHeader: React.FC<CompanyHeaderProps> = memo(({ onStockChange }) => (
-        <SearchBox
+  <Box
-          stockCode={stockCode}
+    position="relative"
-          onStockChange={onStockChange}
+    bg={FUI_COLORS.bg.primary}
-        />
+    borderBottom="1px solid"
-      </Flex>
+    borderColor={FUI_COLORS.line.default}
-    </Box>
+    px={6}
-  );
+    py={4}
-});
+  >
+    <Flex
+      position="relative"
+      zIndex={1}
+      maxW="container.xl"
+      mx="auto"
+      justify="space-between"
+      align="center"
+    >
+      <VStack align="start" spacing={1}>
+        <Text
+          fontSize="2xl"
+          fontWeight="bold"
+          color={FUI_COLORS.gold[400]}
+          letterSpacing="wider"
+          textShadow={FUI_GLOW.text.gold}
+        >
+          个股详情
+        </Text>
+        <Text fontSize="sm" color={FUI_COLORS.text.muted} letterSpacing="wide">
+          查看股票实时行情、财务数据和盈利预测
+        </Text>
+      </VStack>
+      <SearchBox onStockChange={onStockChange} />
+    </Flex>
+  </Box>
+));
 
 CompanyHeader.displayName = 'CompanyHeader';
 

src/views/Company/index.tsx

@@ -354,16 +354,12 @@ const CompanyIndex: React.FC = () => {
           CompanyHeader 组件
           负责展示：
           - 左侧：页面标题和副标题
-          - 右侧：股票搜索框 (支持代码/名称搜索)
+          - 右侧：股票搜索框 (支持代码/名称搜索，点击图标可搜索)
 
           Props 说明：
-          - stockCode: 当前股票代码，用于搜索框默认值
           - onStockChange: 股票切换回调
         */}
-        <CompanyHeader
+        <CompanyHeader onStockChange={handleStockChange} />
-          stockCode={stockCode}
-          onStockChange={handleStockChange}
-        />
       </Box>
 
       {/* ========================================

src/views/Company/types.ts

@@ -110,7 +110,6 @@ export interface UseCompanyDataReturn {
 // ============================================
 
 export interface CompanyHeaderProps {
-  stockCode: string;
   onStockChange: (code: string) => void;
 }