feat 搭建架构骨架

src/directives/debounce.ts

@@ -0,0 +1,35 @@
+import type { Directive } from 'vue'
+
+interface DebounceBinding {
+  handler: (...args: unknown[]) => void
+  delay?: number
+}
+
+type DebounceValue = DebounceBinding['handler'] | DebounceBinding
+
+const listenerMap = new WeakMap<Element, EventListener>()
+
+function normalize(value: DebounceValue): DebounceBinding {
+  return typeof value === 'function' ? { handler: value } : value
+}
+
+/** v-debounce 防抖点击：v-debounce="fn" 或 v-debounce="{ handler: fn, delay: 500 }" */
+const debounce: Directive<Element, DebounceValue> = {
+  mounted(el, binding) {
+    const { handler, delay = 300 } = normalize(binding.value)
+    let timer: ReturnType<typeof setTimeout> | null = null
+    const listener: EventListener = () => {
+      if (timer !== null) clearTimeout(timer)
+      timer = setTimeout(() => handler(), delay)
+    }
+    listenerMap.set(el, listener)
+    el.addEventListener('click', listener)
+  },
+  unmounted(el) {
+    const listener = listenerMap.get(el)
+    if (listener) el.removeEventListener('click', listener)
+    listenerMap.delete(el)
+  },
+}
+
+export default debounce