feat: 初始化船长·HeiXiu 桌面应用项目（错误是svg的问题）
Electron + React 19 + TypeScript + Ant Design 6 + Tailwind CSS 4 【核心架构】 - Electron 主进程（窗口管理、平台检测、图标适配） - Vite 构建链（双产物 dist/ + dist-electron/） - 共享层 shared/（类型、常量、工具函数） - IPC 通信框架 + 安全守卫 【主题系统】 - 蓝紫渐变主题（亮色/暗色双模式） - Ant Design ConfigProvider 适配（lightAlgorithm / darkAlgorithm） - Tailwind CSS 4 @theme 指令 + CSS 变量 - 设计令牌三处同步（tokens.ts / globals.css / antd-theme.ts） 【导航栏】 - 自定义 H5 导航栏替代系统菜单 - 个人版/企业版双布局 - 未登录拦截 + 事件总线驱动登录弹窗 【登录注册】 - Modal 弹层（Portal）+ Tabs 切换 - 登录/注册表单动态字段渲染 - 记住密码 / 自动登录 / 用户协议 【更新系统】 - 自定义 API 版本检查（替代 electron-updater generic provider） - 手动下载 + SHA512 校验 + spawn NSIS 安装 - 渲染进程更新状态机 Hook（useUpdater） - 检查更新按钮 + 下载进度展示 【构建工具链】 - build.mjs 构建总管（--win/--mac/--linux --personal/--enterprise --build/--clean/--sign/--upload/--publish） - scripts/ 自动化脚本（clean / generate-update-info / upload-oss / publish-release） - electron-builder NSIS 安装器（可选路径、多版本打包） - update-info.json 自动生成（fileSize/sha512/changelog/releaseDate） 【代码质量】 - ESLint + TypeScript strict + Prettier - husky + lint-staged（提交前自动检查） - commitlint（规范提交信息） - Playwright E2E + Vitest 单元测试框架 - rollup-plugin-visualizer 打包体积分析 【文档】 - README.md（快速开始 + 目录结构 + 命令速查） - UpdateA.md（发布手册：API/签名/发版流程/数据库） - CHANGELOG.md（更新日志） - .env.example（构建环境变量模板）
This commit is contained in:
312
src/theme/antd-theme.ts
Normal file
312
src/theme/antd-theme.ts
Normal file
@@ -0,0 +1,312 @@
|
||||
// ============================================================
|
||||
// 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 };
|
||||
Reference in New Issue
Block a user