@cbd-wujie-components/user-tower v1.0.5-beta.0

@cbd-wujie-components/user-tower

安装

npm install --save @cbd-wujie-components/user-tower

yarn install --save @cbd-wujie-components/user-tower

pnpm install @cbd-wujie-components/user-tower

使用

import React from 'react'
import { UserTower } from 'cbd-wujie-components'
const App = () => {
  
  const configAdd = {
    authId: '1828168xxxx',
    env: 'DEV',
    type: 'add',
    maId: 'maId',
    close: (res: UserTowerRes) => {
      console.log(res)
    },
  } as UserTowerConfig
  
  return (
    <div>
      <UserTower config={configAdd} />
    </div>
  )
}
export default App

组件 props

export interface UserTowerProps {
  config: UserTowerConfig
  hooks?: {
    beforeLoad?: () => void
    beforeMount?: () => void
    afterMount?: () => void
    beforeUnmount?: () => void
    afterUnmount?: () => void
  }
}

props config

export interface UserTowerConfig {
  authId: string | number
  env: 'DEV' | 'PROD'
  type: 'add' | 'edit' | 'view' | 'select'
  startTime: string // e.g. 2023-04-27T07:32:39.000+00:00
  endTime: string // e.g. 2023-07-27T07:32:39.000+00:00
  crowdId: string | number
  maId: string | number
  close: (res: UserTowerRes) => void
}

props config 中的 close 方法返回值

export interface UserTowerRes {
  status: 'complete' | 'interrupt'
  type: 'add' | 'edit' | 'view' | 'select'
  msg?: string
  data: {
    crowd?: Array<{
      id: string | number
      num: number
      name: string
    }>
    maId: string | number
    num?: number
    name?: string
    brandId?: number
  } | null
}

• 在选择时，勾选人群后，点击人群选择按钮 UserTowerRes 的返回值

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    maId,
    crowd: [{
      id: 'xxxx',
      num: '0000',
      name: 'xxx人群'
    }]
  },
  type: 'add'
}

• 在选择时，點擊關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'select'
}

• 在創建时，關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'add'
}

• 在創建时，點擊保存按钮

  人群创建和编辑的保存皆为伪保存，需要在画布保存时调用Api userTowerSaveFT 来保存并获取出参

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    num: 1,
    name: 'xxx',
    maId: 'xxx',
  },
  type: 'add'
}

• 在导入人群时，點擊關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'add'
}

• 在导入人群时，保存上传导入的人群包

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    name: 'xxx',
    maId: 'xxx',
  },
  type: 'add'
}

• 在编辑时，點擊取消或關閉按鈕

const res = {
  status: 'interrupt',
  data: null,
  type: 'edit'
}

• 在编辑时，保存人群

  人群创建和编辑的保存皆为伪保存，需要在画布保存时调用Api userTowerSaveFT 来保存并获取出参

const res = {
  status: 'complete',
  data: {
    brandId: 123,
    num: 1,
    name: 'xxx',
    maId: 'xxx',
  },
  type: 'edit'
}

组件 Api

userTowerSaveFT

在画布保存时调用, 对编辑或创建的人群进行保存

Tips:

• 它的调用同样必须在打开过组件页面后才生效，因为需要获取到人群管理后台登录 token，才能调用接口
• 它会根据 maId 和 ComponentId找到对应缓存数据，根据type进行编辑提交或创建提交

declare interface UTSaveOptionsItem {
  maId: string | number;
  ComponentId: string | number;
}
declare type UTSaveOptions = Array<UTSaveOptionsItem>;

declare function userTowerSaveFT(
  options: UTSaveOptions,
  type: "add" | "edit",
  env: 'dev' | 'prod'): Promise<UserTowerSaveRes>

export interface UserTowerSaveRes {
 status: 'complete' | 'interrupt'
 type: 'add' | 'edit'
 msg?: string
 data: [{
   crowd: [{
     // 人群id 
     id: string | number
     // 人群数量 
     num?: string | number
     // 人群名称 
     name: string
   }]
   // 画布 id
   maId: string | number
   // 组件 id
   ComponentId: string | number
   // 品牌id
   brandId: number | string,
 }] | null
}

destroyUserTower

销毁组件子应用实例，销毁时会清空所有事件订阅监听

declare function destroyUserTower(
  appId: string
): void

参数示例

选择人群

const configSelect = {
  authId: '18281xxxxx',
  env: 'DEV',
  type: 'select',
  maId: 'maId',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

查看人群

const configView = {
  authId: '1828168xxxx',
  env: 'DEV',
  type: 'view',
  maId: 'maId',
  crowdId: '5',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

创建人群

const configAdd = {
  authId: '1828168xxxx',
  env: 'DEV',
  type: 'add',
  maId: 'maId',
  ComponentId: 'ComponentId',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

创建人群保存

import { userTowerSaveFT } from '@cbd-wujie-components/user-tower'
const handleSave = async() => {
const res = await userTowerSaveFT('maId', 'ComponentId', 'add', 'dev')
console.log(res)
}

编辑人群

const configEdit = {
  authId: '1828168xxx',
  env: 'DEV',
  type: 'edit',
  maId: 'maId',
  startTime: '2023-09-20T07:32:39.000+00:00',
  endTime: '2023-09-27T07:32:39.000+00:00',
  ComponentId: 'ComponentId',
  crowdId: '5',
  close: (res: UserTowerRes) => {
    console.log(res)
  },
} as UserTowerConfig

编辑人群保存

import { userTowerSaveFT } from '@cbd-wujie-components/user-tower'
const handleSave = async() => {
const res = await userTowerSaveFT('maId', 'ComponentId', 'edit', 'dev')
  console.log(res)
}

销毁组件子应用

import { destroyUserTower } from '@cbd-wujie-components/user-tower'
const destroy = () => {
  destroyUserTower(`__CBD_WJ_USER_TOWER_${ComponentId}`)
}

❗❗❗ Tips

• 暴露的方法 userTowerSaveFT 需要子应用的token，因此调用前必须打开过组件页面
• 由于 user-tower 接口请求频次限制，不可以使用同一个 authId 同时打开两个 user-tower
• 导入人群创建成功之后没有人群数量，只有人群id 正常创建成功后有人群id和人群数量
• user-tower 组件基于 是基于 wujie 的微前端封装，如果无法访问，这与网站访问安全策略有关，需要找誉博一同解决