From e3cff642e3934d5152f2d3d1ca2018e2e554e751 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 22 Nov 2023 17:08:34 -0800
Subject: [PATCH] docs(drawer): [drawer] Optimize document and e2e test (#888)

---
 .../drawer/basic-usage-composition-api.vue    |  6 +-
 .../demos/pc/app/drawer/basic-usage.spec.ts   |  2 +-
 .../sites/demos/pc/app/drawer/basic-usage.vue |  6 +-
 .../drawer/close-event-composition-api.vue    |  6 +-
 .../sites/demos/pc/app/drawer/close-event.vue |  6 +-
 .../drawer/confirm-event-composition-api.vue  |  6 +-
 .../demos/pc/app/drawer/confirm-event.vue     |  6 +-
 .../demos/pc/app/drawer/dragable.spec.ts      |  1 +
 .../drawer/footer-slot-composition-api.vue    |  6 +-
 .../demos/pc/app/drawer/footer-slot.spec.ts   |  4 +-
 .../sites/demos/pc/app/drawer/footer-slot.vue |  6 +-
 .../header-right-slot-composition-api.vue     |  6 +-
 .../demos/pc/app/drawer/header-right-slot.vue |  6 +-
 .../drawer/header-slot-composition-api.vue    |  6 +-
 .../sites/demos/pc/app/drawer/header-slot.vue | 17 +++++-
 .../demos/pc/app/drawer/mask-closable.spec.ts |  2 +-
 .../app/drawer/placement-composition-api.vue  |  6 +-
 .../sites/demos/pc/app/drawer/placement.vue   |  6 +-
 .../app/drawer/show-close-composition-api.vue |  6 +-
 .../sites/demos/pc/app/drawer/show-close.vue  |  6 +-
 .../drawer/show-footer-composition-api.vue    |  6 +-
 .../sites/demos/pc/app/drawer/show-footer.vue |  6 +-
 .../demos/pc/app/drawer/webdoc/drawer.js      | 56 +++++++++++--------
 .../pc/app/drawer/z-index-composition-api.vue |  6 +-
 .../sites/demos/pc/app/drawer/z-index.vue     |  6 +-
 25 files changed, 151 insertions(+), 45 deletions(-)

diff --git a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
index f0a3457a9..a2adf479d 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts b/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
index dd0b7ad14..a10122a70 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
@@ -10,5 +10,5 @@ test('基本用法', async ({ page }) => {
   await expect(drawer.locator('.tiny-drawer__header')).toHaveText('标题')
   await expect(drawer.locator('.tiny-drawer__body')).toHaveText('内容区域')
   await drawer.getByRole('button', { name: 'Close' }).click()
-  await expect(drawer).not.toBeVisible()
+  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage.vue b/examples/sites/demos/pc/app/drawer/basic-usage.vue
index cf7e094fb..2d87857be 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
index 52be6cdb9..2a4acf47d 100644
--- a/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
     <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/close-event.vue b/examples/sites/demos/pc/app/drawer/close-event.vue
index 958369a22..02e317fbd 100644
--- a/examples/sites/demos/pc/app/drawer/close-event.vue
+++ b/examples/sites/demos/pc/app/drawer/close-event.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
     <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
index ea1ed1580..32f9d04ec 100644
--- a/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
@@ -8,7 +8,11 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event.vue b/examples/sites/demos/pc/app/drawer/confirm-event.vue
index 2743e8e85..b6d932fa2 100644
--- a/examples/sites/demos/pc/app/drawer/confirm-event.vue
+++ b/examples/sites/demos/pc/app/drawer/confirm-event.vue
@@ -8,7 +8,11 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/dragable.spec.ts b/examples/sites/demos/pc/app/drawer/dragable.spec.ts
index ad0cb6c95..293ea9b0e 100644
--- a/examples/sites/demos/pc/app/drawer/dragable.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/dragable.spec.ts
@@ -6,6 +6,7 @@ test('宽度拖拽功能', async ({ page }) => {
 
   const drawer = page.locator('.tiny-drawer__main')
   await page.getByRole('button', { name: '宽度拖拽' }).click()
+  await page.waitForTimeout(500)
 
   // 获取拖拽元素的位置
   const { x, y } = await drawer.boundingBox()
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
index 49420f2f2..85ea7a937 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 底部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
 
       <template #footer>
         <div class="my-footer">
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts b/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
index 836ad795c..5dbf77e3b 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
@@ -4,10 +4,12 @@ test('底部插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#footer-slot')
 
-  const drawer = page.locator('#preview .tiny-drawer')
+  const drawer = page.locator('.tiny-drawer')
   const footer = drawer.locator('.tiny-drawer__footer')
 
   await page.getByRole('button', { name: '底部插槽示例' }).click()
+
+  await page.waitForTimeout(300)
   await expect(footer).toBeVisible()
   await expect(footer.locator('> div')).toHaveClass('my-footer')
   await expect(footer).toContainText('自定义底部文本')
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot.vue b/examples/sites/demos/pc/app/drawer/footer-slot.vue
index 37c7a8257..f5e1d4b50 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 底部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
 
       <template #footer>
         <div class="my-footer">
diff --git a/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
index 58064b629..129c8824d 100644
--- a/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
@@ -7,7 +7,11 @@
           <span>自定义头部右侧</span>
         </div>
       </template>
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/header-right-slot.vue b/examples/sites/demos/pc/app/drawer/header-right-slot.vue
index 3a549988b..cd2da0a1e 100644
--- a/examples/sites/demos/pc/app/drawer/header-right-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/header-right-slot.vue
@@ -7,7 +7,11 @@
           <span>自定义头部右侧</span>
         </div>
       </template>
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
index bbbb1eedf..f7f3860ef 100644
--- a/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
@@ -8,7 +8,11 @@
           <p>自定义副标题xxxxxx</p>
         </div>
       </template>
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/header-slot.vue b/examples/sites/demos/pc/app/drawer/header-slot.vue
index 324ccbae2..f26252eaf 100644
--- a/examples/sites/demos/pc/app/drawer/header-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/header-slot.vue
@@ -8,7 +8,11 @@
           <p>自定义副标题xxxxxx</p>
         </div>
       </template>
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
@@ -39,4 +43,15 @@ export default {
   padding: 0 32px;
   border-bottom: 1px solid #ccc;
 }
+
+.my-header h3 {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.7;
+}
+
+.my-header p {
+  font-size: 12px;
+  line-height: 1.5;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts b/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
index bcb7f35b0..9a39de97a 100644
--- a/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
@@ -4,7 +4,7 @@ test('点击遮罩层不关闭', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#mask-closable')
 
-  const drawer = page.locator('#preview .tiny-drawer__main')
+  const drawer = page.locator('.tiny-drawer__main')
   await page.getByRole('button', { name: '单击遮罩层不关闭抽屉' }).click()
   await page.locator('.tiny-drawer__mask').click()
   await expect(drawer).toBeVisible()
diff --git a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
index d76bb8eca..6da54de1c 100644
--- a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
@@ -6,7 +6,11 @@
     <tiny-button @click="fn('bottom')"> bottom </tiny-button>
 
     <tiny-drawer title="标题" :placement="placement" v-model:visible="visible">
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/placement.vue b/examples/sites/demos/pc/app/drawer/placement.vue
index d50fb2877..64c97eaee 100644
--- a/examples/sites/demos/pc/app/drawer/placement.vue
+++ b/examples/sites/demos/pc/app/drawer/placement.vue
@@ -6,7 +6,11 @@
     <tiny-button @click="fn('bottom')"> bottom </tiny-button>
 
     <tiny-drawer title="标题" :placement="placement" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
index b8f8d762d..64c589726 100644
--- a/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/show-close.vue b/examples/sites/demos/pc/app/drawer/show-close.vue
index 332fb482c..c9e39bf29 100644
--- a/examples/sites/demos/pc/app/drawer/show-close.vue
+++ b/examples/sites/demos/pc/app/drawer/show-close.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
index 9fdc9ce55..6b00e363b 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
@@ -3,7 +3,11 @@
     <tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
 
     <tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/show-footer.vue b/examples/sites/demos/pc/app/drawer/show-footer.vue
index c29ef823b..9a3eb52f7 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer.vue
@@ -3,7 +3,11 @@
     <tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
 
     <tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">内容区域</div>
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
index 15d6f60b3..09eddd926 100644
--- a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
@@ -13,7 +13,7 @@ export default {
       'name': { 'zh-CN': '抽屉方向', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 `left|right|top|bottom`，默认值为 `right`。</p>',
+          '<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>left | right | top | bottom</code>，默认值为 <code>right</code>。</p>',
         'en-US': ''
       },
       'codeFiles': ['placement.vue']
@@ -21,19 +21,25 @@ export default {
     {
       'demoId': 'width',
       'name': { 'zh-CN': '抽屉宽度', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 `500px`</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 <code>500px</code></p>', 'en-US': '' },
       'codeFiles': ['width.vue']
     },
     {
       'demoId': 'dragable',
       'name': { 'zh-CN': '宽度拖拽功能', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 false</p>', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 <code>false</code>。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['dragable.vue']
     },
     {
       'demoId': 'mask',
       'name': { 'zh-CN': '遮罩层显示隐藏', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>添加 <code>mask</code> 属性可以控制遮罩层显示隐藏，默认值为 true 。</p>', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>添加 <code>mask</code> 属性可以控制遮罩层显示隐藏，默认值为 <code>true</code> 。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['mask.vue']
     },
     {
@@ -41,7 +47,7 @@ export default {
       'name': { 'zh-CN': '点击遮罩层关闭抽屉', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 false 后将禁用该功能，默认值为 true 。</p>',
+          '<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 <code>false</code> 后将禁用该功能，默认值为 <code>true</code> 。</p>',
         'en-US': ''
       },
       'codeFiles': ['mask-closable.vue']
@@ -49,19 +55,19 @@ export default {
     {
       'demoId': 'show-close',
       'name': { 'zh-CN': '关闭图标显示', 'en-US': '' },
-      'desc': { 'zh-CN': '<p><code>show-close</code> 控制显示关闭图标，默认值为 true</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p><code>show-close</code> 控制显示关闭图标，默认值为 <code>true</code>。</p>', 'en-US': '' },
       'codeFiles': ['show-close.vue']
     },
     {
       'demoId': 'show-header',
       'name': { 'zh-CN': '头部显示', 'en-US': '' },
-      'desc': { 'zh-CN': '<p><code>show-header</code> 控制显示头部，默认值为 true</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p><code>show-header</code> 控制显示头部，默认值为 <code>true</code>。</p>', 'en-US': '' },
       'codeFiles': ['show-header.vue']
     },
     {
       'demoId': 'show-footer',
       'name': { 'zh-CN': '底部显示', 'en-US': '' },
-      'desc': { 'zh-CN': '<p><code>show-footer</code> 控制显示底部，默认值为 false</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p><code>show-footer</code> 控制显示底部，默认值为 <code>false</code>。</p>', 'en-US': '' },
       'codeFiles': ['show-footer.vue']
     },
     {
@@ -83,31 +89,37 @@ export default {
     {
       'demoId': 'header-slot',
       'name': { 'zh-CN': '头部插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>自定义头部内容，当<code>show-header</code>取值为 true 时有效</p>', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>自定义头部内容，当<code>show-header</code>取值为 <code>true</code> 时有效。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['header-slot.vue']
     },
     {
       'demoId': 'header-right-slot',
       'name': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>自定义头部右侧内容，当<code>show-header</code>取值为 true 时有效</p>', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>自定义头部右侧内容，当<code>show-header</code>取值为 <code>true</code> 时有效。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['header-right-slot.vue']
     },
     {
       'demoId': 'footer-slot',
       'name': { 'zh-CN': '底部插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>底部插槽，默认隐藏底部，设置 :show-footer="true" 时有效<p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>底部插槽，默认隐藏底部，设置 <code>:show-footer="true"</code> 时有效。<p>', 'en-US': '' },
       'codeFiles': ['footer-slot.vue']
     },
     {
       'demoId': 'close-event',
       'name': { 'zh-CN': '关闭事件', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>关闭抽屉事件</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>关闭抽屉事件。</p>', 'en-US': '' },
       'codeFiles': ['close-event.vue']
     },
     {
       'demoId': 'confirm-event',
       'name': { 'zh-CN': '确认事件', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>确认事件，设置 :show-footer="true" 时有效</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>确认事件，设置 <code>:show-footer="true"</code> 时有效。</p>', 'en-US': '' },
       'codeFiles': ['confirm-event.vue']
     }
   ],
@@ -125,9 +137,9 @@ export default {
         },
         {
           'name': 'placement',
-          'type': 'string',
+          'type': `'left' | 'right' | 'top' | 'bottom' `,
           'defaultValue': 'right',
-          'desc': { 'zh-CN': '添加 placement 属性设置抽屉的方向，可选值有 left|right|top|bottom', 'en-US': '' },
+          'desc': { 'zh-CN': '添加 placement 属性设置抽屉的方向', 'en-US': '' },
           'demoId': 'placement'
         },
         {
@@ -185,7 +197,7 @@ export default {
         {
           'name': 'z-index',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 2000',
+          'defaultValue': '2000',
           'desc': { 'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）', 'en-US': '' },
           'demoId': 'z-index'
         }
@@ -193,14 +205,14 @@ export default {
       'events': [
         {
           'name': 'close',
-          'type': 'Function(params)',
+          'type': '()=> void',
           'defaultValue': '',
           'desc': { 'zh-CN': '关闭抽屉事件', 'en-US': '' },
           'demoId': 'close-event'
         },
         {
           'name': 'confirm',
-          'type': 'Function(params)',
+          'type': '()=> void',
           'defaultValue': '',
           'desc': { 'zh-CN': '确认事件，设置 :show-footer="true" 时有效', 'en-US': '' },
           'demoId': 'confirm-event'
@@ -209,28 +221,28 @@ export default {
       'slots': [
         {
           'name': 'default',
-          'type': '',
+          'type': '--',
           'defaultValue': '',
           'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
           'demoId': 'default-slot'
         },
         {
           'name': 'header',
-          'type': '',
+          'type': '--',
           'defaultValue': '',
           'desc': { 'zh-CN': '头部插槽', 'en-US': '' },
           'demoId': 'header-slot'
         },
         {
           'name': 'header-right',
-          'type': '',
+          'type': '--',
           'defaultValue': '',
           'desc': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
           'demoId': 'header-right-slot'
         },
         {
           'name': 'footer',
-          'type': '',
+          'type': '--',
           'defaultValue': '',
           'desc': { 'zh-CN': '底部插槽', 'en-US': '' },
           'demoId': 'footer-slot'
diff --git a/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue b/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
index 326341e4f..ce2c5e4f8 100644
--- a/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drawer/z-index.vue b/examples/sites/demos/pc/app/drawer/z-index.vue
index b6e17d10c..231b4259d 100644
--- a/examples/sites/demos/pc/app/drawer/z-index.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index.vue
@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>