AionUi

志士惜年，贤人惜日，圣人惜时。——魏源

AionUi：一款真正“本地优先”的多代理 Cowork 桌面应用

AionUi 是一款免费的本地开源桌面应用，用来给你的编码代理和指令工具提供一个轻量但专业的工作空间。它的定位非常明确：Cowork for Gemini CLI、Claude Code、Codex、Opencode、Qwen Code、Goose CLI、Auggie 等等。简单理解，就是把这些分散的代理能力“装进一个统一的生产环境”，在日常工程节奏里更稳定地协作与交付。

• 项目主页：aionui.com
• 源码仓库：iOfficeAI/AionUi
• 技术栈：TypeScript、Electron、React、i18next、better‑sqlite3 等

AionUi 不是“又一个 WebUI”，它强调的是“本地优先”和“工程化”：自带跨平台打包流程、主进程级别的持久化数据库、成熟的国际化与主题系统，以及围绕 UI/UX 设计的辅助知识库。下面从几个关键模块拆开聊聊它的味道与做工。

---

跨平台构建：Electron Forge + electron‑builder 的双擎协作

构建系统是这个桌面应用的工业根基。AionUi 的构建脚本实现了对 macOS、Windows、Linux 的统一打包，并把原本分散的本机模块重建逻辑整合到了一个“统一重建工具”里。

• 架构流程（节选自 scripts/README.md）：

  npm run dist:*
      ↓
  build-with-builder.js
      ↓
      ├─→ Electron Forge (webpack compilation)
      ↓
  electron-builder
      ↓
      ├─→ beforeBuild.js → rebuildNativeModules.js (all platforms)
      ├─→ Package app
      ├─→ afterPack.js → rebuildNativeModules.js (Linux only)
      └─→ afterSign.js (macOS only)

• 一键构建不同平台：

  # Build for macOS
  npm run dist:mac
  
  # Build for Windows
  npm run dist:win
  
  # Build for Linux
  npm run dist:linux

• 统一的本机模块重建工具（JavaScript 直接调用）：

  const { rebuildWithElectronRebuild } = require('./scripts/rebuildNativeModules');
  
  rebuildWithElectronRebuild({
    platform: 'linux',
    arch: 'arm64',
    electronVersion: '37.3.1',
  });

• 在打包后的应用内重建单个模块（Linux 典型场景）：

  const { rebuildSingleModule } = require('./scripts/rebuildNativeModules');
  
  rebuildSingleModule({
    moduleName: 'better-sqlite3',
    moduleRoot: '/path/to/app.asar.unpacked/node_modules/better-sqlite3',
    platform: 'linux',
    arch: 'arm64',
    electronVersion: '37.3.1',
  });

这些脚本还内置了故障排查建议，比如 better-sqlite3 找不到模块时，检查 electron-builder.yml 的 files 和 asarUnpack 配置、确认 beforeBuild.js 和 afterPack.js 是否执行成功。

---

本地数据库系统：主进程 better‑sqlite3，上手即用

AionUi 的数据层使用 better-sqlite3 在 Electron 主进程里做持久化。因为是同步 API，避免���多线程争用，同时启用了 WAL 模式提升并发性能，配合索引和事务带来可观的稳定性。

• 架构概览（节选自 src/process/database/README.md）：

  主进程（better-sqlite3）
    ↕ IPC
  渲染进程（IPC Bridge 查询主进程数据库）
    ↕ 文件系统（图片、附件、aionui.db）

• 在主进程里创建会话与插入消息：

  import { getDatabase } from '@/process/database/export';
  
  // 获取数据库实例
  const db = getDatabase();
  
  // 创建会话
  const conversation: TChatConversation = {
    id: 'conv_123',
    name: 'My Conversation',
    type: 'gemini',
    extra: { workspace: '/path/to/workspace' },
    model: { /* provider info */ },
    createTime: Date.now(),
    modifyTime: Date.now(),
  };
  
  const result = db.createConversation(conversation);
  if (result.success) {
    console.log('Conversation created');
  }
  
  // 插入消息
  const message: TMessage = {
    id: 'msg_123',
    conversation_id: 'conv_123',
    type: 'text',
    content: { content: 'Hello world' },
    position: 'right',
    createdAt: Date.now(),
  };
  
  db.insertMessage(message);
  
  // 查询会话的消息（分页）
  const messages = db.getConversationMessages('conv_123', 0, 50);
  console.log(messages.data); // TMessage[]

