水印组件

IMKit 支持为页面设置自定义水印组件，帮助提升内容安全性和品牌识别度。

您可以通过配置水印组件，在指定页面展示自定义水印。目前仅支持在合并转发页面（CombinePage）生效。

功能概述

• 支持自定义水印组件的 UI 和参数。
• 可灵活指定水印生效的页面类型。
• 通过配置接口一键生效。

设置水印组件配置

通过 setWatermarkComponentConfig 方法设置水印组件配置。SDK 会根据配置决定哪些页面展示水印。

主要接口与类型说明

TypeScript

/**
 * 设置水印组件的自定义配置
 * @param componentConfig 组件配置，详见 WatermarkComponentConfig。page 不能为空。
 * @since 1.7.0
 */
setWatermarkComponentConfig(componentConfig: WatermarkComponentConfig): void;

/**
 * 水印组件配置对象
 * @since 1.7.0
 */
export interface WatermarkComponentConfig extends BaseComponentConfig<[WatermarkComponentData]> {
  /**
   * 设置水印生效的页面，详见 WatermarkPageIdentifier。
   */
  page: WatermarkPageIdentifier[];
}

/**
 * 水印自定义组件数据，封装必要参数透传给自定义组件
 * @since 1.7.0
 */
export class WatermarkComponentData {
  /**
   * 上下文对象
   */
  context: Context | undefined;
  /**
   * 会话标识，可能为 undefined
   */
  convId: ConversationIdentifier | undefined;
}

/**
 * 支持展示水印的页面类型
 * @since 1.7.0
 */
export enum WatermarkPageIdentifier {
  /**
   * 合并转发页面
   */
  CombinePage = 1,
}

参数说明

参数名	类型	说明
identifier	ComponentIdentifier	组件标识
component	WrappedBuilder<[WatermarkComponentData]>	组件 UI
page	WatermarkPageIdentifier[]	水印生效页面

警告

如未指定 page 参数或参数为空，配置将设置失败。

WatermarkComponentData 字段说明

字段名	类型	说明
context	Context | undefined	上下文对象
convId	ConversationIdentifier | undefined	会话标识

示例代码

以下示例展示如何自定义水印组件并应用到合并转发页面：

TypeScript

import {
  WatermarkComponentData,
  ConversationIdentifier,
  WatermarkComponentConfig,
  ComponentIdentifier,
  WatermarkPageIdentifier,
  RongIM
} from '@rongcloud/imkit';

// 构建自定义水印组件
@Builder
export function buildCustomWatermarkComponent(data: WatermarkComponentData) {
  // 传递 context 和 convId 给自定义组件
  CustomWatermarkComponent({ context: data.context, convId: data.convId });
}

// 定义自定义水印组件结构
@Component
export struct CustomWatermarkComponent {
  @Prop context: Context;
  @Prop convId: ConversationIdentifier | undefined;
  @State textArray: Array<number> = new Array(50).fill(0).map((_: number, index) => index + 1);

  build() {
    Flex({ wrap: FlexWrap.Wrap }) {
      ForEach(this.textArray, (_item: number, index: number) => {
        Text("默认水印文本")
          .fontSize(14)
          .fontColor("#999999")
          .opacity(0.15)
          .rotate({ angle: -15 })
          .margin({ 
            top: 40,
            bottom: 40,
            left: 20 + (index % 4 === 0 ? 0 : 40),
            right: 20
          })
      }, (item: number) => item.toString())
    }.size({ width: '100%', height: '100%' }).backgroundColor(Color.Transparent)
  }
}

// 配置水印组件
let WatermarkComponent: WatermarkComponentConfig = {
  identifier: ComponentIdentifier.WatermarkComponent,
  component: wrapBuilder(buildCustomWatermarkComponent),
  page: [WatermarkPageIdentifier.CombinePage]
}

// 应用水印组件配置
RongIM.getInstance().conversationService().setWatermarkComponentConfig(WatermarkComponent);