diff --git a/packages/nutui-taro-demo/package.json b/packages/nutui-taro-demo/package.json
index 8e18bb2101..0118e0a4a9 100644
--- a/packages/nutui-taro-demo/package.json
+++ b/packages/nutui-taro-demo/package.json
@@ -71,8 +71,5 @@
     "typescript": "^4.9.3",
     "vue-loader": "^17.0.0",
     "webpack": "^5.69.0"
-  },
-  "resolutions": {
-    "@swc/core": "1.3.42"
   }
 }
diff --git a/src/sites/doc/components/DocHeader.vue b/src/sites/doc/components/DocHeader.vue
new file mode 100644
index 0000000000..e4f2a1066a
--- /dev/null
+++ b/src/sites/doc/components/DocHeader.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="doc-header doc-header-black">
+    <div class="header-logo">
+      <a class="logo-link" href="#" @click="toHome"></a>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { RefData } from '@/sites/assets/util/ref';
+const toHome = () => {
+  RefData.getInstance().currentRoute.value = '/';
+};
+</script>
+
+<style lang="scss">
+.doc-header {
+  height: $doc-header-height;
+  line-height: $doc-header-height;
+  padding: 0 50px;
+  font-size: 20px;
+}
+.header {
+  &-logo {
+    position: relative;
+    display: inline-block;
+    width: 240px;
+    height: 64px;
+    .logo-link {
+      width: 120px;
+      height: 46px;
+      vertical-align: middle;
+      position: absolute;
+      top: 50%;
+      margin-top: -23px;
+    }
+    .logo-border {
+      width: 1px;
+      height: 26px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -13px;
+    }
+  }
+}
+// 颜色
+.doc-header-black {
+  background: black;
+  color: $theme-black-word;
+  border-bottom: 1px solid $theme-black-box-border;
+  .header {
+    &-logo {
+      .logo-link {
+        background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
+      }
+      .logo-border {
+        background: $theme-black-border;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/sites/doc/components/Header.vue b/src/sites/doc/components/Header.vue
deleted file mode 100644
index 4952c08cbc..0000000000
--- a/src/sites/doc/components/Header.vue
+++ /dev/null
@@ -1,489 +0,0 @@
-<template>
-  <div class="doc-header" :class="themeName()">
-    <div class="header-logo">
-      <a class="logo-link" href="#" @click="toHome"></a>
-      <span class="logo-border"></span>
-      <span class="version">{{ version }}</span>
-    </div>
-    <div class="header-nav">
-      <a href="https://github.com/jdf2e/nutui-docs" target="_blank"
-        >当前环境：development ,代码 PR 合并后，文档会自动同步至 https://github.com/jdf2e/nutui-docs</a
-      >
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed, onMounted } from 'vue';
-import { nav } from '@/config.json';
-import { version } from '/package.json';
-import { RefData } from '@/sites/assets/util/ref';
-export default defineComponent({
-  name: 'doc-header',
-  components: {},
-  setup() {
-    let packages = [] as any[];
-    nav.forEach((item) => {
-      packages.push(...item.packages);
-    });
-    const data = reactive({
-      theme: 'black',
-      // headerBg: 'url(' + require('../../assets/images/header-bg.png') + ')',
-      verson: '3.x',
-      navIndex: 0,
-      activeIndex: 0,
-      isShowSelect: false
-    });
-    const handleFocus = () => {
-      console.log(1);
-    };
-    const handleFocusOut = () => {
-      data.isShowSelect = false;
-    };
-
-    const toHome = () => {
-      RefData.getInstance().currentRoute.value = '/';
-    };
-
-    const isActive = computed(() => {
-      let value = RefData.getInstance().currentRoute.value;
-      return function (name: string) {
-        const lName = name.toLowerCase();
-        if (lName === 'component') {
-          if (value.indexOf('-taro') > -1) {
-            value = value.split('-taro')[0];
-          }
-          return packages.findIndex((item) => item.name.toLowerCase() === value) > -1;
-        } else {
-          return value === lName || lName.includes(value);
-        }
-      };
-    });
-    const themeName = computed(() => {
-      return function () {
-        return `doc-header-${RefData.getInstance().themeColor.value}`;
-      };
-    });
-    const checkTheme = (item: any, index: number) => {
-      data.isShowSelect = false;
-      data.activeIndex = index;
-      data.verson = item.name;
-      window.location.href = item.link;
-    };
-    return {
-      version,
-      data,
-      toHome,
-      isActive,
-      checkTheme,
-      themeName,
-      handleFocus,
-      handleFocusOut
-    };
-  }
-});
-</script>
-
-<style lang="scss">
-.doc {
-  &-header {
-    // position: fixed;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    right: 0;
-    min-width: 1300px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: $doc-header-height;
-    line-height: $doc-header-height;
-    text-align: left;
-    padding: 0 50px;
-    font-size: 20px;
-  }
-}
-.header {
-  &-logo {
-    position: relative;
-    display: inline-block;
-    width: 240px;
-    height: 64px;
-    .logo-link {
-      width: 120px;
-      height: 46px;
-      vertical-align: middle;
-      position: absolute;
-      top: 50%;
-      margin-top: -23px;
-    }
-    .logo-border {
-      width: 1px;
-      height: 26px;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      margin-top: -13px;
-    }
-    .version {
-      position: absolute;
-      right: 70px;
-      font-size: 14px;
-    }
-  }
-  &-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    float: right;
-    width: calc(100% - 240px);
-    min-width: 900px;
-    padding: 0 40px;
-    > a {
-      color: #fff;
-    }
-    .nav-box {
-      margin-right: 140px;
-      .nav-list {
-        min-width: 490px;
-        display: flex;
-        list-style: none;
-        align-items: center;
-        justify-content: space-around;
-      }
-      .nav-item {
-        position: relative;
-        margin-right: 30px;
-        font-size: 14px;
-        height: 63px;
-        line-height: 63px;
-        text-align: center;
-        cursor: pointer;
-        flex-shrink: 0;
-        a {
-          display: inline-block;
-          line-height: 64px;
-        }
-        // overflow: hidden;
-        &.active {
-          font-weight: bold;
-          &:after {
-            content: '';
-            display: inline-block;
-            width: 35px;
-            height: 13px;
-            position: absolute;
-            bottom: 3px;
-            left: 50%;
-            margin-left: -17.5px;
-            background: url('../../assets/images/item-active.png');
-          }
-        }
-        &:last-of-type {
-          margin-right: 0;
-        }
-      }
-      .user-link {
-        display: inline-block;
-        width: 26px;
-        height: 26px;
-        vertical-align: middle;
-        background-repeat: no-repeat;
-        background-image: url('../../assets/images/icon-user.png');
-        background-size: 26px;
-
-        &.gitee {
-          margin-left: 8px;
-          background-image: url('../../assets/images/icon-gitee.png');
-        }
-      }
-    }
-  }
-}
-.header-select {
-  &-box {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    outline: 0;
-  }
-  &-hd {
-    min-width: 77px;
-    height: 28px;
-    padding: 0 30px 0 15px;
-    line-height: 26px;
-    font-size: 14px;
-    color: $theme-red-word;
-    background-position: right 15px top 12px;
-    background-size: 8px 5px;
-    background-repeat: no-repeat;
-    border-radius: 14px;
-  }
-  &-bd {
-    position: absolute;
-    top: 30px;
-    left: 50%;
-    margin-left: -60px;
-    border-radius: 3px;
-    overflow: hidden;
-  }
-  &-item {
-    width: 120px;
-    height: 28px;
-    padding: 0 12px;
-    line-height: 26px;
-    font-size: 14px;
-    border-width: 0px 1px 1px;
-    border-style: solid;
-    cursor: pointer;
-    &:first-of-type {
-      border-top-width: 1px;
-    }
-  }
-}
-// 颜色
-.doc-header {
-  // 红色
-  &-red {
-    background-image: $theme-red-header-bg;
-    color: $theme-red-word;
-    .header {
-      &-logo {
-        .logo-link {
-          background: url('../../assets/images/logo-header-white.png') no-repeat center/100%;
-        }
-        .logo-border {
-          background: $theme-red-border;
-        }
-      }
-      &-nav {
-        .search-box {
-          .search-input {
-            color: $theme-red-word;
-            background-position: 0 0;
-            &::-webkit-input-placeholder {
-              color: $theme-red-input;
-            }
-          }
-        }
-        .nav-box {
-          .nav-item {
-            color: $theme-red-word;
-            a {
-              color: $theme-red-word;
-            }
-            &.active {
-              color: $theme-red-actice;
-              &:after {
-                background-position: 0 0;
-              }
-              a {
-                color: $theme-red-actice;
-              }
-            }
-          }
-          .user-link {
-            background-position: 0 0;
-            // &:hover {
-            //   background-position: -26px 0;
-            // }
-          }
-        }
-      }
-    }
-    .header-select {
-      &-box {
-        &.select-down {
-          .header-select-hd {
-            background-image: url('../../assets/images/icon-select-white-down.png');
-          }
-        }
-        &.select-up {
-          .header-select-hd {
-            background-image: url('../../assets/images/icon-select-white-up.png');
-          }
-        }
-      }
-      &-hd {
-        color: $theme-red-word;
-        border: 1px solid $theme-white-select-border;
-      }
-      &-bd {
-        color: $theme-white-select-word;
-      }
-      &-item {
-        border-color: $theme-red-select-border;
-        background-color: $theme-red-select-bg;
-        &:hover {
-          color: $theme-red;
-        }
-      }
-    }
-  }
-  // 白色
-  &-white {
-    background: $white;
-    color: $theme-white-word;
-    border-bottom: 1px solid $theme-white-box-border;
-    .header {
-      &-logo {
-        .logo-link {
-          background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
-        }
-        .logo-border {
-          background: $theme-white-border;
-        }
-      }
-      &-nav {
-        .search-box {
-          .search-input {
-            color: $theme-white-word;
-            background-position: 0 -22px;
-            &::-webkit-input-placeholder {
-              color: $theme-white-input;
-            }
-          }
-        }
-        .nav-box {
-          .nav-item {
-            color: $theme-white-word;
-            a {
-              color: $theme-white-word;
-            }
-            &.active {
-              color: $theme-white-actice;
-              &:after {
-                background-position: 0 -13px;
-              }
-              a {
-                color: $theme-white-actice;
-              }
-            }
-          }
-          .user-link {
-            background-position: 0 -25px;
-            // &:hover {
-            //   background-position: -26px -25px;
-            // }
-          }
-        }
-      }
-    }
-    .header-select {
-      &-box {
-        &.select-down {
-          .header-select-hd {
-            background-image: url('../../assets/images/icon-select-gray-down.png');
-          }
-        }
-        &.select-up {
-          .header-select-hd {
-            background-image: url('../../assets/images/icon-select-gray-up.png');
-          }
-        }
-      }
-      &-hd {
-        color: $theme-white-select-word;
-        border: 1px solid $theme-white-select-border;
-      }
-      &-bd {
-        color: $theme-white-select-word;
-      }
-      &-item {
-        border-color: $theme-white-select-border;
-        background-color: $theme-white-select-bg;
-        &:hover {
-          color: $theme-white-actice;
-        }
-      }
-    }
-  }
-  // 黑色
-  &-black {
-    background: black;
-    color: $theme-black-word;
-    border-bottom: 1px solid $theme-black-box-border;
-    .header {
-      &-logo {
-        .logo-link {
-          background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
-        }
-        .logo-border {
-          background: $theme-black-border;
-        }
-      }
-      &-nav {
-        .search-box {
-          .search-input {
-            color: $theme-black-word;
-            background-position: 0 -44px;
-            &::-webkit-input-placeholder {
-              color: $theme-black-input;
-            }
-          }
-        }
-        .nav-box {
-          .nav-item {
-            color: $theme-black-word;
-            a {
-              color: $theme-black-word;
-            }
-            &.active {
-              color: $theme-black-actice;
-              &:after {
-                background-position: 0 -13px;
-              }
-              a {
-                color: $theme-black-actice;
-              }
-            }
-          }
-          .user-link {
-            background-position: 0 -51px;
-            // &:hover {
-            //   background-position: -26px -51px;
-            // }
-          }
-        }
-      }
-    }
-    .header-select {
-      &-box {
-        &.select-down {
-          .header-select-hd {
-            background-image: url('../../assets/images/icon-select-white-down.png');
-          }
-        }
-        &.select-up {
-          .header-select-hd {
-            background-image: url('../../assets/images/icon-select-white-up.png');
-          }
-        }
-      }
-      &-hd {
-        color: $theme-black-select-word;
-        background-color: $theme-black-select-bg;
-        border: 1px solid $theme-black-select-border;
-      }
-      &-bd {
-        color: $theme-black-select-word;
-      }
-      &-item {
-        background-color: $theme-black-select-bg;
-        border-color: $theme-black-select-bg;
-        &:hover {
-          background-color: $theme-black-select-hover;
-          border-color: $theme-black-select-hover;
-        }
-      }
-    }
-  }
-}
-// 下拉列表选择动画效果
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-</style>
diff --git a/src/sites/doc/components/Issue.vue b/src/sites/doc/components/Issue.vue
deleted file mode 100644
index 7f88753ff4..0000000000
--- a/src/sites/doc/components/Issue.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div class="doc-content-issue">
-    <a class="issue-item" href="https://github.com/jdf2e/nutui/issues" target="_blank">
-      <Uploader name="uploader"></Uploader>
-      Issue
-    </a>
-    <a
-      class="issue-item"
-      :href="'https://github.com/jdf2e/nutui/issues?q=is:issue+is:open+' + component"
-      target="_blank"
-    >
-      <Issue name="issue"></Issue>
-      Open
-    </a>
-    <a
-      class="issue-item"
-      :href="'https://github.com/jdf2e/nutui/issues?q=is:issue+is:closed+' + component"
-      target="_blank"
-    >
-      <Checklist name="checklist"></Checklist>
-      Closed
-    </a>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
-import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
-import { RefData } from '@/sites/assets/util/ref';
-import { Checklist, Issue, Uploader } from '@nutui/icons-vue';
-export default defineComponent({
-  name: 'doc-issue',
-  components: { Checklist, Issue, Uploader },
-  setup() {
-    const route = useRoute();
-
-    const state = reactive({
-      component: ''
-    });
-
-    const watchDemoUrl = (router: RouteLocationNormalized) => {
-      state.component = router.name;
-    };
-
-    onMounted(() => {
-      watchDemoUrl(route);
-    });
-
-    onBeforeRouteUpdate((to) => {
-      watchDemoUrl(to);
-    });
-
-    return {
-      ...toRefs(state)
-    };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.doc-content-issue {
-  // position: absolute;
-  // right: 605px;
-  // top: 51px;
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  padding: 4px;
-  height: 40px;
-  // background: var(--bg-color-component-transparent);
-  border-radius: 6px;
-  align-items: center;
-  background: #fff;
-  box-shadow: 0px 1px 7px 0px #edeef1;
-  .issue-item {
-    display: flex;
-    align-items: center;
-    border-radius: var(--border-radius);
-    transition: all 0.2s ease 0s;
-    display: flex;
-    align-items: center;
-    padding: 5px 8px;
-    line-height: 22px;
-    font-size: 16px;
-    color: #333;
-    cursor: pointer;
-    text-decoration: none;
-    border-radius: 2px;
-    .nut-icon {
-      font-size: 12px;
-      // width: 16px;
-      // height: 16px;
-      margin-right: 5px;
-    }
-    &:hover {
-      color: #000;
-      background: rgba(64, 69, 82, 0.1);
-    }
-  }
-}
-</style>
diff --git a/src/sites/doc/components/demo-block/demoBlock.vue b/src/sites/doc/components/demo-block/demoBlock.vue
index dc68c113d2..d40cca404e 100644
--- a/src/sites/doc/components/demo-block/demoBlock.vue
+++ b/src/sites/doc/components/demo-block/demoBlock.vue
@@ -3,7 +3,7 @@
     <slot></slot>
     <div class="online-part">
       <template v-if="codeType === 'vue'">
-        <a class="list" :href="jumpHref1" target="_blank">
+        <a class="list" :href="playgroundUrl" target="_blank">
           <img
             class="online-icon"
             src="https://img11.360buyimg.com/imagetools/jfs/t1/159023/13/28499/5084/620f4c48E244573d5/28bfddee9718336e.png"
@@ -11,7 +11,7 @@
           <div class="online-tips">codesandbox</div>
         </a>
       </template>
-      <a class="list" :href="jumpHref" target="_blank">
+      <a class="list" :href="codeSandBoxUrl" target="_blank">
         <img
           class="online-icon"
           src="https://img12.360buyimg.com/imagetools/jfs/t1/214225/34/8715/7002/61c31bf1E69324ee9/7a452063eba88be4.png"
@@ -28,44 +28,18 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { ref, getCurrentInstance, onMounted, computed } from 'vue';
-import { compressText, copyCodeHtml, decompressText } from './basedUtil';
-
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { copyCodeHtml, decompressText } from './basedUtil';
 import { getParameters } from 'codesandbox/lib/api/define';
-import codesandboxPackage from './demoCodePackage.json'; // 引入josn文件
-import codesandboxtsconfig from './demoCodetsconfig.json'; // 引入ts文件
-import codesandboxNode from './demoCodetsconfig.json'; // 引入ts文件
-
-export default {
-  setup(props, ctx) {
-    const sourceMainReactJsStr = `//import VConsole from "vconsole";
-//var vConsole = new VConsole();
-import React from "react";
-import ReactDOM from "react-dom";
-import '@nutui/nutui-react/dist/style.css'
-import App from "./app.jsx";
-import "./app.scss";
-ReactDOM.render(
-  <App/>,
-  document.getElementById("app")
-);`;
-    const sourceMainJsStr = `//import VConsole from "vconsole";
-//var vConsole = new VConsole();
-import { createApp } from "vue";
-import App from "./app.vue";
-import NutUI from "@nutui/nutui";
-import "./app.scss";
-import "@nutui/nutui/dist/style.css";
-createApp(App).use(NutUI).mount("#app");`;
+import codesandboxPackage from './package.json'; // 引入josn文件
+import codesandboxtsconfig from './tsconfig.json'; // 引入ts文件
 
-    const MainJsStr = `import { createApp } from "vue";
+const APP_VUE = `import { createApp } from "vue";
 import App from "./App.vue";
-import NutUI from "@nutui/nutui";
-import "@nutui/nutui/dist/style.css";
-createApp(App).use(NutUI).mount("#app");`;
+createApp(App).mount("#app");`;
 
-    const codesandboxHtml = `<!DOCTYPE html> 
+const INDEX_HTML = `<!DOCTYPE html> 
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -79,76 +53,81 @@ createApp(App).use(NutUI).mount("#app");`;
   </body>
 </html>`;
 
-    const codesandboxVite = `import { defineConfig } from 'vite'
+const VITE_CONFIG = `// vite.config.js
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import NutUIResolver from '@nutui/nutui/dist/resolver'
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
-});`;
-
-    const onlineCode = ref(null);
-    const codeType = ref(``);
-    const sourceMainJs = compressText(sourceMainJsStr);
-    const mainJs = ref(sourceMainJs);
+  plugins: [
+    vue(),
+    Components({ resolvers: [NutUIResolver()] }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@import "@nutui/nutui/dist/styles/variables.scss";'
+      }
+    }
+  }
+})`;
 
-    const sourceMainReactJs = compressText(sourceMainReactJsStr);
-    const mainReactJs = ref(sourceMainReactJs);
+const onlineCode = ref<any>(null);
+const codeType = ref(``);
+const codeSandBoxUrl = ref(``);
+const playgroundUrl = ref(``);
 
-    const jumpHref = ref(``);
-    const jumpHref1 = ref(``);
-    onMounted(() => {
-      const sourceValue = decompressText(onlineCode.value.dataset.value);
-      codeType.value = onlineCode.value.dataset.type;
-      const parameters = getParameters({
-        files: {
-          'package.json': {
-            content: codesandboxPackage
-          },
-          'tsconfig.json': {
-            content: codesandboxtsconfig
-          },
-          'tsconfig.node.json': {
-            content: codesandboxNode
-          },
-          'vite.config.ts': {
-            content: codesandboxVite
-          },
-          'index.html': {
-            content: codesandboxHtml
-          },
-          'src/main.ts': {
-            content: MainJsStr
-          },
-          'src/App.vue': {
-            content: sourceValue
-          }
-        }
-      });
+const utoa = (data: string) => {
+  return btoa(unescape(encodeURIComponent(data)));
+};
 
-      // const query = 'resolutionWidth=414&resolutionHeight=736';
-      const query = 'file=/src/App.vue';
+const serialize = () => {
+  const files = {
+    'src/App.vue': decompressText(onlineCode.value.dataset.value)
+  };
+  return '#' + utoa(JSON.stringify(files));
+};
 
-      if (codeType === 'react') {
-        jumpHref.value = `https://codehouse.jd.com/?source=share&type=react&mainJs=${mainReactJs.value}&appValue=${onlineCode.value.dataset.value}&scssValue=`;
-      } else {
-        jumpHref1.value = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}&query=${query}&resolutionHeight=736`;
-        jumpHref.value = `https://codehouse.jd.com/?source=share&type=vue&mainJs=${mainJs.value}&appValue=${onlineCode.value.dataset.value}&scssValue=`;
+onMounted(() => {
+  const sourceValue = decompressText(onlineCode.value.dataset.value);
+  codeType.value = onlineCode.value.dataset.type;
+  const parameters = getParameters({
+    files: {
+      'package.json': {
+        content: codesandboxPackage,
+        isBinary: false
+      },
+      'tsconfig.json': {
+        content: codesandboxtsconfig,
+        isBinary: false
+      },
+      'vite.config.ts': {
+        content: VITE_CONFIG,
+        isBinary: false
+      },
+      'index.html': {
+        content: INDEX_HTML,
+        isBinary: false
+      },
+      'src/main.ts': {
+        content: APP_VUE,
+        isBinary: false
+      },
+      'src/App.vue': {
+        content: sourceValue,
+        isBinary: false
       }
-    });
-    const copyCode = () => {
-      const sourceValue = decompressText(onlineCode.value.dataset.value);
-      copyCodeHtml(sourceValue, () => {
-        alert('复制成功');
-      });
-    };
-    return {
-      jumpHref,
-      jumpHref1,
-      onlineCode,
-      copyCode,
-      codeType
-    };
-  }
+    }
+  });
+  const query = 'file=/src/App.vue';
+  playgroundUrl.value = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}&query=${query}&resolutionHeight=736`;
+  codeSandBoxUrl.value = `https://nutui.jd.com/playground/${serialize()}`;
+});
+const copyCode = () => {
+  const sourceValue = decompressText(onlineCode.value.dataset.value);
+  copyCodeHtml(sourceValue, () => {
+    alert('复制成功');
+  });
 };
 </script>
diff --git a/src/sites/doc/components/demo-block/demoCodeNode.json b/src/sites/doc/components/demo-block/demoCodeNode.json
deleted file mode 100644
index e993792cb1..0000000000
--- a/src/sites/doc/components/demo-block/demoCodeNode.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/src/sites/doc/components/demo-block/demoCodePackage.json b/src/sites/doc/components/demo-block/demoCodePackage.json
deleted file mode 100644
index 2f1b5ecf66..0000000000
--- a/src/sites/doc/components/demo-block/demoCodePackage.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "nutui3-vite-demo",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@nutui/nutui": "^3.1.20",
-    "vue": "^3.2.25"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^2.2.0",
-    "typescript": "^4.5.4",
-    "vite": "^2.8.0",
-    "vue-tsc": "^0.29.8"
-  }
-}
diff --git a/src/sites/doc/components/demo-block/package.json b/src/sites/doc/components/demo-block/package.json
new file mode 100644
index 0000000000..43ea78a64b
--- /dev/null
+++ b/src/sites/doc/components/demo-block/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "nutui-vite-demo",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@nutui/nutui": "^4.0.12",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "unplugin-vue-components": "^0.25.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.3",
+    "vue-tsc": "^1.8.4"
+  }
+}
diff --git a/src/sites/doc/components/demo-block/demoCodetsconfig.json b/src/sites/doc/components/demo-block/tsconfig.json
similarity index 84%
rename from src/sites/doc/components/demo-block/demoCodetsconfig.json
rename to src/sites/doc/components/demo-block/tsconfig.json
index af31eb8152..8617c8a54f 100644
--- a/src/sites/doc/components/demo-block/demoCodetsconfig.json
+++ b/src/sites/doc/components/demo-block/tsconfig.json
@@ -11,6 +11,5 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/src/sites/doc/views/Index.vue b/src/sites/doc/views/Index.vue
index 62db03fa5b..51583c62f5 100644
--- a/src/sites/doc/views/Index.vue
+++ b/src/sites/doc/views/Index.vue
@@ -6,7 +6,6 @@
       <div class="doc-title">
         <div class="doc-title-position" :class="{ fixed: fixed, hidden: hidden }">
           <div class="title">{{ componentName.name }}&nbsp;{{ componentName.cName }}</div>
-          <doc-issue class=""></doc-issue>
         </div>
       </div>
       <div class="doc-content-document isComponent">
@@ -27,22 +26,20 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
+import { defineComponent, onMounted, reactive, toRefs } from 'vue';
 import { nav } from '@/config.json';
 import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
-import Header from '@/sites/doc/components/Header.vue';
+import DocHeader from '@/sites/doc/components/DocHeader.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
-import Issue from '@/sites/doc/components/Issue.vue';
 import { RefData } from '@/sites/assets/util/ref';
 import { initSiteLang } from '@/sites/assets/util/useTranslate';
 export default defineComponent({
   name: 'doc',
   components: {
-    [Header.name]: Header,
+    DocHeader,
     [Nav.name]: Nav,
-    [DemoPreview.name]: DemoPreview,
-    [Issue.name]: Issue
+    [DemoPreview.name]: DemoPreview
   },
   setup() {
     const route = useRoute();