style: DeepAnalysisTab 黑金主题样式优化

- ProcessNavigation: Tab 未选中状态字体白色，数量Badge与边框颜色统一(gray.600)
- KeyFactorCard: 适配黑金主题(cardBg #252D3A, 文字颜色调整)
- KeyFactorsCard: 黑金主题重构，移除免责声明组件
- TimelineCard: 黑金主题重构，移除免责声明组件
- ValueChainCard: 调整 CardHeader 和 CardBody padding
- ValueChainFilterBar: 暂时注释筛选下拉框

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

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

src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/KeyFactorCard.tsx

@@ -3,6 +3,7 @@
  *
  * 显示单个关键因素的详细信息
  * 使用位置：关键因素 Accordion 内
+ * 黑金主题设计
  */
 
 import React from 'react';
@@ -19,6 +20,13 @@ import {
 import { FaArrowUp, FaArrowDown } from 'react-icons/fa';
 import type { KeyFactorCardProps, ImpactDirection } from '../types';
 
+// 黑金主题样式常量
+const THEME = {
+  cardBg: '#252D3A',
+  textColor: '#E2E8F0',
+  subtextColor: '#A0AEC0',
+} as const;
+
 /**
  * 获取影响方向对应的颜色
  */
@@ -47,31 +55,43 @@ const getImpactLabel = (direction?: ImpactDirection): string => {
 
 const KeyFactorCard: React.FC<KeyFactorCardProps> = ({ factor }) => {
   const impactColor = getImpactColor(factor.impact_direction);
-  const bgColor = 'white';
-  const borderColor = 'gray.200';
 
   return (
-    <Card bg={bgColor} borderColor={borderColor} size="sm">
+    <Card
+      bg={THEME.cardBg}
+      border="1px solid"
+      borderColor="whiteAlpha.100"
+      size="sm"
+    >
       <CardBody p={3}>
         <VStack align="stretch" spacing={2}>
           <HStack justify="space-between">
-            <Text fontWeight="medium" fontSize="sm">
+            <Text fontWeight="medium" fontSize="sm" color={THEME.textColor}>
               {factor.factor_name}
             </Text>
-            <Badge colorScheme={impactColor} size="sm">
+            <Badge
+              bg="transparent"
+              border="1px solid"
+              borderColor={`${impactColor}.400`}
+              color={`${impactColor}.400`}
+              size="sm"
+            >
               {getImpactLabel(factor.impact_direction)}
             </Badge>
           </HStack>
 
           <HStack spacing={2}>
-            <Text fontSize="lg" fontWeight="bold" color={`${impactColor}.500`}>
+            <Text fontSize="lg" fontWeight="bold" color={`${impactColor}.400`}>
               {factor.factor_value}
               {factor.factor_unit && ` ${factor.factor_unit}`}
             </Text>
             {factor.year_on_year !== undefined && (
               <Tag
                 size="sm"
-                colorScheme={factor.year_on_year > 0 ? 'red' : 'green'}
+                bg="transparent"
+                border="1px solid"
+                borderColor={factor.year_on_year > 0 ? 'red.400' : 'green.400'}
+                color={factor.year_on_year > 0 ? 'red.400' : 'green.400'}
               >
                 <Icon
                   as={factor.year_on_year > 0 ? FaArrowUp : FaArrowDown}
@@ -84,17 +104,17 @@ const KeyFactorCard: React.FC<KeyFactorCardProps> = ({ factor }) => {
           </HStack>
 
           {factor.factor_desc && (
-            <Text fontSize="xs" color="gray.600" noOfLines={2}>
+            <Text fontSize="xs" color={THEME.subtextColor} noOfLines={2}>
               {factor.factor_desc}
             </Text>
           )}
 
           <HStack justify="space-between">
-            <Text fontSize="xs" color="gray.500">
+            <Text fontSize="xs" color={THEME.subtextColor}>
               影响权重: {factor.impact_weight}
             </Text>
             {factor.report_period && (
-              <Text fontSize="xs" color="gray.500">
+              <Text fontSize="xs" color={THEME.subtextColor}>
                 {factor.report_period}
               </Text>
             )}

src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx

@@ -16,19 +16,19 @@ const THEME = {
   upstream: {
     active: 'orange.500',
     activeBg: 'orange.900',
-    inactive: 'gray.600',
+    inactive: 'white',
     inactiveBg: 'gray.700',
   },
   core: {
     active: 'blue.500',
     activeBg: 'blue.900',
-    inactive: 'gray.600',
+    inactive: 'white',
     inactiveBg: 'gray.700',
   },
   downstream: {
     active: 'green.500',
     activeBg: 'green.900',
-    inactive: 'gray.600',
+    inactive: 'white',
     inactiveBg: 'gray.700',
   },
 };
@@ -70,7 +70,7 @@ const NavItem: React.FC<NavItemProps> = memo(({
       cursor="pointer"
       bg={isActive ? colors.activeBg : colors.inactiveBg}
       borderWidth={2}
-      borderColor={isActive ? colors.active : 'transparent'}
+      borderColor={isActive ? colors.active : 'gray.600'}
       onClick={onClick}
       transition="all 0.2s"
       _hover={{
@@ -88,7 +88,7 @@ const NavItem: React.FC<NavItemProps> = memo(({
             {label}
           </Text>
           <Badge
-            bg={isActive ? colors.active : colors.inactive}
+            bg={isActive ? colors.active : 'gray.600'}
             color="white"
             borderRadius="full"
             px={2}

src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ValueChainFilterBar.tsx

@@ -70,7 +70,7 @@ const ValueChainFilterBar: React.FC<ValueChainFilterBarProps> = memo(({
       gap={3}
     >
       {/* 左侧筛选区 */}
-      <HStack spacing={3}>
+      {/* <HStack spacing={3}>
         <Select
           value={typeFilter}
           onChange={(e) => onTypeChange(e.target.value)}
@@ -106,7 +106,7 @@ const ValueChainFilterBar: React.FC<ValueChainFilterBarProps> = memo(({
             </option>
           ))}
         </Select>
-      </HStack>
+      </HStack> */}
 
       {/* 右侧视图切换 */}
       <Tabs

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/KeyFactorsCard.tsx

@@ -2,6 +2,7 @@
  * 关键因素卡片
  *
  * 显示影响公司的关键因素列表
+ * 黑金主题设计
  */
 
 import React from 'react';
@@ -23,42 +24,87 @@ import {
   AccordionIcon,
 } from '@chakra-ui/react';
 import { FaBalanceScale } from 'react-icons/fa';
-import { DisclaimerBox, KeyFactorCard } from '../atoms';
+import { KeyFactorCard } from '../atoms';
 import type { KeyFactors } from '../types';
 
+// 黑金主题样式常量
+const THEME = {
+  bg: '#1A202C',
+  cardBg: '#252D3A',
+  border: '#C9A961',
+  borderGradient: 'linear-gradient(90deg, #C9A961, #8B7355)',
+  titleColor: '#C9A961',
+  textColor: '#E2E8F0',
+  subtextColor: '#A0AEC0',
+} as const;
+
+const CARD_STYLES = {
+  bg: THEME.bg,
+  shadow: 'lg',
+  border: '1px solid',
+  borderColor: 'whiteAlpha.100',
+  overflow: 'hidden',
+  position: 'relative',
+  _before: {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '3px',
+    background: THEME.borderGradient,
+  },
+} as const;
+
 interface KeyFactorsCardProps {
   keyFactors: KeyFactors;
   cardBg?: string;
 }
 
-const KeyFactorsCard: React.FC<KeyFactorsCardProps> = ({
+const KeyFactorsCard: React.FC<KeyFactorsCardProps> = ({ keyFactors }) => {
-  keyFactors,
-  cardBg,
-}) => {
   return (
-    <Card bg={cardBg} shadow="md" h="full">
+    <Card {...CARD_STYLES} h="full">
       <CardHeader>
         <HStack>
-          <Icon as={FaBalanceScale} color="orange.500" />
+          <Icon as={FaBalanceScale} color="yellow.500" />
-          <Heading size="sm">关键因素</Heading>
+          <Heading size="sm" color={THEME.titleColor}>
-          <Badge>{keyFactors.total_factors} 项</Badge>
+            关键因素
+          </Heading>
+          <Badge
+            bg="transparent"
+            border="1px solid"
+            borderColor="yellow.600"
+            color="yellow.500"
+          >
+            {keyFactors.total_factors} 项
+          </Badge>
         </HStack>
       </CardHeader>
       <CardBody>
-        <DisclaimerBox />
         <Accordion allowMultiple>
           {keyFactors.categories.map((category, idx) => (
-            <AccordionItem key={idx}>
+            <AccordionItem key={idx} border="none">
-              <AccordionButton>
+              <AccordionButton
+                bg={THEME.cardBg}
+                borderRadius="md"
+                mb={2}
+                _hover={{ bg: 'whiteAlpha.100' }}
+              >
                 <Box flex="1" textAlign="left">
                   <HStack>
-                    <Text fontWeight="medium">{category.category_name}</Text>
+                    <Text fontWeight="medium" color={THEME.textColor}>
-                    <Badge size="sm" variant="subtle">
+                      {category.category_name}
+                    </Text>
+                    <Badge
+                      bg="whiteAlpha.100"
+                      color={THEME.subtextColor}
+                      size="sm"
+                    >
                       {category.factors.length}
                     </Badge>
                   </HStack>
                 </Box>
-                <AccordionIcon />
+                <AccordionIcon color={THEME.subtextColor} />
               </AccordionButton>
               <AccordionPanel pb={4}>
                 <VStack spacing={3} align="stretch">

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx

@@ -2,6 +2,7 @@
  * 发展时间线卡片
  *
  * 显示公司发展历程时间线
+ * 黑金主题设计
  */
 
 import React from 'react';
@@ -16,37 +17,73 @@ import {
   Icon,
 } from '@chakra-ui/react';
 import { FaHistory } from 'react-icons/fa';
-import { DisclaimerBox } from '../atoms';
 import TimelineComponent from '../organisms/TimelineComponent';
 import type { DevelopmentTimeline } from '../types';
 
+// 黑金主题样式常量
+const THEME = {
+  bg: '#1A202C',
+  cardBg: '#252D3A',
+  border: '#C9A961',
+  borderGradient: 'linear-gradient(90deg, #C9A961, #8B7355)',
+  titleColor: '#C9A961',
+  textColor: '#E2E8F0',
+  subtextColor: '#A0AEC0',
+} as const;
+
+const CARD_STYLES = {
+  bg: THEME.bg,
+  shadow: 'lg',
+  border: '1px solid',
+  borderColor: 'whiteAlpha.100',
+  overflow: 'hidden',
+  position: 'relative',
+  _before: {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '3px',
+    background: THEME.borderGradient,
+  },
+} as const;
+
 interface TimelineCardProps {
   developmentTimeline: DevelopmentTimeline;
   cardBg?: string;
 }
 
-const TimelineCard: React.FC<TimelineCardProps> = ({
+const TimelineCard: React.FC<TimelineCardProps> = ({ developmentTimeline }) => {
-  developmentTimeline,
-  cardBg,
-}) => {
   return (
-    <Card bg={cardBg} shadow="md" h="full">
+    <Card {...CARD_STYLES} h="full">
       <CardHeader>
         <HStack>
-          <Icon as={FaHistory} color="cyan.500" />
+          <Icon as={FaHistory} color="yellow.500" />
-          <Heading size="sm">发展时间线</Heading>
+          <Heading size="sm" color={THEME.titleColor}>
+            发展时间线
+          </Heading>
           <HStack spacing={1}>
-            <Badge colorScheme="red">
+            <Badge
+              bg="transparent"
+              border="1px solid"
+              borderColor="red.400"
+              color="red.400"
+            >
               正面 {developmentTimeline.statistics?.positive_events || 0}
             </Badge>
-            <Badge colorScheme="green">
+            <Badge
+              bg="transparent"
+              border="1px solid"
+              borderColor="green.400"
+              color="green.400"
+            >
               负面 {developmentTimeline.statistics?.negative_events || 0}
             </Badge>
           </HStack>
         </HStack>
       </CardHeader>
       <CardBody>
-        <DisclaimerBox />
         <Box maxH="600px" overflowY="auto" pr={2}>
           <TimelineComponent events={developmentTimeline.events} />
         </Box>

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx

@@ -131,8 +131,8 @@ const ValueChainCard: React.FC<ValueChainCardProps> = memo(({
   return (
     <Card bg={THEME.cardBg} shadow="md">
       {/* 头部区域 */}
-      <CardHeader>
+      <CardHeader py={0}>
-        <HStack flexWrap="wrap" gap={2}>
+        <HStack flexWrap="wrap" gap={0}>
           <Icon as={FaNetworkWired} color={THEME.gold} />
           <Heading size="sm" color={THEME.textPrimary}>
             产业链分析
@@ -146,17 +146,14 @@ const ValueChainCard: React.FC<ValueChainCardProps> = memo(({
         </HStack>
       </CardHeader>
 
-      <CardBody px={0}>
+      <CardBody px={2}>
         {/* 工具栏：左侧流程导航 + 右侧筛选 */}
         <Flex
-          px={0}
-          py={3}
           borderBottom="1px solid"
           borderColor="gray.700"
           justify="space-between"
           align="center"
           flexWrap="wrap"
-          gap={3}
         >
           {/* 左侧：流程式导航 */}
           <ProcessNavigation