From 6f74c1c1de28818256e798126ceeb62b1de937b4 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 10 Dec 2025 21:29:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20BranchesPanel=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BA=E9=BB=91=E9=87=91=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 卡片使用深色渐变背景，金色边框 + hover 发光效果
- 顶部添加金色渐变装饰线
- 状态徽章改为黑金风格（存续金色/非存续红色）
- 标题区域添加金色背景图标
- 信息项提取为 InfoItem 组件，优化布局
- 空状态使用金色圆形背景装饰

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../BasicInfoTab/components/BranchesPanel.tsx | 173 +++++++++++++-----
 1 file changed, 123 insertions(+), 50 deletions(-)

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 }) => (
+  <VStack align="start" spacing={0.5}>
+    <Text fontSize="xs" color={THEME.textSecondary} letterSpacing="0.5px">
+      {label}
+    </Text>
+    <Text fontSize="sm" fontWeight="semibold" color={THEME.textPrimary}>
+      {value || "-"}
+    </Text>
+  </VStack>
+);
+
 const BranchesPanel: React.FC<BranchesPanelProps> = ({ stockCode }) => {
   const { branches, loading } = useBranchesData(stockCode);
 
@@ -35,9 +75,19 @@ const BranchesPanel: React.FC<BranchesPanelProps> = ({ stockCode }) => {
   if (branches.length === 0) {
     return (
       <Center h="200px">
-        <VStack>
-          <Icon as={FaSitemap} boxSize={12} color={THEME.textSecondary} />
-          <Text color={THEME.textSecondary}>暂无分支机构信息</Text>
+        <VStack spacing={3}>
+          <Box
+            p={4}
+            borderRadius="full"
+            bg="rgba(212, 175, 55, 0.1)"
+            border="1px solid"
+            borderColor="rgba(212, 175, 55, 0.2)"
+          >
+            <Icon as={FaSitemap} boxSize={10} color={THEME.gold} opacity={0.6} />
+          </Box>
+          <Text color={THEME.textSecondary} fontSize="sm">
+            暂无分支机构信息
+          </Text>
         </VStack>
       </Center>
     );
@@ -45,49 +95,72 @@ const BranchesPanel: React.FC<BranchesPanelProps> = ({ stockCode }) => {
 
   return (
     <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-      {branches.map((branch: any, idx: number) => (
-        <Card key={idx} bg={THEME.tableBg} border="1px solid" borderColor={THEME.border}>
-          <CardBody>
-            <VStack align="start" spacing={3}>
-              <HStack justify="space-between" w="full">
-                <Text fontWeight="bold" color={THEME.textPrimary}>{branch.branch_name}</Text>
-                <Badge
-                  colorScheme={branch.business_status === "存续" ? "green" : "red"}
-                >
-                  {branch.business_status}
-                </Badge>
-              </HStack>
+      {branches.map((branch: any, idx: number) => {
+        const isActive = branch.business_status === "存续";
 
-              <SimpleGrid columns={2} spacing={2} w="full">
-                <VStack align="start" spacing={1}>
-                  <Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
-                  <Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
-                    {branch.register_capital || "-"}
-                  </Text>
-                </VStack>
-                <VStack align="start" spacing={1}>
-                  <Text fontSize="xs" color={THEME.textSecondary}>法人代表</Text>
-                  <Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
-                    {branch.legal_person || "-"}
-                  </Text>
-                </VStack>
-                <VStack align="start" spacing={1}>
-                  <Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
-                  <Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
-                    {formatDate(branch.register_date)}
-                  </Text>
-                </VStack>
-                <VStack align="start" spacing={1}>
-                  <Text fontSize="xs" color={THEME.textSecondary}>关联企业</Text>
-                  <Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
-                    {branch.related_company_count || 0} 家
-                  </Text>
-                </VStack>
-              </SimpleGrid>
-            </VStack>
-          </CardBody>
-        </Card>
-      ))}
+        return (
+          <Box key={idx} sx={cardStyles}>
+            {/* 顶部金色装饰线 */}
+            <Box
+              h="2px"
+              bgGradient="linear(to-r, transparent, rgba(212, 175, 55, 0.6), transparent)"
+            />
+
+            <Box p={4}>
+              <VStack align="start" spacing={4}>
+                {/* 标题行 */}
+                <HStack justify="space-between" w="full" align="flex-start">
+                  <HStack spacing={2} flex={1}>
+                    <Box
+                      p={1.5}
+                      borderRadius="md"
+                      bg="rgba(212, 175, 55, 0.1)"
+                    >
+                      <Icon as={FaBuilding} boxSize={3.5} color={THEME.gold} />
+                    </Box>
+                    <Text
+                      fontWeight="bold"
+                      color={THEME.textPrimary}
+                      fontSize="sm"
+                      noOfLines={2}
+                      lineHeight="tall"
+                    >
+                      {branch.branch_name}
+                    </Text>
+                  </HStack>
+
+                  {/* 状态徽章 */}
+                  <Box sx={getStatusBadgeStyles(isActive)}>
+                    <Icon
+                      as={isActive ? FaCheckCircle : FaTimesCircle}
+                      boxSize={3}
+                    />
+                    <Text>{branch.business_status}</Text>
+                  </Box>
+                </HStack>
+
+                {/* 分隔线 */}
+                <Box
+                  w="full"
+                  h="1px"
+                  bgGradient="linear(to-r, rgba(212, 175, 55, 0.3), transparent)"
+                />
+
+                {/* 信息网格 */}
+                <SimpleGrid columns={2} spacing={3} w="full">
+                  <InfoItem label="注册资本" value={branch.register_capital} />
+                  <InfoItem label="法人代表" value={branch.legal_person} />
+                  <InfoItem label="成立日期" value={formatDate(branch.register_date)} />
+                  <InfoItem
+                    label="关联企业"
+                    value={`${branch.related_company_count || 0} 家`}
+                  />
+                </SimpleGrid>
+              </VStack>
+            </Box>
+          </Box>
+        );
+      })}
     </SimpleGrid>
   );
 };