fix: fix all types of errors, compatible with volar plugin

vben
1 parent a5ff5923
Showing 35 changed files with 69 additions and 61 deletions
src/components/Application/src/search/AppSearchModal.vue
src/components/Button/src/BasicButton.vue
src/components/Container/src/ScrollContainer.vue
src/components/ContextMenu/src/ContextMenu.vue
src/components/Cropper/src/CropperAvatar.vue
src/components/Drawer/src/BasicDrawer.vue
src/components/Form/src/BasicForm.vue
src/components/Form/src/components/FormItem.vue
src/components/Loading/src/useLoading.ts
src/components/Markdown/src/Markdown.vue
src/components/Menu/src/BasicMenu.vue
src/components/Menu/src/props.ts
src/components/Modal/src/BasicModal.vue
src/components/Modal/src/components/ModalWrapper.vue
src/components/Preview/src/Preview.vue
src/components/SimpleMenu/src/components/Menu.vue
src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
src/components/Table/src/BasicTable.vue
src/components/Table/src/components/TableAction.vue
src/components/Table/src/components/TableImg.vue
@@ -62,6 +62,7 @@
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchFooter from './AppSearchFooter.vue';
   import Icon from '/@/components/Icon';
+  // @ts-ignore
   import vClickOutside from '/@/directives/clickOutside';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRefs } from '/@/hooks/core/useRefs';
@@ -9,10 +9,11 @@
 </template>
  
 <script lang="ts">
-  export default {
+  import { defineComponent } from 'vue';
+  export default defineComponent({
     name: 'AButton',
     inheritAttrs: false,
-  };
+  });
 </script>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
