fix: some error

vben

2020-10-31 2407b3368c3fc5128bbfced98a1d2c70fa3e02e0

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 { 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 @@
    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 @@
      }
      return opt;
    });

    watchEffect(() => {
      visibleRef.value = props.visible;
    });

    watch(
      () => visibleRef.value,
      (visible) => {
@@ -82,6 +70,15 @@
        immediate: false,
      }
    );

    // 底部按钮自定义实现,
    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) {
@@ -103,14 +100,6 @@
      }
    }

    // 底部按钮自定义实现,
    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 @@
                    )}
                  </Col>
                )}

                {title && (
                  <Col style="flex:1" class={[`${prefixCls}__detail-title`, 'ellipsis', 'px-2']}>
                    {() => title}
                  </Col>
                )}

                {getSlot(slots, 'titleToolbar')}
              </>
            )}
@@ -208,22 +199,22 @@
            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 @@
   * 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 { 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 @@
  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 @@
  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 @@
  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 @@
  componentProps?: any;

  // 校验规则
  rules?: ValidationRule[];
  rules?: RuleObject[];
  // 校验信息是否加入label
  rulesMessageJoinLabel?: boolean;

@@ -150,7 +151,7 @@

  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 @@
   * 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 @@
   * 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 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 @@
  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 @@
  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 @@
    default: 0,
  },
  rowSelection: {
    type: Object as PropType<TableRowSelection<any> | null>,
    type: Object as PropType<TableRowSelection | null>,
    default: null,
  },
  title: {

 src/components/Table/src/types/column.ts

New file
@@ -0,0 +1,198 @@
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>;
}

 src/components/Table/src/types/pagination.ts

@@ -1,5 +1,15 @@
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

 src/components/Table/src/types/table.ts

@@ -1,21 +1,65 @@
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 {
@@ -231,7 +275,7 @@
   * 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 @@
   * 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 @@
   * @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 @@
  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';

 src/design/ant/index.less

@@ -2,6 +2,10 @@
@import './input.less';
@import './btn.less';

.ant-col {
  width: 100%;
}

// =================================
// ==============descriptions=======
// =================================

 src/setup/ant-design-vue/index.ts

@@ -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';


 src/views/dashboard/analysis/components/FlowAnalysis.tsx

@@ -11,7 +11,7 @@
      return (
        <Row>
          {() => (
            <div>
            <>
              <Col md={24} lg={8}>
                {() => (
                  <CollapseContainer
@@ -56,7 +56,7 @@
                  </CollapseContainer>
                )}
              </Col>
            </div>
            </>
          )}
        </Row>
      );

 src/views/dashboard/workbench/components/ProdTotal.vue

@@ -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;

 src/views/demo/feat/i18n/index.vue

@@ -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 />

 src/views/demo/permission/front/Btn.vue

@@ -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>

 src/views/demo/permission/front/index.vue

@@ -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>

 src/views/sys/login/Login.vue

@@ -29,7 +29,7 @@
                type="primary"
                size="large"
                class="rounded-sm"
                block
                :block="true"
                @click="login"
                :loading="formState.loading"
                >登录</a-button

 yarn.lock

@@ -1830,10 +1830,10 @@
  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 @@
    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:
@@ -4665,6 +4666,11 @@
  version "2.1.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"
@@ -8263,6 +8269,13 @@
  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"