BluReba Chat

tuuuuuun
5 阅读6分钟

BluReba Chat

基于 Electron + Vue 3 + TypeScript 构建的桌面端即时通讯应用。 bluereba_chat: IM即时通讯

项目简介

BluReba Chat 是一款功能完善的即时通讯桌面客户端，支持单聊、群聊、消息同步、截图、音视频通话等功能。采用现代化前端技术栈，提供流畅的跨平台用户体验。

技术栈

核心框架

  • Electron 41.1.0 - 跨平台桌面应用框架
  • Vue 3 3.5.30 - 渐进式 JavaScript 框架（Composition API）
  • TypeScript 6.0.2 - 类型安全的 JavaScript 超集
  • Vite 8.0.8 - 新一代前端构建工具
  • Pinia 3.0.4 - Vue 3 官方状态管理库

UI 与样式

  • Arco Design Vue 2.56.0 - 字节跳动企业级 UI 组件库
  • UnoCSS 66.6.7 - 即时按需原子化 CSS 引擎
  • Sass 1.98.0 - CSS 预处理器

数据与通信

  • Axios 1.15.0 - HTTP 请求客户端
  • STOMP over WebSocket (@stomp/rx-stomp + sockjs-client) - 实时消息推送
  • IndexedDB (idb / idb-keyval) - 本地消息持久化存储

功能增强

  • electron-screenshots 0.6.1 - 桌面端截图功能
  • electron-store 8.1.0 - 用户数据持久化存储
  • electron-updater 6.6.2 - 应用自动更新
  • vue-cropper 1.1.4 - 图片裁剪组件
  • fuse.js 7.3.0 - 高性能模糊搜索引擎
  • pinyin-pro 3.28.0 - 中文拼音转换（支持拼音搜索）
  • sortablejs 1.15.6 - 拖拽排序
  • virtua 0.49.0 - 虚拟滚动列表（高性能长列表）
  • snowflake-id 1.1.0 - 雪花 ID 生成器
  • nanoid 5.1.5 - 轻量级唯一 ID 生成
  • color 5.0.3 / @arco-design/color 0.4.0 - 颜色处理工具
  • dayjs 1.11.20 - 轻量级日期处理库
  • lodash-es 4.18.1 - 工具函数库

开发工具链

  • Electron Vite 5.0.0 - Electron 应用开发构建工具
  • Electron Builder 26.8.1 - 跨平台应用打包分发
  • oxlint 1.59.0 - 高性能 JS/TS 代码检查
  • oxfmt 0.44.0 - 代码格式化工具
  • unplugin-auto-import 21.0.0 - API 自动导入
  • unplugin-vue-components 32.0.0 - 组件自动注册
  • vite-plugin-pages 0.33.3 - 文件系统路由自动生成
  • vite-plugin-vue-layouts-next 2.1.0 - 布局系统插件
  • vue-tsc 3.2.6 - Vue TypeScript 类型检查

快速开始

环境要求

工具版本要求
Node.js>= 18.x
pnpm>= 8.x

安装依赖

pnpm install

开发模式

pnpm dev

启动后支持热重载，主进程日志输出至控制台，渲染进程可通过 DevTools 查看。

构建

# Windows (NSIS 安装包)
pnpm build:win

# macOS (DMG)
pnpm build:mac

# Linux (AppImage / Snap / Deb)
pnpm build:linux

其他命令

命令说明
pnpm lintoxlint 代码检查
pnpm formatoxfmt 代码格式化
pnpm typecheckTypeScript 类型检查（Node + Web）
pnpm build:icons生成应用图标资源
pnpm start预览已构建的应用

项目结构

