格式化一个储存容量，保留两位小数 + *
+ * // 返回 100.01 KB + * format(102411, 2); + *+ * + * @param size 字节大小 + * @param fixed 保留小数 + * @param stopUnit 停止单位 + * @return + */ + public static format(size: number, fixed = 2, stopUnit?: Unit): string { + const units = Object.keys(Unit); + if (0 < size) { + for (let i = 0; i < units.length; i++, size /= 1024) { + const unit = units[i]; + if (size <= 1000 || i === units.length - 1 || unit === stopUnit) { + if (i === 0) { + // 最小单位不需要小数 + return size + " B"; + } else { + return `${size.toFixed(fixed)} ${unit}`; + } + } + } + } + return "0 B"; + } +} diff --git a/src/utils/Markdown.ts b/src/utils/Markdown.ts new file mode 100644 index 0000000..8b7989f --- /dev/null +++ b/src/utils/Markdown.ts @@ -0,0 +1,196 @@ +import { marked } from "marked"; +import { gfmHeadingId } from "marked-gfm-heading-id"; +import { markedHighlight } from "marked-highlight"; +import { mangle } from "marked-mangle"; +import Prism from "prismjs"; +import "prismjs/themes/prism.css"; + +export default class Markdown { + + private static instance: Markdown; + + renderer = new marked.Renderer(); + + private constructor() { + marked.use(mangle()); + marked.use(gfmHeadingId()); + marked.use(markedHighlight({ + highlight(code: string, lang: string) { + if (Prism.languages[lang]) { + return Prism.highlight(code, Prism.languages[lang], lang); + } else { + return code; + } + } + })); + // Markdown 解析器配置 + marked.setOptions({ + renderer: this.renderer, + pedantic: false, + gfm: true, + breaks: true + }); + + Prism.hooks.add("complete", (env: any) => { + if (!env.code) return; + + // 行号渲染调整 + const el = env.element; + + const lineNumber = el.querySelector(".line-numbers-rows") as HTMLDivElement; + if (lineNumber) { + const clone = lineNumber.cloneNode(true); + el.removeChild(lineNumber); + // 加容器做滚动 + el.innerHTML = `${el.innerHTML}`; + el.insertBefore(clone, el.firstChild); + + if (el.parentNode) { + const markdownRoot = el.parentNode.parentNode; + if (markdownRoot) { + const maxHeight = markdownRoot.dataset.maxHeight; + if (maxHeight === "auto") { + return; + } + // 注册双击事件 + const lines = lineNumber.children.length; + if (lines < 18) { + return; + } + const parent = el.parentNode; + parent.addEventListener("dblclick", (): void => { + const isExpand = parent.classList.contains("expand"); + if (isExpand) { + parent.style.maxHeight = maxHeight; + parent.classList.remove("expand"); + } else { + parent.style.maxHeight = lines * 22 + "px"; + parent.classList.add("expand"); + } + const selection = window.getSelection(); + if (selection) { + selection.removeAllRanges(); + } + }); + } + } + } + }); + + /** + * ### 超链渲染方式 + * + * 1. 链接前加 ~ 符号会被渲染为新标签打开。例：`[文本](~链接)` + * 2. 没有标题的链接将使用文本作为标题 + * 3. 没有链接的会被渲染为 span 标签 + */ + this.renderer.link = function ({ href, title, text }) { + title = title ?? text; + + if (!href) { + return `${text}`; + } + // 新标签打开 + let target = "_self"; + if (href.startsWith("~")) { + target = "_blank"; + href = href.substring(1); + } + { + // 处理嵌套 markdown，这可能不是最优解 + const tokens = (marked.lexer(text, { inline: true } as any) as any)[0].tokens; + text = this.parser.parseInline(tokens); + } + return `${text}`; + }; + + /** + * ### 重点内容扩展 + * + * ```md + * 默认 `文本` 表现为红色 + * 使用 `[red bold]文本` 可以自定义类 + * ``` + */ + this.renderer.codespan = ({ text }) => { + const clazz = text.match(/\[(.+?)]/); + if (clazz) { + return `${text.substring(text.indexOf("]") + 1)}`; + } else { + return `${text}`; + } + }; + + /** + * ### 组件渲染方式（原为图像渲染方式） + * + * ```md + * [] 内文本以 # 开始时，该组件带边框 + * ``` + * + * 1. 渲染为网页：`` + * 2. 渲染为视频：`` + * 3. 渲染为音频：`` + * 4. 渲染为图片：`` + * 6. 带边框图片：`` + */ + this.renderer.image = ({ href, title, text }) => { + const clazz = ["media"]; + + const hasBorder = text[0] === "#"; + if (hasBorder) { + clazz.push("border"); + } + title = title ?? text; + + const extendTags = ["~", "#", "$"]; + let extendTag; + if (extendTags.indexOf(href.charAt(0)) !== -1) { + extendTag = href.charAt(0); + } + + const clazzStr = clazz.join(" "); + let elStr; + switch (extendTag) { + case "~": + elStr = ``; + break; + case "#": + elStr = ``; + break; + case "$": + elStr = ``; + break; + default: + elStr = `
+ *
+ * `)
+ * ```
+ *
+ * @param string 字符串
+ * @returns DOM 节点
+ */
+ public static toDOM(string: string): Document {
+ return new DOMParser().parseFromString(string, "text/xml");
+ }
+
+ /**
+ * 异步执行
+ *
+ * @param event 函数
+ */
+ public static async(event: Function) {
+ setTimeout(event, 0);
+ }
+
+ /**
+ * 生成随机数
+ *
+ * @param min 最小值
+ * @param max 最大值
+ */
+ public static random(min = 0, max = 100): number {
+ return Math.floor(Math.random() * (max + 1 - min)) + min;
+ }
+
+ /**
+ * Base64 数据转文件
+ *
+ * __需要头部元数据__
+ *
+ * __示例:__
+ * data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
+ *
+ * @param data Base64 数据
+ * @param fileName 文件名
+ * @returns 文件对象
+ */
+ public static base64ToFile(data: string, fileName: string): File {
+ const splitData = data.split(",");
+ const base64 = atob(splitData[1]);
+ let n = base64.length as number;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = base64.charCodeAt(n);
+ }
+ return new File([u8arr], fileName, {type: splitData[0].split(":")[1]});
+ }
+
+ /**
+ * 深克隆对象
+ *
+ * @param origin 源对象
+ * @param target 递归对象
+ * @returns 克隆对象
+ */
+ public static deepClone(origin: any, target = {} as any) {
+ const toString = Object.prototype.toString;
+ const arrType = "[object Array]";
+ for (const key in origin) {
+ if (Object.prototype.hasOwnProperty.call(origin, key)) {
+ if (typeof origin[key] === "object" && origin[key] !== null) {
+ target[key] = toString.call(origin[key]) === arrType ? [] : {};
+ this.deepClone(origin[key], target[key]);
+ } else {
+ target[key] = origin[key];
+ }
+ }
+ }
+ return target;
+ }
+
+ public static keyValueString(obj: object, assign: string, split: string): string {
+ let result = "";
+ Object.entries(obj).forEach(([k, v]) => result += k + assign + v + split);
+ return result.substring(0, result.length - split.length);
+ }
+
+ public static toURLArgs(obj?: { [key: string]: any }): string {
+ if (!obj) {
+ return "";
+ }
+ const args: string[] = [];
+ for (const key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ const value = obj[key];
+ if (Array.isArray(value)) {
+ value.forEach((item) => {
+ args.push(`${encodeURIComponent(key)}=${encodeURIComponent(item)}`);
+ });
+ } else {
+ args.push(`${encodeURIComponent(key)}=${encodeURIComponent(value.toString())}`);
+ }
+ }
+ }
+ return args.join("&");
+ }
+
+ public static toObject(map: Mapimyeyu.net
+ *