refactor: 整合 CompanyHeaderCard 到 StockQuoteCard，优化布局对齐
- 将公司基本信息整合到 StockQuoteCard 内部 - 采用 1:2 Flex 布局确保上下竖线对齐 - 删除废弃的 CompanyHeaderCard 组件 - 清理 types.ts 中的 CompanyHeaderCardProps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,135 +0,0 @@
|
||||
// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
|
||||
// 公司头部信息卡片组件 - 黑金主题
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Card,
|
||||
CardBody,
|
||||
Heading,
|
||||
SimpleGrid,
|
||||
Divider,
|
||||
Icon,
|
||||
Box,
|
||||
Link,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaBuilding,
|
||||
FaMapMarkerAlt,
|
||||
FaCalendarAlt,
|
||||
FaGlobe,
|
||||
FaCoins,
|
||||
} from "react-icons/fa";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
|
||||
import type { CompanyHeaderCardProps } from "./types";
|
||||
import { formatRegisteredCapital, formatDate } from "./utils";
|
||||
|
||||
// 黑金主题色
|
||||
const THEME = {
|
||||
bg: "gray.900",
|
||||
cardBg: "gray.800",
|
||||
gold: "#D4AF37",
|
||||
goldLight: "#F0D78C",
|
||||
textPrimary: "white",
|
||||
textSecondary: "gray.400",
|
||||
border: "rgba(212, 175, 55, 0.3)",
|
||||
};
|
||||
|
||||
/**
|
||||
* 公司头部信息卡片组件
|
||||
* 三区块布局：身份分类 | 关键属性 | 公司介绍
|
||||
* 黑金主题
|
||||
*/
|
||||
const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
|
||||
return (
|
||||
<Card
|
||||
bg={THEME.cardBg}
|
||||
shadow="xl"
|
||||
borderTop="3px solid"
|
||||
borderTopColor={THEME.gold}
|
||||
borderRadius="lg"
|
||||
>
|
||||
<CardBody px={2}>
|
||||
<VStack align="stretch" spacing={4}>
|
||||
|
||||
{/* 区块二：关键属性网格 */}
|
||||
<SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
|
||||
{formatDate(basicInfo.establish_date)}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCoins} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.goldLight}>
|
||||
{formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaMapMarkerAlt} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>所在地</Text>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
|
||||
{basicInfo.province} {basicInfo.city}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaGlobe} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>官网</Text>
|
||||
<Link
|
||||
href={basicInfo.website}
|
||||
isExternal
|
||||
color={THEME.goldLight}
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
noOfLines={1}
|
||||
_hover={{ color: THEME.gold }}
|
||||
>
|
||||
{basicInfo.website ? (
|
||||
<>访问官网 <ExternalLinkIcon mx="2px" /></>
|
||||
) : (
|
||||
"暂无"
|
||||
)}
|
||||
</Link>
|
||||
</Box>
|
||||
</HStack>
|
||||
</SimpleGrid>
|
||||
|
||||
<Divider borderColor={THEME.border} />
|
||||
|
||||
{/* 区块三：公司介绍 */}
|
||||
<Box>
|
||||
<Text fontSize="sm" color={THEME.textSecondary} noOfLines={2}>
|
||||
{basicInfo.company_intro}
|
||||
</Text>
|
||||
{basicInfo.company_intro && basicInfo.company_intro.length > 100 && (
|
||||
<Link
|
||||
color={THEME.goldLight}
|
||||
fontSize="sm"
|
||||
mt={1}
|
||||
display="inline-block"
|
||||
_hover={{ color: THEME.gold }}
|
||||
>
|
||||
查看完整介绍
|
||||
</Link>
|
||||
)}
|
||||
</Box>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyHeaderCard;
|
||||
@@ -1,57 +1,29 @@
|
||||
// src/views/Company/components/CompanyOverview/index.tsx
|
||||
// 公司概览 - 主组件（组合层）
|
||||
// 懒加载优化：只加载头部卡片数据，BasicInfoTab 内部懒加载各 Tab 数据
|
||||
// 公司档案 - 主组件（组合层）
|
||||
|
||||
import React from "react";
|
||||
import { VStack, Spinner, Center, Text } from "@chakra-ui/react";
|
||||
import { VStack } from "@chakra-ui/react";
|
||||
|
||||
import { useBasicInfo } from "./hooks/useBasicInfo";
|
||||
import CompanyHeaderCard from "./CompanyHeaderCard";
|
||||
import type { CompanyOverviewProps } from "./types";
|
||||
|
||||
// 子组件（暂保持 JS）
|
||||
import BasicInfoTab from "./BasicInfoTab";
|
||||
|
||||
/**
|
||||
* 公司概览组件
|
||||
* 公司档案组件
|
||||
*
|
||||
* 功能：
|
||||
* - 显示公司头部信息卡片（useBasicInfo）
|
||||
* - 显示基本信息 Tab（内部懒加载各子 Tab 数据）
|
||||
*
|
||||
* 懒加载策略：
|
||||
* - 主组件只加载 basicInfo（1 个 API）
|
||||
* - BasicInfoTab 内部根据 Tab 切换懒加载其他数据
|
||||
* - BasicInfoTab 内部根据 Tab 切换懒加载数据
|
||||
*/
|
||||
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
|
||||
const { basicInfo, loading, error } = useBasicInfo(stockCode);
|
||||
|
||||
// 加载状态
|
||||
if (loading && !basicInfo) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text>正在加载公司概览数据...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
// 错误状态
|
||||
if (error && !basicInfo) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<Text color="red.500">{error}</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
const { basicInfo } = useBasicInfo(stockCode);
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 公司头部信息卡片 */}
|
||||
{basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}
|
||||
|
||||
{/* 基本信息内容 - 传入 stockCode，内部懒加载各 Tab 数据 */}
|
||||
<BasicInfoTab
|
||||
stockCode={stockCode}
|
||||
|
||||
@@ -131,9 +131,3 @@ export interface CompanyOverviewProps {
|
||||
stockCode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* CompanyHeaderCard 组件 Props
|
||||
*/
|
||||
export interface CompanyHeaderCardProps {
|
||||
basicInfo: BasicInfo;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user