Electron(续4)利用AI辅助完成配置功能

2026.4.19 星期日

要完成的功能

整体应用的配置
大模型参数配置

通用特性的开发方式

配置文件放在哪里？怎样保存和更新？怎样和我们的应用相结合？
表单怎样处理？验证怎样做？动态表单渲染怎样完成？

使用 AI 辅助开发

Cursor https://www.cursor.com/
Windsurf https://codeium.com/windsurf
Github Copilot https://github.com/features/copilot

一.利用AI完成剩余内容

提示词

请给我在 Setting 中生成对应的界面，和目前的config 结合起来，现在仅需要两个 Input，一个切换对应的语言，使用 radix-vue 当中的 Select，一个用来设置字体的大小，使用 radix-vue 当中的 number-field
使用的 radix vue 中的 NumberFieldDecrement, NumberFieldIncrement 两个组件，完成点击以后增加减少大小，请放置在 Input 左右两侧
现在 vue 应用的国际化最好的解决方案是什么？ Vue I18n
我现在要给应用添加国际化，我会使用 vue-i18n，请写出对应的解决方案，特别注意我已经添加了对应的应用配置，其中有国际化的配置，请在 Settings.vue 更新对应字段的时候进行实时的更新。
在 Settings 中调整，实现如图中这样的一个 Tab，点击以后获取所有模型，并且实现类似的手风琴效果，表单内容还不需要实现，只需要先填充几个固定的表单即可。

渲染动态表单

第二步：在 Settings 中界面进行展示，应该添加到第二个 Tab 的内容中，注意 provider 和我们 providerConfigs 中的对应关系
第三步：实现数据的持久化，你可以在表单中添加保存按钮，也可以在 blur 的时候自动保存，注意设计持久化位置，可选方案有文件 / 数据库，请进行对比，如果选用文件，请特别注意在 main 中已经写好的 config 读取保存，你可以对它进行简单扩展

使用AI创建应用菜单

菜单功能

参考文档：https://www.electronjs.org/docs/latest/api/menu

在 Electron 中，菜单分为两种类型：

应用程序菜单（Application Menu）

展示位置：位于窗口顶部（macOS 系统）或窗口内顶部（Windows/Linux 系统）
核心功能：提供全局功能和操作

上下文菜单（Context Menu）

触发方式：右键点击时显示
核心功能：提供与当前操作场景相关的针对性操作

每个菜单项可设置的属性

label: 显示的文本
accelerator: 快捷键
role: 预定义角色（参考文档：https://www.electronjs.org/docs/latest/api/menu-item#roles）
click: 点击处理函数
submenu: 子菜单
type: 菜单项类型（参考文档：https://www.electronjs.org/docs/latest/api/menu-item#menuitemtype）

点击右键可以删除某一项

思路：

在渲染进程的 DOM 上绑定 @contextmenu 事件，并将事件发射到主进程。
主进程创建上下文菜单（contextMenu）并执行 popup 操作。
点击菜单某一项时，将事件发射到渲染进程。
渲染进程接收事件后，完成最终的数据库操作。

我现在想在 ConversationList 上面显示右键菜单，菜单现在只添加一项 "删除对话"，先不需要完成删除功能，只要点击右键显示该菜单即可。使用的是electron 的右键菜单，而不是原生DOM模拟菜单。
现在完成删除对话以后的逻辑，就是使用conversation store中的方法

二.应用打包

将我们现在写的源代码打包成一个安装包。由于electron是跨平台，所以根据不同平台打包成不同的安装文件。

makers https://www.electronforge.io/config/makers

在forge.config.ts中

import { MakerSquirrel } from '@electron-forge/maker-squirrel'; //windows

import { MakerZIP } from '@electron-forge/maker-zip'; // 通用的

import { MakerDeb } from '@electron-forge/maker-deb'; // linux

import { MakerRpm } from '@electron-forge/maker-rpm'; // linux

import { MakerDMG } from '@electron-forge/maker-dmg' //苹果

注意跨平台限制

Windows 电脑一般只能打包 Windows 版本
macOS 可以打包 macOS 和 Linux 版本
Linux 可以打包 Linux 版本

