types: complete dirctives and v-role custom color (#3718)

* types: complete dirctives

* chore: v-auth custom color

.vscode/extensions.json

@@ -9,5 +9,6 @@
     "antfu.iconify",
     "antfu.unocss",
     "mikestead.dotenv",
+    "warmthsea.vscode-custom-code-color",
   ]
 }

.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",
+}

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);
 };
 

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 {};