diff --git a/demo/docs/.vitepress/theme/components/Preview.vue b/demo/docs/.vitepress/theme/components/Preview.vue
index 16dcbca..cbde761 100644
--- a/demo/docs/.vitepress/theme/components/Preview.vue
+++ b/demo/docs/.vitepress/theme/components/Preview.vue
@@ -1,25 +1,18 @@
 <template>
-  <div
-    ref="container"
-    class="preview-container"
-  >
-    <div
-      class="preview"
-      ref="preview"
-      v-show="showSimulator"
-    >
+  <div ref="containerRef" class="preview-container">
+    <div class="preview" ref="previewRef" v-show="showSimulator">
       <span class="current-time">{{ time }}</span>
       <header class="header">
         <i
           class="cubeic cubeic-back"
           v-show="showBack"
-          @click="goBack()"
+          @click="history.back()"
         />
         {{ title }}
       </header>
       <div class="simulator-wrapper">
         <iframe
-          ref="simulator"
+          ref="simulatorRef"
           class="simulator"
           :src="previewPath"
           frameborder="0"
@@ -32,14 +25,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { throttle } from 'lodash'
 import { EXAMPLE_DOC_PORT } from '../../../../../config/index'
-
-const baseUrl =
-  process.env.NODE_ENV === 'development'
-    ? `http://localhost:${EXAMPLE_DOC_PORT}/`
-    : `/mpx-cube-ui/example/index.html`
+import iphoneXImage from '../../public/images/iphoneX.png'
+import { useData } from 'vitepress'
+import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vitepress'
 
 /**
  * 轮询
@@ -52,7 +44,7 @@ const polling = (cb, delay = 3000) => {
   const timerRef = {
     value: -1
   }
-  const pollingFunc = function (...args) {
+  const pollingFunc = function(...args) {
     if (firstCall) {
       firstCall = false
       cb.call(this, ...args)
@@ -67,15 +59,38 @@ const polling = (cb, delay = 3000) => {
   return pollingFunc
 }
 
-const getComponent = (list) => {
+const getTime = () => {
+  const now = new Date()
+  return `${`${now.getHours()}`.padStart(
+    2,
+    0
+  )}:${`${now.getMinutes()}`.padStart(2, 0)}`
+}
+
+const time = ref(getTime())
+
+let componentName = ''
+const baseUrl =
+  process.env.NODE_ENV === 'development'
+    ? `http://localhost:${EXAMPLE_DOC_PORT}/`
+    : `/mpx-cube-ui/example/index.html`
+
+const previewPath = computed(() => {
+  if (componentName) {
+    return `${baseUrl}#/pages/${componentName}/index`
+  }
+  return baseUrl
+})
+
+const getComponent = list => {
   if (!Array.isArray(list)) {
     return null
   }
   for (const item of list) {
-    if (location.href.includes(`${item.path}.html`)) {
+    if (location.href.includes(`${item.text}.html`)) {
       return item.title
     }
-    const title = getComponent(item.children)
+    const title = getComponent(item.items)
     if (title) {
       return title
     }
@@ -83,170 +98,176 @@ const getComponent = (list) => {
   return null
 }
 
-const getTime = () => {
-  const now = new Date()
-  return `${`${now.getHours()}`.padStart(2, 0)}:${`${now.getMinutes()}`.padStart(2, 0)}`
+let flush = 1
+const { theme } = useData()
+const title = computed(() => {
+  if (!flush) {
+    return ''
+  }
+  return (
+    getComponent([theme.value.sidebar.find(item => item.text === 'button')]) ||
+    'test'
+  )
+})
+
+const showBack = computed(() => {
+  return title !== 'test'
+})
+
+const router = useRouter()
+const route = useRoute()
+watch(
+  () => route.path,
+  (newPath, oldPath) => {
+    flush += 1
+    syncChildPath(newPath)
+  }
+)
+
+//created
+const showSimulator = ref(false)
+const img = new Image()
+const show = () => {
+  showSimulator.value = true
+  setTimeout(() => {
+    handleResize()
+  })
 }
+img.src = iphoneXImage
+img.onload = show
+img.onerror = show
+let timer = null
+timer = polling(() => {
+  time.value = getTime()
+}, 6000)()
 
-export default {
-  data() {
-    return {
-      flush: 1,
-      time: getTime(),
-      timer: null,
-      showSimulator: false,
-      componentName: ''
+const handleMessage = e => {
+  if (e.data?.component !== undefined) {
+    if (!e.data?.component) {
+      router.go('/guide/button.html')
+      return
     }
-  },
-  computed: {
-    previewPath() {
-      if (this.componentName) {
-        return `${baseUrl}#/pages/${this.componentName}/index`
+    const data = e.data
+    const findComponent = list => {
+      if (!Array.isArray(list)) {
+        return null
       }
-      return baseUrl
-    },
-    title() {
-      if (!this.flush) {
-        return ''
+      for (const item of list) {
+        if (item.path?.endsWith(data.component)) {
+          return item
+        }
+        const target = findComponent(item.children)
+        if (target) {
+          return target
+        }
       }
-      return (
-        getComponent([
-          this.$themeConfig.sidebar.find((item) => item.title === '组件'),
-        ]) || this.$siteTitle
-      )
-    },
-    showBack() {
-      return this.title !== this.$siteTitle
-    }
-  },
-  watch: {
-    $route(to) {
-      this.flush += 1
-      this.syncChildPath(to)
+      return null
     }
-  },
-  created() {
-    const img = new Image()
-    const show = () => {
-      this.showSimulator = true
-      setTimeout(() => {
-        this.handleResize()
-      })
+    const component = findComponent([
+      theme.value.sidebar.find(item => item.title === '组件')
+    ])
+    if (component) {
+      router.go(`${component.path}.html`)
     }
-    img.src = '/mpx-ui/images/iphoneX.png'
-    img.onload = show
-    img.onerror = show
-    this.timer = polling(() => {
-      this.time = getTime()
-    }, 6000)()
+  }
+}
 
-    window.addEventListener('message', this.handleMessage)
-  },
-  mounted() {
-    this.componentName = this.getComponentName(top.location.href)
-    this.handleResize()
-    this.calcPreviewerPosition()
-    window.addEventListener('resize', this.handleResize)
-    window.addEventListener('scroll', this.calcPreviewerPosition)
-    this.$refs.simulator.onload = () => {
-      this.syncChildPath(this.$router.currentRoute)
+window.addEventListener('message', handleMessage)
+
+const getComponentName = path => {
+  let componentName = ''
+  const [_, componentPath] = path.split('mpx-ui')
+  if (!componentPath) {
+    return componentName
+  }
+  componentPath.replace(/\/(.*?).html/, (_, res) => {
+    if (res.indexOf('/') > 0) {
+      componentName = res.split('/')[1]
+    } else {
+      componentName = res
     }
-  },
-  beforeDestroy() {
-    clearTimeout(this.timer.value)
-    window.removeEventListener('resize', this.handleResize)
-    window.removeEventListener('scroll', this.calcPreviewerPosition)
-    window.removeEventListener('message', this.handleMessage)
-  },
-  methods: {
-    syncChildPath(to) {
-      this.$refs.simulator.contentWindow.postMessage({
-        to: this.getComponentName(to.path)
-      }, '*')
-    },
-    goBack() {
-      this.$router.back()
-    },
-    handleMessage(e) {
-      if (e.data?.component !== undefined) {
-        if (!e.data?.component) {
-          this.$router.replace('/guide/intro.html')
-          return
-        }
-        const data = e.data
-        const findComponent = (list) => {
-          if (!Array.isArray(list)) {
-            return null
-          }
-          for (const item of list) {
-            if (item.path?.endsWith(data.component)) {
-              return item
-            }
-            const target = findComponent(item.children)
-            if (target) {
-              return target
-            }
-          }
-          return null
-        }
-        const component = findComponent([
-          this.$themeConfig.sidebar.find((item) => item.title === '组件'),
-        ])
-        if (component) {
-          this.$router.push(`${component.path}.html`)
-        }
-      }
-    },
-    handleResize: throttle(function () {
-      this.calcPreviewerHeight()
-      this.calcPreviewerTransform()
-    }, 6),
-    calcPreviewerHeight() {
-      const el = this.$refs.preview
-      el.style.height = `${window.innerHeight - 110}px`
-    },
-    calcPreviewerTransform() {
-      let offset = 0
-      const el = this.$refs.preview
+  })
+  return componentName
+}
 
-      if (!el.offsetParent) {
-        const container = this.$refs.container
-        const elOffsetLeft = el.offsetLeft
-        const containerOffsetLeft = container.offsetLeft
-        offset = containerOffsetLeft - elOffsetLeft
-      } else {
-        const clientRect = el.getBoundingClientRect()
-        const innerWidth = window.innerWidth
-        offset =
-          clientRect.right < innerWidth
-            ? 0
-            : clientRect.right - innerWidth + 24 // 24为右边距
-      }
-      el.style.transform = `translateX(${offset}px)`
-    },
-    calcPreviewerPosition: throttle(function () {
-      const el = this.$refs.preview
-      const offset = document.documentElement.scrollLeft
-      el.style.right = `${offset + 24}px`
-    }, 6),
-    getComponentName(path) {
-      let componentName = ''
-      const [_, componentPath] = path.split('components')
+const containerRef = ref(null)
+const previewRef = ref(null)
+const calcPreviewerHeight = () => {
+  const el = previewRef.value
+  el.style.height = `${window.innerHeight - 110}px`
+}
+const calcPreviewerTransform = () => {
+  let offset = 0
+  const el = previewRef.value
 
-      if (!componentPath) {
-        return componentName
-      }
-      componentPath.replace(/\/(.*?).html/, (_, res) => {
-        if (res.indexOf('/') > 0) {
-          componentName = res.split('/')[1]
-        } else {
-          componentName = res
-        }
-      })
-      return componentName
-    }
+  if (!el.offsetParent) {
+    const container = containerRef.value
+    const elOffsetLeft = el.offsetLeft
+    const containerOffsetLeft = container.offsetLeft
+    offset = containerOffsetLeft - elOffsetLeft
+  } else {
+    const clientRect = el.getBoundingClientRect()
+    const innerWidth = window.innerWidth
+    offset =
+      clientRect.right < innerWidth ? 0 : clientRect.right - innerWidth + 24 // 24为右边距
+  }
+  el.style.transform = `translateX(${offset}px)`
+}
+
+const handleResize = throttle(() => {
+  calcPreviewerHeight()
+  calcPreviewerTransform()
+})
+
+const calcPreviewerPosition = () => {
+  let offset = 0
+  const el = previewRef.value
+
+  if (!el.offsetParent) {
+    const container = containerRef.value
+    const elOffsetLeft = el.offsetLeft
+    const containerOffsetLeft = container.offsetLeft
+    offset = containerOffsetLeft - elOffsetLeft
+  } else {
+    const clientRect = el.getBoundingClientRect()
+    const innerWidth = window.innerWidth
+    offset =
+      clientRect.right < innerWidth ? 0 : clientRect.right - innerWidth + 24 // 24为右边距
   }
+  el.style.transform = `translateX(${offset}px)`
 }
+
+const simulatorRef = ref(null)
+const syncChildPath = to => {
+  const componentUrl = to.split('/mpx-ui')[1]
+  simulatorRef.value.contentWindow.postMessage(
+    {
+      to: getComponentName(componentUrl)
+    },
+    '*'
+  )
+}
+onMounted(() => {
+  containerRef.value.style.setProperty(
+    '--iphoneX-image',
+    `url(${iphoneXImage})`
+  )
+  componentName = getComponentName(top.location.href)
+  handleResize()
+  calcPreviewerPosition()
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('scroll', calcPreviewerPosition)
+  simulatorRef.value.onload = () => {
+    syncChildPath(router.route.path)
+  }
+})
+
+onUnmounted(() => {
+  clearTimeout(timer.value)
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('scroll', calcPreviewerPosition)
+  window.removeEventListener('message', handleMessage)
+})
 </script>
 
 <style lang="stylus" scoped>
@@ -273,7 +294,7 @@ export default {
     background-color #fff
     border-radius 20px 20px 100px 100px
     // box-shadow 0 8px 12px #ebedf0
-    background url("/mpx-ui/images/iphoneX.png") no-repeat center 0
+    background var(--iphoneX-image) no-repeat center 0
     background-size 100%
     padding 25px
     padding-top 54px
diff --git a/demo/docs/.vitepress/theme/components/VPDoc.vue b/demo/docs/.vitepress/theme/components/VPDoc.vue
new file mode 100644
index 0000000..2d0db1c
--- /dev/null
+++ b/demo/docs/.vitepress/theme/components/VPDoc.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
+import VPDocAside from 'vitepress/dist/client/theme-default/components/VPDocAside.vue'
+import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue'
+
+const { theme } = useData()
+
+const route = useRoute()
+const { hasSidebar, hasAside, leftAside } = useSidebar()
+
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
+)
+</script>
+
+<template>
+  <div
+    class="VPDoc"
+    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
+  >
+    <slot name="doc-top" />
+    <div class="container">
+      <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
+        <div class="aside-curtain" />
+        <div class="aside-container">
+          <div class="aside-content">
+            <VPDocAside>
+              <template #aside-top><slot name="aside-top" /></template>
+              <template #aside-bottom><slot name="aside-bottom" /></template>
+              <template #aside-outline-before><slot name="aside-outline-before" /></template>
+              <template #aside-outline-after><slot name="aside-outline-after" /></template>
+              <template #aside-ads-before><slot name="aside-ads-before" /></template>
+              <template #aside-ads-after><slot name="aside-ads-after" /></template>
+            </VPDocAside>
+          </div>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="content-container">
+          <slot name="doc-before" />
+          <main class="main">
+            <Content
+              class="vp-doc"
+              :class="[
+                pageName,
+                theme.externalLinkIcon && 'external-link-icon-enabled'
+              ]"
+            />
+          </main>
+          <VPDocFooter>
+            <template #doc-footer-before><slot name="doc-footer-before" /></template>
+          </VPDocFooter>
+          <slot name="doc-after" />
+        </div>
+      </div>
+    </div>
+    <slot name="doc-bottom" />
+  </div>
+</template>
+
+<style scoped>
+.VPDoc {
+  padding: 32px 24px 96px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .VPDoc {
+    padding: 48px 32px 128px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPDoc {
+    padding: 48px 32px 0;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
+  }
+
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .VPDoc .aside {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 784px;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1104px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.aside {
+  position: relative;
+  display: none;
+  order: 2;
+  flex-grow: 1;
+  padding-left: 32px;
+  width: 100%;
+  max-width: 256px;
+}
+
+.left-aside {
+  order: 1;
+  padding-left: unset;
+  padding-right: 32px;
+}
+
+.aside-container {
+  position: fixed;
+  top: 0;
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
+  width: 224px;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.aside-container::-webkit-scrollbar {
+  display: none;
+}
+
+.aside-curtain {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  width: 224px;
+  height: 32px;
+  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
+}
+
+.aside-content {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
+  padding-bottom: 32px;
+}
+
+.content {
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px 128px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .content {
+    order: 1;
+    margin: 0;
+    min-width: 640px;
+  }
+}
+
+.content-container {
+  margin: 0 auto;
+}
+
+.VPDoc.has-aside .content-container {
+  max-width: 688px;
+}
+</style>
diff --git a/demo/docs/.vitepress/theme/layouts/Layout.vue b/demo/docs/.vitepress/theme/layouts/Layout.vue
index 8f05c6a..19a2ab4 100644
--- a/demo/docs/.vitepress/theme/layouts/Layout.vue
+++ b/demo/docs/.vitepress/theme/layouts/Layout.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="theme-container">
-    <VPSkipLink />
-    <VPNav> </VPNav>
-
+    <VPNav></VPNav>
     <div class="main-container">
-      <VPSidebar></VPSidebar>
-      <VPContent class="main"> </VPContent>
-      <ClientOnly>
-        <Preview ref="preview" class="show-absolute" />
-      </ClientOnly>
+      <div class="left">
+        <VPSidebar :open="false"></VPSidebar>
+      </div>
+      <div class="main">
+        <VPDoc></VPDoc>
+        <!-- <VPContent></VPContent> -->
+      </div>
+      <ClientOnly> <Preview ref="preview" class="show-absolute" /> </ClientOnly>
     </div>
   </div>
 </template>
@@ -16,14 +17,9 @@
 <script setup>
 import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'
 import VPSidebar from 'vitepress/dist/client/theme-default/components/VPSidebar.vue'
-import VPSkipLink from 'vitepress/dist/client/theme-default/components/VPSkipLink.vue'
 import VPContent from '../components/VPContent.vue'
 import Preview from '../components/Preview.vue'
-
-import { throttle } from 'lodash'
-
-import { useData } from 'vitepress'
-const { page, frontmatter, theme } = useData()
+import VPDoc from '../components/VPDoc.vue'
 </script>
 
 <style lang="stylus" scoped>
@@ -34,11 +30,13 @@ const { page, frontmatter, theme } = useData()
 .main-container
   display flex
   min-height 100vh
+  min-width 100%
   @media screen and (max-width: $MQMobile)
     flex-direction: column
     .preview-container
       display: none
   .main
+    padding-top 64px
     flex 1
     min-width: 600px
     background-color var(--bg-color)
@@ -51,7 +49,8 @@ const { page, frontmatter, theme } = useData()
     background-color var(--bg-color)
     &.show-absolute
       ::v-deep .preview
-        position absolute
+        position fixed
+        top 64px
         right 24px !important
         transform none !important
 .right-panel
@@ -62,4 +61,9 @@ const { page, frontmatter, theme } = useData()
   // padding-right 372px
   @media screen and (max-width 960px)
     padding-right 0
+.left
+  width 437px
+  // @media (min-width: 1440px)
+    // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    // width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
 </style>
diff --git a/scripts/build.js b/scripts/build.js
index 5229a36..e8919d2 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -13,7 +13,9 @@ function logger(msg) {
 }
 
 async function makeBuild() {
-  let files = await fs.readdir(packagesDir)
+  // let files = await fs.readdir(packagesDir)
+  // let files = ['parser', 'markdown-render']
+  let files = ['website']
   files = files.filter(pkgDirName => {
     const pkgDir = resolve(packagesDir, pkgDirName)
     const stat = fs.statSync(pkgDir)
@@ -32,8 +34,7 @@ async function makeBuild() {
     const pkgMeta = require(`${pkgDir}/package.json`)
     if (pkgMeta.private) return
     await fs.remove(`${pkgDir}/dist`)
-    await execa('rollup', ['-c', '--environment', `PKG_DIR:${pkgDirName}`], {
-    })
+    await execa('rollup', ['-c', '--environment', `PKG_DIR:${pkgDirName}`], {})
 
     const dtsOutDir = `${pkgDir}/${pkgMeta.types}`
 
diff --git a/yarn.lock b/yarn.lock
index c89ef56..3159dfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5898,6 +5898,13 @@ json5@2.x, json5@^2.1.0:
   resolved "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/json5/-/json5-2.2.3.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Fjson5%2F-%2Fjson5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+json5@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
 jsonc-parser@^3.2.0:
   version "3.2.0"
   resolved "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/jsonc-parser/-/jsonc-parser-3.2.0.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Fjsonc-parser%2F-%2Fjsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
@@ -8646,8 +8653,7 @@ string-length@^2.0.0:
     astral-regex "^1.0.0"
     strip-ansi "^4.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==