Tezign Open Platform

https://open.tezign.com/docs/
Admin
Tezign Open Platform allows developers to easily and efficiently build applications using pluggable...
Tokens:35,558
Snippets:255
Trust Score:8.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Run the development environment to build and test the plugin.

```bash
npm run dev  
```

--------------------------------

### Initialize tezignSdk

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/init

Import the SDK and call the init method with the required parameters to start tracking.

```javascript
import tezignSdk from '@tezignlab/tezign-external-track/miniprogram_dist';  
// 初始化  
tezignSdk.init(initParams);  
```

--------------------------------

### Install DAM Plugin Uploader

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Install the global CLI tool required to upload plugin packages to the Tezign platform.

```bash
npm install --global @tezignlab/dam-plugin-uploader@latest
```

--------------------------------

### Install @tezignlab/tezign-external-track

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/install

Use a package manager to add the dependency to your project.

```shell
// npm  
npm install @tezignlab/tezign-external-track  
// yarn  
yarn add @tezignlab/tezign-external-track  
// pnpm  
pnpm install @tezignlab/tezign-external-track
```

--------------------------------

### Import and Install Plugins via npm

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/plugins/import

Import specific plugins from the SDK and register them using the use method before initialization.

```javascript
// 引入插件  
import tezignSdk, { pageViewPlugin， persistLocalStoragePlugin } from '@tezignlab/tezign-external-track/miniprogram_dist'  
  
tezignSdk.use(pageViewPlugin(pvPluginsOptions), persistLocalStoragePlugin(persistLocalStoragePluginOptions)])
```

--------------------------------

### Plugin Implementation Files

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/portal-header-action-right

Example implementation of the plugin using a TypeScript entry point and a React application component.

```typescript
import { render } from './App';  
  
const cssString = '';  
const useShadowDom = true;  
  
export { cssString, render, useShadowDom };  
```

```typescript
import React from 'react';  
import ReactDOM from 'react-dom/client';  
  
function App(props: any) {  
  return (  
    <button  
      onClick={() => {  
        console.log('clicked');  
      }}  
    >  
      Button  
    </button>  
  );  
}  
  
const weakMap = new WeakMap<HTMLElement | ShadowRoot, ReactDOM.Root>();  
  
function render(root: HTMLElement | ShadowRoot, props?: any) {  
  console.log('...', arguments);  
  
  let reactDOMRoot = weakMap.get(root);  
  if (!reactDOMRoot) {  
    reactDOMRoot = ReactDOM.createRoot(root);  
    weakMap.set(root, reactDOMRoot);  
  }  
  
  reactDOMRoot.render(  
    <React.StrictMode>  
      <App {...props} />  
    </React.StrictMode>,  
  );  
}  
  
export { render };  
export default App;  
```

--------------------------------

### Initialize Selector via postMessage

Source: https://open.tezign.com/docs/frontend/group-selector/config/base

Example of sending the configuration object to an iframe using the postMessage API.

```javascript
iframe.contentWindow.postMessage(  
  {  
    type: 'tezign-asset-group-selector-config',  
    data: {  
      title: '选择素材组',  
      rootSelectable: true,  
      showSearch: true,  
      showRecentlyAdded: true,  
      showEdit: false,  
      showTitle: true,  
      hideCancel: true,  
    },  
  },  
  '*',  
);
```

--------------------------------

### Listen for Page Ready Event

Source: https://open.tezign.com/docs/frontend/asset-selector/events/page-ready

Example implementation of a message listener in the parent window to detect when the iframe is ready.

```html
<!DOCTYPE html>  
<html lang="zh-CN">  
  <head>  
    <meta charset="UTF-8" />  
    <title>素材上传父页面</title>  
  </head>  
  <body>  
    <script>  
      const receiveMessage = (event) => {  
        const iframe = document.getElementById('iframe');  
        if (!iframe || event.source !== iframe.contentWindow) {  
          // 判断是否为当前 iframe 发出的消息  
          return;  
        }  
  
        if (event?.data?.type === 'tezign-selector-page-ready') {  
          // iframe 页面加载完成，可以传入配置参数  
          if (!iframe.contentWindow) {  
            return;  
          }  
          // 以下进行tezign-material-selector配置......  
        }  
      };  
      window.addEventListener('message', receiveMessage, false);  
    </script>  
    <iframe src=`{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey  
    加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_selector)}`  
    id="iframe" />  
  </body>  
</html>  
```

--------------------------------

### Implement Plugin Entry

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/entry

Example implementation of a plugin entry function that registers a new route using the PluginApp interface.

```typescript
function plugin(app: PluginApp) {  
  console.log('...', arguments);  
  
  app.addRoute({  
    to: '/dam_enterprise/plugin/demo1',  
    plugin: () => import('./menu_plugin'),  
  });  
}  
export default plugin;  
```

--------------------------------

