src/Dpz.Core.Web/wwwroot/js/modules/console-logger.js 网站源码 - 叫我阿胖

Root / src / Dpz.Core.Web / wwwroot / js / modules / console-logger.js

/**
 * 控制台日志输出工具
 */

/**
 * 格式化时间戳
 * @returns {string} 格式化的时间字符串
 */
function formatTimestamp() {
    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}`;
}

/**
 * 输出成功日志
 * @param {string} message - 日志消息
 */
export function outPutSuccess(message) {
    const timestamp = 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;'
    );
}

/**
 * 输出信息日志
 * @param {string} message - 日志消息
 */
export function outPutInfo(message) {
    const timestamp = 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;'
    );
}

/**
 * 输出警告日志
 * @param {string} message - 日志消息
 */
export function outPutWarning(message) {
    const timestamp = 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;'
    );
}

/**
 * 输出错误日志
 * @param {string} message - 日志消息
 */
export function outPutError(message) {
    const timestamp = formatTimestamp();
    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;'
    );
}

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

这段代码是一个用于在控制台输出带样式和时间戳的日志工具（以 ES 模块方式导出四种日志函数）。主要功能与结构如下：

总体说明

提供四种日志输出函数：outPutSuccess、outPutInfo、outPutWarning、outPutError，分别用于输出“成功 / 信息 / 警告 / 错误”类型的日志。
每条日志前会带上格式化后的时间戳，且在浏览器控制台中使用 CSS 样式对日志不同部分进行美化显示（颜色、背景、圆角、内边距等）。
成功/信息使用 console.log，警告使用 console.warn，错误使用 console.error（浏览器会对 warn/error 做不同处理，例如显示不同图标或堆栈信息）。

formatTimestamp 函数

生成当前时间的字符串，格式为 "YYYY-MM-DD HH:MM:SS"（年-月-日时:分:秒）。
使用 Date 对象和 padStart 确保各部分为两位数（例如 01、09）。

每个输出函数的行为（以 outPutSuccess 为例）

获取当前时间戳：const timestamp = formatTimestamp();
调用 console.log（或 warn / error），第一个参数是带有 %c 占位符的格式化字符串：
- 第一个 %c 对应 “状态标签” 部分（例如 "✓ Success"），使用渐变背景、白色文字等醒目标识样式；
- 第二个 %c 对应 “[时间戳]” 部分，使用较淡的背景和颜色；
- 第三个 %c 对应实际 message 内容，使用更浅的背景和文字颜色。
紧接着的三个字符串参数分别是三段 CSS 样式，依次应用到格式化字符串中的三个 %c 位置上，从而实现“分段”样式显示。

样例用法

import { outPutSuccess, outPutInfo, outPutWarning, outPutError } from './logTool';
outPutInfo('程序启动完成');
outPutError('请求失败：404');

注意与补充说明

控制台样式（%c + CSS）仅在支持的控制台（如多数浏览器开发者工具）生效；在 Node.js 控制台中这些样式不会生效（会原样输出 %c 或忽略样式）。
这些函数假设 message 为字符串；如果传入对象，浏览器控制台可能会把对象作为额外参数显示，样式只作用于字符串位置。
时间戳没有毫秒或时区信息，若需更精细或国际化格式可进一步扩展。
函数名中的驼峰写法为 outPutX（P 大写），可按需统一命名风格。

如需我可以：给出更简洁的 API、支持对象/多参数、或在 Node 环境下做兼容（例如用 chalk）等改进建议与代码示例。需要的话告诉我你想要的改进方向。

评论加载中...