# polyv-web-interactions-receive-sdk-ui-default

**Repository Path**: polyv_ef/polyv-web-interactions-receive-sdk-ui-default

## Basic Information

- **Project Name**: polyv-web-interactions-receive-sdk-ui-default
- **Description**: 保利威互动功能接收端 SDK UI 组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 5
- **Created**: 2023-02-13
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 互动功能接收端 UI 组件

## 简介

保利威各开播端、助教端都可以在直播过程发起签到、抽奖、问卷等直播互动。对应地，在观看端也需要呈现这些互动。为了让保利威云直播观看页以及客户定制观看页都能方便地接入这些功能，我们把互动功能做成了 [SDK](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/sdk/overview) 以及 [UI 组件](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/overview)。

考虑到客户可能需要对互动功能的 UI 进行定制，所以我们的 UI 组件是开源的，即本开源项目。

## 概览

互动功能接收端 UI 组件是基于 Vue.js 2.6 开发的，目前包含以下子组件：

| 功能         | 目录                        | 备注 |
|------------|---------------------------| --- |
| 签到         | src/entry/check-in        | |
| 问卷         | src/entry/questionnarie   | |
| 答题卡        | src/entry/answer-card     | |
| 公告         | src/entry/bulletin        | 新版公告 |
| 公告         | src/entry/announcement    | 旧版公告（废弃，不再维护） |
| 报名抽奖       | src/entry/enroll-lottery  | |
| 反馈举报       | src/entry/feed-back       | |
| 无条件抽奖      | src/entry/lottery         | |
| 条件抽奖       | src/entry/welfare-lottery | |
| 卡片推送       | src/entry/push-card       | |
| 商品库        | src/entry/product         | |
| 商品库 - 弹层卡片 | src/entry/product-bubble  | |
| 问答         | src/entry/question-answer | |
| 图文直播       | src/entry/tuwen           | |
| 云席         | src/entry/seat-table      | |

## 项目启动

Node.js 版本要求：v18.16.1

建议使用 [nvm](https://github.com/nvm-sh/nvm) 进行 Node.js 版本管理。本项目根目录下的 `.nvmrc` 文件已指定了所需的 Node.js 版本。

安装依赖：

```javascript
npm install
```

本地运行：

```javascript
npm run dev
```

传入对应参数，具体请参考[文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/sdk/overview?id=%E5%88%9D%E5%A7%8B%E5%8C%96)

使用浏览器打开 <https://localhost:24001> 即可运行 demo。

## 目录说明

| 路径              | 说明                                                                |
|-----------------|-------------------------------------------------------------------|
| build/          | 构建逻辑                                                              |
| public/         | demo 页 html 文件                                                    |
| src/components/ | 通用组件                                                              |
| src/entry/      | 提供各互动功能模块下集成度较高的入口组件，互动模块通常在PC和移动端展示上有区别，命名入口文件名需要带Mobile和Pc进行区分。 |
| src/demo/       | demo 组件，展示如何引入及使用对应场景的组件                                          |
| src/resources/  | 图标库源文件目录                                                          |

关于icons 图标用法请参考该[文档](https://www.npmjs.com/package/@polyv/icons-cli?activeTab=readme)

## 构建

本地构建：

```javascript
npm run build
```

构建后会在项目内生成 dist 目录，里面包含：

- UMD 规范的 js 文件，位于 dist/lib/；
- CommonJS 规范的 js 文件，位于 dist/lib/；
- 图片、字体等资源文件，位于 dist/assets。

您需要自行把资源文件发布到服务器上，并相应配置 `webpack.lib.config.js` 中的资源发布路径 `publicPath`，才可以正常引用。