Desktop Development Guide

Architecture Overview

LobeHub 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

Adding New Desktop Features

1. Create Controller

Location:

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

}

;

}

}

Register in

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

.

2. Define IPC Types

Location:

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

export

interface

SomeParams

{

/ ... /

}

export

interface

SomeResult

{

success

:

boolean

;

error

?

:

string

;

}

3. Create Renderer Service

Location:

src/services/electron/

import

{

ensureElectronIpc

}

from

'@/utils/electron/ipc'

;

const

ipc

=

ensureElectronIpc

(

)

;

export

const

newFeatureService

=

async

(

params

:

SomeParams

)

=>

{

return

ipc

.

newFeature

.

doSomething

(

params

)

;

}

;

4. Implement Store Action

Location:

src/store/

5. Add Tests

Location:

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

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