fix: some error

CHANGELOG.zh_CN.md

@@ -22,12 +22,14 @@
 - 添加部分注释
 - pwa 图标补充
 - types 类型调整
+- 升级`ant-design-vue`到`beta.11`,并修改带来的已知问题
 
 ### 🐛 Bug Fixes
 
 - 修复本地代理 post 接口到 https 地址超时错误
 - 修复 modal 在不显示 footer 的时候全屏高度计算问题
 - 修复表单重置未删除校验信息错误
+- 修复顶部菜单分割模式样式问题
 
 ## 2.0.0-rc.6 (2020-10-28)
 

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.1",
-    "ant-design-vue": "^2.0.0-beta.10",
+    "ant-design-vue": "^2.0.0-beta.11",
     "apexcharts": "^3.22.0",
     "axios": "^0.21.0",
     "echarts": "^4.9.0",

src/components/Drawer/src/BasicDrawer.tsx

@@ -1,17 +1,6 @@
 import { Drawer, Row, Col, Button } from 'ant-design-vue';
-import {
-  defineComponent,
-  ref,
-  computed,
-  watchEffect,
-  watch,
-  unref,
-  // getCurrentInstance,
-  nextTick,
-  toRaw,
-} from 'vue';
+import { defineComponent, ref, computed, watchEffect, watch, unref, nextTick, toRaw } from 'vue';
 import { BasicTitle } from '/@/components/Basic';
-// import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index';
 import { FullLoading } from '/@/components/Loading/index';
 
 import { getSlot } from '/@/utils/helper/tsxHelper';
@@ -21,8 +10,6 @@ import { DrawerInstance, DrawerProps } from './types';
 import { basicProps } from './props';
 import { isFunction, isNumber } from '/@/utils/is';
 import { LeftOutlined } from '@ant-design/icons-vue';
-// import { appStore } from '/@/store/modules/app';
-// import { useRouter } from 'vue-router';
 import { buildUUID } from '/@/utils/uuid';
 import { deepMerge } from '/@/utils';
 import './index.less';
