🔨 chore: add desktop pre-code to validate build process (lobehub#7261)

arvinxx · web-flow · commit b40caee32c22 · 2025-04-02T09:31:08.000+08:00
* add code

* fix lint

* fix tests
diff --git a/next.config.ts b/next.config.ts
@@ -6,14 +6,22 @@ import ReactComponentName from 'react-scan/react-component-name/webpack';
 
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
+const isDesktop = process.env.NEXT_PUBLIC_IS_DESKTOP_APP === '1';
 const enableReactScan = !!process.env.REACT_SCAN_MONITOR_API_KEY;
 const isUsePglite = process.env.NEXT_PUBLIC_CLIENT_DB === 'pglite';
 
 // if you need to proxy the api endpoint to remote server
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
+const isStandaloneMode = buildWithDocker || isDesktop;
+
+const standaloneConfig: NextConfig = {
+  output: 'standalone',
+  outputFileTracingIncludes: { '*': ['public/**/*', '.next/static/**/*'] },
+};
 
 const nextConfig: NextConfig = {
+  ...(isStandaloneMode ? standaloneConfig : {}),
   basePath,
   compress: isProd,
   experimental: {
@@ -110,10 +118,6 @@ const nextConfig: NextConfig = {
       hmrRefreshes: true,
     },
   },
-  output: buildWithDocker ? 'standalone' : undefined,
-  outputFileTracingIncludes: buildWithDocker
-    ? { '*': ['public/**/*', '.next/static/**/*'] }
-    : undefined,
   reactStrictMode: true,
   redirects: async () => [
     {
@@ -231,13 +235,14 @@ const noWrapper = (config: NextConfig) => config;
 
 const withBundleAnalyzer = process.env.ANALYZE === 'true' ? analyzer() : noWrapper;
 
-const withPWA = isProd
-  ? withSerwistInit({
-      register: false,
-      swDest: 'public/sw.js',
-      swSrc: 'src/app/sw.ts',
-    })
-  : noWrapper;
+const withPWA =
+  isProd && !isDesktop
+    ? withSerwistInit({
+        register: false,
+        swDest: 'public/sw.js',
+        swSrc: 'src/app/sw.ts',
+      })
+    : noWrapper;
 
 const hasSentry = !!process.env.NEXT_PUBLIC_SENTRY_DSN;
 const withSentry =
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "build-sitemap": "tsx ./scripts/buildSitemapIndex/index.ts",
     "build:analyze": "ANALYZE=true next build",
     "build:docker": "DOCKER=true next build && npm run build-sitemap",
+    "build:electron": "NODE_OPTIONS=--max-old-space-size=6144 NEXT_PUBLIC_IS_DESKTOP_APP=1 next build ",
     "db:generate": "drizzle-kit generate && npm run db:generate-client && npm run workflow:dbml",
     "db:generate-client": "tsx ./scripts/migrateClientDB/compile-migrations.ts",
     "db:migrate": "MIGRATION_DB=1 tsx ./scripts/migrateServerDB/index.ts",
@@ -129,6 +130,8 @@
     "@icons-pack/react-simple-icons": "9.6.0",
     "@khmyznikov/pwa-install": "0.3.9",
     "@langchain/community": "^0.3.37",
+    "@lobechat/electron-client-ipc": "workspace:*",
+    "@lobechat/electron-server-ipc": "workspace:*",
     "@lobechat/web-crawler": "workspace:*",
     "@lobehub/charts": "^1.12.0",
     "@lobehub/chat-plugin-sdk": "^1.32.4",
diff --git a/packages/electron-client-ipc/README.md b/packages/electron-client-ipc/README.md
@@ -0,0 +1,48 @@
+# @lobechat/electron-client-ipc
+
+这个包是 LobeChat 在 Electron 环境中用于处理 IPC（进程间通信）的客户端工具包。
+
+## 介绍
+
+在 Electron 应用中，IPC（进程间通信）是连接主进程（Main Process）、渲染进程（Renderer Process）以及 NextJS 进程的桥梁。为了更好地组织和管理这些通信，我们将 IPC 相关的代码分成了两个包：
+
+- `@lobechat/electron-client-ipc`：**客户端 IPC 包**
+- `@lobechat/electron-server-ipc`：**服务端 IPC 包**
+
+## 主要区别
+
+### electron-client-ipc（本包）
+
+- 运行环境：在渲染进程（Renderer Process）中运行
+- 主要职责：
+  - 提供渲染进程调用主进程方法的接口定义
+  - 封装 `ipcRenderer.invoke` 相关方法
+  - 处理与主进程的通信请求
+
+### electron-server-ipc
+
+- 运行环境：在 Electron 主进程和 Next.js 服务端进程中运行
+- 主要职责：
+  - 提供基于 Socket 的 IPC 通信机制
+  - 实现服务端（ElectronIPCServer）和客户端（ElectronIpcClient）通信组件
+  - 处理跨进程的请求和响应
+  - 提供自动重连和错误处理机制
+  - 确保类型安全的 API 调用
+
+## 使用场景
+
+当渲染进程需要：
+
+- 访问系统 API
+- 进行文件操作
+- 调用主进程特定功能
+
+时，都需要通过 `electron-client-ipc` 包提供的方法来发起请求。
+
+## 技术说明
+
+这种分包设计遵循了关注点分离原则，使得：
+
+- IPC 通信接口清晰可维护
+- 客户端和服务端代码解耦
+- TypeScript 类型定义共享，确保类型安全
diff --git a/packages/electron-client-ipc/package.json b/packages/electron-client-ipc/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@lobechat/electron-client-ipc",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts"
+}
diff --git a/packages/electron-client-ipc/src/events/devtools.ts b/packages/electron-client-ipc/src/events/devtools.ts
@@ -0,0 +1,6 @@
+export interface DevtoolsDispatchEvents {
+  /**
+   * open the LobeHub Devtools
+   */
+  openDevtools: () => void;
+}
diff --git a/packages/electron-client-ipc/src/events/index.ts b/packages/electron-client-ipc/src/events/index.ts
@@ -0,0 +1,13 @@
+import { DevtoolsDispatchEvents } from './devtools';
+
+/**
+ * renderer -> main dispatch events
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ClientDispatchEvents extends DevtoolsDispatchEvents {}
+
+export type ClientDispatchEventKey = keyof ClientDispatchEvents;
+
+export type ClientEventReturnType<T extends ClientDispatchEventKey> = ReturnType<
+  ClientDispatchEvents[T]
+>;
diff --git a/packages/electron-client-ipc/src/index.ts b/packages/electron-client-ipc/src/index.ts
@@ -0,0 +1,2 @@
+export * from './events';
+export * from './types';
diff --git a/packages/electron-client-ipc/src/types/dispatch.ts b/packages/electron-client-ipc/src/types/dispatch.ts
@@ -0,0 +1,10 @@
+import type {
+  ClientDispatchEventKey,
+  ClientDispatchEvents,
+  ClientEventReturnType,
+} from '../events';
+
+export type DispatchInvoke = <T extends ClientDispatchEventKey>(
+  event: T,
+  ...data: Parameters<ClientDispatchEvents[T]>
+) => Promise<ClientEventReturnType<T>>;
diff --git a/packages/electron-client-ipc/src/types/index.ts b/packages/electron-client-ipc/src/types/index.ts
@@ -0,0 +1 @@
+export * from './dispatch';
diff --git a/packages/electron-server-ipc/README.md b/packages/electron-server-ipc/README.md
@@ -4,7 +4,7 @@ LobeHub 的 Electron 应用与服务端之间的 IPC（进程间通信）模块
 
 ## 📝 简介
 
-`@lobechat/electron-server-ipc` 是 LobeHub 桌面应用的核心组件，负责处理 Electron 进程与 nextjs 服务端之间的通信。它提供了一套简单而健壮的 API，用于在不同进程间传递数据和执行远程方法调用。
+`@lobechat/electron-server-ipc` 是 LobeHub 桌面应用的核心组件，负责处理 Electron 主进程与 nextjs 服务端之间的通信。它提供了一套简单而健壮的 API，用于在不同进程间传递数据和执行远程方法调用。
 
 ## 🛠️ 核心功能
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
   - 'packages/**'
   - '.'
+  - '!apps/**'
diff --git a/src/app/desktop/devtools/page.tsx b/src/app/desktop/devtools/page.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { ActionIcon, FluentEmoji, SideNav } from '@lobehub/ui';
+import { Cog, DatabaseIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { BRANDING_NAME } from '@/const/branding';
+import PostgresViewer from '@/features/DevPanel/PostgresViewer';
+import SystemInspector from '@/features/DevPanel/SystemInspector';
+import { useStyles } from '@/features/DevPanel/features/FloatPanel';
+import { electronStylish } from '@/styles/electron';
+
+const DevTools = memo(() => {
+  const { styles, theme, cx } = useStyles();
+
+  const items = [
+    {
+      children: <PostgresViewer />,
+      icon: <DatabaseIcon size={16} />,
+      key: 'Postgres Viewer',
+    },
+    {
+      children: <SystemInspector />,
+      icon: <Cog size={16} />,
+      key: 'System Status',
+    },
+  ];
+
+  const [tab, setTab] = useState<string>(items[0].key);
+
+  return (
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{ overflow: 'hidden', position: 'relative' }}
+      width={'100%'}
+    >
+      <SideNav
+        avatar={<FluentEmoji emoji={'🧰'} size={24} />}
+        bottomActions={[]}
+        style={{
+          paddingBlock: 32,
+          width: 48,
+        }}
+        topActions={items.map((item) => (
+          <ActionIcon
+            active={tab === item.key}
+            key={item.key}
+            onClick={() => setTab(item.key)}
+            placement={'right'}
+            title={item.key}
+          >
+            {item.icon}
+          </ActionIcon>
+        ))}
+      />
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        <Flexbox
+          align={'center'}
+          className={cx(`panel-drag-handle`, styles.header, electronStylish.draggable)}
+          horizontal
+          justify={'center'}
+        >
+          <Flexbox align={'baseline'} gap={6} horizontal>
+            <b>{BRANDING_NAME} Dev Tools</b>
+            <span style={{ color: theme.colorTextDescription }}>/</span>
+            <span style={{ color: theme.colorTextDescription }}>{tab}</span>
+          </Flexbox>
+        </Flexbox>
+        {items.map((item) => (
+          <Flexbox
+            flex={1}
+            height={'100%'}
+            key={item.key}
+            style={{
+              display: tab === item.key ? 'flex' : 'none',
+              overflow: 'hidden',
+            }}
+          >
+            {item.children}
+          </Flexbox>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default DevTools;
diff --git a/src/app/desktop/layout.tsx b/src/app/desktop/layout.tsx
@@ -0,0 +1,31 @@
+import { notFound } from 'next/navigation';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
+import { ReactNode } from 'react';
+
+import { isDesktop } from '@/const/version';
+import GlobalLayout from '@/layout/GlobalProvider';
+import { ServerConfigStoreProvider } from '@/store/serverConfig/Provider';
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+const RootLayout = async ({ children }: RootLayoutProps) => {
+  if (!isDesktop) return notFound();
+
+  return (
+    <html dir="ltr" suppressHydrationWarning>
+      <body>
+        <NuqsAdapter>
+          <ServerConfigStoreProvider>
+            <GlobalLayout appearance={'auto'} isMobile={false} locale={''}>
+              {children}
+            </GlobalLayout>
+          </ServerConfigStoreProvider>
+        </NuqsAdapter>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  );
+};
+
+export default Layout;
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1 @@
+export { default } from '@/components/404';
diff --git a/src/const/desktop.ts b/src/const/desktop.ts
@@ -0,0 +1 @@
+export const DESKTOP_USER_ID = 'DEFAULT_DESKTOP_USER';
diff --git a/src/const/version.ts b/src/const/version.ts
@@ -7,6 +7,8 @@ export const CURRENT_VERSION = pkg.version;
 export const isServerMode = process.env.NEXT_PUBLIC_SERVICE_MODE === 'server';
 export const isUsePgliteDB = process.env.NEXT_PUBLIC_CLIENT_DB === 'pglite';
 
+export const isDesktop = process.env.NEXT_PUBLIC_IS_DESKTOP_APP === '1';
+
 export const isDeprecatedEdition = !isServerMode && !isUsePgliteDB;
 
 // @ts-ignore
diff --git a/src/database/client/db.ts b/src/database/client/db.ts
@@ -167,17 +167,10 @@ export class DatabaseManager {
       // if hash is the same, no need to migrate
       if (hash === cacheHash) {
         try {
+          const drizzleMigration = new DrizzleMigrationModel(this.db as any);
+
           // 检查数据库中是否存在表
-          // 这里使用 pg_tables 系统表查询用户表数量
-          const tablesResult = await this.db.execute(
-            sql`
-              SELECT COUNT(*) as table_count
-              FROM information_schema.tables
-              WHERE table_schema = 'public'
-            `,
-          );
-
-          const tableCount = parseInt((tablesResult.rows[0] as any).table_count || '0', 10);
+          const tableCount = await drizzleMigration.getTableCounts();
 
           // 如果表数量大于0，则认为数据库已正确初始化
           if (tableCount > 0) {
diff --git a/src/database/models/drizzleMigration.ts b/src/database/models/drizzleMigration.ts
@@ -1,3 +1,5 @@
+import { sql } from 'drizzle-orm';
+
 import { LobeChatDatabase } from '@/database/type';
 import { MigrationTableItem } from '@/types/clientDB';
 
@@ -8,6 +10,19 @@ export class DrizzleMigrationModel {
     this.db = db;
   }
 
+  getTableCounts = async () => {
+    // 这里使用 pg_tables 系统表查询用户表数量
+    const result = await this.db.execute(
+      sql`
+        SELECT COUNT(*) as table_count
+        FROM information_schema.tables
+        WHERE table_schema = 'public'
+      `,
+    );
+
+    return parseInt((result.rows[0] as any).table_count || '0');
+  };
+
   getMigrationList = async () => {
     const res = await this.db.execute(
       'SELECT * FROM "drizzle"."__drizzle_migrations" ORDER BY "created_at" DESC;',
diff --git a/src/database/models/user.ts b/src/database/models/user.ts
@@ -177,6 +177,9 @@ export class UserModel {
   };
 
   // Static method
+  static makeSureUserExist = async (db: LobeChatDatabase, userId: string) => {
+    await db.insert(users).values({ id: userId }).onConflictDoNothing();
+  };
 
   static createUser = async (db: LobeChatDatabase, params: NewUser) => {
     // if user already exists, skip creation
diff --git a/src/features/DevPanel/features/FloatPanel.tsx b/src/features/DevPanel/features/FloatPanel.tsx
diff --git a/src/features/User/UserPanel/index.tsx b/src/features/User/UserPanel/index.tsx
diff --git a/src/libs/trpc/middleware/userAuth.ts b/src/libs/trpc/middleware/userAuth.ts
diff --git a/src/server/routers/tools/__tests__/search.test.ts b/src/server/routers/tools/__tests__/search.test.ts
diff --git a/src/services/electron/devtools.ts b/src/services/electron/devtools.ts
diff --git a/src/styles/electron.ts b/src/styles/electron.ts
diff --git a/src/types/electron.ts b/src/types/electron.ts
diff --git a/src/utils/electron/dispatch.ts b/src/utils/electron/dispatch.ts
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './events';`
	`2`	`+export * from './types';`