fix: some error

vben
1 parent 9abf1763
Showing 28 changed files with 359 additions and 101 deletions
CHANGELOG.zh_CN.md
package.json
src/components/Drawer/src/BasicDrawer.tsx
src/components/Drawer/src/types.ts
src/components/Form/src/hooks/useForm.ts
src/components/Form/src/hooks/useFormAction.ts
src/components/Form/src/types/form.ts
src/components/Form/src/types/formItem.ts
src/components/Form/src/types/index.ts
src/components/Menu/src/SearchInput.vue
src/components/Menu/src/index.less
src/components/Modal/src/provideModal.ts
src/components/Table/src/components/renderFooter.tsx
src/components/Table/src/const.ts
src/components/Table/src/hooks/useRowSelection.ts
src/components/Table/src/props.ts
src/components/Table/src/types/column.ts
src/components/Table/src/types/pagination.ts
src/components/Table/src/types/table.ts
src/design/ant/index.less
@@ -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)
  
@@ -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",
 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 &#39;./types&#39;;
 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()}
-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
@@ -4,8 +4,9 @@ import { isInSetup } from &#39;/@/utils/helper/vueHelper&#39;;
 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();
 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: {
-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;
-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.
    */
-import { ColSpanType } from 'ant-design-vue/types/grid/col';
-
+type ColSpanType = number | string;
 export interface ColEx {
   style?: any;
   /**
@@ -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;
@@ -105,8 +105,8 @@
       &.ant-menu-light {
         .ant-menu-item {
           &.basic-menu-item__level1 {
-            height: 46px;
-            line-height: 46px;
+            height: 38px;
+            line-height: 38px;
           }
         }
  
@@ -7,5 +7,5 @@ export function provideModal(redoHeight: Fn) {
 }
  
 export function injectModal(): Fn {
-  return inject(key) as Fn;
+  return inject(key, () => {}) as Fn;
 }
 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;
-import { SorterResult } from 'ant-design-vue/types/table/table';
+import type { SorterResult } from './types/table';
  
 export const ROW_KEY = 'key';
  
 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&lt;BasicTableProps&gt;, 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;
 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: {
+import { VNodeChild } from 'vue';
+
+export interface ColumnFilterItem {
+  text?: string;
+  value?: string;
+  children?: any;
+}
+
+export declare type SortOrder = 'ascend' | 'descend';
+
+export interface RecordProps<T> {
+  text: any;
+  record: T;
+  index: number;
+}
+
+export interface FilterDropdownProps {
+  prefixCls?: string;
+  setSelectedKeys?: (selectedKeys: string[]) => void;
+  selectedKeys?: string[];
+  confirm?: () => void;
+  clearFilters?: () => void;
+  filters?: ColumnFilterItem[];
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  visible?: boolean;
+}
+
+export declare type CustomRenderFunction<T> = (record: RecordProps<T>) => VNodeChild | JSX.Element;
+
+export interface ColumnProps<T> {
+  /**
+   * specify how content is aligned
+   * @default 'left'
+   * @type string
+   */
+  align?: 'left' | 'right' | 'center';
+
+  /**
+   * ellipsize cell content, not working with sorter and filters for now.
+   * tableLayout would be fixed when ellipsis is true.
+   * @default false
+   * @type boolean
+   */
+  ellipsis?: boolean;
+
+  /**
+   * Span of this column's title
+   * @type number
+   */
+  colSpan?: number;
+
+  /**
+   * Display field of the data record, could be set like a.b.c
+   * @type string
+   */
+  dataIndex?: string;
+
+  /**
+   * Default filtered values
+   * @type string[]
+   */
+  defaultFilteredValue?: string[];
+
+  /**
+   * Default order of sorted values: 'ascend' 'descend' null
+   * @type string
+   */
+  defaultSortOrder?: SortOrder;
+
+  /**
+   * Customized filter overlay
+   * @type any (slot)
+   */
+  filterDropdown?:
+    | VNodeChild
+    | JSX.Element
+    | ((props: FilterDropdownProps) => VNodeChild | JSX.Element);
+
+  /**
+   * Whether filterDropdown is visible
+   * @type boolean
+   */
+  filterDropdownVisible?: boolean;
+
+  /**
+   * Whether the dataSource is filtered
+   * @default false
+   * @type boolean
+   */
+  filtered?: boolean;
+
+  /**
+   * Controlled filtered value, filter icon will highlight
+   * @type string[]
+   */
+  filteredValue?: string[];
+
+  /**
+   * Customized filter icon
+   * @default false
+   * @type any
+   */
+  filterIcon?: boolean | VNodeChild | JSX.Element;
+
+  /**
+   * Whether multiple filters can be selected
+   * @default true
+   * @type boolean
+   */
+  filterMultiple?: boolean;
+
+  /**
+   * Filter menu config
+   * @type object[]
+   */
+  filters?: ColumnFilterItem[];
+
+  /**
+   * Set column to be fixed: true(same as left) 'left' 'right'
+   * @default false
+   * @type boolean | string
+   */
+  fixed?: boolean | 'left' | 'right';
+
+  /**
+   * Unique key of this column, you can ignore this prop if you've set a unique dataIndex
+   * @type string
+   */
+  key?: string;
+
+  /**
+   * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
+   * @type Function | ScopedSlot
+   */
+  customRender?: CustomRenderFunction<T> | VNodeChild | JSX.Element;
+
+  /**
+   * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
+   * @type boolean | Function
+   */
+  sorter?: boolean | Function;
+
+  /**
+   * Order of sorted values: 'ascend' 'descend' false
+   * @type boolean | string
+   */
+  sortOrder?: boolean | SortOrder;
+
+  /**
+   * supported sort way, could be 'ascend', 'descend'
+   * @default ['ascend', 'descend']
+   * @type string[]
+   */
+  sortDirections?: SortOrder[];
+
+  /**
+   * Title of this column
+   * @type any (string | slot)
+   */
+  title?: VNodeChild | JSX.Element;
+
+  /**
+   * Width of this column
+   * @type string | number
+   */
+  width?: string | number;
+
+  /**
+   * Set props on per cell
+   * @type Function
+   */
+  customCell?: (record: T, rowIndex: number) => object;
+
+  /**
+   * Set props on per header cell
+   * @type object
+   */
+  customHeaderCell?: (column: ColumnProps<T>) => object;
+
+  /**
+   * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
+   * @type Function
+   */
+  onFilter?: (value: any, record: T) => boolean;
+
+  /**
+   * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx
+   * @type Function
+   */
+  onFilterDropdownVisibleChange?: (visible: boolean) => void;
+
+  /**
+   * When using columns, you can use this property to configure the properties that support the slot,
+   * such as slots: { filterIcon: 'XXX'}
+   * @type object
+   */
+  slots?: Record<string, string>;
+}
+import Pagination from 'ant-design-vue/lib/pagination';
 import { VNodeChild } from 'vue';
-import { PaginationRenderProps } from 'ant-design-vue/types/pagination';
+
+interface PaginationRenderProps {
+  page: number;
+  type: 'page' | 'prev' | 'next';
+  originalElement: any;
+}
+
+export declare class PaginationConfig extends Pagination {
+  position?: 'top' | 'bottom' | 'both';
+}
 export interface PaginationProps {
   /**
    * total number of data items
-import { VNodeChild } from 'vue';
-import { PaginationProps } from './pagination';
-import { FormProps } from '/@/components/Form/index';
-import {
-  ExpandedRowRenderRecord,
-  PaginationConfig,
-  SorterResult,
-  TableCurrentDataSource,
-  TableCustomRecord,
-  TableRowSelection,
-} from 'ant-design-vue/types/table/table';
-import { ColumnProps } from 'ant-design-vue/types/table/column';
+import type { VNodeChild } from 'vue';
+import type { PaginationProps } from './pagination';
+import type { FormProps } from '/@/components/Form/index';
+import type { IColumnProps, ITableRowSelection } from 'ant-design-vue/lib/table/interface';
 import { ComponentType } from './componentType';
+import { ColumnProps } from './column';
 export declare type SortOrder = 'ascend' | 'descend';
+export interface TableCurrentDataSource<T = any> {
+  currentDataSource: T[];
+}
+
+export interface TableRowSelection<T = any> extends ITableRowSelection {
+  /**
+   * Callback executed when selected rows change
+   * @type Function
+   */
+  onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any;
+
+  /**
+   * Callback executed when select/deselect one row
+   * @type FunctionT
+   */
+  onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any;
+
+  /**
+   * Callback executed when select/deselect all rows
+   * @type Function
+   */
+  onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any;
+
+  /**
+   * Callback executed when row selection is inverted
+   * @type Function
+   */
+  onSelectInvert?: (selectedRows: string[] | number[]) => any;
+}
+
+export interface TableCustomRecord<T> {
+  record?: T;
+  index?: number;
+}
+
+export interface ExpandedRowRenderRecord<T> extends TableCustomRecord<T> {
+  indent?: number;
+  expanded?: boolean;
+}
 export interface ColumnFilterItem {
   text?: string;
   value?: string;
   children?: any;
 }
  
+export interface TableCustomRecord<T = any> {
+  record?: T;
+  index?: number;
+}
+
+export interface SorterResult<T> {
+  column: ColumnProps<T>;
+  order: SortOrder;
+  field: string;
+  columnKey: string;
+}
+
 export interface RenderEditableCellParams {
   dataIndex: string;
   component?: ComponentType;
@@ -231,7 +275,7 @@ export interface BasicTableProps&lt;T = any&gt; {
    * Row selection config
    * @type object
    */
-  rowSelection?: TableRowSelection<T>;
+  rowSelection?: TableRowSelection;
  
   /**
    * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
@@ -265,7 +309,7 @@ export interface BasicTableProps&lt;T = any&gt; {
    * Set props on per header row
    * @type Function
    */
-  customHeaderRow?: (column: ColumnProps<T>, index: number) => object;
+  customHeaderRow?: (column: IColumnProps, index: number) => object;
  
   /**
    * Set props on per row
@@ -305,12 +349,7 @@ export interface BasicTableProps&lt;T = any&gt; {
    * @param sorter
    * @param currentDataSource
    */
-  onChange?: (
-    pagination: PaginationConfig,
-    filters: Partial<Record<keyof T, string[]>>,
-    sorter: SorterResult<T>,
-    extra: TableCurrentDataSource<T>
-  ) => void;
+  onChange?: (pagination: any, filters: any, sorter: any, extra: any) => void;
  
   /**
    * Callback executed when the row expand icon is clicked
@@ -327,7 +366,7 @@ export interface BasicTableProps&lt;T = any&gt; {
   onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;
 }
  
-export interface BasicColumn<T = any> extends ColumnProps<T> {
+export interface BasicColumn extends IColumnProps {
   children?: BasicColumn[];
   //
   flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
@@ -2,6 +2,10 @@
 @import './input.less';
 @import './btn.less';
  
+.ant-col {
+  width: 100%;
+}
+
 // =================================
 // ==============descriptions=======
 // =================================
@@ -3,7 +3,7 @@
 import type { App } from 'vue';
  
 import { Form, Input } from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
+import 'ant-design-vue/dist/antd.less';
  
 import './spin';
  
@@ -11,7 +11,7 @@ export default defineComponent({
       return (
         <Row>
           {() => (
-            <div>
+            <>
               <Col md={24} lg={8}>
                 {() => (
                   <CollapseContainer
@@ -56,7 +56,7 @@ export default defineComponent({
                   </CollapseContainer>
                 )}
               </Col>
-            </div>
+            </>
           )}
         </Row>
       );
@@ -29,7 +29,7 @@
  
     &__item {
       display: inline-block;
-      width: calc(25% - 8px);
+      flex: 0 0 calc(25% - 8px);
       padding: 20px 10px;
       margin-right: 8px;
       border-radius: 4px;
@@ -4,10 +4,10 @@
     <Divider />
     国际化信息: {{ t('hello') }}
     <Divider />
-    <a-button :type="localeRef === 'zhCN' ? 'primary' : ''" @click="localeRef = 'zhCN'">
+    <a-button :type="localeRef === 'zhCN' ? 'primary' : 'default'" @click="localeRef = 'zhCN'">
       中文
     </a-button>
-    <a-button :type="localeRef === 'en' ? 'primary' : ''" @click="localeRef = 'en'">
+    <a-button :type="localeRef === 'en' ? 'primary' : 'default'" @click="localeRef = 'en'">
       英文
     </a-button>
     <Divider />
@@ -14,10 +14,10 @@
     <div class="mt-4">
       权限切换(请先切换权限模式为前端角色权限模式):
       <a-button-group>
-        <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : ''">
+        <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
           {{ RoleEnum.SUPER }}
         </a-button>
-        <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : ''">
+        <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
           {{ RoleEnum.TEST }}
         </a-button>
       </a-button-group>
@@ -14,10 +14,10 @@
     <div class="mt-4">
       权限切换(请先切换权限模式为前端角色权限模式):
       <a-button-group>
-        <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : ''">
+        <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
           {{ RoleEnum.SUPER }}
         </a-button>
-        <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : ''">
+        <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
           {{ RoleEnum.TEST }}
         </a-button>
       </a-button-group>
@@ -29,7 +29,7 @@
                 type="primary"
                 size="large"
                 class="rounded-sm"
-                block
+                :block="true"
                 @click="login"
                 :loading="formState.loading"
                 >登录</a-button
@@ -1830,10 +1830,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
  
-ant-design-vue@^2.0.0-beta.10:
-  version "2.0.0-beta.10"
-  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-beta.10.tgz#66ecfe029458b12d276139bd7fe27a4624af3c75"
-  integrity sha512-32ZewKAvFBboluvBMsO7Y15LEWxnh2SO/J/h9Sq1qUEXqVt/HXwyg1KmFnSz2kc5j6Av5UtVjLu8rzHdZAOtTw==
+ant-design-vue@^2.0.0-beta.11:
+  version "2.0.0-beta.11"
+  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-beta.11.tgz#00c9c7c3f2452cba6853380b8d36dea3ed160771"
+  integrity sha512-6jWT4w/AklYTH80tmG6EHhh7yPbaMFSXUHF14UZdQE+Cm7i5nJVJmRc5RkpmS8QiS3pmXU2UpR0zIo7VmwOmnA==
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
     "@ant-design/icons-vue" "^5.1.5"
@@ -1861,6 +1861,7 @@ ant-design-vue@^2.0.0-beta.10:
     scroll-into-view-if-needed "^2.2.25"
     shallow-equal "^1.0.0"
     shallowequal "^1.0.2"
+    vue-types "^3.0.0"
     warning "^4.0.0"
  
 any-promise@^1.0.0, any-promise@^1.1.0:
@@ -4666,6 +4667,11 @@ is-plain-obj@^2.0.0:
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
   integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
  
+is-plain-object@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
+  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -8263,6 +8269,13 @@ vue-router@^4.0.0-rc.1:
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-rc.1.tgz#42f41315849163a1243886c9aa6d7c14f24fd003"
   integrity sha512-N3SSOIiRFo1/D6EkHGuahUSuyDvFhKizN5zVXkALX7wv0hYYndV49KwzRF5lKsAIt+OlDl7y+sNmwNewb7a4iw==
  
+vue-types@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/vue-types/-/vue-types-3.0.1.tgz#20e9baae8673de8093d0a989234695d08d544be0"
+  integrity sha512-UbvbzPu8DNzZRfMB1RDTFKBB6seMm80scMFdP+GkKaw00EugC3cjq9AtlS4y258vDkpAe9HfqbRO4cp63qVHXQ==
+  dependencies:
+    is-plain-object "3.0.1"
+
 vue@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/vue/-/vue-3.0.2.tgz#9d5b7b2983f35e64a34d13c7c9d6831239feca3c"