fix: some ts type issue

Author: buqiyuan

package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "@vueuse/core": "^8.2.3",
+    "@vueuse/core": "^8.2.4",
     "ant-design-vue": "3.1.0-rc.6",
     "axios": "^0.26.1",
     "core-js": "^3.21.1",
@@ -56,8 +56,8 @@
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.23",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "@vue/cli-plugin-babel": "^5.0.4",
     "@vue/cli-plugin-eslint": "^5.0.4",
     "@vue/cli-plugin-router": "^5.0.4",
@@ -78,7 +78,7 @@
     "lint-staged": "^12.3.7",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "regenerator-runtime": "^0.13.9",
     "speed-measure-webpack-plugin": "^1.5.0",
     "stylelint": "^14.6.1",

src/assets/icons/moon.svg

@@ -5,15 +5,17 @@
     :type="buttonType"
     :class="[`ant-btn-${type}`]"
   >
-    <template v-for="(value, key) in $slots" #[key]>
+    <template v-for="(_, key) in $slots" #[key]>
       <slot :name="key"></slot>
     </template>
   </Button>
 </template>
 <script lang="ts" setup>
-  import { computed, type PropType } from 'vue';
+  import { computed } from 'vue';
   import { Button } from 'ant-design-vue';
   import { buttonProps, type ButtonType } from './button';
+  import type { PropType, ComputedRef } from 'vue';
+  import type { ButtonType as AButtonType } from 'ant-design-vue/es/button';
 
   const props = defineProps({
     ...buttonProps(),
@@ -31,7 +33,7 @@
       : ['danger'].includes(type)
       ? 'primary'
       : 'default';
-  });
+  }) as ComputedRef<AButtonType>;
 </script>
 
 <style lang="less" scoped>

src/assets/icons/sun.svg

@@ -7,6 +7,10 @@
 <script lang="ts" setup>
   import { computed, type CSSProperties } from 'vue';
 
