Merge pull request #1964 from bubblepipe/electron

feat: Add Electron wrapper for desktop app

.github/workflows/electron-build.yml

+name: Build Electron App
+
+on:
+  push:
+    tags:
+      - '*'  # Triggers on version tags like v1.0.0
+  workflow_dispatch:  # Allows manual triggering
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        # os: [macos-latest, windows-latest]
+        os: [windows-latest]
+
+    runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '>=1.18.0'
+
+      - name: Build frontend
+        env:
+          CI: ""
+          NODE_OPTIONS: "--max-old-space-size=4096"
+        run: |
+          cd web
+          bun install
+          DISABLE_ESLINT_PLUGIN='true' VITE_REACT_APP_VERSION=$(git describe --tags) bun run build
+          cd ..
+
+      # - name: Build Go binary (macos/Linux)
+      #   if: runner.os != 'Windows'
+      #   run: |
+      #     go mod download
+      #     go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)' -extldflags '-static'" -o new-api
+
+      - name: Build Go binary (Windows)
+        if: runner.os == 'Windows'
+        run: |
+          go mod download
+          go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)'" -o new-api.exe
+
+      - name: Update Electron version
+        run: |
+          cd electron
+          VERSION=$(git describe --tags)
+          VERSION=${VERSION#v}  # Remove 'v' prefix if present
+          npm version $VERSION --no-git-tag-version --allow-same-version
+
+      - name: Install Electron dependencies
+        run: |
+          cd electron
+          npm install
+
+      # - name: Build Electron app (macOS)
+      #   if: runner.os == 'macOS'
+      #   run: |
+      #     cd electron
+      #     npm run build:mac
+      #   env:
+      #     CSC_IDENTITY_AUTO_DISCOVERY: false  # Skip code signing
+
+      - name: Build Electron app (Windows)
+        if: runner.os == 'Windows'
+        run: |
+          cd electron
+          npm run build:win
+
+      # - name: Upload artifacts (macOS)
+      #   if: runner.os == 'macOS'
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: macos-build
+      #     path: |
+      #       electron/dist/*.dmg
+      #       electron/dist/*.zip
+
+      - name: Upload artifacts (Windows)
+        if: runner.os == 'Windows'
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-build
+          path: |
+            electron/dist/*.exe
+
+  release:
+    needs: build
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/')
+
+    steps:
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            # macos-build/*
+            windows-build/*
+          draft: false
+          prerelease: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file

.github/workflows/linux-release.yml

@@ -38,21 +38,22 @@ jobs:
       - name: Build Backend (amd64)
       - name: Build Backend (amd64)
         run: |
         run: |
           go mod download
           go mod download
-          go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)' -extldflags '-static'" -o new-api
+          VERSION=$(git describe --tags)
+          go build -ldflags "-s -w -X 'one-api/common.Version=$VERSION' -extldflags '-static'" -o new-api-$VERSION
 
 
       - name: Build Backend (arm64)
       - name: Build Backend (arm64)
         run: |
         run: |
           sudo apt-get update
           sudo apt-get update
           DEBIAN_FRONTEND=noninteractive sudo apt-get install -y gcc-aarch64-linux-gnu
           DEBIAN_FRONTEND=noninteractive sudo apt-get install -y gcc-aarch64-linux-gnu
-          CC=aarch64-linux-gnu-gcc CGO_ENABLED=1 GOOS=linux GOARCH=arm64 go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)' -extldflags '-static'" -o new-api-arm64
+          VERSION=$(git describe --tags)
+          CC=aarch64-linux-gnu-gcc CGO_ENABLED=1 GOOS=linux GOARCH=arm64 go build -ldflags "-s -w -X 'one-api/common.Version=$VERSION' -extldflags '-static'" -o new-api-arm64-$VERSION
 
 
       - name: Release
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         if: startsWith(github.ref, 'refs/tags/')
         if: startsWith(github.ref, 'refs/tags/')
         with:
         with:
           files: |
           files: |
-            new-api
-            new-api-arm64
+            new-api-*
           draft: true
           draft: true
           generate_release_notes: true
           generate_release_notes: true
         env:
         env:

.github/workflows/macos-release.yml

@@ -39,12 +39,13 @@ jobs:
       - name: Build Backend
       - name: Build Backend
         run: |
         run: |
           go mod download
           go mod download
-          go build -ldflags "-X 'one-api/common.Version=$(git describe --tags)'" -o new-api-macos
+          VERSION=$(git describe --tags)
+          go build -ldflags "-X 'one-api/common.Version=$VERSION'" -o new-api-macos-$VERSION
       - name: Release
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         if: startsWith(github.ref, 'refs/tags/')
         if: startsWith(github.ref, 'refs/tags/')
         with:
         with:
-          files: new-api-macos
+          files: new-api-macos-*
           draft: true
           draft: true
           generate_release_notes: true
           generate_release_notes: true
         env:
         env:

.github/workflows/windows-release.yml

@@ -41,12 +41,13 @@ jobs:
       - name: Build Backend
       - name: Build Backend
         run: |
         run: |
           go mod download
           go mod download
-          go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)'" -o new-api.exe
+          VERSION=$(git describe --tags)
+          go build -ldflags "-s -w -X 'one-api/common.Version=$VERSION'" -o new-api-$VERSION.exe
       - name: Release
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         if: startsWith(github.ref, 'refs/tags/')
         if: startsWith(github.ref, 'refs/tags/')
         with:
         with:
-          files: new-api.exe
+          files: new-api-*.exe
           draft: true
           draft: true
           generate_release_notes: true
           generate_release_notes: true
         env:
         env:

.gitignore

@@ -9,6 +9,10 @@ logs
 web/dist
 web/dist
 .env
 .env
 one-api
 one-api
+new-api
 .DS_Store
 .DS_Store
 tiktoken_cache
 tiktoken_cache
 .eslintcache
 .eslintcache
+
+electron/node_modules
+electron/dist
\ No newline at end of file

electron/README.md

+# New API Electron Desktop App
+
+This directory contains the Electron wrapper for New API, providing a native desktop application with system tray support for Windows, macOS, and Linux.
+
+## Prerequisites
+
+### 1. Go Binary (Required)
+The Electron app requires the compiled Go binary to function. You have two options:
+
+**Option A: Use existing binary (without Go installed)**
+```bash
+# If you have a pre-built binary (e.g., new-api-macos)
+cp ../new-api-macos ../new-api
+```
+
+**Option B: Build from source (requires Go)**
+TODO
+
+### 3. Electron Dependencies
+```bash
+cd electron
+npm install
+```
+
+## Development
+
+Run the app in development mode:
+```bash
+npm start
+```
+
+This will:
+- Start the Go backend on port 3000
+- Open an Electron window with DevTools enabled
+- Create a system tray icon (menu bar on macOS)
+- Store database in `../data/new-api.db`
+
+## Building for Production
+
+### Quick Build
+```bash
+# Ensure Go binary exists in parent directory
+ls ../new-api  # Should exist
+
+# Build for current platform
+npm run build
+
+# Platform-specific builds
+npm run build:mac    # Creates .dmg and .zip
+npm run build:win    # Creates .exe installer
+npm run build:linux  # Creates .AppImage and .deb
+```
+
+### Build Output
+- Built applications are in `electron/dist/`
+- macOS: `.dmg` (installer) and `.zip` (portable)
+- Windows: `.exe` (installer) and portable exe
+- Linux: `.AppImage` and `.deb`
+
+## Configuration
+
+### Port
+Default port is 3000. To change, edit `main.js`:
+```javascript
+const PORT = 3000; // Change to desired port
+```
+
+### Database Location
+- **Development**: `../data/new-api.db` (project directory)
+- **Production**:
+  - macOS: `~/Library/Application Support/New API/data/`
+  - Windows: `%APPDATA%/New API/data/`
+  - Linux: `~/.config/New API/data/`

electron/build.sh

+#!/bin/bash
+
+set -e
+
+echo "Building New API Electron App..."
+
+echo "Step 1: Building frontend..."
+cd ../web
+DISABLE_ESLINT_PLUGIN='true' bun run build
+cd ../electron
+
+echo "Step 2: Building Go backend..."
+cd ..
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    echo "Building for macOS..."
+    CGO_ENABLED=1 go build -ldflags="-s -w" -o new-api
+    cd electron
+    npm install
+    npm run build:mac
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    echo "Building for Linux..."
+    CGO_ENABLED=1 go build -ldflags="-s -w" -o new-api
+    cd electron
+    npm install
+    npm run build:linux
+elif [[ "$OSTYPE" == "msys" || "$OSTYPE" == "cygwin" || "$OSTYPE" == "win32" ]]; then
+    echo "Building for Windows..."
+    CGO_ENABLED=1 go build -ldflags="-s -w" -o new-api.exe
+    cd electron
+    npm install
+    npm run build:win
+else
+    echo "Unknown OS, building for current platform..."
+    CGO_ENABLED=1 go build -ldflags="-s -w" -o new-api
+    cd electron
+    npm install
+    npm run build
+fi
+
+echo "Build complete! Check electron/dist/ for output."
\ No newline at end of file

electron/create-tray-icon.js

+// Create a simple tray icon for macOS
+// Run: node create-tray-icon.js
+
+const fs = require('fs');
+const { createCanvas } = require('canvas');
+
+function createTrayIcon() {
+  // For macOS, we'll use a Template image (black and white)
+  // Size should be 22x22 for Retina displays (@2x would be 44x44)
+  const canvas = createCanvas(22, 22);
+  const ctx = canvas.getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 22, 22);
+
+  // Draw a simple "API" icon
+  ctx.fillStyle = '#000000';
+  ctx.font = 'bold 10px system-ui';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText('API', 11, 11);
+
+  // Save as PNG
+  const buffer = canvas.toBuffer('image/png');
+  fs.writeFileSync('tray-icon.png', buffer);
+
+  // For Template images on macOS (will adapt to menu bar theme)
+  fs.writeFileSync('tray-iconTemplate.png', buffer);
+  fs.writeFileSync('tray-iconTemplate@2x.png', buffer);
+
+  console.log('Tray icon created successfully!');
+}
+
+// Check if canvas is installed
+try {
+  createTrayIcon();
+} catch (err) {
+  console.log('Canvas module not installed.');
+  console.log('For now, creating a placeholder. Install canvas with: npm install canvas');
+
+  // Create a minimal 1x1 transparent PNG as placeholder
+  const minimalPNG = Buffer.from([
+    0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
+    0x00, 0x00, 0x00, 0x0D, 0x49, 0x48, 0x44, 0x52,
+    0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01,
+    0x01, 0x03, 0x00, 0x00, 0x00, 0x25, 0xDB, 0x56,
+    0xCA, 0x00, 0x00, 0x00, 0x03, 0x50, 0x4C, 0x54,
+    0x45, 0x00, 0x00, 0x00, 0xA7, 0x7A, 0x3D, 0xDA,
+    0x00, 0x00, 0x00, 0x01, 0x74, 0x52, 0x4E, 0x53,
+    0x00, 0x40, 0xE6, 0xD8, 0x66, 0x00, 0x00, 0x00,
+    0x0A, 0x49, 0x44, 0x41, 0x54, 0x08, 0x1D, 0x62,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00,
+    0x00, 0x01, 0x0A, 0x2D, 0xCB, 0x59, 0x00, 0x00,
+    0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42,
+    0x60, 0x82
+  ]);
+
+  fs.writeFileSync('tray-icon.png', minimalPNG);
+  console.log('Created placeholder tray icon.');
+}
\ No newline at end of file

electron/entitlements.mac.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.disable-library-validation</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+    <key>com.apple.security.network.client</key>
+    <true/>
+    <key>com.apple.security.network.server</key>
+    <true/>
+</dict>
+</plist>
\ No newline at end of file

electron/package.json

+{
+  "name": "new-api-electron",
+  "version": "1.0.0",
+  "description": "New API - AI Model Gateway Desktop Application",
+  "main": "main.js",
+  "scripts": {
+    "start-app": "electron .",
+    "dev-app": "cross-env NODE_ENV=development electron .",
+    "build": "electron-builder",
+    "build:mac": "electron-builder --mac",
+    "build:win": "electron-builder --win",
+    "build:linux": "electron-builder --linux"
+  },
+  "keywords": [
+    "ai",
+    "api",
+    "gateway",
+    "openai",
+    "claude"
+  ],
+  "author": "QuantumNous",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/QuantumNous/new-api"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "electron": "28.3.3",
+    "electron-builder": "^24.9.1"
+  },
+  "build": {
+    "appId": "com.newapi.desktop",
+    "productName": "New API",
+    "publish": null,
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "main.js",
+      "preload.js",
+      "icon.png",
+      "tray-iconTemplate.png",
+      "tray-iconTemplate@2x.png",
+      "tray-icon-windows.png"
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "icon": "icon.png",
+      "identity": null,
+      "hardenedRuntime": false,
+      "gatekeeperAssess": false,
+      "entitlements": "entitlements.mac.plist",
+      "entitlementsInherit": "entitlements.mac.plist",
+      "target": [
+        "dmg",
+        "zip"
+      ],
+      "extraResources": [
+        {
+          "from": "../new-api",
+          "to": "bin/new-api"
+        },
+        {
+          "from": "../web/dist",
+          "to": "web/dist"
+        }
+      ]
+    },
+    "win": {
+      "icon": "icon.png",
+      "target": [
+        "nsis",
+        "portable"
+      ],
+      "extraResources": [
+        {
+          "from": "../new-api.exe",
+          "to": "bin/new-api.exe"
+        }
+      ]
+    },
+    "linux": {
+      "icon": "icon.png",
+      "target": [
+        "AppImage",
+        "deb"
+      ],
+      "category": "Development",
+      "extraResources": [
+        {
+          "from": "../new-api",
+          "to": "bin/new-api"
+        }
+      ]
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true
+    }
+  }
+}
\ No newline at end of file

electron/preload.js

+const { contextBridge } = require('electron');
+
+// 获取数据目录路径（用于显示给用户）
+// 使用字符串拼接而不是 path.join 避免模块依赖问题
+function getDataDirPath() {
+  const platform = process.platform;
+  const homeDir = process.env.HOME || process.env.USERPROFILE || '';
+  
+  switch (platform) {
+    case 'darwin':
+      return `${homeDir}/Library/Application Support/New API/data`;
+    case 'win32': {
+      const appData = process.env.APPDATA || `${homeDir}\\AppData\\Roaming`;
+      return `${appData}\\New API\\data`;
+    }
+    case 'linux':
+      return `${homeDir}/.config/New API/data`;
+    default:
+      return `${homeDir}/.new-api/data`;
+  }
+}
+
+contextBridge.exposeInMainWorld('electron', {
+  isElectron: true,
+  version: process.versions.electron,
+  platform: process.platform,
+  versions: process.versions,
+  dataDir: getDataDirPath()
+});
\ No newline at end of file

web/src/components/setup/components/steps/DatabaseStep.jsx

@@ -25,15 +25,39 @@ import { Banner } from '@douyinfe/semi-ui';
  * 显示当前数据库类型和相关警告信息
  * 显示当前数据库类型和相关警告信息
  */
  */
 const DatabaseStep = ({ setupStatus, renderNavigationButtons, t }) => {
 const DatabaseStep = ({ setupStatus, renderNavigationButtons, t }) => {
+  // 检测是否在 Electron 环境中运行
+  const isElectron = typeof window !== 'undefined' && window.electron?.isElectron;
+  
   return (
   return (
     <>
     <>
       {/* 数据库警告 */}
       {/* 数据库警告 */}
       {setupStatus.database_type === 'sqlite' && (
       {setupStatus.database_type === 'sqlite' && (
         <Banner
         <Banner
-          type='warning'
+          type={isElectron ? 'info' : 'warning'}
           closeIcon={null}
           closeIcon={null}
-          title={t('数据库警告')}
+          title={isElectron ? t('本地数据存储') : t('数据库警告')}
           description={
           description={
+            isElectron ? (
+              <div>
+                <p>
+                  {t(
+                    '您的数据将安全地存储在本地计算机上。所有配置、用户信息和使用记录都会自动保存，关闭应用后不会丢失。',
+                  )}
+                </p>
+                {window.electron?.dataDir && (
+                  <p className='mt-2 text-sm opacity-80'>
+                    <strong>{t('数据存储位置：')}</strong>
+                    <br />
+                    <code className='bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded'>
+                      {window.electron.dataDir}
+                    </code>
+                  </p>
+                )}
+                <p className='mt-2 text-sm opacity-70'>
+                  💡 {t('提示：如需备份数据，只需复制上述目录即可')}
+                </p>
+              </div>
+            ) : (
               <div>
               <div>
                 <p>
                 <p>
                   {t(
                   {t(
@@ -48,6 +72,7 @@ const DatabaseStep = ({ setupStatus, renderNavigationButtons, t }) => {
                   </strong>
                   </strong>
                 </p>
                 </p>
               </div>
               </div>
+            )
           }
           }
           className='!rounded-lg'
           className='!rounded-lg'
           fullMode={false}
           fullMode={false}