### Implement Portal Detail Operation More Plugin

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/portal-detail-operation-more

Example implementation of a custom operation plugin that logs selected data when clicked.

```typescript
function plugin() {  
  console.log('...', arguments);  
  return <MenuItem[]>[  
    {  
      key: 'portal-detail-operation-more',  
      title: '自定义操作',  
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="m494.07 281.6l-25.18-78.08a11 11 0 0 0-.61-2.1l-50.5-156.94a20.08 20.08 0 0 0-19.17-13.82a19.77 19.77 0 0 0-18.95 13.94l-48.14 149.55h-152L131.34 44.59a19.76 19.76 0 0 0-18.86-13.94h-.11a20.15 20.15 0 0 0-19.12 14L42.7 201.73c0 .14-.11.26-.16.4l-25.63 79.48a29.15 29.15 0 0 0 10.44 32.46l221.44 162.41a11.25 11.25 0 0 0 13.38-.07l221.48-162.34a29.13 29.13 0 0 0 10.42-32.47m-331-64.51l61.73 191.76L76.63 217.09m209.64 191.8l59.19-183.84l2.55-8h86.52L300.47 390.44M398.8 59.31l43.37 134.83h-86.82M324.16 217l-43 133.58l-25.66 79.56L186.94 217M112.27 59.31l43.46 134.83H69M40.68 295.58a6.19 6.19 0 0 1-2.21-6.9l19-59l139.61 180.59m273.26-114.69L313.92 410.22l.52-.69L453.5 229.64l19 59a6.2 6.2 0 0 1-2.19 6.92"/></svg>',  
      onClick(data) {  
        console.log('data', data);  
      },  
    },  
  ];  
}  
export default plugin;
```

--------------------------------

### Implement Global Left Menu Plugin

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/global-left-menu

Example implementation of a plugin function that returns an array of menu items for the left navigation bar.

```typescript
function plugin() {  
  console.log('...', arguments);  
  return [  
    <MenuItem<'plugin/demo1'>>{  
      title: 'Demo1 menu',  
      to: '/dam_enterprise/plugin/demo1',  
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="m494.07 281.6l-25.18-78.08a11 11 0 0 0-.61-2.1l-50.5-156.94a20.08 20.08 0 0 0-19.17-13.82a19.77 19.77 0 0 0-18.95 13.94l-48.14 149.55h-152L131.34 44.59a19.76 19.76 0 0 0-18.86-13.94h-.11a20.15 20.15 0 0 0-19.12 14L42.7 201.73c0 .14-.11.26-.16.4l-25.63 79.48a29.15 29.15 0 0 0 10.44 32.46l221.44 162.41a11.25 11.25 0 0 0 13.38-.07l221.48-162.34a29.13 29.13 0 0 0 10.42-32.47m-331-64.51l61.73 191.76L76.63 217.09m209.64 191.8l59.19-183.84l2.55-8h86.52L300.47 390.44M398.8 59.31l43.37 134.83h-86.82M324.16 217l-43 133.58l-25.66 79.56L186.94 217M112.27 59.31l43.46 134.83H69M40.68 295.58a6.19 6.19 0 0 1-2.21-6.9l19-59l139.61 180.59m273.26-114.69L313.92 410.22l.52-.69L453.5 229.64l19 59a6.2 6.2 0 0 1-2.19 6.92"/></svg>',  
    },  
  ];  
}  
export default plugin;
```

--------------------------------

### Implement Custom Asset Operation Plugin

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/assets-library-assets-operation

Example implementation of a plugin function that returns a custom menu item for asset operations.

```javascript
function plugin() {  
  console.log('...', arguments);  
  return [  
    {  
      key: 'assets-library-assets-operation',  
      title: '自定义操作',  
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="m494.07 281.6l-25.18-78.08a11 11 0 0 0-.61-2.1l-50.5-156.94a20.08 20.08 0 0 0-19.17-13.82a19.77 19.77 0 0 0-18.95 13.94l-48.14 149.55h-152L131.34 44.59a19.76 19.76 0 0 0-18.86-13.94h-.11a20.15 20.15 0 0 0-19.12 14L42.7 201.73c0 .14-.11.26-.16.4l-25.63 79.48a29.15 29.15 0 0 0 10.44 32.46l221.44 162.41a11.25 11.25 0 0 0 13.38-.07l221.48-162.34a29.13 29.13 0 0 0 10.42-32.47m-331-64.51l61.73 191.76L76.63 217.09m209.64 191.8l59.19-183.84l2.55-8h86.52L300.47 390.44M398.8 59.31l43.37 134.83h-86.82M324.16 217l-43 133.58l-25.66 79.56L186.94 217M112.27 59.31l43.46 134.83H69M40.68 295.58a6.19 6.19 0 0 1-2.21-6.9l19-59l139.61 180.59m273.26-114.69L313.92 410.22l.52-.69L453.5 229.64l19 59a6.2 6.2 0 0 1-2.19 6.92"/></svg>',  
      onClick(data) {  
        console.log('data', data);  
      },  
    },  
  ];  
}  
export default plugin;  
```

