后端前端企业应用MCP 服务【免费下载链接】ever-gauzyEver® Gauzy™ - Open Business Management Platform (ERP/CRM/HRM/ATS/PM) - https://gauzy.co项目地址https://gitcode.com/GitHub_Trending/ev/ever-gauzy点击查看免费下载gauzy/plugin-videos-ui是 Ever® Gauzy™ 开源业务管理平台ERP/CRM/HRM/ATS/PM中负责视频内容管理与展示的 Angular UI 插件。它把视频的上传、流式播放、元数据维护、批量下载、系统级分享等能力封装成可独立构建、测试与发布的 Nx 库并深度集成 Gauzy 生态的契约模型gauzy/contracts、UI 内核gauzy/ui-core与 Nebular 组件体系。阅读本文后你将掌握该插件的安装接入方式、Nx 构建/测试/发布流程以及其背后的 Akita 状态管理、ngneat/effects副作用、下载队列状态机与 Web Share API 等源码级实现原理。插件定位与核心能力根据 videos-ui/README.md该库由 Nx 生成是一个面向 Gauzy 生态的UI 插件职责聚焦于“管理并展示视频”为视频相关功能提供无缝集成——包括嵌入embed、流式传输stream与组织管理organize。官方 README 明确了三大特性视频上传与管理Video Upload Management便捷地上传和管理视频内容Angular Nebular 集成基于 Angular 与 Nebular UI 组件构建多语言支持Multi-language Support完全兼容ngx-translate/core可接入项目现有的国际化翻译体系。从 package.json 的description与keywordsgauzy、video-management、video-ui、nebular、ui-plugin、media可以确认该插件的定位是 Gauzy 生态中的媒体管理 UI 组件库而非独立的视频业务后端。其运行时依赖包括nebular/theme、ng-select/ng-select、ngx-translate/core、ngneat/effects-ng、ngx-permissions、rxjs等并声明angular/common与angular/core版本 21.0.7为 peerDependencies。快速上手安装与接入官方 README 提供了两种安装方式npm与yarn二选一npm install gauzy/plugin-videos-ui # 或使用 Yarn yarn add gauzy/plugin-videos-ui注意package.json 中该包被标记为private: true这意味着它主要面向仓库内部monorepo消费发布到 npm 前需由发布流程显式处理。仓库环境要求node 22、yarn 1.22安装前应确认本地工具链满足该约束。在 Angular 应用中接入模块插件对外导出两个入口见 index.tsVideoUiModule与VideoAvailabilityResolver。VideoUiModule的声明方式如下节选自 video-ui.module.tsNgModule({ declarations: [VideoListComponent, VideoItemComponent, VideoPlayerComponent, /* ... */], imports: [ CommonModule, NbCardModule, NbIconModule, NoDataMessageModule, SharedModule, VideoUiRoutingModule, GauzyFiltersModule, NbButtonModule, NbPopoverModule, FormsModule, ReactiveFormsModule, NbDialogModule, NbInputModule, NbBadgeModule, NbProgressBarModule, NbListModule, MomentModule, TranslateModule.forChild(), NbSpinnerModule, NbTabsetModule, NgOptimizedImage ], providers: [ provideEffects(VideoEffects, CamshotEffects, SoundshotEffects), VideoQuery, VideoStore, VideoService, WebShareService, DownloadQueueService, FileDownloadService, FileSaveStrategy, NbInfiniteListDirective ] }) export class VideoUiModule {}从 imports 可以看出模块集成了 Nebular 的卡片、图标、按钮、弹出层、对话框、输入框、徽章、进度条、列表、Tabs、Spinner 与无限滚动指令并搭配ngx-translate/core的TranslateModule.forChild()实现多语言GauzyFiltersModule与SharedModule来自gauzy/ui-core/shared使视频列表可以复用 Gauzy 全局的日期/员工筛选器。模块还通过provideEffects()注册了VideoEffects、CamshotEffects、SoundshotEffects三组副作用与活动截屏 camshot、声音片段 soundshot 相关联。路由接入VideoUiRoutingModule 定义了两条懒加载友好的子路由path: 视频列表页VideoPageComponent启用日期、员工选择器project、team 关闭日期选择器锁定为单日且禁用未来日期并解析datesDateRangePickerResolver与bookmarkParamsBookmarkQueryParamsResolverpath: :id视频详情页VideoDetailPageComponent关闭全部顶部选择器开启路由复用reuseRoute: true。集成方只需在应用路由中以loadChildren方式懒加载该模块模块源码注释明确指出其设计为懒加载场景见下文“最佳实践”即可获得完整的两级视频页面。构建、单元测试与发布官方 README 给出了三条核心命令# 构建库 yarn nx build plugin-videos-ui # 运行单元测试 yarn nx test plugin-videos-ui # 发布 # 先构建再进入 dist 产物目录执行 npm publish cd dist/packages/plugins/videos-ui npm publish在源码层面project.json 揭示了更多细节build目标使用nx/angular:ng-packagr-lite执行器产物输出到dist/packages/plugins/videos-ui并声明implicitDependencies: [contracts, ui-config, ui-core]——即构建前会自动先构建这三个依赖库提供production与development两个配置分别对应tsconfig.lib.prod.json与tsconfig.lib.json默认配置为developmenttest目标使用nx/jest:jest读取 jest.config.ts 与tsconfig.spec.json在jest-preset-angular环境下执行lint目标使用nx/eslint:lint。此外package.json 中的scripts还提供了便捷的开发命令yarn lib:build # yarn nx build plugin-videos-ui --configurationdevelopment yarn lib:build:prod # yarn nx build plugin-videos-ui --configurationproduction yarn lib:watch # yarn nx build plugin-videos-ui --watch --configurationdevelopment其中lib:watch适用于插件开发阶段的热迭代修改源码后自动增量构建配合宿主应用即可即时预览效果。源码架构深度解析数据模型IVideo契约IVideo 是插件的核心数据契约继承IBasePerTenantAndOrganizationEntityModel即所有记录都绑定租户与组织维度字段可分为四组分组字段说明核心属性title、file、recordedAt、duration、size、fullUrl标题、文件引用、录制时间、时长秒、字节大小、完整访问 URL存储与描述storageProvider、description存储提供方FileStorageProvider枚举、描述文本元数据resolution如1920x1080/1080p、codec、frameRate分辨率、编码格式、帧率关联引用timeSlot/timeSlotId、uploadedBy/uploadedById关联时间片ITimeSlot与上传者IEmployee其中timeSlot关联揭示了该插件在 Gauzy 中的典型业务场景Gauzy 的桌面端活动追踪会按时间片time slot采集员工活动本插件可将每个时间片关联的屏幕录制视频回传展示——这与仓库中desktop-activity、camshot截屏等模块相互呼应。服务层REST API 调用链VideoService 是插件与后端交互的唯一入口端点前缀为${API_PREFIX}/plugins/videosAPI_PREFIX来自gauzy/ui-core/common提供五个方法getAll(params)→GET /api/plugins/videos返回IPaginationIVideo分页结构getOne(id, params)→GET /api/plugins/videos/{id}update(id, video)→PUT /api/plugins/videos/{id}接受PartialIVideodelete(id)→DELETE /api/plugins/videos/{id}getCount(params)→GET /api/plugins/videos/count返回记录总数。其中isAvailable$是一个“视频可用性”检查基于Store中的selectedOrganization.id/organizationId与tenantId若组织或租户缺失则直接返回false否则调用getCount判断是否存在视频并捕获异常回退为false。该观察量被 VideoAvailabilityResolver 包装为 Angular 路由守卫式解析器ResolveFnObservableboolean用于在进入视频页面之前判断当前组织是否已开通/使用视频功能。状态管理Akita Store ngneat/effects插件采用“Akita 状态容器 ngneat/effects 副作用”的组合VideoStore 继承 Akita 的StoreIVideoState状态结构为{ videos: IVideo[]; video: IVideo | null; count: number }初始值为空数组、null与0VideoActions 用createAction定义了 8 个动作fetchVideos、fetchVideosAndExclude、fetchOneVideo、updateVideo、deleteVideo、shareVideos、addToQueue、removeFromQueue、retryDownloadVideoEffects 通过ofType(...)监听上述动作并编排异步逻辑fetchVideos$与fetchVideosAndExclude$均先setLoading(true)请求成功后用Map以id去重合并列表并更新count失败时交给ErrorHandlingServicefinalize中确保setLoading(false)updateVideo$/deleteVideo$成功后通过ToastrService弹出PLUGIN.VIDEO.UPDATE_SUCCESSFULLY/DELETE_SUCCESSFULLY提示shareVideos$、addToQueue$、removeFromQueue$、retryDownload$则分别委托给分享与下载队列服务。这套设计使组件层如video-list、video-item、video-detail-page只负责 dispatch 动作与订阅 Query 选择器网络请求与状态变更全部收敛到副作用层符合 Nx 插件库的模块化边界要求。下载队列状态机与并发控制DownloadQueueService 是插件内最具工程细节的模块实现了一个带状态机的批量下载队列并发上限MAX_CONCURRENT_DOWNLOADS 3process()每次从 PENDING 项中取最多(3 - 正在下载数)条开始下载去重入队add(urls)会过滤掉已存在于队列的 URL全部重复时返回false状态流转start()订阅FileDownloadService.execute(options)按next/complete/error分别写入DOWNLOADING携带{percentage, loaded, total}进度、COMPLETED、FAILED状态状态机工厂目录download/states/下按PENDING / DOWNLOADING / COMPLETED / FAILED另有CANCELLED枚举见 video-download.model.ts拆分状态处理类由DownloadStateFactory.getState(status)统一获取操作能力remove(url)先取消下载、从队列移除并清理状态后重新触发process()retry(url)则直接重新start()。队列以BehaviorSubject驱动queue$与downloadStatus$任一状态变化都会触发对应状态处理器配合IFileSaveStrategysave(blob, filename)由 file-save.strategy.ts 实现完成文件落盘支撑“批量下载视频到本地”的场景。系统分享Web Share API 与降级策略WebShareService 封装了浏览器原生 Web Share API构造时即探测支持性share in navigator结果存入shareStatus$观察量share(data)支持title / text / url / fileUrls其中fileUrls会先经urlToFile()以responseType: blob拉取远程视频转为File对象文件名由 URL pathname 提取再通过navigator.share(sharePayload)发起原生分享降级策略若浏览器不支持 Web Share API则回退到剪贴板——将title/text/url拼接写入navigator.clipboard并提示PLUGIN.VIDEO.COPIED_SUCCESSFULLY错误分类按AbortError用户取消、DataError数据非法、NotAllowedError权限拒绝分别给出不同的 toastr 文案。界面组件清单从 video-ui.module.ts 的declarations可梳理出完整组件树页面层有VideoPageComponent、VideoDetailPageComponent列表层有VideoListComponent、VideoItemComponent、骨架屏组件VideoItemSkeletonComponent、VideoSkeletonComponent播放与编辑层有VideoPlayerComponent、VideoEditComponent、VideoMetadataComponent动作层有ActionButtonComponent/ActionButtonGroupComponent操作按钮组下载层有VideoDownloadManagerComponent另有CamshotListComponent、CamshotViewerComponent、SoundshotListComponent、SoundshotPlayerComponent及对应骨架屏覆盖截屏与声音片段的列表/查看/播放。所有列表类组件均含.spec.ts测试文件如 video-list.component.spec.ts、video.component.spec.ts 等配合 video-ui.module.effects-manager.spec.ts 对模块副作用装配进行专项验证。最佳实践与注意事项video-ui.module.ts 的 providers 注释记录了一次真实事故与修复经验值得插件使用者关注切勿在特性模块内调用provideEffectsManager()。ngneat/effects-ng官方要求initEffects()必须在根级调用——它创建 effects 管理器并订阅全局actions流应用根模块apps/gauzy/src/app/bootstrap.module.ts已提供该管理器而本模块通过loadChildren懒加载由apps/gauzy/src/app/.../employees/activity/activity.module.ts引用若在此重复提供管理器会在首次导航到视频路由时于同一数据流上立起第二个管理器、同步重入并占满主线程——由于问题发生在任何 HTTP 请求之前所有单元测试都会通过、路由却在浏览器中无法访问。因此特性模块只应通过provideEffects()贡献自己的 effects管理器是根模块的职责同一缺陷也在gauzy/plugin-docs-ui中修复见docs-ui.module.effects-manager.spec.ts。集成该插件时请确保宿主应用根模块已正确初始化 effects 管理器。小结gauzy/plugin-videos-ui虽是一个 UI 插件但其内部已具备完整的分层契约模型IVideo→ 服务层VideoService→ 状态层Akita Store/Query ngneat/effects副作用→ 界面层列表/详情/播放/编辑/下载管理器→ 基础设施下载队列状态机、Web Share 分享服务、路由解析器。通过本文提供的安装命令、Nx 构建/测试/发布流程与源码路径你可以直接复用该插件为 Gauzy 应用接入视频管理与播放能力也可以参考其下载队列、副作用装配与懒加载最佳实践为自己的 Angular 特性模块建立同等级的工程质量基线。赞分享后端前端企业应用MCP 服务【免费下载链接】ever-gauzyEver® Gauzy™ - Open Business Management Platform (ERP/CRM/HRM/ATS/PM) - https://gauzy.co项目地址https://gitcode.com/GitHub_Trending/ev/ever-gauzy点击查看免费下载相关推荐Ever Gauzy AI 集成 UI 插件gauzy/plugin-integration-ai-ui开发实践与源码解析Ever Gauzy AI 集成 UI 插件gauzy/plugin integration ai ui开发实践与源码解析 Ever® Gauzy™ 的后端前端企业应用MCP 服务Ever Gauzy 插件化 UI 开发指南基于 gauzy/plugin-ui 构建可插拔前端模块Ever Gauzy 插件化 UI 开发指南基于 gauzy/plugin ui 构建可插拔前端模块 gauzy/plugin ui 是 Ever Gau后端前端企业应用MCP 服务在 Ever Gauzy 中集成 Activepiecesgauzy/plugin-integration-activepieces-ui 插件深度解析在 Ever Gauzy 中集成 Activepiecesgauzy/plugin integration activepieces ui 插件深度解析 导后端前端企业应用MCP 服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考