选择合适的包

Package Guide

我该安装哪个包？

按你当前要完成的任务选择即可。普通页面优先从 @mbjia/ui 开始；业务流程再接 @mbjia/components。

先看你属于哪种场景

我要做普通页面

只需要按钮、弹窗、输入框、分页、浮层等基础交互，不涉及素材、上传、权益、AI 等业务流程。

@mbjia/ui

我要接业务流程

页面要直接使用素材库、全局上传、AI 搜索、支付权益、视频拆条等模板加业务能力。

@mbjia/components

我要复用底层能力

不想直接用现成业务组件，而是自己组织接口、素材模型、上传 worker、环境配置或工具函数。

services / manager / hooks

包之间是什么关系

第 1 层：页面入口你实际开发的业务页面

业务页面活动页管理页

页面只关心“我要展示什么、用户点击后发生什么”。如果只是普通交互，通常只需要基础 UI；如果是素材、上传、权益等流程，再接业务组件。

第 2 层：可直接使用的组件大多数同学从这里开始

@mbjia/ui@mbjia/components

@mbjia/ui 提供按钮、弹窗、输入框等基础组件；@mbjia/components 提供素材管理、全局上传、AI 搜索、支付权益等业务组件。

第 3 层：业务支撑能力业务组件通常会用到

@mbjia/services@mbjia/manager@mbjia/upload-manager@mbjia/site-env

这一层负责接口、素材模型、上传 worker、环境域名等能力。普通页面一般不需要直接接触；做自定义素材源、上传流程或接口封装时才需要。

第 4 层：通用开发工具按需补充

@mbjia/hooks@mbjia/utils@mooliv/cli

Hooks 和工具函数可以在页面、组件、业务流程里复用；CLI 主要用于初始化内部项目模板。

判断原则： 基础 UI 可以单独用；业务组件通常不能脱离模板加业务体系单独运行。越往下层，越偏底层能力，普通页面越不需要直接安装。

快速选择表

你要做什么	推荐包	说明
使用按钮、弹窗、输入框、分页	@mbjia/ui	最轻量，适合普通 React 页面
使用素材管理、上传、AI 搜索、支付权益	@mbjia/components	需要模板加业务环境
使用 React Hooks	@mbjia/hooks	页面和组件内部复用
使用文件、媒体、URL、权限工具函数	@mbjia/utils	按需引入工具能力
调业务接口	@mbjia/services	需要理解统一响应结构
自定义素材管理数据源	@mbjia/manager	适合素材弹窗和素材源定制
接入全局上传或 Uppy worker	@mbjia/upload-manager	依赖 SharedWorker
读取环境、域名、主题	@mbjia/site-env	业务组件和服务调用常用
画布/视频编辑 SDK	@mbjia/ve-canvas-editor、@mbjia/ve-video-editor	编辑器相关业务
初始化项目模板	@mooliv/cli	内部脚手架