feat: 一些优化，以及token消耗展示

web/src/utils/media.ts

@@ -7,37 +7,55 @@ export const matchMedia = (
   if (type === "sm") {
     if (window.matchMedia("(max-width: 767.98px)").matches) {
       /* 窗口小于或等于 */
-      matchFunc?.()
+      matchFunc?.();
     }
     else {
-      mismatchFunc?.()
+      mismatchFunc?.();
     }
   }
   else if (type === "md") {
     if (window.matchMedia("(max-width: 992px)").matches) {
       /* 窗口小于或等于 */
-      matchFunc?.()
+      matchFunc?.();
     }
     else {
-      mismatchFunc?.()
+      mismatchFunc?.();
     }
   }
   else if (type === "lg") {
     if (window.matchMedia("(max-width: 1200px)").matches) {
       /* 窗口小于或等于 */
-      matchFunc?.()
+      matchFunc?.();
     }
     else {
-      mismatchFunc?.()
+      mismatchFunc?.();
     }
   }
   else {
     if (window.matchMedia(`(max-width: ${type}px)`).matches) {
       /* 窗口小于或等于 */
-      matchFunc?.()
+      matchFunc?.();
     }
     else {
-      mismatchFunc?.()
+      mismatchFunc?.();
     }
   }
-}
+};
+
+export const useWindowWidth = () => {
+  const width = ref(window.innerWidth);
+
+  const updateWidth = () => {
+    width.value = window.innerWidth;
+  };
+
+  onMounted(() => {
+    window.addEventListener("resize", updateWidth);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", updateWidth);
+  });
+
+  return width;
+};