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>
2025-12-12 14:25:48 +08:00
parent 23112db115
commit e92cc09e06
6 changed files with 149 additions and 49 deletions
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/KeyFactorCard.tsx
+++ b/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>
            )}
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx
+++ b/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}
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ValueChainFilterBar.tsx
+++ b/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
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/KeyFactorsCard.tsx
+++ b/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> = ({
-  keyFactors,
-  cardBg,
-}) => {
+const KeyFactorsCard: React.FC<KeyFactorsCardProps> = ({ keyFactors }) => {
  return (
-    <Card bg={cardBg} shadow="md" h="full">
+    <Card {...CARD_STYLES} h="full">
      <CardHeader>
        <HStack>
-          <Icon as={FaBalanceScale} color="orange.500" />
-          <Heading size="sm">关键因素</Heading>
-          <Badge>{keyFactors.total_factors} 项</Badge>
+          <Icon as={FaBalanceScale} color="yellow.500" />
+          <Heading size="sm" color={THEME.titleColor}>
+            关键因素
+          </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}>
-              <AccordionButton>
+            <AccordionItem key={idx} border="none">
+              <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>
-                    <Badge size="sm" variant="subtle">
+                    <Text fontWeight="medium" color={THEME.textColor}>
+                      {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">
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx
+++ b/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> = ({
-  developmentTimeline,
-  cardBg,
-}) => {
+const TimelineCard: React.FC<TimelineCardProps> = ({ developmentTimeline }) => {
  return (
-    <Card bg={cardBg} shadow="md" h="full">
+    <Card {...CARD_STYLES} h="full">
      <CardHeader>
        <HStack>
-          <Icon as={FaHistory} color="cyan.500" />
-          <Heading size="sm">发展时间线</Heading>
+          <Icon as={FaHistory} color="yellow.500" />
+          <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>
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx
+++ b/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>
-        <HStack flexWrap="wrap" gap={2}>
+      <CardHeader py={0}>
+        <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