更新Company页面的UI为FUI风格

2025-12-18 08:23:04 +08:00
parent 26548c7036
commit 87ddc79252
18 changed files with 224 additions and 68 deletions
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/config.ts
+++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/config.ts
@@ -30,22 +30,23 @@ export interface Theme {
 }

 // 黑金主题配置
+// 注：文字颜色使用更亮的金色（#F4D03F）以提高对比度
 export const THEME: Theme = {
  bg: "gray.900",
  cardBg: "gray.800",
  tableBg: "gray.700",
  tableHoverBg: "gray.600",
-  gold: "#D4AF37",
-  goldLight: "#F0D78C",
+  gold: "#F4D03F",            // 亮黄金色（用于文字，对比度更好）
+  goldLight: "#F0D78C",       // 浅金色（用于次要文字）
  textPrimary: "white",
  textSecondary: "gray.400",
-  border: "rgba(212, 175, 55, 0.3)",
+  border: "rgba(212, 175, 55, 0.3)",  // 边框保持原色
  tabSelected: {
-    bg: "#D4AF37",
+    bg: "#D4AF37",            // 选中背景保持深金色
    color: "gray.900",
  },
  tabUnselected: {
-    color: "#D4AF37",
+    color: "#F4D03F",         // 未选中使用亮金色
  },
 };

--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx
@@ -11,12 +11,12 @@ import { Box, HStack, VStack, Text, Badge, Tag, TagLabel } from '@chakra-ui/reac
 import { formatPercentage, formatBusinessRevenue } from '@utils/priceFormatters';
 import type { BusinessTreeItemProps } from '../types';

-// 黑金主题配置
+// 黑金主题配置（使用更亮的金色提高对比度）
 const THEME = {
  bg: 'gray.700',
-  gold: '#D4AF37',
+  gold: '#F4D03F',          // 亮金色
  goldLight: '#F0D78C',
-  textPrimary: '#D4AF37',
+  textPrimary: '#F4D03F',   // 亮金色（提高对比度）
  textSecondary: 'gray.400',
  border: 'rgba(212, 175, 55, 0.5)',
 };
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx
@@ -9,9 +9,9 @@ import React, { memo } from 'react';
 import { HStack, VStack, Box, Text, Icon, Badge } from '@chakra-ui/react';
 import { FaArrowRight } from 'react-icons/fa';

