# # 自定义签名 UI

## # 概述

从 11.0.0 版本开始，Foxit PDF SDK for Web 提供了一套完整的签名 UI 自定义接口。通过实现 `IViewerUI` 以及相关接口，开发者可以轻松自定义签名、验签以及签名属性展示等功能界面。这些接口由 Foxit PDF SDK for Web 内部调用，开发者只需按照接口规范实现相应的功能即可。

## # 核心接口说明

### # IViewerUI.getSignatureUI()

#### # 功能描述

- 获取数字签名 UI 管理实例，用于访问签名相关对话框接口
- 该接口由 Foxit PDF SDK for Web 内部调用，开发者只需实现该方法并返回 `ISignatureUI` 实例

#### # 方法定义

    getSignatureUI(): Promise<ISignatureUI>;

### # ISignatureUI

#### # 功能描述

- 签名功能 UI 总控接口，适用于 11.0.0 及更高版本
- 该接口提供了三个核心对话框的访问入口
- 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

#### # 方法列表

方法 | 返回值类型 | 说明
--- | --- | ---
getSignDocumentDialog() | `Promise<ISignDocDialog>` | 返回文档签名对话框实例
getSignVerifiedResultDialog() | `Promise<ISignVerifiedResultDialog>` | 返回验签结果对话框实例
getSignedPropertiesDialog() | `Promise<ISignedSignaturePropertiesDialog>` | 返回签名属性对话框实例

## # 对话框接口详解

### # 文档签名(ISignDocDialog)

#### # 功能描述

- 该对话框用于处理文档签名
- 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

#### # 方法说明

    interface ISignDocDialog {
        // 打开签名对话框
        openWith(
            signature: Widget,
            okCallback: (data: SignDocInfo) => Promise<void> | void,
            cancelCallback?: () => Promise<void> | void
        ): Promise<void>;

        // 检查对话框是否已打开
        isOpened(): boolean;

        // 获取当前签名组件
        getCurrentSignature(): Widget | undefined;

        // 隐藏对话框
        hide(): void;

        // 释放资源
        destroy(): void;
    }

#### # 示例

    class CustomSignDocDialog implements ISignDocDialog {
        private isDialogOpen = false;
        private currentSignature: Widget | undefined;

        async openWith(
            signature: Widget,
            okCallback: (data: SignDocInfo) => Promise<void> | void,
            cancelCallback?: () => Promise<void> | void
        ) {
            this.isDialogOpen = true;
            this.currentSignature = signature;

            // 实现自定义对话框逻辑
            showCustomSignDialog(signature, okCallback, cancelCallback);
        }

        isOpened(): boolean {
            return this.isDialogOpen;
        }

        getCurrentSignature() {
            return this.currentSignature;
        }

        hide() {
            this.isDialogOpen = false;
            hideCustomSignDialog();
        }

        destroy() {
            this.hide();
            cleanupResources();
        }
    }

### # 验签结果(ISignVerifiedResultDialog)

#### # 功能描述

- 该对话框用于展示签名验证结果
- 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

#### # 方法说明

    interface ISignVerifiedResultDialog {
        // 显示验签结果
        openWith(signature: ISignatureField): Promise<void>;

        // 检查对话框是否已打开
        isOpened(): boolean;

        // 获取当前签名字段
        getCurrentSignature(): ISignatureField | undefined;

        // 隐藏对话框
        hide(): void;

        // 释放资源
        destroy(): void;
    }

#### # 示例

    class CustomVerifyDialog implements ISignVerifiedResultDialog {
        private isDialogOpen = false;
        private currentSignature: ISignatureField | undefined;

        async openWith(signature: ISignatureField) {
            this.isDialogOpen = true;
            this.currentSignature = signature;

            // 实现自定义验签结果展示逻辑
            showCustomVerifyResult(signature);
        }

        isOpened(): boolean {
            return this.isDialogOpen;
        }

        getCurrentSignature() {
            return this.currentSignature;
        }

        hide() {
            this.isDialogOpen = false;
            hideCustomVerifyResult();
        }

        destroy() {
            this.hide();
            cleanupResources();
        }
    }

### # 签名属性 (ISignedSignaturePropertiesDialog)

#### # 功能描述

- 该对话框用于展示已签名的字段属性
- 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

#### # 方法说明

    interface ISignedSignaturePropertiesDialog {
        // 打开签名属性对话框
        openWith(signature: ISignatureField): Promise<void>;

        // 检查对话框是否已打开
        isOpened(): boolean;

        // 隐藏对话框
        hide(): void;

        // 释放资源
        destroy(): void;
    }

#### # 示例

    class CustomPropertiesDialog implements ISignedSignaturePropertiesDialog {
        private isDialogOpen = false;

        async openWith(signature: ISignatureField) {
            this.isDialogOpen = true;

            // 实现自定义签名属性展示逻辑
            showCustomSignatureProperties(signature);
        }

        isOpened(): boolean {
            return this.isDialogOpen;
        }

        hide() {
            this.isDialogOpen = false;
            hideCustomSignatureProperties();
        }

        destroy() {
            this.hide();
            cleanupResources();
        }
    }

## # 集成示例

    class CustomSignatureUI implements ISignatureUI {
        async getSignDocumentDialog() {
            return new CustomSignDocDialog();
        }

        async getSignVerifiedResultDialog() {
            return new CustomVerifyDialog();
        }

        async getSignedPropertiesDialog() {
            return new CustomPropertiesDialog();
        }
    }

    class CustomViewerUI extends PDFViewCtrl.IViewerUI {
        async getSignatureUI() {
            return new CustomSignatureUI();
        }
    }

    // 初始化时注入自定义 UI
    new PDFViewer({
        viewerUI: new CustomViewerUI(),
        // 其他配置...
    });

## # 注意事项

1. 接口实现规范

   - 必须严格按照接口定义实现所有方法
   - 确保返回值的类型与接口定义一致

2. 资源管理

   - 在 `destroy()` 方法中释放所有相关资源
   - 避免内存泄漏

3. 异步处理

   - 所有异步方法需正确处理 Promise
   - 确保在操作完成后再 resolve Promise

4. 兼容性

   - 确保实现的功能与 Foxit PDF SDK for Web 默认行为一致
   - 避免破坏现有签名流程

通过以上接口实现，开发者可以完全自定义签名相关的 UI 界面，同时确保与 Foxit PDF SDK for Web 的无缝集成。