🎟 优化

kicc-ui/src/directives/clickOutside.ts

@@ -10,17 +10,12 @@ import { isServer } from '/@/utils/is';
 import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
 
 type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
-
+type FlushList = Map<HTMLElement, {
-type FlushList = Map<
+  documentHandler: DocumentHandler;
-  HTMLElement,
+  bindingFn: (...args: unknown[]) => unknown;
-  {
+}>;
-    documentHandler: DocumentHandler;
-    bindingFn: (...args: unknown[]) => unknown;
-  }
->;
 
 const nodeList: FlushList = new Map();
-
 let startClick: MouseEvent;
 
 if (!isServer) {
@@ -36,38 +31,24 @@ function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): Docu
   let excludes: HTMLElement[] = [];
   if (Array.isArray(binding.arg)) {
     excludes = binding.arg;
-  } else {
+  // 由于当前对绑定类型的实现是错误的，这里需要进行类型转换
-    // 由于当前对绑定类型的实现是错误的，这里需要进行类型转换
+  } else excludes.push(binding.arg as unknown as HTMLElement);
-    excludes.push(binding.arg as unknown as HTMLElement);
-  }
   return function (mouseup, mousedown) {
-    const popperRef = (
+    const popperRef = (binding.instance as ComponentPublicInstance<{
-      binding.instance as ComponentPublicInstance<{
+      popperRef: Nullable<HTMLElement>;
-        popperRef: Nullable<HTMLElement>;
+    }>).popperRef;
-      }>
-    ).popperRef;
     const mouseUpTarget = mouseup.target as Node;
     const mouseDownTarget = mousedown.target as Node;
     const isBound = !binding || !binding.instance;
     const isTargetExists = !mouseUpTarget || !mouseDownTarget;
     const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
     const isSelf = el === mouseUpTarget;
-
     const isTargetExcluded =
       (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
       (excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
     const isContainedByPopper =
       popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
-    if (
+    if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) return;
-      isBound ||
-      isTargetExists ||
-      isContainedByEl ||
-      isSelf ||
-      isTargetExcluded ||
-      isContainedByPopper
-    ) {
-      return;
-    }
     binding.value();
   };
 }

kicc-ui/src/directives/loading.ts

@@ -14,8 +14,7 @@ const loadingDirective: Directive = {
     const background = el.getAttribute('loading-background');
     const size = el.getAttribute('loading-size');
     const fullscreen = !!binding.modifiers.fullscreen;
-    const instance = createLoading(
+    const instance = createLoading({
-      {
         tip,
         background,
         size: size || 'large',

kicc-ui/src/directives/permission.ts

@@ -12,7 +12,6 @@ import { usePermission } from '/@/hooks/web/usePermission';
 
 function isAuth(el: Element, binding: any) {
   const { hasPermission } = usePermission();
-
   const value = binding.value;
   if (!value) return;
   if (!hasPermission(value)) {
@@ -24,9 +23,7 @@ const mounted = (el: Element, binding: DirectiveBinding<any>) => {
   isAuth(el, binding);
 };
 
-const authDirective: Directive = {
+const authDirective: Directive = { mounted };
-  mounted,
-};
 
 export function setupPermissionDirective(app: App) {
   app.directive('auth', authDirective);

kicc-ui/src/directives/repeatClick.ts

@@ -14,13 +14,10 @@ const repeatDirective: Directive = {
     let startTime = 0;
     const handler = (): void => binding?.value();
     const clear = (): void => {
-      if (Date.now() - startTime < 100) {
+      if (Date.now() - startTime < 100) handler();
-        handler();
-      }
       interval && clearInterval(interval);
       interval = null;
     };
-
     on(el, 'mousedown', (e: MouseEvent): void => {
       if ((e as any).button !== 0) return;
       startTime = Date.now();

kicc-ui/src/directives/ripple/index.ts

@@ -28,13 +28,10 @@ const options: RippleOptions = {
 const RippleDirective: Directive & RippleProto = {
   beforeMount: (el: HTMLElement, binding) => {
     if (binding.value === false) return;
-
     const bg = el.getAttribute('ripple-background');
     setProps(Object.keys(binding.modifiers), options);
-
     const background = bg || RippleDirective.background;
     const zIndex = RippleDirective.zIndex;
-
     el.addEventListener(options.event, (event: EventType) => {
       rippler({
         event,
@@ -54,12 +51,7 @@ const RippleDirective: Directive & RippleProto = {
   },
 };
 
-function rippler({
+function rippler({ event, el, zIndex, background }: { event: EventType; el: HTMLElement } & RippleProto) {
-  event,
-  el,
-  zIndex,
-  background,
-}: { event: EventType; el: HTMLElement } & RippleProto) {
   const targetBorder = parseInt(getComputedStyle(el).borderWidth.replace('px', ''));
   const clientX = event.clientX || event.touches[0].clientX;
   const clientY = event.clientY || event.touches[0].clientY;
@@ -79,7 +71,7 @@ function rippler({
   const ripple = document.createElement('div');
   const rippleContainer = document.createElement('div');
 
-  // Styles for ripple
+  // 涟漪的样式
   ripple.className = 'ripple';
 
   Object.assign(ripple.style ?? {}, {