在package.json中出现package和make

#package命令

npm run package 生成可执行程序，但还不是安装包，直接双击就可以使用

#make命令

npm run make 生成完整的安装包，需要安装完毕以后使用

1.可执行程序：npm run package

只是一个文件夹，不与系统发生关系
适合：测试版本；便携版；不需要安装的场景

生成可执行文件:

使用 packagerConfig 的配置
不关心 makers 的配置

https://www.electronforge.io/cli#package

这个命令会将你的应用打包成特定平台的可执行程序包，并将结果放在一个文件夹中。请注意，这并不会创建一个可分发的格式。(并不会创建安装包)

https://github.com/electron/forge/issues/3640mac如果有错误https://github.com/electron/forge/issues/3640

之后输入cd out 在输入ls,可查看有一个文件

命名规则[应用名]-[平台]-[架构]/

平台标识:

win32 = Windows (不是 32 位的意思)
darwin = macOS
linux = Linux

架构标识:

x64 = 64 位
arm64 = ARM 架构

点击VChat即可启动应用

问题一

打开后会有一个错误。但是这个错误在开发模式没有。

原因是Electron 打包后环境差异 导致的 Dexie.js (IndexedDB) 无法写入 / 打开。

只需关闭自动打开数据库连接，用的时候手动打开就行

这样就没有报错了

问题二

输入问题后，大模型不返回输出结果了

原因：打包后，大模型请求走的是 file:// 协议，Chromium 自动拦截了你的流式输出！ 开发是 http://localhost，所以没问题！

在main.ts加上如下。重新打包。

还是没解决。。。

app.asar

ASAR (Atom Shell Archive) 是 Electron 专门设计的一种归档格式。

https://www.electronjs.org/docs/latest/tutorial/asar-archives

把所有文件放进一个特殊的"文件箱"(ASAR)
这个"文件箱"有个详细的目录(索引)
程序可以通过这个目录快速找到需要的文件

可解压查看

https://github.com/electron/asar

安装

npm install -g @electron/asar

2. 解压 asar 文件

asar extract app.asar 目标文件夹（我写的是unpacked）

3. 查看 asar 内容（不解压）

asar list app.asar

4. 解压单个文件

asar extract-file app.asar package.json

在解压的unpacked文件里面，会出现如下形式

2.安装包：npm run make

13-4 可以继续观看

添加到程序列表；创建快捷方式；注册文件关联；添加卸载信息
适合：正式发布；面向普通用户；需要系统集成的场景

图标的对应关系

快速制作图标的网站

https://ray.so/icon

转换文件格式的网站

将图标的png转换成icns(mac) 或者 ico (windows)

https://cloudconvert.com/png-to-icns https://cloudconvert.com/png-to-icns

转换之后放到my-app中assets里，就可以设置软件的图标。

关于代码签名

代码签名就是给软件、驱动、脚本等程序文件，加上一个数字签名，防止软件被植入病毒、木马，让用户放心下载，提升软件信任度。

原理：

开发者用私钥给软件哈希值加密 → 生成签名
用户 / 系统用公钥解密验证
对比文件哈希：一致 = 没被改；不一致 = 已被篡改

javascript 复制代码

// Windows 代码签名配置
win32sign: {
  certificateFile: './cert.pfx',
  certificatePassword: process.env.WINDOWS_CERT_PASSWORD,
  // 时间戳服务器
  timeStampServer: 'http://timestamp.digicert.com',
  // 签名算法
  signWithParams: '/fd sha256 /tr http://timestamp.digicert.com /td sha256'
}

代码签名需要购买

javascript 复制代码

Windows 签名:
├── 减少安全警告
├── 显示发布者信息
└── SmartScreen 信任度

macOS 签名:
├── 必需的安全要求
├── 绕过 Gatekeeper
└── App Store 分发前提

Apple Developer Program:
├── 个人开发者: $99/年
└── 企业开发者: $299/年

包含功能:
├── 代码签名证书
├── 应用公证服务
├── App Store 发布权限
└── 开发者支持

在生产环境就不需要打开开发者工具了