@@ -54,7 +54,7 @@
           return;
         }
         nextTick(() => {
-          const wrap = unref(scrollbar.wrap);
+          const wrap = unref(scrollbar.wrap) as any;
           if (!wrap) {
             return;
           }
@@ -46,7 +46,7 @@
     name: 'ContextMenu',
     props,
     setup(props) {
-      const wrapRef = ref<ElRef>(null);
+      const wrapRef = ref(null);
       const showRef = ref(false);
  
       const getStyle = computed((): CSSProperties => {
@@ -103,7 +103,7 @@
         t,
         prefixCls,
         register,
-        openModal,
+        openModal: openModal as any,
         getIconWidth,
         sourceValue,
         getClass,
@@ -181,9 +181,9 @@
         onClose,
         t,
         prefixCls,
-        getMergeProps,
+        getMergeProps: getMergeProps as any,
         getScrollContentStyle,
-        getProps,
+        getProps: getProps as any,
         getLoading,
         getBindValues,
         getFooterHeight,
@@ -24,7 +24,7 @@
         </FormItem>
       </template>
  
-      <FormAction v-bind="{ ...getProps, ...advanceState }" @toggle-advanced="handleToggleAdvanced">
+      <FormAction v-bind="getFormActionBindProps" @toggle-advanced="handleToggleAdvanced">
         <template
           #[item]="data"
           v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']"
@@ -62,8 +62,6 @@
   import { basicProps } from './props';
   import { useDesign } from '/@/hooks/web/useDesign';
  
-  import type { RowProps } from 'ant-design-vue/lib/grid/Row';
-
   export default defineComponent({
     name: 'BasicForm',
     components: { FormItem, Form, Row, FormAction },
@@ -103,7 +101,7 @@
       });
  
       // Get uniform row style and Row configuration for the entire form
-      const getRow = computed((): RowProps => {
+      const getRow = computed((): Recordable => {
         const { baseRowStyle = {}, rowProps } = unref(getProps);
         return {
           style: baseRowStyle,
@@ -282,10 +280,12 @@
         getProps,
         formElRef,
         getSchema,
-        formActionType,
+        formActionType: formActionType as any,
         setFormModel,
-        prefixCls,
         getFormClass,
+        getFormActionBindProps: computed(
+          (): Recordable => ({ ...getProps.value, ...advanceState })
+        ),
         ...formActionType,
       };
     },
@@ -83,7 +83,7 @@
             plain: true,
           });
         }
-        return componentProps;
+        return componentProps as Recordable;
       });
  
       const getDisable = computed(() => {
@@ -4,7 +4,7 @@ import type { LoadingProps } from &#39;./typing&#39;;
 import type { Ref } from 'vue';
  
 export interface UseLoadingOptions {
-  target?: HTMLElement | Ref<ElRef>;
+  target?: any;
   props?: Partial<LoadingProps>;
 }
  
@@ -2,6 +2,7 @@
   <div ref="wrapRef"></div>
 </template>
 <script lang="ts">
+  import type { Ref } from 'vue';
   import {
     defineComponent,
     ref,
@@ -30,7 +31,7 @@
     emits: ['change', 'get', 'update:value'],
     setup(props, { attrs, emit }) {
       const wrapRef = ref<ElRef>(null);
-      const vditorRef = ref<Nullable<Vditor>>(null);
+      const vditorRef = ref(null) as Ref<Nullable<Vditor>>;
       const initedRef = ref(false);
  
       const modalFn = useModalContext();
@@ -56,14 +56,14 @@
       const { prefixCls } = useDesign('basic-menu');
       const { items, mode, accordion } = toRefs(props);
  
-      const { getCollapsed, getIsHorizontal, getTopMenuAlign, getSplit } = useMenuSetting();
+      const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
  
       const { currentRoute } = useRouter();
  
       const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(
         menuState,
         items,
-        mode,
+        mode as any,
         accordion
       );
  
@@ -150,8 +150,6 @@
       }
  
       return {
-        prefixCls,
-        getIsHorizontal,
         handleMenuClick,
         getInlineCollapseOptions,
         getMenuClass,
@@ -4,6 +4,8 @@ import type { PropType } from &#39;vue&#39;;
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 import { ThemeEnum } from '/@/enums/appEnum';
 import { propTypes } from '/@/utils/propTypes';
+import type { MenuTheme } from 'ant-design-vue';
+import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
 export const basicProps = {
   items: {
     type: Array as PropType<Menu[]>,
@@ -14,7 +16,7 @@ export const basicProps = {
   inlineIndent: propTypes.number.def(20),
   // 菜单组件的mode属性
   mode: {
-    type: String as PropType<MenuModeEnum>,
+    type: String as PropType<MenuMode>,
     default: MenuModeEnum.INLINE,
   },
  
@@ -22,7 +24,10 @@ export const basicProps = {
     type: String as PropType<MenuTypeEnum>,
     default: MenuTypeEnum.MIX,
   },
-  theme: propTypes.string.def(ThemeEnum.DARK),
+  theme: {
+    type: String as PropType<MenuTheme>,
+    default: ThemeEnum.DARK,
+  },
   inlineCollapsed: propTypes.bool,
   mixSider: propTypes.bool,
  
@@ -104,7 +104,7 @@
       }
  
       // Custom title component: get title
-      const getMergeProps = computed((): ModalProps => {
+      const getMergeProps = computed((): Recordable => {
         return {
           ...props,
           ...(unref(propsRef) as any),
@@ -118,7 +118,7 @@
       });
  
       // modal component does not need title and origin buttons
-      const getProps = computed((): ModalProps => {
+      const getProps = computed((): Recordable => {
         const opt = {
           ...unref(getMergeProps),
           visible: unref(visibleRef),
@@ -212,7 +212,7 @@
         extHeightRef.value = height;
       }
  
-      function handleTitleDbClick(e: ChangeEvent) {
+      function handleTitleDbClick(e) {
         if (!props.canFullscreen) return;
         e.stopPropagation();
         handleFullScreen(e);
@@ -125,7 +125,7 @@
           const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
           if (!modalDom) return;
  
-          const modalRect = getComputedStyle(modalDom).top;
+          const modalRect = getComputedStyle(modalDom as Element).top;
           const modalTop = Number.parseInt(modalRect);
           let maxHeight =
             window.innerHeight -
@@ -56,7 +56,7 @@
     setup(props) {
       const { prefixCls } = useDesign('image-preview');
  
-      const getImageList = computed(() => {
+      const getImageList = computed((): any[] => {
         const { imageList } = props;
         if (!imageList) {
           return [];
@@ -124,7 +124,7 @@
         isRemoveAllPopup,
         sliceIndex,
         level: 0,
-        props,
+        props: props as any,
       });
  
       onMounted(() => {
 import type { InjectionKey, Ref } from 'vue';
+import type { Emitter } from '/@/utils/mitt';
 import { createContext, useContext } from '/@/hooks/core/useContext';
-import mitt from '/@/utils/mitt';
  
 export interface SimpleRootMenuContextProps {
-  rootMenuEmitter: typeof mitt;
+  rootMenuEmitter: Emitter;
   activeName: Ref<string | number>;
 }
  
@@ -320,7 +320,7 @@
         wrapRef,
         tableAction,
         redoHeight,
-        getFormProps,
+        getFormProps: getFormProps as any,
         replaceFormSlotKey,
         getFormSlotKeys,
         getWrapperClass,
@@ -95,7 +95,7 @@
           .map((action) => {
             const { popConfirm } = action;
             return {
-              getPopupContainer: () => unref(table?.wrapRef.value) ?? document.body,
+              getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
               type: 'link',
               size: 'small',
               ...action,
@@ -107,7 +107,7 @@
           });
       });
  
-      const getDropdownList = computed(() => {
+      const getDropdownList = computed((): any[] => {
         return (toRaw(props.dropDownActions) || [])
           .filter((action) => {
             return hasPermission(action.auth) && isIfShow(action);
@@ -133,7 +133,7 @@
  
       function getTooltip(data: string | TooltipProps): TooltipProps {
         return {
-          getPopupContainer: () => unref(table?.wrapRef.value) ?? document.body,
+          getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
           placement: 'bottom',
           ...(isString(data) ? { title: data } : data),
         };
@@ -24,7 +24,7 @@
       <template v-for="(img, index) in imgList" :key="img">
         <Image
           :width="size"
-          :style="{ 'margin-left': index === 0 ? 0 : margin }"
+          :style="{ marginLeft: index === 0 ? 0 : margin }"
           :src="srcPrefix + img"
         />
       </template>
@@ -276,8 +276,8 @@
       }
  
       return {
-        columns: createTableColumns(),
-        actionColumn: createActionColumn(handleRemove),
+        columns: createTableColumns() as any[],
+        actionColumn: createActionColumn(handleRemove) as any,
         register,
         closeModal,
         getHelpText,
@@ -80,8 +80,8 @@
         register,
         closeModal,
         fileListRef,
-        columns: createPreviewColumns(),
-        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }),
+        columns: createPreviewColumns() as any[],
+        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any,
       };
     },
   });
 <script lang="tsx">
+  import type { Ref } from 'vue';
   import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useEventListener } from '/@/hooks/event/useEventListener';
@@ -23,7 +24,7 @@
       const wrapElRef = ref<HTMLDivElement | null>(null);
       const barElRef = ref<HTMLDivElement | null>(null);
       const contentElRef = ref<HTMLDivElement | null>(null);
-      const actionElRef = ref<HTMLDivElement | null>(null);
+      const actionElRef = ref(null) as Ref<HTMLDivElement | null>;
  
       useEventListener({
         el: document,
@@ -324,13 +325,8 @@
         color-stop(1, #333)
       );
       animation: slidetounlock 3s infinite;
-      -webkit-background-clip: text;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      -o-user-select: none;
-      -ms-user-select: none;
+      background-clip: text;
       user-select: none;
-      -webkit-text-fill-color: transparent;
  
       &.success {
         -webkit-text-fill-color: @white;
@@ -363,7 +359,7 @@
     }
   }
  
-  @-webkit-keyframes slidetounlock {
+  @keyframes slidetounlock {
     0% {
       background-position: -120px 0;
     }
@@ -2,7 +2,7 @@ import { Ref, watchEffect, ref } from &#39;vue&#39;;
  
 interface IntersectionObserverProps {
   target: Ref<Element | null | undefined>;
-  root?: Ref<Element | null | undefined>;
+  root?: Ref<any>;
   onIntersect: IntersectionObserverCallback;
   rootMargin?: string;
   threshold?: number;
@@ -2,7 +2,7 @@ import { isFunction, isUnDef } from &#39;/@/utils/is&#39;;
 import { ref, unref } from 'vue';
  
 export interface ScrollToParams {
-  el: HTMLElement;
+  el: any;
   to: number;
   duration?: number;
   callback?: () => any;
@@ -146,11 +146,11 @@
           <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus} />
         ) : (
           <BasicMenu
-            {...menuProps}
+            {...(menuProps as any)}
             isHorizontal={props.isHorizontal}
             type={unref(getMenuType)}
             showLogo={unref(getIsShowLogo)}
-            mode={unref(getComputedMenuMode)}
+            mode={unref(getComputedMenuMode as any)}
             items={menus}
           />
         );
@@ -31,7 +31,7 @@
     setup(props) {
       const { prefixCls } = useDesign('setting-input-number-item');
  
-      function handleChange(e: ChangeEvent) {
+      function handleChange(e) {
         props.event && baseHandler(props.event, e);
       }
       return {
@@ -27,7 +27,7 @@
   </div>
 </template>
 <script lang="ts">
-  import type { RouteLocationNormalized } from 'vue-router';
+  import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
  
   import { defineComponent, computed, unref, ref } from 'vue';
  
@@ -94,7 +94,7 @@
         }
  
         const { path, fullPath, meta = {} } = route;
-        const { currentActiveMenu, hideTab } = meta;
+        const { currentActiveMenu, hideTab } = meta as RouteMeta;
         const isHide = !hideTab ? null : currentActiveMenu;
         const p = isHide || fullPath || path;
         if (activeKeyRef.value !== p) {
@@ -3,7 +3,7 @@
     <template v-for="(item, index) in growCardList" :key="item.title">
       <Card
         size="small"
-        :loading="$attrs.loading"
+        :loading="loading"
         :title="item.title"
         class="md:w-1/4 w-full !md:mt-0 !mt-4"
         :class="[index + 1 < 4 && '!md:mr-4']"
@@ -31,4 +31,10 @@
   import { Icon } from '/@/components/Icon';
   import { Tag, Card } from 'ant-design-vue';
   import { growCardList } from '../data';
+
+  defineProps({
+    loading: {
+      type: Boolean,
+    },
+  });
 </script>
@@ -73,7 +73,7 @@
         handleCropend,
         handleCircleCropend,
         avatar,
-        uploadApi,
+        uploadApi: uploadApi as any,
       };
     },
   });
@@ -98,7 +98,7 @@
         qrEl.download('Qrcode');
       }
  
-      function onQrcodeDone({ ctx }) {
+      function onQrcodeDone({ ctx }: any) {
         if (ctx instanceof CanvasRenderingContext2D) {
           // 额外绘制
           ctx.fillStyle = 'black';
@@ -74,7 +74,7 @@
       return {
         avatar,
         register,
-        uploadApi,
+        uploadApi: uploadApi as any,
         updateAvatar,
         handleSubmit: () => {
           createMessage.success('更新成功！');
@@ -19,7 +19,7 @@
                   {{ item.content }}
                 </div>
                 <div :class="`${prefixCls}__action`">
-                  <template v-for="(action, index) in actions" :key="index">
+                  <template v-for="action in actions" :key="action.icon">
                     <div :class="`${prefixCls}__action-item`">
                       <Icon
                         v-if="action.icon"
@@ -29,9 +29,8 @@
         treeData.value = (await getDeptList()) as unknown as TreeItem[];
       }
  
-      function handleSelect(keys: string, e) {
+      function handleSelect(keys) {
         emit('select', keys[0]);
-        console.log(keys, e);
       }
  
       onMounted(() => {
@@ -88,6 +88,7 @@
         if (level === 3) {
           return 'ion:airplane';
         }
+        return '';
       }
       return { treeData, actionList, getRightMenuList, createIcon };
     },