pb-sxp-ui

Page Builder SXP UI

React enterprise-class UI components

📦 安装

npm install pb-sxp-ui
# or
yarn add pb-sxp-ui

🔨 使用

以 Next.js 框架为例子：

import { GetServerSideProps } from 'next';
import React, { FC } from 'react'
import Pagebuilder, { PageView } from 'pb-sxp-ui';

// 初始化 PageBuilder 配置
Pagebuilder.init({
  tenantId: 'xxxxxxxxxx',
  appId: 'xxxxxxxxx',
  env: 'live' // 可选参数，默认是 live 环境
});


interface IProps {
  path: string;
  data: any
}

const ContentPage: FC<IProps> = ({ data ,path}) => {
  return (
    <PageView data={data?.data} isSsr path={path}/>
  )
}

export const getServerSideProps: GetServerSideProps<IProps> = async (
  context
) => {
  // 接收传来的路径
  const path = context.query.path as string;
  // 获取页面数据
  const result = await Pagebuilder.getDetail(path)
  return {
    props: {
      path,
      data: result.data
    },
  };
};

export default ContentPage;

⌨️ 本地调试

运行开发环境

$ npm install
$ npm run start

生成本地开发全局链接

npm link
# or
yarn link

在使用该包的项目中安装调试

npm link pb-sxp-ui
# or
yarn link pb-sxp-ui

👾 发布

打包线上安装包

npm run package
# or
yarn package

发布 npm

$ npm version patch|minor|major
$ npm publish

# 自动化发布包
$ npm run pub patch|minor|major|xx.xx.xx