63 lines
2.0 KiB
Markdown
63 lines
2.0 KiB
Markdown
# OBS 悬浮小组件
|
||
|
||
一个为 OBS Studio 直播和录制场景开发的高度可定制化小组件集合，基于 Vue 3、TypeScript 和 Vite 构建。
|
||
|
||
## 功能特点
|
||
|
||
- **时间和日期显示**：可自定义格式的时间和日期显示
|
||
- **文本显示**：展示固定文字或 API 返回内容，支持自定义样式
|
||
- **图片显示**：展示本地或远程图片，支持自定义设置
|
||
- **分屏界面**：左侧为配置面板，右侧为实时预览
|
||
- **透明背景**：所有小组件均具有适合 OBS 悬浮的透明背景
|
||
- **URL 生成**：自动生成包含编码配置的可分享 URL
|
||
- **纯预览模式**：打开生成的 URL 仅显示小组件内容，无配置界面，背景透明
|
||
|
||
## 小组件类型
|
||
|
||
1. **时钟小组件**：显示当前时间，可自定义格式、样式和特效
|
||
2. **日期小组件**：显示当前日期，可自定义格式、样式和特效
|
||
3. **文本小组件**：显示文本，支持渐变、阴影、字体等自定义样式
|
||
4. **图片小组件**：显示图片，可自定义大小、特效和位置
|
||
|
||
## 使用方法
|
||
|
||
1. 从下拉菜单中选择小组件类型
|
||
2. 使用左侧控制面板配置小组件
|
||
3. 在右侧实时查看预览效果
|
||
4. 复制生成的 URL，在 OBS Studio 中作为浏览器源使用
|
||
|
||
## 开发
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览生产构建
|
||
npm run preview
|
||
```
|
||
|
||
## 故障排除
|
||
|
||
如果遇到与未定义属性相关的 TypeScript 错误，请确保：
|
||
|
||
1. 所有小组件组件都能处理可能未定义的配置属性
|
||
2. 为所有配置选项提供默认值
|
||
3. 使用适当的空值检查（例如：`props.config.property || defaultValue`）
|
||
|
||
## 与 OBS Studio 集成
|
||
|
||
1. 在 Web 服务器或本地运行此应用
|
||
2. 使用配置界面设置您的小组件
|
||
3. 复制生成的 URL
|
||
4. 在 OBS Studio 中：
|
||
- 向您的场景添加"浏览器源"
|
||
- 将 URL 粘贴到浏览器源 URL 字段
|
||
- 根据需要设置宽度和高度
|
||
- 勾选"不可见时关闭源"以获得更好的性能
|