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:
117
src/theme/tokens.ts
Normal file
117
src/theme/tokens.ts
Normal file
@@ -0,0 +1,117 @@
|
||||
// ============================================================
|
||||
// 设计令牌(Design Tokens)—— 蓝紫渐变主题
|
||||
// 此处定义的颜色、圆角、阴影等令牌,需同步到:
|
||||
// 1. globals.css(Tailwind CSS 扩展,通过 @theme 指令)
|
||||
// 2. antd-theme.ts(Ant Design ConfigProvider 主题配置)
|
||||
// 修改时三处同步更新。
|
||||
// ============================================================
|
||||
|
||||
// ---------- 品牌色(蓝紫渐变) ----------
|
||||
|
||||
/** 品牌主色 — Indigo-500 */
|
||||
export const colorPrimary = '#6366F1';
|
||||
|
||||
/** 品牌主色浅色变体 */
|
||||
export const colorPrimaryLight = '#818CF8';
|
||||
|
||||
/** 品牌主色深色变体 */
|
||||
export const colorPrimaryDark = '#4F46E5';
|
||||
|
||||
/** 品牌辅助色 — Violet-500(渐变另一端) */
|
||||
export const colorSecondary = '#8B5CF6';
|
||||
|
||||
/** 品牌渐变色起始值 */
|
||||
export const gradientStart = '#4F46E5'; // Indigo-600
|
||||
|
||||
/** 品牌渐变色结束值 */
|
||||
export const gradientEnd = '#7C3AED'; // Violet-600
|
||||
|
||||
/** 品牌渐变色(CSS 值,可直接用于 background) */
|
||||
export const gradientPrimary = `linear-gradient(135deg, ${gradientStart}, ${gradientEnd})`;
|
||||
|
||||
/** 品牌渐变悬停态 */
|
||||
export const gradientPrimaryHover = `linear-gradient(135deg, ${colorPrimary}, ${colorSecondary})`;
|
||||
|
||||
// ---------- 功能色 ----------
|
||||
|
||||
export const colorSuccess = '#10B981';
|
||||
export const colorWarning = '#F59E0B';
|
||||
export const colorError = '#EF4444';
|
||||
export const colorInfo = '#3B82F6';
|
||||
|
||||
// ---------- 中性色(亮色模式) ----------
|
||||
|
||||
export const colorTextBase = '#1E1B4B'; // 深蓝紫黑
|
||||
export const colorTextSecondary = '#6B7280';
|
||||
export const colorTextTertiary = '#9CA3AF';
|
||||
|
||||
export const colorBgBase = '#FFFFFF';
|
||||
export const colorBgContainer = '#F9FAFB';
|
||||
export const colorBgElevated = '#FFFFFF';
|
||||
export const colorBgLayout = '#F5F3FF'; // Violet-50
|
||||
export const colorBgSpotlight = '#F3F4F6';
|
||||
|
||||
export const colorBorder = '#E5E7EB';
|
||||
export const colorBorderSecondary = '#F3F4F6';
|
||||
|
||||
// ---------- 中性色(暗色模式) ----------
|
||||
|
||||
/** 暗色模式 — 主文字 */
|
||||
export const darkColorTextBase = '#E8E6F0';
|
||||
/** 暗色模式 — 次要文字 */
|
||||
export const darkColorTextSecondary = '#A5A0C9';
|
||||
/** 暗色模式 — 辅助文字 */
|
||||
export const darkColorTextTertiary = '#6E6998';
|
||||
|
||||
/** 暗色模式 — 基础背景 */
|
||||
export const darkColorBgBase = '#0F0D1A'; // 深蓝紫黑
|
||||
/** 暗色模式 — 容器背景 */
|
||||
export const darkColorBgContainer = '#1A1730'; // 抬升一层
|
||||
/** 暗色模式 — 悬浮背景 */
|
||||
export const darkColorBgElevated = '#242040'; // 再抬升一层
|
||||
/** 暗色模式 — 布局背景 */
|
||||
export const darkColorBgLayout = '#0B0A15'; // 最深背景
|
||||
|
||||
/** 暗色模式 — 边框 */
|
||||
export const darkColorBorder = '#2E2A4A';
|
||||
/** 暗色模式 — 次要边框 */
|
||||
export const darkColorBorderSecondary = '#1F1C38';
|
||||
|
||||
// ---------- 圆角 ----------
|
||||
|
||||
export const borderRadiusBase = 8;
|
||||
export const borderRadiusLG = 12;
|
||||
export const borderRadiusSM = 6;
|
||||
export const borderRadiusXS = 4;
|
||||
|
||||
// ---------- 阴影 ----------
|
||||
|
||||
export const boxShadowBase =
|
||||
'0 1px 3px 0 rgba(99, 102, 241, 0.08), 0 1px 2px -1px rgba(99, 102, 241, 0.08)';
|
||||
export const boxShadowLG =
|
||||
'0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -4px rgba(99, 102, 241, 0.1)';
|
||||
|
||||
// ---------- 字体 ----------
|
||||
|
||||
export const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif`;
|
||||
export const fontFamilyCode = `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace`;
|
||||
|
||||
export const fontSizeBase = 14;
|
||||
export const fontSizeLG = 16;
|
||||
export const fontSizeSM = 12;
|
||||
export const fontSizeXL = 20;
|
||||
|
||||
// ---------- 间距 ----------
|
||||
|
||||
export const spacingUnit = 4;
|
||||
export const spacingXS = 4;
|
||||
export const spacingSM = 8;
|
||||
export const spacingMD = 16;
|
||||
export const spacingLG = 24;
|
||||
export const spacingXL = 32;
|
||||
export const spacingXXL = 48;
|
||||
|
||||
// ---------- 动画 ----------
|
||||
|
||||
export const transitionDuration = '0.2s';
|
||||
export const transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
Reference in New Issue
Block a user