@@ -38,7 +25,6 @@ export default defineComponent({
     const visibleRef = ref(false);
     const propsRef = ref<Partial<DrawerProps> | null>(null);
 
-    // 自定义title组件：获得title
     const getMergeProps = computed((): any => {
       return deepMerge(toRaw(props), unref(propsRef));
     });
@@ -68,9 +54,11 @@ export default defineComponent({
       }
       return opt;
     });
+
     watchEffect(() => {
       visibleRef.value = props.visible;
     });
+
     watch(
       () => visibleRef.value,
       (visible) => {
@@ -83,6 +71,15 @@ export default defineComponent({
       }
     );
 
+    // 底部按钮自定义实现,
+    const getFooterHeight = computed(() => {
+      const { footerHeight, showFooter }: DrawerProps = unref(getProps);
+      if (showFooter && footerHeight) {
+        return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
+      }
+      return `0px`;
+    });
+
     // 取消事件
     async function onClose(e: any) {
       const { closeFunc } = unref(getProps);
@@ -103,14 +100,6 @@ export default defineComponent({
       }
     }
 
-    // 底部按钮自定义实现,
-    const getFooterHeight = computed(() => {
-      const { footerHeight, showFooter }: DrawerProps = unref(getProps);
-      if (showFooter && footerHeight) {
-        return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
-      }
-      return `0px`;
-    });
     function renderFooter() {
       const {
         showCancelBtn,
@@ -171,11 +160,13 @@ export default defineComponent({
                     )}
                   </Col>
                 )}
+
                 {title && (
                   <Col style="flex:1" class={[`${prefixCls}__detail-title`, 'ellipsis', 'px-2']}>
                     {() => title}
                   </Col>
                 )}
+
                 {getSlot(slots, 'titleToolbar')}
               </>
             )}
@@ -208,22 +199,22 @@ export default defineComponent({
             title: () => renderHeader(),
             default: () => (
               <>
-                <FullLoading
-                  absolute
-                  class={[!unref(getProps).loading ? 'hidden' : '']}
-                  tip="加载中..."
-                />
                 <div
                   ref={scrollRef}
                   {...attrs}
-                  data-id="123"
                   style={{
+                    position: 'relative',
                     height: `calc(100% - ${footerHeight})`,
                     overflow: 'auto',
                     padding: '16px',
                     paddingBottom: '30px',
                   }}
                 >
+                  <FullLoading
+                    absolute
+                    tip="加载中..."
+                    class={[!unref(getProps).loading ? 'hidden' : '']}
+                  />
                   {getSlot(slots, 'default')}
                 </div>
                 {renderFooter()}

src/components/Drawer/src/types.ts

@@ -1,4 +1,4 @@
-import type { Button } from 'ant-design-vue/types/button/button';
+import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
 import type { CSSProperties, VNodeChild } from 'vue';
 import type { ScrollContainerOptions } from '/@/components/Container/index';
 
@@ -47,13 +47,13 @@ export interface DrawerFooterProps {
    * The ok button props, follow jsx rules
    * @type object
    */
-  okButtonProps: { props: Button; on: {} };
+  okButtonProps: { props: ButtonProps; on: {} };
 
   /**
    * The cancel button props, follow jsx rules
    * @type object
    */
-  cancelButtonProps: { props: Button; on: {} };
+  cancelButtonProps: { props: ButtonProps; on: {} };
   /**
    * Whether to apply loading visual effect for OK button or not
    * @default false

src/components/Form/src/hooks/useForm.ts

@@ -4,8 +4,9 @@ import { isInSetup } from '/@/utils/helper/vueHelper';
 import { isProdMode } from '/@/utils/env';
 
 import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
-import type { NamePath } from 'ant-design-vue/types/form/form-item';
-import type { ValidateFields } from 'ant-design-vue/types/form/form';
+import type { NamePath } from 'ant-design-vue/lib/form/interface';
+
+export declare type ValidateFields = (nameList?: NamePath[]) => Promise<any>;
 
 export function useForm(props?: Partial<FormProps>): UseFormReturnType {
   isInSetup();

src/components/Form/src/hooks/useFormAction.ts

@@ -1,7 +1,6 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { FormProps, FormSchema } from '../types/form';
-import type { Form as FormType } from 'ant-design-vue/types/form/form';
-import type { NamePath } from 'ant-design-vue/types/form/form-item';
+import type { FormProps, FormSchema, FormActionType } from '../types/form';
+import type { NamePath } from 'ant-design-vue/lib/form/interface';
 
 import { unref, toRaw } from 'vue';
 
@@ -17,7 +16,7 @@ interface UseFormActionContext {
   getSchema: ComputedRef<FormSchema[]>;
   formModel: any;
   defaultValueRef: Ref<any>;
-  formElRef: Ref<FormType>;
+  formElRef: Ref<FormActionType>;
   schemaRef: Ref<FormSchema[]>;
   handleFormValues: Fn;
   actionState: {

src/components/Form/src/types/form.ts

@@ -1,4 +1,4 @@
-import type { Form, NamePath, ValidationRule } from 'ant-design-vue/types/form/form';
+import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
 import type { VNode } from 'vue';
 import type { BasicButtonProps } from '/@/components/Button/types';
 import type { FormItem } from './formItem';
@@ -17,7 +17,7 @@ export interface ButtonProps extends BasicButtonProps {
   text?: string;
 }
 
-export interface FormActionType extends Form {
+export interface FormActionType {
   submit: () => Promise<void>;
   setFieldsValue: <T>(values: T) => void;
   resetFields: () => Promise<any>;
@@ -29,6 +29,7 @@ export interface FormActionType extends Form {
   appendSchemaByField: (schema: FormSchema, prefixField?: string) => void;
   validateFields: (nameList?: NamePath[]) => Promise<any>;
   validate: (nameList?: NamePath[]) => Promise<any>;
+  scrollToField: (name: NamePath, options?: ScrollOptions) => void;
 }
 export type RegisterFn = (formInstance: FormActionType) => void;
 
@@ -113,7 +114,7 @@ export interface FormSchema {
   componentProps?: any;
 
   // 校验规则
-  rules?: ValidationRule[];
+  rules?: RuleObject[];
   // 校验信息是否加入label
   rulesMessageJoinLabel?: boolean;
 
@@ -150,7 +151,7 @@ export interface FormSchema {
 
   dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
 
-  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => ValidationRule[];
+  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => RuleObject[];
 }
 export interface HelpComponentProps {
   maxWidth: string;

src/components/Form/src/types/formItem.ts

@@ -1,5 +1,5 @@
-import type { NamePath } from 'ant-design-vue/types/form/form-item';
-import type { Col } from 'ant-design-vue/types/grid/col';
+import type { NamePath } from 'ant-design-vue/lib/form/interface';
+import type { ColProps } from 'ant-design-vue/lib/grid/Col';
 import type { VNodeChild } from 'vue';
 
 export interface FormItem {
@@ -39,7 +39,7 @@ export interface FormItem {
    * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
    * @type Col
    */
-  labelCol?: Col;
+  labelCol?: ColProps;
 
   /**
    * Whether provided or not, it will be generated by the validation rule.
@@ -58,7 +58,7 @@ export interface FormItem {
    * The layout for input controls, same as labelCol
    * @type Col
    */
-  wrapperCol?: Col;
+  wrapperCol?: ColProps;
   /**
    * Set sub label htmlFor.
    */

src/components/Form/src/types/index.ts

@@ -1,5 +1,4 @@
-import { ColSpanType } from 'ant-design-vue/types/grid/col';
-
+type ColSpanType = number | string;
 export interface ColEx {
   style?: any;
   /**

src/components/Menu/src/SearchInput.vue

@@ -69,8 +69,7 @@
     margin: 12px 9px;
 
     &__search--dark {
-      // .setPlaceholder('.ant-input',#fff);
-
+      .ant-input-affix-wrapper,
       .ant-input {
         .set-bg();
 
@@ -91,6 +90,7 @@
     }
 
     &__search--light {
+      .ant-input-affix-wrapper,
       .ant-input {
         color: @text-color-base;
         background: #fff;

src/components/Menu/src/index.less

@@ -105,8 +105,8 @@
       &.ant-menu-light {
         .ant-menu-item {
           &.basic-menu-item__level1 {
-            height: 46px;
-            line-height: 46px;
+            height: 38px;
+            line-height: 38px;
           }
         }
 

src/components/Modal/src/provideModal.ts

@@ -7,5 +7,5 @@ export function provideModal(redoHeight: Fn) {
 }
 
 export function injectModal(): Fn {
-  return inject(key) as Fn;
+  return inject(key, () => {}) as Fn;
 }

src/components/Table/src/components/renderFooter.tsx

@@ -1,9 +1,9 @@
 import { Table } from 'ant-design-vue';
-import { TableRowSelection } from 'ant-design-vue/types/table/table';
 import { cloneDeep } from 'lodash-es';
 import { unref, ComputedRef } from 'vue';
-import { BasicColumn } from '../types/table';
 import { isFunction } from '/@/utils/is';
+import type { BasicColumn, TableRowSelection } from '../types/table';
+
 export default ({
   scroll = {},
   columnsRef,
@@ -17,7 +17,7 @@ export default ({
   summaryFunc: any;
   rowKey?: string;
   dataSourceRef: ComputedRef<any[]>;
-  rowSelectionRef: ComputedRef<TableRowSelection<any> | null>;
+  rowSelectionRef: ComputedRef<TableRowSelection | null>;
 }) => {
   if (!summaryFunc) {
     return;

src/components/Table/src/const.ts

@@ -1,4 +1,4 @@
-import { SorterResult } from 'ant-design-vue/types/table/table';
+import type { SorterResult } from './types/table';
 
 export const ROW_KEY = 'key';
 

src/components/Table/src/hooks/useRowSelection.ts

@@ -1,6 +1,5 @@
 import { computed, ref, unref, ComputedRef } from 'vue';
-import { BasicTableProps } from '../types/table';
-import { TableRowSelection } from 'ant-design-vue/types/table/table';
+import type { BasicTableProps, TableRowSelection } from '../types/table';
 import { useProps } from './useProps';
 
 /* eslint-disable */
@@ -10,7 +9,7 @@ export function useRowSelection(refProps: ComputedRef<BasicTableProps>, emit: Em
   const selectedRowKeysRef = ref<string[]>([]);
   const selectedRowRef = ref<any[]>([]);
 
-  const getRowSelectionRef = computed((): TableRowSelection<any> | null => {
+  const getRowSelectionRef = computed((): TableRowSelection | null => {
     const rowSelection = unref(propsRef).rowSelection;
     if (!rowSelection) {
       return null;

src/components/Table/src/props.ts

@@ -1,11 +1,13 @@
 import type { PropType } from 'vue';
 import type { PaginationProps } from './types/pagination';
-import type { BasicColumn, FetchSetting, TableSetting } from './types/table';
 import type {
+  BasicColumn,
+  FetchSetting,
+  TableSetting,
   SorterResult,
   TableCustomRecord,
   TableRowSelection,
-} from 'ant-design-vue/types/table/table';
+} from './types/table';
 import type { FormProps } from '/@/components/Form/index';
 import { DEFAULT_SORT_FN, FETCH_SETTING } from './const';
 
@@ -127,7 +129,7 @@ export const basicProps = {
     default: 0,
   },
   rowSelection: {
-    type: Object as PropType<TableRowSelection<any> | null>,
+    type: Object as PropType<TableRowSelection | null>,
     default: null,
   },
   title: {