electron-app/
├── resources/                        # 静态资源
│   ├── icon.png                      # 应用图标源文件
│   └── icons/                        # 各尺寸图标（ico/png）
├── scripts/                          # 构建脚本
│   ├── after-pack.js                 # 打包后置处理脚本
│   └── build.js                      # 打包入口脚本
├── src/
│   ├── main/                         # Electron 主进程
│   │   ├── index.ts                  # 主进程入口
│   │   ├── auth.ts                   # 认证模块
│   │   ├── useTray.ts                # 系统托盘管理
│   │   ├── context/                  # 窗口上下文管理
│   │   │   ├── BaseWindowManager.ts  # 基础窗口管理器
│   │   │   ├── ContextMainWindow.ts  # 主窗口上下文
│   │   │   ├── ContextWindowManager.ts # 窗口管理器
│   │   │   └── ContextWindowTimer.ts  # 窗口定时器
│   │   ├── ipc/                      # IPC 通信模块
│   │   │   ├── base/                 # 基础 IPC（App/Base）
│   │   │   └── main/                 # 业务 IPC（截图/STOMP/Store/更新器）
│   │   ├── store/                    # 主进程状态（AuthStore）
│   │   └── utils/                    # 主进程工具函数
│   ├── preload/                      # 预加载脚本（安全桥接层）
│   │   ├── index.ts                  # 预加载入口
│   │   ├── modules/                  # API 模块（App/Auth/Custom/Stomp/Store/Updater）
│   │   └── utils/                    # 工具函数
│   ├── renderer/                     # 渲染进程（Vue 3 应用）
│   │   └── src/
│   │       ├── main.ts               # 应用入口
│   │       ├── App.vue               # 根组件
│   │       ├── routes.ts             # 路由配置
│   │       ├── api/                  # API 接口层
│   │       │   ├── contact/          # 联系人相关 API
│   │       │   ├── message/          # 消息相关 API
│   │       │   └── type/             # 接口类型定义
│   │       ├── assets/               # 静态资源
│   │       │   ├── avatar/           # 默认头像 SVG
│   │       │   ├── banner/           # 页面插图 SVG
│   │       │   ├── icon/             # 图标
│   │       │   ├── json/             # JSON 数据（emoji/地区/状态等）
│   │       │   ├── mp3/              # 音频资源
│   │       │   └── online-status/    # 在线状态表情 SVG
│   │       ├── components/           # 公共组件
│   │       ├── composables/          # 组合式函数
│   │       ├── context/              # 上下文配置
│   │       ├── directive/            # 自定义指令
│   │       ├── layouts/              # 布局模板（default/center/single/sub-win）
│   │       ├── pages/                # 页面视图
│   │       │   ├── login/            # 登录页
│   │       │   ├── register/         # 注册页
│   │       │   ├── index/            # 首页（会话列表）
│   │       │   ├── session/          # 聊天会话页
│   │       │   ├── center/           # 个人中心
│   │       │   ├── detail/           # 联系人详情
│   │       │   ├── notice/           # 消息通知
│   │       │   ├── setting/          # 设置页
│   │       │   ├── updater/          # 更新页
│   │       │   ├── tray/             # 系统托盘窗口
│   │       │   ├── preview/          # 预览页（图片裁剪等）
│   │       │   └── historical-messages/ # 历史消息
│   │       ├── plugins/              # 插件注册
│   │       ├── store/                # Pinia 状态管理
│   │       ├── subscribe/            # STOMP WebSocket 订阅层
│   │       ├── types/                # TypeScript 类型定义
│   │       └── utils/                # 工具函数
│   └── electron.d.ts                 # Electron 全局类型声明
├── electron.vite.config.ts           # Electron Vite 主配置
├── electron.vite.main.config.ts      # Main 进程构建配置
├── electron.vite.preload.config.ts   # Preload 进程构建配置
├── electron.vite.render.config.ts    # Renderer 进程构建配置
├── electron-builder.ts               # Electron Builder 打包配置
├── uno.config.ts                     # UnoCSS 配置
├── tsconfig.json                     # TypeScript 基础配置
├── tsconfig.node.json                # Node 端 TS 配置
├── tsconfig.web.json                 # Web 端 TS 配置
└── package.json                      # 项目依赖清单

