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,
+}) => (
+
+
+
+ {title}
+
+
+
+);
+
+// 信息行组件
+const InfoRow: React.FC<{
+ icon?: React.ElementType;
+ label: string;
+ value: string | undefined;
+ isCode?: boolean;
+ isMultiline?: boolean;
+}> = ({ icon, label, value, isCode, isMultiline }) => (
+
+ {icon && }
+
+ {label}
+
+ {isCode ? (
+
+ {value || "-"}
+
+ ) : (
+
+ {value || "-"}
+
+ )}
+
+);
+
+// 服务机构卡片
+const ServiceCard: React.FC<{
+ icon: React.ElementType;
+ label: string;
+ value: string | undefined;
+}> = ({ icon, label, value }) => (
+
+
+
+
+ {label}
+
+
+
+ {value || "-"}
+
+
+);
+
+// 文本区块组件
+const TextSection: React.FC<{
+ icon: React.ElementType;
+ title: string;
+ content: string | undefined;
+}> = ({ icon, title, content }) => (
+
+
+
+ {content || "暂无信息"}
+
+
+);
+
const BusinessInfoPanel: React.FC = ({ stockCode }) => {
const { basicInfo, loading } = useBasicInfo(stockCode);
@@ -43,77 +184,69 @@ const BusinessInfoPanel: React.FC = ({ stockCode }) => {
return (
-
-
- 工商信息
-
-
-
- 统一信用代码
-
-
- {basicInfo.credit_code}
-
-
-
-
- 公司规模
-
- {basicInfo.company_size}
-
-
-
- 注册地址
-
-
- {basicInfo.reg_address}
-
-
-
-
- 办公地址
-
-
- {basicInfo.office_address}
-
-
+ {/* 上半部分:工商信息 + 服务机构 */}
+
+ {/* 工商信息卡片 */}
+
+
+
+
+
+
+
-
- 服务机构
-
-
- 会计师事务所
-
- {basicInfo.accounting_firm}
-
-
-
- 律师事务所
-
- {basicInfo.law_firm}
-
-
+ {/* 服务机构卡片 */}
+
+
+
+
+
-
-
-
- 主营业务
-
- {basicInfo.main_business}
-
-
-
-
- 经营范围
-
- {basicInfo.business_scope}
-
-
+ {/* 下半部分:主营业务 + 经营范围 */}
+
+
+
+
);
};