diff --git a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx index ff49c720..639f2be7 100644 --- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx +++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx @@ -1,5 +1,5 @@ // src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx -// 分支机构 Tab Panel +// 分支机构 Tab Panel - 黑金风格 import React from "react"; import { @@ -7,14 +7,11 @@ import { VStack, HStack, Text, - Badge, Icon, - Card, - CardBody, SimpleGrid, Center, } from "@chakra-ui/react"; -import { FaSitemap } from "react-icons/fa"; +import { FaSitemap, FaBuilding, FaCheckCircle, FaTimesCircle } from "react-icons/fa"; import { useBranchesData } from "../../hooks/useBranchesData"; import { THEME } from "../config"; @@ -25,6 +22,49 @@ interface BranchesPanelProps { stockCode: string; } +// 黑金卡片样式 +const cardStyles = { + bg: "linear-gradient(145deg, rgba(30, 30, 35, 0.95), rgba(20, 20, 25, 0.98))", + border: "1px solid", + borderColor: "rgba(212, 175, 55, 0.3)", + borderRadius: "12px", + overflow: "hidden", + transition: "all 0.3s ease", + _hover: { + borderColor: "rgba(212, 175, 55, 0.6)", + boxShadow: "0 4px 20px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.1)", + transform: "translateY(-2px)", + }, +}; + +// 状态徽章样式 +const getStatusBadgeStyles = (isActive: boolean) => ({ + display: "inline-flex", + alignItems: "center", + gap: "4px", + px: 2, + py: 0.5, + borderRadius: "full", + fontSize: "xs", + fontWeight: "medium", + bg: isActive ? "rgba(212, 175, 55, 0.15)" : "rgba(255, 100, 100, 0.15)", + color: isActive ? THEME.gold : "#ff6b6b", + border: "1px solid", + borderColor: isActive ? "rgba(212, 175, 55, 0.3)" : "rgba(255, 100, 100, 0.3)", +}); + +// 信息项组件 +const InfoItem: React.FC<{ label: string; value: string | number }> = ({ label, value }) => ( + + + {label} + + + {value || "-"} + + +); + const BranchesPanel: React.FC = ({ stockCode }) => { const { branches, loading } = useBranchesData(stockCode); @@ -35,9 +75,19 @@ const BranchesPanel: React.FC = ({ stockCode }) => { if (branches.length === 0) { return (
- - - 暂无分支机构信息 + + + + + + 暂无分支机构信息 +
); @@ -45,49 +95,72 @@ const BranchesPanel: React.FC = ({ stockCode }) => { return ( - {branches.map((branch: any, idx: number) => ( - - - - - {branch.branch_name} - - {branch.business_status} - - + {branches.map((branch: any, idx: number) => { + const isActive = branch.business_status === "存续"; - - - 注册资本 - - {branch.register_capital || "-"} - - - - 法人代表 - - {branch.legal_person || "-"} - - - - 成立日期 - - {formatDate(branch.register_date)} - - - - 关联企业 - - {branch.related_company_count || 0} 家 - - - - - - - ))} + return ( + + {/* 顶部金色装饰线 */} + + + + + {/* 标题行 */} + + + + + + + {branch.branch_name} + + + + {/* 状态徽章 */} + + + {branch.business_status} + + + + {/* 分隔线 */} + + + {/* 信息网格 */} + + + + + + + + + + ); + })} ); };