--------------------------------

### tezignSdk.init(params: IInitParams)

Source: https://open.tezign.com/docs/frontend/tezign-external-track/params/init

Initializes the SDK with the required configuration parameters.

```APIDOC
## tezignSdk.init(params: IInitParams)

### Description
Initializes the Tezign SDK. This method must be called with the required configuration object to authenticate and set up the tracking environment.

### Parameters
- **tenant_id** (string) - Required - The tenant ID provided by the Tezign contact.
- **client_id** (string) - Required - The application ID issued by Tezign.
- **token** (string) - Required - The access token obtained from the authentication service.
- **http.api** (string) - Required - The URL for tracking log uploads.

### Request Example
```javascript
tezignSdk.init({
  tenant_id: "your_tenant_id",
  client_id: "your_client_id",
  token: "your_access_token",
  http: {
    api: "https://api.example.com/track"
  }
});
```
```

--------------------------------

### Initialize SDK via NPM

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/init

Import the SDK package and call the init method with the configuration object.

```javascript
import tezignSdk from '@tezignlab/tezign-external-track'  
  
// 初始化  
tezignSdk.init(initParams: InitConfig)  
```

--------------------------------

### Initialize DAM Plugin Project

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Use the scaffold tool to create a new React component plugin project.

```bash
npm create @tezignlab/dam-plugin@latest -- -t react-component ./my-plugin  
cd ./my-plugin  
npm install  
```

--------------------------------

### Build Plugin Project

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Execute the build command to generate the plugin production files.

```bash
npm run build  
```

--------------------------------

### Implement Plugin Entry Point

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/portal-header-action-left

Exports the render function, CSS string, and shadow DOM configuration for the plugin.

```typescript
import { render } from './App';  
  
const cssString = '';  
const useShadowDom = true;  
  
export { cssString, render, useShadowDom };  
```

--------------------------------

### Initialize SDK in Browser

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/init

Access the SDK via the global window object when using the browser-based distribution.

```javascript
window.tezignExternalTrack.init(initParams: InitConfig)  
```

--------------------------------

### 通过 CDN 集成 SDK

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/getting-started

通过 script 标签引入 SDK，并使用 window 对象下的全局变量进行初始化和埋点上报。

```html
<script src="https://static.tezign.com/tezign-external-track/{版本号}/tezignExternalTrack.browser.min.js"></script>  
```

```javascript
// 在项目的js中使用  
window.tezignExternalTrack.init({  
  tenant_id,  
  client_id,  
  token,  
  http: {  
    api,  
  },  
});  
  
//埋点上报  
window.tezignExternalTrack.track({  
  /** 事件类型code */  
  event_type_code,  
  /** 事件属性 */  
  event_properties,  
});  
```

--------------------------------

### 通过 npm 集成 SDK

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/getting-started

使用 npm 安装并初始化 SDK，通过 init 方法配置参数，使用 track 方法进行埋点上报。

```javascript
import tezignSdk from '@tezignlab/tezign-external-track';  
  
// 初始化  
tezignSdk.init({  
  /** tezign open-api授权token */  
  token,  
  /** 租户id */  
  tenant_id,  
  /** 应用id */  
  client_id,  
  http: {  
    /** 埋点请求url */  
    api,  
  },  
});  
  
//埋点上报  
tezignSdk.track({  
  /** 事件类型code */  
  event_type_code,  
  /** 事件属性 */  
  event_properties,  
});  
```

--------------------------------

### Implement React Component

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Create the main application component and the render function for the plugin.

```javascript
import React from 'react';  
import ReactDOM from 'react-dom/client';  
import $styles from './App.module.css';  
  
// 实际渲染的组件  
function App(props) {  
  return (  
    <div className={$styles.app}>  
      <h1>Hello world</h1>  
      <button  
        className={$styles.button}  
        onClick={() => {  
          alert('Hello World!');  
        }}  
      >  
        Button  
      </button>  
    </div>  
  );  
}  
  
const weakMap = new WeakMap();  
  
function render(root, props = {}) {  
  console.log('...', arguments);  
  
  let reactDOMRoot = weakMap.get(root);  
  // 避免重复创建  
  if (!reactDOMRoot) {  
    reactDOMRoot = ReactDOM.createRoot(root);  
    weakMap.set(root, reactDOMRoot);  
  }  
  
  reactDOMRoot.render(  
    <React.StrictMode>  
      <App {...props} />  
    </React.StrictMode>,  
  );  
}  
  
export { render };  
```

--------------------------------

### Configure Vite for Plugin

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Set up the Vite configuration to bundle the plugin as a library with the required entry points.

