live-h5-audience 2.0.13 → 4.1.0

package/README.md

@@ -1,17 +1,15 @@
 # live-h5-audience
 
-直播 H5 观众端完整应用 npm 包 - 包含直播房间、房间列表、个人中心等完整功能
+直播 H5 观众端完整应用 npm 包 - v4.0.0
 
-## 特性
+## 功能特性
 
-这是一个完整的直播 H5 观众端应用，包含以下全部功能：
-- 📺 直播间（视频播放、礼物、红包、聊天室）
-- 📋 房间列表（直播列表、商品列表）
-- 👤 个人中心（关注、优惠券、个人信息）
-- 🎁 礼物系统
-- 💬 实时聊天
-- 📦 商品展示
-- 🎯 讲师详情
+- 🎥 直播间功能：视频播放、聊天互动、礼物打赏
+- 📋 房间列表：展示所有可用直播房间
+- 💬 聊天室：实时弹幕和评论
+- 🎁 礼物系统：支持多种礼物打赏
+- 🔴 红包功能：红包互动
+- 👤 个人中心：用户信息管理
 
 ## 安装
 
@@ -19,217 +17,135 @@
 npm install live-h5-audience
 ```
 
-## 快速开始
-
-### 方式一：独立挂载（推荐）
-
-在你的项目中创建一个容器，然后挂载整个应用：
+## 依赖要求
 
-```vue
-<template>
-  <div>
-    <div id="live-h5-app"></div>
-  </div>
-</template>
+使用此包前，你的项目需要安装以下依赖：
 
-<script>
-import { initLiveH5App } from 'live-h5-audience'
-
-export default {
-  mounted() {
-    // 初始化并挂载直播 H5 应用
-    const { vm, router, store } = initLiveH5App(this.$root.constructor, {
-      containerId: '#live-h5-app',
-      apiBaseUrl: 'https://your-api-domain.com/api'
-    })
-    
-    // 可以访问实例
-    this.liveH5App = vm
-    this.liveH5Router = router
-    this.liveH5Store = store
-  },
-  
-  beforeDestroy() {
-    // 清理资源
-    if (this.liveH5App) {
-      this.liveH5App.$destroy()
-    }
-  }
-}
-</script>
+```bash
+npm install vue@^2.6.0 vue-router@^3.0.0 vuex@^3.0.0 vant@^2.5.0 element-ui@^2.7.0 vue-bus@^1.2.1
 ```
 
-### 方式二：全局注册
+## 快速开始
 
-在你的项目的入口文件（`main.js`）中：
+### 方式一：插件模式（推荐）
 
 ```javascript
+// main.js
 import Vue from 'vue'
-import LiveH5 from 'live-h5-audience'
 
-Vue.use(LiveH5, {
-  // 配置 API 基础地址
-  apiBaseUrl: 'https://your-api-domain.com/api',
-  
-  // 自定义配置
-  config: {
-    // 你的配置项
-  }
-})
-```
+// 1. 安装 Vant
+import Vant from 'vant'
+import 'vant/lib/index.css'
+Vue.use(Vant)
 
-### 方式三：使用内置 Router 和 Store
+// 2. 安装 ElementUI
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
 
-如果你想将直播 H5 的路由和 store 集成到你自己的应用中：
+// 3. 安装 VueBus
+import VueBus from 'vue-bus'
+Vue.use(VueBus)
 
-```javascript
-import Vue from 'vue'
-import { App, router, store } from 'live-h5-audience'
-
-// 将直播 H5 的路由合并到你的路由中
-import VueRouter from 'vue-router'
-const yourRouter = new VueRouter({
-  routes: [
-    // 你的路由
-    ...router.options.routes
-  ]
+// 4. 引入 Live H5
+import LiveH5 from 'live-h5-audience'
+import 'live-h5-audience/dist/index.css'
+Vue.use(LiveH5, {
+  apiBaseUrl: 'https://api.example.com', // API 基础地址
+  defaultRoute: '/roomList' // 默认路由
 })
 
-// 创建 Vue 实例
+// 5. 创建 Vue 实例
 new Vue({
-  router: yourRouter,
+  router,
   store,
   render: h => h(App)
 }).$mount('#app')
 ```
 