+  defineOptions({
+    name: 'svg-icon',
+  });
+
   const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
     requireContext.keys().forEach(requireContext);
   try {

src/components/basic/button/button.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="(actionItem, index) in actionFilters" :key="`${index}-${actionItem.label}`">
+  <template v-for="(actionItem, _index) in actionFilters" :key="`${_index}-${actionItem.label}`">
     <component
       :is="actionItem.popConfirm ? Popconfirm : 'span'"
       :title="actionItem.title"

src/components/basic/svg-icon/svg-icon.vue

@@ -83,12 +83,17 @@
   import { useSortable } from '@/hooks/useSortable';
   import { isNullAndUnDef } from '@/utils/is';
 
+  type TableColumnType<T = any> = TableColumn<T> & {
+    /** 目的是解决：类型实例化过深，且可能无限 */
+    formItemProps?: any;
+  };
+
   const table = useTableContext();
   let inited = false;
-  const defaultColumns = cloneDeep(table.columns);
+  const defaultColumns = cloneDeep<TableColumnType[]>(table.columns);
   const defaultShowIndex = !!table.showIndex;
   const defaultBordered = table.bordered;
-  const tableColumns = ref<TableColumn<any>[]>([]);
+  const tableColumns = ref<TableColumnType[]>([]);
 
   const checkAll = computed<boolean>({
     get() {

src/components/core/dynamic-table/src/components/table-action.vue

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import type { ValidationRule } from 'ant-design-vue/es/form/Form';
+import type { RuleObject } from 'ant-design-vue/es/form/';
 import type { ComponentMapType } from './types/component';
 import { isNumber } from '@/utils/is';
 import { useI18n } from '@/hooks/useI18n';
@@ -34,7 +34,7 @@ function genType() {
 }
 
 export function setComponentRuleType(
-  rule: ValidationRule,
+  rule: RuleObject,
   component: ComponentMapType,
   valueFormat: string,
 ) {

src/components/core/dynamic-table/src/components/table-settings/column-setting.vue

@@ -54,7 +54,7 @@
   import type { PropType } from 'vue';
   import type { ComponentMapType } from './componentMap';
   import type { CustomRenderFn, FormSchema, RenderCallbackParams } from './types/form';
-  import type { ValidationRule } from 'ant-design-vue/es/form/Form';
+  import type { RuleObject } from 'ant-design-vue/es/form/';
   import type { TableActionType } from '@/components/core/dynamic-table';
   import { isBoolean, isNull, isObject, isString } from '@/utils/is';
   import BasicHelp from '@/components/basic/basic-help/index.vue';
@@ -275,7 +275,7 @@
   });
 
   function setComponentRuleType(
-    rule: ValidationRule,
+    rule: RuleObject,
     component: ComponentMapType,
     valueFormat: string,
   ) {
@@ -299,10 +299,10 @@
     } = props.schema;
 
     if (isFunction(dynamicRules)) {
-      return dynamicRules(unref(getValues)) as ValidationRule[];
+      return dynamicRules(unref(getValues)) as RuleObject[];
     }
 
-    let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[];
+    let rules = cloneDeep<RuleObject[]>(defRules);
     const { rulesMessageJoinLabel: globalRulesMessageJoinLabel } = unref(formPropsRef);
 
     const joinLabel = Reflect.has(unref(formPropsRef), 'rulesMessageJoinLabel')

src/components/core/schema-form/src/helper.ts

@@ -1,10 +1,10 @@
+import type { RowProps } from 'ant-design-vue';
 import type { NamePath, RuleObject } from 'ant-design-vue/es/form/interface';
-import type { FormItemProps } from './formItem';
+import type { FormItemProps } from 'ant-design-vue/es/form/FormItem';
 import type { Component, VNode } from 'vue';
 import type { ButtonProps as AntdButtonProps } from '@/components/basic/button';
 import type { ColEx, ComponentMapType, ComponentProps } from './component';
 // import type { TableActionType } from '/@/components/Table/src/types/table'
-import type { RowProps } from 'ant-design-vue';
 import type { SchemaFormInstance } from '../schema-form';
 import type { SchemaFormType } from '../hooks';
 import type { TableActionType } from '@/components/core/dynamic-table';
@@ -16,6 +16,7 @@ export type FieldMapToTime = [string, [string, string], string?][];
 export type Rule = RuleObject & {
   trigger?: 'blur' | 'change' | ['change', 'blur'];
 };
+
 /** 获取所有字段名 */
 export type GetFieldKeys<T> = Exclude<keyof T, symbol | number>;
 
@@ -86,9 +87,9 @@ export interface FormSchema<T = string> {
   labelWidth?: string | number;
   // Disable the adjustment of labelWidth with global settings of formModel, and manually set labelCol and wrapperCol by yourself
   disabledLabelWidth?: boolean;
-  // render component
+  /** 表单项对应的组件，eg: Input */
   component?: ComponentMapType | CustomRenderFn<T> | ((opt: RenderCallbackParams<T>) => Component);
-  // 组件参数
+  /** 表单组件属性 */
   componentProps?:
     | ComponentProps
     | {

src/components/core/schema-form/src/schema-form-item.vue

@@ -1,4 +1,3 @@
 export * from './form';
 export * from './component';
 export * from './hooks';
-export * from './formItem';

src/components/core/schema-form/src/types/form.ts

@@ -9,7 +9,7 @@
           <Breadcrumb.Item>
             <TitleI18n :title="routeItem?.meta?.title" />
             <template v-if="routeItem?.children?.length" #overlay>
-              <Menu :selected-keys="[menus[rotueIndex + 1]?.name]">
+              <Menu :selected-keys="getSelectKeys(rotueIndex)">
                 <template v-for="childItem in routeItem?.children" :key="childItem.name">
                   <Menu.Item
                     v-if="!childItem.meta?.hideInMenu && !childItem.meta?.hideInBreadcrumb"
@@ -31,6 +31,7 @@
         <LockOutlined @click="lockscreenStore.setLock(true)" />
       </Tooltip>
       <FullScreen />
+      <svg-icon :name="isDark ? 'sun' : 'moon'" @click="toggleDark" />
       <LocalePicker />
       <Dropdown placement="bottomRight">
         <Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
@@ -67,6 +68,7 @@
     PoweroffOutlined,
     LockOutlined,
   } from '@ant-design/icons-vue';
+  import { useDark, useToggle } from '@vueuse/core';
   import {
     Layout,
     message,
@@ -96,6 +98,8 @@
 
   const router = useRouter();
   const route = useRoute();
+  const isDark = useDark();
+  const toggleDark = useToggle(isDark);
   const userInfo = computed(() => userStore.userInfo);
 
   const menus = computed(() => {
@@ -120,6 +124,10 @@
     return route.matched;
   });
 
+  const getSelectKeys = (rotueIndex: number) => {
+    return [menus.value[rotueIndex + 1]?.name] as string[];
+  };
+
   const findLastChild = (route?: RouteRecordRaw) => {
     if (typeof route?.redirect === 'object') {
       const redirectValues = Object.values(route.redirect);

src/components/core/schema-form/src/types/formItem.ts

@@ -1,21 +1,19 @@
 <template>
   <!-- 目录 -->
-  <Menu.SubMenu
-    v-if="props.menuInfo?.meta?.type === 0 || props.menuInfo?.children?.length"
-    :key="props.menuInfo?.name"
-    v-bind="$attrs"
-  >
-    <template #title>
-      <span>
-        <icon-font :type="props.menuInfo.meta?.icon" />
-        <TitleI18n :title="props.menuInfo?.meta?.title" />
-      </span>
-    </template>
-    <template v-for="item in menuChildren" :key="item.name || item.fullPath">
-      <!-- 递归生成菜单 -->
-      <MyMenuItem :menu-info="item" />
-    </template>
-  </Menu.SubMenu>
+  <template v-if="props.menuInfo?.meta?.type === 0 || props.menuInfo?.children?.length">
+    <Menu.SubMenu :key="props.menuInfo?.name" v-bind="$attrs">
+      <template #title>
+        <span>
+          <icon-font :type="props.menuInfo.meta?.icon" />
+          <TitleI18n :title="props.menuInfo?.meta?.title" />
+        </span>
+      </template>
+      <template v-for="item in menuChildren" :key="item.name || item.fullPath">
+        <!-- 递归生成菜单 -->
+        <MyMenuItem :menu-info="item" />
+      </template>
+    </Menu.SubMenu>
+  </template>
   <!-- 菜单 -->
   <template v-else>
     <Menu.Item :key="props.menuInfo?.name">

src/components/core/schema-form/src/types/index.ts

@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
   import { reactive, computed, watch } from 'vue';
-  import { type RouteRecordName, useRoute, useRouter } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
   import { Menu } from 'ant-design-vue';
   import MenuItem from './menu-item.vue';
   import { useUserStore } from '@/store/modules/user';
@@ -35,8 +35,8 @@
   const currentRoute = useRoute();
   const router = useRouter();
   const state = reactive({
-    openKeys: [] as (RouteRecordName | undefined)[],
-    selectedKeys: [currentRoute.name],
+    openKeys: [] as string[],
+    selectedKeys: [currentRoute.name] as string[],
   });
 
   const menus = computed(() => {
@@ -52,24 +52,26 @@
   };
 
   // 获取当前打开的子菜单
-  function getOpenKeys() {
+  const getOpenKeys = () => {
     const meta = currentRoute.meta;
     if (meta?.activeMenu) {
       const targetMenu = getTargetMenuByActiveMenuName(meta.activeMenu);
       return targetMenu?.meta?.namePath ?? [meta?.activeMenu];
     }
 
-    return meta?.hideInMenu
-      ? state?.openKeys || []
-      : currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name);
-  }
+    return (
+      meta?.hideInMenu
+        ? state?.openKeys || []
+        : currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name)
+    ) as string[];
+  };
 
   // 监听菜单收缩状态
   watch(
     () => props.collapsed,
     (newVal) => {
       state.openKeys = newVal ? [] : getOpenKeys();
-      state.selectedKeys = [currentRoute.name];
+      state.selectedKeys = [currentRoute.name] as string[];
     },
   );
 
@@ -82,9 +84,9 @@
       const meta = currentRoute.meta;
       if (meta?.activeMenu) {
         const targetMenu = getTargetMenuByActiveMenuName(meta.activeMenu);
-        state.selectedKeys = [targetMenu?.name ?? meta?.activeMenu];
+        state.selectedKeys = [targetMenu?.name ?? meta?.activeMenu] as string[];
       } else {
-        state.selectedKeys = [currentRoute.meta?.activeMenu ?? currentRoute.name];
+        state.selectedKeys = [currentRoute.meta?.activeMenu ?? currentRoute.name] as string[];
       }
     },
     {

src/layout/header/index.vue

@@ -22,7 +22,7 @@
 
   const [DynamicTable, dynamicTableInstance] = useTable();
 
-  const loadData = async (params) => {
+  const loadData = async (params): Promise<API.TableListResult> => {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve({