ipink-util/dist/utils/log.mjs

util.js

import { isString, isNumber } from './is.mjs';

class Log {
  static instance = null;
  /**
   * 通过该函数获取实例, 可以保证实例一直存在, 且配置一直是最新的.
   * @param option { ILogConfig }
   */
  static getInstance(options) {
    if (!Log.instance) {
      Log.instance = new Log(options);
    } else {
      Log.instance.setOption(options);
    }
    return Log.instance;
  }
  colorMap = {
    success: "#67c23a",
    warning: "#e6a23c",
    error: "#f56c6c",
    // info: "#909399",
    info: "#999935",
    primary: "#409EFF",
    img: "#409EFF"
  };
  titleMap = {
    success: "Success",
    warning: "Warning",
    error: "Error",
    info: "Info",
    primary: "Primary",
    img: ""
  };
  hasTitle = false;
  useBlock = false;
  wlog = typeof window !== "undefined" && window.console ? window.console : typeof console != "undefined" ? console : { log: () => void 0 };
  constructor(options) {
    this.setOption(options);
  }
  /**
   * 同步配置信息
   */
  setOption(options) {
    if (!options) return;
    if (options.colorMap) {
      this.colorMap = Object.assign(this.colorMap, options.colorMap);
    }
    if (options.titleMap) {
      this.titleMap = Object.assign(this.titleMap, options.titleMap);
    }
    if ("hasTitle" in options) this.hasTitle = options.hasTitle || false;
    if ("block" in options) this.useBlock = options.block || false;
  }
  img(url, scale = 1) {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      const dom = document.createElement("canvas");
      const ctx = dom.getContext("2d");
      if (ctx) {
        dom.width = img.width, dom.height = img.height;
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, dom.width, dom.height);
        ctx.drawImage(img, 0, 0);
        const base64 = dom.toDataURL("image/png");
        let title = this.printTitle || "";
        let content = `${title ? "%c " + title : ""} %c sup?`;
        let arr = [content];
        if (title) arr.push(`background:${this.colorMap.img}; border:1px solid ${this.colorMap.img}; padding: 2px; border-radius: 2px 0 0 2px; color: #fff;line-height: 16px;`);
        arr.push(`font-size: 1px;padding: ${Math.floor(img.height * scale / 2)}px ${Math.floor(img.width * scale / 2)}px;background-image: url(${base64});background-repeat: no-repeat;background-size: ${img.width * scale}px ${img.height * scale}px;color: transparent;
						`);
        this.wlog.log(...arr);
      }
      this.printTitle = "";
    };
    img.src = url;
  }
  printTitle = "";
  title(title) {
    this.printTitle = title || "";
    return this;
  }
  extMessage = "";
  ext(extMessage) {
    this.extMessage = extMessage || "";
    return this;
  }
  /**
   * 打印函数
   * 针对于args成员取餐规则
   * @param args { any[] }
   */
  printf(args, options) {
    const {
      color,
      title,
      block = this.useOnceBlock || this.useBlock
    } = options || {};
    let arr = [];
    if (!block) {
      let printTitle = title || (this.hasTitle ? args.length > 1 && (isString(args[0]) || isNumber(args[0])) ? args.splice(0, 1) : this.titleMap.info : "");
      let content = isString(args[0]) || isNumber(args[0]) ? args.splice(0, 1) : "";
      let str = "";
      if (printTitle) str += `%c ${printTitle || ""} `;
      if (content) str += `%c ${content} `;
      if (this.extMessage) str += `%c ${this.extMessage} `;
      str += "%c ";
      arr.push(str);
      if (printTitle) arr.push(`background:${color}; border:1px solid ${color}; padding: 2px; border-radius: 2px 0 0 2px; color: #fff;line-height: 16px; font-weight: bold;`);
      if (content) arr.push(`border:1px solid ${color}; padding: 2px; border-radius: 0 ${this.extMessage ? "0 0" : "2px 2px"} 0; color: ${color};line-height: 16px;`);
      if (this.extMessage) arr.push(`background:${color}; border:1px solid ${color}; padding: 2px; border-radius: 0 2px 2px 0; color: #fff;line-height: 16px;`);
      arr.push("background:transparent");
      arr = arr.concat(args);
    } else {
      arr = ["%c  ", `font-size: 3px;line-height: 18px; padding: 2px; border-radius: 8px 0 0 8px; background-color: ${color}`, ...args];
    }
    this.wlog.log(...arr);
    this.extMessage = this.printTitle = "";
    this.useOnceBlock = false;
  }
  info(...args) {
    this.printf(args, { color: this.colorMap.info, title: this.printTitle });
  }
  success(...args) {
    this.printf(args, { color: this.colorMap.success, title: this.printTitle });
  }
  warning(...args) {
    this.printf(args, { color: this.colorMap.warning, title: this.printTitle });
  }
  error(...args) {
    this.printf(args, { color: this.colorMap.error, title: this.printTitle });
  }
  primary(...args) {
    this.printf(args, { color: this.colorMap.primary, title: this.printTitle });
  }
  /**
   * 设置title, 使用log.title("Title").color("Content", "red")
   */
  color(content, color = this.colorMap.primary) {
    this.printf([content], { color, title: this.printTitle });
  }
  useOnceBlock = false;
  block() {
    this.useOnceBlock = true;
    return this;
  }
  group(groupName = "Group ", opt, isClosed, type) {
    if (isClosed) {
      this.wlog.groupCollapsed(groupName);
    } else {
      this.wlog.group(groupName);
    }
    type = type || "primary";
    if (typeof opt === "function") {
      opt();
    } else if (Array.isArray(opt)) {
      for (var index = 0; index < opt.length; index++) {
        this[type](opt[index]);
      }
    } else {
      this[type](opt);
    }
    this.wlog.groupEnd();
    return this;
  }
}
const log = Log.getInstance();

export { Log, log };