fix: some error

Author: anncwb

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;