diff --git a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
index 7e835af65..3e198d51c 100644
--- a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
+++ b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
@@ -287,7 +287,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
-          'demoId': 'show-title'
+          'demoId': 'manual-play'
         }
       ],
       'slots': [
diff --git a/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js b/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
index c8e06735a..6f3f01e71 100644
--- a/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
+++ b/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
@@ -88,16 +88,6 @@ export default {
       'name': 'color-picker',
       'type': 'component',
       'props': [
-        {
-          'name': 'modelValue',
-          'type': 'string',
-          'defaultValue': `'transparent'`,
-          desc: {
-            'zh-CN': '默认颜色',
-            'en-US': 'default color'
-          },
-          demoId: 'basic-usage'
-        },
         {
           name: 'visible',
           type: 'boolean',
diff --git a/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js b/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
index 5fe44643e..63b66d3a2 100644
--- a/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
+++ b/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
@@ -60,16 +60,6 @@ export default {
       'name': 'color select panel',
       'type': 'component',
       'props': [
-        {
-          name: 'modelValue',
-          type: 'String',
-          defaultValue: 'transparent',
-          desc: {
-            'zh-CN': '默认颜色',
-            'en-US': 'default color'
-          },
-          demoId: 'basic-usage'
-        },
         {
           name: 'visible',
           type: 'boolean',
diff --git a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.cn.md b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.cn.md
index 037a1e90b..e289f016f 100644
--- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.cn.md
+++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.cn.md
@@ -1,7 +1,7 @@
 ---
-title: ConfigProvide 组件
+title: ConfigProvider 组件
 ---
 
-# ConfigProvide 组件
+# ConfigProvider 组件
 
 <div></div>
diff --git a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
index 98232ef70..cfef382a2 100644
--- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
+++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
@@ -48,19 +48,12 @@ export default {
           },
           'demoId': 'base'
         },
-        {
-          'name': 'breakPoints',
-          'type': 'breakPoint',
-          'defaultValue': "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}",
-          'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': 'Breakpoints, providing layout with' },
-          'demoId': 'base'
-        },
         {
           'name': 'direction',
           'type': "'ltr' | 'rtl'",
           'defaultValue': 'ltr',
           'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
-          'demoId': 'text-dire'
+          'demoId': 'text-direct'
         },
         {
           'name': 'tag',
@@ -71,7 +64,7 @@ export default {
             'en-US':
               'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
           },
-          'demoId': 'base'
+          'demoId': 'tag'
         }
       ],
       'events': [],
diff --git a/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue b/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
index cc5113db1..90b2541d5 100644
--- a/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
@@ -10,6 +10,7 @@
       :preview="true"
       :quality="0.5"
       max-size="300KB"
+      @setAspectRatio="setAspectRatio"
     ></tiny-crop>
   </div>
 </template>
@@ -20,4 +21,11 @@ import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+
+function setAspectRatio(aspectRatio) {
+  Modal.message({
+    message: `宽高比数据: ${JSON.stringify(aspectRatio)}`,
+    status: 'info'
+  })
+}
 </script>
diff --git a/examples/sites/demos/pc/app/crop/aspect-ratio.vue b/examples/sites/demos/pc/app/crop/aspect-ratio.vue
index 06a49b8ba..939327ed1 100644
--- a/examples/sites/demos/pc/app/crop/aspect-ratio.vue
+++ b/examples/sites/demos/pc/app/crop/aspect-ratio.vue
@@ -10,6 +10,7 @@
       :preview="true"
       :quality="0.5"
       max-size="300KB"
+      @setAspectRatio="setAspectRatio"
     ></tiny-crop>
   </div>
 </template>
@@ -27,6 +28,14 @@ export default {
       visible: false,
       imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
     }
+  },
+  methods: {
+    setAspectRatio(aspectRatio) {
+      Modal.message({
+        message: `宽高比数据: ${JSON.stringify(aspectRatio)}`,
+        status: 'info'
+      })
+    }
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue b/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
index 5ebd56df2..70dba9982 100644
--- a/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
@@ -11,6 +11,8 @@
       @cropmove="cropmove"
       @cropend="cropend"
       @crop="crop"
+      @cropdata="cropdata"
+      enable
     ></tiny-crop>
   </div>
 </template>
@@ -30,6 +32,13 @@ function getCanvasData() {
   })
 }
 
+function cropdata(data) {
+  Modal.message({
+    message: `Canvas 数据：${JSON.stringify(data)}`,
+    status: 'info'
+  })
+}
+
 function cropstart(e) {
   Modal.message({
     message: 'cropstart 事件，回调参数：' + e,
diff --git a/examples/sites/demos/pc/app/crop/event-about-crop.vue b/examples/sites/demos/pc/app/crop/event-about-crop.vue
index 24654ce45..13ef9f17c 100644
--- a/examples/sites/demos/pc/app/crop/event-about-crop.vue
+++ b/examples/sites/demos/pc/app/crop/event-about-crop.vue
@@ -11,6 +11,8 @@
       @cropmove="cropmove"
       @cropend="cropend"
       @crop="crop"
+      @cropdata="cropdata"
+      enable
     ></tiny-crop>
   </div>
 </template>
@@ -36,6 +38,12 @@ export default {
         status: 'info'
       })
     },
+    cropdata(data) {
+      Modal.message({
+        message: `Canvas 数据：${JSON.stringify(data)}`,
+        status: 'info'
+      })
+    },
     cropstart(e) {
       Modal.message({
         message: 'cropstart 事件，回调参数：' + e,
diff --git a/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue b/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
index b5d77e5b4..2ae9484c1 100644
--- a/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
@@ -4,7 +4,13 @@
       获取裁剪后的图片数据
     </tiny-button>
     <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
-    <tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
+    <tiny-crop
+      ref="cropRef"
+      :cropvisible="visible"
+      @update:cropvisible="visible = $event"
+      :src="imgUrl"
+      :crop-type="blob"
+    ></tiny-crop>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue b/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
index c700ad057..b1064b3fa 100644
--- a/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
@@ -4,7 +4,13 @@
       获取裁剪后的图片数据
     </tiny-button>
     <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
-    <tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
+    <tiny-crop
+      ref="crop"
+      :cropvisible="visible"
+      @update:cropvisible="visible = $event"
+      :src="imgUrl"
+      :crop-type="blob"
+    ></tiny-crop>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue b/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
index 0d6b287d8..02b232c5e 100644
--- a/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
+    <tiny-button @click="getCanvasData" style="margin-bottom: 20px">获取画布位置和大小数据</tiny-button>
     <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
     <tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
   </div>
@@ -20,4 +21,10 @@ function getImageData() {
     status: 'info'
   })
 }
+function getCanvasData() {
+  Modal.message({
+    message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
+    status: 'info'
+  })
+}
 </script>
diff --git a/examples/sites/demos/pc/app/crop/get-image-data.vue b/examples/sites/demos/pc/app/crop/get-image-data.vue
index 590695306..69739589d 100644
--- a/examples/sites/demos/pc/app/crop/get-image-data.vue
+++ b/examples/sites/demos/pc/app/crop/get-image-data.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
+    <tiny-button @click="getCanvasData" style="margin-bottom: 20px">获取画布位置和大小数据</tiny-button>
     <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
     <tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
   </div>
@@ -26,6 +27,12 @@ export default {
         message: `图像数据：${JSON.stringify(this.$refs.crop.getImageData())}`,
         status: 'info'
       })
+    },
+    getCanvasData() {
+      Modal.message({
+        message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
+        status: 'info'
+      })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
index a7bc86b2d..4483f8d8a 100644
--- a/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
-    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
       <template #title>
         <div class="header">
           <span class="title">标题区</span>
diff --git a/examples/sites/demos/pc/app/dialog-box/right-dialog.vue b/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
index 6e2952103..c46c98dc2 100644
--- a/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
+++ b/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
-    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
       <template #title>
         <div class="header">
           <span class="title">标题区</span>