-## 导出内容
-
-### 核心对象
-
-- `App` - Vue 根组件
-- `router` - Vue Router 实例（包含所有路由配置）
-- `store` - Vuex Store 实例（包含所有状态管理）
-- `initLiveH5App(Vue, options)` - 初始化应用函数
-
-### 初始化配置选项
+### 方式二：完整应用模式
 
 ```javascript
-initLiveH5App(Vue, {
-  containerId: '#live-h5-app',  // 挂载容器 ID，默认 '#live-h5-app'
-  apiBaseUrl: 'https://api.example.com',  // API 基础 URL
-  routerConfig: {},  // 路由配置覆盖
-  storeConfig: {}    // Store 配置覆盖
-})
-```
-
-## 路由说明
-
-应用包含以下路由：
-
-| 路径 | 名称 | 组件 | 说明 |
-|------|------|------|------|
-| `/` | login | 登录页 | 用户登录 |
-| `/roomList` | roomList | 房间列表 | 直播房间列表 |
-| `/mylikeList` | mylikeList | 关注列表 | 我的关注 |
-| `/couponList` | couponList | 优惠券 | 我的优惠券 |
-| `/tellerDetail` | tellerDetail | 讲师详情 | 讲师详情页 |
-| `/personalCenter` | personalCenter | 个人中心 | 个人中心 |
-| `/updateName` | updateName | 修改昵称 | 修改昵称 |
-| `/settingdy` | settingdy | 开播提醒 | 设置开播提醒 |
-| `/liveRoom` | liveRoom | 直播间 | 直播房间页面 |
-| `/liveRoom/productDetail` | productDetail | 商品详情 | 商品详情页 |
-| `/rosApp` | rosApp | 唤起App | 唤起 App |
-| `/productDetail` | productDetail | 商品详情 | 商品详情页 |
-
-## API 配置
-
-### 配置 API 基础地址
-
-```javascript
-// 方式一：初始化时配置
-initLiveH5App(Vue, {
-  apiBaseUrl: 'https://your-api-domain.com/api'
-})
+import Vue from 'vue'
+import { initLiveH5App } from 'live-h5-audience'
+import 'live-h5-audience/dist/index.css'
 
-// 方式二：全局配置
-Vue.use(LiveH5, {
-  apiBaseUrl: 'https://your-api-domain.com/api'
+// 初始化独立应用
+const { vm, router, store } = initLiveH5App(Vue, {
+  containerId: '#live-h5-app',
+  apiBaseUrl: 'https://api.example.com',
+  defaultRoute: '/roomList'
 })
 ```
 
-### 访问 API 配置
+## Demo 项目
 
-```javascript
-// 在组件中访问
-this.$apiBaseUrl
-```
+查看 `demo-simple` 目录获取完整的使用示例。
 
-## 访问 Router 和 Store
+### 运行 Demo
 
-```javascript
-// 在组件中访问路由和 store
-this.$liveH5Router
-this.$liveH5Store
+```bash
+cd demo-simple
+npm install
+npm run dev
 ```
 
-## 样式主题
+## 配置选项
 
-应用使用了自定义主题，已包含在包中。如需修改主题样式，可以通过 CSS 覆盖。
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| apiBaseUrl | String | - | API 基础地址 |
+| containerId | String | '#live-h5-app' | 挂载容器 ID |
+| defaultRoute | String | '/roomList' | 默认路由 |
 
-## 依赖说明
+## 路由
 
-### 必需依赖（peerDependencies）
+直播模块使用以下路由前缀：
 
-以下依赖由**使用方**提供（不在包内打包）：
+| 路由 | 说明 |
+|------|------|
+| `/roomList` | 房间列表 |
+| `/liveRoom/:id` | 直播间 |
+| `/personal` | 个人中心 |
 
-| 依赖 | 版本要求 | 说明 |
-|------|---------|------|
-| `vue` | ^2.6.0 | Vue 核心框架 |
-| `vue-router` | ^3.0.0 | 路由管理 |
-| `vuex` | ^3.0.0 | 状态管理 |
-| `vant` | ^2.5.0 | 移动端组件库 |
-| `element-ui` | ^2.7.0 | 桌面端组件库 |
-
-### 包内依赖（dependencies）
-
-以下依赖已**打包**在 npm 包中：
-
-- `axios` - HTTP 请求
-- `vue-bus` - 事件总线
-- `flv.js` - FLV 播放器
-- `video.js` - 视频播放器
-- `xgplayer` - 西瓜播放器
-- `tim-js-sdk` - 腾讯 IM SDK
-- 以及其他功能依赖
+## 注意事项
 
-**为什么不将 vant 和 element-ui 打包进包内？**
-- 避免版本冲突
-- 减小包体积
-- 允许使用方灵活选择版本
+1. 必须先安装并引入 Vant、ElementUI、VueBus 等依赖
+2. 确保 Vant 和 ElementUI 样式已正确引入
+3. 包已外部化所有依赖，不会重复打包
+4. 主文件大小约 1.1 MB
 
-## 构建和发布
+## 开发
 
 ```bash
-# 开发
+# 开发模式
 npm run dev
 
-# 构建生产版本
-npm run build
-
-# 构建 npm 库
+# 构建 npm 包
 npm run build:lib
 
-# 发布到 npm
+# 合并 chunk 文件
+node merge-chunks.js
+
+# 发布到 npm（需要 OTP）
+npm publish --access public --otp=<你的OTP码>
+
+# 或使用完整发布脚本
 npm run publish:lib
 ```
 
-## 注意事项
+## 文件说明
+
+构建后的文件结构：
 
-1. **容器必须存在**：使用 `initLiveH5App` 时，确保容器元素已存在
-2. **路由冲突**：如果将直播 H5 的路由合并到你的路由中，注意避免路径冲突
-3. **样式隔离**：如果担心样式冲突，可以使用 CSS Modules 或 Scoped CSS
-4. **资源清理**：在组件销毁时记得调用 `vm.$destroy()` 清理资源
+```
+dist/
+├── index.umd.js        # 主文件 (约 1.1 MB)
+├── index.css           # 样式文件 (约 60 KB)
+└── static/             # 静态资源
+    ├── img/           # 图片
+    └── ...
+```
 
 ## License
 

package/dist/index.css

@@ -0,0 +1,81 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@import "../theme/main.css";
+.live-h5-app-root {
+  height: 100%;
+  width: 100%;
+}
+
+/*# sourceMappingURL=App.vue.map */