跳到主要内容

· 阅读需 1 分钟

更新了以下开放组件

  • 素材选择器
  • 素材上传器
  • 素材组选择器

优化了文档结构，增加配置文件夹，管理所有配置页。 更新了开放组件的配置参数。

· 阅读需 1 分钟

新增字段控制 tabs 显示隐藏​

001

数据结构​

enum ShowTabsValue {
  Value0 = 'groups',
  Value1 = 'materials',
}

interface SelectorUI {
  // 该字段控制tabs显示隐藏，数组长度为1时则隐藏，其它显示。
  showTabs: (typeof ShowTabsValue)[keyof typeof ShowTabsValue][];
}

例子​

iframe.contentWindow?.postMessage(
  {
    type: 'tezign-selector-ui',
    data: { showTabs: ['materials', 'groups'] },
  },
  '*',
);

关于该字段的其它说明：

  • 默认不传显示，相当于['groups','materials']
  • 数组顺序不影响 tabs 顺序，统一素材在前，素材组在后
  • 该字段控制 tabs 显示隐藏，数组长度为 1 时则隐藏。

· 阅读需 2 分钟

新增配置项默认打开组​

001

数据结构​

interface SelectorUI {
  // 首次进入默认打开素材或素材组，默认素材
  defaultActiveTab: 'group';
}

例子​

iframe.contentWindow?.postMessage(
  {
    type: 'tezign-selector-ui',
    data: { defaultActiveTab: 'group' },
  },
  '*',
);

是否可选择素材组​

!(002)[https://static-common.tezign.com/static/tu2v6dusqu1700121156135.png]

支持将素材组内的素材全部添加到列表中。查询组内数量上限为 1000

interface Config {
  // 页面传递或接收的数据标识（postMessage形式）
  type: 'tezign-material-selector';
  // 需要传递的配置数据
  data: {
    // 是否可选择组
    groupSelectable: boolean;
  };
}

关于选组添加的校验限制说明：

  • 如果限制总数量或大小，未满足的情况下，整组素材将不被选择
  • 如果限制了具体格式数量或大小，只要存在未满足的情况下，整组素材将不被选择

· 阅读需 3 分钟
77

新增底部提示栏​

selector-bottom-alert

数据结构​

interface SelectorUI {
  '#alert'?: {
    message: string; // 提示文案
  };
}

interface SelectorUICmd {
  type: 'tezign-selector-ui';
  data: SelectorUI;
}

例子​

iframe.contentWindow?.postMessage(
  {
    type: 'tezign-selector-ui',
    data: { '#alert': { message: '这是底部提示信息' } },
  },
  '*',
);

新增底部操作组件​

selector-components

数据结构​

组件为完全受控组件，目前提供的组件类型有

enum ECompType {
  Checkbox = 'checkbox',
}

interface IMetaCompCheckbox {
  type: ECompType.Checkbox;
  props: {
    id: string; // 用于在响应事件的时候回传识别
    disabled?: boolean;
    checked: boolean;
    text: string;
  };
}

type IMetaComp = IMetaCompCheckbox;

interface SelectorUI {
  '#action'?: IMetaComp[];
}

// ---- 组件事件
interface ComponentEvent {
  type: 'tezign-selector-comp-event';
  data: {
    type: ECompType;
    id: string;
    value: unknown; // 根据组件类型而定
  };
}

例子​

// 配置checkbox到底部操作栏
iframe.contentWindow?.postMessage(
  {
    type: 'tezign-selector-ui',
    data: {
      '#action': [
        {
          type: ECompType.Checkbox,
          props: {
            checked: false,
            id: 'checkbox_1',
            text: '发文件链接',
          },
        },
      ],
    },
  },
  '*',
);

// ---- 响应组件事件
window.addEventListener(
  'message',
  (event) => {
    if (event?.data?.type === 'tezign-selector-comp-event') {
      const { type, id, value } = event?.data?.data || {};
      if (type === ECompType.Checkbox && id === 'checkbox_1') {
        // ... do something
        // for example, use 'tezign-selector-ui' command to toggle checked state
        console.log(value);
      }
      return;
    }
  },
  false,
);

确认按钮文案可配置​

数据结构​

interface SelectorUI {
  confirmBtn?: {
    text: string; // 确认按钮文案
  };
}

interface SelectorUICmd {
  type: 'tezign-selector-ui';
  data: SelectorUI;
}

例子​

iframe.contentWindow?.postMessage(
  {
    type: 'tezign-selector-ui',
    data: { confirmBtn: { text: '确认按钮文案' } },
  },
  '*',
);

新增数据保护​

新增数据保护，点击确定后，会进行鉴权，权限不足会有 modal 提示。过滤点击确认之后返回的数据字段，比如查看权限不会有下载链接。可以申请的权限有：

  • 查看（默认值）
  • 下载

数据结构​

enum EAuthCode {
  VIEW = 'searchOriginalAuth',
  DOWNLOAD = 'downloadOriginalAuth',
}

interface ApplyAuthCmd {
  type: 'tezign-selector-auth';
  data: { auth: EAuthCode };
}

例子​

iframe.contentWindow?.postMessage(
  {
    type: 'tezign-selector-auth',
    data: { auth: EAuthCode.DOWNLOAD },
  },
  '*',
);

新增“选择更新”事件​

触发时机是用户选择素材更新的时候。

数据结构​

interface SelectionChangeEvent {
  type: 'tezign-selector-selection-change';
  data: ConfirmData; // 同tezgin-selector-confirm-btn的数据结构（只看权限）
}

新增素材大小限制​

config 新增 sizeLimit 可选字段，控制选择的素材大小，单位是 byte。

例子​

iframe.contentWindow.postMessage(
  {
    type: 'tezign-material-selector',
    data: {
      config: [
        { id: 'image', limit: 5 },
        { id: 'audio', limit: 9, sizeLimit: 10 * Math.pow(1024, 2) },
      ],
      filterCode: 'open-component-search-003',
      formatLimit: 5,
      sizeLimit: 10 * Math.pow(1024, 2), // 只能选择<=10MB素材
    },
  },
  '*',
);

· 阅读需 1 分钟
77

右上角“X”按钮可配置为隐藏​

数据结构​

interface SelectorUI {
  hideCancel?: boolean;
}

interface SelectorUICmd {
  type: 'tezign-selector-ui';
  data: SelectorUI;
}

例子​

iframe.contentWindow?.postMessage({
  type: 'tezign-selector-ui',
  data: { hideCancel: true },
});

移除了底部的“取消按钮”​