chore: format code by eslint #222

vben
1 parent b77b7c9d
Showing 149 changed files with 574 additions and 421 deletions
.eslintrc.js
.yarnclean
package.json
src/components/Application/src/AppLocalePicker.vue
src/components/Application/src/AppProvider.vue
src/components/Application/src/search/AppSearch.vue
src/components/Application/src/search/AppSearchModal.vue
src/components/Basic/src/BasicTitle.vue
src/components/Button/src/BasicButton.vue
src/components/Button/src/PopConfirmButton.vue
src/components/ClickOutSide/src/index.vue
src/components/Container/src/LazyContainer.vue
src/components/Container/src/ScrollContainer.vue
src/components/Container/src/collapse/CollapseContainer.vue
src/components/Container/src/collapse/CollapseHeader.vue
src/components/Drawer/src/BasicDrawer.vue
src/components/Drawer/src/components/DrawerFooter.vue
src/components/Drawer/src/components/DrawerHeader.vue
src/components/Dropdown/src/Dropdown.vue
src/components/Excel/src/ImportExcel.vue
@@ -57,5 +57,27 @@ module.exports = {
       },
     ],
     'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    // 'vue/html-self-closing': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
   },
 };
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
+
+!istanbul-reports/lib/html/assets
+!istanbul-api/node_modules/istanbul-reports/lib/html/assets
@@ -14,7 +14,7 @@
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "clean:lib": "npx rimraf node_modules",
     "typecheck": "vuedx-typecheck .",
-    "lint:eslint": "eslint --fix --ext \"src/**/*.{vue,less,css,scss}\"",
+    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"
@@ -63,7 +63,7 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
-    "@vitejs/plugin-legacy": "^1.2.1",
+    "@vitejs/plugin-legacy": "^1.2.2",
     "@vitejs/plugin-vue": "^1.1.2",
     "@vitejs/plugin-vue-jsx": "^1.0.2",
     "@vue/compiler-sfc": "^3.0.5",
@@ -93,7 +93,7 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3",
-    "vite": "2.0.0-beta.50",
+    "vite": "2.0.0-beta.52",
     "vite-plugin-html": "^2.0.0-beta.6",
     "vite-plugin-mock": "^2.0.0-rc.2",
     "vite-plugin-purge-icons": "^0.6.0",
@@ -20,7 +20,6 @@
   import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
  
   import { Dropdown, DropMenu } from '/@/components/Dropdown';
-  import { GlobalOutlined } from '@ant-design/icons-vue';
  
   import { useLocale } from '/@/locales/useLocale';
   import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
