OBS 悬浮小组件

一个为 OBS Studio 直播和录制场景开发的高度可定制化小组件集合，基于 Vue 3、TypeScript 和 Vite 构建。

功能特点

• 时间和日期显示：可自定义格式的时间和日期显示
• 文本显示：展示固定文字或 API 返回内容，支持自定义样式
• 图片显示：展示本地或远程图片，支持自定义设置
• 分屏界面：左侧为配置面板，右侧为实时预览
• 透明背景：所有小组件均具有适合 OBS 悬浮的透明背景
• URL 生成：自动生成包含编码配置的可分享 URL
• 纯预览模式：打开生成的 URL 仅显示小组件内容，无配置界面，背景透明

小组件类型

1. 时钟小组件：显示当前时间，可自定义格式、样式和特效
2. 日期小组件：显示当前日期，可自定义格式、样式和特效
3. 文本小组件：显示文本，支持渐变、阴影、字体等自定义样式
4. 图片小组件：显示图片，可自定义大小、特效和位置

使用方法

1. 从下拉菜单中选择小组件类型
2. 使用左侧控制面板配置小组件
3. 在右侧实时查看预览效果
4. 复制生成的 URL，在 OBS Studio 中作为浏览器源使用

开发

# 安装依赖
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 字段
   • 根据需要设置宽度和高度
   • 勾选"不可见时关闭源"以获得更好的性能