refactor(build): 移除一些依赖替换为自实现

Author: 0xcaffebabe

package.json

@@ -19,7 +19,6 @@
     "less": "4.5.1",
     "marked": "17.0.3",
     "mermaid": "11.12.3",
-    "nprogress": "0.2.0",
     "prismjs": "1.30.0",
     "svg-pan-zoom": "3.6.2",
     "tiny-pinyin": "1.3.2",
@@ -33,10 +32,8 @@
     "@types/jsdom": "27.0.0",
     "@types/katex": "0.16.8",
     "@types/node": "24.10.13",
-    "@types/nprogress": "0.2.3",
     "@types/prismjs": "1.26.6",
     "@vitejs/plugin-vue": "6.0.4",
-    "front-matter": "4.0.2",
     "jsdom": "27.4.0",
     "nodejieba": "3.5.2",
     "rollup-plugin-visualizer": "7.0.0",

src/build/DocService.ts

@@ -9,7 +9,6 @@ import { getMidString } from '../util/StringUtils';
 import {KnowledgeNode, KnowledgeLinkNode} from "../dto/KnowledgeNode";
 import DocUtils from "../util/DocUtils";
 import yaml from 'js-yaml'
-import fm from 'front-matter';
 import {DocMetadata} from "@/dto/doc/DocMetadata";
 import Cacheable from "@/decorator/Cacheable";
 import ArrayUtils from "../util/ArrayUtils";
@@ -48,7 +47,11 @@ class DocService extends BaseService implements Cacheable {
   @cache
   public async getFileInfo(path: string): Promise<DocFileInfo> {
     const callResult = await Promise.all([GitService.getFileCommitList(path), fs.promises.readFile(path)])
-    const { body, frontmatter } = fm(callResult[1].toString())
+    const rawContent = callResult[1].toString()
+    const frontmatter = this.resolveMetadata(rawContent)
+    const body = frontmatter
+      ? rawContent.replace(/^---[\s\S]+?^---\s*/m, '')
+      : rawContent
     return {
       name: path.split('/')[path.split('/').length-1].replace('.md', ''),
       id: DocUtils.docUrl2Id(path),

src/main.ts

@@ -3,8 +3,7 @@ import App from './Main.vue'
 import createRouter from './route'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import './style.less'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
+import NProgress from '@/util/NProgress'
 import createStore from '@/store'
 import { SysUtils } from './util/SysUtils'
 import { registerSW } from 'virtual:pwa-register';

src/pages/home/statistic/HeatMapUtils.ts

@@ -1,15 +1,17 @@
-import dayjs from 'dayjs'
+function formatDate(time: number): string {
+  return new Date(time).toISOString().slice(0, 10)
+}
 
 export default {
   fillTimeRange(data: [string, number][]){
     const map = new Map<string, number>(data);
     const range = [data[0][0], data[data.length - 1][0]];
-    const start = +dayjs(range[0]);
-    const end = +dayjs(range[1]);
+    const start = new Date(range[0]).getTime();
+    const end = new Date(range[1]).getTime();
     const dayTime = 3600 * 24 * 1000;
     const results: [string, number][] = [];
     for (let time = start; time < end; time += dayTime) {
-      const date = dayjs(time).format("YYYY-MM-DD");
+      const date = formatDate(time);
       results.push([date, map.get(date) || 0]);
     }
     return results;

src/util/MermaidUtils.ts

@@ -1,5 +1,4 @@
 import mermaid from "mermaid"
-import svgPanZoom from 'svg-pan-zoom'
 import { SysUtils } from "./SysUtils"
 
 function initWithDark() {

src/util/NProgress.ts

@@ -0,0 +1,71 @@
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+let trickleTimer: ReturnType<typeof setInterval> | null = null
+let el: HTMLDivElement | null = null
+let pending = 0
+let progress = 0
+
+function getEl(): HTMLDivElement {
+  if (!el) {
+    el = document.createElement('div')
+    el.style.cssText = [
+      'position:fixed',
+      'top:0',
+      'left:0',
+      'width:0',
+      'height:2px',
+      'background:var(--el-color-primary,#409eff)',
+      'z-index:9999',
+      'transition:width 0.3s ease,opacity 0.4s ease',
+      'opacity:0',
+    ].join(';')
+    document.body.appendChild(el)
+  }
+  return el
+}
+
+// 越接近 100% 每次前进越少，模拟真实加载感
+function trickleAmount(): number {
+  if (progress < 0.2) return 0.08
+  if (progress < 0.5) return 0.05
+  if (progress < 0.8) return 0.02
+  if (progress < 0.95) return 0.005
+  return 0
+}
+
+function setProgress(n: number) {
+  progress = Math.min(n, 0.994)
+  getEl().style.width = (progress * 100) + '%'
+}
+
+function startTrickle() {
+  if (trickleTimer) return
+  trickleTimer = setInterval(() => setProgress(progress + trickleAmount()), 800)
+}
+
+function stopTrickle() {
+  if (trickleTimer) { clearInterval(trickleTimer); trickleTimer = null }
+}
+
+export default {
+  start() {
+    pending++
+    if (hideTimer) { clearTimeout(hideTimer); hideTimer = null }
+    const bar = getEl()
+    bar.style.opacity = '1'
+    if (progress === 0) setProgress(0.02)
+    startTrickle()
+  },
+  done() {
+    if (pending > 0) pending--
+    if (pending > 0) return
+    stopTrickle()
+    setProgress(1)
+    hideTimer = setTimeout(() => {
+      getEl().style.opacity = '0'
+      hideTimer = setTimeout(() => {
+        getEl().style.width = '0'
+        progress = 0
+      }, 400)
+    }, 200)
+  }
+}

src/util/http.ts

@@ -1,4 +1,4 @@
-import NProgress from 'nprogress'
+import NProgress from '@/util/NProgress'
 
 export async function http(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
   NProgress.start()