chore: prettier code

Vben
1 parent 34a80542
Showing 36 changed files with 381 additions and 432 deletions
src/components/ContextMenu/index.ts
src/components/ContextMenu/src/ContextMenu.tsx → src/components/ContextMenu/src/ContextMenu.vue
src/components/ContextMenu/src/createContextMenu.ts
src/components/ContextMenu/src/index.less
src/components/ContextMenu/src/props.ts
src/components/ContextMenu/src/types.ts → src/components/ContextMenu/src/typing.ts
src/components/Drawer/src/BasicDrawer.vue
src/components/Drawer/src/components/DrawerFooter.vue
src/components/Form/src/components/FormItem.vue
src/components/Icon/src/SvgIcon.vue
src/components/Modal/src/BasicModal.vue
src/components/SimpleMenu/src/components/MenuItem.vue
src/components/SimpleMenu/src/components/SubMenuItem.vue
src/components/SimpleMenu/src/components/useMenu.ts
src/directives/clickOutside.ts
src/hooks/web/useI18n.ts
src/hooks/web/useMessage.tsx
src/layouts/default/header/components/Breadcrumb.vue
src/layouts/default/menu/index.vue
src/layouts/default/setting/SettingDrawer.tsx
 export { createContextMenu, destroyContextMenu } from './src/createContextMenu';
