+
+### 项目介绍
+
+Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发。
+
+### 功能模块
+
+- 支持私聊及群聊
+- 支持多种聊天消息类型 例如:文本消息、代码块、群投票、图片及其它类型文件，并支持文件下载
+- 支持聊天消息撤回、删除(批量删除)、转发消息(逐条转发、合并转发)
+- 支持编写笔记
+
+### 项目预览
+
+- 地址： [http://im.gzydong.com](http://im.gzydong.com)
+
+### 项目安装
+
+###### 下载安装
+
+```bash
+## 克隆项目源码包
+git clone https://gitee.com/gzydong/LumenIM.git
+或
+git clone https://github.com/gzydong/LumenIM.git
+
+## 安装项目依赖扩展组件
+yarn install
+
+# 启动本地开发环境
+yarn dev
+# 启动本地开发环境桌面客户端
+yarn electron:dev
+
+## 生产环境构建项目
+yarn build
+
+## 生产环境桌面客户端打包
+yarn electron:build
+```
+
+###### 修改 .env 配置信息
+
+```env
+VITE_BASE_API=http://127.0.0.1:9503
+VITE_SOCKET_API=ws://127.0.0.1:9504
+```
+
+###### 关于 Nginx 的一些配置
+
+```nginx
+server {
+ listen 80;
+ server_name www.yourdomain.com;
+
+ root /project-path/dist;
+ index index.html;
+
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
+
+ location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
+ expires 7d;
+ }
+
+ location ~ .*\.(js|css)?$ {
+ expires 7d;
+ }
+}
+```
+
+### 项目源码
+
+| 代码仓库 | 前端源码 | 后端源码 |
+| -------- | ---------------------------------- | ---------------------------------- |
+| Github | https://github.com/gzydong/LumenIM | https://github.com/gzydong/go-chat |
+| 码云 | https://gitee.com/gzydong/LumenIM | https://gitee.com/gzydong/go-chat |
+
+#### 联系方式
+
+QQ作者 : 837215079
+
+### 如果你觉得还不错，请 Star , Fork 给作者鼓励一下。
diff --git a/build/icons/lumen-im-mac.png b/build/icons/lumen-im-mac.png
new file mode 100644
index 0000000..5ec94e9
Binary files /dev/null and b/build/icons/lumen-im-mac.png differ
diff --git a/build/icons/lumen-im-win.ico b/build/icons/lumen-im-win.ico
new file mode 100644
index 0000000..7f8f5db
Binary files /dev/null and b/build/icons/lumen-im-win.ico differ
diff --git a/build/icons/lumenim.icns b/build/icons/lumenim.icns
new file mode 100644
index 0000000..2b2bec9
Binary files /dev/null and b/build/icons/lumenim.icns differ
diff --git a/build/icons/lumenim.ico b/build/icons/lumenim.ico
new file mode 100644
index 0000000..7f8f5db
Binary files /dev/null and b/build/icons/lumenim.ico differ
diff --git a/build/icons/lumenim.png b/build/icons/lumenim.png
new file mode 100644
index 0000000..5ec94e9
Binary files /dev/null and b/build/icons/lumenim.png differ
diff --git a/electron/main.js b/electron/main.js
new file mode 100644
index 0000000..e9b733e
--- /dev/null
+++ b/electron/main.js
@@ -0,0 +1,92 @@
+// 控制应用生命周期和创建原生浏览器窗口的模组
+const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require('electron')
+const path = require('path')
+
+const { shell } = require('electron')
+
+const NODE_ENV = process.env.NODE_ENV
+
+function loadHtmlUrl() {
+ return NODE_ENV === 'development'
+ ? `http://localhost:${process.env.PROT}`
+ : `file://${path.join(__dirname, '../dist/index.html')}`
+}
+
+function createWindow() {
+ // 创建浏览器窗口
+ const win = new BrowserWindow({
+ width: 1200,
+ height: 800,
+ minWidth: 900,
+ minHeight: 600,
+ frame: false,
+ titleBarStyle: 'hidden',
+ webPreferences: {
+ preload: path.join(__dirname, 'preload.js'),
+ contextIsolation: true,
+ },
+ })
+
+ // 加载 index.html
+ win.loadURL(loadHtmlUrl())
+
+ // 打开开发工具
+ if (NODE_ENV === 'development') {
+ win.webContents.openDevTools()
+ }
+
+ // 进入全屏模式
+ win.on('enter-full-screen', function () {
+ win.webContents.send('full-screen', 'enter')
+ })
+
+ // 退出全屏模式
+ win.on('leave-full-screen', function () {
+ win.webContents.send('full-screen', 'leave')
+ })
+
+ ipcMain.on('get-full-screen', (e, data) => {
+ e.returnValue = win.isFullScreen()
+ })
+
+ ipcMain.on('app-info', (e, data) => {
+ e.returnValue = {
+ platform: process.platform,
+ version: app.getVersion(),
+ appPath: app.getAppPath(),
+ }
+ })
+}
+
+// 这段程序将会在 Electron 结束初始化
+// 和创建浏览器窗口的时候调用
+// 部分 API 在 ready 事件触发后才能使用。
+app.whenReady().then(() => {
+ createWindow()
+
+ app.on('activate', function () {
+ // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
+ // 打开的窗口，那么程序会重新创建一个窗口。
+ if (BrowserWindow.getAllWindows().length === 0) createWindow()
+ })
+})
+
+// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
+// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
+app.on('window-all-closed', function () {
+ if (process.platform !== 'darwin') app.quit()
+})
+
+// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
+// 也可以拆分成几个文件，然后用 require 导入。
+
+ipcMain.on('ipc:set-badge', async (event, num) => {
+ if (process.platform === 'darwin') {
+ app.dock.setBadge(num > 99 ? '99+' : num)
+ }
+})
+
+ipcMain.on('ipc:open-link', async (event, link) => {
+ // Open a link in the default browser
+ shell.openExternal(link)
+})
diff --git a/electron/preload.js b/electron/preload.js
new file mode 100644
index 0000000..8d7895b
--- /dev/null
+++ b/electron/preload.js
@@ -0,0 +1,46 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+// 暴露方法给渲染进程调用
+contextBridge.exposeInMainWorld('electron', {
+ // 设置消息未读数
+ setBadge: num => {
+ ipcRenderer.send('ipc:set-badge', num == 0 ? '' : `${num}`)
+ },
+ // 获取窗口全屏状态
+ getFullScreenStatus: () => {
+ return ipcRenderer.sendSync('get-full-screen', '')
+ },
+ // 系统信息
+ getAppPlatform: () => {
+ return ipcRenderer.sendSync('app-info', '')
+ },
+
+ openLink: link => {
+ ipcRenderer.send('ipc:open-link', link)
+ },
+})
+
+// 窗口变化事件
+ipcRenderer.on('full-screen', function (event, value) {
+ // isFullScreenStatus = value == 'enter'
+
+ document.dispatchEvent(
+ new CustomEvent('full-screen-event', { detail: value })
+ )
+})
+
+// 触发自定义事件
+// document.dispatchEvent(new CustomEvent('myTestEvent', {num: i}))
+// document.addEventListener('myTestEvent', e => {console.log(e)})
+// 所有Node.js API都可以在预加载过程中使用。
+// 它拥有与Chrome扩展一样的沙盒。
+window.addEventListener('DOMContentLoaded', () => {
+ const replaceText = (selector, text) => {
+ const element = document.getElementById(selector)
+ if (element) element.innerText = text
+ }
+
+ for (const dependency of ['chrome', 'node', 'electron']) {
+ replaceText(`${dependency}-version`, process.versions[dependency])
+ }
+})
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 0000000..a5628a4
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1,9 @@
+/// 数据加载中...
+{{ nav.title }}
++ {{ status == 1 ? '正在录音' : '已暂停录音' }} + {{ countDownTime(duration) }} +
+
+
+
+
+ 申请管理({{ filterSearch.length }})
+
+
+ + {{ item.nickname }} + {{ item.created_at }} +
+设置管理
+基础信息
+成员管理({{ filterSearch.length }})
+
+
+ + {{ item.nickname || '未设置昵称' }} + ({{ item.remark }}) +
++ 群主 + 管理员 + 已禁言 + +
+公告管理({{ filterSearch.length }})
+
+
+ + {{ item.title }} +
++ {{ item.updated_at }} +
+
+
+
+
+ 
+ 支付宝
+
+ 微信
+
",
+ '[撇嘴]':
+ "
",
+ '[色]':
+ "
",
+ '[发呆]':
+ "
",
+ '[得意]':
+ "
",
+ '[流泪]':
+ "
",
+ '[害羞]':
+ "
",
+ '[闭嘴]':
+ "
",
+ '[睡]':
+ "
",
+ '[大哭]':
+ "
",
+ '[尴尬]':
+ "
",
+ '[发怒]':
+ "
",
+ '[调皮]':
+ "
",
+ '[呲牙]':
+ "
",
+ '[惊讶]':
+ "
",
+ '[难过]':
+ "
",
+ '[囧]':
+ "
",
+ '[抓狂]':
+ "
",
+ '[吐]':
+ "
",
+ '[偷笑]':
+ "
",
+ '[可爱]':
+ "
",
+ '[白眼]':
+ "
",
+ '[傲慢]':
+ "
",
+ '[困]':
+ "
",
+ '[惊恐]':
+ "
",
+ '[憨笑]':
+ "
",
+ '[大兵]':
+ "
",
+ '[咒骂]':
+ "
",
+ '[疑问]':
+ "
",
+ '[嘘]':
+ "
",
+ '[晕]':
+ "
",
+ '[衰]':
+ "
",
+ '[骷髅]':
+ "
",
+ '[敲打]':
+ "
",
+ '[再见]':
+ "
",
+ '[擦汗]':
+ "
",
+ '[抠鼻]':
+ "
",
+ '[鼓掌]':
+ "
",
+ '[坏笑]':
+ "
",
+ '[右哼哼]':
+ "
",
+ '[鄙视]':
+ "
",
+ '[委屈]':
+ "
",
+ '[快哭了]':
+ "
",
+ '[阴险]':
+ "
",
+ '[亲亲]':
+ "
",
+ '[可怜]':
+ "
",
+ '[笑脸]':
+ "
",
+ '[生病]':
+ "
",
+ '[脸红]':
+ "
",
+ '[破涕为笑]':
+ "
",
+ '[恐惧]':
+ "
",
+ '[失望]':
+ "
",
+ '[无语]':
+ "
",
+ '[嘿哈]':
+ "
",
+ '[捂脸]':
+ "
",
+ '[奸笑]':
+ "
",
+ '[机智]':
+ "
",
+ '[皱眉]':
+ "
",
+ '[耶]':
+ "
",
+ '[吃瓜]':
+ "
",
+ '[加油]':
+ "
",
+ '[汗]':
+ "
",
+ '[天啊]':
+ "
",
+ '[Emm]':
+ "
",
+ '[社会社会]':
+ "
",
+ '[旺柴]':
+ "
",
+ '[好的]':
+ "
",
+ '[打脸]':
+ "
",
+ '[哇]':
+ "
",
+ '[翻白眼]':
+ "
",
+ '[666]':
+ "
",
+ '[让我看看]':
+ "
",
+ '[叹气]':
+ "
",
+ '[苦涩]':
+ "
",
+ '[裂开]':
+ "
",
+ '[嘴唇]':
+ "
",
+ '[爱心]':
+ "
",
+ '[心碎]':
+ "
",
+ '[拥抱]':
+ "
",
+ '[强]':
+ "
",
+ '[弱]':
+ "
",
+ '[握手]':
+ "
",
+ '[胜利]':
+ "
",
+ '[抱拳]':
+ "
",
+ '[勾引]':
+ "
",
+ '[拳头]':
+ "
",
+ '[OK]':
+ "
",
+ '[合十]':
+ "
",
+ '[啤酒]':
+ "
",
+ '[咖啡]':
+ "
",
+ '[蛋糕]':
+ "
",
+ '[玫瑰]':
+ "
",
+ '[凋谢]':
+ "
",
+ '[菜刀]':
+ "
",
+ '[炸弹]':
+ "
",
+ '[便便]':
+ "
",
+ '[月亮]':
+ "
",
+ '[太阳]':
+ "
",
+ '[庆祝]':
+ "
",
+ '[礼物]':
+ "
",
+ '[红包]':
+ "
",
+ '[發]':
+ "
",
+ '[福]':
+ "
",
+ '[烟花]':
+ "
",
+ '[爆竹]':
+ "
",
+ '[猪头]':
+ "
",
+ '[跳跳]':
+ "
",
+ '[发抖]':
+ "
",
+ '[转圈]':
+ "
",
+}
+
+const emojisKeys = Object.keys(emojis)
+
+const regEmoji = emojisKeys
+ .map((value) => '|\\' + value)
+ .join('')
+ .replace('|', '')
+
+/**
+ * 替换表情文字
+ *
+ * @param {String} content 需要替换的字符串
+ */
+export function textReplaceEmoji(content) {
+ return content.replace(new RegExp(`(${regEmoji})`, 'gi'), ($0, $1) => {
+ return emojis[$1]
+ })
+}
diff --git a/src/utils/event-bus.ts b/src/utils/event-bus.ts
new file mode 100644
index 0000000..e77941d
--- /dev/null
+++ b/src/utils/event-bus.ts
@@ -0,0 +1,44 @@
+class EventBus {
+ private channels = {}
+
+ // 定义订阅方法
+ subscribe(channel: string, callback: Function) {
+ // 如果频道不存在，则创建一个新的频道
+ if (!this.channels[channel]) {
+ this.channels[channel] = []
+ }
+
+ // 将回调函数添加到频道的订阅者列表中
+ this.channels[channel].push(callback)
+ }
+
+ // 定义发布方法
+ emit(channel: string, data: any) {
+ // 如果频道不存在，则直接返回
+ if (!this.channels[channel]) {
+ return
+ }
+
+ // 遍历频道的订阅者列表，并依次调用回调函数
+ this.channels[channel].forEach((callback: Function) => {
+ callback(data)
+ })
+ }
+
+ unsubscribe(channel: string, callback: Function) {
+ // 如果频道不存在，则创建一个新的频道
+ if (!this.channels[channel]) {
+ this.channels[channel] = []
+ }
+
+ for (const index in this.channels[channel]) {
+ if (this.channels[channel][index] === callback) {
+ this.channels[channel].splice(index, 1)
+ }
+ }
+ }
+}
+
+export default EventBus
+
+export const bus = new EventBus()
diff --git a/src/utils/functions.js b/src/utils/functions.js
new file mode 100644
index 0000000..53cc0b1
--- /dev/null
+++ b/src/utils/functions.js
@@ -0,0 +1,106 @@
+import { getAccessToken } from '@/utils/auth'
+
+/**
+ * 通过图片url获取图片大小
+ *
+ * @param {String} imgsrc 例如图片名： D8x5f13a53dbc4b9_350x345.png
+ */
+export function getImageInfo(imgsrc) {
+ let data = {
+ width: 0,
+ height: 0
+ }
+
+ let arr = imgsrc.split('_')
+ if (arr.length == 1) return data
+
+ let info = arr[arr.length - 1].match(/\d+x\d+/g)
+ if (info == null) return data
+
+ info = info[0].split('x')
+
+ return {
+ width: parseInt(info[0]),
+ height: parseInt(info[1])
+ }
+}
+
+/**
+ * 文件下载方法
+ *
+ * @param {Number} msgid
+ */
+export function download(msg_id) {
+ let token = getAccessToken()
+ try {
+ let link = document.createElement('a')
+ // link.target = '_blank'
+ link.href = `${
+ import.meta.env.VITE_BASE_API
+ }/api/v1/talk/records/file/download?msg_id=${msg_id}&token=${token}`
+ link.click()
+ } catch (e) {
+ console.warn(e)
+ }
+}
+
+export function insertText(obj, str) {
+ if (document.selection) {
+ let sel = document.selection.createRange()
+ sel.text = str
+ } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
+ let startPos = obj.selectionStart,
+ endPos = obj.selectionEnd,
+ cursorPos = startPos,
+ tmpStr = obj.value
+ obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length)
+ cursorPos += str.length
+ obj.selectionStart = obj.selectionEnd = cursorPos
+
+ obj.focus()
+ } else {
+ obj.value += str
+ }
+}
+
+export function countDownTime(second = 0) {
+ // 小于10 加0 处理
+ function formate0to9(arg) {
+ return arg < 10 ? `0${arg}` : arg
+ }
+
+ const hours = parseInt((second / 60 / 60) % 24, 10) //剩余的小时
+ const minutes = parseInt((second / 60) % 60, 10) //剩余的分钟
+ const seconds = parseInt(second % 60, 10) //剩余的秒数
+
+ return `${formate0to9(hours)}:${formate0to9(minutes)}:${formate0to9(seconds)}`
+}
+
+export function removeTags(str) {
+ return str.replace(/<\/?[^>]+>/gi, '')
+}
+
+export function downloadImage(src, name) {
+ let image = new Image()
+ image.setAttribute('crossOrigin', 'anonymous')
+ image.onload = function () {
+ let canvas = document.createElement('canvas')
+ canvas.width = image.width
+ canvas.height = image.height
+ let context = canvas.getContext('2d')
+ context.drawImage(image, 0, 0, image.width, image.height)
+ let url = canvas.toDataURL('image/png')
+ let a = document.createElement('a')
+ let event = new MouseEvent('click')
+ a.download = name || 'image.png'
+ a.href = url
+ a.dispatchEvent(event)
+ }
+ image.src = src
+}
+
+// 获取文件名后缀
+export const getFileNameSuffix = (name) => {
+ const arr = name.split('.')
+ return arr[arr.length - 1]
+}
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..626977d
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,107 @@
+import axios from 'axios'
+import { delAccessToken, getAccessToken } from '@/utils/auth'
+
+// 创建 axios 实例
+const request = axios.create({
+ // API 请求的默认前缀
+ baseURL: import.meta.env.VITE_BASE_API,
+
+ // 请求超时时间
+ timeout: 10000
+})
+
+let once = false
+
+/**
+ * 异常拦截处理器
+ *
+ * @param {*} error
+ */
+const errorHandler = (error) => {
+ // 判断是否是响应错误信息
+ if (error.response) {
+ if (error.response.status == 401) {
+ delAccessToken()
+
+ if (!once) {
+ once = true
+ window['$dialog'].info({
+ title: '友情提示',
+ content: '当前登录已失效，请重新登录？',
+ positiveText: '立即登录?',
+ maskClosable: false,
+ onPositiveClick: () => {
+ location.reload()
+ }
+ })
+ }
+ }
+ }
+
+ return Promise.reject(error)
+}
+
+// 请求拦截器
+request.interceptors.request.use((config) => {
+ const token = getAccessToken()
+
+ if (token) {
+ config.headers['Authorization'] = `Bearer ${token}`
+ }
+
+ return config
+}, errorHandler)
+
+// 响应拦截器
+request.interceptors.response.use((response) => response.data, errorHandler)
+
+/**
+ * GET 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise
+
+
+
+
+
+
+
+
+
+ 无法找到该用户，请检查搜索内容并重试!
+
+
+
+
+ 
+ LumenIM 欢迎您 (*^__^*)
+会话记录({{ talkStore.talkItems.length }})
++ {{ unreadNum }}未读 +
+合并转发
+逐条转发
+批量删除
+关闭
++ + {{ online ? '在线' : '离线' }} +
+对方正在输入 ...
+
+
+ 
+
+
+
+
+
+
+ {{ tag.tag_name }}
+
+ {{ tag.tag_name }} +
+
+ 抱歉，你访问的页面不存在...
+
+ 
+