refactor: remove global import

vben

2021-01-18 6392b7f04839edf801f63a48cfe03461dbd160de

refactor: remove global import

 CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
### ✨ Refactor

- 新增 `SimpleMenu`组件替代左侧菜单组件(顶部菜单没有替换,功能尽量做到简单不卡)。解决菜单卡顿问题。
- `ant-design-vue`组件不再全局注册。以便于更好配合 css 按需引入。如果需要全局注册,需要自己加

### ✨ Features

@@ -13,6 +14,7 @@
- 修复 `TableAction`图标问题
- 修复菜单折叠按钮丢失问题
- 修复菜单相关问题
- 修复 moment 多语言问题

## 2.0.0-rc.16 (2020-01-12)


 build/vite/plugin/style-import.ts

@@ -5,20 +5,9 @@
    libs: [
      {
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          // ! col row popconfirm These three components have no corresponding css files after packaging. Need special treatment

          if (['col', 'row'].includes(name)) {
            return 'ant-design-vue/lib/grid/style/index.css';
          }

          if (['popconfirm'].includes(name)) {
            return [
              'ant-design-vue/lib/popover/style/index.css',
              'ant-design-vue/lib/button/style/index.css',
            ];
          }
          return `ant-design-vue/lib/${name}/style/index.css`;
          return `ant-design-vue/es/${name}/style/css`;
        },
      },
    ],

 package.json

@@ -29,7 +29,6 @@
    "echarts": "^4.9.0",
    "lodash-es": "^4.17.20",
    "mockjs": "^1.1.0",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.2.0",
    "qrcode": "^1.4.4",
@@ -98,12 +97,12 @@
    "stylelint-order": "^4.1.0",
    "ts-node": "^9.1.0",
    "typescript": "^4.1.3",
    "vite": "^2.0.0-beta.30",
    "vite": "^2.0.0-beta.31",
    "vite-plugin-html": "^2.0.0-beta.5",
    "vite-plugin-mock": "^2.0.0-beta.3",
    "vite-plugin-purge-icons": "^0.5.1",
    "vite-plugin-pwa": "^0.3.8",
    "vite-plugin-style-import": "^0.2.1",
    "vite-plugin-style-import": "^0.4.0",
    "vue-eslint-parser": "^7.3.0",
    "yargs": "^16.2.0"
  },

 src/assets/images/sidebar/dark.png

Binary files differ

 src/components/Application/src/search/AppSearchModal.vue

