diff --git a/devui/accordion/index.ts b/devui/accordion/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c97a7600d257739b338cf5bca265ef5b3e4d4d0
--- /dev/null
+++ b/devui/accordion/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Accordion from './accordion'
+
+Accordion.install = function(Vue: App) {
+  Vue.component(Accordion.name, Accordion)
+};
+
+Accordion.version = '0.0.1'
+
+export default Accordion
diff --git a/devui/alert/index.ts b/devui/alert/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b42151caa65cf34f066d86aa1aedf7bcb4e0301e
--- /dev/null
+++ b/devui/alert/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Alert from './alert'
+
+Alert.install = function(Vue: App) {
+  Vue.component(Alert.name, Alert)
+};
+
+Alert.version = '0.0.1'
+
+export default Alert
diff --git a/devui/anchor/index.ts b/devui/anchor/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1be341a8e10604ea021db8e2d0e749afbd856e5c
--- /dev/null
+++ b/devui/anchor/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Anchor from './anchor'
+
+Anchor.install = function(Vue: App) {
+  Vue.component(Anchor.name, Anchor)
+};
+
+Anchor.version = '0.0.1'
+
+export default Anchor
diff --git a/devui/avatar/index.ts b/devui/avatar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95cc4267efc4b5e6247cd406abd1f6a58e5e0e9d
--- /dev/null
+++ b/devui/avatar/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Avatar from './avatar'
+
+Avatar.install = function(Vue: App) {
+  Vue.component(Avatar.name, Avatar)
+};
+
+Avatar.version = '0.0.1'
+
+export default Avatar
diff --git a/devui/button/index.ts b/devui/button/index.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..237c5102e976bff08ba43ad82dd1d6a63a5bf7b2 100644
--- a/devui/button/index.ts
+++ b/devui/button/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Button from './button'
+
+Button.install = function(Vue: App) {
+  Vue.component(Button.name, Button)
+};
+
+Button.version = '0.0.1'
+
+export default Button
diff --git a/devui/card/index.ts b/devui/card/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7eb08522bac21c6180a43df21d8ba9ca1dbfbfc1
--- /dev/null
+++ b/devui/card/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Card from './card'
+
+Card.install = function(Vue: App) {
+  Vue.component(Card.name, Card)
+};
+
+Card.version = '0.0.1'
+
+export default Card
diff --git a/devui/carousel/index.ts b/devui/carousel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a01d52afb111358681e3034d593abf682ab3472
--- /dev/null
+++ b/devui/carousel/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Carousel from './carousel'
+
+Carousel.install = function(Vue: App) {
+  Vue.component(Carousel.name, Carousel)
+};
+
+Carousel.version = '0.0.1'
+
+export default Carousel
diff --git a/devui/checkbox/index.ts b/devui/checkbox/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f63d359e37c506f3ed090deb455405820c63bba1
--- /dev/null
+++ b/devui/checkbox/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Checkbox from './src/checkbox'
+
+Checkbox.install = function(Vue: App) {
+  Vue.component(Checkbox.name, Checkbox)
+};
+
+Checkbox.version = '0.0.1'
+
+export default Checkbox
diff --git a/devui/icon/index.ts b/devui/icon/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aedc16ad9af5ad8675d2fefa6466335c5c96288f
--- /dev/null
+++ b/devui/icon/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Icon from './src/icon'
+
+Icon.install = function(Vue: App) {
+  Vue.component(Icon.name, Icon)
+};
+
+Icon.version = '0.0.1'
+
+export default Icon
diff --git a/devui/panel/index.ts b/devui/panel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a5e6113689b03d835eba59021df21aea29565996
--- /dev/null
+++ b/devui/panel/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Panel from './panel'
+
+Panel.install = function(Vue: App) {
+  Vue.component(Panel.name, Panel)
+};
+
+Panel.version = '0.0.1'
+
+export default Panel
diff --git a/devui/radio/index.ts b/devui/radio/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e6500eea786d07d669908ab4fa6be5c831e3a75
--- /dev/null
+++ b/devui/radio/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Radio from './src/radio'
+
+Radio.install = function(Vue: App) {
+  Vue.component(Radio.name, Radio)
+};
+
+Radio.version = '0.0.1'
+
+export default Radio
diff --git a/devui/search/index.ts b/devui/search/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..197e0c2cb2d55feac2b3ec321727f8f1b15b04b1
--- /dev/null
+++ b/devui/search/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Search from './search'
+
+Search.install = function(Vue: App) {
+  Vue.component(Search.name, Search)
+};
+
+Search.version = '0.0.1'
+
+export default Search
diff --git a/devui/switch/index.ts b/devui/switch/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec8e8efe2b629724cc49d8e8f24655faf75f0ad0
--- /dev/null
+++ b/devui/switch/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Switch from './src/switch'
+
+Switch.install = function(Vue: App) {
+  Vue.component(Switch.name, Switch)
+};
+
+Switch.version = '0.0.1'
+
+export default Switch
diff --git a/devui/tabs/index.ts b/devui/tabs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a1e89a351f6f02ae51da49509034ac7d673e75b
--- /dev/null
+++ b/devui/tabs/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Tabs from './tabs'
+
+Tabs.install = function(Vue: App) {
+  Vue.component(Tabs.name, Tabs)
+};
+
+Tabs.version = '0.0.1'
+
+export default Tabs
diff --git a/devui/tags-input/index.ts b/devui/tags-input/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f055ddea856396f3d073fc591eb0a53bad92727e
--- /dev/null
+++ b/devui/tags-input/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import TagsInput from './src/tags-input'
+
+TagsInput.install = function(Vue: App) {
+  Vue.component(TagsInput.name, TagsInput)
+};
+
+TagsInput.version = '0.0.1'
+
+export default TagsInput
diff --git a/devui/text-input/index.ts b/devui/text-input/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4a68f956771b742e4b25b947af484eb95c3bd935
--- /dev/null
+++ b/devui/text-input/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import TextInput from './src/text-input'
+
+TextInput.install = function(Vue: App) {
+  Vue.component(TextInput.name, TextInput)
+};
+
+TextInput.version = '0.0.1'
+
+export default TextInput
diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts
index e13a3207801a3e8b37e55f882b506f3a7e709625..009113da50a79204110c000d7ead26df9f6c6c31 100644
--- a/devui/vue-devui.ts
+++ b/devui/vue-devui.ts
@@ -1,40 +1,30 @@
 import { App } from 'vue';
 
 // 通用
-import Button from './button/button';
-import Icon from './icon/src/icon';
-import Panel from './panel/panel';
+import Button from './button';
+import Icon from './icon';
+import Panel from './panel';
 
 // 导航
-import Tabs from './tabs/tabs';
+import Tabs from './tabs';
 
 // 反馈
-import Alert from './alert/alert';
+import Alert from './alert';
 
 // 数据录入
