diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 97cc1f8a..17e29a13 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -9,5 +9,6 @@
     "antfu.iconify",
     "antfu.unocss",
     "mikestead.dotenv",
+    "warmthsea.vscode-custom-code-color",
   ]
 }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0d366fb0..3238cffd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -108,7 +108,11 @@
   "i18n-ally.sortKeys": true,
   "i18n-ally.namespace": true,
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
-  "i18n-ally.enabledParsers": ["json","ts","js"],
+  "i18n-ally.enabledParsers": [
+    "json",
+    "ts",
+    "js"
+  ],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": [
@@ -182,5 +186,7 @@
     ".eslintrc.cjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,.stylelintrc.*"
   },
   "terminal.integrated.scrollback": 10000,
-  "nuxt.isNuxtApp": false
-}
+  "nuxt.isNuxtApp": false,
+  "vscodeCustomCodeColor.highlightValue": "v-auth",
+  "vscodeCustomCodeColor.highlightValueColor": "#6366f1",
+}
\ No newline at end of file
diff --git a/src/directives/permission.ts b/src/directives/permission.ts
index 319e340f..49cdcf38 100644
--- a/src/directives/permission.ts
+++ b/src/directives/permission.ts
@@ -6,6 +6,7 @@
 import type { App, Directive, DirectiveBinding } from 'vue';
 
 import { usePermission } from '@/hooks/web/usePermission';
+import { RoleEnum } from '@/enums/roleEnum';
 
 function isAuth(el: Element, binding: any) {
   const { hasPermission } = usePermission();
@@ -17,7 +18,7 @@ function isAuth(el: Element, binding: any) {
   }
 }
 
-const mounted = (el: Element, binding: DirectiveBinding<any>) => {
+const mounted = (el: Element, binding: DirectiveBinding<string | string[] | RoleEnum[]>) => {
   isAuth(el, binding);
 };
 
diff --git a/types/directives.d.ts b/types/directives.d.ts
new file mode 100644
index 00000000..4d61b235
--- /dev/null
+++ b/types/directives.d.ts
@@ -0,0 +1,11 @@
+import type { Directive } from 'vue';
+import { RoleEnum } from '@/enums/roleEnum';
+
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    vLoading: Directive<Element, boolean>;
+    vAuth: Directive<Element, string | string[] | RoleEnum[]>;
+  }
+}
+
+export {};