```javascript
import { defineConfig } from 'vite';  
import react from '@vitejs/plugin-react';  
import cssString from '@tezignlab/vite-plugin-css-string';  
  
export default defineConfig(({ command }) => {  
  return {  
    plugins: [react(), cssString()],  
    define: {  
      // Vite在library模式下，不会define process.env.NODE_ENV。  
      // 不加这个会导致依赖这个变量的包运行时找不到process变量报错，比如react。  
      'process.env': {  
        NODE_ENV: command === 'build' ? 'production' : 'development',  
      },  
    },  
    build: {  
      cssCodeSplit: false,  
      rollupOptions: {  
        output: {  
          entryFileNames: '[name].[hash].js',  
        },  
      },  
      lib: {  
        // 我们的三个插件的入口文件  
        entry: {  
          // 添加路由的入口文件  
          entry_plugin: 'src/entry_plugin.js',  
          // 添加菜单的入口文件  
          menu_plugin: 'src/menu_plugin.js',  
          // 路由渲染的组件的入口文件  
          component_plugin: 'src/component_plugin.js',  
        },  
        formats: ['es'],  
      },  
    },  
  };  
});  
```

--------------------------------

### Function: entry(app: PluginApp)

Source: https://open.tezign.com/docs/frontend/dam-plugin/slots/entry

The entry point for a plugin, which receives a PluginApp instance to register custom routes.

```APIDOC
## Function: entry(app: PluginApp)

### Description
Initializes the plugin by providing access to the PluginApp interface for registering custom routes.

### Parameters
- **app** (PluginApp) - Required - The application instance providing methods to extend DAM functionality.

### PluginApp.addRoute(config: RouteConfig<any>)
Registers a new route for the plugin.

#### Parameters
- **config** (RouteConfig) - Required - The configuration object for the route, which can be either an IframeType or ComponentType.

### Example
```typescript
function plugin(app: PluginApp) {  
  app.addRoute({  
    to: '/dam_enterprise/plugin/demo1',  
    plugin: () => import('./menu_plugin'),  
  });  
}  
export default plugin;
```
```

--------------------------------

### Initialize the persist-localstorage-plugin

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/plugins/persist-localstorage-plugin

Register the plugin with the Tezign SDK instance to enable localStorage persistence for batch tracking.

```javascript
import tezignSdk from '@tezignlab/tezign-external-track';  
import persistLocalStoragePlugin from '@tezignlab/tezign-external-track/dist/esm/plugins/persist-localstorage';  
  
tezignSdk.use(persistLocalStoragePlugin());
```

--------------------------------

### Include SDK via Browser Script Tag

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/install

Load the SDK directly in the browser by replacing {版本号} with the desired version.

```html
<script src="https://static.tezign.com/tezign-external-track/{版本号}/tezignExternalTrack.browser.min.js"></script>
```

--------------------------------

### Upload Plugin Package

Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started

Use the uploader tool to push a plugin build to the server, specifying the configuration file, plugin name, version tag, and distribution directory.

```bash
# --config是上传工具需要的配置文件  
# --name是插件名称  
# --tag是插件版本  
# dist是要上传的文件夹  
dam-plugin-uploader --config ./cli.config.json --name my-plugin --tag 0.0.1 ./dist  
# or  
dpu --config ./cli.config.json --name my-plugin --tag 0.0.1 ./dist
```

--------------------------------

### Configure Vite Plugin for CSS

Source: https://open.tezign.com/docs/frontend/dam-plugin/plugin-types/component-plugin

Setting up the @tezignlab/vite-plugin-css-string plugin in the Vite configuration file.

```typescript
import { defineConfig } from 'vite';  
import cssString from '@tezignlab/vite-plugin-css-string';  
  
export default defineConfig({  
  plugins: [cssString()],  
});  

```

--------------------------------

### 配置并使用 PV 埋点插件

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/plugins/pageview-plugin

通过 tezignSdk.use 注册插件，并根据需求配置 PageViewConfig 以监控不同的路由变化事件。

```typescript
import tezignSdk, { pageViewPlugin } from '@tezignlab/tezign-external-track/miniprogram_dist';  
  
tezignSdk.use(pageViewPlugin(config: PageViewConfig))  
  
interface PageViewConfig {  
  /**  
   * monitor hash change event  
   * @default false  
   */  
  monitorHash?: boolean;  
  /**  
   * monitor history.pushState  
   * @default true  
   */  
  monitorPush?: boolean;  
  /**  
   * monitor browser page forward or back  
   * @default true  
   */  
  monitorPop?: boolean;  
  /**  
   * monitor history.replace  
   * @default true  
   */  
  monitorReplace?: boolean;  
}  
```

--------------------------------

### Define InitConfig Interface

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/init

The configuration interface defines the required parameters for SDK initialization, including tenant, token, client IDs, and HTTP/sender settings.

