diff --git a/src/hooks/core/useEffect.ts b/src/hooks/core/useEffect.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c85565b9c45c05863fe042fa8be02addc542746
--- /dev/null
+++ b/src/hooks/core/useEffect.ts
@@ -0,0 +1,16 @@
+import { WatchOptions } from 'vue';
+import { watch } from 'vue';
+import { isFunction } from '/@/utils/is';
+
+export const useEffect = (effectHandler: Fn, dependencies: any[]) => {
+  return watch(
+    dependencies,
+    (changedDependencies, prevDependencies, onCleanUp) => {
+      const effectCleaner = effectHandler(changedDependencies, prevDependencies);
+      if (isFunction(effectCleaner)) {
+        onCleanUp(effectCleaner);
+      }
+    },
+    { immediate: true, deep: true } as WatchOptions
+  );
+};
diff --git a/src/layouts/default/setting/components/SettingFooter.vue b/src/layouts/default/setting/components/SettingFooter.vue
index 270b85f117fc28f53aa5ff3ff1014fcaeccd3d60..6c8a8c24275b9635806a1bf927020280b4958e68 100644
--- a/src/layouts/default/setting/components/SettingFooter.vue
+++ b/src/layouts/default/setting/components/SettingFooter.vue
@@ -27,7 +27,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
+  import { updateColorWeak, updateGrayMode } from '/@/logics/theme';
 
   export default defineComponent({
     name: 'SettingFooter',
diff --git a/src/layouts/default/setting/handler.ts b/src/layouts/default/setting/handler.ts
index 6a2dc41516b237bb7c404e8e4ee7b47a3e2b5052..2a711a45b0a9b12a439e4e1ba46bcc97a2ee1885 100644
--- a/src/layouts/default/setting/handler.ts
+++ b/src/layouts/default/setting/handler.ts
@@ -4,7 +4,7 @@ import {
   updateGrayMode,
   updateHeaderBgColor,
   updateSidebarBgColor,
-} from '/@/setup/theme';
+} from '/@/logics/theme';
 import { appStore } from '/@/store/modules/app';
 import { ProjectConfig } from '/@/types/config';
 
diff --git a/src/logics/mitt/tabChange.ts b/src/logics/mitt/tabChange.ts
index 596688122d5b7ac1f3157a198acee9192d60dff7..5ca7f46441d0cee1718de184327bd653da99f593 100644
--- a/src/logics/mitt/tabChange.ts
+++ b/src/logics/mitt/tabChange.ts
@@ -23,7 +23,5 @@ export function listenerLastChangeTab(
   immediate = true
 ) {
   mitt.on(key, callback);
-  if (immediate) {
-    callback(lastChangeTab);
-  }
+  immediate && callback(lastChangeTab);
 }
diff --git a/src/setup/theme/index.ts b/src/logics/theme/index.ts
similarity index 99%
rename from src/setup/theme/index.ts
rename to src/logics/theme/index.ts
index 91967244925fa29ba1ad1e0777fa9a6789bd02bf..7e1b3b5ddee86563989c5ac17938dbe912562b9a 100644
--- a/src/setup/theme/index.ts
+++ b/src/logics/theme/index.ts
@@ -24,7 +24,7 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
 
 /**
  * Change the status of the project's color weakness mode
- * @param gray
+ * @param colorWeak
  */
 export const updateColorWeak = (colorWeak: boolean) => {
   toggleClass(colorWeak, 'color-weak', document.documentElement);
diff --git a/src/router/types.d.ts b/src/router/types.d.ts
index bb40d916a32884d75b7545b5f89813a74e53cbb3..2dd457069359db7942221d7a0d37aaa631f46e0b 100644
--- a/src/router/types.d.ts
+++ b/src/router/types.d.ts
@@ -14,7 +14,8 @@ export interface RouteMeta {
   affix?: boolean;
   // icon on tab
   icon?: string;
-  // Jump address
+
+  frameSrc?: string;
 
   // current page transition
   transitionName?: string;
diff --git a/src/setup/App.ts b/src/setup/App.ts
index b7b97d8d36512f28597b04cf8405a99e5088a17f..127bff8cf4fef044a7807f8b60b38eeb1339f952 100644
--- a/src/setup/App.ts
+++ b/src/setup/App.ts
@@ -17,7 +17,7 @@ import {
   updateColorWeak,
   updateHeaderBgColor,
   updateSidebarBgColor,
-} from '/@/setup/theme';
+} from '/@/logics/theme';
 
 import { appStore } from '/@/store/modules/app';
 import { deepMerge } from '/@/utils';