# interact-video
**Repository Path**: mrwang8034/interact-video
## Basic Information
- **Project Name**: interact-video
- **Description**: 有灵交互虚拟人 是一个基于 Vue3、Vite3、TypeScript、Pinia、Vant、 Windi CSS、Electron的项目。
它拥有自动注册路由、自动注册全局组件、IPC 通信及白名单、全局窗口管理、版本自动更新等功能。
可输出H5项目和桌面客户端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-06-13
- **Last Updated**: 2024-12-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# XMOV 有灵交互虚拟人
## 简介
有灵交互虚拟人 是一个基于 Vue3、Vite3、TypeScript、Pinia、Vant、 Windi CSS、Electron的项目。
它拥有自动注册路由、自动注册全局组件、IPC 通信及白名单、全局窗口管理、版本自动更新等功能。
可输出H5项目和桌面客户端
## 开始
1. `git clone http://git.xmov.ai/x-force/interact-video.git`
2. `cd vue3-electron-template`
3. `yarn`
4. `yarn dev`
## 目录
```text
interact-video
├─ .vscode // vscode 插件和设置
│ ├─ extensions.json // vscode 推荐的插件
│ └─ settings.json // vscode 配置（在该项目中生效，可以复制到用户配置文件中）
├─ dockerfiles // 服务器部署文件/nginx配置文件
├─ electron // electron 相关配置
├─ env // 环境文件目录
├─ index.html
├─ package.json // npm 依赖描述文件
├─ public // 公共目录(文件夹里面的资源打包后会在根目录下)
├─ README.md // 项目介绍文档
├─ set-package-env.js // 打包后环境变量配置文件
├─ src
│ ├─ @types // TS类型定义文件
│ ├─ apis // api接口文件存放目录
│ ├─ assets // 静态资源
│ │ ├─ apng // APNG存放目录
│ │ ├─ icons // svg-icon存放目录
│ │ ├─ images // 图片存放目录
│ │ ├─ music // 音频文件存放目录
│ │ ├─ styles // 公共样式存放目录
│ │ ├─ svga // svga文件存放目录
│ ├─ components // 全局组件
│ │ ├─ common // 公共组件
│ │ ├─ desktop // 大屏端相关组件
│ │ ├─ h5 // H5端相关组件
│ │ └─ pc // PC端相关组件
│ ├─ hooks // 组合式的函数hooks(状态从函数里面产生)
│ ├─ libs // 本地包存放目录
│ ├─ main.ts // 项目入口ts文件
│ ├─ router // 项目路由
│ ├─ store // 项目状态管理目录
│ ├─ typings // TS类型声明文件(*.d.ts)
│ ├─ utils // 项目插件管理目录
│ │─ views // 页面
│ │ ├─ h5 // H5页面
│ │ │ └─ index.vue
│ │ ├─ pc // PC页面
│ │ │ └─ index.vue
│ │ └─ smart // 大屏页面
│ │ └─ index.vue
│ └─ App.vue // vue文件入口
├─ electron-builder.json5 // electron 打包配置文件
├─ .eslintignore //忽略eslint检查的配置文件
├─ .eslintrc.js // eslint 配置文件
├─ .gitignore // 忽略 git 提交的配置文件
├─ .gitlab-ci.yml // gitLab ci/cd 配置文件
├─ tsconfig.json // TS 配置
├─ vite.config.ts // vite配置
├─ windi.config.ts // 原子 css 框架 windicss 配置
└─ yarn.lock // npm 包管理器 yarn 依赖锁定文件
```
## 功能模块
### 自动注册组件/路由
- 自动注册 src/components，src/biz-components 目录下 vue 文件为全局组件，自动引入。
- 自动注册 src/view 目录下 vue 文件中 defineOptions 声明了 isRouter: true 的组件为路由。
```ts
defineOptions({
name: 'Home',
isRouter: true,
// layout: 'MainLayout'
})
```
### IPC 通信
```ts
import { useRenderIpc } from '@/hooks'
const { ipcSend, ipcInvoke, ipcReceive } = useRenderIpc()
// 渲染进程 -> 主进程
ipcSend('white-channel', params)
ipcMain.on("white-channel", (event, params) => {
console.log(params)
})
// 渲染进程 -> 主进程 -> 渲染进程
ipcInvoke('white-channel', params).then((data) => {
console.log(data)
})
ipcMain.handle("white-channel", (event, params) => {
console.log(params)
return data
})
// 主进程 -> 渲染进程
win.webContent.send("white-channel", data)
ipcReceive('white-channel', (data) => {
console.log(data)
})
```
> 说明：1. 示例中 ipc 通信的 white-channel 需要在目录：electron/preload/white-channel.ts 中进行类型声明。
2. 示例中 ipcMain 需要在目录：electron/main/ipc-event 内挂载。
### 窗口管理
- 全局窗口集合
```ts
import ElecWindows from "./electron-windows"
const elecWindows = ElecWindows.getElecWindows()
console.log(`windows group: ${elecWindows.group}`)
// windows group: { '1': { route: '', isMultiWindow: false, isMainWin: true } }
```
- 创建窗口
```ts
// 渲染进程创建
ipcSend('window-new', windowParams)
// 主进程创建
import ElecWindows from "./electron-windows"
const elecWindows = ElecWindows.getElecWindows()
elecWindows.createWindow(windowParams)
```
> 说明：通过 ElecWindows 类统一管理应用窗口，系统托盘等；更方便的查找，关闭，配置窗口。
## npm scripts
```json
{
// 本地运行(H5-dev环境, .env.development)
"dev": "node set-package-env.js h5 development && vite --mode development --open",
// 本地运行(PC-dev环境, .env.development)
"dev:pc": "node set-package-env.js pc development && vite --mode development --open",
// 本地运行(大屏-dev环境, .env.development)
"dev:smart": "node set-package-env.js smart development && vite --mode development",
// 构建打包(H5-生产环境, .env.production)
"build:prod": "node set-package-env.js h5 production && vite build --mode production",
// 构建打包(PC-生产环境, .env.production)
"build:prod-pc": "node set-package-env.js pc production && vite build --mode production",
// 构建打包(大屏-生产环境, .env.production)
"build:prod-smart": "node set-package-env.js smart production && vite build --mode production && electron-builder",
// 构建打包(H5-开发环境, .env.dev)
"build:dev": "node set-package-env.js h5 dev && vite build --mode dev",
// 构建打包(PC-开发环境, .env.dev)
"build:dev-pc": "node set-package-env.js pc dev && vite build --mode dev",
// 构建打包(大屏-开发环境, .env.dev)
"build:dev-smart": "node set-package-env.js smart dev && vite build --mode dev && electron-builder",
// 构建打包(H5-测试环境, .env.test)
"build:test": "node set-package-env.js h5 test && vite build --mode test",
// 构建打包(PC-测试环境, .env.test)
"build:test-pc": "node set-package-env.js pc test && vite build --mode test",
// 构建打包(大屏-测试环境, .env.test)
"build:test-smart": "node set-package-env.js smart test && vite build --mode test && electron-builder",
// 本地环境预览构建后的dist
"preview": "vite preview",
// vue文件的ts检查
"typecheck": "vue-tsc --noEmit --skipLibCheck",
// 检测代码是否符合eslint规范并自动修复
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
}
```
> 说明：打包时通过重写 package-env.ts 文件，设置打包后环境变量；打包后读取 packageEnv 环境变量，进行差异化操作。