关于 desktop
面向使用 Electron 开发 LobeHub 桌面功能的贡献者,介绍主进程与渲染进程架构,以及功能实现和测试步骤。
主要功能
- 01说明 Electron 进程架构
- 02介绍控制器创建与注册
- 03涵盖 IPC 类型定义
- 04说明渲染器服务和 Store 操作
- 05提供专项桌面开发指南
适用场景
- 01规划新的桌面功能
- 02连接主进程功能与渲染器
- 03添加控制器测试
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ lobehub/ lobehub --skill desktop安装后在 Claude Code 中输入/desktop确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/feature-implementation.mdlocal-tools.mdmenu-config.mdwindow-management.md详细介绍
桌面开发指南
架构概览
LobeHub 桌面版基于 Electron 构建,采用主进程-渲染进程架构:
- 主进程(
apps/desktop/src/main):应用生命周期、系统 API、窗口管理 - 渲染进程:复用来自
src/的 Web 代码 - 预加载脚本(
apps/desktop/src/preload):安全地向渲染进程公开主进程功能
添加新的桌面功能
1. 创建控制器
位置:apps/desktop/src/main/controllers/
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. 定义 IPC 类型
位置:packages/electron-client-ipc/src/types/<domain>.ts,并从 types/index.ts 重新导出
export interface SomeParams {
/* ... */
}
export interface SomeResult {
success: boolean;
error?: string;
}
3. 创建渲染进程服务
位置:src/services/electron/
import { ensureElectronIpc } from '@/utils/electron/ipc';
const ipc = ensureElectronIpc();
export const newFeatureService = async (params: SomeParams) => {
return ipc.newFeature.doSomething(params);
};
4. 实现 Store 操作
位置:src/store/
5. 添加测试
位置:控制器旁边,即 apps/desktop/src/main/controllers/<Name>Ctr.test.ts(source-layout §2)
详细指南
特定主题请参阅 references/:
- 功能实现:
references/feature-implementation.md - 本地工具工作流:
references/local-tools.md - 菜单配置:
references/menu-config.md - 窗口管理:
references/window-management.md
评论
支持 Markdown