src/index.ts
import { TDirection, TType, TOptionTextColor, TOptionsFont, TOptionsPadding, TOptionsTextStyle } from './interface';
const fontFamily = `DejaVu Sans,Verdana,Geneva,'Microft YaHei','Microft YaHei UI',sans-serif`;
class ConsoleBadge {
public leftStyle: TOptionsTextStyle = {
text: '@kwooshung',
padding: [6, 4, 6, 6],
radius: 3,
color: {
bg: '#555',
fg: '#fff'
},
font: {
size: 12,
weight: 'bold',
family: fontFamily,
lineHeight: 8,
shadow: '0 1px 0 rgba(1, 1, 1, .3)'
}
};
public rightStyle: TOptionsTextStyle = {
text: 'console-badge',
padding: [6, 6, 6, 4],
radius: 3,
color: {
bg: '#4c1',
fg: '#fff'
},
font: {
size: 12,
weight: 'normal',
family: fontFamily,
lineHeight: 8,
shadow: '0 1px 0 rgba(1, 1, 1, .3)'
}
};
public dir: TDirection = 'ltr';
public consoleType: TType = 'log';
/**
* @zh 构造函数
* @en Constructor
* @param {string} [leftText=''] 左边文字
* @param {string} [rightText=''] 右边文字
*/
constructor(leftText: string = '', rightText: string = '') {
this.text(leftText, rightText);
}
/**
* @zh 设置阅读方向
* @en Set reading direction
* @param {TDirection} direction 方向
* @returns {ConsoleBadge} 返回自身
*/
public direction(direction: TDirection): ConsoleBadge {
this.dir = direction;
return this;
}
/**
* @zh 设置console输出类型
* @en Set console output type
* @param {TType} type 类型
* @returns {ConsoleBadge} 返回自身
*/
public type(type: TType): ConsoleBadge {
this.consoleType = type;
return this;
}
/**
* @zh 设置文字
* @en Set text
* @param {string} leftText 左边文字
* @param {string} rightText 右边文字
*/
public text(leftText: string, rightText: string): ConsoleBadge {
this.leftText(leftText);
this.rightText(rightText);
return this;
}
/**
* @zh 设置颜色
* @en Set color
* @param {TOptionTextColor} leftColor 左边颜色
* @param {TOptionTextColor} [rightColor] 右边颜色，如果不传则与左边颜色一致
* @returns {ConsoleBadge} 返回自身
*/
public color(leftColor: TOptionTextColor, rightColor?: TOptionTextColor): ConsoleBadge {
this.leftColor(leftColor);
this.rightColor(rightColor ?? leftColor);
return this;
}
/**
* @zh 设置背景色
* @en Set background color
* @param {string} leftBgColor 左边背景色
* @param {string} [rightBgColor] 右边背景色，如果不传则与左边背景色一致
* @returns {ConsoleBadge} 返回自身
*/
public bgColor(leftBgColor: string, rightBgColor?: string): ConsoleBadge {
this.leftBgColor(leftBgColor);
this.rightBgColor(rightBgColor ?? leftBgColor);
return this;
}
/**
* @zh 设置前景色，即文字颜色
* @en Set foreground color, that is, text color
* @param {string} leftFgColor 左边前景色
* @param {string} [rightFgColor] 右边前景色，如果不传则与左边前景色一致
* @returns {ConsoleBadge} 返回自身
*/
public fgColor(leftFgColor: string, rightFgColor?: string): ConsoleBadge {
this.leftFgColor(leftFgColor);
this.rightFgColor(rightFgColor ?? leftFgColor);
return this;
}
/**
* @zh 设置内边距，与 CSS padding 属性一致，但只支持数字，单位是 px
* @en Set padding, consistent with CSS padding property, but only supports numbers, the unit is px
* @param {TOptionsPadding} leftPadding 左边内边距
* @param {TOptionsPadding} [rightPadding] 右边内边距，如果不传则与左边内边距一致
* @returns {ConsoleBadge} 返回自身
*/
public padding(leftPadding: TOptionsPadding, rightPadding?: TOptionsPadding): ConsoleBadge {
this.leftPadding(leftPadding);
this.rightPadding(rightPadding ?? leftPadding);
return this;
}
/**
* @zh 设置圆角半径
* @en Set corner radius
* @param {number} [leftRadius=3] 左边半径，单位是 px
* @param {number} [rightRadius] 右边半径，单位是 px，如果不传则与左边半径一致
* @returns {ConsoleBadge} 返回自身
*/
public radius(leftRadius: number = 3, rightRadius?: number): ConsoleBadge {
this.leftRadius(leftRadius);
this.rightRadius(rightRadius ?? leftRadius);
return this;
}
/**
* @zh 设置字体样式
* @en Set font
* @param {TOptionsFont} leftFont 左边字体
* @param {TOptionsFont} [rightFont] 右边字体，如果不传则与左边字体一致
* @returns {ConsoleBadge} 返回自身
*/
public font(leftFont: TOptionsFont, rightFont?: TOptionsFont): ConsoleBadge {
this.leftFont(leftFont);
this.rightFont(rightFont ?? leftFont);
return this;
}
/**
* @zh 设置文本字体
* @en Set font family
* @param {string} [leftFamily=fontFamily] 左边字体名称
* @param {string} [rightFamily] 右边字体名称，如果不传则与左边字体名称一致
* @returns {ConsoleBadge} 返回自身
*/
public fontFamily(leftFamily: string = fontFamily, rightFamily?: string): ConsoleBadge {
this.leftFontFamily(leftFamily);
this.rightFontFamily(rightFamily ?? leftFamily);
return this;
}
/**
* @zh 设置文本字体大小
* @en Set font size
* @param {number} [leftSize=12] 左边字体大小
* @param {number} [rightSize] 右边字体大小，如果不传则与左边字体大小一致
* @returns {ConsoleBadge} 返回自身
*/
public fontSize(leftSize: number = 12, rightSize?: number): ConsoleBadge {
this.leftFontSize(leftSize);
this.rightFontSize(rightSize ?? leftSize);
return this;
}
/**
* @zh 设置文本字体字重
* @en Set font weight
* @param {number | string} [leftWeight='bold'] 左边字体字重
* @param {number | string} [rightWeight] 右边字体字重，如果不传则与左边字体字重一致
* @returns {ConsoleBadge} 返回自身
*/
public fontWeight(leftWeight: number | string = 'bold', rightWeight?: number | string): ConsoleBadge {
this.leftFontWeight(leftWeight);
this.rightFontWeight(rightWeight ?? leftWeight);
return this;
}
/**
* @zh 设置文本行高
* @en Set line height
* @param {number} [leftLineHeight=22] 左边行高
* @param {number} [rightLineHeight] 右边行高，如果不传则与左边行高一致
* @returns {ConsoleBadge} 返回自身
*/
public lineHeight(leftLineHeight: number = 22, rightLineHeight?: number): ConsoleBadge {
this.leftLineHeight(leftLineHeight);
this.rightLineHeight(rightLineHeight ?? leftLineHeight);
return this;
}
/**
* @zh 设置文本字体阴影
* @en Set shadow
* @param {string} [leftShadow='0 1px 0 rgba(1, 1, 1, .3)'] 左边阴影
* @param {string} [rightShadow] 右边阴影，如果不传则与左边阴影一致
* @returns {ConsoleBadge} 返回自身
*/
public textShadow(leftShadow: string = '0 1px 0 rgba(1, 1, 1, .3)', rightShadow?: string): ConsoleBadge {
this.leftTextShadow(leftShadow);
this.rightTextShadow(rightShadow ?? leftShadow);
return this;
}
/**
* @zh 设置左边样式
* @en Set left style
* @param {TOptionsTextStyle} style 样式
* @returns {ConsoleBadge} 返回自身
*/
public left(style: TOptionsTextStyle): ConsoleBadge {
this.leftStyle = { ...this.leftStyle, ...style };
return this;
}
/**
* @zh 设置左边文字
* @en Set left text
* @param {string} text 文字
* @returns {ConsoleBadge} 返回自身
*/
public leftText(text: string): ConsoleBadge {
this.leftStyle.text = text;
return this;
}
/**
* @zh 设置左边文字颜色
* @en Set left text color
* @param {TOptionTextColor} color 颜色
* @returns {ConsoleBadge} 返回自身
*/
public leftColor(color: TOptionTextColor): ConsoleBadge {
this.leftStyle.color = { ...this.leftStyle.color, ...color };
return this;
}
/**
* @zh 设置左边背景色，支持 hex、rgb、rgba、hsl、hsla
* @en Set left background color，support hex, rgb, rgba, hsl, hsla
* @param {string} color 颜色
* @returns {ConsoleBadge} 返回自身
*/
public leftBgColor(color: string): ConsoleBadge {
this.leftStyle.color.bg = color;
return this;
}
/**
* @zh 设置左边前景色，即文字颜色，支持 hex、rgb、rgba、hsl、hsla
* @en Set left foreground color, that is, text color, support hex, rgb, rgba, hsl, hsla
* @param {string} color 颜色
* @returns {ConsoleBadge} 返回自身
*/
public leftFgColor(color: string): ConsoleBadge {
this.leftStyle.color.fg = color;
return this;
}
/**
* @zh 设置左边内边距，与 CSS padding 属性一致，但只支持数字，单位是 px
* @en Set left padding, consistent with CSS padding property, but only supports numbers, the unit is px
* @param {TOptionsPadding} padding 内边距
* @returns {ConsoleBadge} 返回自身
*/
public leftPadding(padding: TOptionsPadding): ConsoleBadge {
this.leftStyle.padding = padding;
return this;
}
/**
* @zh 设置左边圆角半径
* @en Set left corner radius
* @param {number} [radius=3] 半径，单位是 px
* @returns {ConsoleBadge} 返回自身
*/
public leftRadius(radius: number = 3): ConsoleBadge {
this.leftStyle.radius = radius;
return this;
}
/**
* @zh 设置左边文本样式
* @en Set left text style
* @param {TOptionsFont} font 字体
* @returns {ConsoleBadge} 返回自身
*/
public leftFont(font: TOptionsFont): ConsoleBadge {
this.leftStyle.font = { ...this.leftStyle.font, ...font };
return this;
}
/**
* @zh 设置左边文本字体
* @en Set left font family
* @param {string} [family=fontFamily] 字体名称
* @returns {ConsoleBadge} 返回自身
*/
public leftFontFamily(family: string = fontFamily): ConsoleBadge {
this.leftStyle.font.family = family;
return this;
}
/**
* @zh 设置左边文本字体大小
* @en Set left font size
* @param {number} [size=12] 字体大小
* @returns {ConsoleBadge} 返回自身
*/
public leftFontSize(size: number = 12): ConsoleBadge {
this.leftStyle.font.size = size;
return this;
}
/**
* @zh 设置左边文本字体字重
* @en Set left font weight
* @param {number | string} [weight='bold'] 字体字重
* @returns {ConsoleBadge} 返回自身
*/
public leftFontWeight(weight: number | string = 'bold'): ConsoleBadge {
this.leftStyle.font.weight = weight;
return this;
}
/**
* @zh 设置左边文本行高
* @en Set left line height
* @param {number} [lineHeight=22] 行高
* @returns {ConsoleBadge} 返回自身
*/
public leftLineHeight(lineHeight: number = 22): ConsoleBadge {
this.leftStyle.font.lineHeight = lineHeight;
return this;
}
/**
* @zh 设置左边文本字体阴影
* @en Set left text shadow
* @param {string} [shadow='0 1px 0 rgba(1, 1, 1, .3)'] 阴影
* @returns {ConsoleBadge} 返回自身
*/
public leftTextShadow(shadow: string = '0 1px 0 rgba(1, 1, 1, .3)'): ConsoleBadge {
this.leftStyle.font.shadow = shadow;
return this;
}
/**
* @zh 设置右边样式
* @en Set right style
* @param {TOptionsTextStyle} style 样式
* @returns {ConsoleBadge} 返回自身
*/
public right(style: TOptionsTextStyle): ConsoleBadge {
this.rightStyle = { ...this.rightStyle, ...style };
return this;
}
/**
* @zh 设置右边文字
* @en Set right text
* @param {string} text 文字
* @returns {ConsoleBadge} 返回自身
*/
public rightText(text: string): ConsoleBadge {
this.rightStyle.text = text;
return this;
}
/**
* @zh 设置右边文字颜色
* @en Set right text color
* @param {TOptionTextColor} color 颜色
* @returns {ConsoleBadge} 返回自身
*/
public rightColor(color: TOptionTextColor): ConsoleBadge {
this.rightStyle.color = { ...this.rightStyle.color, ...color };
return this;
}
/**
* @zh 设置右边背景色，支持 hex、rgb、rgba、hsl、hsla
* @en Set right background color，support hex, rgb, rgba, hsl, hsla
* @param {string} color 颜色
* @returns {ConsoleBadge} 返回自身
*/
public rightBgColor(color: string): ConsoleBadge {
this.rightStyle.color.bg = color;
return this;
}
/**
* @zh 设置右边前景色，即文字颜色，支持 hex、rgb、rgba、hsl、hsla
* @en Set right foreground color, that is, text color, support hex, rgb, rgba, hsl, hsla
* @param {string} color 颜色
* @returns {ConsoleBadge} 返回自身
*/
public rightFgColor(color: string): ConsoleBadge {
this.rightStyle.color.fg = color;
return this;
}
/**
* @zh 设置右边内边距，与 CSS padding 属性一致，但只支持数字，单位是 px
* @en Set right padding, consistent with CSS padding property, but only supports numbers, the unit is px
* @param {TOptionsPadding} padding 内边距
* @returns {ConsoleBadge} 返回自身
*/
public rightPadding(padding: TOptionsPadding): ConsoleBadge {
this.rightStyle.padding = padding;
return this;
}
/**
* @zh 设置右边圆角半径
* @en Set right corner radius
* @param {number} [radius=3] 半径，单位是 px
* @returns {ConsoleBadge} 返回自身
*/
public rightRadius(radius: number = 3): ConsoleBadge {
this.rightStyle.radius = radius;
return this;
}
/**
* @zh 设置右边文本样式
* @en Set right text style
* @param {TOptionsFont} font 字体
* @returns {ConsoleBadge} 返回自身
*/
public rightFont(font: TOptionsFont): ConsoleBadge {
this.rightStyle.font = { ...this.rightStyle.font, ...font };
return this;
}
/**
* @zh 设置右边文本字体
* @en Set right font family
* @param {string} [family=fontFamily] 字体名称
* @returns {ConsoleBadge} 返回自身
*/
public rightFontFamily(family: string = fontFamily): ConsoleBadge {
this.rightStyle.font.family = family;
return this;
}
/**
* @zh 设置右边文本字体大小
* @en Set right font size
* @param {number} [size=12] 字体大小
* @returns {ConsoleBadge} 返回自身
*/
public rightFontSize(size: number = 12): ConsoleBadge {
this.rightStyle.font.size = size;
return this;
}
/**
* @zh 设置右边文本字体字重
* @en Set right font weight
* @param {number | string} [weight='bold'] 字体字重
* @returns {ConsoleBadge} 返回自身
*/
public rightFontWeight(weight: number | string = 'bold'): ConsoleBadge {
this.rightStyle.font.weight = weight;
return this;
}
/**
* @zh 设置右边文本行高
* @en Set right line height
* @param {number} [lineHeight=22] 行高
* @returns {ConsoleBadge} 返回自身
*/
public rightLineHeight(lineHeight: number = 22): ConsoleBadge {
this.rightStyle.font.lineHeight = lineHeight;
return this;
}
/**
* @zh 设置右边文本字体阴影
* @en Set right text shadow
* @param {string} [shadow='0 1px 0 rgba(1, 1, 1, .3)'] 阴影
* @returns {ConsoleBadge} 返回自身
*/
public rightTextShadow(shadow: string = '0 1px 0 rgba(1, 1, 1, .3)'): ConsoleBadge {
this.rightStyle.font.shadow = shadow;
return this;
}
/**
* @zh 构建样式字符串
* @en Build style string
* @param {TOptionsTextStyle} style 样式
* @param {boolean} isLeft 是否左边
* @param {boolean} isLtr 是否从左到右
* @returns {string} 返回样式字符串
*/
public buildStyleString(style: TOptionsTextStyle, isLeft: boolean, isLtr: boolean): string {
const radius = [`${style.radius}px 0 0 ${style.radius}px`, `0 ${style.radius}px ${style.radius}px 0`];
const borderRadius = isLeft ? (isLtr ? radius[0] : radius[1]) : isLtr ? radius[1] : radius[0];
const baseStyle = [
`color:${style.color.fg}`,
`background-color:${style.color.bg}`,
typeof style.padding === 'number' ? `padding:${style.padding}px` : `padding:${style.padding.join('px ')}px`,
`border-radius:${borderRadius}`,
`font-family:${style.font.family}`,
`font-size:${style.font.size}px`,
`font-weight:${style.font.weight}`,
`line-height:${style.font.lineHeight}px`,
`text-shadow:${style.font.shadow}`
];
return baseStyle.join(';');
}
/**
* @zh 输出徽章
* @en Output badge
* @returns {ConsoleBadge} 返回自身
*/
public print(): ConsoleBadge {
const isLtr = this.dir === 'ltr';
const code = isLtr ? `%c ${this.leftStyle.text} %c ${this.rightStyle.text} %c` : `%c ${this.rightStyle.text} %c ${this.leftStyle.text} %c`;
const styleCodeL = this.buildStyleString(this.leftStyle, true, isLtr);
const styleCodeR = this.buildStyleString(this.rightStyle, false, isLtr);
console[this.consoleType](code, styleCodeL, styleCodeR, 'background-color:transparent;');
return this;
}
}
export default ConsoleBadge;