@@ -63,10 +63,11 @@
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import clickOutside from '/@/directives/clickOutside';
  import { Input } from 'ant-design-vue';

  export default defineComponent({
    name: 'AppSearchModal',
    components: { SearchOutlined, AppSearchFooter },
    components: { SearchOutlined, AppSearchFooter, [Input.name]: Input },
    emits: ['close'],

    props: {

 src/components/Form/src/components/FormAction.vue

@@ -42,7 +42,7 @@
  import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';

  import { defineComponent, computed, PropType } from 'vue';
  import { Form } from 'ant-design-vue';
  import { Form, Col } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import { BasicArrow } from '/@/components/Basic/index';
  import { useFormContext } from '../hooks/useFormContext';
@@ -58,6 +58,7 @@
      FormItem: Form.Item,
      Button,
      BasicArrow,
      [Col.name]: Col,
    },
    props: {
      showActionButtonGroup: propTypes.bool.def(true),

 src/components/Page/src/PageWrapper.vue

@@ -51,6 +51,7 @@
    setup(props, { slots }) {
      const headerRef = ref<ComponentRef>(null);
      const footerRef = ref<ComponentRef>(null);
      const footerHeight = ref(0);
      const { prefixCls } = useDesign('page-wrapper');
      const { contentHeight, setPageHeight, pageHeight } = usePageContext();

@@ -80,30 +81,33 @@
            ...bg,
            ...contentStyle,
            minHeight: `${unref(pageHeight)}px`,
            paddingBottom: `${unref(footerHeight)}px`,
          };
        }
      );

      watch(
        () => contentHeight?.value,
        (height) => {
        () => [contentHeight?.value, getShowFooter.value],
        () => {
          if (!props.contentFullHeight) {
            return;
          }
          nextTick(() => {
            const footer = unref(footerRef);
            const header = unref(headerRef);
            let footetHeight = 0;
            footerHeight.value = 0;
            const footerEl = footer?.$el;

            if (footerEl) {
              footetHeight += footerEl?.offsetHeight ?? 0;
              footerHeight.value += footerEl?.offsetHeight ?? 0;
            }
            let headerHeight = 0;
            const headerEl = header?.$el;
            if (headerEl) {
              headerHeight += headerEl?.offsetHeight ?? 0;
            }
            setPageHeight?.(height - footetHeight - headerHeight);

            setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight);
          });
        },
        {

 src/components/registerGlobComp.ts

@@ -5,48 +5,46 @@
  Button as AntButton,

  // Optional
  Select,
  Alert,
  Checkbox,
  DatePicker,
  Radio,
  Switch,
  Card,
  List,
  Tabs,
  Descriptions,
  Tree,
  Table,
  Divider,
  Modal,
  Drawer,
  Dropdown,
  Tag,
  Tooltip,
  Badge,
  Popover,
  Upload,
  Transfer,
  Steps,
  PageHeader,
  Result,
  Empty,
  Avatar,
  Menu,
  Breadcrumb,
  Form,
  Input,
  Row,
  Col,
  Spin,
  // Select,
  // Alert,
  // Checkbox,
  // DatePicker,
  // Radio,
  // Switch,
  // Card,
  // List,
  // Tabs,
  // Descriptions,
  // Tree,
  // Table,
  // Divider,
  // Modal,
  // Drawer,
  // Dropdown,
  // Tag,
  // Tooltip,
  // Badge,
  // Popover,
  // Upload,
  // Transfer,
  // Steps,
  // PageHeader,
  // Result,
  // Empty,
  // Avatar,
  // Menu,
  // Breadcrumb,
  // Form,
  // Input,
  // Row,
  // Col,
  // Spin,
} from 'ant-design-vue';
// import 'ant-design-vue/dist/antd.css';

import { App } from 'vue';

const compList = [Icon, Button, AntButton.Group];

// Fix hmr multiple registered components
export function registerGlobComp(app: App) {
  compList.forEach((comp: any) => {
    app.component(comp.name, comp);
@@ -55,39 +53,39 @@
  // Optional
  // If you need to customize global components, you can write here
  // If you don’t need it, you can delete it
  app
    .use(Select)
    .use(Alert)
    .use(Breadcrumb)
    .use(Checkbox)
    .use(DatePicker)
    .use(Radio)
    .use(Switch)
    .use(Card)
    .use(List)
    .use(Descriptions)
    .use(Tree)
    .use(Table)
    .use(Divider)
    .use(Modal)
    .use(Drawer)
    .use(Dropdown)
    .use(Tag)
    .use(Tooltip)
    .use(Badge)
    .use(Popover)
    .use(Upload)
    .use(Transfer)
    .use(Steps)
    .use(PageHeader)
    .use(Result)
    .use(Empty)
    .use(Avatar)
    .use(Menu)
    .use(Tabs)
    .use(Form)
    .use(Input)
    .use(Row)
    .use(Col)
    .use(Spin);
  // app
  //   .use(Select)
  //   .use(Alert)
  //   .use(Breadcrumb)
  //   .use(Checkbox)
  //   .use(DatePicker)
  //   .use(Radio)
  //   .use(Switch)
  //   .use(Card)
  //   .use(List)
  //   .use(Descriptions)
  //   .use(Tree)
  //   .use(Table)
  //   .use(Divider)
  //   .use(Modal)
  //   .use(Drawer)
  //   .use(Dropdown)
  //   .use(Tag)
  //   .use(Tooltip)
  //   .use(Badge)
  //   .use(Popover)
  //   .use(Upload)
  //   .use(Transfer)
  //   .use(Steps)
  //   .use(PageHeader)
  //   .use(Result)
  //   .use(Empty)
  //   .use(Avatar)
  //   .use(Menu)
  //   .use(Tabs)
  //   .use(Form)
  //   .use(Input)
  //   .use(Row)
  //   .use(Col)
  //   .use(Spin);
}

 src/design/ant/pagination.less

@@ -19,7 +19,7 @@
    .ant-pagination-prev,
    .ant-pagination-next,
    .ant-pagination-item {
      margin: 0 4px;
      margin: 0 4px !important;
      background: #f4f4f5 !important;
      border: none;
      border-radius: none !important;
@@ -61,6 +61,6 @@
  }

  &-disabled {
    display: none;
    display: none !important;
  }
}

 src/layouts/default/header/components/Breadcrumb.vue

@@ -14,10 +14,12 @@
  </div>
</template>
<script lang="ts">
  import type { RouteLocationMatched } from 'vue-router';

  import { defineComponent, ref, toRaw, watchEffect } from 'vue';
  import { Breadcrumb } from 'ant-design-vue';
  import { useI18n } from 'vue-i18n';

  import type { RouteLocationMatched } from 'vue-router';
  import { useRouter } from 'vue-router';
  import { filter } from '/@/utils/helper/treeHelper';
  import { REDIRECT_NAME } from '/@/router/constant';
@@ -35,7 +37,7 @@

  export default defineComponent({
    name: 'LayoutBreadcrumb',
    components: { HomeOutlined, Icon },
    components: { HomeOutlined, Icon, [Breadcrumb.name]: Breadcrumb },
    props: {
      theme: propTypes.oneOf(['dark', 'light']),
    },

 src/layouts/default/header/components/notify/NoticeList.vue

@@ -34,8 +34,15 @@
  import { defineComponent, PropType } from 'vue';
  import { ListItem } from './data';
  import { useDesign } from '/@/hooks/web/useDesign';

  import { List, Avatar, Tag } from 'ant-design-vue';
  export default defineComponent({
    components: {
      [Avatar.name]: Avatar,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
      [Tag.name]: Tag,
    },
    props: {
      list: {
        type: Array as PropType<ListItem[]>,

 src/locales/useLocale.ts

@@ -7,9 +7,9 @@
import { unref, ref } from 'vue';
import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';

import { dateUtil } from '/@/utils/dateUtil';

import { i18n } from './setupI18n';

import 'moment/locale/zh-cn';

const antConfigLocaleRef = ref<any>(null);

@@ -34,14 +34,12 @@
          antConfigLocaleRef.value = locale.default;
        });

        dateUtil.locale('cn');
        break;
      // English
      case 'en':
        import('ant-design-vue/es/locale/en_US').then((locale) => {
          antConfigLocaleRef.value = locale.default;
        });
        dateUtil.locale('en-us');
        break;

      // other

 src/views/dashboard/analysis/index.vue

@@ -49,7 +49,7 @@
  import TaskCard from './components/TaskCard.vue';
  import FlowAnalysis from './components/FlowAnalysis';
  import { CollapseContainer } from '/@/components/Container/index';

  import { Row, Col } from 'ant-design-vue';
  import { growCardList, taskList } from './data';
  export default defineComponent({
    components: {
@@ -61,6 +61,8 @@
      AnalysisBar,
      TaskCard,
      FlowAnalysis,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return { growCardList, taskList };

 src/views/dashboard/workbench/index.vue

@@ -19,9 +19,18 @@
  import Week from './components/Week.vue';
  import NewsList from './components/NewsList.vue';
  import ShortCuts from './components/ShortCuts.vue';
  import { Row, Col } from 'ant-design-vue';

  export default defineComponent({
    components: { ProdTotal, TodoList, Week, ShortCuts, NewsList },
    components: {
      ProdTotal,
      TodoList,
      Week,
      ShortCuts,
      NewsList,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return {};
    },

 src/views/demo/comp/button/index.vue

@@ -1,5 +1,6 @@
<template>
  <PageWrapper
    contentFullHeight
    title="基础组件"
    content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
  >

 src/views/demo/comp/loading/index.vue

@@ -20,9 +20,10 @@
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import { Loading, useLoading } from '/@/components/Loading';
  import { PageWrapper } from '/@/components/Page';
  import { Alert } from 'ant-design-vue';

  export default defineComponent({
    components: { Loading, PageWrapper },
    components: { Loading, PageWrapper, [Alert.name]: Alert },
    setup() {
      const wrapEl = ref<ElRef>(null);


 src/views/demo/comp/upload/index.vue

@@ -14,6 +14,7 @@
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { PageWrapper } from '/@/components/Page';
  import { Alert } from 'ant-design-vue';

  import { uploadApi } from '/@/api/sys/upload';

@@ -32,7 +33,7 @@
    },
  ];
  export default defineComponent({
    components: { BasicUpload, BasicForm, PageWrapper },
    components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert },
    setup() {
      const { createMessage } = useMessage();
      const [register] = useForm({

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

@@ -14,10 +14,11 @@
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { Input } from 'ant-design-vue';

  export default defineComponent({
    name: 'Copy',
    components: { CollapseContainer, PageWrapper },
    components: { CollapseContainer, PageWrapper, [Input.name]: Input },
    setup() {
      const valueRef = ref('');
      const { createMessage } = useMessage();

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

@@ -25,9 +25,10 @@
  } from '/@/utils/file/download';
  import imgBase64 from './imgBase64';
  import { PageWrapper } from '/@/components/Page';
  import { Alert } from 'ant-design-vue';

  export default defineComponent({
    components: { PageWrapper },
    components: { PageWrapper, [Alert.name]: Alert },
    setup() {
      function handleDownByData() {
        downloadByData('text content', 'testName.txt');

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

@@ -19,9 +19,11 @@
  import { CollapseContainer } from '/@/components/Container/index';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { PageWrapper } from '/@/components/Page';
  import { Input } from 'ant-design-vue';

  export default defineComponent({
    name: 'TabsDemo',
    components: { CollapseContainer, PageWrapper },
    components: { CollapseContainer, PageWrapper, [Input.name]: Input },
    setup() {
      const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTabs();


 src/views/demo/form/CustomerForm.vue

@@ -62,7 +62,7 @@
    },
  ];
  export default defineComponent({
    components: { BasicForm, CollapseContainer, PageWrapper },
    components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input },
    setup() {
      const { createMessage } = useMessage();
      const [register, { setProps }] = useForm({

 src/views/demo/page/account/center/Application.vue

@@ -29,7 +29,7 @@
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Card } from 'ant-design-vue';
  import { List, Card, Row, Col } from 'ant-design-vue';
  import Icon from '/@/components/Icon/index';
  import { applicationList } from './data';

@@ -39,6 +39,8 @@
      ListItem: List.Item,
      Card,
      Icon,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return {

 src/views/demo/page/account/center/Project.vue

@@ -19,7 +19,7 @@
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Card } from 'ant-design-vue';
  import { List, Card, Row, Col } from 'ant-design-vue';
  import demoImg from '/@/assets/images/demo.png';
  import { projectList } from './data';

@@ -28,6 +28,8 @@
      List,
      ListItem: List.Item,
      Card,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return {

 src/views/demo/page/account/center/index.vue

@@ -51,7 +51,7 @@
</template>

<script lang="ts">
  import { Tag, Tabs } from 'ant-design-vue';
  import { Tag, Tabs, Row, Col } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import Icon from '/@/components/Icon/index';
@@ -72,6 +72,8 @@
      Article,
      Application,
      Project,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return {

 src/views/demo/page/account/setting/BaseSetting.vue

@@ -18,7 +18,7 @@
  </CollapseContainer>
</template>
<script lang="ts">
  import { Button, Upload } from 'ant-design-vue';
  import { Button, Upload, Row, Col } from 'ant-design-vue';
  import { defineComponent, onMounted } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container/index';
@@ -31,7 +31,15 @@
  import { baseSetschemas } from './data';

  export default defineComponent({
    components: { BasicForm, CollapseContainer, Button, Upload, Icon },
    components: {
      BasicForm,
      CollapseContainer,
      Button,
      Upload,
      Icon,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      const { createMessage } = useMessage();


 src/views/demo/page/desc/basic/index.vue

@@ -29,6 +29,7 @@
  import { Description } from '/@/components/Description/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Divider } from 'ant-design-vue';

  import {
    refundSchema,
@@ -41,7 +42,7 @@
    refundTimeTableData,
  } from './data';
  export default defineComponent({
    components: { Description, BasicTable, PageWrapper },
    components: { Description, BasicTable, PageWrapper, [Divider.name]: Divider },
    setup() {
      const [registerRefundTable] = useTable({
        title: '退货商品',

 src/views/demo/page/desc/high/index.vue

@@ -90,10 +90,24 @@
  import { Description } from '/@/components/Description/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';

  import { refundTimeTableSchema, refundTimeTableData } from './data';
  export default defineComponent({
    components: { Description, BasicTable, PageWrapper },
    components: {
      Description,
      BasicTable,
      PageWrapper,
      [Divider.name]: Divider,
      [Card.name]: Card,
      AEmpty: Empty,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const [registerTimeTable] = useTable({
        title: '退货进度',

 src/views/demo/page/form/high/index.vue

@@ -27,9 +27,10 @@
  import PersonTable from './PersonTable.vue';
  import { PageWrapper } from '/@/components/Page';
  import { schemas, taskSchemas } from './data';
  import { Card } from 'ant-design-vue';

  export default defineComponent({
    components: { BasicForm, PersonTable, PageWrapper },
    components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
    setup() {
      const tableRef = ref<{ getDataSource: () => any } | null>(null);


 src/views/demo/page/form/step/Step1.vue

@@ -31,8 +31,16 @@
  import { BasicForm, useForm } from '/@/components/Form';
  import { step1Schemas } from './data';

  import { Select, Input, Divider } from 'ant-design-vue';
  export default defineComponent({
    components: { BasicForm },
    components: {
      BasicForm,
      [Select.name]: Select,
      ASelectOption: Select.Option,
      [Input.name]: Input,
      [Input.Group.name]: Input.Group,
      [Divider.name]: Divider,
    },
    emits: ['next'],
    setup(_, { emit }) {
      const [register, { validate }] = useForm({

 src/views/demo/page/form/step/Step2.vue

@@ -15,9 +15,16 @@
  import { defineComponent } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from './data';
  import { Alert, Divider, Descriptions } from 'ant-design-vue';

  export default defineComponent({
    components: { BasicForm },
    components: {
      BasicForm,
      [Alert.name]: Alert,
      [Divider.name]: Divider,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    emits: ['next', 'prev'],
    setup(_, { emit }) {
      const [register, { validate, setProps }] = useForm({

 src/views/demo/page/form/step/Step3.vue

@@ -18,9 +18,13 @@
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { Result, Descriptions } from 'ant-design-vue';
  export default defineComponent({
    components: {},
    components: {
      [Result.name]: Result,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    emits: ['redo'],
    setup(_, { emit }) {
      return {

 src/views/demo/page/form/step/index.vue

@@ -30,9 +30,17 @@
  import Step2 from './Step2.vue';
  import Step3 from './Step3.vue';
  import { PageWrapper } from '/@/components/Page';
  import { Steps } from 'ant-design-vue';

  export default defineComponent({
    components: { Step1, Step2, Step3, PageWrapper },
    components: {
      Step1,
      Step2,
      Step3,
      PageWrapper,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
    },
    setup() {
      const current = ref(0);


 src/views/demo/page/list/basic/index.vue

@@ -49,14 +49,24 @@
  </PageWrapper>
</template>
<script lang="ts">
  import { Progress } from 'ant-design-vue';
  import { Progress, Row, Col } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import Icon from '/@/components/Icon/index';
  import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { List } from 'ant-design-vue';

  export default defineComponent({
    components: { Icon, Progress, PageWrapper },
    components: {
      Icon,
      Progress,
      PageWrapper,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return {
        prefixCls: 'list-basic',

 src/views/demo/page/list/card/index.vue

@@ -37,9 +37,18 @@
  import Icon from '/@/components/Icon/index';
  import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, List } from 'ant-design-vue';

  export default defineComponent({
    components: { Icon, PageWrapper },
    components: {
      Icon,
      PageWrapper,
      [Card.name]: Card,
      [List.name]: List,
      [List.Item.name]: List.Item,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      return {
        prefixCls: 'list-card',

 src/views/demo/page/list/search/index.vue

@@ -53,9 +53,18 @@
  import { BasicForm } from '/@/components/Form/index';
  import { actions, searchList, schemas } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { List } from 'ant-design-vue';

  export default defineComponent({
    components: { Icon, Tag, BasicForm, PageWrapper },
    components: {
      Icon,
      Tag,
      BasicForm,
      PageWrapper,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
    },
    setup() {
      return {
        prefixCls: 'list-search',

 src/views/sys/login/Login.vue

@@ -10,7 +10,7 @@
            <h1>{{ title }}</h1>
          </header>

          <a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
          <a-form class="login-form__main" :model="formData" :rules="formRules" ref="formRef">
            <a-form-item name="account">
              <a-input size="large" v-model:value="formData.account" placeholder="username: vben" />
            </a-form-item>
@@ -23,9 +23,6 @@
              />
            </a-form-item>

            <!-- <a-form-item name="verify" v-if="openLoginVerify">
              <BasicDragVerify v-model:value="formData.verify" ref="verifyRef" />
            </a-form-item> -->
            <a-row>
              <a-col :span="12">
                <a-form-item>
@@ -61,15 +58,13 @@
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, unref, toRaw } from 'vue';
  import { Checkbox } from 'ant-design-vue';
  import { Checkbox, Form, Input, Row, Col } from 'ant-design-vue';

  import { Button } from '/@/components/Button';
  import { AppLocalePicker } from '/@/components/Application';
  // import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';

  import { userStore } from '/@/store/modules/user';

  // import { appStore } from '/@/store/modules/app';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting, useProjectSetting } from '/@/hooks/setting';
  import logo from '/@/assets/images/logo.png';
@@ -77,27 +72,28 @@

  export default defineComponent({
    components: {
      //  BasicDragVerify,
      [Checkbox.name]: Checkbox,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Input.Password.name]: Input.Password,
      AButton: Button,
      ACheckbox: Checkbox,
      AppLocalePicker,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      const formRef = ref<any>(null);
      const autoLoginRef = ref(false);
      // const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);

      const globSetting = useGlobSetting();
      const { locale } = useProjectSetting();
      const { notification } = useMessage();
      const { t } = useI18n();

      // const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);

      const formData = reactive({
        account: 'vben',
        password: '123456',
        // verify: undefined,
      });

      const formState = reactive({
@@ -109,15 +105,7 @@
        password: [
          { required: true, message: t('sys.login.passwordPlaceholder'), trigger: 'blur' },
        ],
        // verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
      });

      // function resetVerify() {
      //   const verify = unref(verifyRef);
      //   if (!verify) return;
      //   formData.verify && verify.$.resume();
      //   formData.verify = undefined;
      // }

      async function handleLogin() {
        const form = unref(formRef);
@@ -140,19 +128,16 @@
          }
        } catch (error) {
        } finally {
          // resetVerify();
          formState.loading = false;
        }
      }
      return {
        formRef,
        // verifyRef,
        formData,
        formState,
        formRules,
        login: handleLogin,
        autoLogin: autoLoginRef,
        // openLoginVerify: openLoginVerifyRef,
        title: globSetting && globSetting.title,
        logo,
        t,
@@ -196,6 +181,10 @@
      background-clip: padding-box;
      .respond-to(xlarge, { margin: 0 120px 0 50px});

      &__main {
        margin: 30px auto 0 auto !important;
      }

      &-wrap {
        position: absolute;
        top: 0;

 vite.config.ts

@@ -88,10 +88,11 @@

    optimizeDeps: {
      include: [
        'moment',
        '@ant-design/icons-vue',
        'echarts/map/js/china',
        'ant-design-vue/es/locale/zh_CN',
        'moment/dist/locale/zh-cn',
        'moment/locale/zh-cn',
        'ant-design-vue/es/locale/en_US',
      ],
    },

 yarn.lock

@@ -5691,7 +5691,7 @@
  resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==

moment@^2.27.0, moment@^2.29.1:
moment@^2.27.0:
  version "2.29.1"
  resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -8086,10 +8086,10 @@
    pretty-bytes "^5.5.0"
    workbox-build "^6.0.2"

vite-plugin-style-import@^0.2.1:
  version "0.2.1"
  resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.2.1.tgz#9ad5890697efe360853e6f2e0d7dc2c92227d2d6"
  integrity sha512-mbRBOz4FMZseLQ5N+QUpFoG6tkIfdRfjIRykgfYn3s4SQCivdvkDWeqPsEQY8K8Q5valwCpqP9UAnNxc0dJbQQ==
vite-plugin-style-import@^0.4.0:
  version "0.4.0"
  resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.4.0.tgz#050664a6d3ce78bb1a32f7ac8e971ee49ab889f4"
  integrity sha512-OXQ0J9Mtndag0dmSKGKpu3T2NbVvKm6vbIa1M6RprVVThRAwBgX+LSwhK7GRQiSDGH5aI6yZuVQRloVFx+pK+Q==
  dependencies:
    "@babel/core" "^7.12.10"
    "@babel/helper-module-imports" "^7.12.5"
@@ -8097,10 +8097,10 @@
    "@rollup/pluginutils" "^4.1.0"
    change-case "^4.1.2"

vite@^2.0.0-beta.30:
  version "2.0.0-beta.30"
  resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.30.tgz#d0c1056d1fb05c489614360f92363eebec41a6b4"
  integrity sha512-wOeO64J3k4jGjCOkH/6RUcIyT/HOTaDZSiXE75aWYqV9hI7Q6uEeSXbAFtb9bG82RGLEWdsqtCvx5t7gaeqtsw==
vite@^2.0.0-beta.31:
  version "2.0.0-beta.31"
  resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.31.tgz#0ce5f6c496c29f72062f9f0ae70dd6dfb18b0916"
  integrity sha512-tHBgSsSp0+dbz8tas6zOj2KbJSKOme62jXN13rk8BZdJEum5FDnwon9+7oas4db3NnVBLnciWa1r8QUNoOZjrA==
  dependencies:
    esbuild "^0.8.26"
    postcss "^8.2.1"