refactor: remove global import

vben
1 parent c2f6542b
Showing 38 changed files with 256 additions and 162 deletions
CHANGELOG.zh_CN.md
build/vite/plugin/style-import.ts
package.json
src/assets/images/sidebar/dark.png
src/components/Application/src/search/AppSearchModal.vue
src/components/Form/src/components/FormAction.vue
src/components/Page/src/PageWrapper.vue
src/components/registerGlobComp.ts
src/design/ant/pagination.less
src/layouts/default/header/components/Breadcrumb.vue
src/layouts/default/header/components/notify/NoticeList.vue
src/locales/useLocale.ts
src/views/dashboard/analysis/index.vue
src/views/dashboard/workbench/index.vue
src/views/demo/comp/button/index.vue
src/views/demo/comp/loading/index.vue
src/views/demo/comp/upload/index.vue
src/views/demo/feat/copy/index.vue
src/views/demo/feat/download/index.vue
src/views/demo/feat/tabs/index.vue
@@ -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)
@@ -5,20 +5,9 @@ export function configStyleImportConfig() {
     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`;
         },
       },
     ],
@@ -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"
   },
@@ -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: {
@@ -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),
@@ -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);
           });
         },
         {
@@ -5,48 +5,46 @@ import {
   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 @@ export function registerGlobComp(app: App) {
   // 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);
 }
@@ -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;
   }
 }
@@ -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']),
     },
@@ -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[]>,
@@ -7,10 +7,10 @@ import type { Ref } from &#39;vue&#39;;
 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);
 export function useLocale() {
@@ -34,14 +34,12 @@ export function useLocale() {
           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
@@ -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 };
@@ -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 {};
     },
 <template>
   <PageWrapper
+    contentFullHeight
     title="基础组件"
     content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
   >
@@ -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);
@@ -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({
@@ -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();
@@ -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');
@@ -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();
@@ -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({
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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();
@@ -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: '退货商品',
@@ -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: '退货进度',
@@ -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);
@@ -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({
@@ -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({
@@ -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 {
@@ -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);
@@ -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',
@@ -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',
@@ -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',
@@ -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,16 +105,8 @@
         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);
         if (!form) return;
@@ -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;
@@ -88,10 +88,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
     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',
       ],
     },
@@ -5691,7 +5691,7 @@ modify-values@^1.0.0:
   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 @@ vite-plugin-pwa@^0.3.8:
     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 @@ vite-plugin-style-import@^0.2.1:
     "@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"