refactor: CompanyOverview 组件 TypeScript 拆分
- 新增 index.tsx: 主组件（组合层，50 行） - 新增 CompanyHeaderCard.tsx: 头部卡片组件（168 行） - 新增 hooks/useCompanyOverviewData.ts: 数据加载 Hook - 删除 index.js: 原 330 行代码精简 85% - 修复 Company/index.js: 恢复 CompanyTabs 渲染 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -0,0 +1,167 @@
|
||||
// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
|
||||
// 公司头部信息卡片组件
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
Card,
|
||||
CardBody,
|
||||
Heading,
|
||||
SimpleGrid,
|
||||
Divider,
|
||||
Icon,
|
||||
Grid,
|
||||
GridItem,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
Circle,
|
||||
Link,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaBuilding,
|
||||
FaMapMarkerAlt,
|
||||
FaUserShield,
|
||||
FaBriefcase,
|
||||
FaCalendarAlt,
|
||||
FaGlobe,
|
||||
FaEnvelope,
|
||||
FaPhone,
|
||||
FaCrown,
|
||||
} from "react-icons/fa";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
|
||||
import type { CompanyHeaderCardProps } from "./types";
|
||||
import { formatRegisteredCapital, formatDate } from "./utils";
|
||||
|
||||
/**
|
||||
* 公司头部信息卡片组件
|
||||
*/
|
||||
const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
|
||||
return (
|
||||
<Card
|
||||
bg="white"
|
||||
shadow="lg"
|
||||
borderTop="4px solid"
|
||||
borderTopColor="blue.500"
|
||||
>
|
||||
<CardBody>
|
||||
<Grid templateColumns="repeat(12, 1fr)" gap={6}>
|
||||
{/* 左侧：公司基本信息 */}
|
||||
<GridItem colSpan={{ base: 12, lg: 8 }}>
|
||||
<VStack align="start" spacing={4}>
|
||||
{/* 公司名称和代码 */}
|
||||
<HStack spacing={4}>
|
||||
<Circle size="60px" bg="blue.500">
|
||||
<Icon as={FaBuilding} color="white" boxSize={8} />
|
||||
</Circle>
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<Heading size="lg" color="blue.600">
|
||||
{basicInfo.ORGNAME || basicInfo.SECNAME}
|
||||
</Heading>
|
||||
<Badge colorScheme="blue" fontSize="md" px={2} py={1}>
|
||||
{basicInfo.SECCODE}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Badge colorScheme="purple" fontSize="xs">
|
||||
{basicInfo.sw_industry_l1}
|
||||
</Badge>
|
||||
<Badge colorScheme="orange" fontSize="xs">
|
||||
{basicInfo.sw_industry_l2}
|
||||
</Badge>
|
||||
{basicInfo.sw_industry_l3 && (
|
||||
<Badge colorScheme="green" fontSize="xs">
|
||||
{basicInfo.sw_industry_l3}
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 管理层信息 */}
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} w="full">
|
||||
<HStack>
|
||||
<Icon as={FaUserShield} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">法定代表人：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCrown} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">董事长：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.chairman}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaBriefcase} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">总经理：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">成立日期：</Text>
|
||||
<Text as="span" fontWeight="bold">{formatDate(basicInfo.establish_date)}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
</SimpleGrid>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<Text fontSize="sm" color="gray.600" noOfLines={2}>
|
||||
{basicInfo.company_intro}
|
||||
</Text>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
|
||||
{/* 右侧：注册资本和联系方式 */}
|
||||
<GridItem colSpan={{ base: 12, lg: 4 }}>
|
||||
<VStack spacing={3} align="stretch">
|
||||
<Stat>
|
||||
<StatLabel>注册资本</StatLabel>
|
||||
<StatNumber fontSize="2xl" color="blue.500">
|
||||
{formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</StatNumber>
|
||||
</Stat>
|
||||
|
||||
<Divider />
|
||||
|
||||
<VStack align="stretch" spacing={1}>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaMapMarkerAlt} color="gray.500" boxSize={3} />
|
||||
<Text noOfLines={1}>{basicInfo.province} {basicInfo.city}</Text>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaGlobe} color="gray.500" boxSize={3} />
|
||||
<Link href={basicInfo.website} isExternal color="blue.500" noOfLines={1}>
|
||||
{basicInfo.website} <ExternalLinkIcon mx="2px" />
|
||||
</Link>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaEnvelope} color="gray.500" boxSize={3} />
|
||||
<Text noOfLines={1}>{basicInfo.email}</Text>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaPhone} color="gray.500" boxSize={3} />
|
||||
<Text>{basicInfo.tel}</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyHeaderCard;
|
||||
Reference in New Issue
Block a user