• 渲染进程通过 IPC 查询消息与维护 UI 状态：

  import { ipcBridge } from '@/common';
  
  // 通过IPC查询消息
  const messages = await ipcBridge.database.getConversationMessages({
    conversation_id: 'conv_123',
    page: 0,
    pageSize: 100,
  });
  
  // 草稿使用React状态管理
  const [draft, setDraft] = useState('');
  
  // UI状态使用localStorage
  localStorage.setItem('sidebar_collapsed', 'true');
  const collapsed = localStorage.getItem('sidebar_collapsed') === 'true';

• 迁移与版本控制也考虑周到：支持自动迁移、迁移历史、事务保护、幂等运行与回滚测试，数据库 schema 当前版本 v4，并提供升级路径与示例迁移脚本。

---

国际化与主题系统：全局体验的“细节功夫”

优秀的桌面应用离不开成熟的 i18n 与主题系统。AionUi 在这块做得很踏实。

i18n：i18next + react‑i18next

• 支持中��和英文

• 组件中用 useTranslation() 获取 t 方法即可翻译：

  import { useTranslation } from 'react-i18next';
  
  const MyComponent = () => {
    const { t } = useTranslation();
  
    return (
      <div>
        <h1>{t('common.title')}</h1>
        <p>{t('common.description')}</p>
      </div>
    );
  };

• 语言切换：

  import { useTranslation } from 'react-i18next';
  
  const LanguageSwitcher = () => {
    const { i18n } = useTranslation();
  
    const changeLanguage = (lng: string) => {
      i18n.changeLanguage(lng);
    };
  
    return (
      <div>
        <button onClick={() => changeLanguage('zh-CN')}>中文</button>
        <button onClick={() => changeLanguage('en-US')}>English</button>
      </div>
    );
  };

主题系统：明暗模式与配色方案解耦

• 明暗模式通过 useTheme 控制，影响 <html> 的 data-theme 和 <body> 的 arco-theme

• 配色方案通过 useColorScheme 控制，影响 <html> 的 data-color-scheme

• 文件结构：

  styles/themes/
  ├── index.css
  ├── base.css
  └── color-schemes/
      └── default.css

• 约定了品牌色、背景色等 CSS 变量的命名规范。未来扩展新的色板，只需新建 CSS 文件、定义变量并在入口导入，同时更新类型和 UI 选项。

---

UI/UX Pro Max 助手：把设计“知识库”带到桌面

仓库内置了一个 UI/UX 助手的数据集与检索脚本，覆盖 UI 风格、配色、字体配对、图表类型、落地页模式、UX 最佳实践、技术栈贴士等。它可以自动被助手使用，也支持手动查询。

• 手动查询示例：

  # 产品推荐
  python3 ui-ux-pro-max/scripts/search.py "saas" --domain product
  
  # UI 风格
  python3 ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
  
  # 配色
  python3 ui-ux-pro-max/scripts/search.py "healthcare" --domain color
  
  # 字体配对
  python3 ui-ux-pro-max/scripts/search.py "elegant modern" --domain typography
  
  # UX 指南
  python3 ui-ux-pro-max/scripts/search.py "animation" --domain ux
  
  # 技栈特定建议
  python3 ui-ux-pro-max/scripts/search.py "responsive" --stack html-tailwind

这部分数据源自开源项目 ui-ux-pro-max-skill，以 CSV 组织，利于扩展与检索。

---

AionUi 在真实工作中的价值

• Cowork 场景汇聚
  把 Gemini CLI、Claude Code、Codex、Opencode、Qwen Code、Goose CLI、Auggie 等代理和工具接入一个统一工作空间，减少切换成本。

• 本地优先与数据主权
  主进程持久化与文件系统配合，既稳又快，适合对隐私和稳定性有要求的团队或个人。

• 工程化的构建与交付
  统一脚本、双阶段重建、跨平台打包、代码签名与公证，走在桌面应用的正路上。

• 体验层的细节
  国际化、主题系统、UI/UX 设计知识库与辅助脚本，让“可用性”与“专业性”形成闭环。

---

小结与上手建议

如果你已经在用多种编码代理，AionUi 会帮你把这些零散能力“收拢进一个工作台”，同时保留工程化的底层结构与体验细节。建议先从本地构建入手，把数据库与 IPC 熟悉起来，再逐步接入代理工具，最后根据团队习惯扩展主题和国际化。

• 构建一把梭：npm run dist:mac | dist:win | dist:linux
• 数据层先用示例类型跑通 CRUD，再接入真实会话与消息
• 语言和主题按需扩展，面向团队的通用 UI 体验做配套
• UI/UX 助手的数据集与检索脚本可直接复用到设计工作流

本文参考了仓库中的文档与示例片段，结果可能不完整。更多信息与更新请直接查看仓库页面：iOfficeAI/AionUi