```typescript
// init方法入参  
interface InitConfig {  
  // 用户id，用于用户行为分析  
  // 非必填，  
  // 可以通过update方法更新，👇  
  user_id?: string;  
  // 前置获得的租户id  
  tenant_id: string;  
  // 前置获得的open-api鉴权token (access_token)  
  token: string;  
  // 前置获得的应用id  
  client_id: string;  
  // 埋点请求配置  
  http: {  
    // 请求发起方式，默认fetch  
    sendType?: 'XHR' | 'fetch';  
    // 请求url，需约定告知  
    api: string;  
    // 请求header设置  
    header?: {  
      [key: string]: string;  
    };  
    // 不发送真实请求，只在 console 打印  
    debugHttp?: boolean; // default: false  
  };  
  // 发送设置  
  sender?: {  
    // 是否启用批量发送  
    enableBatchSend?: boolean; // default: false  
    // 批量发送间隔时间  
    interval?: number; // default: 6_000 (6s)  
    // 批量发送的最大事件个数  
    maxQueueSize?: number; // default: 6  
  };  
  // 在 console 打印 sdk 的内部 log，debug用  
  log?: boolean; // default: false;  
  
  // 用来加载 sdk script，默认使用 tezign 提供的script地址(cdn)  
  /**  
   * 仅 web (npm) 试用  
   */  
  scriptUrl?: string; // default: undefined;  
}  
```

--------------------------------

### Configure Asset Uploader

Source: https://open.tezign.com/docs/frontend/asset-uploader/config/base

Initializes or updates the asset uploader configuration by sending a postMessage to the iframe window.

```APIDOC
## postMessage Configuration

### Description
Sends a configuration object to the asset uploader iframe to define upload constraints, storage behavior, and tagging options.

### Parameters
- **type** (string) - Required - Must be 'tezign-asset-uploader-config'.
- **data** (object) - Required - Configuration object containing:
  - **id** (string) - Optional - Unique identifier.
  - **accept** (string) - Optional - Allowed file types (e.g., '.png,.jpg').
  - **maximum** (number) - Optional - Maximum number of files allowed for upload.
  - **maximumTip** (string) - Optional - Custom message for file limit warnings.
  - **saveUrl** (string) - Optional - API endpoint for saving files.
  - **tagging** (boolean) - Optional - Whether to trigger the tagging modal.
  - **templateCode** (string) - Optional - Tagging template code.
  - **targetGroupIdList** (number[]) - Optional - List of target group IDs.
  - **cusMetaData** (any) - Optional - Custom metadata.
  - **keepStructure** (boolean) - Optional - Whether to preserve folder structure.
  - **checkRepeatedMaterials** (boolean) - Optional - Whether to perform duplicate detection.

### Request Example
```javascript
iframe.contentWindow.postMessage({
  type: 'tezign-asset-uploader-config',
  data: {
    accept: '',
    maximum: 10,
    maximumTip: ''
  }
}, '*');
```
```

--------------------------------

### ready

Source: https://open.tezign.com/docs/frontend/dam-plugin/misc/communication

Sent by the iframe plugin to the host application to signal that the plugin is loaded and ready to receive props.

```APIDOC
## Event: ready

### Description
Notifies the host application that the iframe plugin has finished loading. Upon receiving this, the host will send the initial props to the plugin.

### Data Structure
```typescript
interface EventReady {
  event: 'ready';
}
```
```

--------------------------------

### tezignSdk.use

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/plugins/custom-plugin

Registers one or more custom plugins to the Tezign SDK instance.

```APIDOC
## tezignSdk.use(pluginConfig)

### Description
Registers custom plugins to the Tezign SDK. Plugins can hook into various lifecycle events such as initialization, data sending, and destruction.

### Parameters
- **pluginConfig** (ITrackPluginConstructor | ITrackPluginConstructor[]) - Required - A single plugin constructor function or an array of plugin constructor functions.

### Plugin Structure
The plugin constructor receives `(plugin, client)` and must return an object with the following optional lifecycle hooks:
- **name** (string) - The name of the plugin.
- **init** (Function) - Called during plugin initialization.
- **beforePluginSend** (Function) - Called before the plugin sends data.
- **beforeSend** (Function) - Called before data is sent.
- **destroy** (Function) - Called when the plugin is destroyed.
- **onBeforeBatchSend** (Function) - Called before a batch of data is sent.
```

--------------------------------

### 初始化持续上报插件

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/plugins/persist-localstorage-plugin

在 SDK 初始化时通过 use 方法注册插件，确保未上报的事件能够被处理。

```javascript
import tezignSdk, {  
  persistLocalStoragePlugin,  
} from '@tezignlab/tezign-external-track/miniprogram_dist';  
  
tezignSdk.use(persistLocalStoragePlugin());  
```

--------------------------------

