FuturesDesk：配置驱动 UI 的 Electron 金融桌面应用模板

项目简介FuturesDesk 是金融类桌面软件的通用基础模板基于 Electron Vue 3 TypeScript 构建。其核心理念是配置驱动 UI——通过修改一份配置文件即可定制主题、菜单、登录等所有平台级功能无需改动代码。金融桌面软件通常具有以下特点对稳定性要求极高、界面风格需要深度定制、多终端界面需要保持统一。传统开发模式下改一个主题颜色可能需要改动多个文件维护成本高且容易出错。FuturesDesk 通过配置集中管理实现了一次配置多端生效的目标。技术栈类别技术桌面框架Electron 37前端框架Vue 3.5 TypeScript 5.9构建工具Vite 7 electron-builder状态管理Pinia 3UI 组件库Element Plus 2.13图表库ECharts 6.0样式SCSS TailwindCSS 4.1核心特性配置驱动 UI平台级配置集中在一个文件中{Version:6.2.0,Title:FuturesDesk,Theme:{primary:#d15a1a,background:#1a1a1a},Menu:[{path:/welcome,title:首页},{path:/market,title:行情}],Login:{defaultUsername:admin,defaultPassword:admin123456}}修改配置后重启应用即可生效。主题、菜单、登录信息、窗口标题等均可通过配置文件调整。主题系统所有颜色通过 CSS 变量管理主要变量包括变量用途--pure-bg-color主背景--pure-card-bg卡片背景--pure-text-primary主文字--pure-brand-color品牌色橙色--pure-up-color上涨色--pure-down-color下跌色组件样式必须使用 CSS 变量禁止硬编码颜色值。这一设计确保了主题切换的一致性和可维护性。金融专用组件项目提供finance-*系列组件专门适配金融桌面场景finance-header顶部工具栏高度 48pxfinance-sidebar左侧导航菜单宽度 200pxfinance-content主内容区域finance-ticker底部行情滚动条高度 28px这些组件开箱即用新开发业务应优先使用保持界面风格统一。目录结构. ├── public/ │ └── platform-config.json # 核心配置文件 ├── src/ │ ├── main.ts # Vue 应用入口 │ ├── config/ │ │ └── useTheme.ts # 主题系统 │ ├── layout/ │ │ └── components/ │ │ └── finance-*/ # 金融专用组件 │ ├── router/ │ │ └── modules/ # 路由模块自动导入 │ └── store/ # Pinia 状态管理 ├── electron/ │ ├── main/index.ts # Electron 主进程 │ └── preload/index.ts # 预加载脚本 └── build/ # Vite 构建配置快速上手环境要求Node.js 20.x LTSpnpm 8.x运行命令# 安装依赖pnpminstall# 开发模式pnpmdev# 生产构建pnpmbuild开发模式支持热重载修改代码后会自动更新。生产构建会生成可分发的安装包。适用场景FuturesDesk 适用于以下场景期货交易终端需要实时行情、快捷下单、多窗口布局证券行情软件股票、期货、外汇等金融数据展示金融数据分析平台图表分析、指标计算、数据可视化企业内部工具需要桌面端但又需要统一风格的金融类工具对于需要快速搭建桌面端原型的团队FuturesDesk 可以显著缩短初始化时间。项目定位FuturesDesk 是一个基础模板定位是让开发者专注于业务逻辑而非基础设施。它提供完善的桌面应用框架统一的界面风格规范可复用的金融组件开发者可以在此基础上根据实际需求进行定制开发无需从零开始搭建桌面应用项目。总结FuturesDesk 通过配置驱动 UI 的理念将平台级配置与业务代码分离降低了维护成本提高了开发效率。其完整的技术架构、统一的风格规范、丰富的金融组件使得构建金融桌面应用变得更加简单高效。