desktop

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Desktop Development Guide

桌面开发指南

Architecture Overview

架构概述

LobeChat desktop is built on Electron with main-renderer architecture:

Main Process (
```
apps/desktop/src/main
```
): App lifecycle, system APIs, window management
Renderer Process: Reuses web code from
```
src/
```
Preload Scripts (
```
apps/desktop/src/preload
```
): Securely expose main process to renderer

LobeChat桌面端基于Electron构建，采用主进程-渲染进程架构：

主进程（
```
apps/desktop/src/main
```
）：应用生命周期、系统API、窗口管理
渲染进程：复用
```
src/
```
目录下的Web端代码
预加载脚本（
```
apps/desktop/src/preload
```
）：安全地将主进程能力暴露给渲染进程

Adding New Desktop Features

新增桌面功能步骤

1. Create Controller

1. 创建控制器

Location:

apps/desktop/src/main/controllers/

typescript

import { ControllerModule, IpcMethod } from '@/controllers';

export default class NewFeatureCtr extends ControllerModule {
  static override readonly groupName = 'newFeature';

  @IpcMethod()
  async doSomething(params: SomeParams): Promise<SomeResult> {
    // Implementation
    return { success: true };
  }
}

apps/desktop/src/main/controllers/registry.ts

位置：

apps/desktop/src/main/controllers/

typescript

import { ControllerModule, IpcMethod } from '@/controllers';

export default class NewFeatureCtr extends ControllerModule {
  static override readonly groupName = 'newFeature';

  @IpcMethod()
  async doSomething(params: SomeParams): Promise<SomeResult> {
    // Implementation
    return { success: true };
  }
}

在

apps/desktop/src/main/controllers/registry.ts

中注册。

2. Define IPC Types

2. 定义IPC类型

Location:

packages/electron-client-ipc/src/types.ts

typescript

export interface SomeParams { /* ... */ }
export interface SomeResult { success: boolean; error?: string }

位置：

packages/electron-client-ipc/src/types.ts

typescript

export interface SomeParams { /* ... */ }
export interface SomeResult { success: boolean; error?: string }

3. Create Renderer Service

3. 创建渲染进程服务

Location:

src/services/electron/

typescript

import { ensureElectronIpc } from '@/utils/electron/ipc';

const ipc = ensureElectronIpc();

export const newFeatureService = async (params: SomeParams) => {
  return ipc.newFeature.doSomething(params);
};

位置：

src/services/electron/

typescript

import { ensureElectronIpc } from '@/utils/electron/ipc';

const ipc = ensureElectronIpc();

export const newFeatureService = async (params: SomeParams) => {
  return ipc.newFeature.doSomething(params);
};

4. Implement Store Action

4. 实现Store动作

Location:

src/store/

位置：

src/store/

5. Add Tests

5. 添加测试

Location:

apps/desktop/src/main/controllers/__tests__/

位置：

apps/desktop/src/main/controllers/__tests__/

Detailed Guides

详细指南

See

references/

for specific topics:

Feature implementation:
```
references/feature-implementation.md
```
Local tools workflow:
```
references/local-tools.md
```
Menu configuration:
```
references/menu-config.md
```
Window management:
```
references/window-management.md
```

如需了解特定主题，请查看

references/

功能实现：
```
references/feature-implementation.md
```
本地工具工作流：
```
references/local-tools.md
```
菜单配置：
```
references/menu-config.md
```
窗口管理：
```
references/window-management.md
```

Best Practices

最佳实践

Security: Validate inputs, limit exposed APIs
Performance: Use async methods, batch data transfers
UX: Add progress indicators, provide error feedback
Code organization: Follow existing patterns, add documentation

安全性：验证输入，限制暴露的API
性能：使用异步方法，批量传输数据
用户体验：添加进度指示器，提供错误反馈
代码组织：遵循现有代码规范，添加文档