### 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 (
);
}
const weakMap = new WeakMap();
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(
,
);
}
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
素材上传父页面
```
--------------------------------
### 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 [
{
key: 'portal-detail-operation-more',
title: '自定义操作',
icon: '',
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 [
>{
title: 'Demo1 menu',
to: '/dam_enterprise/plugin/demo1',
icon: '',
},
];
}
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: '',
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
```
```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 (
Hello world
);
}
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(
,
);
}
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)
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
```
--------------------------------
### 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;
/** 重新选择文案 */
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)
```
--------------------------------
### 调用埋点上报方法
Source: https://open.tezign.com/docs/frontend/tezign-external-track/weapp/track
使用初始化后的 tezignSdk 实例调用 track 方法进行数据上报。
```javascript
tezignSdk.track(trackData: ITrack)
```
--------------------------------
### Define Entry Plugin
Source: https://open.tezign.com/docs/frontend/dam-plugin/getting-started
Implement the entry plugin to register custom routes within the DAM application.
```javascript
function entry_plugin(app) {
console.log('...', arguments);
app.addRoute({
to: '/dam_enterprise/plugin/demo1', // 增加的路由，必须是/dam_enterprise/plugin/为前缀
plugin: () => import('./component_plugin'), // 这个路由加载的插件
});
}
// entry是function plugin，因此以default export导出函数。
export default entry_plugin;
```