{"id":37909179,"url":"https://github.com/polyv/polyv-web-vod-outline-demo","last_synced_at":"2026-01-16T17:17:45.211Z","repository":{"id":297548181,"uuid":"997131050","full_name":"polyv/polyv-web-vod-outline-demo","owner":"polyv","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-25T02:23:41.000Z","size":1490,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-25T03:42:14.142Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/polyv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-06T02:29:28.000Z","updated_at":"2025-09-25T02:09:09.000Z","dependencies_parsed_at":"2025-09-25T03:28:00.402Z","dependency_job_id":"bf2d0b59-0e6c-4487-ab42-335e083b4da4","html_url":"https://github.com/polyv/polyv-web-vod-outline-demo","commit_stats":null,"previous_names":["polyv/polyv-web-vod-outline-demo"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/polyv/polyv-web-vod-outline-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Fpolyv-web-vod-outline-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Fpolyv-web-vod-outline-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Fpolyv-web-vod-outline-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Fpolyv-web-vod-outline-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polyv","download_url":"https://codeload.github.com/polyv/polyv-web-vod-outline-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Fpolyv-web-vod-outline-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28480094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-16T17:17:44.478Z","updated_at":"2026-01-16T17:17:45.203Z","avatar_url":"https://github.com/polyv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VOD AI Outline Monorepo\n\npolyv 点播web端AI大纲功能demo，包含三个子项目：\n\n## 项目结构\n\n```\nvod-ai-outline/\n├── packages/\n│   ├── vod-ai-outline-ui/     # Vue 2.7 + Vite UI组件\n│   ├── vod-ai-outline-logic/  # 纯JS逻辑包\n│   └── vod-ai-outline-demo/   # 演示项目\n├── package.json\n├── pnpm-workspace.yaml\n└── README.md\n```\n\n## 子项目\n\n### @polyv/vod-ai-outline-ui\n\n- 基于 Vue 2.7 + Vite 的前端UI组件库\n- 位置: `packages/vod-ai-outline-ui/`\n\n### @polyv/vod-ai-outline-logic  \n\n- 纯JavaScript逻辑库，使用 Vite 构建和打包\n- 位置: `packages/vod-ai-outline-logic/`\n\n### vod-ai-outline-demo\n\n- 演示项目，展示如何集成和使用智能大纲组件\n- 位置: `packages/vod-ai-outline-demo/`\n\n## 开发指令\n\n```bash\n# 安装所有依赖\npnpm install\n\n# 启动所有开发服务器\npnpm dev\n\n# 构建所有项目\npnpm build\n\n# 清理所有构建产物\npnpm clean\n\n# 代码检查\npnpm lint\n\n# 🚀 Release构建（推荐）\npnpm run release          # 执行完整的release构建\npnpm run release:build    # 仅构建项目\npnpm run release:copy     # 仅复制构建产物\n```\n\n## 工作流程\n\n1. 在根目录运行 `pnpm install` 安装所有依赖\n2. 使用 `pnpm dev` 启动开发环境\n3. 在各个子项目目录中进行开发\n4. 使用 `pnpm build` 构建所有项目\n\n## 要求\n\n- Node.js \u003e= 16.0.0\n- pnpm \u003e= 8.0.0\n\n---\n\n## 在线demo\n\n[传送门](https://demo.ipolyv.cn/zhouzhanhong/vod-ai-outline-demo/)\n\n# 🚀 接入指南\n\nVOD AI Outline 提供两种接入方式，您可以根据项目需求选择合适的方案：\n\n## 📖 方式一：通过构建产物接入（推荐）\n\n### 快速开始\n\n参考 `vod-ai-outline-demo` 项目，通过引入构建产物快速集成智能大纲功能。\n\n#### 1. 获取构建文件\n\n首先构建UI组件库：\n\n```bash\ncd packages/vod-ai-outline-ui\npnpm run build:lib\n```\n\n构建完成后，将在 `dist/` 目录下生成以下文件：\n\n- `index.umd.js` - UMD格式的JavaScript文件\n- `style.css` - 组件样式文件\n\n#### 2. 引入文件\n\n在您的HTML页面中引入构建文件：\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-CN\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eVOD AI Outline\u003c/title\u003e\n    \u003c!-- 引入样式文件 --\u003e\n    \u003clink rel=\"stylesheet\" href=\"./dist/style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- 智能大纲容器 --\u003e\n    \u003cdiv id=\"vod-ai-outline-container\"\u003e\u003c/div\u003e\n    \n    \u003c!-- 引入JavaScript文件 --\u003e\n    \u003cscript src=\"./dist/index.umd.js\"\u003e\u003c/script\u003e\n    \n    \u003cscript\u003e\n        // 您的初始化代码\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### 3. 初始化智能大纲\n\n```javascript\n// 签名函数（生产环境必须通过接口获取）\nasync function createSignature(params) {\n    const response = await fetch('/api/getSign', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ params })\n    });\n    \n    const result = await response.json();\n    return result.data.signature;\n}\n\n// 初始化配置\nconst config = {\n    containerId: \"vod-ai-outline-container\", // 容器ID\n    api: {\n        appId: \"your-app-id\",                // 您的应用ID\n        getSignature: createSignature        // 签名函数\n    },\n    options: {\n        defaultActiveTab: \"outline\",         // 默认显示标签: outline | qa\n        showIntroduction: true               // 是否显示视频介绍\n    },\n    callbacks: {\n        onError: (error) =\u003e {\n            console.error(\"组件错误:\", error);\n        },\n        onTabChange: (tab) =\u003e {\n            console.log(\"切换到标签:\", tab);\n        },\n        onTimeClick: (time) =\u003e {\n            console.log(\"点击时间:\", time);\n            // 在此处实现视频跳转逻辑\n            // player.seekTo(timeStringToSeconds(time));\n        }\n    }\n};\n\n// 初始化智能大纲\nasync function initOutline() {\n    try {\n        const outlineInstance = await VodAiOutline.init(config);\n        \n        // 加载视频数据\n        await outlineInstance.loadVideoData(\"your-video-id\", {\n            useCache: false,\n            questionsSize: 5\n        });\n        \n        console.log(\"智能大纲初始化成功\");\n    } catch (error) {\n        console.error(\"初始化失败:\", error);\n    }\n}\n\n// 页面加载完成后初始化\nwindow.addEventListener('load', initOutline);\n```\n\n#### 4. 快捷API\n\n组件还提供了一些快捷API方法：\n\n```javascript\n// 通过ID选择器快速创建\nVodAiOutline.createById(\"container-id\", apiConfig, getSignature, options);\n\n// 通过Class选择器快速创建\nVodAiOutline.createByClass(\"container-class\", apiConfig, getSignature, options);\n\n// 销毁实例\nVodAiOutline.destroy(instanceId);\n\n// 销毁所有实例\nVodAiOutline.destroyAll();\n```\n\n#### 5. 完整示例\n\n参考 `packages/vod-ai-outline-demo/` 目录下的完整示例：\n\n```bash\n# 启动demo\ncd packages/vod-ai-outline-demo\nnpm start\n\n# 访问 http://localhost:8083 查看效果\n```\n\n---\n\n## 🔧 方式二：Vue 2.7 项目组件集成\n\n### 适用场景\n\n如果您的项目基于 Vue 2.7，可以通过手动集成的方式直接使用 VOD AI Outline 组件。\n\n### 集成步骤\n\n#### 1. 获取组件源码\n\n由于组件库暂未发布到 npm，您需要手动将组件集成到项目中：\n\n```bash\n# 克隆或下载本项目\ngit clone [项目地址]\n\n# 进入 UI 组件库目录\ncd packages/vod-ai-outline-ui\n```\n\n#### 2. 复制组件文件\n\n将以下必要文件复制到您的项目中：\n\n**方式A：复制源码文件**\n\n```\n您的项目/\n├── src/\n│   ├── components/\n│   │   └── vod-ai-outline/              # 创建组件目录\n│   │       ├── AIOutlinePanel.vue       # 主组件\n│   │       ├── Dialog.vue               # 弹窗组件\n│   │       ├── MindMap.vue              # 思维导图组件\n│   │       ├── MindMapDialog.vue        # 思维导图弹窗\n│   │       └── index.js                 # 组件导出文件\n│   └── utils/\n│       └── vod-ai-outline-logic.js      # 逻辑库文件\n```\n\n**方式B：使用构建产物**\n\n```bash\n# 构建组件库\ncd packages/vod-ai-outline-ui\nnpm run build:lib\n\n# 复制构建产物到您的项目\ncp dist/index.umd.js 您的项目/src/assets/js/\ncp dist/style.css 您的项目/src/assets/css/\n```\n\n#### 3. 安装依赖\n\n确保您的项目已安装必要依赖：\n\n```bash\nnpm install vue@^2.7.14 simple-mind-map@^0.14.0\n```\n\n#### 4. 集成逻辑库\n\n首先集成数据逻辑层：\n\n```bash\n# 复制逻辑库文件\ncp packages/vod-ai-outline-logic/dist/index.es.js 您的项目/src/utils/vod-ai-outline-logic.js\n```\n\n或者直接在项目中使用构建好的逻辑库：\n\n```javascript\n// 如果您使用的是模块化构建工具，可以直接引用\nimport * as VodAiOutlineLogic from './utils/vod-ai-outline-logic.js'\n```\n\n#### 5. 组件注册和使用\n\n**全局注册方式：**\n\n在您的 `main.js` 中：\n\n```javascript\nimport Vue from 'vue'\n// 引入组件\nimport AIOutlinePanel from './components/vod-ai-outline/AIOutlinePanel.vue'\nimport './components/vod-ai-outline/style.css' // 如果使用构建产物\n\n// 全局注册组件\nVue.component('AIOutlinePanel', AIOutlinePanel)\n\nnew Vue({\n  // ...your app config\n})\n```\n\n**局部引入方式：**\n\n在需要使用组件的页面中：\n\n```javascript\n// YourPage.vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"your-page\"\u003e\n    \u003cAIOutlinePanel \n      :outline-data=\"outlineData\"\n      :suggest-questions=\"suggestQuestions\"\n      :introduction=\"introduction\"\n      :video-title=\"videoTitle\"\n      :default-active-tab=\"'outline'\"\n      @time-click=\"handleTimeClick\"\n      @tab-change=\"handleTabChange\"\n      @segment-click=\"handleSegmentClick\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport AIOutlinePanel from '@/components/vod-ai-outline/AIOutlinePanel.vue'\nimport { createVideoService } from '@/utils/vod-ai-outline-logic.js'\n\nexport default {\n  name: 'YourPage',\n  components: {\n    AIOutlinePanel\n  },\n  data() {\n    return {\n      outlineData: [],\n      suggestQuestions: [],\n      introduction: '',\n      videoTitle: '',\n      videoService: null\n    }\n  },\n  async created() {\n    await this.initVideoService()\n  },\n  methods: {\n    async initVideoService() {\n      try {\n        // 初始化视频服务\n        this.videoService = createVideoService({\n          appId: 'your-app-id',\n          getSignature: this.createSignature\n        })\n        \n        // 加载视频数据\n        const videoData = await this.videoService.getVideoData('your-video-id', {\n          useCache: false,\n          questionsSize: 5\n        })\n        \n        this.outlineData = videoData.outline || []\n        this.suggestQuestions = videoData.suggestQuestions || []\n        this.introduction = videoData.introduction || ''\n        this.videoTitle = videoData.title || ''\n      } catch (error) {\n        console.error('初始化失败:', error)\n      }\n    },\n    \n    async createSignature(params) {\n      // 调用您的后端接口获取签名\n      const response = await fetch('/api/getSign', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ params })\n      })\n      const result = await response.json()\n      return result.data.signature\n    },\n    \n    handleTimeClick(time) {\n      console.log('点击时间:', time)\n      // 实现视频跳转逻辑\n      // this.player.seekTo(this.timeStringToSeconds(time))\n    },\n    \n    handleTabChange(tab) {\n      console.log('切换标签:', tab)\n    },\n    \n    handleSegmentClick(segment) {\n      console.log('点击片段:', segment)\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### 6. 样式配置\n\n如果您复制了源码文件，样式已包含在 Vue 组件中。如果使用构建产物，需要引入样式文件：\n\n```javascript\n// 在 main.js 或组件中引入\nimport './assets/css/vod-ai-outline-style.css'\n```\n\n或在 HTML 中引入：\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./assets/css/vod-ai-outline-style.css\"\u003e\n```\n\n### 组件API说明\n\n#### AIOutlinePanel 组件属性\n\n| 属性名 | 类型 | 必填 | 默认值 | 说明 |\n|--------|------|------|--------|------|\n| `outline-data` | Array | 否 | `[]` | 智能大纲数据数组 |\n| `suggest-questions` | Array | 否 | `[]` | AI推荐问题数组 |\n| `introduction` | String | 否 | `''` | 视频介绍文本 |\n| `video-title` | String | 否 | `''` | 视频标题 |\n| `default-active-tab` | String | 否 | `'outline'` | 默认激活标签：`'outline'` \\| `'qa'` |\n\n#### 组件事件\n\n| 事件名 | 参数 | 说明 |\n|--------|------|------|\n| `time-click` | `time: string` | 用户点击时间点时触发，用于视频跳转 |\n| `tab-change` | `tab: string` | 切换标签时触发 |\n| `segment-click` | `segment: object` | 点击大纲片段时触发 |\n\n### 完整集成示例\n\n参考 `packages/vod-ai-outline-ui/src/App.vue` 文件，查看完整的集成示例代码。\n\n### 注意事项\n\n1. **Vue版本要求**：确保使用 Vue 2.7.x 版本\n2. **依赖管理**：手动集成时需要确保所有依赖项正确安装\n3. **样式冲突**：如果您的项目有全局样式，可能需要调整组件样式以避免冲突\n4. **构建配置**：确保您的构建工具能正确处理 `.vue` 文件和相关依赖\n\n### 自定义样式\n\n组件使用了 CSS 变量和内联样式，您可以通过以下方式自定义样式：\n\n```css\n/* 在您的全局样式文件中覆盖 */\n.c-outline-panel {\n  /* 自定义面板背景色 */\n  --panel-bg: #your-color;\n  /* 自定义文字颜色 */\n  --text-color: #your-color;\n}\n```\n\n或者直接修改组件源码中的样式变量。\n\n### 故障排除\n\n1. **组件无法显示**：检查组件路径和导入语句是否正确\n2. **样式异常**：确认样式文件已正确引入\n3. **数据为空**：检查逻辑库集成和API配置是否正确\n4. **构建错误**：确认所有依赖已正确安装\n\n如需更多帮助，请参考 `packages/vod-ai-outline-demo/` 中的完整示例项目。\n\n## 🔐 签名验证\n\n### 重要说明\n\n⚠️ **生产环境必须使用服务端签名！** 前端签名仅用于开发测试。\n\n### 服务端签名实现\n\n```php\n\u003c?php\n// PHP示例\nfunction generateSignature($params, $appSecret) {\n    // 过滤空值并排序\n    $filteredParams = array_filter($params, function($value) {\n        return $value !== '' \u0026\u0026 $value !== null;\n    });\n    ksort($filteredParams);\n    \n    // 生成查询字符串\n    $queryString = '';\n    foreach ($filteredParams as $key =\u003e $value) {\n        $queryString .= $key . $value;\n    }\n    \n    // 追加密钥并生成MD5\n    $stringToSign = $queryString . $appSecret;\n    return strtoupper(md5($stringToSign));\n}\n\n// 接口示例\nif ($_SERVER['REQUEST_METHOD'] === 'POST') {\n    $input = json_decode(file_get_contents('php://input'), true);\n    $params = $input['params'];\n    $appSecret = 'your-app-secret'; // 从安全配置中获取\n    \n    $signature = generateSignature($params, $appSecret);\n    \n    echo json_encode([\n        'success' =\u003e true,\n        'data' =\u003e ['signature' =\u003e $signature]\n    ]);\n}\n?\u003e\n```\n\n### 前端调用示例\n\n```javascript\nasync function createSignature(params) {\n    try {\n        const response = await fetch('/api/getSign', {\n            method: 'POST',\n            headers: { 'Content-Type': 'application/json' },\n            body: JSON.stringify({ params })\n        });\n        \n        const result = await response.json();\n        \n        if (!result.success) {\n            throw new Error(result.message || '获取签名失败');\n        }\n        \n        return result.data.signature;\n    } catch (error) {\n        console.error('获取签名失败:', error);\n        throw error;\n    }\n}\n```\n\n---\n\n## 🎨 样式定制\n\n可以把项目拉下来，然后修改样式。\n\n## 🐛 常见问题\n\n### Q: 智能大纲无法显示？\n\nA: 请检查：\n\n1. 签名配置是否正确\n2. video ID 是否有效\n\n### Q: 如何实现视频跳转？\n\nA: 在 `onTimeClick` 回调中实现：\n\n```javascript\nonTimeClick: (time) =\u003e {\n    const seconds = timeStringToSeconds(time);\n    yourPlayer.seekTo(seconds);\n}\n```\n\n### Q: 如何获取appId和appSecret？\n\nA: 可以在保利威的后台获取appId和appSecret。\n\n---\n\n## 📞 技术支持\n\n如果在接入过程中遇到问题，请：\n\n1. 查看 `packages/vod-ai-outline-demo/` 中的完整示例\n2. 检查浏览器控制台的错误信息\n3. 参考本文档的常见问题部分\n4. 联系保利威技术支持团队\n\n---\n\n## 📄 更新日志\n\n### v1.1.0 (Latest)\n\n- ✨ 支持异步数据加载和轮询状态管理\n- ✨ 新增独立的错误处理和重试机制\n- ✨ 支持 loading 和 error 状态的独立显示\n- 🐛 修复多个 API 并发调用的状态管理问题\n- 🔧 优化渲染逻辑，提升用户体验\n- ✨ AIOutlinePanel 结构优化\n\n### v1.0.0\n\n- 初始版本发布\n- 支持智能大纲和AI问答功能\n- 提供Vue组件和纯JS两种接入方式\n- 支持思维导图展示\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolyv%2Fpolyv-web-vod-outline-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolyv%2Fpolyv-web-vod-outline-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolyv%2Fpolyv-web-vod-outline-demo/lists"}