### 发送 ready 事件并监听 props

Source: https://open.tezign.com/docs/frontend/dam-plugin/misc/communication

在 iframe 加载完成后发送 ready 事件，并监听主应用返回的 props 事件。

```javascript
// 确保你的应用已经加载完成。  
// 比如在react里可以在`useEffect`里执行，  
// 在vue里可以在`onMounted`里执行。  
// 以及确认你的应用被嵌入在 iframe 中  
if (self !== parent) {  
  window.addEventListener('message', (e) => {  
    if (e.data.event === 'props') {  
      // ...  
    }  
  });  
  
  window.postMessage(  
    {  
      event: 'ready',  
    },  
    '*',  
  );  
}  

```

--------------------------------

### 定义初始化参数接口

Source: https://open.tezign.com/docs/frontend/tezign-external-track/params/init

定义了用于 tezignSdk.init 方法的 IInitParams 接口结构。

```typescript
interface IInitParams {  
    tenant_id: string; //租户 ID  
    client_id: string; //应用ID  
    token: string; // 访问令牌  
    http: {  
        api: string // 埋点请求url  
    }  
}  
tezignSdk.init(params: IInitParams)  
```

--------------------------------

### Java AES 加密工具类

Source: https://open.tezign.com/docs/frontend/common/authorize

提供用于生成 SSO 认证加密字符串的 Java 工具类，使用 AES/CBC/PKCS5Padding 算法。

```java
import com.alibaba.fastjson.JSONObject;
import org.apache.commons.codec.binary.Base64;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import java.util.Date;
import java.util.logging.Level;
import java.util.logging.Logger;

/**
 * AES加密工具
 */
public class AESUtilV2 {
    private static final String KEY_ALGORITHM = "AES";
    // CBC mode
    private static final String ENCRYPT_MODE_CBC = "AES/CBC/PKCS5Padding";

    /**
     * AES 加密操作
     *
     * @param plainText 明文
     * @param key       密钥
     * @param iv        向量
     * @return 返回Base64转码后的加密数据
     */
    public static String encryptAndEncode(String plainText, String key, String iv) {
        try {
            byte[] bytePlainText = plainText.getBytes(StandardCharsets.UTF_8);
            byte[] byteKey = key.getBytes(StandardCharsets.UTF_8);
            byte[] byteIV = iv.getBytes(StandardCharsets.UTF_8);

            Cipher cipher = Cipher.getInstance(ENCRYPT_MODE_CBC);// 创建密码器
            IvParameterSpec ivParam = new IvParameterSpec(byteIV);
            SecretKeySpec secretKey = new SecretKeySpec(byteKey, KEY_ALGORITHM);
            cipher.init(Cipher.ENCRYPT_MODE, secretKey, ivParam);// 初始化为加密模式的密码器
            byte[] result = cipher.doFinal(bytePlainText);// 加密
            String encryptString = Base64.encodeBase64String(result);
            return encryptString;
        } catch (Exception ex) {
            Logger.getLogger(AESUtilV2.class.getName()).log(Level.SEVERE, null, ex);
        }

        return null;
    }

    /**
     * AES 解密操作
     *
     * @param ciphertext 密文
     * @param key        密钥
     * @param iv         向量
     * @return 明文
     */
    public static String decryptAndDecode(String ciphertext, String key, String iv) {
        try {
            ciphertext = URLDecoder.decode(ciphertext, StandardCharsets.UTF_8.name());
            byte[] byteKey = key.getBytes(StandardCharsets.UTF_8);
            byte[] byteIV = iv.getBytes(StandardCharsets.UTF_8);
            Cipher cipher = Cipher.getInstance(ENCRYPT_MODE_CBC);
            IvParameterSpec ivParam = new IvParameterSpec(byteIV);
            SecretKeySpec secretKey = new SecretKeySpec(byteKey, KEY_ALGORITHM);
            //使用密钥、向量进行初始化，设置为解密模式
            cipher.init(Cipher.DECRYPT_MODE, secretKey, ivParam);
            //执行操作
            byte[] result = cipher.doFinal(Base64.decodeBase64(ciphertext));
            return new String(result, StandardCharsets.UTF_8);
        } catch (Exception ex) {
            Logger.getLogger(AESUtilV2.class.getName()).log(Level.SEVERE, null, ex);
        }

        return null;
    }

    public static void main(String[] args) {
        JSONObject jo = new JSONObject();
        // 用户邮箱和手机号，二者必选其一
        jo.putIfAbsent("loginEmail", "wangfeng@tezign.com");
        jo.putIfAbsent("loginPhone", "15705273217");
        // 租户域名
        jo.putIfAbsent("domain", "vms-t13.tezign.com");
        // 加密时间，认证服务端会根据该时间戳进行失效校验
        jo.putIfAbsent("encryptTime", new Date());
        // 用户名，可选
        jo.putIfAbsent("username", "levi.wang");

        // 加密秘钥和偏移向量，由特赞对接人员提供
        String aesKey = "1234567890abcdef";
        String aesIv = "1234567890abcdef";

        String ss = jo.toString();
        String aa = encryptAndEncode(ss, aesKey, aesIv);
        System.out.println("加密======  " + aa);

        String bb = decryptAndDecode(aa, aesKey, aesIv);
        System.out.println("解密======  " + bb);
    }
}
```

