chore: format code by eslint #222

vben
1 parent b77b7c9d
Showing 100 changed files with 376 additions and 256 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>