ele-HeiXiu/src/theme/antd-theme.ts

// ============================================================
// Ant Design 主题适配器 —— 蓝紫渐变主题（亮色 + 暗色）
// 通过 ConfigProvider 的 theme 属性覆盖 Ant Design 默认主题变量，
// 确保与 Tailwind 主题令牌（tokens.ts / globals.css）同步。
// ============================================================

import type { ThemeConfig } from 'antd';
import { theme } from 'antd';

import {
   colorPrimary,
   colorPrimaryLight,
   colorSuccess,
   colorWarning,
   colorError,
   colorInfo,
   colorTextBase,
   colorTextSecondary,
   colorBgBase,
   colorBgContainer,
   colorBgElevated,
   colorBgLayout,
   colorBorder,
   colorBorderSecondary,
   borderRadiusBase,
   borderRadiusLG,
   borderRadiusSM,
   borderRadiusXS,
   fontFamily,
   fontFamilyCode,
   fontSizeBase,
   fontSizeLG,
   fontSizeSM,
   fontSizeXL,
   boxShadowBase,
   boxShadowLG,
   gradientPrimary,
   // 暗色令牌
   darkColorTextBase,
   darkColorTextSecondary,
   darkColorTextTertiary,
   darkColorBgBase,
   darkColorBgContainer,
   darkColorBgElevated,
   darkColorBgLayout,
   darkColorBorder,
   darkColorBorderSecondary,
} from './tokens';

// ============================================================
// 共享的组件级覆盖（亮色 & 暗色通用）
// ============================================================

const sharedComponents: ThemeConfig['components'] = {
   Button: {
      colorPrimary,
      colorPrimaryHover: colorPrimaryLight,
      colorPrimaryActive: '#4F46E5',
      primaryShadow: '0 2px 0 rgba(99, 102, 241, 0.15)',
      borderRadius: borderRadiusBase,
      defaultBorderColor: colorBorder,
   },
   Menu: {
      itemSelectedBg: '#EEF2FF',
      itemSelectedColor: colorPrimary,
      itemHoverBg: '#F5F3FF',
      itemActiveBg: '#E0E7FF',
   },
   Tabs: {
      itemSelectedColor: colorPrimary,
      itemHoverColor: colorPrimaryLight,
      inkBarColor: colorPrimary,
   },
   Modal: {
      borderRadiusLG,
   },
   Card: {
      borderRadiusLG,
   },
   Tag: {
      defaultBg: '#EEF2FF',
      defaultColor: colorPrimary,
   },
   Input: {
      activeBorderColor: colorPrimary,
      hoverBorderColor: colorPrimaryLight,
   },
   Select: {
      activeBorderColor: colorPrimary,
      hoverBorderColor: colorPrimaryLight,
   },
   DatePicker: {
      activeBorderColor: colorPrimary,
      hoverBorderColor: colorPrimaryLight,
   },
   Switch: {
      colorPrimary,
      colorPrimaryHover: colorPrimaryLight,
   },
   Slider: {
      colorPrimary,
      colorPrimaryBorder: colorPrimary,
      colorPrimaryBorderHover: colorPrimaryLight,
   },
   Progress: {
      defaultColor: colorPrimary,
   },
   Spin: {
      colorPrimary,
   },
   Breadcrumb: {
      linkColor: colorPrimary,
      linkHoverColor: colorPrimaryLight,
      lastItemColor: colorTextBase,
   },
   Pagination: {
      itemActiveBg: colorPrimary,
      colorPrimary,
      colorPrimaryHover: colorPrimaryLight,
   },
   Notification: {
      borderRadiusLG,
   },
   Tooltip: {
      borderRadius: borderRadiusSM,
   },
};

// ============================================================
// 共享的 token 基座（不变部分）
// ============================================================

const sharedTokens = {
   // 品牌色
   colorPrimary,
   colorPrimaryBg: '#EEF2FF',
   colorPrimaryBgHover: '#E0E7FF',
   colorPrimaryBorder: '#C7D2FE',
   colorPrimaryBorderHover: '#A5B4FC',
   colorPrimaryHover: colorPrimaryLight,
   colorPrimaryActive: '#4F46E5',
   colorPrimaryTextHover: colorPrimaryLight,
   colorPrimaryText: colorPrimary,
   colorPrimaryTextActive: '#4338CA',

   // 功能色
   colorSuccess,
   colorWarning,
   colorError,
   colorInfo,

   // 圆角
   borderRadius: borderRadiusBase,
   borderRadiusLG,
   borderRadiusSM,
   borderRadiusXS,

   // 字体
   fontFamily,
   fontFamilyCode,
   fontSize: fontSizeBase,
   fontSizeLG,
   fontSizeSM,
   fontSizeXL,
   fontSizeHeading1: 28,
   fontSizeHeading2: 24,
   fontSizeHeading3: 20,
   fontSizeHeading4: 18,
   fontSizeHeading5: 16,

   // 间距
   padding: 16,
   paddingLG: 24,
   paddingSM: 12,
   paddingXS: 8,
   paddingXXS: 4,

   // 链接
   colorLink: colorPrimary,
   colorLinkHover: colorPrimaryLight,
   colorLinkActive: '#4F46E5',
};

