feat: vue3版本

.env

@@ -0,0 +1,4 @@
+VUE_APP_PREVIEW=false
+VUE_APP_API_BASE_URL=https://im-api.gzydong.club
+VUE_APP_WEB_SOCKET_URL=wss://im-api.gzydong.club/wss/default.io
+VUE_APP_WEBSITE_NAME="Lumen IM"

.env.development

@@ -0,0 +1,8 @@
+# just a flag
+ENV = 'development'
+
+VITE_BASE=/
+VITE_ROUTER_MODE=history
+VITE_BASE_API=http://127.0.0.1:9503
+VITE_SOCKET_API=ws://127.0.0.1:9504
+

.env.electron

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'production'
+
+VITE_BASE=./
+VITE_ROUTER_MODE=hash
+VITE_BASE_API=https://imapi.gzydong.com
+VITE_SOCKET_API=wss://imapi.gzydong.com

.env.production

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'production'
+
+VITE_BASE=/
+VITE_ROUTER_MODE=history
+VITE_BASE_API=https://imapi.gzydong.com
+VITE_SOCKET_API=wss://imapi.gzydong.com

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist_electron
+dist-ssr
+*.local
+makefile
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+makefile

README.md

@@ -0,0 +1,87 @@
+# Lumen IM 即时聊天
+<img alt="GitHub stars badge" src="https://img.shields.io/github/stars/gzydong/LumenIM"> <img alt="GitHub forks badge" src="https://img.shields.io/github/forks/gzydong/LumenIM"> <img alt="GitHub license badge" src="https://img.shields.io/github/license/gzydong/LumenIM">
+
+###  项目介绍
+Lumen IM 是一个网页版即时聊天系统，界面简约美观
+
+### 功能模块
+- 支持私聊及群聊
+- 支持多种聊天消息类型 例如:文本消息、代码块、群投票、图片及其它类型文件，并支持文件下载
+- 支持聊天消息撤回、删除(批量删除)、转发消息(逐条转发、合并转发)
+- 支持编写笔记
+
+### 项目预览
+- 地址： [http://im.gzydong.com](http://im.gzydong.com)
+- 账号： 18798272054 或 18798272055
+- 密码： admin123
+
+### 项目安装(部署)
+
+###### 设置 npm 镜像源
+```language
+npm config set registry https://registry.npm.taobao.org
+```
+
+###### 下载安装
+```bash
+## 克隆项目源码包
+git clone https://gitee.com/gzydong/LumenIM.git
+或
+git clone https://github.com/gzydong/LumenIM.git
+
+## 安装项目依赖扩展组件
+npm install
+
+# 启动本地开发环境
+npm run dev
+# 启动本地开发环境桌面客户端
+npm run electron:dev
+
+## 生产环境构建项目
+npm run build
+
+## 生产环境桌面客户端打包
+npm run 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 给作者鼓励一下。

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)
+})

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])
+  }
+})

index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="./src/assets/image/favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lumen IM</title>
+  <style>
+    .outer,
+    .middle,
+    .inner {
+      border: 3px solid transparent;
+      border-top-color: #dedada;
+      border-right-color: #dedada;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+
+    .outer {
+      width: 3.5em;
+      height: 3.5em;
+      margin-left: -1.75em;
+      margin-top: -1.75em;
+      animation: spin 2s linear infinite;
+    }
+
+    .middle {
+      width: 2.1em;
+      height: 2.1em;
+      margin-left: -1.05em;
+      margin-top: -1.05em;
+      animation: spin 1.75s linear reverse infinite;
+    }
+
+    .inner {
+      width: 0.8em;
+      height: 0.8em;
+      margin-left: -0.4em;
+      margin-top: -0.4em;
+      animation: spin 1.5s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <script>
+    // 这里为了处理首屏加载慢，设置缓存的主题
+    let cache = localStorage.getItem('IM_DARKTHEME')
+    if (cache) {
+      cache = JSON.parse(cache).value || false
+      if (cache) {
+        document.querySelector('html').style = 'background:#202124'
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <div id="app">
+    <div class="app-loading">
+      <div class="loader">
+        <div class="outer"></div>
+        <div class="middle"></div>
+        <div class="inner"></div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>