fix: 优化watch 修改编辑用户弹窗样式

src/hooks/useAuth.ts

@@ -1,6 +1,6 @@
 // src/hooks/useAuth.ts
 import { useState } from './useState';
-import { watch } from 'vue';
+import { useEffect } from './useEffect';
 import { useMenuStore } from '@/stores/menuStore';
 import { usePermissionStore } from '@/stores/permissionStore';
 import router from '@/router';
@@ -10,13 +10,14 @@ const TOKEN_KEY = 'MY_APP_AUTH_TOKEN';
 function createAuth() {
   const [token, setToken] = useState<string | null>(window.localStorage.getItem(TOKEN_KEY));
 
-  watch(token, (newToken) => {
+  useEffect(() => {
+    const newToken = token.value;
     if (newToken) {
       window.localStorage.setItem(TOKEN_KEY, newToken);
     } else {
       window.localStorage.removeItem(TOKEN_KEY);
     }
-  });
+  }, [token]);
 
   const isLoggedIn = () => !!token.value;
 

src/hooks/useDebounce.ts

@@ -1,6 +1,7 @@
 // src/hooks/useDebounce.ts
-import { watch, onUnmounted, Ref } from 'vue';
+import { onUnmounted, Ref } from 'vue';
 import { useState } from './useState';
+import { useEffect } from './useEffect';
 
 export interface UseDebounceOptions {
   delay?: number;
@@ -40,7 +41,7 @@ export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOpti
     isFirstCall = true;
   };
 
-  watch(source, () => {
+  useEffect(() => {
     setIsPending(true);
 
     // 处理 maxWait
@@ -61,7 +62,9 @@ export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOpti
         updateValue();
       }, delay);
     }
-  });
+
+    return clearTimers;
+  }, [source]);
 
   // 卸载
   onUnmounted(() => {

src/hooks/usePagination.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // src/hooks/usePagination.ts
-import { computed, ref, watch, Ref, triggerRef } from 'vue';
+import { computed, ref, Ref, triggerRef } from 'vue';
+import { useEffect } from './useEffect';
 
 /**
  * 分页配置项
@@ -77,24 +78,20 @@ export function usePagination(options: UsePaginationOptions = {}): UsePagination
   const pageSizeRef = ref(options.pageSize ?? defaultPageSize);
   const totalRef = ref(options.total ?? 0);
 
-  watch(
-    () => options.current,
-    (val) => {
-      if (val !== undefined) currentRef.value = val;
-    },
-  );
-  watch(
-    () => options.pageSize,
-    (val) => {
-      if (val !== undefined) pageSizeRef.value = val;
-    },
-  );
-  watch(
-    () => options.total,
-    (val) => {
-      if (val !== undefined) totalRef.value = val;
-    },
-  );
+  useEffect(() => {
+    const val = options.current;
+    if (val !== undefined) currentRef.value = val;
+  }, [() => options.current]);
+
+  useEffect(() => {
+    const val = options.pageSize;
+    if (val !== undefined) pageSizeRef.value = val;
+  }, [() => options.pageSize]);
+
+  useEffect(() => {
+    const val = options.total;
+    if (val !== undefined) totalRef.value = val;
+  }, [() => options.total]);
 
   const totalPages = computed(() => {
     const total = totalRef.value;

src/hooks/useRequest.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { ref, Ref, watch, WatchSource, onUnmounted, computed } from 'vue';
+import { ref, Ref, WatchSource, onUnmounted, computed } from 'vue';
+import { useEffect } from './useEffect';
 
 export interface UseRequestReturn<T> {
   /** 纯净的数据，不包含后端外层壳 */
@@ -128,31 +129,29 @@ export function useRequest<T>(
   const shouldAutoRun = computed(() => !manual && ready.value);
   let hasAutoRun = false; // 标记是否已自动执行过，防止重复触发
 
-  watch(
-    shouldAutoRun,
-    (val) => {
-      if (val && !hasAutoRun) {
-        hasAutoRun = true;
-        run();
-      } else if (!val) {
-        // 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
-        hasAutoRun = false;
-      }
-    },
-    { immediate: true },
-  );
+  useEffect(() => {
+    const val = shouldAutoRun.value;
+    if (val && !hasAutoRun) {
+      hasAutoRun = true;
+      run();
+    } else if (!val) {
+      // 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
+      hasAutoRun = false;
+    }
+  }, [shouldAutoRun]);
 
   // refreshDeps 变化时重新请求（初始化时不再重复触发）
   if (refreshDeps && refreshDeps.length > 0) {
-    watch(
-      refreshDeps,
-      () => {
-        if (shouldAutoRun.value) {
-          run();
-        }
-      },
-      { deep: true },
-    );
+    let skipInitialRefresh = true;
+    useEffect(() => {
+      if (skipInitialRefresh) {
+        skipInitialRefresh = false;
+        return;
+      }
+      if (shouldAutoRun.value) {
+        run();
+      }
+    }, refreshDeps);
   }
 
   const getSignal = () => abortController?.signal;

src/hooks/useWebSocket.ts

@@ -1,5 +1,6 @@
-import { ref, watch, onBeforeUnmount, toValue } from 'vue';
+import { ref, onBeforeUnmount, toValue } from 'vue';
 import type { Ref, MaybeRefOrGetter } from 'vue';
+import { useEffect } from './useEffect';
 
 // --- 类型定义 ---
 export type WebSocketStatus = 'connecting' | 'open' | 'closed' | 'error';
@@ -216,14 +217,16 @@ export function useWebSocket(
   // --- 监听与副作用 ---
 
   // 监听 URL 变化，如果变了则重新连接
-  watch(
-    () => toValue(url),
-    () => {
-      if (status.value !== 'closed') {
-        connect();
-      }
-    },
-  );
+  let skipInitialUrlWatch = true;
+  useEffect(() => {
+    if (skipInitialUrlWatch) {
+      skipInitialUrlWatch = false;
+      return;
+    }
+    if (status.value !== 'closed') {
+      connect();
+    }
+  }, [() => toValue(url)]);
 
   // 组件卸载时清理资源
   onBeforeUnmount(() => {