// ============================================================
// 🌞 亮色主题配置
// ============================================================

export const lightTheme: ThemeConfig = {
   algorithm: theme.defaultAlgorithm,
   token: {
      ...sharedTokens,

      // 文字色 — 亮色
      colorText: colorTextBase,
      colorTextSecondary,
      colorTextTertiary: '#9CA3AF',

      // 背景色 — 亮色
      colorBgBase,
      colorBgContainer,
      colorBgElevated,
      colorBgLayout,

      // 边框 — 亮色
      colorBorder,
      colorBorderSecondary,

      // 阴影
      boxShadow: boxShadowBase,
      boxShadowSecondary: boxShadowLG,
   },
   components: {
      ...sharedComponents,
      Layout: {
         siderBg: `linear-gradient(180deg, #1E1B4B 0%, #312E81 100%)`,
         headerBg: colorBgBase,
         bodyBg: colorBgLayout,
      },
      Table: {
         headerBg: '#EEF2FF',
         headerColor: colorTextBase,
         rowHoverBg: '#F5F3FF',
         borderColor: colorBorderSecondary,
      },
   },
};

// ============================================================
// 🌙 暗色主题配置
// ============================================================

export const darkTheme: ThemeConfig = {
   algorithm: theme.darkAlgorithm,
   token: {
      ...sharedTokens,

      // 暗色模式下品牌色适当提亮以保证对比度
      colorPrimary: colorPrimaryLight,
      colorPrimaryHover: '#A5B4FC',
      colorPrimaryActive: colorPrimary,
      colorPrimaryBg: '#1E1B4B',
      colorPrimaryBgHover: '#312E81',
      colorPrimaryBorder: '#4338CA',
      colorPrimaryBorderHover: colorPrimary,
      colorPrimaryTextHover: '#A5B4FC',
      colorPrimaryText: colorPrimaryLight,
      colorPrimaryTextActive: colorPrimary,

      // 链接
      colorLink: colorPrimaryLight,
      colorLinkHover: '#A5B4FC',
      colorLinkActive: colorPrimary,

      // 文字色 — 暗色
      colorText: darkColorTextBase,
      colorTextSecondary: darkColorTextSecondary,
      colorTextTertiary: darkColorTextTertiary,

      // 背景色 — 暗色
      colorBgBase: darkColorBgBase,
      colorBgContainer: darkColorBgContainer,
      colorBgElevated: darkColorBgElevated,
      colorBgLayout: darkColorBgLayout,

      // 边框 — 暗色
      colorBorder: darkColorBorder,
      colorBorderSecondary: darkColorBorderSecondary,

      // 阴影 — 暗色模式下用更深的投影
      boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3)',
      boxShadowSecondary: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4)',
   },
   components: {
      ...sharedComponents,
      Button: {
         ...sharedComponents?.Button,
         defaultBorderColor: darkColorBorder,
      },
      Menu: {
         itemSelectedBg: '#312E81',
         itemSelectedColor: colorPrimaryLight,
         itemHoverBg: '#242040',
         itemActiveBg: '#1E1B4B',
      },
      Layout: {
         siderBg: `linear-gradient(180deg, #0B0A15 0%, #1A1730 100%)`,
         headerBg: darkColorBgContainer,
         bodyBg: darkColorBgLayout,
      },
      Table: {
         headerBg: '#1E1B4B',
         headerColor: darkColorTextBase,
         rowHoverBg: '#242040',
         borderColor: darkColorBorderSecondary,
      },
      Tag: {
         defaultBg: '#1E1B4B',
         defaultColor: colorPrimaryLight,
      },
   },
};

// ============================================================
// 辅助导出
// ============================================================

/** 根据 isDark 获取对应的主题配置 */
export function getThemeConfig(isDark: boolean): ThemeConfig {
   return isDark ? darkTheme : lightTheme;
}

export { gradientPrimary };