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

项目简介

FuturesDesk 是金融类桌面软件的通用基础模板，基于 Electron + Vue 3 + TypeScript 构建。其核心理念是配置驱动 UI ------通过修改一份配置文件，即可定制主题、菜单、登录等所有平台级功能，无需改动代码。

金融桌面软件通常具有以下特点：对稳定性要求极高、界面风格需要深度定制、多终端界面需要保持统一。传统开发模式下，改一个主题颜色可能需要改动多个文件，维护成本高且容易出错。FuturesDesk 通过配置集中管理，实现了"一次配置，多端生效"的目标。

技术栈

类别	技术
桌面框架	Electron 37
前端框架	Vue 3.5 + TypeScript 5.9
构建工具	Vite 7 + electron-builder
状态管理	Pinia 3
UI 组件库	Element Plus 2.13
图表库	ECharts 6.0
样式	SCSS + TailwindCSS 4.1

核心特性

配置驱动 UI

平台级配置集中在一个文件中：

json 复制代码

{
  "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：顶部工具栏，高度 48px
finance-sidebar：左侧导航菜单，宽度 200px
finance-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 LTS
pnpm 8.x

运行命令

bash 复制代码

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 生产构建
pnpm build

开发模式支持热重载，修改代码后会自动更新。生产构建会生成可分发的安装包。

适用场景

FuturesDesk 适用于以下场景：

期货交易终端：需要实时行情、快捷下单、多窗口布局
证券行情软件：股票、期货、外汇等金融数据展示
金融数据分析平台：图表分析、指标计算、数据可视化
企业内部工具：需要桌面端但又需要统一风格的金融类工具

对于需要快速搭建桌面端原型的团队，FuturesDesk 可以显著缩短初始化时间。

项目定位

FuturesDesk 是一个基础模板，定位是"让开发者专注于业务逻辑，而非基础设施"。它提供：

完善的桌面应用框架
统一的界面风格规范
可复用的金融组件

开发者可以在此基础上根据实际需求进行定制开发，无需从零开始搭建桌面应用项目。

总结

FuturesDesk 通过配置驱动 UI 的理念，将平台级配置与业务代码分离，降低了维护成本，提高了开发效率。其完整的技术架构、统一的风格规范、丰富的金融组件，使得构建金融桌面应用变得更加简单高效。