-// 黑金主题配置
+// 黑金主题配置（使用更亮的金色提高对比度）
 const THEME = {
-  gold: '#D4AF37',
+  gold: '#F4D03F',
  textSecondary: 'gray.400',
  upstream: {
    active: 'orange.500',
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ValueChainFilterBar.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ValueChainFilterBar.tsx
@@ -13,10 +13,10 @@ import {
  Tab,
 } from '@chakra-ui/react';

-// 黑金主题配置
+// 黑金主题配置（使用更亮的金色提高对比度）
 const THEME = {
-  gold: '#D4AF37',
-  textPrimary: '#D4AF37',
+  gold: '#F4D03F',
+  textPrimary: '#F4D03F',
  textSecondary: 'gray.400',
  inputBg: 'gray.700',
  inputBorder: 'gray.600',
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx
@@ -27,9 +27,9 @@ import type { BusinessSegment } from '../types';
 const THEME = {
  cardBg: 'gray.800',
  innerCardBg: 'gray.700',
-  gold: '#D4AF37',
+  gold: '#F4D03F',
  goldLight: '#F0D78C',
-  textPrimary: '#D4AF37',
+  textPrimary: '#F4D03F',
  textSecondary: 'gray.400',
  border: 'rgba(212, 175, 55, 0.3)',
 };
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessStructureCard.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessStructureCard.tsx
@@ -23,8 +23,8 @@ import type { BusinessStructure } from '../types';
 // 黑金主题配置
 const THEME = {
  cardBg: 'gray.800',
-  gold: '#D4AF37',
-  textPrimary: '#D4AF37',
+  gold: '#F4D03F',
+  textPrimary: '#F4D03F',
  border: 'rgba(212, 175, 55, 0.3)',
 };

--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CorePositioningCard/theme.ts
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CorePositioningCard/theme.ts
@@ -15,13 +15,13 @@ import type { IconType } from 'react-icons';
 // ==================== 主题常量 ====================

 export const THEME = {
-  // 深色背景区域（核心定位）
+  // 深色背景区域（核心定位）- 使用更亮的金色提高对比度
  dark: {
    bg: '#1A202C',
    cardBg: '#252D3A',
-    border: '#C9A961',
-    borderGradient: 'linear-gradient(90deg, #C9A961, #8B7355)',
-    titleColor: '#C9A961',
+    border: '#E8C14D',
+    borderGradient: 'linear-gradient(90deg, #E8C14D, #A08040)',
+    titleColor: '#E8C14D',
    textColor: '#E2E8F0',
    subtextColor: '#A0AEC0',
  },
@@ -29,11 +29,11 @@ export const THEME = {
  light: {
    bg: '#1E2530',
    cardBg: '#252D3A',
-    titleColor: '#C9A961',
+    titleColor: '#E8C14D',
    textColor: '#E2E8F0',
    subtextColor: '#A0AEC0',
-    tagBg: 'rgba(201, 169, 97, 0.15)',
-    tagColor: '#C9A961',
+    tagBg: 'rgba(232, 193, 77, 0.15)',
+    tagColor: '#E8C14D',
  },
 } as const;

--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/KeyFactorsCard.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/KeyFactorsCard.tsx
@@ -31,9 +31,9 @@ import type { KeyFactors } from '../types';
 const THEME = {
  bg: '#1A202C',
  cardBg: '#252D3A',
-  border: '#C9A961',
-  borderGradient: 'linear-gradient(90deg, #C9A961, #8B7355)',
-  titleColor: '#C9A961',
+  border: '#E8C14D',
+  borderGradient: 'linear-gradient(90deg, #E8C14D, #A08040)',
+  titleColor: '#E8C14D',
  textColor: '#E2E8F0',
  subtextColor: '#A0AEC0',
 } as const;
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx
@@ -24,9 +24,9 @@ import type { DevelopmentTimeline } from '../types';
 const THEME = {
  bg: '#1A202C',
  cardBg: '#252D3A',
-  border: '#C9A961',
-  borderGradient: 'linear-gradient(90deg, #C9A961, #8B7355)',
-  titleColor: '#C9A961',
+  border: '#E8C14D',
+  borderGradient: 'linear-gradient(90deg, #E8C14D, #A08040)',
+  titleColor: '#E8C14D',
  textColor: '#E2E8F0',
  subtextColor: '#A0AEC0',
 } as const;
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx
@@ -34,9 +34,9 @@ import type { ValueChainData, ValueChainNode } from '../types';
 // 黑金主题配置
 const THEME = {
  cardBg: 'gray.800',
-  gold: '#D4AF37',
+  gold: '#F4D03F',
  goldLight: '#F0D78C',
-  textPrimary: '#D4AF37',
+  textPrimary: '#F4D03F',
  textSecondary: 'gray.400',
 };

--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/organisms/ValueChainNodeCard/index.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/organisms/ValueChainNodeCard/index.tsx
@@ -39,7 +39,7 @@ import type { ValueChainNodeCardProps, RelatedCompany } from '../../types';
 // 黑金主题配置
 const THEME = {
  cardBg: 'gray.700',
-  gold: '#D4AF37',
+  gold: '#F4D03F',
  goldLight: '#F0D78C',
  textPrimary: 'white',
  textSecondary: 'gray.400',
--- a/src/views/Company/components/CompanyOverview/NewsEventsTab.js
+++ b/src/views/Company/components/CompanyOverview/NewsEventsTab.js
@@ -38,22 +38,22 @@ import {
 } from "react-icons/fa";
 import { getEventDetailUrl } from "@/utils/idEncoder";

-// 黑金主题配色
+// 黑金主题配色（文字使用更亮的金色提高对比度）
 const THEME_PRESETS = {
  blackGold: {
    bg: "#0A0E17",
    cardBg: "#1A1F2E",
    cardHoverBg: "#212633",
    cardBorder: "rgba(212, 175, 55, 0.2)",
-    cardHoverBorder: "#D4AF37",
+    cardHoverBorder: "#F4D03F",           // 亮金色
    textPrimary: "#E8E9ED",
    textSecondary: "#A0A4B8",
    textMuted: "#6B7280",
-    gold: "#D4AF37",
+    gold: "#F4D03F",                       // 亮金色（用于文字）
    goldLight: "#FFD54F",
    inputBg: "#151922",
    inputBorder: "#2D3748",
-    buttonBg: "#D4AF37",
+    buttonBg: "#D4AF37",                   // 按钮背景保持深金色
    buttonText: "#0A0E17",
    buttonHoverBg: "#FFD54F",
    badgeS: { bg: "rgba(255, 195, 0, 0.2)", color: "#FFD54F" },
@@ -61,8 +61,8 @@ const THEME_PRESETS = {
    badgeB: { bg: "rgba(59, 130, 246, 0.2)", color: "#60A5FA" },
    badgeC: { bg: "rgba(107, 114, 128, 0.2)", color: "#9CA3AF" },
    tagBg: "rgba(212, 175, 55, 0.15)",
-    tagColor: "#D4AF37",
-    spinnerColor: "#D4AF37",
+    tagColor: "#F4D03F",                   // 亮金色
+    spinnerColor: "#F4D03F",               // 亮金色
  },
  default: {
    bg: "white",
--- a/src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx
+++ b/src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx
@@ -10,17 +10,18 @@ import type { Shareholder } from "../../types";
 import { THEME } from "../../BasicInfoTab/config";

 // antd 表格黑金主题配置
+// 使用更亮的金色以提高对比度
 const TABLE_THEME = {
  token: {
    colorBgContainer: "#2D3748",      // gray.700
    colorText: "white",
-    colorTextHeading: "#D4AF37",      // 金色
+    colorTextHeading: "#F4D03F",      // 亮金色（提高对比度）
    colorBorderSecondary: "rgba(212, 175, 55, 0.3)",
  },
  components: {
    Table: {
      headerBg: "#1A202C",            // gray.900
-      headerColor: "#D4AF37",         // 金色
+      headerColor: "#F4D03F",         // 亮金色（提高对比度）
      rowHoverBg: "rgba(212, 175, 55, 0.15)",  // 金色半透明，文字更清晰
      borderColor: "rgba(212, 175, 55, 0.2)",
    },
@@ -135,7 +136,7 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
        ellipsis: true,
        render: (name: string) => (
          <Tooltip title={name}>
-            <span style={{ fontWeight: 500, color: "#D4AF37" }}>{name}</span>
+            <span style={{ fontWeight: 500, color: "#F4D03F" }}>{name}</span>
          </Tooltip>
        ),
      },
@@ -158,7 +159,7 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
        responsive: ["md"],
        sorter: (a: Shareholder, b: Shareholder) => (a.holding_shares || 0) - (b.holding_shares || 0),
        render: (shares: number) => (
-          <span style={{ color: "#D4AF37" }}>{formatShares(shares)}</span>
+          <span style={{ color: "#F4D03F" }}>{formatShares(shares)}</span>
        ),
      },
      {