美化控制台日志：prettyLog.js 工具详解

1const prettyPrint = (title, ...texts) => {
2  const color = texts.pop(); // 最后一个参数是颜色
3  const processedTexts = texts
4    .map((t) => {
5      // 处理不同类型的数据
6      if (typeof t === 'function') {
7        return t.toString();
8      } else if (t instanceof Date) {
9        return t.toISOString();
10      } else if (Array.isArray(t)) {
11        // 数组处理
12        return t
13          .map((item) =>
14            typeof item === 'object' && item !== null
15            ? JSON.stringify(item, null, 2)
16            : item
17              )
18          .join('\n');
19      } else if (typeof t === 'object' && t !== null) {
20        try {
21          return JSON.stringify(t, null, 2);
22        } catch {
23          return String(t);
24        }
25      }
26      return t;
27    })
28    .filter((t) => t !== '' && t !== undefined && t !== null); // 过滤空值
29
30  const text = processedTexts.length > 0 ? processedTexts.join(' ') : '';
31
32  // 输出格式化日志
33  if (text) {
34    console.log(
35      `%c ${title} %c ${text} %c`,
36      `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
37      `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
38      'background:transparent'
39    );
40  } else {
41    console.log(
42      `%c ${title} %c`,
43      `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
44      'background:transparent'
45    );
46  }
47};

1import prettyLog from '@/utils/prettyLog';
2
3// 信息日志
4prettyLog.info('这是一条普通信息');
5
6// 成功日志
7prettyLog.success('操作成功', '用户数据已保存');
8
9// 警告日志
10prettyLog.warning('注意', '磁盘空间不足');
11
12// 错误日志
13prettyLog.error('错误', '网络请求失败');

1// 输出对象
2const user = { id: 1, name: 'John', role: 'admin' };
3prettyLog.info('用户信息', user);
4
5// 输出数组
6const items = [1, 2, { id: 3, value: 'test' }];
7prettyLog.info('列表数据', items);
8
9// 输出日期
10prettyLog.info('当前时间', new Date());
11
12// 输出函数
13prettyLog.info('处理函数', function process() { return 'result'; });

1const title = isEmpty(content) ? 'Info' : textOrTitle;
2const text = isEmpty(content) ? textOrTitle : content;

1prettyPrint(title, ...text, '#909399');

1try {
2  return JSON.stringify(t, null, 2);
3} catch {
4  return String(t);
5}