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

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

/**
 * 控制台日志模块 TypeScript 类封装。
 */
export class ConsoleLogger {
    public outPutSuccess(message: string): void {
        const timestamp = this.formatTimestamp();
        console.log(
            `%c ✓ Success %c [${timestamp}] %c ${message}`,
            'color: #ffffff; background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 4px 10px; border-radius: 4px 0 0 4px; font-weight: 600; letter-spacing: 0.3px;',
            'color: #a7f3d0; background: rgba(16, 185, 129, 0.15); padding: 4px 10px; font-weight: 500; border-left: 1px solid rgba(16, 185, 129, 0.3); border-right: 1px solid rgba(16, 185, 129, 0.3);',
            'color: #6ee7b7; background: rgba(16, 185, 129, 0.08); padding: 4px 10px; border-radius: 0 4px 4px 0; font-weight: 400;'
        );
    }

    public outPutInfo(message: string): void {
        const timestamp = this.formatTimestamp();
        console.log(
            `%c ℹ Info %c [${timestamp}] %c ${message}`,
            'color: #ffffff; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); padding: 4px 10px; border-radius: 4px 0 0 4px; font-weight: 600; letter-spacing: 0.3px;',
            'color: #93c5fd; background: rgba(59, 130, 246, 0.15); padding: 4px 10px; font-weight: 500; border-left: 1px solid rgba(59, 130, 246, 0.3); border-right: 1px solid rgba(59, 130, 246, 0.3);',
            'color: #bfdbfe; background: rgba(59, 130, 246, 0.08); padding: 4px 10px; border-radius: 0 4px 4px 0; font-weight: 400;'
        );
    }

    public outPutWarning(message: string): void {
        const timestamp = this.formatTimestamp();
        console.warn(
            `%c ⚠ Warning %c [${timestamp}] %c ${message}`,
            'color: #ffffff; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 4px 10px; border-radius: 4px 0 0 4px; font-weight: 600; letter-spacing: 0.3px;',
            'color: #fcd34d; background: rgba(245, 158, 11, 0.15); padding: 4px 10px; font-weight: 500; border-left: 1px solid rgba(245, 158, 11, 0.3); border-right: 1px solid rgba(245, 158, 11, 0.3);',
            'color: #fde68a; background: rgba(245, 158, 11, 0.08); padding: 4px 10px; border-radius: 0 4px 4px 0; font-weight: 400;'
        );
    }

    public outPutError(message: string, e: any = null): void {
        const timestamp = this.formatTimestamp();
        if (e === null) {
            console.error(
                `%c ✗ Error %c [${timestamp}] %c ${message}`,
                'color: #ffffff; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); padding: 4px 10px; border-radius: 4px 0 0 4px; font-weight: 600; letter-spacing: 0.3px;',
                'color: #fca5a5; background: rgba(239, 68, 68, 0.15); padding: 4px 10px; font-weight: 500; border-left: 1px solid rgba(239, 68, 68, 0.3); border-right: 1px solid rgba(239, 68, 68, 0.3);',
                'color: #fecaca; background: rgba(239, 68, 68, 0.08); padding: 4px 10px; border-radius: 0 4px 4px 0; font-weight: 400;'
            );
        } else {
            console.error(
                `%c ✗ Error %c [${timestamp}] %c ${message}`,
                'color: #ffffff; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); padding: 4px 10px; border-radius: 4px 0 0 4px; font-weight: 600; letter-spacing: 0.3px;',
                'color: #fca5a5; background: rgba(239, 68, 68, 0.15); padding: 4px 10px; font-weight: 500; border-left: 1px solid rgba(239, 68, 68, 0.3); border-right: 1px solid rgba(239, 68, 68, 0.3);',
                'color: #fecaca; background: rgba(239, 68, 68, 0.08); padding: 4px 10px; border-radius: 0 4px 4px 0; font-weight: 400;',
                e
            );
        }
    }

    private formatTimestamp(): string {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
}

export const logger = new ConsoleLogger();

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

这是一个用 TypeScript 编写的控制台日志模块，提供了美化的日志输出功能。让我详细解释一下这个代码：

类结构概述

ConsoleLogger 类封装了四种不同类型的日志输出方法，每种都有独特的视觉样式和颜色主题。

核心功能

1. 公共方法

outPutSuccess(message: string) - 输出成功信息
- 使用绿色主题 (✓ 图标)
- 渐变背景从 #10b981 到 #059669
outPutInfo(message: string) - 输出信息提示
- 使用蓝色主题 (ℹ 图标)
- 渐变背景从 #3b82f6 到 #2563eb
outPutWarning(message: string) - 输出警告信息
- 使用橙色主题 (⚠ 图标)
- 渐变背景从 #f59e0b 到 #d97706
outPutError(message: string, e: any = null) - 输出错误信息
- 使用红色主题 (✗ 图标)
- 渐变背景从 #ef4444 到 #dc2626
- 可选的异常对象参数，如果提供会一并输出

2. 私有方法

formatTimestamp() - 格式化时间戳
- 返回 YYYY-MM-DD HH:mm:ss 格式的当前时间

样式设计特点

每个日志输出都采用三段式设计：

左段：图标 + 日志类型
- 白色文字，渐变背景
- 圆角左边框，加粗字体
中段：时间戳
- 半透明背景
- 左右边框装饰
右段：具体消息内容
- 最浅的背景色
- 圆角右边框

使用方式

import { logger } from './path-to-this-file';

logger.outPutSuccess('操作成功完成');
logger.outPutInfo('这是一条信息');
logger.outPutWarning('注意：这是警告');
logger.outPutError('发生错误', error);

设计优势

视觉层次清晰 - 不同类型的日志有明显的颜色区分
信息完整 - 包含时间戳、类型、消息内容
美观实用 - 使用现代化的渐变色彩和圆角设计
即开即用 - 导出了实例 logger，可直接使用

这个日志模块特别适合在开发环境中使用，能够让控制台输出更加美观和易于识别。

评论加载中...