From 79572fcc983928e58df98c455d1cbcbc396bddf0 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 18 Dec 2025 18:16:42 +0800
Subject: [PATCH] =?UTF-8?q?style(BusinessInfoPanel):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B7=A5=E5=95=86=E4=BF=A1=E6=81=AF=E6=A8=A1=E5=9D=97=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用玻璃态卡片布局（Glassmorphism）
- 添加图标增强视觉效果
- 信息行使用悬停效果
- 服务机构使用独立卡片展示
- 主营业务/经营范围两列布局
- 统一 FUI 黑金主题风格

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/BusinessInfoPanel.tsx          | 269 +++++++++++++-----
 1 file changed, 201 insertions(+), 68 deletions(-)

diff --git a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
index 9379a03f..bc8b99d3 100644
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
+++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
@@ -1,5 +1,5 @@
 // src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
-// 工商信息 Tab Panel
+// 工商信息 Tab Panel - FUI 风格
 
 import React from "react";
 import {
@@ -7,13 +7,21 @@ import {
   VStack,
   HStack,
   Text,
-  Heading,
   SimpleGrid,
-  Divider,
   Center,
-  Code,
+  Icon,
   Spinner,
 } from "@chakra-ui/react";
+import {
+  FaBuilding,
+  FaMapMarkerAlt,
+  FaIdCard,
+  FaUsers,
+  FaBalanceScale,
+  FaCalculator,
+  FaBriefcase,
+  FaFileAlt,
+} from "react-icons/fa";
 
 import { THEME } from "../config";
 import { useBasicInfo } from "../../hooks/useBasicInfo";
@@ -22,6 +30,139 @@ interface BusinessInfoPanelProps {
   stockCode: string;
 }
 
+// 玻璃态卡片样式
+const glassCardStyle = {
+  bg: "rgba(15, 18, 35, 0.6)",
+  borderRadius: "12px",
+  border: "1px solid rgba(212, 175, 55, 0.2)",
+  backdropFilter: "blur(8px)",
+  position: "relative" as const,
+  overflow: "hidden",
+  transition: "all 0.2s ease",
+  _hover: {
+    borderColor: "rgba(212, 175, 55, 0.4)",
+    bg: "rgba(15, 18, 35, 0.7)",
+  },
+};
+
+// 区块标题组件
+const SectionTitle: React.FC<{ icon: React.ElementType; title: string }> = ({
+  icon,
+  title,
+}) => (
+  <HStack spacing={2} mb={4}>
+    <Icon as={icon} color={THEME.gold} boxSize={4} />
+    <Text
+      fontSize="14px"
+      fontWeight="700"
+      color={THEME.gold}
+      textTransform="uppercase"
+      letterSpacing="0.05em"
+    >
+      {title}
+    </Text>
+    <Box flex={1} h="1px" bg={`linear-gradient(90deg, ${THEME.border}, transparent)`} />
+  </HStack>
+);
+
+// 信息行组件
+const InfoRow: React.FC<{
+  icon?: React.ElementType;
+  label: string;
+  value: string | undefined;
+  isCode?: boolean;
+  isMultiline?: boolean;
+}> = ({ icon, label, value, isCode, isMultiline }) => (
+  <HStack
+    w="full"
+    align={isMultiline ? "start" : "center"}
+    spacing={3}
+    py={2}
+    px={3}
+    borderRadius="8px"
+    bg="rgba(0, 0, 0, 0.2)"
+    _hover={{ bg: "rgba(212, 175, 55, 0.05)" }}
+    transition="all 0.15s ease"
+  >
+    {icon && <Icon as={icon} color={THEME.goldLight} boxSize={3.5} opacity={0.8} />}
+    <Text fontSize="13px" color={THEME.textSecondary} minW="70px" flexShrink={0}>
+      {label}
+    </Text>
+    {isCode ? (
+      <Text
+        fontSize="12px"
+        fontFamily="mono"
+        bg="rgba(212, 175, 55, 0.15)"
+        color={THEME.goldLight}
+        px={2}
+        py={0.5}
+        borderRadius="4px"
+        letterSpacing="0.05em"
+      >
+        {value || "-"}
+      </Text>
+    ) : (
+      <Text
+        fontSize="13px"
+        color={THEME.textPrimary}
+        fontWeight="500"
+        noOfLines={isMultiline ? 2 : 1}
+        flex={1}
+      >
+        {value || "-"}
+      </Text>
+    )}
+  </HStack>
+);
+
+// 服务机构卡片
+const ServiceCard: React.FC<{
+  icon: React.ElementType;
+  label: string;
+  value: string | undefined;
+}> = ({ icon, label, value }) => (
+  <Box
+    p={4}
+    borderRadius="10px"
+    bg="rgba(0, 0, 0, 0.2)"
+    border="1px solid rgba(212, 175, 55, 0.1)"
+    _hover={{ borderColor: "rgba(212, 175, 55, 0.25)" }}
+    transition="all 0.15s ease"
+  >
+    <HStack spacing={2} mb={2}>
+      <Icon as={icon} color={THEME.goldLight} boxSize={3.5} />
+      <Text fontSize="12px" color={THEME.textSecondary}>
+        {label}
+      </Text>
+    </HStack>
+    <Text fontSize="13px" color={THEME.textPrimary} fontWeight="500" noOfLines={2}>
+      {value || "-"}
+    </Text>
+  </Box>
+);
+
+// 文本区块组件
+const TextSection: React.FC<{
+  icon: React.ElementType;
+  title: string;
+  content: string | undefined;
+}> = ({ icon, title, content }) => (
+  <Box {...glassCardStyle} p={4}>
+    <SectionTitle icon={icon} title={title} />
+    <Text
+      fontSize="13px"
+      lineHeight="1.8"
+      color={THEME.textSecondary}
+      sx={{
+        textIndent: "2em",
+        textAlign: "justify",
+      }}
+    >
+      {content || "暂无信息"}
+    </Text>
+  </Box>
+);
+
 const BusinessInfoPanel: React.FC<BusinessInfoPanelProps> = ({ stockCode }) => {
   const { basicInfo, loading } = useBasicInfo(stockCode);
 
@@ -43,77 +184,69 @@ const BusinessInfoPanel: React.FC<BusinessInfoPanelProps> = ({ stockCode }) => {
 
   return (
     <VStack spacing={4} align="stretch">
-      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
-        <Box>
-          <Heading size="sm" mb={3} color={THEME.textPrimary}>工商信息</Heading>
-          <VStack align="start" spacing={2}>
-            <HStack w="full">
-              <Text fontSize="sm" color={THEME.textSecondary} minW="80px">
-                统一信用代码
-              </Text>
-              <Code fontSize="xs" bg={THEME.tableHoverBg} color={THEME.goldLight}>
-                {basicInfo.credit_code}
-              </Code>
-            </HStack>
-            <HStack w="full">
-              <Text fontSize="sm" color={THEME.textSecondary} minW="80px">
-                公司规模
-              </Text>
-              <Text fontSize="sm" color={THEME.textPrimary}>{basicInfo.company_size}</Text>
-            </HStack>
-            <HStack w="full" align="start">
-              <Text fontSize="sm" color={THEME.textSecondary} minW="80px">
-                注册地址
-              </Text>
-              <Text fontSize="sm" noOfLines={2} color={THEME.textPrimary}>
-                {basicInfo.reg_address}
-              </Text>
-            </HStack>
-            <HStack w="full" align="start">
-              <Text fontSize="sm" color={THEME.textSecondary} minW="80px">
-                办公地址
-              </Text>
-              <Text fontSize="sm" noOfLines={2} color={THEME.textPrimary}>
-                {basicInfo.office_address}
-              </Text>
-            </HStack>
+      {/* 上半部分：工商信息 + 服务机构 */}
+      <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={4}>
+        {/* 工商信息卡片 */}
+        <Box {...glassCardStyle} p={4}>
+          <SectionTitle icon={FaBuilding} title="工商信息" />
+          <VStack spacing={2} align="stretch">
+            <InfoRow
+              icon={FaIdCard}
+              label="信用代码"
+              value={basicInfo.credit_code}
+              isCode
+            />
+            <InfoRow
+              icon={FaUsers}
+              label="公司规模"
+              value={basicInfo.company_size}
+            />
+            <InfoRow
+              icon={FaMapMarkerAlt}
+              label="注册地址"
+              value={basicInfo.reg_address}
+              isMultiline
+            />
+            <InfoRow
+              icon={FaMapMarkerAlt}
+              label="办公地址"
+              value={basicInfo.office_address}
+              isMultiline
+            />
           </VStack>
         </Box>
 
-        <Box>
-          <Heading size="sm" mb={3} color={THEME.textPrimary}>服务机构</Heading>
-          <VStack align="start" spacing={2}>
-            <Box>
-              <Text fontSize="sm" color={THEME.textSecondary}>会计师事务所</Text>
-              <Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
-                {basicInfo.accounting_firm}
-              </Text>
-            </Box>
-            <Box>
-              <Text fontSize="sm" color={THEME.textSecondary}>律师事务所</Text>
-              <Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
-                {basicInfo.law_firm}
-              </Text>
-            </Box>
+        {/* 服务机构卡片 */}
+        <Box {...glassCardStyle} p={4}>
+          <SectionTitle icon={FaBalanceScale} title="服务机构" />
+          <VStack spacing={3} align="stretch">
+            <ServiceCard
+              icon={FaCalculator}
+              label="会计师事务所"
+              value={basicInfo.accounting_firm}
+            />
+            <ServiceCard
+              icon={FaBalanceScale}
+              label="律师事务所"
+              value={basicInfo.law_firm}
+            />
           </VStack>
         </Box>
       </SimpleGrid>
 
-      <Divider borderColor={THEME.border} />
-
-      <Box>
-        <Heading size="sm" mb={3} color={THEME.textPrimary}>主营业务</Heading>
-        <Text fontSize="sm" lineHeight="tall" color={THEME.textSecondary}>
-          {basicInfo.main_business}
-        </Text>
-      </Box>
-
-      <Box>
-        <Heading size="sm" mb={3} color={THEME.textPrimary}>经营范围</Heading>
-        <Text fontSize="sm" lineHeight="tall" color={THEME.textSecondary}>
-          {basicInfo.business_scope}
-        </Text>
-      </Box>
+      {/* 下半部分：主营业务 + 经营范围 */}
+      <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={4}>
+        <TextSection
+          icon={FaBriefcase}
+          title="主营业务"
+          content={basicInfo.main_business}
+        />
+        <TextSection
+          icon={FaFileAlt}
+          title="经营范围"
+          content={basicInfo.business_scope}
+        />
+      </SimpleGrid>
     </VStack>
   );
 };