> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stmlink.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Web UI SDK 极简对接
> SMeeting Web UI 套件快速集成指南
这是一个集成web SDK基于 Vue 3 + TypeScript + Vite 构建的视频会议系统web端项目。
github源码地址：[https://github.com/seastart/meeting-web-demo](https://github.com/seastart/meeting-web-demo)
# 项目介绍
## 项目技术栈
* Vue 3
* TypeScript
* Vite
* Element Plus
* Pinia
* Vue Router
* SCSS
## 项目结构
```plain theme={null}
├── 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/`: 页面级组件
## 开发命令
```bash theme={null}
# 安装依赖
npm install
# 开发环境运行
npm run dev
# 构建生产版本
npm run build
# 代码格式化
npm run format
# 类型检查
npm run type-check
```
# 页面功能介绍
## 登录页
```plain theme={null}
├── login/
│ ├── cpn/
│ ├── Login.vue #登录页组件
│ ├── Register.vue #注册页组件
│ ├── index.vue #登录入口
```
## 首页
```plain theme={null}
├── home/
│ ├── cpn/
│ ├── AppointmentMeeting.vue #预约会议弹窗组件
│ ├── AppointmentResult.vue #预约结果弹窗组件
│ ├── Contacts.vue #通讯录弹窗组件
│ ├── HistoryMeeting.vue #历史会议弹窗组件
│ ├── ImmediateMeeting.vue #即时会议弹窗组件
│ ├── JoinMeeting.vue #加入会议弹窗组件
│ ├── index.vue #首页入口
```
## 会议
```plain theme={null}
├── 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 #会议入口
```
## 布局展示
### 自动布局
### 全屏
### 二等分
### 四宫格
### 五宫格
### 六宫格
### 八宫格
### 十宫格
### 十二宫格
### 十六宫格
### 右侧小窗口
### 顶部小窗口
### 下L型布局
### 上L型布局
