style: format site

package.json

@@ -42,6 +42,8 @@
     "pretty-quick": "pretty-quick",
     "dist": "node --max_old_space_size=8192 antd-tools/cli/run.js dist",
     "lint": "eslint -c ./.eslintrc.js --fix --ext .jsx,.js,.ts,.tsx ./components",
+    "lint:demo": "eslint -c ./.eslintrc.js --fix --ext .vue ./components",
+    "lint:site": "eslint -c ./.eslintrc.js --fix --ext .jsx,.js,.ts,.tsx,vue ./site",
     "lint:style": "stylelint \"{site,components}/**/*.less\" --syntax less",
     "codecov": "codecov",
     "routes": "node site/scripts/genrateRoutes.js"

site/scripts/pushToOSS.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const OSS = require('ali-oss');
 const path = require('path');
@@ -13,8 +14,8 @@ const client = new OSS({
   // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
   region: 'oss-cn-beijing',
   // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
-  accessKeyId: accessKeyId,
+  accessKeyId,
-  accessKeySecret: accessKeySecret,
+  accessKeySecret,
 });
 
 const assetsPath = path.join(process.cwd(), 'dist', 'assets');

site/src/App.vue

@@ -42,7 +42,7 @@ export default defineComponent({
     const globalConfig: GlobalConfig = {
       isMobile,
       responsive,
-      lang: computed(() => i18n.locale.value as any),
+      lang: computed<any>(() => i18n.locale.value),
       isZhCN: computed(() => i18n.locale.value === 'zh-CN'),
       blocked: ref(false),
     };

site/src/components/DemoBox.vue

@@ -2,7 +2,7 @@
   <template v-if="inIframe">
     <div :id="sectionId"><slot /></div>
   </template>
-  <section v-else class="code-box" :id="sectionId">
+  <section v-else :id="sectionId" class="code-box">
     <section class="code-box-demo">
       <template v-if="iframeDemo[iframeDemoKey]">
         <div class="browser-mockup with-url">
@@ -35,10 +35,10 @@
           @visibleChange="onCopyTooltipVisibleChange"
         >
           <component
+            :is="copied && copyTooltipVisible ? 'CheckOutlined' : 'SnippetsOutlined'"
             key="copy"
             v-clipboard:copy="type === 'TS' ? sourceCode : jsSourceCode"
             v-clipboard:success="handleCodeCopied"
-            :is="copied && copyTooltipVisible ? 'CheckOutlined' : 'SnippetsOutlined'"
             class="code-box-code-copy code-box-code-action"
           />
         </a-tooltip>
@@ -81,13 +81,17 @@
 </template>
 
 <script lang="ts">
-import { GlobalConfig } from '@/App.vue';
+import type { GlobalConfig } from '../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../SymbolKey';
 import { computed, defineComponent, inject, onMounted, ref } from 'vue';
 import { CheckOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
 import { Modal } from 'ant-design-vue';
 export default defineComponent({
   name: 'DemoBox',
+  components: {
+    CheckOutlined,
+    SnippetsOutlined,
+  },
   props: {
     jsfiddle: Object,
   },
@@ -105,7 +109,7 @@ export default defineComponent({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const addDemosInfo: any = inject('addDemosInfo', () => {});
 
-    const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG)!;
+    const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
     const title = computed(
       () =>
         props.jsfiddle &&
@@ -200,10 +204,6 @@ export default defineComponent({
       jsSourceCode: decodeURIComponent(escape(window.atob(props.jsfiddle?.jsSourceCode))),
     };
   },
-  components: {
-    CheckOutlined,
-    SnippetsOutlined,
-  },
 });
 </script>
 

site/src/components/rice/GoogleAds.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="false" class="google-ads" id="API">
+  <div v-if="false" id="API" class="google-ads">
     <ins
       ref="ins"
       class="adsbygoogle"

site/src/directives/clipboard/clipboard.js

@@ -54,7 +54,7 @@ class Clipboard extends Emitter {
       target: this.target(trigger),
       text: this.text(trigger),
       container: this.container,
-      trigger: trigger,
+      trigger,
       emitter: this,
     });
   }

site/src/directives/clipboard/closest.js

@@ -1,10 +1,10 @@
-var DOCUMENT_NODE_TYPE = 9;
+let DOCUMENT_NODE_TYPE = 9;
 
 /**
  * A polyfill for Element.matches()
  */
 if (typeof Element !== 'undefined' && !Element.prototype.matches) {
-  var proto = Element.prototype;
+  let proto = Element.prototype;
 
   proto.matches =
     proto.matchesSelector ||

site/src/directives/clipboard/delegate.js

@@ -11,12 +11,12 @@ import closest from './closest';
  * @return {Object}
  */
 function _delegate(element, selector, type, callback, useCapture) {
-  var listenerFn = listener.apply(this, arguments);
+  let listenerFn = listener.apply(this, arguments);
 
   element.addEventListener(type, listenerFn, useCapture);
 
   return {
-    destroy: function () {
+    destroy () {
       element.removeEventListener(type, listenerFn, useCapture);
     },
   };

site/src/directives/clipboard/is.js

@@ -15,7 +15,7 @@ export const node = function (value) {
  * @return {Boolean}
  */
 export const nodeList = function (value) {
-  var type = Object.prototype.toString.call(value);
+  let type = Object.prototype.toString.call(value);
 
   return (
     value !== undefined &&
@@ -42,7 +42,7 @@ export const string = function (value) {
  * @return {Boolean}
  */
 export const fn = function (value) {
-  var type = Object.prototype.toString.call(value);
+  let type = Object.prototype.toString.call(value);
 
   return type === '[object Function]';
 };

site/src/directives/clipboard/listen.js

@@ -49,7 +49,7 @@ function listenNode(node, type, callback) {
   node.addEventListener(type, callback);
 
   return {
-    destroy: function () {
+    destroy () {
       node.removeEventListener(type, callback);
     },
   };
@@ -70,7 +70,7 @@ function listenNodeList(nodeList, type, callback) {
   });
 
   return {
-    destroy: function () {
+    destroy () {
       Array.prototype.forEach.call(nodeList, function (node) {
         node.removeEventListener(type, callback);
       });

site/src/directives/clipboard/select.js

@@ -1,12 +1,12 @@
 function select(element) {
-  var selectedText;
+  let selectedText;
 
   if (element.nodeName === 'SELECT') {
     element.focus();
 
     selectedText = element.value;
   } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
-    var isReadOnly = element.hasAttribute('readonly');
+    let isReadOnly = element.hasAttribute('readonly');
 
     if (!isReadOnly) {
       element.setAttribute('readonly', '');
@@ -25,8 +25,8 @@ function select(element) {
       element.focus();
     }
 
-    var selection = window.getSelection();
+    let selection = window.getSelection();
-    var range = document.createRange();
+    let range = document.createRange();
 
     range.selectNodeContents(element);
     selection.removeAllRanges();

site/src/directives/clipboard/tiny-emitter.js

@@ -4,19 +4,19 @@ function E() {
 }
 
 E.prototype = {
-  on: function (name, callback, ctx) {
+  on (name, callback, ctx) {
-    var e = this.e || (this.e = {});
+    let e = this.e || (this.e = {});
 
     (e[name] || (e[name] = [])).push({
       fn: callback,
-      ctx: ctx,
+      ctx,
     });
 
     return this;
   },
 
-  once: function (name, callback, ctx) {
+  once (name, callback, ctx) {
-    var self = this;
+    let self = this;
     function listener() {
       self.off(name, listener);
       callback.apply(ctx, arguments);
@@ -26,11 +26,11 @@ E.prototype = {
     return this.on(name, listener, ctx);
   },
 
-  emit: function (name) {
+  emit (name) {
-    var data = [].slice.call(arguments, 1);
+    let data = [].slice.call(arguments, 1);
-    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+    let evtArr = ((this.e || (this.e = {}))[name] || []).slice();
-    var i = 0;
+    let i = 0;
-    var len = evtArr.length;
+    let len = evtArr.length;
 
     for (i; i < len; i++) {
       evtArr[i].fn.apply(evtArr[i].ctx, data);
@@ -39,13 +39,13 @@ E.prototype = {
     return this;
   },
 
-  off: function (name, callback) {
+  off (name, callback) {
-    var e = this.e || (this.e = {});
+    let e = this.e || (this.e = {});
-    var evts = e[name];
+    let evts = e[name];
-    var liveEvents = [];
+    let liveEvents = [];
 
     if (evts && callback) {
-      for (var i = 0, len = evts.length; i < len; i++) {
+      for (let i = 0, len = evts.length; i < len; i++) {
         if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
       }
     }

site/src/hooks/useMediaQuery.ts

@@ -52,7 +52,7 @@ export const getScreenClassName = () => {
     }
     return false;
   });
-  className = (mediaQueryKey as unknown) as MediaQueryKey;
+  className = mediaQueryKey as unknown as MediaQueryKey;
   return className;
 };
 

site/src/hooks/useMenus.ts

@@ -1,5 +1,6 @@
 import { groupBy, sortBy } from 'lodash-es';
-import { computed, ComputedRef, inject } from 'vue';
+import type { ComputedRef } from 'vue';
+import { computed, inject } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { GLOBAL_CONFIG } from '../SymbolKey';
 const typeOrder: any = {

site/src/layouts/BaseLayout.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <header :name="name" />
+    <HeaderCom :name="name" />
     <div style="padding: 20px; margin: 0 auto; width: 960px">
       <router-view />
     </div>
-    <footer />
+    <FooterCom />
   </div>
 </template>
 
@@ -14,8 +14,8 @@ import Footer from '../components/footer';
 import NProgress from 'nprogress';
 export default {
   components: {
-    Header,
+    HeaderCom: Header,
-    Footer,
+    FooterCom: Footer,
   },
   props: ['name'],
   beforeCreate() {},

site/src/layouts/Menu.vue

@@ -1,9 +1,9 @@
 <template>
   <a-menu
-    :inlineIndent="30"
+    :inline-indent="30"
     class="aside-container menu-site"
     mode="inline"
-    :selectedKeys="[activeMenuItem]"
+    :selected-keys="[activeMenuItem]"
   >
     <a-menu-item v-if="showOverview" key="/components/overview">
       <router-link :to="getLocalizedPathname('/components/overview', isZhCN)">

site/src/layouts/PrevAndNext.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="prev-next-nav">
     <router-link
-      key="prev"
       v-if="prev"
+      key="prev"
       class="prev-page"
       :to="getLocalizedPathname(prev.path, isZhCN)"
     >
@@ -25,8 +25,8 @@
       <span v-if="isZhCN" class="chinese">{{ prev.subtitle }}</span>
     </router-link>
     <router-link
-      key="next"
       v-if="next"
+      key="next"
       class="next-page"
       :to="getLocalizedPathname(next.path, isZhCN)"
     >

site/src/layouts/ThemeIcon.vue

@@ -18,12 +18,12 @@ import { defineComponent } from 'vue';
 import Icon from '@ant-design/icons-vue';
 export default defineComponent({
   name: 'ThemeIcon',
-  setup() {
-    return {};
-  },
   components: {
     Icon,
   },
+  setup() {
+    return {};
+  },
 });
 </script>
 <style lang="less" scoped></style>

site/src/layouts/header/Ecosystem.vue

@@ -26,7 +26,7 @@
       <a-menu-item key="wechat">
         <a-popover placement="right">
           <a>{{ isZhCN ? '微信' : 'WeChat' }}</a>
-          <template v-slot:content>
+          <template #content>
             <img width="160" height="160" alt="wechat" src="https://qn.antdv.com/wechat.jpeg" />
           </template>
         </a-popover>
@@ -42,9 +42,9 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent, inject } from 'vue';
-import { GlobalConfig } from '@/App.vue';
+import { GlobalConfig } from '../../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../../SymbolKey';
-import { getLocalizedPathname } from '@/utils/util';
+import { getLocalizedPathname } from '../../utils/util';
 
 export default defineComponent({
   props: {
@@ -57,7 +57,7 @@ export default defineComponent({
     const downstyle = computed(() => (props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px'));
     return {
       downstyle,
-      isZhCN: inject<GlobalConfig>(GLOBAL_CONFIG)!.isZhCN.value,
+      isZhCN: inject<GlobalConfig>(GLOBAL_CONFIG).isZhCN.value,
       getLocalizedPathname,
     };
   },

site/src/layouts/header/Logo.vue

@@ -8,13 +8,13 @@
 </template>
 
 <script lang="ts">
-import { GlobalConfig } from '@/App.vue';
+import type { GlobalConfig } from '../../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../../SymbolKey';
 import { defineComponent, inject } from 'vue';
 import logo from '../../assets/logo.svg';
 export default defineComponent({
   setup() {
-    return { logo, isZhCN: inject<GlobalConfig>(GLOBAL_CONFIG)!.isZhCN.value };
+    return { logo, isZhCN: inject<GlobalConfig>(GLOBAL_CONFIG).isZhCN.value };
   },
 });
 </script>

site/src/layouts/header/Menu.vue

@@ -8,17 +8,17 @@
       key="version"
       class="version"
       size="small"
-      :defaultValue="antdVersion"
+      :default-value="antdVersion"
-      :getPopupContainer="trigger => trigger.parentNode"
+      :get-popup-container="trigger => trigger.parentNode"
     >
       <a-select-option :value="antdVersion">{{ antdVersion }}</a-select-option>
       <a-select-option value="1.x" @click="changeVersion">1.x</a-select-option>
     </a-select>
     <a-button
-      size="small"
-      @click="onLangChange"
-      class="header-button header-lang-button"
       key="lang-button"
+      size="small"
+      class="header-button header-lang-button"
+      @click="onLangChange"
     >
       {{ $t('app.header.lang') }}
     </a-button>
@@ -37,6 +37,12 @@ import { isZhCN, isLocalStorageNameSupported, getLocalizedPathname } from '@/uti
 import { useRoute } from 'vue-router';
 export default defineComponent({
   name: 'HeaderMenu',
+  components: {
+    Navigation,
+    Github,
+    More,
+    Ecosystem,
+  },
   props: ['isMobile'],
   setup() {
     const antdVersion = ref(version);
@@ -69,12 +75,6 @@ export default defineComponent({
       changeVersion,
     };
   },
-  components: {
-    Navigation,
-    Github,
-    More,
-    Ecosystem,
-  },
 });
 </script>
 <style lang="less" scoped></style>

site/src/layouts/header/More.vue

@@ -10,7 +10,7 @@
         }"
       />
     </a-button>
-    <template v-slot:overlay>
+    <template #overlay>
       <Ecosystem />
     </template>
   </a-dropdown>
@@ -18,12 +18,16 @@
 <script lang="ts">
 import { computed, defineComponent, inject } from 'vue';
 import { DownOutlined } from '@ant-design/icons-vue';
-import { GlobalConfig } from '@/App.vue';
+import type { GlobalConfig } from '../../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../../SymbolKey';
-import { getLocalizedPathname } from '@/utils/util';
+import { getLocalizedPathname } from '../../utils/util';
 import Ecosystem from './Ecosystem.vue';
 
 export default defineComponent({
+  components: {
+    DownOutlined,
+    Ecosystem,
+  },
   props: {
     isRTL: {
       type: Boolean,
@@ -34,13 +38,9 @@ export default defineComponent({
     const downstyle = computed(() => (props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px'));
     return {
       downstyle,
-      isZhCN: inject<GlobalConfig>(GLOBAL_CONFIG)!.isZhCN.value,
+      isZhCN: inject<GlobalConfig>(GLOBAL_CONFIG).isZhCN.value,
       getLocalizedPathname,
     };
   },
-  components: {
-    DownOutlined,
-    Ecosystem,
-  },
 });
 </script>

site/src/layouts/header/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-menu class="menu-site" :mode="menuMode" :selectedKeys="[activeMenuItem]" id="nav">
+  <a-menu id="nav" class="menu-site" :mode="menuMode" :selected-keys="[activeMenuItem]">
     <a-menu-item key="docs/vue">
       <router-link :to="getLocalizedPathname('/docs/vue/introduce', isZhCN)">
         {{ $t('app.header.menu.documentation') }}
@@ -49,9 +49,9 @@
   </a-menu>
 </template>
 <script lang="ts">
-import { GlobalConfig } from '@/App.vue';
+import type { GlobalConfig } from '../../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../../SymbolKey';
-import { getLocalizedPathname } from '@/utils/util';
+import { getLocalizedPathname } from '../../utils/util';
 import { computed, defineComponent, inject, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 export default defineComponent({
@@ -59,7 +59,7 @@ export default defineComponent({
   setup() {
     const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
     const menuMode = computed(() => {
-      return globalConfig!.isMobile.value ? 'inline' : 'horizontal';
+      return globalConfig.isMobile.value ? 'inline' : 'horizontal';
     });
     const route = useRoute();
     const activeMenuItem = ref('home');
@@ -82,8 +82,8 @@ export default defineComponent({
       { immediate: true },
     );
     return {
-      isMobile: globalConfig!.isMobile,
+      isMobile: globalConfig.isMobile,
-      isZhCN: globalConfig!.isZhCN,
+      isZhCN: globalConfig.isZhCN,
       getLocalizedPathname,
       menuMode,
       activeMenuItem,

site/src/layouts/header/SearchBox.vue

@@ -2,8 +2,8 @@
   <div id="search-box" :class="{ 'narrow-mode': responsive, focused: !!focused }">
     <SearchOutlined />
     <a-input
-      :placeholder="searchPlaceholder"
       ref="inputRef"
+      :placeholder="searchPlaceholder"
       @focus="triggerFocus(true)"
       @blue="triggerFocus(false)"
     ></a-input>
@@ -14,6 +14,9 @@ import { ref, defineComponent } from 'vue';
 import { SearchOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
   name: 'SearchBox',
+  components: {
+    SearchOutlined,
+  },
   props: ['isZhCN', 'responsive'],
   emits: ['triggerFocus'],
   setup(props, { emit }) {
@@ -30,8 +33,5 @@ export default defineComponent({
       searchPlaceholder: props.isZhCN ? '搜索文档' : 'Search Docs',
     };
   },
-  components: {
-    SearchOutlined,
-  },
 });
 </script>

site/src/layouts/header/index.vue

@@ -1,6 +1,6 @@
 <template>
   <header id="header" :class="headerClassName">
-    <div class="adblock-banner" v-if="visibleAdblockBanner">
+    <div v-if="visibleAdblockBanner" class="adblock-banner">
       <template v-if="isZhCN">
         我们检测到你可能使用了 AdBlock 或 Adblock
         Plus，它会影响到正常功能的使用（如复制、展开代码等）。
@@ -17,15 +17,15 @@
       <CloseOutlined class="close-icon" @click="visibleAdblockBanner = false" />
     </div>
     <a-popover
-      overlayClassName="popover-menu"
+      v-model:visible="menuVisible"
+      overlay-class-name="popover-menu"
       placement="bottomRight"
       trigger="click"
-      arrowPointAtCenter
+      arrow-point-at-center
-      v-model:visible="menuVisible"
     >
       <UnorderedListOutlined class="nav-phone-icon" />
-      <template v-slot:content>
+      <template #content>
-        <Menu :isMobile="isMobile" />
+        <Menu :is-mobile="isMobile" />
       </template>
     </a-popover>
     <a-row :style="{ flexFlow: 'nowrap', height: 64 }">
@@ -35,7 +35,7 @@
       <a-col v-bind="colProps[1]" class="menu-row">
         <SearchBox
           key="search"
-          :isZhCN="isZhCN"
+          :is-zh-c-n="isZhCN"
           :responsive="responsive"
           @triggerFocus="onTriggerSearching"
         />
@@ -45,16 +45,23 @@
   </header>
 </template>
 <script lang="ts">
-import { GlobalConfig } from '@/App.vue';
+import type { GlobalConfig } from '../../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../../SymbolKey';
-import { getLocalizedPathname } from '@/utils/util';
+import { getLocalizedPathname } from '../../utils/util';
-import { computed, defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
+import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import Logo from './Logo.vue';
 import Menu from './Menu.vue';
 import { UnorderedListOutlined, CloseOutlined } from '@ant-design/icons-vue';
 import SearchBox from './SearchBox.vue';
 export default defineComponent({
+  components: {
+    Logo,
+    Menu,
+    UnorderedListOutlined,
+    SearchBox,
+    CloseOutlined,
+  },
   setup() {
     const route = useRoute();
     const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
@@ -92,7 +99,7 @@ export default defineComponent({
         apiKey: '92003c1d1d07beef165b08446f4224a3',
         indexName: 'antdv',
         inputSelector: '#search-box input',
-        algoliaOptions: { facetFilters: [`tags:${globalConfig!.isZhCN.value ? 'cn' : 'en'}`] },
+        algoliaOptions: { facetFilters: [`tags:${globalConfig.isZhCN.value ? 'cn' : 'en'}`] },
         transformData(hits: any[]) {
           hits.forEach(hit => {
             hit.url = hit.url.replace('www.antdv.com', window.location.host);
@@ -109,13 +116,13 @@ export default defineComponent({
       });
     });
     const visibleAdblockBanner = ref(false);
-    watch(globalConfig?.blocked as Ref<boolean>, val => {
+    watch(globalConfig?.blocked, val => {
       visibleAdblockBanner.value = val;
     });
     return {
-      isZhCN: globalConfig!.isZhCN,
+      isZhCN: globalConfig.isZhCN,
-      isMobile: globalConfig!.isMobile,
+      isMobile: globalConfig.isMobile,
-      responsive: globalConfig!.responsive,
+      responsive: globalConfig.responsive,
       getLocalizedPathname,
       visibleAdblockBanner,
       headerClassName: {
@@ -127,13 +134,6 @@ export default defineComponent({
       onTriggerSearching,
     };
   },
-  components: {
-    Logo,
-    Menu,
-    UnorderedListOutlined,
-    SearchBox,
-    CloseOutlined,
-  },
 });
 </script>
 <style lang="less" src="./index.less"></style>

site/src/layouts/index.vue

@@ -4,14 +4,14 @@
     <a-row>
       <template v-if="isMobile">
         <a-drawer
+          key="mobile-menu"
           :closable="false"
           placement="left"
           class="drawer drawer-left"
           :visible="visible"
-          key="mobile-menu"
+          wrapper-class-name="drawer-wrapper"
-          wrapperClassName="drawer-wrapper"
         >
-          <Menu :menus="dataSource" :activeMenuItem="activeMenuItem" :isZhCN="isZhCN" />
+          <Menu :menus="dataSource" :active-menu-item="activeMenuItem" :is-zh-c-n="isZhCN" />
           <template #handle>
             <div class="drawer-handle" @click="handleClickShowButton">
               <close-outlined v-if="visible" :style="iconStyle" />
@@ -24,20 +24,20 @@
         <a-col :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
           <a-affix>
             <section class="main-menu-inner">
-              <Sponsors :isCN="isZhCN" />
+              <Sponsors :is-c-n="isZhCN" />
-              <Menu :menus="dataSource" :activeMenuItem="activeMenuItem" :isZhCN="isZhCN" />
+              <Menu :menus="dataSource" :active-menu-item="activeMenuItem" :is-zh-c-n="isZhCN" />
             </section>
           </a-affix>
         </a-col>
       </template>
       <a-col :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
         <section :class="mainContainerClass">
-          <TopAd :isCN="isZhCN" />
+          <TopAd :is-c-n="isZhCN" />
-          <Demo v-if="isDemo" :pageData="pageData" :isZhCN="isZhCN">
+          <Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">
             <component :is="matchCom" />
           </Demo>
           <router-view v-else />
-          <a-affix v-if="headers.length" class="toc-affix" :offsetTop="20">
+          <a-affix v-if="headers.length" class="toc-affix" :offset-top="20">
             <a-anchor>
               <a-anchor-link
                 v-for="h in headers"
@@ -52,8 +52,8 @@
           <a-dropdown placement="topCenter">
             <template #overlay>
               <a-menu
+                :selected-keys="[themeMode.theme.value]"
                 @click="({ key }) => themeMode.changeTheme(key)"
-                :selectedKeys="[themeMode.theme.value]"
               >
                 <a-menu-item key="default">{{ $t('app.theme.switch.default') }}</a-menu-item>
                 <a-menu-item key="dark">{{ $t('app.theme.switch.dark') }}</a-menu-item>
@@ -64,16 +64,16 @@
             </a-avatar>
           </a-dropdown>
         </div>
-        <PrevAndNext :menus="menus" :currentMenuIndex="currentMenuIndex" />
+        <PrevAndNext :menus="menus" :current-menu-index="currentMenuIndex" />
         <Footer />
       </a-col>
     </a-row>
-    <RightBottomAd :isCN="isZhCN" :isMobile="isMobile" />
+    <RightBottomAd :is-c-n="isZhCN" :is-mobile="isMobile" />
   </div>
 </template>
 <script lang="ts">
-import { GlobalConfig } from '@/App.vue';
+import type { GlobalConfig } from '../App.vue';
-import { GLOBAL_CONFIG } from '@/SymbolKey';
+import { GLOBAL_CONFIG } from '../SymbolKey';
 import { defineComponent, inject, computed, ref, provide, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import Header from './header/index.vue';
@@ -81,7 +81,7 @@ import Footer from './Footer.vue';
 import Menu from './Menu.vue';
 import PrevAndNext from './PrevAndNext.vue';
 import Demo from './Demo.vue';
-import useMenus from '@/hooks/useMenus';
+import useMenus from '../hooks/useMenus';
 import TopAd from '../components/rice/top_rice.vue';
 import Sponsors from '../components/rice/sponsors.vue';
 import RightBottomAd from '../components/rice/right_bottom_rice.vue';
@@ -90,6 +90,19 @@ import ThemeIcon from './ThemeIcon.vue';
 
 export default defineComponent({
   name: 'Layout',
+  components: {
+    TopAd,
+    Sponsors,
+    RightBottomAd,
+    Demo,
+    Header,
+    Footer,
+    Menu,
+    PrevAndNext,
+    CloseOutlined,
+    MenuOutlined,
+    ThemeIcon,
+  },
   setup() {
     const visible = ref(false);
     const route = useRoute();
@@ -122,9 +135,9 @@ export default defineComponent({
       );
     });
     const matchCom = computed(() => {
-      return route.matched[route.matched.length - 1]?.components?.default as any;
+      return route.matched[route.matched.length - 1]?.components?.default;
     });
-    const isZhCN = globalConfig!.isZhCN;
+    const isZhCN = globalConfig.isZhCN;
     const pageData = computed(() =>
       isDemo.value
         ? matchCom.value[isZhCN.value ? 'CN' : 'US']?.pageData
@@ -150,7 +163,7 @@ export default defineComponent({
     return {
       themeMode,
       visible,
-      isMobile: globalConfig!.isMobile,
+      isMobile: globalConfig.isMobile,
       isZhCN,
       mainContainerClass,
       menus,
@@ -168,19 +181,6 @@ export default defineComponent({
       },
     };
   },
-  components: {
-    TopAd,
-    Sponsors,
-    RightBottomAd,
-    Demo,
-    Header,
-    Footer,
-    Menu,
-    PrevAndNext,
-    CloseOutlined,
-    MenuOutlined,
-    ThemeIcon,
-  },
 });
 </script>
 <style lang="less" scoped>

site/src/theme/template/IconDisplay/CopyableIcon.vue

@@ -4,7 +4,7 @@
     v-clipboard:success="onCopied"
     :class="justCopied === type ? 'copied' : ''"
   >
-    <component v-bind:is="allIcons[name]"></component>
+    <component :is="allIcons[name]"></component>
     <span class="anticon-class">
       <a-badge :dot="isNew">
         {{ type }}

site/src/views/ComponentOverview.vue

@@ -17,7 +17,7 @@
       v-model:value="search"
       :placeholder="$t('app.components.overview.search')"
       class="components-overview-search"
-      autoFocus
+      auto-focus
     >
       <template #suffix>
         <SearchOutlined />
@@ -64,6 +64,9 @@ import useMenus from '@/hooks/useMenus';
 import { getLocalizedPathname } from '@/utils/util';
 export default defineComponent({
   name: 'ComponentOverview',
+  components: {
+    SearchOutlined,
+  },
   setup() {
     const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
     const search = ref('');
@@ -95,9 +98,6 @@ export default defineComponent({
       isZhCN: globalConfig?.isZhCN,
     };
   },
-  components: {
-    SearchOutlined,
-  },
 });
 </script>
 <style lang="less" src="./ComponentOverview.less"></style>

site/src/views/jobs.vue

@@ -9,21 +9,26 @@
     </h1>
     <div style="margin-top: 30px">
       <a-list item-layout="vertical" size="large" :data-source="list">
-        <a-list-item v-show="isEffective(item.effectiveTime)" slot="renderItem" slot-scope="item">
+        <template #renderItem="item">
+          <a-list-item v-show="isEffective(item.effectiveTime)">
             <a-list-item-meta>
-            <div slot="description">
+              <template #description>
+                <div>
                   <p>工作地点：{{ item.location }}</p>
                   <h3>职位描述</h3>
                   <p v-html="item.desc" />
                 </div>
-            <div slot="title">
+              </template>
+              <template #title>
+                <div>
                   <h2>
                     <a :href="item.url" target="_blank">{{ item.company }}</a>
                     <span>{{ item.title }}(岗位 ID: {{ item.id }})</span>
                   </h2>
                 </div>
+              </template>
             </a-list-item-meta>
-          <template v-slot:actions>
+            <template #actions>
               <div>
                 <a-tooltip title="发送邮件到：antdv@foxmail.com">
                   <a :href="`mailto:antdv@foxmail.com?subject=应聘 ${item.id} 职位`">
@@ -37,6 +42,7 @@
             </template>
             <p v-html="item.condition" />
           </a-list-item>
+        </template>
       </a-list>
     </div>
   </div>

site/src/views/user/login/components/Login.vue

@@ -13,12 +13,6 @@
 </template>
 <script>
 export default {
-  props: {
-    defaultActiveKey: {
-      type: String,
-      default: '',
-    },
-  },
   provide() {
     const { tabs, form } = this;
     return {
@@ -43,6 +37,12 @@ export default {
       },
     };
   },
+  props: {
+    defaultActiveKey: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       type: this.defaultActiveKey,
@@ -52,7 +52,7 @@ export default {
   },
   computed: {
     children() {
-      const children = this.$slots.default;
+      const children = this.$slots.default();
       const tabChildren = [];
       const otherChildren = [];
 

site/src/views/user/login/components/LoginTab.vue

@@ -13,16 +13,16 @@ const generateId = (() => {
 })();
 
 export default {
-  typeName: 'LoginTab', // 标志位 用来判断是不是自定义组件
+  typeName: 'LoginTab',
+  inject: {
+    loginContext: { default: () => ({ tabUtil: {} }) },
+  }, // 标志位 用来判断是不是自定义组件
   props: {
     active: Boolean,
     destroyInactiveTabPane: Boolean,
     rootPrefixCls: String,
     tab: String,
   },
-  inject: {
-    loginContext: { default: () => ({ tabUtil: {} }) },
-  },
   data() {
     return {
       uniqueId: generateId('login-tab-'),

site/vite.config.ts

@@ -4,9 +4,9 @@ import md from '../plugin/md';
 import docs from '../plugin/docs';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 // import { getThemeVariables } from 'ant-design-vue/dist/theme';
-import { additionalData } from './themeConfig';
+// import { additionalData } from './themeConfig';
 import defaultVar from '../scripts/default-vars';
-import compact from '../scripts/compact-vars';
+// import compact from '../scripts/compact-vars';
 // import dark from '../scripts/dark-vars';
 /**
  * @type {import('vite').UserConfig}