vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: CompanyHeaderCard 黑金主题三区块布局重构

Browse Source 
- 布局调整：从两栏(8:4)改为垂直三区块（身份分类 | 关键属性 | 公司介绍）
- 黑金主题：卡片背景 gray.800，金色强调色 #D4AF37
- 移除字段：法定代表人、董事长、总经理、邮箱、电话
- 保留字段：公司名称、代码、行业分类、成立日期、注册资本、所在地、官网、公司介绍
- CompanyTabs: TabPanel 去掉左右边距

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-10 15:53:50 +08:00
parent bfb6ef63d0
commit af3cdc24b1
2 changed files with 156 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
View File

@@ -1,5 +1,5 @@
// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx // src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
// 公司头部信息卡片组件 // 公司头部信息卡片组件 - 黑金主题
import React from "react"; import React from "react";
import { import {
@@ -13,69 +13,105 @@ import {
SimpleGrid, SimpleGrid,
Divider, Divider,
Icon, Icon,
Grid, Box,
GridItem,
Stat,
StatLabel,
StatNumber,
Circle,
Link, Link,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { import {
FaBuilding, FaBuilding,
FaMapMarkerAlt, FaMapMarkerAlt,
FaUserShield,
FaBriefcase,
FaCalendarAlt, FaCalendarAlt,
FaGlobe, FaGlobe,
FaEnvelope, FaCoins,
FaPhone,
FaCrown,
} from "react-icons/fa"; } from "react-icons/fa";
import { ExternalLinkIcon } from "@chakra-ui/icons"; import { ExternalLinkIcon } from "@chakra-ui/icons";
import type { CompanyHeaderCardProps } from "./types"; import type { CompanyHeaderCardProps } from "./types";
import { formatRegisteredCapital, formatDate } from "./utils"; 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 }) => { const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
return ( return (
<Card <Card
bg="white" bg={THEME.cardBg}
shadow="lg" shadow="xl"
borderTop="4px solid" borderTop="3px solid"
borderTopColor="blue.500" borderTopColor={THEME.gold}
borderRadius="lg"
> >
<CardBody> <CardBody px={0}>
<Grid templateColumns="repeat(12, 1fr)" gap={6}> <VStack align="stretch" spacing={4}>
{/* 左侧：公司基本信息 */} {/* 区块一：公司身份与分类 */}
<GridItem colSpan={{ base: 12, lg: 8 }}>
<VStack align="start" spacing={4}>
{/* 公司名称和代码 */}
<HStack spacing={4}> <HStack spacing={4}>
<Circle size="60px" bg="blue.500"> <Box
<Icon as={FaBuilding} color="white" boxSize={8} /> w="56px"
</Circle> h="56px"
borderRadius="full"
bg={`linear-gradient(135deg, ${THEME.gold} 0%, ${THEME.goldLight} 100%)`}
display="flex"
alignItems="center"
justifyContent="center"
boxShadow={`0 4px 14px rgba(212, 175, 55, 0.4)`}
>
<Icon as={FaBuilding} color="gray.900" boxSize={7} />
</Box>
<VStack align="start" spacing={1}> <VStack align="start" spacing={1}>
<HStack> <HStack flexWrap="wrap">
<Heading size="lg" color="blue.600"> <Heading size="lg" color={THEME.textPrimary}>
{basicInfo.ORGNAME || basicInfo.SECNAME} {basicInfo.ORGNAME || basicInfo.SECNAME}
</Heading> </Heading>
<Badge colorScheme="blue" fontSize="md" px={2} py={1}> <Badge
bg={THEME.gold}
color="gray.900"
fontSize="md"
px={2}
py={1}
fontWeight="bold"
>
{basicInfo.SECCODE} {basicInfo.SECCODE}
</Badge> </Badge>
</HStack> </HStack>
<HStack spacing={2}> <HStack spacing={2} flexWrap="wrap">
<Badge colorScheme="purple" fontSize="xs"> <Badge
bg="transparent"
border="1px solid"
borderColor={THEME.gold}
color={THEME.goldLight}
fontSize="xs"
>
{basicInfo.sw_industry_l1} {basicInfo.sw_industry_l1}
</Badge> </Badge>
<Badge colorScheme="orange" fontSize="xs"> <Badge
bg="transparent"
border="1px solid"
borderColor="gray.600"
color={THEME.textSecondary}
fontSize="xs"
>
{basicInfo.sw_industry_l2} {basicInfo.sw_industry_l2}
</Badge> </Badge>
{basicInfo.sw_industry_l3 && ( {basicInfo.sw_industry_l3 && (
<Badge colorScheme="green" fontSize="xs"> <Badge
bg="transparent"
border="1px solid"
borderColor="gray.600"
color={THEME.textSecondary}
fontSize="xs"
>
{basicInfo.sw_industry_l3} {basicInfo.sw_industry_l3}
</Badge> </Badge>
)} )}
@@ -83,82 +119,80 @@ const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
</VStack> </VStack>
</HStack> </HStack>
<Divider /> <Divider borderColor={THEME.border} />
{/* 管理层信息 */} {/* 区块二：关键属性网格 */}
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} w="full"> <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
<HStack> <HStack>
<Icon as={FaUserShield} color="gray.500" boxSize={4} /> <Icon as={FaCalendarAlt} color={THEME.gold} boxSize={4} />
<Text fontSize="sm"> <Box>
<Text as="span" color="gray.500">法定代表人：</Text> <Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
<Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text> <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
{formatDate(basicInfo.establish_date)}
</Text> </Text>
</Box>
</HStack> </HStack>
<HStack> <HStack>
<Icon as={FaCrown} color="gray.500" boxSize={4} /> <Icon as={FaCoins} color={THEME.gold} boxSize={4} />
<Text fontSize="sm"> <Box>
<Text as="span" color="gray.500">董事长：</Text> <Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
<Text as="span" fontWeight="bold">{basicInfo.chairman}</Text> <Text fontSize="sm" fontWeight="bold" color={THEME.goldLight}>
{formatRegisteredCapital(basicInfo.reg_capital)}
</Text> </Text>
</Box>
</HStack> </HStack>
<HStack> <HStack>
<Icon as={FaBriefcase} color="gray.500" boxSize={4} /> <Icon as={FaMapMarkerAlt} color={THEME.gold} boxSize={4} />
<Text fontSize="sm"> <Box>
<Text as="span" color="gray.500">总经理：</Text> <Text fontSize="xs" color={THEME.textSecondary}>所在地</Text>
<Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text> <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
{basicInfo.province} {basicInfo.city}
</Text> </Text>
</Box>
</HStack> </HStack>
<HStack> <HStack>
<Icon as={FaCalendarAlt} color="gray.500" boxSize={4} /> <Icon as={FaGlobe} color={THEME.gold} boxSize={4} />
<Text fontSize="sm"> <Box>
<Text as="span" color="gray.500">成立日期：</Text> <Text fontSize="xs" color={THEME.textSecondary}>官网</Text>
<Text as="span" fontWeight="bold">{formatDate(basicInfo.establish_date)}</Text> <Link
</Text> 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> </HStack>
</SimpleGrid> </SimpleGrid>
{/* 公司简介 */} <Divider borderColor={THEME.border} />
<Text fontSize="sm" color="gray.600" noOfLines={2}>
{/* 区块三：公司介绍 */}
<Box>
<Text fontSize="sm" color={THEME.textSecondary} noOfLines={2}>
{basicInfo.company_intro} {basicInfo.company_intro}
</Text> </Text>
</VStack> {basicInfo.company_intro && basicInfo.company_intro.length > 100 && (
</GridItem> <Link
color={THEME.goldLight}
{/* 右侧：注册资本和联系方式 */} fontSize="sm"
<GridItem colSpan={{ base: 12, lg: 4 }}> mt={1}
<VStack spacing={3} align="stretch"> display="inline-block"
<Stat> _hover={{ color: THEME.gold }}
<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> </Link>
</HStack> )}
<HStack fontSize="sm"> </Box>
<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>
</VStack>
</GridItem>
</Grid>
</CardBody> </CardBody>
</Card> </Card>
); );

2
src/views/Company/components/CompanyTabs/index.js
View File

@@ -84,7 +84,7 @@ const CompanyTabs = ({ stockCode, onTabChange }) => {
{COMPANY_TABS.map((tab) => { {COMPANY_TABS.map((tab) => {
const Component = TAB_COMPONENTS[tab.key]; const Component = TAB_COMPONENTS[tab.key];
return ( return (
<TabPanel key={tab.key}> <TabPanel key={tab.key} px={0}>
<Component stockCode={stockCode} /> <Component stockCode={stockCode} />
</TabPanel> </TabPanel>
); );