-export * from './src/types';
+export * from './src/typing';
-import './index.less';
-
-import type { ContextMenuItem, ItemContentProps } from './types';
-import type { FunctionalComponent, CSSProperties } from 'vue';
-
-import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
-
-import Icon from '/@/components/Icon';
-import { Menu, Divider } from 'ant-design-vue';
-
-import { contextMenuProps } from './props';
-
-const prefixCls = 'context-menu';
-
-const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
-  const { item } = props;
-  return (
-    <span
-      style="display: inline-block; width: 100%; "
-      class="px-4"
-      onClick={props.handler.bind(null, item)}
-    >
-      {props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
-      <span>{item.label}</span>
-    </span>
-  );
-};
-
-export default defineComponent({
-  name: 'ContextMenu',
-  props: contextMenuProps,
-  setup(props) {
-    const wrapRef = ref<ElRef>(null);
-    const showRef = ref(false);
-
-    const getStyle = computed((): CSSProperties => {
-      const { axis, items, styles, width } = props;
-      const { x, y } = axis || { x: 0, y: 0 };
-      const menuHeight = (items || []).length * 40;
-      const menuWidth = width;
-      const body = document.body;
-
-      const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
-      const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
-      return {
-        ...styles,
-        width: `${width}px`,
-        left: `${left + 1}px`,
-        top: `${top + 1}px`,
-      };
-    });
-
-    onMounted(() => {
-      nextTick(() => (showRef.value = true));
-    });
-
-    onUnmounted(() => {
-      const el = unref(wrapRef);
-      el && document.body.removeChild(el);
-    });
+<script lang="tsx">
+  import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
+  import type { FunctionalComponent, CSSProperties } from 'vue';
+  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
+  import Icon from '/@/components/Icon';
+  import { Menu, Divider } from 'ant-design-vue';
+
+  const prefixCls = 'context-menu';
+
+  const props = {
+    width: { type: Number, default: 156 },
+    customEvent: { type: Object as PropType<Event>, default: null },
+    styles: { type: Object as PropType<CSSProperties> },
+    showIcon: { type: Boolean, default: true },
+    axis: {
+      // The position of the right mouse button click
+      type: Object as PropType<Axis>,
+      default() {
+        return { x: 0, y: 0 };
+      },
+    },
+    items: {
+      // The most important list, if not, will not be displayed
+      type: Array as PropType<ContextMenuItem[]>,
+      default() {
+        return [];
+      },
+    },
+  };
+
+  const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
+    const { item } = props;
+    return (
+      <span
+        style="display: inline-block; width: 100%; "
+        class="px-4"
+        onClick={props.handler.bind(null, item)}
+      >
+        {props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
+        <span>{item.label}</span>
+      </span>
+    );
+  };
+
+  export default defineComponent({
+    name: 'ContextMenu',
+    props,
+    setup(props) {
+      const wrapRef = ref<ElRef>(null);
+      const showRef = ref(false);
+
+      const getStyle = computed((): CSSProperties => {
+        const { axis, items, styles, width } = props;
+        const { x, y } = axis || { x: 0, y: 0 };
+        const menuHeight = (items || []).length * 40;
+        const menuWidth = width;
+        const body = document.body;
+
+        const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
+        const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+        return {
+          ...styles,
+          width: `${width}px`,
+          left: `${left + 1}px`,
+          top: `${top + 1}px`,
+        };
+      });
-    function handleAction(item: ContextMenuItem, e: MouseEvent) {
-      const { handler, disabled } = item;
-      if (disabled) return;
-      showRef.value = false;
+      onMounted(() => {
+        nextTick(() => (showRef.value = true));
+      });
-      e?.stopPropagation();
-      e?.preventDefault();
-      handler?.();
-    }
+      onUnmounted(() => {
+        unref(wrapRef) && document.body.removeChild(el);
+      });
-    function renderMenuItem(items: ContextMenuItem[]) {
-      return items.map((item) => {
-        const { disabled, label, children, divider = false } = item;
+      function handleAction(item: ContextMenuItem, e: MouseEvent) {
+        const { handler, disabled } = item;
+        if (disabled) {
+          return;
+        }
+        showRef.value = false;
+        e?.stopPropagation();
+        e?.preventDefault();
+        handler?.();
+      }
+
+      function renderMenuItem(items: ContextMenuItem[]) {
+        return items.map((item) => {
+          const { disabled, label, children, divider = false } = item;
+
+          const contentProps = {
+            item,
+            handler: handleAction,
+            showIcon: props.showIcon,
+          };
+
+          if (!children || children.length === 0) {
+            return (
+              <>
+                <Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
+                  <ItemContent {...contentProps} />
+                </Menu.Item>
+                {divider ? <Divider key={`d-${label}`} /> : null}
+              </>
+            );
+          }
+          if (!unref(showRef)) return null;
-        const DividerComp = divider ? <Divider key={`d-${label}`} /> : null;
-        if (!children || children.length === 0) {
           return (
-            <>
-              <Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
-                <ItemContent showIcon={props.showIcon} item={item} handler={handleAction} />
-              </Menu.Item>
-              {DividerComp}
-            </>
+            <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
+              {{
+                title: () => <ItemContent {...contentProps} />,
+                default: () => renderMenuItem(children),
+              }}
+            </Menu.SubMenu>
           );
-        }
+        });
+      }
+      return () => {
+        const { items } = props;
         if (!unref(showRef)) return null;
-
         return (
-          <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
-            {{
-              title: () => (
-                <ItemContent showIcon={props.showIcon} item={item} handler={handleAction} />
-              ),
-              default: () => renderMenuItem(children),
-            }}
-          </Menu.SubMenu>
+          <Menu
+            inlineIndent={12}
+            mode="vertical"
+            class={prefixCls}
+            ref={wrapRef}
+            style={unref(getStyle)}
+          >
+            {renderMenuItem(items)}
+          </Menu>
         );
-      });
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @default-height: 42px !important;
+
+  @small-height: 36px !important;
+
+  @large-height: 36px !important;
+
+  .item-style() {
+    li {
+      display: inline-block;
+      width: 100%;
+      height: @default-height;
+      margin: 0 !important;
+      line-height: @default-height;
+
+      span {
+        line-height: @default-height;
+      }
+
+      > div {
+        margin: 0 !important;
+      }
+
+      &:not(.ant-menu-item-disabled):hover {
+        color: @text-color-base;
+        background-color: @item-hover-bg;
+      }
+    }
+  }
+
+  .context-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    display: block;
+    width: 156px;
+    margin: 0;
+    list-style: none;
+    background-color: @component-background;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 0.25rem;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
+      0 1px 5px 0 rgba(0, 0, 0, 0.06);
+    background-clip: padding-box;
+    user-select: none;
+
+    .item-style();
+
+    .ant-divider {
+      margin: 0 0;
+    }
+
+    &__popup {
+      .ant-divider {
+        margin: 0 0;
+      }
+
+      .item-style();
+    }
+
+    .ant-menu-submenu-title,
+    .ant-menu-item {
+      padding: 0 !important;
     }
-    return () => {
-      const { items } = props;
-      if (!unref(showRef)) return null;
-      return (
-        <Menu
-          inlineIndent={12}
-          mode="vertical"
-          class={prefixCls}
-          ref={wrapRef}
-          style={unref(getStyle)}
-        >
-          {renderMenuItem(items)}
-        </Menu>
-      );
-    };
-  },
-});
+  }
+</style>
-import contextMenuVue from './ContextMenu';
+import contextMenuVue from './ContextMenu.vue';
 import { isClient } from '/@/utils/is';
-import { CreateContextOptions, ContextMenuProps } from './types';
+import { CreateContextOptions, ContextMenuProps } from './typing';
 import { createVNode, render } from 'vue';
 const menuManager: {
@@ -16,7 +16,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
   event && event?.preventDefault();
-  if (!isClient) return;
+  if (!isClient) {
+    return;
+  }
   return new Promise((resolve) => {
     const body = document.body;
@@ -54,9 +56,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
       body.removeEventListener('scroll', handleClick);
     };
-    menuManager.resolve = function (...arg: any) {
+    menuManager.resolve = function (arg) {
       remove();
-      resolve(arg[0]);
+      resolve(arg);
     };
     remove();
     body.appendChild(container);
-@default-height: 42px !important;
-
-@small-height: 36px !important;
-
-@large-height: 36px !important;
-
-.item-style() {
-  li {
-    display: inline-block;
-    width: 100%;
-    height: @default-height;
-    margin: 0 !important;
-    line-height: @default-height;
-
-    span {
-      line-height: @default-height;
-    }
-
-    > div {
-      margin: 0 !important;
-    }
-
-    &:not(.ant-menu-item-disabled):hover {
-      color: @text-color-base;
-      background-color: @item-hover-bg;
-    }
-  }
-}
-
-.context-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 200;
-  display: block;
-  width: 156px;
-  margin: 0;
-  list-style: none;
-  background-color: @component-background;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 0.25rem;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
-    0 1px 5px 0 rgba(0, 0, 0, 0.06);
-  background-clip: padding-box;
-  user-select: none;
-
-  .item-style();
-
-  .ant-divider {
-    margin: 0 0;
-  }
-
-  &__popup {
-    .ant-divider {
-      margin: 0 0;
-    }
-
-    .item-style();
-  }
-
-  .ant-menu-submenu-title,
-  .ant-menu-item {
-    padding: 0 !important;
-  }
-}
-import type { PropType } from 'vue';
-import type { Axis, ContextMenuItem } from './types';
-import { propTypes } from '/@/utils/propTypes';
-export const contextMenuProps = {
-  width: propTypes.number.def(156),
-  customEvent: {
-    type: Object as PropType<Event>,
-    default: null,
-  },
-  styles: propTypes.style,
-  showIcon: propTypes.bool.def(true),
-  axis: {
-    // The position of the right mouse button click
-    type: Object as PropType<Axis>,
-    default() {
-      return { x: 0, y: 0 };
-    },
-  },
-  items: {
-    // The most important list, if not, will not be displayed
-    type: Array as PropType<ContextMenuItem[]>,
-    default() {
-      return [];
-    },
-  },
-};
@@ -81,46 +81,40 @@
       instance && emit('register', drawerInstance, instance.uid);
-      const getMergeProps = computed(
-        (): DrawerProps => {
-          return deepMerge(toRaw(props), unref(propsRef));
-        }
-      );
+      const getMergeProps = computed((): DrawerProps => {
+        return deepMerge(toRaw(props), unref(propsRef));
+      });
-      const getProps = computed(
-        (): DrawerProps => {
-          const opt = {
-            placement: 'right',
-            ...unref(attrs),
-            ...unref(getMergeProps),
-            visible: unref(visibleRef),
-          };
-          opt.title = undefined;
-          const { isDetail, width, wrapClassName, getContainer } = opt;
-          if (isDetail) {
-            if (!width) {
-              opt.width = '100%';
-            }
-            const detailCls = `${prefixCls}__detail`;
-            opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
-
-            if (!getContainer) {
-              // TODO type error?
-              opt.getContainer = `.${prefixVar}-layout-content` as any;
-            }
+      const getProps = computed((): DrawerProps => {
+        const opt = {
+          placement: 'right',
+          ...unref(attrs),
+          ...unref(getMergeProps),
+          visible: unref(visibleRef),
+        };
+        opt.title = undefined;
+        const { isDetail, width, wrapClassName, getContainer } = opt;
+        if (isDetail) {
+          if (!width) {
+            opt.width = '100%';
           }
-          return opt as DrawerProps;
-        }
-      );
+          const detailCls = `${prefixCls}__detail`;
+          opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
-      const getBindValues = computed(
-        (): DrawerProps => {
-          return {
-            ...attrs,
-            ...unref(getProps),
-          };
+          if (!getContainer) {
+            // TODO type error?
+            opt.getContainer = `.${prefixVar}-layout-content` as any;
+          }
         }
-      );
+        return opt as DrawerProps;
+      });
+
+      const getBindValues = computed((): DrawerProps => {
+        return {
+          ...attrs,
+          ...unref(getProps),
+        };
+      });
       // Custom implementation of the bottom button,
       const getFooterHeight = computed(() => {
@@ -133,15 +127,13 @@
         return `0px`;
       });
-      const getScrollContentStyle = computed(
-        (): CSSProperties => {
-          const footerHeight = unref(getFooterHeight);
-          return {
-            position: 'relative',
-            height: `calc(100% - ${footerHeight})`,
-          };
-        }
-      );
+      const getScrollContentStyle = computed((): CSSProperties => {
+        const footerHeight = unref(getFooterHeight);
+        return {
+          position: 'relative',
+          height: `calc(100% - ${footerHeight})`,
+        };
+      });
       const getLoading = computed(() => {
         return !!unref(getProps)?.loading;
@@ -43,15 +43,13 @@
     setup(props, { emit }) {
       const { prefixCls } = useDesign('basic-drawer-footer');
-      const getStyle = computed(
-        (): CSSProperties => {
-          const heightStr = `${props.height}`;
-          return {
-            height: heightStr,
-            lineHeight: heightStr,
-          };
-        }
-      );
+      const getStyle = computed((): CSSProperties => {
+        const heightStr = `${props.height}`;
+        return {
+          height: heightStr,
+          lineHeight: heightStr,
+        };
+      });
       function handleOk() {
         emit('ok');
@@ -174,9 +174,7 @@
           return Promise.resolve();
         }
-        const getRequired = isFunction(required)
-          ? required(unref(getValues))
-          : required;
+        const getRequired = isFunction(required) ? required(unref(getValues)) : required;
         if ((!rules || rules.length === 0) && getRequired) {
           rules = [{ required: getRequired, validator }];
@@ -36,17 +36,15 @@
       const { prefixCls } = useDesign('svg-icon');
       const symbolId = computed(() => `#${props.prefix}-${props.name}`);
-      const getStyle = computed(
-        (): CSSProperties => {
-          const { size } = props;
-          let s = `${size}`;
-          s = `${s.replace('px', '')}px`;
-          return {
-            width: s,
-            height: s,
-          };
-        }
-      );
+      const getStyle = computed((): CSSProperties => {
+        const { size } = props;
+        let s = `${size}`;
+        s = `${s.replace('px', '')}px`;
+        return {
+          width: s,
+          height: s,
+        };
+      });
       return { symbolId, prefixCls, getStyle };
     },
   });
@@ -107,14 +107,12 @@
       }
       // Custom title component: get title
-      const getMergeProps = computed(
-        (): ModalProps => {
-          return {
-            ...props,
-            ...(unref(propsRef) as any),
-          };
-        }
-      );
+      const getMergeProps = computed((): ModalProps => {
+        return {
+          ...props,
+          ...(unref(propsRef) as any),
+        };
+      });
       const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
         modalWrapperRef,
@@ -123,31 +121,27 @@
       });
       // modal component does not need title and origin buttons
-      const getProps = computed(
-        (): ModalProps => {
-          const opt = {
-            ...unref(getMergeProps),
-            visible: unref(visibleRef),
-            okButtonProps: undefined,
-            cancelButtonProps: undefined,
-            title: undefined,
-          };
-          return {
-            ...opt,
-            wrapClassName: unref(getWrapClassName),
-          };
-        }
-      );
+      const getProps = computed((): ModalProps => {
+        const opt = {
+          ...unref(getMergeProps),
+          visible: unref(visibleRef),
+          okButtonProps: undefined,
+          cancelButtonProps: undefined,
+          title: undefined,
+        };
+        return {
+          ...opt,
+          wrapClassName: unref(getWrapClassName),
+        };
+      });
-      const getBindValue = computed(
-        (): Recordable => {
-          const attr = { ...attrs, ...unref(getProps) };
-          if (unref(fullScreenRef)) {
-            return omit(attr, 'height');
-          }
-          return attr;
+      const getBindValue = computed((): Recordable => {
+        const attr = { ...attrs, ...unref(getProps) };
+        if (unref(fullScreenRef)) {
+          return omit(attr, 'height');
         }
-      );
+        return attr;
+      });
       const getWrapperHeight = computed(() => {
         if (unref(fullScreenRef)) return undefined;
@@ -39,9 +39,8 @@
       const active = ref(false);
-      const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem(
-        instance
-      );
+      const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } =
+        useMenuItem(instance);
       const { prefixCls } = useDesign('menu');
@@ -109,9 +109,8 @@
         isChild: false,
       });
-      const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } = useMenuItem(
-        instance
-      );
+      const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } =
+        useMenuItem(instance);
       const { prefixCls } = useDesign('menu');
@@ -148,13 +147,11 @@
       const getCollapse = computed(() => rootProps.collapse);
       const getTheme = computed(() => rootProps.theme);
-      const getOverlayStyle = computed(
-        (): CSSProperties => {
-          return {
-            minWidth: '200px',
-          };
-        }
-      );
+      const getOverlayStyle = computed((): CSSProperties => {
+        return {
+          minWidth: '200px',
+        };
+      });
       const getIsOpend = computed(() => {
         const name = props.name;
@@ -14,26 +14,24 @@ export function useMenuItem(instance: ComponentInternalInstance | null) {
     return findParentMenu(['SubMenu']);
   });
-  const getItemStyle = computed(
-    (): CSSProperties => {
-      let parent = instance?.parent;
-      if (!parent) return {};
-      const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20;
-      let padding = indentSize;
+  const getItemStyle = computed((): CSSProperties => {
+    let parent = instance?.parent;
+    if (!parent) return {};
+    const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20;
+    let padding = indentSize;
-      if (unref(getParentRootMenu)?.props.collapse) {
-        padding = indentSize;
-      } else {
-        while (parent && parent.type.name !== 'Menu') {
-          if (parent.type.name === 'SubMenu') {
-            padding += indentSize;
-          }
-          parent = parent.parent;
+    if (unref(getParentRootMenu)?.props.collapse) {
+      padding = indentSize;
+    } else {
+      while (parent && parent.type.name !== 'Menu') {
+        if (parent.type.name === 'SubMenu') {
+          padding += indentSize;
         }
+        parent = parent.parent;
       }
-      return { paddingLeft: padding + 'px' };
     }
-  );
+    return { paddingLeft: padding + 'px' };
+  });
   function findParentMenu(name: string[]) {
     let parent = instance?.parent;
@@ -31,12 +31,14 @@ function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): Docu
     excludes = binding.arg;
   } else {
     // due to current implementation on binding type is wrong the type casting is necessary here
-    excludes.push((binding.arg as unknown) as HTMLElement);
+    excludes.push(binding.arg as unknown as HTMLElement);
   }
   return function (mouseup, mousedown) {
-    const popperRef = (binding.instance as ComponentPublicInstance<{
-      popperRef: Nullable<HTMLElement>;
-    }>).popperRef;
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: Nullable<HTMLElement>;
+      }>
+    ).popperRef;
     const mouseUpTarget = mouseup.target as Node;
     const mouseDownTarget = mousedown.target as Node;
     const isBound = !binding || !binding.instance;
@@ -21,9 +21,7 @@ function getKey(namespace: string | undefined, key: string) {
   return `${namespace}.${key}`;
 }
-export function useI18n(
-  namespace?: string
-): {
+export function useI18n(namespace?: string): {
   t: I18nGlobalTranslation;
 } {
   const normalFn = {
@@ -60,7 +60,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
     icon: getIcon(iconType),
     ...options,
   };
-  return (Modal.confirm(opt) as unknown) as ConfirmOptions;
+  return Modal.confirm(opt) as unknown as ConfirmOptions;
 }
 const getBaseOptions = () => {
@@ -71,10 +71,10 @@
         const breadcrumbList = filterItem(matched);
         if (currentRoute.value.meta?.currentActiveMenu) {
-          breadcrumbList.push(({
+          breadcrumbList.push({
             ...currentRoute.value,
             name: currentRoute.value.meta?.title || currentRoute.value.name,
-          } as unknown) as RouteLocationMatched);
+          } as unknown as RouteLocationMatched);
         }
         routes.value = breadcrumbList;
       });
@@ -76,13 +76,11 @@
         );
       });
-      const getWrapperStyle = computed(
-        (): CSSProperties => {
-          return {
-            height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`,
-          };
-        }
-      );
+      const getWrapperStyle = computed((): CSSProperties => {
+        return {
+          height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`,
+        };
+      });
       const getLogoClass = computed(() => {
         return [
@@ -58,12 +58,8 @@ export default defineComponent({
       getThemeColor,
     } = useRootSetting();
-    const {
-      getOpenPageLoading,
-      getBasicTransition,
-      getEnableTransition,
-      getOpenNProgress,
-    } = useTransitionSetting();
+    const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
+      useTransitionSetting();
     const {
       getIsHorizontal,
@@ -89,19 +89,17 @@
         ];
       });
-      const getHiddenDomStyle = computed(
-        (): CSSProperties => {
-          const width = `${unref(getRealWidth)}px`;
-          return {
-            width: width,
-            overflow: 'hidden',
-            flex: `0 0 ${width}`,
-            maxWidth: width,
-            minWidth: width,
-            transition: 'all 0.2s',
-          };
-        }
-      );
+      const getHiddenDomStyle = computed((): CSSProperties => {
+        const width = `${unref(getRealWidth)}px`;
+        return {
+          width: width,
+          overflow: 'hidden',
+          flex: `0 0 ${width}`,
+          maxWidth: width,
+          minWidth: width,
+          transition: 'all 0.2s',
+        };
+      });
       return {
         prefixCls,
@@ -147,14 +147,12 @@
       useDragLine(sideRef, dragBarRef, true);
-      const getMenuStyle = computed(
-        (): CSSProperties => {
-          return {
-            width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
-            left: `${unref(getMixSideWidth)}px`,
-          };
-        }
-      );
+      const getMenuStyle = computed((): CSSProperties => {
+        return {
+          width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
+          left: `${unref(getMixSideWidth)}px`,
+        };
+      });
       const getIsFixed = computed(() => {
         /* eslint-disable-next-line */
@@ -171,20 +169,16 @@
         return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
       });
-      const getDomStyle = computed(
-        (): CSSProperties => {
-          const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
-          const width = `${unref(getMixSideWidth) + fixedWidth}px`;
-          return getWrapCommonStyle(width);
-        }
-      );
+      const getDomStyle = computed((): CSSProperties => {
+        const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
+        const width = `${unref(getMixSideWidth) + fixedWidth}px`;
+        return getWrapCommonStyle(width);
+      });
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          const width = `${unref(getMixSideWidth)}px`;
-          return getWrapCommonStyle(width);
-        }
-      );
+      const getWrapStyle = computed((): CSSProperties => {
+        const width = `${unref(getMixSideWidth)}px`;
+        return getWrapCommonStyle(width);
+      });
       const getMenuEvents = computed(() => {
         return !unref(getMixSideFixed)
@@ -106,8 +106,7 @@
             .getRoutes()
             .find((item) => item.path === currentActiveMenu);
-          findParentRoute &&
-            tabStore.addTab((findParentRoute as unknown) as RouteLocationNormalized);
+          findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
         } else {
           tabStore.addTab(unref(route));
         }
@@ -30,14 +30,14 @@ export function initAffixTabs(): string[] {
    * @description: Set fixed tabs
    */
   function addAffixTabs(): void {
-    const affixTabs = filterAffixTabs((router.getRoutes() as unknown) as RouteLocationNormalized[]);
+    const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[]);
     affixList.value = affixTabs;
     for (const tab of affixTabs) {
-      tabStore.addTab(({
+      tabStore.addTab({
         meta: tab.meta,
         name: tab.name,
         path: tab.path,
-      } as unknown) as RouteLocationNormalized);
+      } as unknown as RouteLocationNormalized);
     }
   }
@@ -20,11 +20,9 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
   const { currentRoute } = useRouter();
   const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs();
-  const getTargetTab = computed(
-    (): RouteLocationNormalized => {
-      return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
-    }
-  );
+  const getTargetTab = computed((): RouteLocationNormalized => {
+    return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
+  });
   /**
    * @description: drop-down list
@@ -16,8 +16,7 @@ export function useFrameKeepAlive() {
   const { getShowMultipleTab } = useMultipleTabSetting();
   const tabStore = useMultipleTabStore();
   const getFramePages = computed(() => {
-    const ret =
-      getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
+    const ret = getAllFramePages(toRaw(router.getRoutes()) as unknown as AppRouteRecordRaw[]) || [];
     return ret;
   });
@@ -60,7 +60,7 @@ export function createPermissionGuard(router: Router) {
     const routes = await permissionStore.buildRoutesAction();
     routes.forEach((route) => {
-      router.addRoute((route as unknown) as RouteRecordRaw);
+      router.addRoute(route as unknown as RouteRecordRaw);
     });
     const redirectPath = (from.query.redirect || to.path) as string;
@@ -80,7 +80,7 @@ export class Memory&lt;T = any, V = any&gt; {
   resetCache(cache: { [K in keyof T]: Cache }) {
     Object.keys(cache).forEach((key) => {
-      const k = (key as any) as keyof T;
+      const k = key as any as keyof T;
       const item = cache[k];
       if (item && item.time) {
         const now = new Date().getTime();
@@ -17,10 +17,10 @@ export function getStorageShortName() {
 export function getAppEnvConfig() {
   const ENV_NAME = getConfigFileName(import.meta.env);
-  const ENV = ((import.meta.env.DEV
+  const ENV = (import.meta.env.DEV
     ? // Get the global configuration (the configuration will be extracted independently when packaging)
-      ((import.meta.env as unknown) as GlobEnvConfig)
-    : window[ENV_NAME as any]) as unknown) as GlobEnvConfig;
+      (import.meta.env as unknown as GlobEnvConfig)
+    : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
   const {
     VITE_GLOB_APP_TITLE,
@@ -89,6 +89,7 @@ export const isServer = typeof window === &#39;undefined&#39;;
 export const isClient = !isServer;
 export function isUrl(path: string): boolean {
-  const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+  const reg =
+    /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
   return reg.test(path);
 }
@@ -181,16 +181,14 @@
   export default defineComponent({
     components: { BasicForm, CollapseContainer, PageWrapper },
     setup() {
-      const [
-        register,
-        { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        actionColOptions: {
-          span: 24,
-        },
-      });
+      const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] =
+        useForm({
+          labelWidth: 120,
+          schemas,
+          actionColOptions: {
+            span: 24,
+          },
+        });
       const [register1] = useForm({
         labelWidth: 120,
         schemas: schemas1,
@@ -26,7 +26,7 @@
       const treeData = ref<TreeItem[]>([]);
       async function fetch() {
-        treeData.value = ((await getDeptList()) as unknown) as TreeItem[];
+        treeData.value = (await getDeptList()) as unknown as TreeItem[];
       }
       function handleSelect(keys: string, e) {
@@ -54,7 +54,7 @@
             ...data.record,
           });
         }
-        treeData.value = ((await getMenuList()) as any) as TreeItem[];
+        treeData.value = (await getMenuList()) as any as TreeItem[];
       });
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
@@ -64,11 +64,9 @@
         return Number(routeStatus) || status;
       });
-      const getMapValue = computed(
-        (): MapValue => {
-          return unref(statusMapRef).get(unref(getStatus)) as MapValue;
-        }
-      );
+      const getMapValue = computed((): MapValue => {
+        return unref(statusMapRef).get(unref(getStatus)) as MapValue;
+      });
       const backLoginI18n = t('sys.exception.backLogin');
       const backHomeI18n = t('sys.exception.backHome');
@@ -32,13 +32,11 @@
       const { prefixCls } = useDesign('iframe-page');
       useWindowSizeFn(calcHeight, 150, { immediate: true });
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          return {
-            height: `${unref(heightRef)}px`,
-          };
-        }
-      );
+      const getWrapStyle = computed((): CSSProperties => {
+        return {
+          height: `${unref(heightRef)}px`,
+        };
+      });
       function calcHeight() {
         const iframe = unref(frameRef);
@@ -28,7 +28,7 @@ module.exports = {
     'font-family-no-missing-generic-family-keyword': null,
     'declaration-colon-space-after': 'always-single-line',
     'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': 'always',
+    // 'declaration-block-trailing-semicolon': 'always',
     'rule-empty-line-before': [
       'always',
       {