style: CompanyHeaderCard 黑金主题三区块布局重构

- 布局调整：从两栏(8:4)改为垂直三区块（身份分类 | 关键属性 | 公司介绍）
- 黑金主题：卡片背景 gray.800，金色强调色 #D4AF37
- 移除字段：法定代表人、董事长、总经理、邮箱、电话
- 保留字段：公司名称、代码、行业分类、成立日期、注册资本、所在地、官网、公司介绍
- CompanyTabs: TabPanel 去掉左右边距

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx

@@ -1,5 +1,5 @@
 // src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
-// 公司头部信息卡片组件
+// 公司头部信息卡片组件 - 黑金主题
 
 import React from "react";
 import {
@@ -13,152 +13,186 @@ import {
   SimpleGrid,
   Divider,
   Icon,
-  Grid,
+  Box,
-  GridItem,
-  Stat,
-  StatLabel,
-  StatNumber,
-  Circle,
   Link,
 } from "@chakra-ui/react";
 import {
   FaBuilding,
   FaMapMarkerAlt,
-  FaUserShield,
-  FaBriefcase,
   FaCalendarAlt,
   FaGlobe,
-  FaEnvelope,
+  FaCoins,
-  FaPhone,
-  FaCrown,
 } from "react-icons/fa";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 
 import type { CompanyHeaderCardProps } from "./types";
 import { formatRegisteredCapital, formatDate } from "./utils";
 
+// 黑金主题色
+const THEME = {
+  bg: "gray.900",
+  cardBg: "gray.800",
+  gold: "#D4AF37",
+  goldLight: "#F0D78C",
+  textPrimary: "white",
+  textSecondary: "gray.400",
+  border: "rgba(212, 175, 55, 0.3)",
+};
+
 /**
  * 公司头部信息卡片组件
+ * 三区块布局：身份分类 | 关键属性 | 公司介绍
+ * 黑金主题
  */
 const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
   return (
     <Card
-      bg="white"
+      bg={THEME.cardBg}
-      shadow="lg"
+      shadow="xl"
-      borderTop="4px solid"
+      borderTop="3px solid"
-      borderTopColor="blue.500"
+      borderTopColor={THEME.gold}
+      borderRadius="lg"
     >
-      <CardBody>
+      <CardBody px={0}>
-        <Grid templateColumns="repeat(12, 1fr)" gap={6}>
+        <VStack align="stretch" spacing={4}>
-          {/* 左侧：公司基本信息 */}
+          {/* 区块一：公司身份与分类 */}
-          <GridItem colSpan={{ base: 12, lg: 8 }}>
+          <HStack spacing={4}>
-            <VStack align="start" spacing={4}>
+            <Box
-              {/* 公司名称和代码 */}
+              w="56px"
-              <HStack spacing={4}>
+              h="56px"
-                <Circle size="60px" bg="blue.500">
+              borderRadius="full"
-                  <Icon as={FaBuilding} color="white" boxSize={8} />
+              bg={`linear-gradient(135deg, ${THEME.gold} 0%, ${THEME.goldLight} 100%)`}
-                </Circle>
+              display="flex"
-                <VStack align="start" spacing={1}>
+              alignItems="center"
-                  <HStack>
+              justifyContent="center"
-                    <Heading size="lg" color="blue.600">
+              boxShadow={`0 4px 14px rgba(212, 175, 55, 0.4)`}
-                      {basicInfo.ORGNAME || basicInfo.SECNAME}
+            >
-                    </Heading>
+              <Icon as={FaBuilding} color="gray.900" boxSize={7} />
-                    <Badge colorScheme="blue" fontSize="md" px={2} py={1}>
+            </Box>
-                      {basicInfo.SECCODE}
+            <VStack align="start" spacing={1}>
-                    </Badge>
+              <HStack flexWrap="wrap">
-                  </HStack>
+                <Heading size="lg" color={THEME.textPrimary}>
-                  <HStack spacing={2}>
+                  {basicInfo.ORGNAME || basicInfo.SECNAME}
-                    <Badge colorScheme="purple" fontSize="xs">
+                </Heading>
-                      {basicInfo.sw_industry_l1}
+                <Badge
-                    </Badge>
+                  bg={THEME.gold}
-                    <Badge colorScheme="orange" fontSize="xs">
+                  color="gray.900"
-                      {basicInfo.sw_industry_l2}
+                  fontSize="md"
-                    </Badge>
+                  px={2}
-                    {basicInfo.sw_industry_l3 && (
+                  py={1}
-                      <Badge colorScheme="green" fontSize="xs">
+                  fontWeight="bold"
-                        {basicInfo.sw_industry_l3}
+                >
-                      </Badge>
+                  {basicInfo.SECCODE}
-                    )}
+                </Badge>
-                  </HStack>
+              </HStack>
-                </VStack>
+              <HStack spacing={2} flexWrap="wrap">
+                <Badge
+                  bg="transparent"
+                  border="1px solid"
+                  borderColor={THEME.gold}
+                  color={THEME.goldLight}
+                  fontSize="xs"
+                >
+                  {basicInfo.sw_industry_l1}
+                </Badge>
+                <Badge
+                  bg="transparent"
+                  border="1px solid"
+                  borderColor="gray.600"
+                  color={THEME.textSecondary}
+                  fontSize="xs"
+                >
+                  {basicInfo.sw_industry_l2}
+                </Badge>
+                {basicInfo.sw_industry_l3 && (
+                  <Badge
+                    bg="transparent"
+                    border="1px solid"
+                    borderColor="gray.600"
+                    color={THEME.textSecondary}
+                    fontSize="xs"
+                  >
+                    {basicInfo.sw_industry_l3}
+                  </Badge>
+                )}
               </HStack>
-
-              <Divider />
-
-              {/* 管理层信息 */}
-              <SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} w="full">
-                <HStack>
-                  <Icon as={FaUserShield} color="gray.500" boxSize={4} />
-                  <Text fontSize="sm">
-                    <Text as="span" color="gray.500">法定代表人：</Text>
-                    <Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text>
-                  </Text>
-                </HStack>
-                <HStack>
-                  <Icon as={FaCrown} color="gray.500" boxSize={4} />
-                  <Text fontSize="sm">
-                    <Text as="span" color="gray.500">董事长：</Text>
-                    <Text as="span" fontWeight="bold">{basicInfo.chairman}</Text>
-                  </Text>
-                </HStack>
-                <HStack>
-                  <Icon as={FaBriefcase} color="gray.500" boxSize={4} />
-                  <Text fontSize="sm">
-                    <Text as="span" color="gray.500">总经理：</Text>
-                    <Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text>
-                  </Text>
-                </HStack>
-                <HStack>
-                  <Icon as={FaCalendarAlt} color="gray.500" boxSize={4} />
-                  <Text fontSize="sm">
-                    <Text as="span" color="gray.500">成立日期：</Text>
-                    <Text as="span" fontWeight="bold">{formatDate(basicInfo.establish_date)}</Text>
-                  </Text>
-                </HStack>
-              </SimpleGrid>
-
-              {/* 公司简介 */}
-              <Text fontSize="sm" color="gray.600" noOfLines={2}>
-                {basicInfo.company_intro}
-              </Text>
             </VStack>
-          </GridItem>
+          </HStack>
 
-          {/* 右侧：注册资本和联系方式 */}
+          <Divider borderColor={THEME.border} />
-          <GridItem colSpan={{ base: 12, lg: 4 }}>
+
-            <VStack spacing={3} align="stretch">
+          {/* 区块二：关键属性网格 */}
-              <Stat>
+          <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
-                <StatLabel>注册资本</StatLabel>
+            <HStack>
-                <StatNumber fontSize="2xl" color="blue.500">
+              <Icon as={FaCalendarAlt} color={THEME.gold} boxSize={4} />
+              <Box>
+                <Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
+                <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
+                  {formatDate(basicInfo.establish_date)}
+                </Text>
+              </Box>
+            </HStack>
+            <HStack>
+              <Icon as={FaCoins} color={THEME.gold} boxSize={4} />
+              <Box>
+                <Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
+                <Text fontSize="sm" fontWeight="bold" color={THEME.goldLight}>
                   {formatRegisteredCapital(basicInfo.reg_capital)}
-                </StatNumber>
+                </Text>
-              </Stat>
+              </Box>
+            </HStack>
+            <HStack>
+              <Icon as={FaMapMarkerAlt} color={THEME.gold} boxSize={4} />
+              <Box>
+                <Text fontSize="xs" color={THEME.textSecondary}>所在地</Text>
+                <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
+                  {basicInfo.province} {basicInfo.city}
+                </Text>
+              </Box>
+            </HStack>
+            <HStack>
+              <Icon as={FaGlobe} color={THEME.gold} boxSize={4} />
+              <Box>
+                <Text fontSize="xs" color={THEME.textSecondary}>官网</Text>
+                <Link
+                  href={basicInfo.website}
+                  isExternal
+                  color={THEME.goldLight}
+                  fontSize="sm"
+                  fontWeight="bold"
+                  noOfLines={1}
+                  _hover={{ color: THEME.gold }}
+                >
+                  {basicInfo.website ? (
+                    <>访问官网 <ExternalLinkIcon mx="2px" /></>
+                  ) : (
+                    "暂无"
+                  )}
+                </Link>
+              </Box>
+            </HStack>
+          </SimpleGrid>
 
-              <Divider />
+          <Divider borderColor={THEME.border} />
 
-              <VStack align="stretch" spacing={1}>
+          {/* 区块三：公司介绍 */}
-                <HStack fontSize="sm">
+          <Box>
-                  <Icon as={FaMapMarkerAlt} color="gray.500" boxSize={3} />
+            <Text fontSize="sm" color={THEME.textSecondary} noOfLines={2}>
-                  <Text noOfLines={1}>{basicInfo.province} {basicInfo.city}</Text>
+              {basicInfo.company_intro}
-                </HStack>
+            </Text>
-                <HStack fontSize="sm">
+            {basicInfo.company_intro && basicInfo.company_intro.length > 100 && (
-                  <Icon as={FaGlobe} color="gray.500" boxSize={3} />
+              <Link
-                  <Link href={basicInfo.website} isExternal color="blue.500" noOfLines={1}>
+                color={THEME.goldLight}
-                    {basicInfo.website} <ExternalLinkIcon mx="2px" />
+                fontSize="sm"
-                  </Link>
+                mt={1}
-                </HStack>
+                display="inline-block"
-                <HStack fontSize="sm">
+                _hover={{ color: THEME.gold }}
-                  <Icon as={FaEnvelope} color="gray.500" boxSize={3} />
+              >
-                  <Text noOfLines={1}>{basicInfo.email}</Text>
+                查看完整介绍
-                </HStack>
+              </Link>
-                <HStack fontSize="sm">
+            )}
-                  <Icon as={FaPhone} color="gray.500" boxSize={3} />
+          </Box>
-                  <Text>{basicInfo.tel}</Text>
+        </VStack>
-                </HStack>
-              </VStack>
-            </VStack>
-          </GridItem>
-        </Grid>
       </CardBody>
     </Card>
   );

src/views/Company/components/CompanyTabs/index.js

@@ -84,7 +84,7 @@ const CompanyTabs = ({ stockCode, onTabChange }) => {
             {COMPANY_TABS.map((tab) => {
               const Component = TAB_COMPONENTS[tab.key];
               return (
-                <TabPanel key={tab.key}>
+                <TabPanel key={tab.key} px={0}>
                   <Component stockCode={stockCode} />
                 </TabPanel>
               );