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}
+
+
+
+ {/* 分隔线 */}
+
+
+ {/* 信息网格 */}
+
+
+
+
+
+
+
+
+
+ );
+ })}
);
};