diff --git a/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx b/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx index c7496f3d..41f311cb 100644 --- a/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx +++ b/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx @@ -1,5 +1,5 @@ // src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx -// 公司头部信息卡片组件 +// 公司头部信息卡片组件 - 黑金主题 import React from "react"; import { @@ -13,152 +13,186 @@ import { SimpleGrid, Divider, Icon, - Grid, - GridItem, - Stat, - StatLabel, - StatNumber, - Circle, + Box, Link, } from "@chakra-ui/react"; import { FaBuilding, FaMapMarkerAlt, - FaUserShield, - FaBriefcase, FaCalendarAlt, FaGlobe, - FaEnvelope, - FaPhone, - FaCrown, + 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 = ({ basicInfo }) => { return ( - - - {/* 左侧:公司基本信息 */} - - - {/* 公司名称和代码 */} - - - - - - - - {basicInfo.ORGNAME || basicInfo.SECNAME} - - - {basicInfo.SECCODE} - - - - - {basicInfo.sw_industry_l1} - - - {basicInfo.sw_industry_l2} - - {basicInfo.sw_industry_l3 && ( - - {basicInfo.sw_industry_l3} - - )} - - + + + {/* 区块一:公司身份与分类 */} + + + + + + + + {basicInfo.ORGNAME || basicInfo.SECNAME} + + + {basicInfo.SECCODE} + + + + + {basicInfo.sw_industry_l1} + + + {basicInfo.sw_industry_l2} + + {basicInfo.sw_industry_l3 && ( + + {basicInfo.sw_industry_l3} + + )} - - - - {/* 管理层信息 */} - - - - - 法定代表人: - {basicInfo.legal_representative} - - - - - - 董事长: - {basicInfo.chairman} - - - - - - 总经理: - {basicInfo.general_manager} - - - - - - 成立日期: - {formatDate(basicInfo.establish_date)} - - - - - {/* 公司简介 */} - - {basicInfo.company_intro} - - + - {/* 右侧:注册资本和联系方式 */} - - - - 注册资本 - + + + {/* 区块二:关键属性网格 */} + + + + + 成立日期 + + {formatDate(basicInfo.establish_date)} + + + + + + + 注册资本 + {formatRegisteredCapital(basicInfo.reg_capital)} - - + + + + + + + 所在地 + + {basicInfo.province} {basicInfo.city} + + + + + + + 官网 + + {basicInfo.website ? ( + <>访问官网 + ) : ( + "暂无" + )} + + + + - + - - - - {basicInfo.province} {basicInfo.city} - - - - - {basicInfo.website} - - - - - {basicInfo.email} - - - - {basicInfo.tel} - - - - - + {/* 区块三:公司介绍 */} + + + {basicInfo.company_intro} + + {basicInfo.company_intro && basicInfo.company_intro.length > 100 && ( + + 查看完整介绍 + + )} + + ); diff --git a/src/views/Company/components/CompanyTabs/index.js b/src/views/Company/components/CompanyTabs/index.js index c03fe612..03b105df 100644 --- a/src/views/Company/components/CompanyTabs/index.js +++ b/src/views/Company/components/CompanyTabs/index.js @@ -84,7 +84,7 @@ const CompanyTabs = ({ stockCode, onTabChange }) => { {COMPANY_TABS.map((tab) => { const Component = TAB_COMPONENTS[tab.key]; return ( - + );