feat: UI调整

This commit is contained in:
zdl
2025-12-10 10:09:24 +08:00
parent 9423094af2
commit 3382dd1036
9 changed files with 200 additions and 108 deletions

View File

@@ -9,72 +9,50 @@ import {
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" color="white">个股详情</Heading>
<Text color="white" fontSize="sm">
<Heading size="lg" color="#F4D03F">个股详情</Heading>
<Text color="#C9A961" fontSize="sm">
查看股票实时行情财务数据和盈利预测
</Text>
</VStack>
{/* 操作区域 */}
<HStack spacing={3}>
{/* 搜索栏 */}
<SearchBar
inputCode={inputCode}
onInputChange={onInputChange}
onSearch={onSearch}
onKeyPress={onKeyPress}
/>
{/* 自选股按钮 */}
<WatchlistButton
isInWatchlist={isInWatchlist}
isLoading={isWatchlistLoading}
onClick={onWatchlistToggle}
/>
</HStack>
{/* 搜索栏 */}
<SearchBar
inputCode={inputCode}
onInputChange={onInputChange}
onSearch={onSearch}
onKeyPress={onKeyPress}
/>
</HStack>
</CardBody>
</Card>