src/Dpz.Core.Web/wwwroot/scripts/modules/DialogDemo.ts 网站源码

Root / src / Dpz.Core.Web / wwwroot / scripts / modules / DialogDemo.ts

/**
 * Dialog 演示页面
 * 展示 UiFeedbackService 的各种功能
 */

import { uiFeedbackService, ToastType, ToastPosition } from './UiFeedbackService';

export class DialogDemo {
    private readonly dialog = uiFeedbackService;

    constructor() {
        this.init();
    }

    private init(): void {
        // 将所有测试函数暴露到全局，供 HTML 按钮调用
        (window as any).testAlert = this.testAlert.bind(this);
        (window as any).testConfirm = this.testConfirm.bind(this);
        (window as any).testPrompt = this.testPrompt.bind(this);
        (window as any).testToast = this.testToast.bind(this);
        (window as any).testToastPosition = this.testToastPosition.bind(this);
        (window as any).testNotification = this.testNotification.bind(this);
        (window as any).testProgressNotification = this.testProgressNotification.bind(this);
        (window as any).testMultiProgressNotification =
            this.testMultiProgressNotification.bind(this);
        (window as any).closeAllNotifications = this.closeAllNotifications.bind(this);
        (window as any).testAll = this.testAll.bind(this);

        console.log('DialogDemo 已初始化');
    }

    // Alert 测试
    private async testAlert(): Promise<void> {
        await this.dialog.alert('这是一个 Alert 提示框示例！', '提示');
        this.dialog.toast('Alert 已关闭', ToastType.Info);
    }

    // Confirm 测试
    private async testConfirm(): Promise<void> {
        const result = await this.dialog.confirm('您确定要执行这个操作吗？', '确认');
        if (result) {
            this.dialog.toast('您点击了确定', ToastType.Success);
        } else {
            this.dialog.toast('您点击了取消', ToastType.Info);
        }
    }

    // Prompt 测试
    private async testPrompt(): Promise<void> {
        const result = await this.dialog.prompt('请输入您的名字：', '输入', '阿胖');
        if (result !== null) {
            this.dialog.toast(`您输入的名字是：${result}`, ToastType.Success);
        } else {
            this.dialog.toast('您取消了输入', ToastType.Info);
        }
    }

    // Toast 类型测试
    private testToast(type: string): void {
        const messages: Record<string, string> = {
            info: '这是一个信息提示',
            success: '操作成功完成！',
            warning: '请注意这个警告信息',
            error: '发生了一个错误！',
        };

        const typeMap: Record<string, ToastType> = {
            info: ToastType.Info,
            success: ToastType.Success,
            warning: ToastType.Warning,
            error: ToastType.Error,
        };

        this.dialog.toast(messages[type], typeMap[type], 3000);
    }

    // Toast 位置测试
    private testToastPosition(position: string): void {
        const positionMap: Record<string, ToastPosition> = {
            'top-left': ToastPosition.TopLeft,
            'top-center': ToastPosition.TopCenter,
            'top-right': ToastPosition.TopRight,
            'bottom-left': ToastPosition.BottomLeft,
            'bottom-center': ToastPosition.BottomCenter,
            'bottom-right': ToastPosition.BottomRight,
        };

        this.dialog.toast(`${position} 位置的 Toast`, ToastType.Info, 3000, positionMap[position]);
    }

    // 通知框测试
    private testNotification(type: string): void {
        const titles: Record<string, string> = {
            info: '信息通知',
            success: '成功通知',
            warning: '警告通知',
            error: '错误通知',
        };

        const contents: Record<string, string> = {
            info: '这是一个信息通知的内容',
            success: '操作已成功完成！',
            warning: '请注意这个警告',
            error: '操作失败，请重试',
        };

        const typeMap: Record<string, ToastType> = {
            info: ToastType.Info,
            success: ToastType.Success,
            warning: ToastType.Warning,
            error: ToastType.Error,
        };

        this.dialog.showNotification({
            title: titles[type],
            content: contents[type],
            type: typeMap[type],
            autoClose: 5000,
        });
    }

    // 单进度条通知测试
    private testProgressNotification(): void {
        const box = this.dialog.showNotification({
            title: '文件上传中',
            content: '正在上传文件...',
            type: ToastType.Info,
            bars: [0],
        });

        let progress = 0;
        const interval = window.setInterval(() => {
            progress += Math.random() * 15;
            if (progress >= 100) {
                progress = 100;
                clearInterval(interval);
                this.dialog.setNotificationTitle(box, '上传完成');
                this.dialog.setNotificationContent(box, '文件上传成功！');
                this.dialog.setNotificationProgress(box, [100]);
                setTimeout(() => {
                    this.dialog.closeNotification(box);
                }, 2000);
            } else {
                this.dialog.setNotificationProgress(box, [progress]);
            }
        }, 300);
    }

    // 多进度条通知测试
    private testMultiProgressNotification(): void {
        const box = this.dialog.showNotification({
            title: '批量任务处理',
            content: '正在处理多个任务...',
            type: ToastType.Success,
            bars: [0, 0, 0],
        });

        const progress = [0, 0, 0];
        const speeds = [10, 15, 8];

        const interval = window.setInterval(() => {
            let allComplete = true;
            for (let i = 0; i < 3; i++) {
                if (progress[i] < 100) {
                    progress[i] += Math.random() * speeds[i];
                    if (progress[i] > 100) {
                        progress[i] = 100;
                    }
                    allComplete = false;
                }
            }

            this.dialog.setNotificationProgress(box, progress);

            if (allComplete) {
                clearInterval(interval);
                this.dialog.setNotificationTitle(box, '所有任务完成');
                this.dialog.setNotificationContent(box, '所有任务已成功处理！');
                setTimeout(() => {
                    this.dialog.closeNotification(box);
                }, 2000);
            }
        }, 200);
    }