@@ -33,7 +32,7 @@
   import Icon from '/@/components/Icon';
   export default defineComponent({
     name: 'AppLocalPicker',
-    components: { GlobalOutlined, Dropdown, Icon },
+    components: { Dropdown, Icon },
     props: {
       // Whether to display text
       showText: propTypes.bool.def(true),
 <template>
-  <slot />
+  <slot></slot>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
 <template>
   <div :class="prefixCls" v-if="getShowSearch" @click.stop="handleSearch">
     <Tooltip>
-      <template #title> {{ t('common.searchText') }} </template>
+      <template #title>
+        {{ t('common.searchText') }}
+      </template>
       <SearchOutlined />
     </Tooltip>
  
@@ -40,7 +40,9 @@
               <div :class="`${prefixCls}-list__item-icon`">
                 <g-icon :icon="item.icon || 'mdi:form-select'" :size="20" />
               </div>
-              <div :class="`${prefixCls}-list__item-text`">{{ item.name }}</div>
+              <div :class="`${prefixCls}-list__item-text`">
+                {{ item.name }}
+              </div>
               <div :class="`${prefixCls}-list__item-enter`">
                 <g-icon icon="ant-design:enter-outlined" :size="20" />
               </div>
@@ -68,14 +70,14 @@
   export default defineComponent({
     name: 'AppSearchModal',
     components: { SearchOutlined, AppSearchFooter, [Input.name]: Input },
-    emits: ['close'],
+    directives: {
+      clickOutside,
+    },
  
     props: {
       visible: Boolean,
     },
-    directives: {
-      clickOutside,
-    },
+    emits: ['close'],
     setup(_, { emit }) {
       const scrollWrap = ref<ElRef>(null);
       const { prefixCls } = useDesign('app-search-modal');
 <template>
   <span :class="[prefixCls, { 'show-span': span && $slots.default }]">
-    <slot />
+    <slot></slot>
     <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
   </span>
 </template>
@@ -2,7 +2,7 @@
   <Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
     <template #default="data">
       <Icon :icon="preIcon" v-if="preIcon" :size="14" />
-      <slot v-bind="data" />
+      <slot v-bind="data"></slot>
       <Icon :icon="postIcon" v-if="postIcon" :size="14" />
     </template>
   </Button>
@@ -16,8 +16,8 @@
  
   export default defineComponent({
     name: 'AButton',
-    inheritAttrs: false,
     components: { Button, Icon },
+    inheritAttrs: false,
     props: {
       type: propTypes.oneOf(['primary', 'default', 'danger', 'dashed', 'link']).def('default'),
       color: propTypes.oneOf(['error', 'warning', 'success', '']),
@@ -10,8 +10,8 @@
  
   export default defineComponent({
     name: 'PopButton',
-    inheritAttrs: false,
     components: { Popconfirm, BasicButton },
+    inheritAttrs: false,
     props: {
       size: propTypes.oneOf(['large', 'default', 'small']).def(),
       enable: propTypes.bool.def(true),
 <template>
-  <div ref="wrap"><slot /></div>
+  <div ref="wrap">
+    <slot></slot>
+  </div>
 </template>
 <script lang="ts">
   import type { Ref } from 'vue';
@@ -8,10 +8,10 @@
     mode="out-in"
   >
     <div key="component" v-if="isInit">
-      <slot :loading="loading" />
+      <slot :loading="loading"></slot>
     </div>
     <div key="skeleton" v-else name="lazy-skeleton">
-      <slot name="skeleton" v-if="$slots.skeleton" />
+      <slot name="skeleton" v-if="$slots.skeleton"></slot>
       <Skeleton v-else />
     </div>
   </transition-group>
@@ -35,8 +35,8 @@
  
   export default defineComponent({
     name: 'LazyContainer',
-    inheritAttrs: false,
     components: { Skeleton },
+    inheritAttrs: false,
     props: {
       // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
       timeout: propTypes.number,
@@ -102,7 +102,7 @@
         const { timeout, direction, threshold } = props;
         if (timeout) return;
         // According to the scrolling direction to construct the viewport margin, used to load in advance
-        let rootMargin: string = '0px';
+        let rootMargin = '0px';
         switch (direction) {
           case 'vertical':
             rootMargin = `${threshold} 0px`;
 <template>
   <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
-    <slot />
+    <slot></slot>
   </Scrollbar>
 </template>
  
@@ -2,7 +2,7 @@
   <div :class="['p-2', prefixCls]">
     <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
       <template #title>
-        <slot name="title" />
+        <slot name="title"></slot>
       </template>
     </CollapseHeader>
  
@@ -10,12 +10,12 @@
       <Skeleton v-if="loading" />
       <div :class="`${prefixCls}__body`" v-else v-show="show">
         <LazyContainer :timeout="lazyTime" v-if="lazy">
-          <slot />
+          <slot></slot>
           <template #skeleton>
-            <slot name="lazySkeleton" />
+            <slot name="lazySkeleton"></slot>
           </template>
         </LazyContainer>
-        <slot v-else />
+        <slot v-else></slot>
       </div>
     </CollapseTransition>
   </div>
@@ -5,12 +5,12 @@
         {{ $attrs.title }}
       </template>
       <template v-else>
-        <slot name="title" />
+        <slot name="title"></slot>
       </template>
     </BasicTitle>
  
     <div :class="`${prefixCls}__action`">
-      <slot name="action" />
+      <slot name="action"></slot>
       <BasicArrow v-if="$attrs.canExpan" top :expand="$attrs.show" @click="$emit('expand')" />
     </div>
   </div>
@@ -19,10 +19,11 @@
   import { defineComponent } from 'vue';
   import { BasicArrow, BasicTitle } from '/@/components/Basic';
   export default defineComponent({
-    inheritAttrs: false,
     components: { BasicArrow, BasicTitle },
+    inheritAttrs: false,
     props: {
       prefixCls: String,
     },
+    emits: ['expand'],
   });
 </script>
@@ -8,7 +8,7 @@
         @close="onClose"
       >
         <template #titleToolbar>
-          <slot name="titleToolbar" />
+          <slot name="titleToolbar"></slot>
         </template>
       </DrawerHeader>
     </template>
@@ -18,11 +18,11 @@
       v-loading="getLoading"
       :loading-tip="loadingText || t('common.loadingText')"
     >
-      <slot />
+      <slot></slot>
     </ScrollContainer>
     <DrawerFooter v-bind="getProps" @close="onClose" @ok="handleOk" :height="getFooterHeight">
       <template #[item]="data" v-for="item in Object.keys($slots)">
-        <slot :name="item" v-bind="data" />
+        <slot :name="item" v-bind="data"></slot>
       </template>
     </DrawerFooter>
   </Drawer>
@@ -57,8 +57,8 @@
   import { useAttrs } from '/@/hooks/core/useAttrs';
  
   export default defineComponent({
-    inheritAttrs: false,
     components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
+    inheritAttrs: false,
     props: basicProps,
     emits: ['visible-change', 'ok', 'close', 'register'],
     setup(props, { emit }) {
 <template>
   <div :class="prefixCls" :style="getStyle" v-if="showFooter || $slots.footer">
     <template v-if="!$slots.footer">
-      <slot name="insertFooter" />
+      <slot name="insertFooter"></slot>
       <a-button v-bind="cancelButtonProps" @click="handleClose" class="mr-2" v-if="showCancelBtn">
         {{ cancelText }}
       </a-button>
-      <slot name="centerFooter" />
+      <slot name="centerFooter"></slot>
       <a-button
         :type="okType"
         @click="handleOk"
@@ -16,11 +16,11 @@
       >
         {{ okText }}
       </a-button>
-      <slot name="appendFooter" />
+      <slot name="appendFooter"></slot>
     </template>
  
     <template v-else>
-      <slot name="footer" />
+      <slot name="footer"></slot>
     </template>
   </div>
 </template>
 <template>
   <BasicTitle v-if="!isDetail" :class="prefixCls">
-    <slot name="title" />
+    <slot name="title"></slot>
     {{ !$slots.title ? title : '' }}
   </BasicTitle>
  
@@ -13,7 +13,7 @@
     </span>
  
     <span :class="`${prefixCls}__toolbar`">
-      <slot name="titleToolbar" />
+      <slot name="titleToolbar"></slot>
     </span>
   </div>
 </template>
@@ -33,6 +33,7 @@
       showDetailBack: propTypes.bool,
       title: propTypes.string,
     },
+    emits: ['close'],
     setup(_, { emit }) {
       const { prefixCls } = useDesign('basic-drawer-header');
  
 <template>
   <a-dropdown :trigger="trigger" v-bind="$attrs">
     <span>
-      <slot />
+      <slot></slot>
     </span>
     <template #overlay>
       <a-menu :selectedKeys="selectedKeys">
@@ -7,7 +7,9 @@
       accept=".xlsx, .xls"
       @change="handleInputClick"
     />
-    <div @click="handleUpload"><slot /></div>
+    <div @click="handleUpload">
+      <slot></slot>
+    </div>
   </div>
 </template>
 <script lang="ts">
 <template>
   <Form v-bind="{ ...$attrs, ...$props }" :class="getFormClass" ref="formElRef" :model="formModel">
     <Row :style="getRowWrapStyle">
-      <slot name="formHeader" />
+      <slot name="formHeader"></slot>
       <template v-for="schema in getSchema" :key="schema.field">
         <FormItem
           :tableAction="tableAction"
@@ -13,7 +13,7 @@
           :setFormModel="setFormModel"
         >
           <template #[item]="data" v-for="item in Object.keys($slots)">
-            <slot :name="item" v-bind="data" />
+            <slot :name="item" v-bind="data"></slot>
           </template>
         </FormItem>
       </template>
@@ -23,10 +23,10 @@
           #[item]="data"
           v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']"
         >
-          <slot :name="item" v-bind="data" />
+          <slot :name="item" v-bind="data"></slot>
         </template>
       </FormAction>
-      <slot name="formFooter" />
+      <slot name="formFooter"></slot>
     </Row>
   </Form>
 </template>
 <template>
   <Select v-bind="attrs" :options="getOptions" v-model:value="state">
     <template #[item]="data" v-for="item in Object.keys($slots)">
-      <slot :name="item" v-bind="data" />
+      <slot :name="item" v-bind="data"></slot>
     </template>
     <template #suffixIcon v-if="loading">
       <LoadingOutlined spin />
 <template>
   <a-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
     <FormItem>
-      <slot name="resetBefore" />
+      <slot name="resetBefore"></slot>
       <Button
         type="default"
         class="mr-2"
@@ -11,7 +11,7 @@
       >
         {{ getResetBtnOptions.text }}
       </Button>
-      <slot name="submitBefore" />
+      <slot name="submitBefore"></slot>
  
       <Button
         type="primary"
@@ -23,7 +23,7 @@
         {{ getSubmitBtnOptions.text }}
       </Button>
  
-      <slot name="advanceBefore" />
+      <slot name="advanceBefore"></slot>
       <Button
         type="link"
         size="small"
@@ -33,7 +33,7 @@
         {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
         <BasicArrow class="ml-1" :expand="!isAdvanced" top />
       </Button>
-      <slot name="advanceAfter" />
+      <slot name="advanceAfter"></slot>
     </FormItem>
   </a-col>
 </template>
@@ -81,6 +81,7 @@
       isAdvanced: propTypes.bool,
       hideAdvanceBtn: propTypes.bool,
     },
+    emits: ['toggle-advanced'],
     setup(props, { emit }) {
       const { t } = useI18n();
  
@@ -5,7 +5,9 @@
 <template>
   <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
     <template v-for="item in getOptions" :key="`${item.value}`">
-      <RadioButton :value="item.value"> {{ item.label }} </RadioButton>
+      <RadioButton :value="item.value">
+        {{ item.label }}
+      </RadioButton>
     </template>
   </RadioGroup>
 </template>
@@ -36,7 +36,7 @@ export interface FormActionType {
   appendSchemaByField: (
     schema: FormSchema,
     prefixField: string | undefined,
-    first: boolean | undefined
+    first?: boolean | undefined
   ) => Promise<void>;
   validateFields: (nameList?: NamePath[]) => Promise<any>;
   validate: (nameList?: NamePath[]) => Promise<any>;
 <template>
-  <span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle" />
+  <span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle"></span>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
 <template>
-  <div ref="wrapRef" />
+  <div ref="wrapRef"></div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, computed } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    onMounted,
+    unref,
+    onUnmounted,
+    nextTick,
+    computed,
+    watchEffect,
+  } from 'vue';
   import Vditor from 'vditor';
   import 'vditor/dist/index.css';
  
@@ -25,25 +34,26 @@
  
       const modalFn = useModalContext();
  
-      const lang = ref<Lang>();
-
       const { getLang } = useLocale();
  
+      watchEffect(() => {});
+
       const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
+        let lang: Lang;
         switch (unref(getLang)) {
           case 'en':
-            lang.value = 'en_US';
+            lang = 'en_US';
             break;
           case 'ja':
-            lang.value = 'ja_JP';
+            lang = 'ja_JP';
             break;
           case 'ko':
-            lang.value = 'ko_KR';
+            lang = 'ko_KR';
             break;
           default:
-            lang.value = 'zh_CN';
+            lang = 'zh_CN';
         }
-        return lang.value;
+        return lang;
       });
       function init() {
         const wrapEl = unref(wrapRef);
@@ -30,7 +30,6 @@
     components: {
       BasicMenuItem,
       SubMenu: Menu.SubMenu,
-      MenuItem: Menu.Item,
       MenuItemContent,
     },
     props: itemProps,
@@ -16,7 +16,7 @@
     <template #footer v-if="!$slots.footer">
       <ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel">
         <template #[item]="data" v-for="item in Object.keys($slots)">
-          <slot :name="item" v-bind="data" />
+          <slot :name="item" v-bind="data"></slot>
         </template>
       </ModalFooter>
     </template>
@@ -35,11 +35,11 @@
       @ext-height="handleExtHeight"
       @height-change="handleHeightChange"
     >
-      <slot />
+      <slot></slot>
     </ModalWrapper>
  
     <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
-      <slot :name="item" v-bind="data" />
+      <slot :name="item" v-bind="data"></slot>
     </template>
   </Modal>
 </template>
@@ -71,8 +71,8 @@
   import { omit } from 'lodash-es';
   export default defineComponent({
     name: 'BasicModal',
-    inheritAttrs: false,
     components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
+    inheritAttrs: false,
     props: basicProps,
     emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
     setup(props, { emit, attrs }) {
 <template>
   <div>
-    <slot name="insertFooter" />
+    <slot name="insertFooter"></slot>
     <a-button v-bind="cancelButtonProps" @click="handleCancel" v-if="showCancelBtn">
       {{ cancelText }}
     </a-button>
-    <slot name="centerFooter" />
+    <slot name="centerFooter"></slot>
     <a-button
       :type="okType"
       @click="handleOk"
@@ -14,7 +14,7 @@
     >
       {{ okText }}
     </a-button>
-    <slot name="appendFooter" />
+    <slot name="appendFooter"></slot>
   </div>
 </template>
 <script lang="ts">
 <template>
   <ScrollContainer ref="wrapperRef">
     <div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
-      <slot />
+      <slot></slot>
     </div>
   </ScrollContainer>
 </template>
@@ -20,7 +20,6 @@
     nextTick,
     onUnmounted,
   } from 'vue';
-  import { Spin } from 'ant-design-vue';
  
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
   import { ScrollContainer } from '/@/components/Container';
@@ -31,8 +30,8 @@
  
   export default defineComponent({
     name: 'ModalWrapper',
+    components: { ScrollContainer },
     inheritAttrs: false,
-    components: { Spin, ScrollContainer },
     props: {
       loading: propTypes.bool,
       useWrapper: propTypes.bool.def(true),
 <template>
   <div :class="prefixCls" :style="{ width: getCalcContentWidth }">
     <div :class="`${prefixCls}__left`">
-      <slot name="left" />
+      <slot name="left"></slot>
     </div>
-    <slot />
+    <slot></slot>
     <div :class="`${prefixCls}__right`">
-      <slot name="right" />
+      <slot name="right"></slot>
     </div>
   </div>
 </template>
@@ -5,21 +5,21 @@
         <template v-if="content">
           {{ content }}
         </template>
-        <slot name="headerContent" v-else />
+        <slot name="headerContent" v-else></slot>
       </template>
       <template #[item]="data" v-for="item in getHeaderSlots">
-        <slot :name="item" v-bind="data" />
+        <slot :name="item" v-bind="data"></slot>
       </template>
     </PageHeader>
     <div :class="[`${prefixCls}-content`, $attrs.contentClass]" :style="getContentStyle">
-      <slot />
+      <slot></slot>
     </div>
     <PageFooter v-if="getShowFooter" ref="footerRef">
       <template #left>
-        <slot name="leftFooter" />
+        <slot name="leftFooter"></slot>
       </template>
       <template #right>
-        <slot name="rightFooter" />
+        <slot name="rightFooter"></slot>
       </template>
     </PageFooter>
   </div>
 <template>
   <div :class="prefixCls">
     <PreviewGroup>
-      <slot v-if="!imageList || $slots.default" />
+      <slot v-if="!imageList || $slots.default"></slot>
       <template v-else>
         <template v-for="item in getImageList" :key="item.src">
           <Image v-bind="item">
 <template>
   <div>
-    <component :is="tag" ref="wrapRef"></component>
+    <component :is="tag" ref="wrapRef" />
   </div>
 </template>
 <script lang="ts">
@@ -11,7 +11,6 @@
  
   export default defineComponent({
     name: 'QrCode',
-    emits: { done: (url: string) => !!url, error: (error: any) => !!error },
     props: {
       value: {
         type: [String, Array] as PropType<string | any[]>,
@@ -39,6 +38,7 @@
         validator: (v: string) => ['canvas', 'img'].includes(v),
       },
     },
+    emits: { done: (url: string) => !!url, error: (error: any) => !!error },
     setup(props, { emit }) {
       const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
       const urlRef = ref<string>('');
@@ -36,11 +36,11 @@
   import { useOpenKeys } from './useOpenKeys';
   export default defineComponent({
     name: 'SimpleMenu',
-    inheritAttrs: false,
     components: {
       Menu,
       SimpleSubMenu,
     },
+    inheritAttrs: false,
     props: {
       items: {
         type: Array as PropType<MenuType[]>,
@@ -55,6 +55,7 @@
         type: Function as PropType<(key: string) => Promise<boolean>>,
       },
     },
+    emits: ['menuClick'],
     setup(props, { attrs, emit }) {
       const currentActiveMenu = ref('');
       const isClickGo = ref(false);
@@ -5,7 +5,7 @@
         <slot name="title"></slot>
       </template>
       <div :class="`${prefixCls}-tooltip`">
-        <slot />
+        <slot></slot>
       </div>
     </Tooltip>
  
@@ -287,7 +287,9 @@
         );
  
         rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => {
-          state.active = data.includes(instance?.uid!);
+          if (instance?.uid) {
+            state.active = data.includes(instance?.uid);
+          }
         });
       });
  
@@ -9,7 +9,7 @@
       :disabled="disabled"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)">
-        <slot :name="item" v-bind="data" />
+        <slot :name="item" v-bind="data"></slot>
       </template>
     </InputPassword>
     <div :class="`${prefixCls}-bar`">
@@ -20,7 +20,7 @@
       @advanced-change="redoHeight"
     >
       <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
-        <slot :name="item" v-bind="data" />
+        <slot :name="item" v-bind="data"></slot>
       </template>
     </BasicForm>
  
@@ -32,7 +32,7 @@
       @change="handleTableChange"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)">
-        <slot :name="item" v-bind="data" />
+        <slot :name="item" v-bind="data"></slot>
       </template>
       <template #[`header-${column.dataIndex}`] v-for="column in columns" :key="column.dataIndex">
         <HeaderCell :column="column" />
@@ -69,12 +69,12 @@
  
   import './style/index.less';
   export default defineComponent({
-    props: basicProps,
     components: {
       Table,
       BasicForm,
       HeaderCell: createAsyncComponent(() => import('./components/HeaderCell.vue')),
     },
+    props: basicProps,
     emits: [
       'fetch-success',
       'fetch-error',
 <template>
   <span>
-    <slot />
+    <slot></slot>
     {{ title }}
     <FormOutlined />
   </span>
@@ -11,7 +11,7 @@
       />
     </template>
     <Dropdown :trigger="['hover']" :dropMenuList="getDropList" v-if="dropDownActions">
-      <slot name="more" />
+      <slot name="more"></slot>
       <a-button type="link" size="small" v-if="!$slots.more">
         <MoreOutlined class="icon-more" />
       </a-button>
 <template>
-  <slot name="tableTitle" v-if="$slots.tableTitle" />
+  <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
   <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
  
   <div :class="`${prefixCls}__toolbar`">
-    <slot name="toolbar" />
+    <slot name="toolbar"></slot>
     <Divider type="vertical" v-if="$slots.toolbar" />
     <TableSetting :setting="tableSetting" v-if="showTableSetting" />
   </div>
@@ -18,8 +18,7 @@
         @change="handleChange"
         @options-change="handleOptionsChange"
         @pressEnter="handleSubmit"
-      >
-      </CellComponent>
+      />
       <div :class="`${prefixCls}__action`" v-if="!getRowEditable">
         <CheckOutlined :class="[`${prefixCls}__icon`, 'mx-2']" @click="handleSubmit" />
         <CloseOutlined :class="`${prefixCls}__icon `" @click="handleCancel" />
@@ -48,6 +47,9 @@
   export default defineComponent({
     name: 'EditableCell',
     components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent },
+    directives: {
+      clickOutside,
+    },
     props: {
       value: {
         type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
@@ -62,10 +64,6 @@
       },
       index: propTypes.number,
     },
-    directives: {
-      clickOutside,
-    },
-
     setup(props) {
       const table = useTableContext();
       const isEdit = ref(false);
@@ -232,7 +230,7 @@
         const dataKey = (dataIndex || key) as string;
  
         const record = await table.updateTableData(index, dataKey, value);
-        needEmit && table.emit?.('edit-end', { record, index, key, value});
+        needEmit && table.emit?.('edit-end', { record, index, key, value });
         isEdit.value = false;
       }
  
@@ -44,10 +44,14 @@
             <template v-for="item in plainOptions" :key="item.value">
               <div :class="`${prefixCls}__check-item`">
                 <DragOutlined class="table-coulmn-drag-icon" />
-                <Checkbox :value="item.value"> {{ item.label }} </Checkbox>
+                <Checkbox :value="item.value">
+                  {{ item.label }}
+                </Checkbox>
  
                 <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
-                  <template #title> {{ t('component.table.settingFixedLeft') }}</template>
+                  <template #title>
+                    {{ t('component.table.settingFixedLeft') }}
+                  </template>
                   <Icon
                     icon="line-md:arrow-align-left"
                     :class="[
@@ -62,7 +66,9 @@
                 </Tooltip>
                 <Divider type="vertical" />
                 <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
-                  <template #title> {{ t('component.table.settingFixedRight') }}</template>
+                  <template #title>
+                    {{ t('component.table.settingFixedRight') }}
+                  </template>
                   <Icon
                     icon="line-md:arrow-align-left"
                     :class="[
@@ -39,9 +39,9 @@
  
   export default defineComponent({
     name: 'Tinymce',
+    components: { ImgUpload },
     inheritAttrs: false,
     props: basicProps,
-    components: { ImgUpload },
     emits: ['change', 'update:modelValue'],
     setup(props, { emit, attrs }) {
       const editorRef = ref<any>(null);
@@ -8,7 +8,9 @@
       :showUploadList="false"
       accept=".jpg,.jpeg,.gif,.png,.webp"
     >
-      <a-button type="primary">{{ t('component.upload.imgUpload') }}</a-button>
+      <a-button type="primary">
+        {{ t('component.upload.imgUpload') }}
+      </a-button>
     </Upload>
   </div>
 </template>
@@ -16,14 +18,13 @@
   import { defineComponent } from 'vue';
  
   import { Upload } from 'ant-design-vue';
-  import { InboxOutlined } from '@ant-design/icons-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useI18n } from '/@/hooks/web/useI18n';
  
   export default defineComponent({
     name: 'TinymceImageUpload',
-    components: { Upload, InboxOutlined },
+    components: { Upload },
     emits: ['uploading', 'done', 'error'],
     setup(_, { emit }) {
       let uploading = false;
@@ -7,7 +7,9 @@
       <Tooltip placement="bottom" v-if="showPreview">
         <template #title>
           {{ t('component.upload.uploaded') }}
-          <template v-if="fileListRef.length">{{ fileListRef.length }}</template>
+          <template v-if="fileListRef.length">
+            {{ fileListRef.length }}
+          </template>
         </template>
         <a-button @click="openPreviewModal">
           <Icon icon="bi:eye" />
@@ -45,6 +47,8 @@
     name: 'BasicUpload',
     components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
     props: uploadContainerProps,
+    emits: ['change'],
+
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
       // 上传modal
@@ -33,7 +33,9 @@
         :before-upload="beforeUpload"
         class="upload-modal-toolbar__btn"
       >
-        <a-button type="primary"> {{ t('component.upload.choose') }} </a-button>
+        <a-button type="primary">
+          {{ t('component.upload.choose') }}
+        </a-button>
       </Upload>
     </div>
     <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
@@ -62,6 +64,7 @@
   export default defineComponent({
     components: { BasicModal, Upload, Alert, FileList },
     props: basicProps,
+    emits: ['change'],
     setup(props, { emit }) {
       const { t } = useI18n();
  
@@ -27,6 +27,7 @@
   export default defineComponent({
     components: { BasicModal, FileList },
     props: previewProps,
+    emits: ['list-change'],
     setup(props, { emit }) {
       const [register, { closeModal }] = useModalInner();
       const { t } = useI18n();
 <template>
-  <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom" />
+  <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
   <div :style="getWrapStyle" :class="getClass">
     <LayoutHeader v-if="getShowInsetHeaderRef" />
     <MultipleTabs v-if="getShowTabs" />
@@ -25,7 +25,6 @@
   import { REDIRECT_NAME } from '/@/router/constant';
   import Icon from '/@/components/Icon';
  
-  import { HomeOutlined } from '@ant-design/icons-vue';
   import { PageEnum } from '/@/enums/pageEnum';
  
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -37,7 +36,7 @@
  
   export default defineComponent({
     name: 'LayoutBreadcrumb',
-    components: { HomeOutlined, Icon, [Breadcrumb.name]: Breadcrumb },
+    components: { Icon, [Breadcrumb.name]: Breadcrumb },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),
     },
@@ -9,7 +9,9 @@
     <div :class="`${prefixCls}__entry`">
       <div :class="`${prefixCls}__header`">
         <img :src="headerImg" :class="`${prefixCls}__header-img`" />
-        <p :class="`${prefixCls}__header-name`">{{ getRealName }}</p>
+        <p :class="`${prefixCls}__header-name`">
+          {{ getRealName }}
+        </p>
       </div>
  
       <BasicForm @register="registerForm" />
@@ -21,8 +21,12 @@
  
           <template #description>
             <div>
-              <div class="description">{{ item.description }}</div>
-              <div class="datetime">{{ item.datetime }}</div>
+              <div class="description">
+                {{ item.description }}
+              </div>
+              <div class="datetime">
+                {{ item.datetime }}
+              </div>
             </div>
           </template>
         </a-list-item-meta>
@@ -33,8 +33,6 @@
  
   // res
  
-  import Icon from '/@/components/Icon/index';
-
   import { userStore } from '/@/store/modules/user';
  
   import { DOC_URL } from '/@/settings/siteSetting';
@@ -58,7 +56,6 @@
       Menu,
       MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
       MenuDivider: Menu.Divider,
-      Icon,
     },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),
@@ -12,7 +12,7 @@
             },
           ]"
         >
-          <div class="mix-sidebar" />
+          <div class="mix-sidebar"></div>
         </div>
       </Tooltip>
     </template>
@@ -31,7 +31,7 @@
     props: {
       menuTypeList: {
         type: Array as PropType<typeof menuTypeList>,
-        defualt: [],
+        defualt: () => [],
       },
       handler: {
         type: Function as PropType<Fn>,
@@ -39,6 +39,7 @@
       },
       def: {
         type: String,
+        default: '',
       },
     },
     setup() {
 <template>
-  <div :class="getClass" :style="getDragBarStyle" />
+  <div :class="getClass" :style="getDragBarStyle"></div>
 </template>
 <script lang="ts">
   import { defineComponent, computed, unref } from 'vue';
@@ -3,7 +3,7 @@
     v-if="getMenuFixed && !getIsMobile"
     :style="getHiddenDomStyle"
     :class="{ hidden: !showClassSideBarRef }"
-  />
+  ></div>
   <Sider
     ref="sideRef"
     breakpoint="lg"
 <template>
-  <div :class="`${prefixCls}-dom`" :style="getDomStyle" />
+  <div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
  
   <div
     v-click-outside="handleClickOutside"
@@ -37,7 +37,9 @@
             :size="getCollapsed ? 16 : 20"
             :icon="item.meta && item.meta.icon"
           />
-          <p :class="`${prefixCls}-module__name`">{{ t(item.name) }}</p>
+          <p :class="`${prefixCls}-module__name`">
+            {{ t(item.name) }}
+          </p>
         </li>
       </ul>
     </ScrollContainer>
@@ -156,9 +158,11 @@
       );
  
       const getIsFixed = computed(() => {
+        /* eslint-disable-next-line */
         mixSideHasChildren.value = unref(chilrenMenus).length > 0;
         const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
         if (isFixed) {
+          /* eslint-disable-next-line */
           openMenu.value = true;
         }
         return isFixed;
@@ -5,9 +5,7 @@
 </template>
 <script lang="ts">
   import { defineComponent, unref, computed } from 'vue';
-  import { RedoOutlined } from '@ant-design/icons-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { Tooltip } from 'ant-design-vue';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  
@@ -15,7 +13,7 @@
  
   export default defineComponent({
     name: 'FoldButton',
-    components: { RedoOutlined, Tooltip, Icon },
+    components: { Icon },
  
     setup() {
       const { prefixCls } = useDesign('multiple-tabs-content');
@@ -4,7 +4,7 @@
 <template>
   <div>
     <router-view>
-      <template v-slot="{ Component, route }">
+      <template #default="{ Component, route }">
         <transition
           :name="
             getTransitionName({
 <template>
   <div>
     <router-view>
-      <template v-slot="{ Component, route }">
+      <template #default="{ Component, route }">
         <transition
           :name="
             getTransitionName({
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, onMounted, ref, Ref } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, onMounted, ref, Ref } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, onMounted, ref, Ref } from 'vue';
@@ -2,14 +2,18 @@
   <div class="grow-card">
     <div class="grow-card-header">
       <div class="grow-card__info">
-        <p class="grow-card__title">{{ info.title }}</p>
+        <p class="grow-card__title">
+          {{ info.title }}
+        </p>
         <CountTo prefix="$" :startVal="1" :endVal="info.price" />
       </div>
       <img :src="info.icon" />
     </div>
     <div class="grow-card-footer" :class="{ 'is-up': info.up }">
       <Statistic :value="info.percent">
-        <template #prefix> <img :src="info.up ? riseSvg : downSvg" /> </template>
+        <template #prefix>
+          <img :src="info.up ? riseSvg : downSvg" />
+        </template>
       </Statistic>
       <span class="grow-card__mom">{{ info.mom }}</span>
     </div>
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, onMounted, ref, Ref } from 'vue';
 <template>
-  <div class="analysis p-4">
+  <div class="p-4 analysis">
     <a-row class="pl-2">
       <template v-for="item in growCardList" :key="item.title">
-        <ACol :sm="24" :md="12" :lg="6">
+        <a-col :sm="24" :md="12" :lg="6">
           <GrowCard :info="item" />
-        </ACol>
+        </a-col>
       </template>
     </a-row>
  
@@ -42,7 +42,6 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import GrowCard from './components/GrowCard.vue';
-  import TrendLine from './components/TrendLine.vue';
   import AnalysisLine from './components/AnalysisLine.vue';
   import AnalysisPie from './components/AnalysisPie.vue';
   import AnalysisBar from './components/AnalysisBar.vue';
@@ -55,7 +54,6 @@
     components: {
       GrowCard,
       CollapseContainer,
-      TrendLine,
       AnalysisLine,
       AnalysisPie,
       AnalysisBar,
@@ -15,26 +15,26 @@
       <div class="circle"></div>
       <div class="plastic">
         <div class="plastic__g">
-          <div class="plastic__item" />
-          <div class="plastic__item" />
-          <div class="plastic__item" />
-          <div class="plastic__item" />
-          <div class="plastic__item" />
-          <div class="plastic__item" />
-          <div class="plastic__item" />
-          <div class="plastic__item" />
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
+          <div class="plastic__item"></div>
         </div>
       </div>
       <div class="line">
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
-        <div class="line__item" />
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
+        <div class="line__item"></div>
       </div>
     </div>
     <div class="clouds">
@@ -43,29 +43,29 @@
         <div class="cloud__item"></div>
       </div>
       <div class="cloud">
-        <div class="cloud__item" />
-        <div class="cloud__item" />
+        <div class="cloud__item"></div>
+        <div class="cloud__item"></div>
       </div>
       <div class="cloud">
-        <div class="cloud__item" />
-        <div class="cloud__item" />
+        <div class="cloud__item"></div>
+        <div class="cloud__item"></div>
       </div>
-      <div class="bird" />
+      <div class="bird"></div>
     </div>
     <div class="birds">
-      <div class="bird" />
-      <div class="bird" />
+      <div class="bird"></div>
+      <div class="bird"></div>
     </div>
     <div class="tree">
-      <div class="tree__item" />
-      <div class="tree__item" />
-      <div class="tree__item" />
+      <div class="tree__item"></div>
+      <div class="tree__item"></div>
+      <div class="tree__item"></div>
     </div>
     <div class="bush">
-      <div class="bush__item" />
-      <div class="bush__item" />
+      <div class="bush__item"></div>
+      <div class="bush__item"></div>
     </div>
-    <div class="dot" />
+    <div class="dot"></div>
   </div>
 </template>
 <script lang="ts">
@@ -10,7 +10,9 @@
               </template>
               <template #description>
                 <div class="news-list__item-desc">
-                  <div class="news-list__item-time mb-1"> {{ item.sendTime }}</div>
+                  <div class="news-list__item-time mb-1">
+                    {{ item.sendTime }}
+                  </div>
                   <div class="news-list__item-title mb-1">
                     <span class="news-list__item-light">{{ item.sender }}&nbsp;</span>申请迭代
                     <span class="news-list__item-light">&nbsp;{{ item.title }}&nbsp;</span>发布
 <template>
-  <Row class="prod-total">
+  <a-row class="prod-total">
     <template v-for="(item, index) in wokbProd" :key="item.type">
-      <Col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`">
-        <div class="img" :class="`prod-total__item-${index}-img`" />
+      <a-col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`">
+        <div class="img" :class="`prod-total__item-${index}-img`"></div>
         <div>{{ item.amount }}</div>
         <span>{{ item.type }}</span>
-      </Col>
+      </a-col>
     </template>
-  </Row>
+  </a-row>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
@@ -16,7 +16,7 @@
   import { wokbProd } from '../data';
   // import {ProdTypeEnum} from '@/api/dashboard/model/wokbModel'
   export default defineComponent({
-    components: { Row, Col },
+    components: { [Row.name]: Row, [Col.name]: Col },
     setup() {
       return { wokbProd };
     },
@@ -3,23 +3,23 @@
     <template #action>
       <a-button size="small" type="link"> 新建 </a-button>
     </template>
-    <Row>
+    <a-row>
       <template v-for="item in shortCuts" :key="item.img">
-        <Col :span="8" class="shortcuts__item p-3">
-          <img :src="item.img" class="shortcuts__item-img mb-2" />
+        <a-col :span="8" class="p-3 shortcuts__item">
+          <img :src="item.img" class="mb-2 shortcuts__item-img" />
           <br />
           <span>{{ item.name }}</span>
-        </Col>
+        </a-col>
       </template>
  
-      <Col :span="8" class="shortcuts__item p-3">
-        <span class="shortcuts__item-all mb-2">
+      <a-col :span="8" class="p-3 shortcuts__item">
+        <span class="mb-2 shortcuts__item-all">
           <RightOutlined />
         </span>
         <br />
         <span>查看全部</span>
-      </Col>
-    </Row>
+      </a-col>
+    </a-row>
   </CollapseContainer>
 </template>
 <script lang="ts">
@@ -71,7 +71,7 @@
     },
   ];
   export default defineComponent({
-    components: { Row, Col, CollapseContainer, RightOutlined },
+    components: { [Row.name]: Row, [Col.name]: Col, CollapseContainer, RightOutlined },
     setup() {
       return { shortCuts };
     },
@@ -23,14 +23,14 @@
             </template>
           </ListItemMeta>
           <a-button type="link">
-            <Tag color="blue">待审批</Tag>
+            <Tag color="blue"> 待审批 </Tag>
           </a-button>
         </ListItem>
       </template>
     </List>
     <div class="todo-list__all">
       <Tooltip placement="topRight">
-        <template #title>查看更多</template>
+        <template #title> 查看更多 </template>
         <EllipsisOutlined />
       </Tooltip>
     </div>
 <template>
   <CollapseContainer title="销售统计" :canExpan="false">
-    <div ref="chartRef" :style="{ width: '100%' }" />
+    <div ref="chartRef" :style="{ width: '100%' }"></div>
   </CollapseContainer>
 </template>
 <script lang="ts">
@@ -5,12 +5,12 @@
     content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
   >
     <template #rightFooter>
-      <a-button type="primary">确认</a-button>
+      <a-button type="primary"> 确认 </a-button>
     </template>
  
     <div class="my-2">
       <h3>success</h3>
-      <a-button color="success">成功</a-button>
+      <a-button color="success"> 成功 </a-button>
       <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
       <a-button color="success" class="ml-2" loading> loading </a-button>
       <a-button color="success" type="link" class="ml-2"> link </a-button>
@@ -20,7 +20,7 @@
  
     <div class="my-2">
       <h3>warning</h3>
-      <a-button color="warning">警告</a-button>
+      <a-button color="warning"> 警告 </a-button>
       <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
       <a-button color="warning" class="ml-2" loading> loading </a-button>
       <a-button color="warning" type="link" class="ml-2"> link </a-button>
@@ -30,7 +30,7 @@
  
     <div class="my-2">
       <h3>error</h3>
-      <a-button color="error">错误</a-button>
+      <a-button color="error"> 错误 </a-button>
       <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
       <a-button color="error" class="ml-2" loading> loading </a-button>
       <a-button color="error" type="link" class="ml-2"> link </a-button>
@@ -40,7 +40,7 @@
  
     <div class="my-2">
       <h3>ghost</h3>
-      <a-button ghost>幽灵</a-button>
+      <a-button ghost> 幽灵 </a-button>
       <a-button ghost class="ml-2" disabled> 禁用 </a-button>
       <a-button ghost class="ml-2" loading> loading </a-button>
       <a-button ghost type="link" class="ml-2"> link </a-button>
@@ -50,7 +50,7 @@
  
     <div class="my-2">
       <h3>primary</h3>
-      <a-button type="primary" preIcon="mdi:page-next-outline">主按钮</a-button>
+      <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
       <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
       <a-button type="primary" class="ml-2" loading> loading </a-button>
       <a-button type="link" class="ml-2"> link </a-button>
@@ -60,7 +60,7 @@
  
     <div class="my-2">
       <h3>default</h3>
-      <a-button type="default">默认</a-button>
+      <a-button type="default"> 默认 </a-button>
       <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
       <a-button type="default" class="ml-2" loading> loading </a-button>
       <a-button type="link" class="ml-2"> link </a-button>
@@ -70,7 +70,7 @@
  
     <div class="my-2">
       <h3>dashed</h3>
-      <a-button type="dashed">dashed</a-button>
+      <a-button type="dashed"> dashed </a-button>
       <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
       <a-button type="dashed" class="ml-2" loading> loading </a-button>
     </div>
 <template>
   <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
     Drawer Info.
-    <a-button type="primary" @click="closeDrawer">内部关闭drawer</a-button>
+    <a-button type="primary" @click="closeDrawer"> 内部关闭drawer </a-button>
   </BasicDrawer>
 </template>
 <script lang="ts">
 <template>
   <BasicDrawer v-bind="$attrs" title="Modal Title" width="50%" showFooter @ok="handleOk">
-    <p class="h-20" v-for="index in 40" :key="index">根据屏幕高度自适应</p>
+    <p class="h-20" v-for="index in 40" :key="index"> 根据屏幕高度自适应 </p>
     <template #insertFooter>
       <a-button> btn</a-button>
     </template>
 <template>
   <BasicDrawer v-bind="$attrs" :isDetail="true" title="Drawer Title5">
-    <p class="h-20">Content Message</p>
+    <p class="h-20"> Content Message </p>
     <template #titleToolbar> toolbar </template>
   </BasicDrawer>
 </template>
 <template>
   <PageWrapper title="抽屉组件使用示例">
     <Alert message="使用 useDrawer 进行抽屉操作" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawerLoading">打开Drawer</a-button>
+    <a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
  
     <Alert message="内外同时控制显示隐藏" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer2(true)">打开Drawer</a-button>
+    <a-button type="primary" class="my-4" @click="openDrawer2(true)"> 打开Drawer </a-button>
     <Alert message="自适应高度/显示footer" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer3(true)">打开Drawer</a-button>
+    <a-button type="primary" class="my-4" @click="openDrawer3(true)"> 打开Drawer </a-button>
  
     <Alert
       message="内外数据交互,外部通过 transferModalData 发送，内部通过 receiveDrawerDataRef 接收。该数据具有响应式"
       show-icon
     />
-    <a-button type="primary" class="my-4" @click="send">打开Drawer并传递数据</a-button>
+    <a-button type="primary" class="my-4" @click="send"> 打开Drawer并传递数据 </a-button>
     <Alert message="详情页模式" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer5(true)">打开详情Drawer</a-button>
+    <a-button type="primary" class="my-4" @click="openDrawer5(true)"> 打开详情Drawer </a-button>
     <Drawer1 @register="register1" />
     <Drawer2 @register="register2" />
     <Drawer3 @register="register3" />
@@ -13,13 +13,12 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { Skeleton } from 'ant-design-vue';
   import TargetContent from './TargetContent.vue';
   import { LazyContainer } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
  
   export default defineComponent({
-    components: { LazyContainer, TargetContent, Skeleton, PageWrapper },
+    components: { LazyContainer, TargetContent, PageWrapper },
   });
 </script>
 <style lang="less">
 <template>
   <PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
     <a-alert message="组件方式" />
-    <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">全屏 Loading</a-button>
-    <a-button class="my-4" type="primary" @click="openCompAbsolute">容器内 Loading</a-button>
+    <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
+      全屏 Loading
+    </a-button>
+    <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
     <Loading :loading="loading" :absolute="absolute" :tip="tip" />
  
     <a-alert message="函数方式" />
  
-    <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">全屏 Loading</a-button>
-    <a-button class="my-4" type="primary" @click="openFnWrapLoading">容器内 Loading</a-button>
+    <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> 全屏 Loading </a-button>
+    <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
  
     <a-alert message="指令方式" />
     <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
@@ -5,9 +5,9 @@
     title="Modal Title"
     :helpMessage="['提示1', '提示2']"
   >
-    <a-button type="primary" @click="closeModal" class="mr-2">从内部关闭弹窗</a-button>
+    <a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
  
-    <a-button type="primary" @click="setModalProps">从内部修改title</a-button>
+    <a-button type="primary" @click="setModalProps"> 从内部修改title </a-button>
   </BasicModal>
 </template>
 <script lang="ts">
 <template>
   <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']" width="700px">
-    <p class="h-20" v-for="index in 20" :key="index">根据屏幕高度自适应</p>
+    <p class="h-20" v-for="index in 20" :key="index"> 根据屏幕高度自适应 </p>
   </BasicModal>
 </template>
 <script lang="ts">
@@ -5,20 +5,20 @@
     参数进行控制是否可以拖动/全屏"
       show-icon
     />
-    <a-button type="primary" class="my-4" @click="openModalLoading"
-      >打开弹窗 默认可以拖动/全屏</a-button
-    >
+    <a-button type="primary" class="my-4" @click="openModalLoading">
+      打开弹窗 默认可以拖动/全屏
+    </a-button>
  
     <Alert message="内外同时同时显示隐藏" show-icon />
-    <a-button type="primary" class="my-4" @click="openModal2">打开弹窗</a-button>
+    <a-button type="primary" class="my-4" @click="openModal2"> 打开弹窗 </a-button>
     <Alert message="自适应高度" show-icon />
-    <a-button type="primary" class="my-4" @click="openModal3">打开弹窗</a-button>
+    <a-button type="primary" class="my-4" @click="openModal3"> 打开弹窗 </a-button>
  
     <Alert
       message="内外数据交互,外部通过 transferModalData 发送，内部通过 receiveDrawerDataRef 接收。该数据具有响应式"
       show-icon
     />
-    <a-button type="primary" class="my-4" @click="send">打开弹窗并传递数据</a-button>
+    <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
  
     <Modal1 @register="register1" />
     <Modal2 @register="register2" />
@@ -52,7 +52,7 @@
       <CollapseContainer title="下载示例" class="text-center qrcode-demo-item">
         <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
         <a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
-        <div class="msg">(在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题)</div>
+        <div class="msg"> (在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题) </div>
       </CollapseContainer>
  
       <CollapseContainer title="配置大小示例" class="text-center qrcode-demo-item">
 <template>
   <PageWrapper title="滚动组件函数示例" content="基于el-scrollbar">
     <div class="my-4">
-      <a-button @click="scrollTo(100)" class="mr-2">滚动到100px位置</a-button>
-      <a-button @click="scrollTo(800)" class="mr-2">滚动到800px位置</a-button>
-      <a-button @click="scrollTo(0)" class="mr-2">滚动到顶部</a-button>
-      <a-button @click="scrollBottom()" class="mr-2">滚动到底部</a-button>
+      <a-button @click="scrollTo(100)" class="mr-2"> 滚动到100px位置 </a-button>
+      <a-button @click="scrollTo(800)" class="mr-2"> 滚动到800px位置 </a-button>
+      <a-button @click="scrollTo(0)" class="mr-2"> 滚动到顶部 </a-button>
+      <a-button @click="scrollBottom()" class="mr-2"> 滚动到底部 </a-button>
     </div>
     <div class="scroll-wrap">
       <ScrollContainer class="mt-4" ref="scrollRef">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">
+              {{ index }}
+            </li>
           </template>
         </ul>
       </ScrollContainer>
@@ -19,12 +21,11 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, unref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
   import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
  
   export default defineComponent({
-    components: { CollapseContainer, ScrollContainer, PageWrapper },
+    components: { ScrollContainer, PageWrapper },
     setup() {
       const scrollRef = ref<Nullable<ScrollActionType>>(null);
       const getScroll = () => {
@@ -3,8 +3,10 @@
     <Divider>基础滚动示例</Divider>
     <div class="virtual-scroll-demo-wrap">
       <VScroll :itemHeight="41" :items="data" :height="300" :width="300">
-        <template v-slot="{ item }">
-          <div class="virtual-scroll-demo__item">{{ item.title }}</div>
+        <template #default="{ item }">
+          <div class="virtual-scroll-demo__item">
+            {{ item.title }}
+          </div>
         </template>
       </VScroll>
     </div>
@@ -12,8 +14,10 @@
     <Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
     <div class="virtual-scroll-demo-wrap">
       <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
-        <template v-slot="{ item }">
-          <div class="virtual-scroll-demo__item">{{ item.title }}</div>
+        <template #default="{ item }">
+          <div class="virtual-scroll-demo__item">
+            {{ item.title }}
+          </div>
         </template>
       </VScroll>
     </div>
@@ -4,7 +4,9 @@
       <ScrollContainer class="mt-4">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">
+              {{ index }}
+            </li>
           </template>
         </ul>
       </ScrollContainer>
@@ -13,12 +15,11 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
   import { ScrollContainer } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
  
   export default defineComponent({
-    components: { CollapseContainer, ScrollContainer, PageWrapper },
+    components: { ScrollContainer, PageWrapper },
   });
 </script>
 <style lang="less" scoped>
 <template>
   <PageWrapper title="上传组件示例">
-    <a-alert message="基础示例" class="my-5"></a-alert>
+    <a-alert message="基础示例" class="my-5" />
     <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" />
  
-    <a-alert message="嵌入表单,加入表单校验" class="my-5"></a-alert>
+    <a-alert message="嵌入表单,加入表单校验" class="my-5" />
  
     <BasicForm @register="register" />
   </PageWrapper>
@@ -2,12 +2,12 @@
   <PageWrapper title="拖动校验示例">
     <div class="flex justify-center p-4 items-center bg-gray-700">
       <BasicDragVerify ref="el1" @success="handleSuccess" />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el1)">还原</a-button>
+      <a-button type="primary" class="ml-2" @click="handleBtnClick(el1)"> 还原 </a-button>
     </div>
  
     <div class="flex justify-center p-4 items-center bg-gray-700">
       <BasicDragVerify ref="el2" @success="handleSuccess" circle />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el2)">还原</a-button>
+      <a-button type="primary" class="ml-2" @click="handleBtnClick(el2)"> 还原 </a-button>
     </div>
  
     <div class="flex justify-center p-4 items-center bg-gray-700">
@@ -20,7 +20,7 @@
           background: '#018ffb',
         }"
       />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)">还原</a-button>
+      <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)"> 还原 </a-button>
     </div>
  
     <div class="flex justify-center p-4 items-center bg-gray-700">
@@ -30,7 +30,7 @@
           <RightOutlined v-else />
         </template>
       </BasicDragVerify>
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el4)">还原</a-button>
+      <a-button type="primary" class="ml-2" @click="handleBtnClick(el4)"> 还原 </a-button>
     </div>
  
     <div class="flex justify-center p-4 items-center bg-gray-700">
@@ -46,7 +46,7 @@
           </div>
         </template>
       </BasicDragVerify>
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el5)">还原</a-button>
+      <a-button type="primary" class="ml-2" @click="handleBtnClick(el5)"> 还原 </a-button>
     </div>
   </PageWrapper>
 </template>
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ height, width }" />
+  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ width: '100%' }" />
+  <div ref="chartRef" :style="{ width: '100%' }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, Ref, onMounted } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ width: '100%' }" />
+  <div ref="chartRef" :style="{ width: '100%' }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, Ref, onMounted } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ width: '100%' }" />
+  <div ref="chartRef" :style="{ width: '100%' }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, Ref, onMounted } from 'vue';
 <template>
-  <div ref="chartRef" :style="{ width: '100%' }" />
+  <div ref="chartRef" :style="{ width: '100%' }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, Ref, onMounted } from 'vue';
@@ -6,8 +6,7 @@
         :schemas="schemas"
         :actionColOptions="{ span: 24 }"
         @submit="handleSubmit"
-      >
-      </BasicForm>
+      />
     </CollapseContainer>
   </PageWrapper>
 </template>
 <template>
   <PageWrapper title="MarkDown组件示例">
-    <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button>
+    <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
     <MarkDown :value="value" @change="handleChange" ref="markDownRef" />
   </PageWrapper>
 </template>
@@ -6,8 +6,7 @@
         :schemas="schemas"
         :actionColOptions="{ span: 24 }"
         @submit="handleSubmit"
-      >
-      </BasicForm>
+      />
     </CollapseContainer>
   </PageWrapper>
 </template>
@@ -2,7 +2,7 @@
   <PageWrapper title="导出示例" content="根据数组格式的数据进行导出">
     <BasicTable title="基础表格" :columns="columns" :dataSource="data">
       <template #toolbar>
-        <a-button @click="aoaToExcel">导出</a-button>
+        <a-button @click="aoaToExcel"> 导出 </a-button>
       </template>
     </BasicTable>
   </PageWrapper>
@@ -2,7 +2,7 @@
   <PageWrapper title="导出示例" content="可以选择导出格式">
     <BasicTable title="基础表格" :columns="columns" :dataSource="data">
       <template #toolbar>
-        <a-button @click="openModal">导出</a-button>
+        <a-button @click="openModal"> 导出 </a-button>
       </template>
     </BasicTable>
     <ExpExcelModel @register="register" @success="defaultHeader" />
 <template>
   <PageWrapper title="excel数据导入示例">
     <ImpExcel @success="loadDataSuccess">
-      <a-button class="m-3">导入Excel</a-button>
+      <a-button class="m-3"> 导入Excel </a-button>
     </ImpExcel>
     <BasicTable
       v-for="(table, index) in tableListRef"
@@ -9,7 +9,7 @@
       :title="table.title"
       :columns="table.columns"
       :dataSource="table.dataSource"
-    ></BasicTable>
+    />
   </PageWrapper>
 </template>
 <script lang="ts">
@@ -2,8 +2,8 @@
   <PageWrapper title="导出示例" content="根据JSON格式的数据进行导出">
     <BasicTable title="基础表格" :columns="columns" :dataSource="data">
       <template #toolbar>
-        <a-button @click="defaultHeader">导出：默认头部</a-button>
-        <a-button @click="customHeader">导出：自定义头部</a-button>
+        <a-button @click="defaultHeader"> 导出：默认头部 </a-button>
+        <a-button @click="customHeader"> 导出：自定义头部 </a-button>
       </template>
     </BasicTable>
   </PageWrapper>
 <template>
   <PageWrapper title="层级面包屑示例" content="子级页面面包屑会添加到当前层级后面">
-    <router-link to="/feat/breadcrumb/children/childrenDetail">进入子级详情页</router-link>
+    <router-link to="/feat/breadcrumb/children/childrenDetail"> 进入子级详情页 </router-link>
   </PageWrapper>
 </template>
 <script lang="ts">
 <template>
   <PageWrapper title="平级面包屑示例" content="子级页面面包屑会覆盖当前层级">
-    <router-link to="/feat/breadcrumb/flatDetail">进入平级详情页</router-link>
+    <router-link to="/feat/breadcrumb/flatDetail"> 进入平级详情页 </router-link>
   </PageWrapper>
 </template>
 <script lang="ts">
 <template>
   <PageWrapper title="右键菜单示例">
     <CollapseContainer title="Simple">
-      <a-button type="primary" @contextmenu="handleContext">Right Click on me</a-button>
+      <a-button type="primary" @contextmenu="handleContext"> Right Click on me </a-button>
     </CollapseContainer>
  
     <CollapseContainer title="Multiple" class="mt-4">
-      <a-button type="primary" @contextmenu="handleMultipleContext">Right Click on me</a-button>
+      <a-button type="primary" @contextmenu="handleMultipleContext"> Right Click on me </a-button>
     </CollapseContainer>
   </PageWrapper>
 </template>
@@ -3,7 +3,7 @@
     <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Copy Example">
       <div class="flex justify-center">
         <a-input placeholder="请输入" v-model:value="value" />
-        <a-button type="primary" @click="handleCopy">Copy</a-button>
+        <a-button type="primary" @click="handleCopy"> Copy </a-button>
       </div>
     </CollapseContainer>
   </PageWrapper>
@@ -26,7 +26,7 @@
       message="推荐使用Iconify组件"
       description="Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。唯一不足的可能就是需要连接外网进行使用。"
     />
-    <a-button type="link" @click="toIconify">Iconify 图标大全</a-button>
+    <a-button type="link" @click="toIconify"> Iconify 图标大全 </a-button>
   </PageWrapper>
 </template>
 <script lang="ts">
@@ -13,24 +13,24 @@
     </CollapseContainer>
  
     <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm">
-      <a-button @click="handleConfirm('info')" class="mr-2">Info</a-button>
-      <a-button @click="handleConfirm('warning')" color="warning" class="mr-2">Warning</a-button>
-      <a-button @click="handleConfirm('success')" color="success" class="mr-2">Success</a-button>
-      <a-button @click="handleConfirm('error')" color="error" class="mr-2">Error</a-button>
+      <a-button @click="handleConfirm('info')" class="mr-2"> Info </a-button>
+      <a-button @click="handleConfirm('warning')" color="warning" class="mr-2"> Warning </a-button>
+      <a-button @click="handleConfirm('success')" color="success" class="mr-2"> Success </a-button>
+      <a-button @click="handleConfirm('error')" color="error" class="mr-2"> Error </a-button>
     </CollapseContainer>
  
     <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Modal">
-      <a-button @click="handleInfoModal" class="mr-2">Info</a-button>
-      <a-button @click="handleSuccessModal" color="success" class="mr-2">Success</a-button>
-      <a-button @click="handleErrorModal" color="error" class="mr-2">Error</a-button>
-      <a-button @click="handleWarningModal" color="warning" class="mr-2">Warning</a-button>
+      <a-button @click="handleInfoModal" class="mr-2"> Info </a-button>
+      <a-button @click="handleSuccessModal" color="success" class="mr-2"> Success </a-button>
+      <a-button @click="handleErrorModal" color="error" class="mr-2"> Error </a-button>
+      <a-button @click="handleWarningModal" color="warning" class="mr-2"> Warning </a-button>
     </CollapseContainer>
  
     <CollapseContainer
       class="px-20 bg-white w-full h-32 rounded-md mt-5"
       title="Notification 用法与上面一致"
     >
-      <a-button @click="handleNotify" color="success" class="mr-2">Success</a-button>
+      <a-button @click="handleNotify" color="success" class="mr-2"> Success </a-button>
     </CollapseContainer>
   </PageWrapper>
 </template>
 <template>
   <PageWrapper title="Ripple示例">
-    <div class="demo-box" v-ripple>content</div>
+    <div class="demo-box" v-ripple> content </div>
   </PageWrapper>
 </template>
 <script lang="ts">
@@ -5,12 +5,12 @@
     </CollapseContainer>
  
     <CollapseContainer class="mt-4" title="标签页操作">
-      <a-button class="mr-2" @click="closeAll">关闭所有</a-button>
-      <a-button class="mr-2" @click="closeLeft">关闭左侧</a-button>
-      <a-button class="mr-2" @click="closeRight">关闭右侧</a-button>
-      <a-button class="mr-2" @click="closeOther">关闭其他</a-button>
-      <a-button class="mr-2" @click="closeCurrent">关闭当前</a-button>
-      <a-button class="mr-2" @click="refreshPage">刷新当前</a-button>
+      <a-button class="mr-2" @click="closeAll"> 关闭所有 </a-button>
+      <a-button class="mr-2" @click="closeLeft"> 关闭左侧 </a-button>
+      <a-button class="mr-2" @click="closeRight"> 关闭右侧 </a-button>
+      <a-button class="mr-2" @click="closeOther"> 关闭其他 </a-button>
+      <a-button class="mr-2" @click="closeCurrent"> 关闭当前 </a-button>
+      <a-button class="mr-2" @click="refreshPage"> 刷新当前 </a-button>
     </CollapseContainer>
   </PageWrapper>
 </template>
@@ -4,7 +4,7 @@
       <a-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info')">
         Create
       </a-button>
-      <a-button color="error" class="mr-2" @click="clear">Clear</a-button>
+      <a-button color="error" class="mr-2" @click="clear"> Clear </a-button>
       <a-button color="warning" class="mr-2" @click="setWatermark('WaterMark Info New')">
         Reset
       </a-button>
 <template>
   <PageWrapper title="动态表单示例">
     <div class="mb-4">
-      <a-button @click="changeLabel3" class="mr-2">更改字段3label</a-button>
-      <a-button @click="changeLabel34" class="mr-2">同时更改字段3,4label</a-button>
-      <a-button @click="appendField" class="mr-2">往字段3后面插入字段10</a-button>
-      <a-button @click="deleteField" class="mr-2">删除字段11</a-button>
+      <a-button @click="changeLabel3" class="mr-2"> 更改字段3label </a-button>
+      <a-button @click="changeLabel34" class="mr-2"> 同时更改字段3,4label </a-button>
+      <a-button @click="appendField" class="mr-2"> 往字段3后面插入字段10 </a-button>
+      <a-button @click="deleteField" class="mr-2"> 删除字段11 </a-button>
     </div>
     <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
       <BasicForm @register="register" />
@@ -163,7 +163,7 @@
       },
       labelWidth: 200,
       // @ts-ignore
-      componentProps: ({ formActionType, tableAction }) => {
+      componentProps: ({ formActionType }) => {
         return {
           placeholder: '值改变时执行查询,查看控制台',
           onChange: async () => {
 <template>
   <PageWrapper title="Ref操作示例">
     <div class="mb-4">
-      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2">更改labelWidth</a-button>
-      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2">还原labelWidth</a-button>
-      <a-button @click="setProps({ size: 'large' })" class="mr-2">更改Size</a-button>
-      <a-button @click="setProps({ size: 'default' })" class="mr-2">还原Size</a-button>
-      <a-button @click="setProps({ disabled: true })" class="mr-2">禁用表单</a-button>
-      <a-button @click="setProps({ disabled: false })" class="mr-2">解除禁用</a-button>
-      <a-button @click="setProps({ compact: true })" class="mr-2">紧凑表单</a-button>
-      <a-button @click="setProps({ compact: false })" class="mr-2">还原正常间距</a-button>
+      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2"> 更改labelWidth </a-button>
+      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2"> 还原labelWidth </a-button>
+      <a-button @click="setProps({ size: 'large' })" class="mr-2"> 更改Size </a-button>
+      <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原Size </a-button>
+      <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
+      <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
+      <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
+      <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
       <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2">
         操作按钮位置
       </a-button>
 <template>
   <PageWrapper title="表单校验示例">
     <div class="mb-4">
-      <a-button @click="validateForm" class="mr-2">手动校验表单</a-button>
-      <a-button @click="resetValidate" class="mr-2">清空校验信息</a-button>
-      <a-button @click="getFormValues" class="mr-2">获取表单值</a-button>
-      <a-button @click="setFormValues" class="mr-2">设置表单值</a-button>
+      <a-button @click="validateForm" class="mr-2"> 手动校验表单 </a-button>
+      <a-button @click="resetValidate" class="mr-2"> 清空校验信息 </a-button>
+      <a-button @click="getFormValues" class="mr-2"> 获取表单值 </a-button>
+      <a-button @click="setFormValues" class="mr-2"> 设置表单值 </a-button>
     </div>
     <CollapseContainer title="表单校验">
       <BasicForm @register="register" @submit="handleSubmit" />
@@ -87,9 +87,11 @@
           // @ts-ignore
           validator: async (rule, value) => {
             if (!value) {
+              /* eslint-disable-next-line */
               return Promise.reject('值不能为空');
             }
             if (value === '1') {
+              /* eslint-disable-next-line */
               return Promise.reject('值不能为1');
             }
             return Promise.resolve();
 <template>
   <PageWrapper title="UseForm操作示例">
     <div class="mb-4">
-      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2">更改labelWidth</a-button>
-      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2">还原labelWidth</a-button>
-      <a-button @click="setProps({ size: 'large' })" class="mr-2">更改Size</a-button>
-      <a-button @click="setProps({ size: 'default' })" class="mr-2">还原Size</a-button>
-      <a-button @click="setProps({ disabled: true })" class="mr-2">禁用表单</a-button>
-      <a-button @click="setProps({ disabled: false })" class="mr-2">解除禁用</a-button>
-      <a-button @click="setProps({ compact: true })" class="mr-2">紧凑表单</a-button>
-      <a-button @click="setProps({ compact: false })" class="mr-2">还原正常间距</a-button>
+      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2"> 更改labelWidth </a-button>
+      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2"> 还原labelWidth </a-button>
+      <a-button @click="setProps({ size: 'large' })" class="mr-2"> 更改Size </a-button>
+      <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原Size </a-button>
+      <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
+      <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
+      <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
+      <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
       <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2">
         操作按钮位置
       </a-button>
@@ -4,19 +4,25 @@
       <ListItem>
         <ListItemMeta>
           <template #description>
-            <div :class="`${prefixCls}__content`">{{ item.content }}</div>
+            <div :class="`${prefixCls}__content`">
+              {{ item.content }}
+            </div>
           </template>
           <template #title>
-            <p :class="`${prefixCls}__title`"> {{ item.title }}</p>
+            <p :class="`${prefixCls}__title`">
+              {{ item.title }}
+            </p>
             <div>
-              <template v-for="(tag, index) in item.description" :key="index">
-                <Tag class="mb-2">{{ tag }}</Tag>
+              <template v-for="(tag, ti) in item.description" :key="ti">
+                <Tag class="mb-2">
+                  {{ tag }}
+                </Tag>
               </template>
             </div>
           </template>
         </ListItemMeta>
         <div>
-          <template v-for="(action, index) in actions" :key="index">
+          <template v-for="(action, ai) in actions" :key="ai">
             <div :class="`${prefixCls}__action`">
               <Icon
                 v-if="action.icon"
@@ -9,7 +9,9 @@
               <div :class="`${prefixCls}__card-title`">
                 {{ item.title }}
               </div>
-              <div :class="`${prefixCls}__card-content`"> {{ item.content }}</div>
+              <div :class="`${prefixCls}__card-content`">
+                {{ item.content }}
+              </div>
             </Card>
           </ListItem>
         </a-col>
@@ -25,7 +25,9 @@
       <a-col :span="7" :class="`${prefixCls}-col`">
         <CollapseContainer title="标签" :canExpan="false">
           <template v-for="(tag, index) in tags" :key="index">
-            <Tag class="mb-2">{{ tag }}</Tag>
+            <Tag class="mb-2">
+              {{ tag }}
+            </Tag>
           </template>
         </CollapseContainer>
       </a-col>
@@ -6,7 +6,7 @@
       </a-col>
       <a-col :span="10">
         <div class="change-avatar">
-          <div class="mb-2">头像</div>
+          <div class="mb-2"> 头像 </div>
           <img width="140" :src="headerImg" />
           <Upload :showUploadList="false">
             <Button type="ghost" class="ml-5"> <Icon icon="feather:upload" />更换头像 </Button>
@@ -14,7 +14,7 @@
         </div>
       </a-col>
     </a-row>
-    <Button type="primary" @click="handleSubmit">更新基本信息</Button>
+    <Button type="primary" @click="handleSubmit"> 更新基本信息 </Button>
   </CollapseContainer>
 </template>
 <script lang="ts">
@@ -6,7 +6,9 @@
           <ListItemMeta>
             <template #title>
               {{ item.title }}
-              <div class="extra" v-if="item.extra"> {{ item.extra }} </div>
+              <div class="extra" v-if="item.extra">
+                {{ item.extra }}
+              </div>
             </template>
             <template #description>
               <div>{{ item.description }} </div>
@@ -13,12 +13,14 @@
       </a-tabs>
     </template>
  
-    <div class="m-4 pt-4 desc-wrap">
+    <div class="pt-4 m-4 desc-wrap">
       <a-descriptions size="small" :column="2">
         <a-descriptions-item label="创建人"> 曲丽丽 </a-descriptions-item>
         <a-descriptions-item label="订购产品"> XX 服务 </a-descriptions-item>
         <a-descriptions-item label="创建时间"> 2017-01-10 </a-descriptions-item>
-        <a-descriptions-item label="关联单据"> <a>12421</a> </a-descriptions-item>
+        <a-descriptions-item label="关联单据">
+          <a>12421</a>
+        </a-descriptions-item>
         <a-descriptions-item label="生效日期"> 2017-07-07 ~ 2017-08-08 </a-descriptions-item>
         <a-descriptions-item label="备注"> 请于两个工作日内确认 </a-descriptions-item>
       </a-descriptions>
@@ -28,7 +30,9 @@
             <template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template>
           </a-step>
           <a-step title="部门初审">
-            <template #description> <p>Chad</p> </template>
+            <template #description>
+              <p>Chad</p>
+            </template>
           </a-step>
           <a-step title="财务复核" />
           <a-step title="完成" />
@@ -87,7 +91,6 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  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';
@@ -95,7 +98,6 @@
   import { refundTimeTableSchema, refundTimeTableData } from './data';
   export default defineComponent({
     components: {
-      Description,
       BasicTable,
       PageWrapper,
       [Divider.name]: Divider,
@@ -5,7 +5,7 @@
         <TableAction :actions="createActions(record, column)" />
       </template>
     </BasicTable>
-    <a-button block class="mt-5" type="dashed" @click="handleAdd">新增成员</a-button>
+    <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button>
   </div>
 </template>
 <script lang="ts">
@@ -16,7 +16,6 @@
     TableAction,
     BasicColumn,
     ActionItem,
-    EditTableHeaderIcon,
     EditRecordRow,
   } from '/@/components/Table';
  
@@ -59,7 +58,7 @@
     },
   ];
   export default defineComponent({
-    components: { BasicTable, EditTableHeaderIcon, TableAction },
+    components: { BasicTable, TableAction },
     setup() {
       const [registerTable, { getDataSource }] = useTable({
         columns: columns,
@@ -17,7 +17,7 @@
     </a-card>
  
     <template #rightFooter>
-      <a-button type="primary" @click="submitAll">提交</a-button>
+      <a-button type="primary" @click="submitAll"> 提交 </a-button>
     </template>
   </PageWrapper>
 </template>
@@ -2,7 +2,7 @@
   <div class="step3">
     <a-result status="success" title="操作成功" sub-title="预计两小时内到账">
       <template #extra>
-        <a-button type="primary" @click="redo">再转一笔 </a-button>
+        <a-button type="primary" @click="redo"> 再转一笔 </a-button>
         <a-button> 查看账单 </a-button>
       </template>
     </a-result>
@@ -7,9 +7,9 @@
   >
     <div class="step-form-form">
       <a-steps :current="current">
-        <a-step title="填写转账信息"> </a-step>
-        <a-step title="确认转账信息"> </a-step>
-        <a-step title="完成"> </a-step>
+        <a-step title="填写转账信息" />
+        <a-step title="确认转账信息" />
+        <a-step title="完成" />
       </a-steps>
     </div>
     <div class="mt-5">
@@ -32,7 +32,9 @@
                 </div>
               </template>
               <template #description>
-                <div class="description">{{ item.description }}</div>
+                <div class="description">
+                  {{ item.description }}
+                </div>
                 <div class="info">
                   <div><span>Owner</span>{{ item.author }}</div>
                   <div><span>开始时间</span>{{ item.datetime }}</div>
@@ -15,7 +15,9 @@
           <a-list-item>
             <a-list-item-meta>
               <template #description>
-                <div :class="`${prefixCls}__content`">{{ item.content }}</div>
+                <div :class="`${prefixCls}__content`">
+                  {{ item.content }}
+                </div>
                 <div :class="`${prefixCls}__action`">
                   <template v-for="(action, index) in actions" :key="index">
                     <div :class="`${prefixCls}__action-item`">
@@ -32,10 +34,14 @@
                 </div>
               </template>
               <template #title>
-                <p :class="`${prefixCls}__title`"> {{ item.title }}</p>
+                <p :class="`${prefixCls}__title`">
+                  {{ item.title }}
+                </p>
                 <div>
                   <template v-for="(tag, index) in item.description" :key="index">
-                    <Tag class="mb-2">{{ tag }}</Tag>
+                    <Tag class="mb-2">
+                      {{ tag }}
+                    </Tag>
                   </template>
                 </div>
               </template>
@@ -6,7 +6,7 @@
       </template>
     </Result>
     <div class="result-error__content">
-      <div class="result-error__content-title">您提交的内容有如下错误：</div>
+      <div class="result-error__content-title"> 您提交的内容有如下错误： </div>
       <div class="mb-4">
         <CloseCircleOutlined class="mr-2 result-error__content-icon" />
         您的账户已被冻结
@@ -22,7 +22,9 @@
           <template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template>
         </Step>
         <Step title="部门初审">
-          <template #description> <p>Chad</p> </template>
+          <template #description>
+            <p>Chad</p>
+          </template>
         </Step>
         <Step title="财务复核" />
         <Step title="完成" />
@@ -19,15 +19,15 @@
  
     <Divider>组件方式判断权限</Divider>
     <Authority :value="'1000'">
-      <a-button type="primary" class="mx-4">拥有code ['1000']权限可见</a-button>
+      <a-button type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
     </Authority>
  
     <Authority :value="'2000'">
-      <a-button color="success" class="mx-4">拥有code ['2000']权限可见</a-button>
+      <a-button color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
     </Authority>
  
     <Authority :value="['1000', '2000']">
-      <a-button color="error" class="mx-4">拥有code ['1000','2000']角色权限可见</a-button>
+      <a-button color="error" class="mx-4"> 拥有code ['1000','2000']角色权限可见 </a-button>
     </Authority>
  
     <Divider>函数方式方式判断权限</Divider>
@@ -25,15 +25,15 @@
     </div>
     <Divider>组件方式判断权限(有需要可以自行全局注册)</Divider>
     <Authority :value="RoleEnum.SUPER">
-      <a-button type="primary" class="mx-4">拥有super角色权限可见</a-button>
+      <a-button type="primary" class="mx-4"> 拥有super角色权限可见 </a-button>
     </Authority>
  
     <Authority :value="RoleEnum.TEST">
-      <a-button color="success" class="mx-4">拥有test角色权限可见</a-button>
+      <a-button color="success" class="mx-4"> 拥有test角色权限可见 </a-button>
     </Authority>
  
     <Authority :value="[RoleEnum.TEST, RoleEnum.SUPER]">
-      <a-button color="error" class="mx-4">拥有[test,super]角色权限可见</a-button>
+      <a-button color="error" class="mx-4"> 拥有[test,super]角色权限可见 </a-button>
     </Authority>
  
     <Divider>函数方式方式判断权限(适用于函数内部过滤)</Divider>
@@ -31,10 +31,9 @@
   import { defineComponent, ref } from 'vue';
   import { BasicTable } from '/@/components/Table';
   import { getBasicColumns, getBasicData } from './tableData';
-  import { PageWrapper } from '/@/components/Page';
  
   export default defineComponent({
-    components: { BasicTable, PageWrapper },
+    components: { BasicTable },
     setup() {
       const canResize = ref(false);
       const loading = ref(false);
@@ -2,8 +2,10 @@
   <div class="p-4">
     <BasicTable @register="registerTable">
       <template #id="{ record }"> ID: {{ record.id }} </template>
-      <template #no="{ record }"
-        ><Tag color="green">{{ record.no }}</Tag>
+      <template #no="{ record }">
+        <Tag color="green">
+          {{ record.no }}
+        </Tag>
       </template>
       <template #img>
         <TableImg
 <template>
   <div class="p-4">
-    <BasicTable @register="registerTable" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel">
-    </BasicTable>
+    <BasicTable
+      @register="registerTable"
+      @edit-end="handleEditEnd"
+      @edit-cancel="handleEditCancel"
+    />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, EditTableHeaderIcon } from '/@/components/Table';
+  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
   import { optionsListApi } from '/@/api/demo/select';
  
   import { demoListApi } from '/@/api/demo/table';
@@ -106,7 +109,7 @@
     },
   ];
   export default defineComponent({
-    components: { BasicTable, EditTableHeaderIcon },
+    components: { BasicTable },
     setup() {
       const [registerTable] = useTable({
         title: '可编辑单元格示例',
@@ -15,7 +15,6 @@
     TableAction,
     BasicColumn,
     ActionItem,
-    EditTableHeaderIcon,
     EditRecordRow,
   } from '/@/components/Table';
   import { optionsListApi } from '/@/api/demo/select';
@@ -117,7 +116,7 @@
     },
   ];
   export default defineComponent({
-    components: { BasicTable, EditTableHeaderIcon, TableAction },
+    components: { BasicTable, TableAction },
     setup() {
       const currentEditKeyRef = ref('');
  
 <template>
   <BasicTable @register="registerTable">
-    <template #form-custom> custom-slot</template>
+    <template #form-custom> custom-slot </template>
   </BasicTable>
 </template>
 <script lang="ts">
 <template>
   <div class="p-4">
     <div class="mb-4">
-      <a-button class="mr-2" @click="reloadTable">还原</a-button>
-      <a-button class="mr-2" @click="changeLoading">开启loading</a-button>
-      <a-button class="mr-2" @click="changeColumns">更改Columns</a-button>
-      <a-button class="mr-2" @click="getColumn">获取Columns</a-button>
-      <a-button class="mr-2" @click="getTableData">获取表格数据</a-button>
-      <a-button class="mr-2" @click="setPaginationInfo">跳转到第2页</a-button>
+      <a-button class="mr-2" @click="reloadTable"> 还原 </a-button>
+      <a-button class="mr-2" @click="changeLoading"> 开启loading </a-button>
+      <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>
+      <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>
+      <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
+      <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>
     </div>
     <div class="mb-4">
-      <a-button class="mr-2" @click="getSelectRowList">获取选中行</a-button>
-      <a-button class="mr-2" @click="getSelectRowKeyList">获取选中行Key</a-button>
-      <a-button class="mr-2" @click="setSelectedRowKeyList">设置选中行</a-button>
-      <a-button class="mr-2" @click="clearSelect">清空选中行</a-button>
-      <a-button class="mr-2" @click="getPagination">获取分页信息</a-button>
+      <a-button class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button>
+      <a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button>
+      <a-button class="mr-2" @click="setSelectedRowKeyList"> 设置选中行 </a-button>
+      <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button>
+      <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button>
     </div>
     <BasicTable
       :canResize="false"
 <template>
   <div class="p-4">
     <div class="mb-4">
-      <a-button class="mr-2" @click="reloadTable">还原</a-button>
-      <a-button class="mr-2" @click="changeLoading">开启loading</a-button>
-      <a-button class="mr-2" @click="changeColumns">更改Columns</a-button>
-      <a-button class="mr-2" @click="getColumn">获取Columns</a-button>
-      <a-button class="mr-2" @click="getTableData">获取表格数据</a-button>
-      <a-button class="mr-2" @click="setPaginationInfo">跳转到第2页</a-button>
+      <a-button class="mr-2" @click="reloadTable"> 还原 </a-button>
+      <a-button class="mr-2" @click="changeLoading"> 开启loading </a-button>
+      <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>
+      <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>
+      <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
+      <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>
     </div>
     <div class="mb-4">
-      <a-button class="mr-2" @click="getSelectRowList">获取选中行</a-button>
-      <a-button class="mr-2" @click="getSelectRowKeyList">获取选中行Key</a-button>
-      <a-button class="mr-2" @click="setSelectedRowKeyList">设置选中行</a-button>
-      <a-button class="mr-2" @click="clearSelect">清空选中行</a-button>
-      <a-button class="mr-2" @click="getPagination">获取分页信息</a-button>
+      <a-button class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button>
+      <a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button>
+      <a-button class="mr-2" @click="setSelectedRowKeyList"> 设置选中行 </a-button>
+      <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button>
+      <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button>
     </div>
     <BasicTable @register="registerTable" />
   </div>
 <template>
   <PageWrapper title="Tree函数操作示例" contentBackground contentClass="p-4">
     <div class="mb-4">
-      <a-button @click="handleLevel(2)" class="mr-2">显示到第2级</a-button>
-      <a-button @click="handleLevel(1)" class="mr-2">显示到第1级</a-button>
-      <a-button @click="handleSetCheckData" class="mr-2">设置勾选数据</a-button>
-      <a-button @click="handleGetCheckData" class="mr-2">获取勾选数据</a-button>
-      <a-button @click="handleSetSelectData" class="mr-2">设置选中数据</a-button>
-      <a-button @click="handleGetSelectData" class="mr-2">获取选中数据</a-button>
+      <a-button @click="handleLevel(2)" class="mr-2"> 显示到第2级 </a-button>
+      <a-button @click="handleLevel(1)" class="mr-2"> 显示到第1级 </a-button>
+      <a-button @click="handleSetCheckData" class="mr-2"> 设置勾选数据 </a-button>
+      <a-button @click="handleGetCheckData" class="mr-2"> 获取勾选数据 </a-button>
+      <a-button @click="handleSetSelectData" class="mr-2"> 设置选中数据 </a-button>
+      <a-button @click="handleGetSelectData" class="mr-2"> 获取选中数据 </a-button>
  
-      <a-button @click="handleSetExpandData" class="mr-2">设置展开数据</a-button>
-      <a-button @click="handleGetExpandData" class="mr-2">获取展开数据</a-button>
+      <a-button @click="handleSetExpandData" class="mr-2"> 设置展开数据 </a-button>
+      <a-button @click="handleGetExpandData" class="mr-2"> 获取展开数据 </a-button>
     </div>
     <div class="mb-4">
-      <a-button @click="appendNodeByKey(null)" class="mr-2">添加根节点</a-button>
-      <a-button @click="appendNodeByKey('2-2')" class="mr-2">添加在parent3内添加节点</a-button>
-      <a-button @click="deleteNodeByKey('2-2')" class="mr-2">删除parent3节点</a-button>
-      <a-button @click="updateNodeByKey('1-1')" class="mr-2">更新parent2节点</a-button>
+      <a-button @click="appendNodeByKey(null)" class="mr-2"> 添加根节点 </a-button>
+      <a-button @click="appendNodeByKey('2-2')" class="mr-2"> 添加在parent3内添加节点 </a-button>
+      <a-button @click="deleteNodeByKey('2-2')" class="mr-2"> 删除parent3节点 </a-button>
+      <a-button @click="updateNodeByKey('1-1')" class="mr-2"> 更新parent2节点 </a-button>
     </div>
     <CollapseContainer title="函数操作" class="mr-4" :canExpan="false" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" ref="treeRef" :checkable="true" />
@@ -36,10 +36,12 @@ export default defineComponent({
  
     title: {
       type: String as PropType<string>,
+      default: '',
     },
  
     subTitle: {
       type: String as PropType<string>,
+      default: '',
     },
  
     full: {
 <template>
-  <div />
+  <div></div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
 <template>
   <div class="iframe-page" :style="getWrapStyle">
     <Spin :spinning="loading" size="large" :style="getWrapStyle">
-      <iframe :src="frameSrc" class="iframe-page__main" ref="frameRef" />
+      <iframe :src="frameSrc" class="iframe-page__main" ref="frameRef"></iframe>
     </Spin>
   </div>
 </template>
@@ -18,6 +18,7 @@
     props: {
       frameSrc: {
         type: String as PropType<string>,
+        default: '',
       },
     },
     setup() {
@@ -10,14 +10,18 @@
         {{ hour }}
         <span class="meridiem" v-show="showDate">{{ meridiem }}</span>
       </div>
-      <div :class="`${prefixCls}__minute`">{{ minute }} </div>
+      <div :class="`${prefixCls}__minute`">
+        {{ minute }}
+      </div>
     </div>
     <transition name="fade-slide">
       <div :class="`${prefixCls}-entry`" v-show="!showDate">
         <div :class="`${prefixCls}-entry-content`">
           <div :class="`${prefixCls}-entry__header`">
             <img :src="headerImg" :class="`${prefixCls}-entry__header-img`" />
-            <p :class="`${prefixCls}-entry__header-name`">{{ realName }}</p>
+            <p :class="`${prefixCls}-entry__header-name`">
+              {{ realName }}
+            </p>
           </div>
           <InputPassword :placeholder="t('sys.lock.placeholder')" v-model:value="password" />
           <span :class="`${prefixCls}-entry__err-msg`" v-if="errMsgRef">
@@ -60,7 +64,7 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, computed } from 'vue';
-  import { Alert, Input } from 'ant-design-vue';
+  import { Input } from 'ant-design-vue';
  
   import { userStore } from '/@/store/modules/user';
   import { lockStore } from '/@/store/modules/lock';
@@ -74,7 +78,7 @@
  
   export default defineComponent({
     name: 'LockPage',
-    components: { Alert, LockOutlined, InputPassword: Input.Password },
+    components: { LockOutlined, InputPassword: Input.Password },
  
     setup() {
       const passwordRef = ref('');
@@ -84,7 +88,7 @@
  
       const { prefixCls } = useDesign('lock-page');
  
-      const { start, stop, ...state } = useNow(true);
+      const { ...state } = useNow(true);
  
       const { t } = useI18n();
  
 <template>
   <div class="login">
-    <div class="login-mask" />
+    <div class="login-mask"></div>
     <div class="login-form-wrap">
-      <div class="login-form mx-6">
+      <div class="mx-6 login-form">
         <AppLocalePicker v-if="showLocale" class="login-form__locale" />
-        <div class="login-form__content px-2 py-10">
+        <div class="px-2 py-10 login-form__content">
           <header>
             <img :src="logo" class="mr-4" />
             <h1>{{ title }}</h1>
@@ -35,7 +35,9 @@
               <a-col :span="12">
                 <a-form-item :style="{ 'text-align': 'right' }">
                   <!-- No logic, you need to deal with it yourself -->
-                  <a-button type="link" size="small">{{ t('sys.login.forgetPassword') }}</a-button>
+                  <a-button type="link" size="small">
+                    {{ t('sys.login.forgetPassword') }}
+                  </a-button>
                 </a-form-item>
               </a-col>
             </a-row>
@@ -47,8 +49,9 @@
                 :block="true"
                 @click="login"
                 :loading="formState.loading"
-                >{{ t('sys.login.loginButton') }}</a-button
               >
+                {{ t('sys.login.loginButton') }}
+              </a-button>
             </a-form-item>
           </a-form>
         </div>
 <template>
-  <div />
+  <div></div>
 </template>
 <script lang="ts">
   import { defineComponent, unref } from 'vue';
@@ -31,9 +31,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
   return {
     base: VITE_PUBLIC_PATH,
     root,
-    alias: {
-      '/@/': `${pathResolve('src')}/`,
-    },
+    alias: [
+      {
+        find: /^\/@\//,
+        replacement: pathResolve('src') + '/',
+      },
+    ],
     server: {
       port: VITE_PORT,
       proxy: createProxy(VITE_PROXY),
@@ -75,19 +78,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
       vue(),
       vueJsx(),
       ...(VITE_LEGACY && isBuild ? [legacy()] : []),
-      ...createVitePlugins(viteEnv, isBuild, mode),
+      ...createVitePlugins(viteEnv, isBuild),
     ],
  
     optimizeDeps: {
-      include: [
-        'moment',
-        '@ant-design/icons-vue',
-        'echarts/map/js/china',
-        'ant-design-vue/es/locale/zh_CN',
-        'moment/dist/locale/zh-cn',
-        'ant-design-vue/es/locale/en_US',
-        'resize-observer-polyfill',
-      ],
+      include: ['@iconify/iconify'],
     },
   };
 };
@@ -1747,7 +1747,7 @@
     "@typescript-eslint/types" "4.14.1"
     eslint-visitor-keys "^2.0.0"
  
-"@vitejs/plugin-legacy@^1.2.1":
+"@vitejs/plugin-legacy@^1.2.2":
   version "1.2.2"
   resolved "https://registry.npmjs.org/@vitejs/plugin-legacy/-/plugin-legacy-1.2.2.tgz#65039ca35be1542b5ad612b54641da5a89d7687f"
   integrity sha512-ec3hvD4OrQusH42ERrTtjOmeBoGmVWtwg7mVMvvlWkR7wUwZSnr8J6HYYynmGUaBcC95+3xm6bRks7sh2DKq+w==
@@ -7743,10 +7743,10 @@ vite-plugin-style-import@^0.4.6:
     "@rollup/pluginutils" "^4.1.0"
     change-case "^4.1.2"
  
-vite@2.0.0-beta.50:
-  version "2.0.0-beta.50"
-  resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.50.tgz#04e66d009470ca90ab8a4a43687e899b670a0f25"
-  integrity sha512-zzMgrWJK92/aQ1rxvc+0QKeOCdOP4m2EPGwK2HKhlifQVnSdpYQzQkWLzaGh1GQAp61W+Su8cu6cWINpFgNrfQ==
+vite@2.0.0-beta.52:
+  version "2.0.0-beta.52"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.52.tgz#a06275d8b7c789358586dca51b8c01caf8599b08"
+  integrity sha512-goc3hwnL7ot9NnzRv7jWz4pDMgBpoL272+WuKc3D/gjYtVLd9KG46Z68IlU3OSN5ng334WEI1pmAlawb4iGJ8g==
   dependencies:
     esbuild "^0.8.34"
     postcss "^8.2.1"