--------------------------------

### tezignSdk.use

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/plugins/import

Registers one or more plugins with the Tezign SDK. This method must be invoked before the SDK initialization.

```APIDOC
## tezignSdk.use(plugin)

### Description
Registers plugins to the Tezign SDK instance. This method should be called after importing the SDK and plugins, but before calling the SDK's init method.

### Parameters
- **plugin** (Object) - Required - One or more plugin instances (e.g., pageViewPlugin, persistLocalStoragePlugin) initialized with their respective options.

### Usage Example
```javascript
import tezignSdk, { pageViewPlugin, persistLocalStoragePlugin } from '@tezignlab/tezign-external-track/miniprogram_dist';

tezignSdk.use(
  pageViewPlugin(pvPluginsOptions),
  persistLocalStoragePlugin(persistLocalStoragePluginOptions)
);
```
```

--------------------------------

### 定义 UI 配置数据结构

Source: https://open.tezign.com/docs/frontend/asset-uploader/config/ui

定义 UIConfig 接口以配置上传组件的 UI 属性，包括隐藏元素、上传方式及自定义文案。

```typescript
interface UIConfig {  
  type: 'tezign-asset-uploader-ui';  
  data: {  
    /** 隐藏右上角关闭按钮 */  
    hideCancel?: boolean;  
    /**  
     * 上传方式  
     * file: 上传文件  
     * folder: 上传文件夹  
     */  
    showList: ('file' | 'folder')[];  
    /** 是否显示状态栏 */  
    disableStatusbar?: boolean;  
    /** 是否显示完成页面 */  
    disableCompletedBar?: boolean;  
    /** 自定义上传弹窗类名 */  
    modalContainerClassName?: string;  
    /** 自定义上传弹窗样式 */  
    cusModalClassStyle?: Record<string, object>;  
    /** 重新选择文案 */  
    retryText?: string;  
    /** 直接入库按钮文案 */  
    directConfirmText?: string;  
    /** 底部提示文案 */  
    footTips?: string;  
    /** 确认按钮文案 */  
    confirmText?: string;  
  };  
}  
```

--------------------------------

### pageViewPlugin

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/plugins/pageview-plugin

初始化并配置页面浏览埋点插件，通过 tezignSdk.use 方法进行注册。

```APIDOC
## pageViewPlugin(config: PageViewConfig)

### Description
初始化页面浏览埋点插件，用于监控 SPA 应用的页面跳转并自动上报 PV。

### Parameters
#### PageViewConfig
- **monitorHash** (boolean) - Optional - 是否监控 hash 变化，默认为 false。若网页有锚点功能，不建议开启。
- **monitorPush** (boolean) - Optional - 是否监控 history.pushState，默认为 true。
- **monitorPop** (boolean) - Optional - 是否监控浏览器前进或后退（popstate），默认为 true。
- **monitorReplace** (boolean) - Optional - 是否监控 history.replaceState，默认为 true。

### Usage Example
```javascript
import tezignSdk, { pageViewPlugin } from '@tezignlab/tezign-external-track/miniprogram_dist';

tezignSdk.use(pageViewPlugin({
  monitorHash: false,
  monitorPush: true,
  monitorPop: true,
  monitorReplace: true
}));
```
```

--------------------------------

### 定义配置数据结构

Source: https://open.tezign.com/docs/frontend/asset-selector/config/base

定义了用于初始化素材选择器的Config接口，包含筛选、限制条件及素材类型配置。

