diff --git a/components/button/demo/multiple.vue b/components/button/demo/multiple.vue
index 8d6818748..53df4ef9a 100644
--- a/components/button/demo/multiple.vue
+++ b/components/button/demo/multiple.vue
@@ -34,7 +34,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 </template>
 <script lang="ts">
 import { DownOutlined } from '@ant-design/icons-vue';
-import { MenuProps } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
diff --git a/components/dropdown/demo/overlay-visible.vue b/components/dropdown/demo/overlay-visible.vue
index d9dde21ce..bc8043c12 100644
--- a/components/dropdown/demo/overlay-visible.vue
+++ b/components/dropdown/demo/overlay-visible.vue
@@ -34,7 +34,7 @@ The default is to close the menu when you click on menu items, this feature can
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { DownOutlined } from '@ant-design/icons-vue';
-import { MenuProps } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 5289c9c0f..6e1898ffd 100644
--- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -26,7 +26,7 @@ exports[`Modal render correctly 1`] = `
 
 exports[`Modal render correctly 2`] = `
 <div>
-  <div></div>
+  <div style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;" class="ant-scrolling-effect"></div>
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
diff --git a/components/table/demo/sticky.vue b/components/table/demo/sticky.vue
index 004524c05..6a52d9715 100644
--- a/components/table/demo/sticky.vue
+++ b/components/table/demo/sticky.vue
@@ -34,11 +34,12 @@ For long table，need to scroll to view the header and scroll bar，then you can
 </template>
 
 <script lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const columns = ref([
+    const columns = ref<TableColumnsType>([
       {
         title: 'Full Name',
         width: 100,
diff --git a/components/tabs/demo/editable-card.vue b/components/tabs/demo/editable-card.vue
index 9d4076ecb..ebef85a16 100644
--- a/components/tabs/demo/editable-card.vue
+++ b/components/tabs/demo/editable-card.vue
@@ -19,7 +19,7 @@ Only card type Tabs support adding & closable.
 
 <template>
   <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
-    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="!!pane.closable">
+    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
       {{ pane.content }}
     </a-tab-pane>
   </a-tabs>
diff --git a/components/transfer/demo/tree-transfer.vue b/components/transfer/demo/tree-transfer.vue
index 50ae32f02..a8cbdc0af 100644
--- a/components/transfer/demo/tree-transfer.vue
+++ b/components/transfer/demo/tree-transfer.vue
@@ -51,9 +51,9 @@ Customize render list with Tree component.
 </template>
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import type { TreeProps } from 'ant-design-vue';
+import type { TransferProps, TreeProps } from 'ant-design-vue';
 import type { AntTreeNodeCheckedEvent } from 'ant-design-vue/es/tree';
-const tData: TreeProps['treeData'] = [
+const tData: TransferProps['dataSource'] = [
   { key: '0-0', title: '0-0' },
   {
     key: '0-1',
@@ -66,8 +66,8 @@ const tData: TreeProps['treeData'] = [
   { key: '0-2', title: '0-3' },
 ];
 
-const transferDataSource: TreeProps['treeData'] = [];
-function flatten(list: TreeProps['treeData'] = []) {
+const transferDataSource: TransferProps['dataSource'] = [];
+function flatten(list: TransferProps['dataSource'] = []) {
   list.forEach(item => {
     transferDataSource.push(item);
     flatten(item.children);
@@ -79,26 +79,23 @@ function isChecked(selectedKeys: (string | number)[], eventKey: string | number)
   return selectedKeys.indexOf(eventKey) !== -1;
 }
 
-function handleTreeData(
-  data: TreeProps['treeData'],
-  targetKeys: string[] = [],
-): TreeProps['treeData'] {
+function handleTreeData(data: TransferProps['dataSource'], targetKeys: string[] = []) {
   data.forEach(item => {
     item['disabled'] = targetKeys.includes(item.key as any);
     if (item.children) {
       handleTreeData(item.children, targetKeys);
     }
   });
-  return data;
+  return data as TreeProps['treeData'];
 }
 
 export default defineComponent({
   setup() {
     const targetKeys = ref<string[]>([]);
 
-    const dataSource = ref<TreeProps['treeData']>(transferDataSource);
+    const dataSource = ref(transferDataSource);
 
-    const treeData = computed<TreeProps['treeData']>(() => {
+    const treeData = computed(() => {
       return handleTreeData(tData, targetKeys.value);
     });
 
diff --git a/components/tree/demo/dynamic.vue b/components/tree/demo/dynamic.vue
index bcded36dd..4a0159ab2 100644
--- a/components/tree/demo/dynamic.vue
+++ b/components/tree/demo/dynamic.vue
@@ -38,8 +38,8 @@ export default defineComponent({
       { title: 'Expand to load', key: '1' },
       { title: 'Tree Node', key: '2', isLeaf: true },
     ]);
-    const onLoadData = (treeNode: any) => {
-      return new Promise((resolve: (value?: unknown) => void) => {
+    const onLoadData: TreeProps['loadData'] = treeNode => {
+      return new Promise(resolve => {
         if (treeNode.dataRef.children) {
           resolve();
           return;
diff --git a/site/debugger/demo/demo.vue b/site/debugger/demo/demo.vue
index 61c07f278..aef1ca53b 100644
--- a/site/debugger/demo/demo.vue
+++ b/site/debugger/demo/demo.vue
@@ -2,127 +2,55 @@
 ---
 order: 0
 title:
-  en-US: Basic Usage
   zh-CN: 基本用法
+  en-US: Basic usage
 ---
 
 ## zh-CN
 
-简单的表格，最后一列是各种操作。
+第一个对话框。
 
 ## en-US
 
-Simple table with actions.
+Basic modal.
+
 </docs>
 
 <template>
-  <a-table :columns="columns" :data-source="data">
-    <template #headerCell="{ title, column }">
-      <template v-if="column.key === 'name'">
-        <span>
-          <smile-outlined />
-          Name
-        </span>
-      </template>
-      <template v-else>{{ title }}</template>
-    </template>
-
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'name'">
-        <a>
-          {{ record.name }}
-        </a>
-      </template>
-      <template v-else-if="column.key === 'tags'">
-        <span>
-          <a-tag
-            v-for="tag in record.tags"
-            :key="tag"
-            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-          >
-            {{ tag.toUpperCase() }}
-          </a-tag>
-        </span>
-      </template>
-      <template v-else-if="column.key === 'action'">
-        <span>
-          <a>Invite 一 {{ record.name }}</a>
-          <a-divider type="vertical" />
-          <a>Delete</a>
-          <a-divider type="vertical" />
-          <a class="ant-dropdown-link">
-            More actions
-            <down-outlined />
-          </a>
-        </span>
-      </template>
-      <template v-else>{{ record.name }}</template>
-    </template>
-  </a-table>
+  <div>
+    <div ref="container"></div>
+    <a-button type="primary" @click="showModal">Open Modal</a-button>
+    <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </a-modal>
+  </div>
 </template>
 <script lang="ts">
-import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
-import { defineComponent } from 'vue';
-const columns = [
-  {
-    name: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-  },
-  {
-    title: 'Action',
-    key: 'action',
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
-
+import { defineComponent, ref } from 'vue';
 export default defineComponent({
-  components: {
-    SmileOutlined,
-    DownOutlined,
-  },
   setup() {
+    const visible = ref<boolean>(false);
+
+    const showModal = () => {
+      visible.value = true;
+    };
+
+    const handleOk = (e: MouseEvent) => {
+      console.log(e);
+      visible.value = false;
+    };
+    const container = ref();
     return {
-      data,
-      columns,
+      container,
+      visible,
+      showModal,
+      handleOk,
+      getContainer() {
+        console.log('container', container.value);
+        return container.value;
+      },
     };
   },
 });
diff --git a/site/src/components/api.vue b/site/src/components/api.vue
deleted file mode 100644
index 85783a8a4..000000000
--- a/site/src/components/api.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="markdown api-container">
-    <google-ads v-if="showAd" />
-    <slot v-if="isZhCN" name="cn" />
-    <slot v-else />
-  </div>
-</template>
-<script lang="ts">
-import { isZhCN } from '../utils/util';
-import GoogleAds from './rice/GoogleAds.vue';
-import { inject } from 'vue';
-
-const showAd = location.host.indexOf('antdv.com') > -1;
-export default {
-  name: 'Api',
-  components: {
-    GoogleAds,
-  },
-  setup() {
-    return {
-      demoContext: inject('demoContext', {}),
-    };
-  },
-  data() {
-    return {
-      showAd,
-      isZhCN: isZhCN(this.demoContext.name),
-    };
-  },
-};
-</script>
diff --git a/site/src/components/demoSort.jsx b/site/src/components/demoSort.jsx
index f0ac301df..3d02b34bb 100644
--- a/site/src/components/demoSort.jsx
+++ b/site/src/components/demoSort.jsx
@@ -10,7 +10,6 @@ export default defineComponent({
   },
   setup() {
     return {
-      demoContext: inject('demoContext', {}),
       globalConfig: inject(GLOBAL_CONFIG),
     };
   },
diff --git a/site/src/components/rice/geektime_ads.vue b/site/src/components/rice/geektime_ads.vue
index e23e4b8d2..b03b2a35a 100644
--- a/site/src/components/rice/geektime_ads.vue
+++ b/site/src/components/rice/geektime_ads.vue
@@ -16,25 +16,26 @@
 <script lang="ts">
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
+import { defineComponent } from 'vue';
 dayjs.extend(isBetween);
 
-export default {
-  props: ['isMobile'],
-  data() {
+export default defineComponent({
+  props: {
+    isMobile: Boolean,
+  },
+  setup() {
     return {
       visible: true,
       effectiveTime: {
         start: '2019-08-05 17:00:00',
         end: '2019-09-05 17:00:00',
       },
+      isEffective({ start, end }) {
+        return dayjs().isBetween(start, end);
+      },
     };
   },
-  methods: {
-    isEffective({ start, end }) {
-      return dayjs().isBetween(start, end);
-    },
-  },
-};
+});
 </script>
 
 <style lang="less" scoped>