这是一个集成web SDK基于 Vue 3 + TypeScript + Vite 构建的视频会议系统web端项目。 github源码地址：https://github.com/seastart/meeting-web-demo

项目介绍

项目技术栈

Vue 3
TypeScript
Vite
Element Plus
Pinia
Vue Router
SCSS

项目结构

├── src/                    # 源代码目录
│   ├── api/               # API 接口定义
│   ├── assets/            # 静态资源文件
│   ├── components/        # 公共组件
│   ├── directives/        # Vue 自定义指令
│   ├── hooks/             # Vue 组合式函数
│   ├── router/            # 路由配置
│   ├── sdk/               # SDK 相关代码
│   ├── stores/            # Pinia 状态管理
│   ├── styles/            # 全局样式文件
│   ├── types/             # TypeScript 类型定义
│   ├── utils/             # 工具函数
│   ├── views/             # 页面视图组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 应用入口文件
├── public/                # 公共静态资源
├── doc/                   # 项目文档
├── .env.development       # 开发环境配置
├── .env.production        # 生产环境配置
├── vite.config.ts         # Vite 配置文件
└── package.json           # 项目依赖配置

主要文件说明

配置文件

package.json: 项目依赖和脚本配置
vite.config.ts: Vite 构建工具配置
tsconfig.json: TypeScript 配置
.env.development: 开发环境变量
.env.production: 生产环境变量

源码目录

src/api/: 存放后端 API 接口调用相关代码
src/components/: 可复用的 Vue 组件
src/directives/: Vue 自定义指令
src/hooks/: Vue 组合式函数（Composables）
src/router/: 路由配置和路由守卫
src/sdk/: 会议 SDK 相关的封装代码
src/stores/: Pinia 状态管理存储
src/utils/: 工具函数和通用方法
src/views/: 页面级组件

开发命令

# 安装依赖
npm install

# 开发环境运行
npm run dev

# 构建生产版本
npm run build

# 代码格式化
npm run format

# 类型检查
npm run type-check

页面功能介绍

登录页

├── login/                	
│   ├── cpn/ 
│      ├── Login.vue     #登录页组件
│      ├── Register.vue 	#注册页组件
│   ├── index.vue       #登录入口

首页

├── home/                	
│   ├── cpn/ 
│      ├── AppointmentMeeting.vue     #预约会议弹窗组件
│      ├── AppointmentResult.vue 			#预约结果弹窗组件
│      ├── Contacts.vue 							#通讯录弹窗组件
│      ├── HistoryMeeting.vue 				#历史会议弹窗组件
│      ├── ImmediateMeeting.vue 			#即时会议弹窗组件
│      ├── JoinMeeting.vue 						#加入会议弹窗组件
│   ├── index.vue       							#首页入口

会议

├── meeting/                	
│   ├── cpn/                 
│      ├── ChatDrawer.vue     			#聊天侧弹窗组件
│      ├── Footer.vue 							#底部操作栏组件
│      ├── LayoutImg.vue 						#显示布局图片组件
│      ├── InviteEnter.vue 					#邀请入会弹窗组件
│      ├── MemberDrawer.vue 				#成员侧弹窗组件
│      ├── Preview.vue 							#大窗口视频预览组件
│      ├── Recording.vue 						#录制组件（左上角显示录制中 00:00:00）
│      ├── RecordLayout.vue 				#设置录制布局、弹窗组件
│   ├── room-content/       
│      ├── gird-view/     		
│      		├── index.vue 						#宫格视图组件
│      ├── size-view/				
│         ├── index.vue 						#大小画面视图组件
│         ├── SizeBr7.vue 					#下L型布局视图组件
│         ├── SizeRight4.vue 				#右侧小窗口视图组件
│         ├── SizeTl7.vue 					#上L型布局视图组件
│         ├── SizeTop4.vue 					#顶部小窗口视图组件
│      ├── index.vue 								#内容组件
│      ├── MeItem.vue 							#自己窗口组件
│      ├── UserItem.vue 						#成员窗口组件
│      ├── OtherShareScreen.vue 		#接收其他人共享组件
│      ├── MixMode.vue 							#合成模式组件
│   ├── room-top/       
│      ├── index.vue								#顶部组件	 	 		
│   ├── index.vue       						#会议入口