vf_react/src/views/Company/config.ts

/**
 * Company 页面配置
 * - 黑金主题配置
 * - Tab 配置
 */

import React, { lazy } from 'react';
import { Building2, Brain, TrendingUp, Wallet, FileBarChart, Newspaper } from 'lucide-react';
import type { CompanyTheme, TabConfig } from './types';

// 骨架屏组件（同步导入，用于 Suspense fallback）
import { FinancialPanoramaSkeleton } from './components/FinancialPanorama/components';
import { ForecastSkeleton } from './components/ForecastReport/components';

// ============================================
// 黑金主题配置
// ============================================

export const THEME: CompanyTheme = {
  // 背景色
  bg: '#1A1A2E',
  cardBg: '#16213E',

  // 金色系
  gold: '#D4AF37',
  goldLight: '#F0D78C',
  goldDark: '#B8960C',

  // 文字色
  textPrimary: '#FFFFFF',
  textSecondary: 'rgba(255, 255, 255, 0.7)',
  textMuted: 'rgba(255, 255, 255, 0.5)',

  // 边框色
  border: 'rgba(212, 175, 55, 0.2)',
  borderHover: 'rgba(212, 175, 55, 0.4)',

  // 涨跌色
  positive: '#EF4444',
  negative: '#22C55E',
  positiveBg: 'rgba(239, 68, 68, 0.2)',
  negativeBg: 'rgba(34, 197, 94, 0.2)',
};

// ============================================
// Tab 懒加载组件（带 webpack chunk 命名）
// ============================================

const CompanyOverview = lazy(() =>
  import(/* webpackChunkName: "company-overview" */ './components/CompanyOverview/BasicInfoTab')
);
const DeepAnalysis = lazy(() =>
  import(/* webpackChunkName: "company-deep-analysis" */ './components/DeepAnalysis')
);
const MarketDataView = lazy(() =>
  import(/* webpackChunkName: "company-market-data" */ './components/MarketDataView')
);
const FinancialPanorama = lazy(() =>
  import(/* webpackChunkName: "company-financial" */ './components/FinancialPanorama')
);
const ForecastReport = lazy(() =>
  import(/* webpackChunkName: "company-forecast" */ './components/ForecastReport')
);
const DynamicTracking = lazy(() =>
  import(/* webpackChunkName: "company-tracking" */ './components/DynamicTracking')
);

// ============================================
// Tab 配置
// ============================================

export const TAB_CONFIG: TabConfig[] = [
  {
    key: 'overview',
    name: '公司概览',
    icon: Building2,
    component: CompanyOverview,
  },
  {
    key: 'analysis',
    name: '深度分析',
    icon: Brain,
    component: DeepAnalysis,
  },
  {
    key: 'market',
    name: '股票行情',
    icon: TrendingUp,
    component: MarketDataView,
  },
  {
    key: 'financial',
    name: '财务全景',
    icon: Wallet,
    component: FinancialPanorama,
    fallback: React.createElement(FinancialPanoramaSkeleton),
  },
  {
    key: 'forecast',
    name: '盈利预测',
    icon: FileBarChart,
    component: ForecastReport,
    fallback: React.createElement(ForecastSkeleton),
  },
  {
    key: 'tracking',
    name: '动态跟踪',
    icon: Newspaper,
    component: DynamicTracking,
  },
];

// ============================================
// 搜索框样式配置（Ant Design AutoComplete）
// ============================================

export const getSearchBoxStyles = (theme: CompanyTheme) => ({
  '.ant-select-selector': {
    backgroundColor: `${theme.bg} !important`,
    borderColor: `${theme.border} !important`,
    borderRadius: '8px !important',
    height: '40px !important',
    '&:hover': {
      borderColor: `${theme.borderHover} !important`,
    },
  },
  '.ant-select-selection-search-input': {
    color: `${theme.textPrimary} !important`,
    height: '38px !important',
  },
  '.ant-select-selection-placeholder': {
    color: `${theme.textMuted} !important`,
  },
  '.ant-select-dropdown': {
    backgroundColor: `${theme.cardBg} !important`,
    borderColor: `${theme.border} !important`,
  },
  '.ant-select-item': {
    color: `${theme.textPrimary} !important`,
    '&:hover': {
      backgroundColor: `${theme.bg} !important`,
    },
  },
  '.ant-select-item-option-selected': {
    backgroundColor: 'rgba(212, 175, 55, 0.2) !important',
  },
});