refactor(desktop): 替换 WebUI 为 Electron + electron-vite 桌面壳方案

- 使用 electron-vite 构建 main/preload,electron-builder 打包分发
- main process: dev 模式直连 localhost:3000,生产模式 spawn sidecar binary
- 添加 loading 页面,server 就绪前显示加载动画
- 更新 catalog 依赖: electron, electron-vite, electron-builder
- 移除 @webui-dev/bun-webui 依赖
This commit is contained in:
2026-02-08 18:16:13 +08:00
parent e8e473b357
commit 7318600e20
13 changed files with 961 additions and 110 deletions

View File

@@ -1,27 +1,32 @@
# AGENTS.md - Desktop App Guidelines
Thin WebUI shell hosting the fullstack server app.
Thin Electron shell hosting the fullstack server app.
## Tech Stack
> **⚠️ This project uses Bun — NOT Node.js / npm. All commands use `bun`. Never use `npm`, `npx`, or `node`.**
> **⚠️ This project uses Bun as the package manager. Runtime is Electron (Node.js). Never use `npm`, `npx`, `yarn`, or `pnpm`.**
- **Type**: WebUI desktop shell
- **Type**: Electron desktop shell
- **Design**: Server-driven desktop (thin native window hosting web app)
- **Runtime**: Bun (Main process) + System browser / WebView (via WebUI)
- **Window Library**: [webui-dev/webui](https://github.com/webui-dev/webui) — opens installed browser or native WebView as GUI
- **Build**: Turborepo
- **Runtime**: Electron (Main/Renderer) + Sidecar server binary (Bun-compiled)
- **Build Tool**: electron-vite (Vite-based, handles main + preload builds)
- **Packager**: electron-builder (installers, signing, auto-update)
- **Orchestration**: Turborepo
## Architecture
- **Server-driven design**: The desktop app is a "thin" native shell. It does not contain UI or business logic; it opens a browser window pointing to the `apps/server` TanStack Start application.
- **Dev mode**: Waits for the Vite dev server at `localhost:3000`, then opens a WebUI window. Requires `apps/server` to be running separately.
- **WebUI**: Uses `@webui-dev/bun-webui` (FFI-based C library binding). Auto-detects and opens the best available browser in a private profile, or uses the system WebView.
- **Server-driven design**: The desktop app is a "thin" native shell. It does not contain UI or business logic; it opens a BrowserWindow pointing to the `apps/server` TanStack Start application.
- **Dev mode**: Opens a BrowserWindow pointing to `localhost:3000`. Requires `apps/server` to be running separately (Turbo handles this).
- **Production mode**: Spawns a compiled server binary (from `resources/`) as a sidecar process, waits for readiness, then loads its URL.
## Commands
```bash
bun dev # Open WebUI window (requires server dev running)
bun dev # electron-vite dev (requires server dev running)
bun build # electron-vite build (main + preload)
bun build:win # Build + package for Windows
bun build:mac # Build + package for macOS
bun build:linux # Build + package for Linux
bun fix # Biome auto-fix
bun typecheck # TypeScript check
```
@@ -31,27 +36,40 @@ bun typecheck # TypeScript check
```
.
├── src/
── bun/
└── index.ts # Main process entry (server readiness check + WebUI window)
├── package.json # Scripts and dependencies
├── turbo.json # Dev pipeline (depends on server dev)
── AGENTS.md # Desktop guidelines (this file)
── main/
└── index.ts # Main process (server lifecycle + BrowserWindow)
│ └── preload/
│ └── index.ts # Preload script (security isolation)
── resources/ # Sidecar binaries (gitignored, copied from server build)
├── out/ # electron-vite build output (gitignored)
├── electron.vite.config.ts
├── electron-builder.yml # Packaging configuration
├── package.json
├── turbo.json
└── AGENTS.md
```
## Development Workflow
1. **Start server**: In `apps/server`, run `bun dev`.
2. **Start desktop**: In `apps/desktop`, run `bun dev`.
3. **Connection**: The desktop app polls `localhost:3000` until responsive, then opens the browser window.
1. **Start server**: `bun dev` in `apps/server` (or use root `bun dev` via Turbo).
2. **Start desktop**: `bun dev` in `apps/desktop`.
3. **Connection**: Main process polls `localhost:3000` until responsive, then opens BrowserWindow.
## Production Build Workflow
1. **Build server**: `bun build` in `apps/server``.output/`
2. **Compile server**: `bun compile` in `apps/server``out/server-{platform}`
3. **Copy binary**: Copy the platform-appropriate binary to `apps/desktop/resources/server`
4. **Package desktop**: `bun build:linux` (or `:mac` / `:win`) in `apps/desktop`
## Critical Rules
**DO:**
- Use arrow functions for all utility functions.
- Ensure `apps/server` dev server is running before starting desktop.
- Keep the desktop app as a thin shell — no UI or business logic.
- Use `catalog:` for all dependency versions in `package.json`.
**DON'T:**
- Use `npm`, `npx`, `node`, `yarn`, or `pnpm`. Always use `bun`.
- Include UI components or business logic in the desktop app (keep it thin).
- Use `npm`, `npx`, `yarn`, or `pnpm`. Use `bun` for package management.
- Include UI components or business logic in the desktop app.
- Use `as any` or `@ts-ignore`.