核心功能

消息系统

  • 单聊 / 群聊消息收发
  • 消息已读 / 未读状态追踪
  • 消息撤回与编辑
  • 富文本消息（支持内嵌图片）
  • 引用消息（回复特定消息）
  • 合并消息转发（逐条展示）
  • 群聊 @提及（高亮闪烁定位）
  • 语音消息录制与播放（波形可视化显示）
  • 历史消息搜索与本地同步（IndexedDB）

联系人与社交

  • 好友管理（添加 / 分组 / 删除 / 搜索）
  • 群组管理（创建 / 成员邀请 / 申请加入）
  • 好友申请 / 群组申请审批流程
  • 用户在线状态（40+ 种自定义状态表情）
  • 个人信息编辑与头像裁剪
  • 全局全文搜索（联系人 / 消息 / 群组，支持拼音模糊匹配）

多媒体能力

  • 桌面端快捷键截图（electron-screenshots）
  • 图片发送、预览、裁剪
  • 语音消息录制与波形可视化播放
  • 文件上传 / 下载

窗口与体验

  • 多窗口架构（主窗口 + 独立聊天窗口）
  • 窗口缓存与复用机制
  • 窗口淡入淡出动画效果
  • 系统托盘集成（右键菜单 / 未读消息气泡提示）
  • 窗口位置智能调整
  • 自定义主题设置
  • 表情使用历史记录
  • Electron Updater 自动更新

架构设计要点

进程通信架构

Renderer (Vue 3)  ←→  Preload (API Bridge)  ←→  Main (Electron)
     ↑                         ↑                        ↑
  Pinia Store            Context Bridge           IPC Handlers
  STOMP Subscribe        Security Layer          Native APIs
  • Main Process: 负责 Electron 原生能力封装，通过 IPC 暴露接口
  • Preload Script: 作为安全桥接层，将主进程能力按模块组织暴露给渲染进程
  • Renderer Process: 纯 Vue 3 前端应用，通过 preload 暴露的 API 与主进程交互

构建配置拆分

项目采用多配置文件策略，各进程独立配置：

配置文件用途
electron.vite.main.config.ts主进程构建配置（生产环境移除 console）
electron.vite.preload.config.ts预加载脚本构建配置
electron.vite.render.config.ts渲染进程构建配置（Vue / 插件 / UnoCSS 等）
electron.vite.config.ts组合以上三份配置的主入口

路由与布局

项目使用 vite-plugin-pages + vite-plugin-vue-layouts-next 实现基于文件系统的路由和布局：

布局文件适用场景
defaultlayouts/default.vue主界面框架（侧边栏 + 内容区）
centerlayouts/center.vue居中弹窗式页面
singlelayouts/single.vue独立全屏页面
sub-winlayouts/sub-win.vue子窗口页面

代码规范

  • 使用 oxlint 进行代码检查 (pnpm lint)
  • 使用 oxfmt 进行代码格式化 (pnpm format)
  • 组件和 API 自动导入（Auto Import / Components）

功能演示

add-friend.gif

apply-join-group.gif

create-group.gif

![friend-group.gif](README.md · bluereba/bluereba_ch…)

group-mention.gif

history-message.gif

invite-member.gif

![login.gif](README.md · bluereba/bluereba_ch…)

merge-message.gif

message-base.gif

message-one-by-one.gif

message-ref.gif

message-voice.gif

message-withdraw.gif

![register.gif](README.md · bluereba/bluereba_ch…)

share-card.gif

single.gif

tip.gif

tray.gif

![user-edit.gif](README.md · bluereba/bluereba_ch…)

user-status.gif

许可证

本项目采用私有许可证，未经授权不得用于商业用途。

作者

Email: 577393000@qq.com

致谢

avatar
文章
阅读
粉丝