refactor: Migrate the project functionality and optimize the code structure

src/hooks/resize.ts

@@ -0,0 +1,22 @@
+import { throttle } from 'lodash'
+import { Directive } from 'vue'
+
+export const resizeDirective: Directive<HTMLElement, ResizeObserverCallback> = {
+  mounted: (el, binding) => {
+    const callback = binding.value ?? (() => {})
+    const observer = new ResizeObserver(callback)
+    observer.observe(el)
+    el['observer'] = observer
+  },
+  unmounted: (el) => {
+    const observer = el['observer']
+    observer.disconnect()
+  },
+}
+
+export const defineResizeCallback = (
+  callback: ResizeObserverCallback,
+  wait?: number,
+) => {
+  return throttle(callback, wait ?? 100)
+}