react-pp-bundle

PPBundle

基于 Shopify Polaris 的 React 组件库扩展包

安装

npm i react-pp-bundle@latest -S

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

使用手册

PBProvide 组件

PBProvide 是一个全局 Provider 组件，主要用于提供国际化功能。

使用方法

import { PBProvide } from 'ppbundle'

function App() {
  return (
    <PBProvide 
      language="zh-CN"  // 设置语言
    >
      {/* 你的应用内容 */}
    </PBProvide>
  )
}

参数说明

参数	类型	必填	说明
language	string	是	设置语言，支持 'zh-CN'、'en-US' 等
children	ReactNode	是	子组件

PBPage 组件

PBPage 是一个用于展示和管理套餐订阅的页面组件，支持多个应用（Tracking/Returns）的套餐管理，包含价格周期切换、套餐选择等功能。

使用方法

import { PBPage } from 'ppbundle'

function SubscriptionPage() {
  const [period, setPeriod] = useState(1); // 1: 月付, 2: 年付
  const [data, setData] = useState<PkgListData | null>(null);
  
  const handleAction = (action: PBPageAction, actionData: ActionData) => {
    // 处理用户操作，如订阅、升级等
  }

  return (
    <PBPage
      data={data}
      setData={setData}
      period={period}
      setPeriod={setPeriod}
      app={APPEnum.Tracking}
      onAction={handleAction}
    />
  )
}

参数说明

参数	类型	必填	说明
data	PkgListData | null	是	套餐数据
setData	(data: PkgListData) => void	是	更新套餐数据的方法
period	number	是	付费周期（1: 月付, 2: 年付）
setPeriod	(period: number) => void	是	更新付费周期的方法
app	APPEnum	是	应用类型（Tracking/Returns）
onAction	(action: PBPageAction, data: ActionData) => void	是	用户操作回调函数
loading	boolean	否	加载状态
btnLoading	boolean	否	按钮加载状态
btnDisabled	boolean	否	按钮禁用状态
isStandardWidth	boolean	否	是否使用标准宽度，默认 true
perferKind	PackageKindEnum	否	默认套餐类型
perferPlanId	number	否	默认套餐 ID

类型定义

enum APPEnum {
  Tracking = 1,
  Returns = 2
}

enum PackageKindEnum {
  Essential = 1,
  Professional = 2,
  Enterprise = 3
}

interface ActionData {
  pbData: any;
  period: number;
  data: PkgListData;
  plans: Array<{
    app_id: APPEnum;
    plan_id: number;
  }>;
}

PBToggle 组件

PBToggle 是一个自定义的切换组件，支持多个选项的切换，并提供了两种预设样式。

基础用法

import { PBToggle } from 'ppbundle'

function Demo() {
  const [value, setValue] = useState('option1')
  
  const options = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
  ]

  return (
    <PBToggle
      options={options}
      value={value}
      onChange={setValue}
    />
  )
}

使用预设样式

PPBundle 提供了两种预设样式的 Toggle 组件：

import { PBAppToggle, PBPeriodToggle } from 'ppbundle'

// 蓝色主题的 Toggle
function AppDemo() {
  return <PBAppToggle {...props} />
}

// 绿色主题的 Toggle
function PeriodDemo() {
  return <PBPeriodToggle {...props} />
}

参数说明

参数	类型	必填	说明
options	Array<{value: any, label: string}>	是	选项配置数组
value	any	是	当前选中的值
onChange	(value: any) => void	是	值变化时的回调函数
className	string	否	自定义类名

自定义样式

可以使用 withCustomColorsToggle 高阶组件创建自定义样式的 Toggle：

import { withCustomColorsToggle } from 'ppbundle'

const MyCustomToggle = withCustomColorsToggle({
  '--pb-toggle-text-color-active': '#FFFFFF',
  '--pb-toggle-box-bg': 'linear-gradient(...)',
  '--pb-toggle-bg-active': 'linear-gradient(...)',
})

getDevToken 方法

getDevToken 是一个用于获取开发环境认证 token 的工具方法。

使用方法

import { getDevToken } from 'ppbundle'

async function example() {
  const tokenParams = {
    // 填写必要参数
  }
  
  try {
    const token = await getDevToken(tokenParams)
    // 使用获取到的 token
  } catch (error) {
    // 处理错误
  }
}

参数说明

参数	类型	必填	说明
data	Omit<TokenParams, "pwd">	是	Token 请求参数，不需要包含 pwd 字段

返回值

返回一个 Promise，解析为带有 "Bearer " 前缀的 token 字符串。

注意事项

1. PBProvide 组件应该放在应用的最外层，以确保所有子组件都能访问到国际化功能。
2. PBToggle 组件的 value 值应该与 options 中的 value 值对应。
3. getDevToken 方法仅用于开发环境，不要在生产环境中使用。