```typescript
interface Config {  
  /** 页面传递或接收的数据标识（postMessage形式）*/  
  type: 'tezign-material-selector';  
  /** 需要传递的配置数据 */  
  data: {  
    /** 调用方标识，解决多个监听方冲突问题 */  
    id?: string;  
    /** 筛选项配置code,由特赞提供 */  
    filterCode: string;  
    /** 限制所选择的文件总数量（只有在不限制文件格式和格式数量时，此字段才生效）*/  
    formatLimit?: number;  
    /** 非必填。控制选择的素材大小，单位是byte（（只有在不限制文件格式和格式数量时，此字段才生效））*/  
    sizeLimit?: Byte;  
    /** 总文件的大小限制 */  
    totalSizeLimit?: number;  
    /** 对不同类型素材的定义 */  
    config: Array<{  
      /** 素材类型 */  
      id:  
        | 'image' // 图片  
        | 'audio' // 音频  
        | 'video' // 视频  
        | 'document' // 文档  
        | 'designSourceFile' // 设计源文件  
        | 'excel' // 表格  
        | 'font' // 字体文件  
        | 'zip' // 压缩包  
        | 'group' // 组合内容  
        | 'text' // 纯文本  
        | 'rtf' // 文章  
        | 'url'; // 网页内容  
      /** 限制格式数量(limit=0 代表不限制格式数量) */  
      limit: number;  
      /** 控制选择的素材大小，单位是byte */  
      sizeLimit?: Byte;  
    }>;  
    /** 唤起素材选择器时默认展示此素材组 */  
    groupId?: number;  
    /** 是否可选择素材组下的所有素材 */  
    groupSelectable?: boolean;  
    /** 搜索默认值，单个搜索传参字符串，搜索多个传参数组类型 */  
    searchDefaultValue?: string | string[];  
    /** 可选参数，配合filter参数使用，在设置了filter时，展示所有下拉项 */  
    showAllOptions?: boolean;  
    /** 筛选默认值 */  
    filter?: {  
      [code: string]: {  
        /** 筛选项的默认值  
         * JSON.stringify({value: Array; title: string})  
         */  
        defaultValue?: string;  
        /** 筛选项的下拉options, 设置showAllOptions: true 此参数会无效 */  
        configValueList?: (number | string)[];  
        /** once允许取消选中  always 不允许取消选中*/  
        fillEmptyByDefault?: 'once' | 'always';  
        props?: {  
          max?: number;  
          min?: number;  
        };  
      };  
    };  
    /**  
     * 记录场景（传入的场景值为字符串，由调用方自定义）  
     * 传入recordScene后，会记录用户所进入的素材组路径，以同样的场景值再次进入时，会查询用户记录的路径并跳转  
     */  
    recordScene?: string;  
  };  
}  
  
type Byte = number;
```

--------------------------------

### 定义 ready 事件数据类型

Source: https://open.tezign.com/docs/frontend/dam-plugin/misc/communication

定义 ready 事件的接口结构。

```typescript
interface EventReady {  
  event: 'ready';  
}  

```

--------------------------------

### 初始化点击埋点插件

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/plugins/click-plugin

通过 tezignSdk.use 注册插件并配置自定义属性名称，用于识别 DOM 上的埋点数据。

```typescript
import tezignSdk from '@tezignlab/tezign-external-track';  
import clickPlugin from '@tezignlab/tezign-external-track/dist/esm/plugins/click';  
  
interface ClickConfig {  
  /**无侵入点击事件的自定义属性*/  
  clickEventAttr: string;  
  /**无侵入点击事件的冒泡自定义属性*/  
  clickEventBubble: string;  
  clickEventCode: string;  
}  
tezignSdk.use(  
  clickPlugin({  
    /**无侵入点击事件的自定义属性*/  
    clickEventAttr: 'data-track-click',  
    /**无侵入点击事件的冒泡自定义属性*/  
    clickEventBubble: 'data-track-bubble',  
    clickEventCode: 'data-track-click-code',  
  }),  
);
```

--------------------------------

### 通过 npm 引入插件

Source: https://open.tezign.com/docs/frontend/tezign-external-track/web/plugins/import

支持 ESM 和 CJS 两种模块格式，需手动引入对应路径的插件文件。

```javascript
// 引入插件  
// esm  
import clickPlugin from '@tezignlab/tezign-external-track/dist/esm/plugins/click';  
import pageViewPlugin from '@tezignlab/tezign-external-track/dist/esm/plugins/page-view';  
import persistLocalStoragePlugin from '@tezignlab/tezign-external-track/dist/esm/plugins/persist-localstorage';  
  
// cjs  
import clickPlugin from '@tezignlab/tezign-external-track/dist/cjs/plugins/click';  
import pageViewPlugin from '@tezignlab/tezign-external-track/dist/cjs/plugins/page-view';  
import persistLocalStoragePlugin from '@tezignlab/tezign-external-track/dist/cjs/plugins/persist-localstorage';  
  
// 引入use方法  
import tezignSdk, { use } from '@tezignlab/tezign-external-track';  
  
tezignSdk.use([  
  clickPlugin(clickPluginsOptions),  
  pageViewPlugin(pvPluginsOptions),  
  persistLocalStoragePlugin(persistLocalStoragePluginOptions),  
]);
```

--------------------------------

### 更新初始化数据接口定义与调用

Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/update

定义了更新参数的接口结构，并展示了调用 tezignSdk.update 方法的语法。

```typescript
interface IUpdateParams {  
    // 在系统登录后更新user_id  
    user_id?: string;  
    tenant_id?: string;  
    token?: string;  
    client_id?: string;  
}  
  
tezignSdk.update: (data: IUpdateParams)  
```
Tokens:
Raw