-import Checkbox from './checkbox/src/checkbox';
-import Radio from './radio/src/radio';
-import Switch from './switch/src/switch';
-import TagsInput from './tags-input/src/tags-input';
-import TextInput from './text-input/src/text-input';
+import Checkbox from './checkbox';
+import Radio from './radio';
+import Switch from './switch';
+import TagsInput from './tags-input';
+import TextInput from './text-input';
 
 // 数据展示
-import Avatar from './avatar/avatar';
-import Carousel from './carousel/carousel';
-import CarouselItem from './carousel/item';
+import Avatar from './avatar';
+import Carousel from './carousel';
 
-function install(app: App) {
-  const packages = [
-    Button, Icon, Panel,
-    Tabs,
-    Alert,
-    Checkbox, Radio, Switch, TagsInput, TextInput,
-
-    Avatar,
-    Carousel,
-    CarouselItem,
-  ];
-  packages.forEach((item:any) => {
+function install(app: App): void {
+  const packages = [ Button, Icon, Panel, Tabs, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, Carousel ];
+  packages.forEach((item: any) => {
     if (item.install) {
       app.use(item);
     } else if (item.name) {
@@ -43,18 +33,5 @@ function install(app: App) {
   });
 }
 
-export {
-  Button, Icon, Panel,
-
-  Tabs,
-
-  Alert,
-
-  Checkbox, Radio, Switch, TagsInput, TextInput,
-
-  Avatar,
-  Carousel,
-  CarouselItem,
-};
-
-export default { install, version: '0.0.1' };
+export { Button, Icon, Panel, Tabs, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, Carousel };
+export default { install, version: '0.0.1' };
\ No newline at end of file
diff --git a/package.json b/package.json
index bbac5659838fef1d880ebfcd804efa2e8d1ed189..394425958b56d79e8e41ddabe2b47aece1aa18ba 100644
--- a/package.json
+++ b/package.json
@@ -19,19 +19,20 @@
   "module": "vue-devui.es.js",
   "style": "style.css",
   "scripts": {
-    "docs:dev": "vitepress dev sites",
-    "docs:build": "vitepress build sites",
-    "docs:serve": "vitepress serve sites",
-    "dev": "vite",
-    "build": "vite build",
-    "build:lib": "vite build --config vite.config.build.ts && cp package.json dist && cp README.md dist",
+    "dev": "vitepress dev sites",
+    "build": "vitepress build sites",
+    "serve": "vitepress serve sites",
+    "app:dev": "vite",
+    "app:build": "vite build",
+    "build:lib": "yarn run generate:devui && vite build --config vite.config.build.ts && cp package.json dist && cp README.md dist",
     "test": "jest --config jest.config.js",
     "ls-lint": "ls-lint",
     "lint": "eslint \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
     "lint:fix": "eslint --fix \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
     "stylelint": "stylelint --fix \"{devui,src}/**/*.{scss,css}\"",
     "convert:route": "node ./scripts/convert-component-route.js",
-    "publish": "cd dist && npm publish"
+    "publish": "cd dist && npm publish",
+    "generate:devui": "node scripts/generate-devui.js"
   },
   "dependencies": {
     "@devui-design/icons": "^1.3.0",
@@ -74,7 +75,8 @@
     "vite": "^2.4.4",
     "vite-plugin-md": "^0.6.0",
     "vitepress": "^0.15.6",
-    "vue-tsc": "^0.2.2"
+    "vue-tsc": "^0.2.2",
+    "yarn": "^1.22.11"
   },
   "husky": {
     "hooks": {
diff --git a/scripts/generate-devui.js b/scripts/generate-devui.js
new file mode 100644
index 0000000000000000000000000000000000000000..34976e1a6281aae361cf4a6f33933aa84b0b37ff
--- /dev/null
+++ b/scripts/generate-devui.js
@@ -0,0 +1,47 @@
+require('esbuild-register');
+
+const path = require('path');
+const fs = require('fs-extra');
+
+const config = require('../sites/.vitepress/config/sidebar').default;
+console.log('config:', config);
+
+let importStr = `import { App } from 'vue';\n\n`;
+const components = [];
+
+config['/'].forEach(({ text: ctext, children }) => {
+  if (ctext !== '快速开始') {
+    importStr += `// ${ctext}\n`;
+    console.log('ctext:', ctext);
+    console.log('children:', children);
+    children && children.forEach(({ text, link }) => {
+      const name = text.split(' ')[0];
+      const linkItem = link.split('/').filter(item => item);
+      const filename = linkItem[1];
+      importStr += `import ${name} from './${filename}';\n`;
+      components.push(name);
+    })
+    importStr += `\n`;
+  }
+});
+
+const componentStr = components.join(', ');
+
+let installStr = `function install(app: App): void {
+  const packages = [ ${componentStr} ];
+  packages.forEach((item: any) => {
+    if (item.install) {
+      app.use(item);
+    } else if (item.name) {
+      app.component(item.name, item);
+    }
+  });
+}\n\n`;
+
+const exportStr = `export { ${componentStr} };
+export default { install, version: '0.0.1' };`;
+
+const fileStr = importStr + installStr + exportStr;
+
+const targetFile = path.resolve(__dirname, '../devui/vue-devui.ts');
+fs.outputFile(targetFile, fileStr, 'utf8');
diff --git a/src/app.route.ts b/src/app.route.ts
deleted file mode 100644
index 0eb527c6fb524137a5b0072e3ef3ed9b6fc14146..0000000000000000000000000000000000000000
--- a/src/app.route.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import AppContentRoutes from './components/component.route'
-import AppContent from './components/app-content.vue'
-
-const routerHistory = createWebHistory()
-
-const router = createRouter({
-  history: routerHistory,
-  routes: [
-    {
-      path: '/',
-      redirect: '/components'
-    },
-    {
-      path: '/components',
-      component: AppContent,
-      children: AppContentRoutes
-    }
-  ]
-})
-
-export default router
diff --git a/src/app.vue b/src/app.vue
index 61262d06f7c9efc942c1dc8d0c5b1e0547e86fe0..76ccddf536fbf4e584fccc3c8b392789d0c2ce8c 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,698 +1,22 @@
 <template>
-  <div class="app-container">
-    <div class="app-bar">
-      <header>
-        <h1 class="title">
-          <a target="_self" href="/home">
-            <span class="logo">
-              <svg
-                width="26px"
-                height="26px"
-                viewBox="0 0 26 26"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <linearGradient id="linearGradient-1" x1="89.5364583%" y1="21.60078%" x2="7.57349918%" y2="65.7395747%">
-                    <stop stop-color="#2954C8" offset="0%" />
-                    <stop stop-color="#5170FF" offset="100%" />
-                  </linearGradient>
-                  <linearGradient id="linearGradient-2" x1="89.5364583%" y1="21.4573588%" x2="7.57349918%" y2="65.8190624%">
-                    <stop stop-color="#2954C8" offset="0%" />
-                    <stop stop-color="#5170FF" offset="100%" />
-                  </linearGradient>
-                  <linearGradient id="linearGradient-3" x1="-11.5260417%" y1="24.3907324%" x2="87.1145833%" y2="74.8850926%">
-                    <stop stop-color="#89D2FF" offset="0%" />
-                    <stop stop-color="#5170FF" offset="100%" />
-                  </linearGradient>
-                  <linearGradient id="linearGradient-4" x1="0%" y1="18.4813953%" x2="75.9513522%" y2="81.5186047%">
-                    <stop stop-color="#89D2FF" offset="0%" />
-                    <stop stop-color="#5170FF" offset="100%" />
-                  </linearGradient>
-                </defs>
-                <g id="Devui-Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                  <g id="Group-2" transform="translate(3.000000, 0.000000)">
-                    <g>
-                      <path
-                        id="Path-39-Copy-3"
-                        d="M4.28576801,9.22873192 L9.32098286,6.02205882 L13.1143389,8.49673203 L0.010890596,17.0193525 L0.010890596,17.0193525 C0.010890596,13.8625823 1.62310848,10.9244448 4.28576801,9.22873192 Z"
-                        fill="url(#linearGradient-1)"
-                      />
-                      <path
-                        id="Path-39-Copy-2"
-                        d="M8.76945593,17.4828869 L14.1939212,14.0196078 L18.2867527,16.6963836 L4.14882163,25.9150327 L4.14882163,25.9150327 C4.14882163,22.4998846 5.89095741,19.3206798 8.76945593,17.4828869 Z"
-                        fill="url(#linearGradient-2)"
-                        transform="translate(11.217787, 19.967320) scale(-1, 1) translate(-11.217787, -19.967320) "
-                      />
-                      <path
-                        id="Path-38-Copy-3"
-                        d="M0.183304389,2.48689958e-13 L13.1143389,8.49673203 L9.42310099,10.9017055 L9.42310099,10.9017055 C4.36778167,11.0371959 0.159798979,7.04888649 0.0243085926,1.99356717 C0.00937841938,1.43650334 0.0453320846,0.879239543 0.13172203,0.32871271 L0.183304389,2.48689958e-13 Z"
-                        fill="url(#linearGradient-3)"
-                      />
-                      <path
-                        id="Path-38-Copy-2"
-                        d="M4.54131151,6.55708742 L19.8945577,16.6535948 L16.2033199,19.0585682 L11.1830136,17.9470593 C6.34348625,16.8755752 3.2888836,12.0837536 4.36036765,7.24422626 C4.41158805,7.01288123 4.47194996,6.78365535 4.54131151,6.55708742 L4.54131151,6.55708742 Z"
-                        fill="url(#linearGradient-4)"
-                        transform="translate(12.021690, 12.807828) scale(-1, 1) translate(-12.021690, -12.807828) "
-                      />
-                    </g>
-                  </g>
-                </g>
-              </svg>
-            </span>
-            <span class="text">Vue DevUI</span>
-          </a>
-        </h1>
-        <div class="main-nav">
-          <a class="main-nav-item" target="_self" href="/design-cn">
-            <span>设计体系</span>
-          </a>
-          <a class="main-nav-item" routerLink="components">
-            <span>组件</span>
-          </a>
-          <a class="main-nav-item" target="_self" href="/icon">
-            <span>图标库</span>
-          </a>
-          <a
-            class="main-nav-item"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/DevCloudFE/ng-devui/releases"
-          >
-            <span>版本历程</span>
-          </a>
-          <span class="main-nav-item">
-            <!-- TODO: 版本下拉框 d-select -->
-          </span>
-          <span class="main-nav-item">
-            <!-- TODO: 主题选择器 d-dropdown -->
-          </span>
-        </div>
-        <div id="headerMenu" class="header-menu">
-          <span />
-        </div>
-      </header>
-    </div>
-    <!-- <app-content></app-content> -->
-    <router-view />
-  </div>
+  Vue DevUI
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-// import AppContent from './components/app-content.vue'
 
 export default defineComponent({
   name: 'App',
-  components: {
-    // AppContent,
-  },
-  methods: {
-  }
 })
 </script>
 
-<style lang="scss">
-@import './assets/styles.scss';
-@import '../devui/style/devui';
-@import '../devui/style/theme/color';
-@import '../devui/style/core/font';
-
-body {
-  background: $devui-base-bg;
-}
-
-@mixin menu() {
-  position: fixed;
-  display: block;
-  font-size: $devui-font-size;
-  z-index: 5;
-  width: 4em;
-  height: 4em;
-  padding: 1em;
-  transition: all 0.2s ease-out;
-
-  span {
-    position: relative;
-    display: block;
-    margin-top: 0.9em;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: -0.55em;
-      content: ' ';
-    }
-
-    &::after {
-      top: 0.55em;
-    }
-
-    &,
-    &::before,
-    &::after {
-      background-color: $devui-text;
-      width: 100%;
-      height: 0.2em;
-      transition: all 0.4s;
-    }
-  }
-
-  &.active span {
-    background: transparent;
-
-    &::before {
-      transform: rotate(45deg) translate(0.5em, 0.4em);
-    }
-
-    &::after {
-      transform: rotate(-45deg) translate(0.4em, -0.3em);
-    }
-  }
-}
-
-.app-container {
-  display: flex;
-  flex-direction: column;
-  transform: none;
-
-  .app-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
-  }
-
-  a.main-nav-item {
-    cursor: pointer;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 50px;
-    background: $devui-base-bg;
-    box-shadow: 0 2px 4px 0 $devui-shadow;
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      line-height: $line-height-base;
-      color: $devui-text;
-      text-decoration: none;
-    }
-
-    a:hover,
-    a:focus {
-      color: $devui-text;
-      text-decoration: none;
-    }
-  }
-
-  h1.title {
-    font-size: $devui-font-size-page-title;
-    margin: 0;
-    font-weight: $font-title-weight;
-    padding: 9px 20px;
-    box-sizing: border-box;
-
-    .logo,
-    .text {
-      display: inline-block;
-      vertical-align: top;
-    }
-
-    .logo {
-      margin-right: 6px;
-      line-height: 1;
-    }
-
-    .ui {
-      font-weight: normal;
-    }
-
-    a:hover {
-      text-decoration: none;
-    }
-
-    .internal {
-      font-size: small;
-      background-color: #5e7ce0;
-      color: white;
-      margin-left: 5px;
-      font-weight: normal;
-      line-height: 10px;
-      display: inline-block;
-      padding: 3px 4px 0;
-    }
-  }
-
-  .main-nav {
-    display: flex;
-    justify-content: flex-end;
-    margin-right: 20px;
-  }
-
-  .header-menu {
-    right: 5px;
-    @include menu();
-
-    display: none;
-
-    span {
-      &,
-      &::before,
-      &::after {
-        background: $devui-text;
-      }
-    }
-  }
-
-  .main-nav-item {
-    display: flex;
-    align-items: center;
-    padding: 5px 0;
-    margin: 0 12px;
-    color: $devui-text;
-    cursor: pointer;
-
-    & > span {
-      font-size: $devui-font-size-page-title;
-      line-height: $line-height-base;
-    }
-
-    &.version-label {
-      cursor: default;
-
-      &:hover,
-      &:focus {
-        color: inherit;
-      }
-    }
-
-    &.language {
-      cursor: pointer;
-      min-width: 50px;
-      text-align: center;
-
-      &:hover {
-        color: inherit;
-        background: $devui-list-item-hover-bg;
-      }
-    }
-  }
-
-  a.main-nav-item {
-    &:hover {
-      text-decoration: none;
-      color: $devui-list-item-hover-text;
-    }
-
-    &:active,
-    &:focus {
-      color: $devui-brand;
-    }
-  }
-
-  .wrapper {
-    position: absolute;
-    top: 50px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .sidebar {
-      box-sizing: border-box;
-      position: fixed;
-      top: 120px;
-      bottom: 0;
-      left: 0;
-      width: 240px;
-      margin-left: -240px;
-      border-right: 1px solid $devui-dividing-line;
-      height: 100%;
-      overflow-y: hidden;
-      z-index: 2;
-      background: $devui-base-bg;
-      transition: all 0.2s ease-out;
-
-      &:hover {
-        overflow-y: auto;
-      }
-    }
-
-    .menu-link {
-      left: 0;
-      background: rgba(#000000, 0.7);
-      @include menu();
-    }
-
-    .doc-viewer-container {
-      width: 100%;
-      margin-left: 0;
-      transition: all 0.2s ease-out;
-
-      .main {
-        width: 100%;
-        padding: 0 20px;
-      }
-    }
-
-    &.active {
-      .sidebar {
-        overflow-y: auto;
-        left: 240px;
-      }
-
-      .devui-components-search {
-        margin-left: 0;
-      }
-
-      .doc-viewer-container {
-        margin-left: 240px;
-      }
-
-      .menu-link {
-        left: 240px;
-      }
-    }
-  }
-
-  .tabNav {
-    text-decoration: none;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  .side-nav {
-    background: $devui-base-bg;
-    padding-bottom: 144px;
-
-    ul {
-      margin: 0;
-    }
-
-    .panel-body {
-      padding: 0;
-      background-color: $devui-base-bg;
-    }
-
-    .panel-title {
-      font-size: $devui-font-size;
-      font-weight: normal;
-      color: $devui-placeholder;
-      margin: 0;
-      position: relative;
-      height: 40px;
-      display: flex;
-      align-items: center;
-
-      span {
-        @include font-content();
-      }
-    }
-
-    .panel > .panel-heading,
-    .panel.panel-default > .panel-heading {
-      background: $devui-base-bg;
-      padding-left: 20px;
-    }
-
-    .panel {
-      box-shadow: none;
-    }
-
-    [class*='panel-'] > .panel-heading {
-      cursor: pointer;
-
-      &:hover {
-        color: $devui-list-item-hover-text;
-      }
-    }
-
-    .panel-group .panel-heading + .panel-collapse > .panel-body {
-      border: none;
-    }
-  }
-}
-
-.devui-menu {
-  outline: none;
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-  z-index: 1050;
-  background: $devui-base-bg;
-}
-
-.devui-menu-item {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  padding-left: 20px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-
-  &:not(.devui-menu-item-selected):hover {
-    background-color: $devui-list-item-hover-bg;
-  }
-}
-
-.devui-menu-item > a {
-  @include font-content();
-
-  display: block;
-  color: $devui-text;
-  text-decoration: none;
-}
-
-.devui-menu-item-selected {
-  color: $devui-brand;
-  background-color: $devui-list-item-selected-bg;
-  border-right: 2px solid $devui-brand;
-
-  a {
-    color: inherit;
-  }
-}
-
-.main {
-  .docs-header {
-    & > h1 {
-      @include font-title();
-
-      margin: 1em 0;
-    }
-
-    h3 {
-      @include font-title($devui-font-size-card-title);
-    }
-  }
-}
-
-.demo-container {
-  position: relative;
-  padding-bottom: 30px;
-  margin-top: 20px;
-}
-
-.demo-content {
-  margin-right: 200px;
-}
-
-.demo-example {
-  margin-bottom: 20px;
-}
-
-.demo-nav {
-  position: absolute;
-  height: 100%;
-  top: 0;
-  right: 0;
-  width: 150px;
-  line-height: 24px;
-}
-
-.demo-nav .items {
-  margin-top: 10px;
-  cursor: pointer;
-}
-
-.demo-nav .items > li:hover {
-  color: $devui-brand;
-}
-
-.demo-nav-active {
-  color: $devui-brand;
-}
-
-.demo-title {
-  @include font-title($devui-font-size-card-title);
-
-  color: $devui-text;
-  margin-bottom: 10px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-}
-
-.demo-text {
-  @include font-content();
-
-  color: $devui-text;
-}
-
-.readme {
-  .hljs {
-    background: transparent;
-  }
-
-  pre {
-    background-color: $devui-base-bg;
-    border: none;
-
-    code {
-      border: 1px solid $devui-dividing-line;
-      overflow-x: auto;
-    }
-  }
-
-  p {
-    margin: 1em 0;
-  }
-}
-
-@media (max-width: 1024px) {
-  .app-container {
-    .header-menu {
-      display: block;
-    }
-
-    header {
-      flex-direction: column;
-      justify-items: center;
-
-      .main-nav {
-        display: none;
-      }
-
-      &.active {
-        height: 100%;
-
-        .main-nav {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          margin-left: 20px;
-        }
-      }
-    }
-  }
-}
-
-@media (min-width: 1024px) {
-  .app-container .wrapper {
-    .sidebar {
-      left: 240px;
-    }
-
-    .devui-components-search {
-      margin-left: 0;
-    }
-
-    .doc-viewer-container {
-      margin-left: 240px;
-      width: calc(100% - 240px);
-
-      .main {
-        padding: 0 60px;
-      }
-    }
-
-    .menu-link {
-      display: none;
-    }
-  }
-}
-
-@media (min-width: 1280px) {
-  .app-container .wrapper {
-    .doc-viewer-container {
-      .main {
-        padding: 0 20%;
-      }
-    }
-  }
-}
-
-.main-nav-item .show-themable {
-  display: none;
-  display: var(--iehack, flex);
-  align-items: center;
-
-  d-select,
-  d-switch {
-    margin-right: 5px;
-  }
-}
-
-.demo-example.active.anchor-active-by-anchor-link,
-.demo-example.active.anchor-active-by-fragment {
-  animation: hightlight-and-disapear 1 3s linear;
-  outline-offset: 8px;
-}
-
-@keyframes hightlight-and-disapear {
-  0% {
-    outline: invert none medium;
-  }
-
-  2% {
-    outline: 0 none rgba(255, 255, 255, 0);
-  }
-
-  10% {
-    outline: 1px dashed $devui-brand;
-  }
-
-  50% {
-    outline: 1px dashed $devui-brand;
-  }
-
-  90% {
-    outline: 1px dashed rgba(255, 255, 255, 0);
-  }
-
-  99% {
-    outline: 0 none rgba(255, 255, 255, 0);
-  }
-
-  100% {
-    outline: invert none medium;
-  }
-}
-
-.side-nav d-accordion d-accordion-list d-accordion-menu .devui-accordion-open-icon {
-  display: none !important;
-}
-
-.side-nav d-accordion d-accordion-list {
-  box-shadow: none !important;
-}
-
-.devui-components-search {
-  padding: 24px 0 24px 16px;
-  position: fixed;
-  margin-left: -240px;
-  transition: margin-left 0.2s;
-
-  d-search {
-    width: 215px;
-  }
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/assets/styles.scss b/src/assets/styles.scss
deleted file mode 100755
index bf47d33d9ea8876d687f390c334fd62abcb48afd..0000000000000000000000000000000000000000
--- a/src/assets/styles.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-@import '../devui/style/devui';
-// @import '~@devui-design/icons/icomoon/devui-icon.css';
-@import '../devui/style/theme/_font';
-
-.markdown {
-  color: $devui-text;
-  font-size: $devui-font-size-page-title;
-  line-height: 1.8;
-
-  a {
-    color: $devui-link;
-
-    &:hover {
-      color: $devui-link-active;
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-}
-
-.highlight {
-  line-height: 1.5;
-  position: relative;
-}
-
-code[class*='language-'],
-pre[class*='language-'],
-pre code {
-  white-space: pre;
-  font-family: Lucida Console, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
-}
-
-pre {
-  display: block;
-  margin: 0 0 10px;
-  line-height: 1.42857143;
-  color: $devui-text;
-  word-break: break-all;
-  word-wrap: break-word;
-  border: 1px solid $devui-dividing-line;
-  border-radius: 1px;
-}
-
-.hljs {
-  background: $devui-area;
-  color: $devui-text;
-  font-size: $devui-font-size;
-}
-
-pre code {
-  display: block;
-  color: $devui-text;
-  background: $devui-base-bg;
-  line-height: 1.5;
-  padding: 10px 15px;
-  border-radius: 4px;
-  overflow-x: auto;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: Consolas, Menlo, Courier, monospace;
-}
-
-section {
-  margin-bottom: 0 !important;
-}
-
-.markdown {
-  width: 100%;
-  display: block;
-  overflow-x: auto;
-
-  table {
-    font-size: $devui-font-size;
-  }
-
-  p {
-    margin: 1em 0;
-  }
-
-  a code {
-    text-decoration: underline;
-  }
-
-  pre code {
-    font-size: $devui-font-size;
-    padding: 0.5em;
-    background-color: $devui-area;
-  }
-}
-
-.markdown table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  empty-cells: show;
-  border: 1px solid $devui-line;
-  width: 100%;
-  margin: 8px 0 16px;
-
-  th,
-  td {
-    border: 1px solid $devui-dividing-line;
-    padding: 8px 16px;
-    text-align: left;
-  }
-
-  th {
-    background: $devui-area;
-    white-space: nowrap;
-    color: $devui-text;
-    font-weight: 600;
-  }
-}
-
-.markdown h2 {
-  font-size: 22px;
-}
-
-.markdown h3 {
-  font-size: 18px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: $devui-text;
-  margin: 1.6em 0 0.6em;
-  font-weight: 500;
-  clear: both;
-}
-
-code {
-  padding: 2px 4px;
-  // font-size: 90%;
-  color: #c7254e;
-  background-color: $devui-area;
-  border-radius: 1px;
-}
-
-.readme {
-  h1 {
-    // font-size: 30px;
-    @include font-title();
-
-    padding: 20px 0;
-  }
-
-  h2 {
-    // font-size: 24px;
-    @include font-title($devui-font-size-card-title);
-
-    padding: 40px 0 15px;
-  }
-
-  h3 {
-    // font-size: 18px;
-    @include font-title($devui-font-size-card-title);
-
-    padding: 30px 0 10px;
-  }
-
-  h1,
-  h2,
-  h3 {
-    // font-weight: 300;
-    margin: 0;
-  }
-
-  pre code {
-    padding: 0.5em;
-  }
-}
-
-[dTextInput]::-ms-clear,
-[dTextInput]::-ms-reveal {
-  display: none;
-}
diff --git a/src/components/app-content.vue b/src/components/app-content.vue
deleted file mode 100644
index e75bdc0475105744656485f84fb30924697a5609..0000000000000000000000000000000000000000
--- a/src/components/app-content.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div id="menuLink" class="menu-link">
-      <span />
-    </div>
-    <div class="devui-components-search">
-      <!-- TODO: 搜索框 -->
-    </div>
-    <div class="sidebar">
-      <ul class="devui-menu" style="margin-bottom: 0">
-        <li class="devui-menu-item">
-          <a href="/get-start">快速开始</a>
-        </li>
-        <li class="devui-menu-item">
-          <a href="/color" style="position: relative">颜色变量
-            <sup class="devui-beta-label">Beta</sup>
-          </a>
-        </li>
-        <li class="devui-menu-item">
-          <a href="/theme-guide" style="position: relative">主题化使用指南 </a>
-        </li>
-      </ul>
-      <nav class="side-nav">
-        <!-- TODO: 左侧组件导航 d-accordion -->
-        <d-accordion :data="componentsData" :link-type="'routerLink'" />
-      </nav>
-    </div>
-    <div class="doc-viewer-container">
-      <!-- TODO: 文档主体内容 -->
-      <!-- <app-demo-cell></app-demo-cell> -->
-      <router-view :key="key" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { groupBy, map } from 'lodash-es'
-import { routesConfig } from './component.route'
-// import AppDemoCell from './app-demo-cell.vue'
-import Accordion from '../../devui/accordion/accordion'
-
-export default {
-  name: 'AppContent',
-  components: {
-    // AppDemoCell,
-    'd-accordion': Accordion
-  },
-  data(): any {
-    return {
-      componentsData: []
-    }
-  },
-  computed: {
-    key() {
-      return this.$route.fullPath
-    }
-  },
-  created() {
-    this.generateComponentData();
-  },
-  methods: {
-    generateComponentData() {
-      // TODO: 补充类型
-      const routesWithData = map(routesConfig, (route: any) => {
-        if (!route.meta) {
-          route.meta = {};
-        }
-        return route;
-      });
-      const groupedRoutesObj = groupBy(routesWithData,
-        (route: any) => {
-          return (route as any).meta.type || '通用';
-        });
-      for (const key in groupedRoutesObj) {
-        if (key) {
-          const group = groupedRoutesObj[key].map((item: any) => {
-            if (item.meta.name) {
-              return {
-                title: item.meta.name + ' ' + item.meta.cnName,
-                link: '/components/' + item.path + '/demo',
-                ...item.meta,
-              };
-            } else {
-              return {};
-            }
-          }
-          ).filter((item: any) => Object.keys(item).length !== 0)
-            .sort(function (s1: any, s2: any) {
-              const prev = (s1.title).toUpperCase();
-              const next = (s2.title).toUpperCase();
-              if (prev < next) {
-                return -1;
-              }
-              if (prev > next) {
-                return 1;
-              }
-              return 0;
-            });
-          const componentItem: any = { title: key, children: group, open: true };
-          this.componentsData.push(componentItem);
-        }
-      }
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-  
-</style>
\ No newline at end of file
diff --git a/src/components/app-demo-cell.vue b/src/components/app-demo-cell.vue
deleted file mode 100644
index e99f09a93d500f17f8bb6527021de66be05eb126..0000000000000000000000000000000000000000
--- a/src/components/app-demo-cell.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="main">
-    <div class="docs-header">
-      <h1>{{ data.name }} {{ data.cnName }}</h1>
-      <div style="margin-bottom: 40px">{{ data.description }}</div>
-      <div v-if="data.tmw">
-        <h3>何时使用</h3>
-        <div style="margin-bottom: 20px" v-html="data.tmw"></div>
-      </div>
-      <!-- TODO: d-tabs -->
-      <d-tabs
-        v-model="activeTab"
-        :showContent="false"
-        @activeTabChange="activeTabChange($event)"
-      >
-        <d-tab id="demo" title="Demo" tabId="demo"> </d-tab>
-        <d-tab id="api" title="API" tabId="api"> </d-tab>
-      </d-tabs>
-    </div>
-    <div class="examples-viewer">
-      <div class="examples-viewer-wrapper">
-        <!-- TODO: Demo列表 -->
-        <router-view></router-view>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import ButtonDemo from '../../devui/button/demo/button-demo';
-import Tabs from '../../devui/tabs/tabs';
-import Tab from '../../devui/tabs/tab';
-
-export default {
-  name: 'app-demo-cell',
-  components: {
-    'd-button-demo': ButtonDemo,
-    'd-tabs': Tabs,
-    'd-tab': Tab,
-  },
-  data() {
-    return {
-      data: {},
-      activeTab: 'demo',
-    };
-  },
-  methods: {
-    activeTabChange(a) {
-      this.$router.push(a);
-    },
-  },
-  mounted() {
-    this.data = this.$route.meta;
-    this.activeTab = /\/demo$/.test(this.$route.path) ? 'demo' : 'api';
-  },
-};
-</script>
diff --git a/src/components/component.route.ts b/src/components/component.route.ts
deleted file mode 100755
index dc3a76aa10dd69f59a82a5371f1487641982b304..0000000000000000000000000000000000000000
--- a/src/components/component.route.ts
+++ /dev/null
@@ -1,740 +0,0 @@
-import ExamplePanelComponent from './app-demo-cell.vue';
-import GetStartedComponent from './app-demo-cell.vue';
-import ColorComponent from './app-demo-cell.vue';
-import ThemeGuideComponent from './app-demo-cell.vue';
-
-import accordionRoutes from '../../devui/accordion/demo/accordion.route'
-import alertRoutes from '../../devui/alert/demo/alert.route'
-import anchorRoutes from '../../devui/anchor/demo/anchor.route'
-import autoCompleteRoutes from '../../devui/auto-complete/demo/auto-complete.route'
-import avatarRoutes from '../../devui/avatar/demo/avatar.route'
-import backTopRoutes from '../../devui/back-top/demo/back-top.route'
-import badgeRoutes from '../../devui/badge/demo/badge.route'
-import breadcrumbRoutes from '../../devui/breadcrumb/demo/breadcrumb.route'
-import buttonRoutes from '../../devui/button/demo/button.route'
-import cardRoutes from '../../devui/card/demo/card.route'
-
-import carouselRoutes from '../../devui/carousel/demo/carousel.route'
-import cascaderRoutes from '../../devui/cascader/demo/cascader.route'
-import checkboxRoutes from '../../devui/checkbox/demo/checkbox.route'
-import dataTableRoutes from '../../devui/data-table/demo/data-table.route'
-import datepickerRoutes from '../../devui/datepicker/demo/datepicker.route'
-import dragdropRoutes from '../../devui/dragdrop/demo/dragdrop.route'
-import drawerRoutes from '../../devui/drawer/demo/drawer.route'
-import dropdownRoutes from '../../devui/dropdown/demo/dropdown.route'
-import editableSelectRoutes from '../../devui/editable-select/demo/editable-select.route'
-import formRoutes from '../../devui/form/demo/form.route'
-
-import fullscreenRoutes from '../../devui/fullscreen/demo/fullscreen.route'
-import ganttRoutes from '../../devui/gantt/demo/gantt.route'
-import imagePreviewRoutes from '../../devui/image-preview/demo/image-preview.route'
-import inputNumberRoutes from '../../devui/input-number/demo/input-number.route'
-import layoutRoutes from '../../devui/layout/demo/layout.route'
-import loadingRoutes from '../../devui/loading/demo/loading.route'
-import modalRoutes from '../../devui/modal/demo/modal.route'
-import multiAutoCompleteRoutes from '../../devui/multi-auto-complete/demo/multi-auto-complete.route'
-import paginationRoutes from '../../devui/pagination/demo/pagination.route'
-import panelRoutes from '../../devui/panel/demo/panel.route'
-
-import popoverRoutes from '../../devui/popover/demo/popover.route'
-import progressRoutes from '../../devui/progress/demo/progress.route'
-import quadrantDiagramRoutes from '../../devui/quadrant-diagram/demo/quadrant-diagram.route'
-import radioRoutes from '../../devui/radio/demo/radio.route'
-import rateRoutes from '../../devui/rate/demo/rate.route'
-import readTipRoutes from '../../devui/read-tip/demo/read-tip.route'
-import searchRoutes from '../../devui/search/demo/search.route'
-import selectRoutes from '../../devui/select/demo/select.route'
-import sliderRoutes from '../../devui/slider/demo/slider.route'
-import splitterRoutes from '../../devui/splitter/demo/splitter.route'
-
-import statusRoutes from '../../devui/status/demo/status.route'
-import stepsGuideRoutes from '../../devui/steps-guide/demo/steps-guide.route'
-import stickyRoutes from '../../devui/sticky/demo/sticky.route'
-import tabsRoutes from '../../devui/tabs/demo/tabs.route'
-import tagsRoutes from '../../devui/tags/demo/tags.route'
-import tagsInputRoutes from '../../devui/tags-input/demo/tags-input.route'
-import textInputRoutes from '../../devui/text-input/demo/text-input.route'
-import textareaRoutes from '../../devui/textarea/demo/textarea.route'
-import timeAxisRoutes from '../../devui/time-axis/demo/time-axis.route'
-import timePickerRoutes from '../../devui/time-picker/demo/time-picker.route'
-
-import toastRoutes from '../../devui/toast/demo/toast.route'
-import switchRoutes from '../../devui/switch/demo/switch.route'
-import tooltipRoutes from '../../devui/tooltip/demo/tooltip.route'
-import transferRoutes from '../../devui/transfer/demo/transfer.route'
-import treeRoutes from '../../devui/tree/demo/tree.route'
-import treeSelectRoutes from '../../devui/tree-select/demo/tree-select.route'
-import uploadRoutes from '../../devui/upload/demo/upload.route'
-
-export const routesConfig = [
-  {
-    path: '',
-    redirect: '/components/button/demo',
-    pathMatch: 'full',
-    meta: {},
-  },
-  {
-    path: 'get-start',
-    component: GetStartedComponent,
-    meta: { nodisplay: true },
-  },
-  {
-    path: 'color',
-    component: ColorComponent,
-    meta: {nodisplay: true}
-  },
-  {
-    path: 'theme-guide',
-    component: ThemeGuideComponent,
-    meta: { nodisplay: true },
-  },
-  {
-    path: 'accordion',
-    component: ExamplePanelComponent,
-    children: accordionRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'Accordion',
-      cnName: '手风琴',
-      done: true,
-    },
-  },
-  {
-    path: 'alert',
-    component: ExamplePanelComponent,
-    children: alertRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Alert',
-      cnName: '警告',
-      done: true,
-    },
-  },
-  {
-    path: 'anchor',
-    component: ExamplePanelComponent,
-    children: anchorRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'Anchor',
-      cnName: '锚点',
-    },
-  },
-  {
-    path: 'auto-complete',
-    component: ExamplePanelComponent,
-    children: autoCompleteRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'AutoComplete',
-      cnName: '自动补全',
-    },
-  },
-  {
-    path: 'avatar',
-    component: ExamplePanelComponent,
-    children: avatarRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Avatar',
-      cnName: '头像',
-      done: true,
-    },
-  },
-  {
-    path: 'ImagePreview',
-    component: ExamplePanelComponent,
-    children: imagePreviewRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'ImagePreview',
-      cnName: '图片预览',
-    },
-  },
-  {
-    path: 'breadcrumb',
-    component: ExamplePanelComponent,
-    children: breadcrumbRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'Breadcrumb',
-      cnName: '面包屑',
-    },
-  },
-  {
-    path: 'back-top',
-    component: ExamplePanelComponent,
-    children: backTopRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'BackTop',
-      cnName: '回到顶部',
-    },
-  },
-  {
-    path: 'button',
-    component: ExamplePanelComponent,
-    children: buttonRoutes,
-    meta: {
-      name: 'Button',
-      cnName: '按钮',
-      done: true,
-    },
-  },
-  {
-    path: 'badge',
-    component: ExamplePanelComponent,
-    children: badgeRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Badge',
-      cnName: '徽标',
-    },
-  },
-  {
-    path: 'card',
-    component: ExamplePanelComponent,
-    children: cardRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Card',
-      cnName: '卡片',
-      done: true,
-    },
-  },
-  {
-    path: 'carousel',
-    component: ExamplePanelComponent,
-    children: carouselRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Carousel',
-      cnName: '走马灯',
-    },
-  },
-  {
-    path: 'checkbox',
-    component: ExamplePanelComponent,
-    children: checkboxRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'CheckBox',
-      cnName: '复选框',
-      done: true,
-    },
-  },
-  {
-    path: 'common',
-    component: ExamplePanelComponent,
-    children: accordionRoutes,
-    meta: {
-      name: 'Common',
-      cnName: '公共方法',
-    },
-  },
-  {
-    path: 'datatable',
-    component: ExamplePanelComponent,
-    children: dataTableRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'DataTable',
-      cnName: '表格',
-    },
-  },
-  {
-    path: 'datepicker',
-    component: ExamplePanelComponent,
-    children: datepickerRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'DatePicker',
-      cnName: '日期选择器',
-    },
-  },
-  {
-    path: 'multi-auto-complete',
-    component: ExamplePanelComponent,
-    children: multiAutoCompleteRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'MultiAutoComplete',
-      cnName: '多项自动补全',
-    },
-  },
-  {
-    path: 'form',
-    component: ExamplePanelComponent,
-    children: formRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Form',
-      cnName: '表单',
-    },
-  },
-  {
-    path: 'fullscreen',
-    component: ExamplePanelComponent,
-    children: fullscreenRoutes,
-    meta: {
-      name: 'Fullscreen',
-      cnName: '全屏',
-    },
-  },
-  {
-    path: 'transfer',
-    component: ExamplePanelComponent,
-    children: transferRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Transfer',
-      cnName: '穿梭框',
-    },
-  },
-  {
-    path: 'dragdrop',
-    component: ExamplePanelComponent,
-    children: dragdropRoutes,
-    meta: {
-      name: 'DragDrop',
-      cnName: '拖拽',
-    },
-  },
-  {
-    path: 'drawer',
-    component: ExamplePanelComponent,
-    children: drawerRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Drawer',
-      cnName: '抽屉板',
-    },
-  },
-  {
-    path: 'dropdown',
-    component: ExamplePanelComponent,
-    children: dropdownRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'DropDown',
-      cnName: '下拉菜单',
-    },
-  },
-  {
-    path: 'editable-select',
-    component: ExamplePanelComponent,
-    children: editableSelectRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'EditableSelect',
-      cnName: '可输入下拉选择框',
-    },
-  },
-  {
-    path: 'loading',
-    component: ExamplePanelComponent,
-    children: loadingRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Loading',
-      cnName: '加载提示',
-    },
-  },
-  {
-    path: 'modal',
-    component: ExamplePanelComponent,
-    children: modalRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Modal',
-      cnName: '模态弹窗',
-    },
-  },
-  {
-    path: 'pagination',
-    component: ExamplePanelComponent,
-    children: paginationRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'Pagination',
-      cnName: '分页',
-    },
-  },
-  {
-    path: 'panel',
-    component: ExamplePanelComponent,
-    children: panelRoutes,
-    meta: {
-      name: 'Panel',
-      cnName: '面板',
-      done: true,
-    },
-  },
-  {
-    path: 'popover',
-    component: ExamplePanelComponent,
-    children: popoverRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Popover',
-      cnName: '悬浮提示',
-    },
-  },
-  {
-    path: 'progress',
-    component: ExamplePanelComponent,
-    children: progressRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Progress',
-      cnName: '进度条',
-    },
-  },
-  {
-    path: 'quadrant-diagram',
-    component: ExamplePanelComponent,
-    children: quadrantDiagramRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Quadrant Diagram',
-      cnName: '象限图',
-    },
-  },
-  {
-    path: 'radio',
-    component: ExamplePanelComponent,
-    children: radioRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Radio',
-      cnName: '单选框',
-      done: true,
-    },
-  },
-  {
-    path: 'rate',
-    component: ExamplePanelComponent,
-    children: rateRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Rate',
-      cnName: '等级评估',
-    },
-  },
-  {
-    path: 'search',
-    component: ExamplePanelComponent,
-    children: searchRoutes,
-    meta: {
-      name: 'Search',
-      cnName: '搜索框',
-    },
-  },
-  {
-    path: 'select',
-    component: ExamplePanelComponent,
-    children: selectRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Select',
-      cnName: '下拉选择框',
-    },
-  },
-  {
-    path: 'cascader',
-    component: ExamplePanelComponent,
-    children: cascaderRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Cascader',
-      cnName: '级联菜单',
-    },
-  },
-  {
-    path: 'status',
-    component: ExamplePanelComponent,
-    children: statusRoutes,
-    meta: {
-      name: 'Status',
-      cnName: '状态',
-    },
-  },
-  {
-    path: 'sticky',
-    component: ExamplePanelComponent,
-    children: stickyRoutes,
-    meta: {
-      name: 'Sticky',
-      cnName: '便贴',
-    },
-  },
-  {
-    path: 'tabs',
-    component: ExamplePanelComponent,
-    children: tabsRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'Tabs',
-      cnName: '选项卡切换',
-      done: true,
-    },
-  },
-  {
-    path: 'tags',
-    component: ExamplePanelComponent,
-    children: tagsRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Tags',
-      cnName: '标签',
-    },
-  },
-  {
-    path: 'tags-input',
-    component: ExamplePanelComponent,
-    children: tagsInputRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'TagsInput',
-      cnName: '标签输入',
-      done: true,
-    },
-  },
-  {
-    path: 'time-axis',
-    component: ExamplePanelComponent,
-    children: timeAxisRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'TimeAxis',
-      cnName: '时间轴',
-    },
-  },
-  {
-    path: 'toast',
-    component: ExamplePanelComponent,
-    children: toastRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Toast',
-      cnName: '全局通知',
-    },
-  },
-  {
-    path: 'tooltip',
-    component: ExamplePanelComponent,
-    children: tooltipRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'Tooltip',
-      cnName: '提示',
-    },
-  },
-  {
-    path: 'read-tip',
-    component: ExamplePanelComponent,
-    children: readTipRoutes,
-    meta: {
-      type: '反馈',
-      enType: 'Feedback',
-      name: 'ReadTip',
-      cnName: '阅读提示',
-      description: '阅读提示组件。',
-      tmw: `当html文档中需要对特定内容进行提示时使用。`,
-    },
-  },
-  {
-    path: 'switch',
-    component: ExamplePanelComponent,
-    children: switchRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Switch',
-      cnName: '开关',
-      done: true,
-    },
-  },
-  {
-    path: 'tree',
-    component: ExamplePanelComponent,
-    children: treeRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Tree',
-      cnName: '树',
-    },
-  },
-  {
-    path: 'upload',
-    component: ExamplePanelComponent,
-    children: uploadRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Upload',
-      cnName: '上传',
-    },
-  },
-  {
-    path: 'input-number',
-    component: ExamplePanelComponent,
-    children: inputNumberRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'InputNumber',
-      cnName: '数字输入框',
-    },
-  },
-  {
-    path: 'tree-select',
-    component: ExamplePanelComponent,
-    children: treeSelectRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'TreeSelect',
-      cnName: '树形选择框',
-    },
-  },
-  {
-    path: 'slider',
-    component: ExamplePanelComponent,
-    children: sliderRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Slider',
-      cnName: '滑动输入条',
-    },
-  },
-  {
-    path: 'splitter',
-    component: ExamplePanelComponent,
-    children: splitterRoutes,
-    meta: {
-      type: '布局',
-      enType: 'Layout',
-      name: 'Splitter',
-      cnName: '分割器',
-    },
-  },
-  {
-    path: 'layout',
-    component: ExamplePanelComponent,
-    children: layoutRoutes,
-    meta: {
-      type: '布局',
-      enType: 'Layout',
-      name: 'Layout',
-      cnName: '布局',
-    },
-  },
-  {
-    path: 'gantt',
-    component: ExamplePanelComponent,
-    children: ganttRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'Gantt',
-      cnName: '甘特图',
-    },
-  },
-  {
-    path: 'text-input',
-    component: ExamplePanelComponent,
-    children: textInputRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'TextInput',
-      cnName: '文本框',
-      done: true,
-    },
-  },
-  {
-    path: 'textarea',
-    component: ExamplePanelComponent,
-    children: textareaRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'Textarea',
-      cnName: '多行文本框',
-    },
-  },
-  {
-    path: 'steps-guide',
-    component: ExamplePanelComponent,
-    children: stepsGuideRoutes,
-    meta: {
-      type: '导航',
-      enType: 'Navigation',
-      name: 'StepsGuide',
-      cnName: '操作指引',
-    },
-  },
-  {
-    path: 'time-picker',
-    component: ExamplePanelComponent,
-    children: timePickerRoutes,
-    meta: {
-      type: '数据录入',
-      enType: 'Data Entry',
-      name: 'TimePicker',
-      cnName: '时间选择器',
-    },
-  },
-  {
-    path: 'relative-time',
-    component: ExamplePanelComponent,
-    children: accordionRoutes,
-    meta: {
-      type: '数据展示',
-      enType: 'Data Display',
-      name: 'RelativeTime',
-      cnName: '人性化时间转换',
-    },
-  },
-];
-
-export default routesConfig;
diff --git a/src/main.ts b/src/main.ts
index b59e0a2b93ff4deb9a783f684338ac1e7ae05b6c..01433bca2ac76590c48fabfee8d69d7b223f48bb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,4 @@
 import { createApp } from 'vue'
-// TypeScript error? Run VSCode command
-// TypeScript: Select TypeScript version - > Use Workspace Version
-import App from './app.vue'
-import appRoutes from './app.route'
+import App from './App.vue'
 
-const app = createApp(App)
-
-app.use(appRoutes)
-
-app.mount('#app')
+createApp(App).mount('#app')
diff --git a/yarn.lock b/yarn.lock
index 42c5f811d6857908c0dcad0a1052921f6dc09ee6..45d6914ca1992cd465067b948bd70c4a9caf367b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7312,6 +7312,11 @@ yargs@^16.0.0, yargs@^16.0.3:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yarn@^1.22.11:
+  version "1.22.11"
+  resolved "https://registry.nlark.com/yarn/download/yarn-1.22.11.tgz?cache=0&sync_timestamp=1627322569698&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fyarn%2Fdownload%2Fyarn-1.22.11.tgz#d0104043e7349046e0e2aec977c24be106925ed6"
+  integrity sha1-0BBAQ+c0kEbg4q7Jd8JL4QaSXtY=
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npm.taobao.org/yocto-queue/download/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"