    // 关闭所有通知
    private closeAllNotifications(): void {
        this.dialog.closeAllNotifications();
        this.dialog.toast('已关闭所有通知', ToastType.Info);
    }

    // 综合测试
    private async testAll(): Promise<void> {
        // Toast 序列
        this.dialog.toast('开始综合测试...', ToastType.Info, 2000);

        await new Promise((resolve) => setTimeout(resolve, 500));
        this.dialog.toast('测试 Success Toast', ToastType.Success, 2000);

        await new Promise((resolve) => setTimeout(resolve, 500));
        this.dialog.toast('测试 Warning Toast', ToastType.Warning, 2000);

        await new Promise((resolve) => setTimeout(resolve, 500));

        // 显示通知
        const notification = this.dialog.showNotification({
            title: '综合测试通知',
            content: '这是一个测试通知',
            type: ToastType.Info,
            bars: [0],
            autoClose: 0,
        });

        // 模拟进度
        let progress = 0;
        const progressInterval = window.setInterval(() => {
            progress += 20;
            this.dialog.setNotificationProgress(notification, [progress]);

            if (progress >= 100) {
                clearInterval(progressInterval);
                this.dialog.setNotificationTitle(notification, '测试完成');
                this.dialog.setNotificationContent(notification, '综合测试已完成！');
                setTimeout(() => {
                    this.dialog.closeNotification(notification);
                }, 2000);
            }
        }, 500);

        // 最后显示 Alert
        await new Promise((resolve) => setTimeout(resolve, 3000));
        await this.dialog.alert('综合测试流程演示完成！', '测试完成');
    }
}

⚠⚠ 以下内容为AI分析的结果，请根据实际情况进行判断。

这是一个用于演示 UiFeedbackService 功能的测试类。让我详细解释这个代码的结构和功能：

类概述

DialogDemo 类是一个演示页面控制器，用于展示 UI 反馈服务的各种功能，包括对话框、Toast 提示、通知等。

核心结构

1. 初始化部分

constructor() {
    this.init();
}

private init(): void {
    // 将测试函数暴露到全局作用域
    (window as any).testAlert = this.testAlert.bind(this);
    // ... 其他函数
}

将所有测试方法绑定到全局 window 对象
这样可以在 HTML 页面中直接通过按钮调用这些方法

2. 基础对话框测试

Alert 测试

private async testAlert(): Promise<void> {
    await this.dialog.alert('这是一个 Alert 提示框示例！', '提示');
    this.dialog.toast('Alert 已关闭', ToastType.Info);
}

Confirm 测试

private async testConfirm(): Promise<void> {
    const result = await this.dialog.confirm('您确定要执行这个操作吗？', '确认');
    // 根据用户选择显示不同的反馈
}

Prompt 测试

private async testPrompt(): Promise<void> {
    const result = await this.dialog.prompt('请输入您的名字：', '输入', '阿胖');
    // 处理用户输入结果
}

3. Toast 提示测试

类型测试

private testToast(type: string): void {
    const messages: Record<string, string> = {
        info: '这是一个信息提示',
        success: '操作成功完成！',
        warning: '请注意这个警告信息',
        error: '发生了一个错误！',
    };
    // 根据类型显示不同的 Toast
}

位置测试

private testToastPosition(position: string): void {
    // 测试 Toast 在不同位置的显示效果
    // 支持六个位置：上左、上中、上右、下左、下中、下右
}

4. 通知功能测试

基础通知

private testNotification(type: string): void {
    this.dialog.showNotification({
        title: titles[type],
        content: contents[type],
        type: typeMap[type],
        autoClose: 5000,
    });
}

进度条通知

private testProgressNotification(): void {
    const box = this.dialog.showNotification({
        title: '文件上传中',
        content: '正在上传文件...',
        type: ToastType.Info,
        bars: [0], // 单进度条
    });
    
    // 模拟进度更新
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 15;
        if (progress >= 100) {
            // 完成后更新通知内容并自动关闭
        }
        this.dialog.setNotificationProgress(box, [progress]);
    }, 300);
}

多进度条通知

private testMultiProgressNotification(): void {
    const box = this.dialog.showNotification({
        bars: [0, 0, 0], // 三个进度条
    });
    
    // 模拟多个任务的并行进度
    const progress = [0, 0, 0];
    const speeds = [10, 15, 8]; // 不同的进度速度
}

5. 综合测试

private async testAll(): Promise<void> {
    // 按顺序执行多种 UI 反馈演示
    // 1. Toast 序列展示
    // 2. 通知与进度条演示
    // 3. 最终的 Alert 确认
}

主要特点

完整的功能覆盖：测试了所有 UI 反馈类型
异步处理：正确使用 async/await 处理对话框
模拟真实场景：如文件上传、批量任务处理
用户友好：提供清晰的反馈信息
易于集成：通过全局函数暴露，便于 HTML 调用

使用场景

这个演示类适用于：

开发阶段的功能测试
向客户展示 UI 组件能力
作为使用示例和文档
集成测试的一部分

整体来说，这是一个设计良好的演示类，展示了如何系统性地测试和演示复杂的 UI 反馈系统。

评论加载中...