From 9fef12173e8293fb059799be2830fc90b6d1d749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=80=A1=E6=9E=97?= <huangyilin16@qq.com>
Date: Mon, 25 Dec 2023 19:04:14 +0800
Subject: [PATCH] [drawer]: fixed docs bug of drawer. (#1201)

* fix(docs): fixed some bugs of demo

* fix(steps): Optimized steps docs

* fix(timeline): [time-line] Optimized timeline api docs

* fix(tree-menu): [tree-menu] Optimized treeMenu docs

* fix(tree-menu): [tree-menu] ellipse props did not work

* fix(time-line): [time-line] fixed time-field props can't link to demo

* docs(drawer): [drawer] Optimized drawer api and demo docs.

* test(drawer): [drawer] fix e2e case
---
 .../drawer/confirm-event-composition-api.vue  |   2 +-
 .../demos/pc/app/drawer/confirm-event.vue     |   2 +-
 .../demos/pc/app/drawer/webdoc/drawer.cn.md   |   2 +-
 .../demos/pc/app/drawer/webdoc/drawer.en.md   |   7 +
 .../demos/pc/app/drawer/webdoc/drawer.js      | 147 ++++++++++++------
 .../pc/app/drawer/z-index-composition-api.vue |   2 +-
 .../sites/demos/pc/app/drawer/z-index.spec.ts |   2 +-
 .../sites/demos/pc/app/drawer/z-index.vue     |   2 +-
 8 files changed, 110 insertions(+), 56 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/drawer/webdoc/drawer.en.md

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 32f9d04ec..e3b980e3b 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
@@ -28,6 +28,6 @@ function fn() {
 }
 
 function confirm() {
-  Modal.message('确认事件')
+  Modal.message({ message: '确认事件', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event.vue b/examples/sites/demos/pc/app/drawer/confirm-event.vue
index b6d932fa2..759a4d1aa 100644
--- a/examples/sites/demos/pc/app/drawer/confirm-event.vue
+++ b/examples/sites/demos/pc/app/drawer/confirm-event.vue
@@ -35,7 +35,7 @@ export default {
       this.visible = true
     },
     confirm() {
-      Modal.message('确认事件')
+      Modal.message({ message: '确认事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.cn.md b/examples/sites/demos/pc/app/drawer/webdoc/drawer.cn.md
index d30c2ac16..8eed4beea 100644
--- a/examples/sites/demos/pc/app/drawer/webdoc/drawer.cn.md
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.cn.md
@@ -4,4 +4,4 @@ title: Drawer 抽屉
 
 # Drawer 抽屉
 
-<div></div>
+<div>从页面侧边弹出的内容容器。</div>
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.en.md b/examples/sites/demos/pc/app/drawer/webdoc/drawer.en.md
new file mode 100644
index 000000000..dd0e1e1c4
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.en.md
@@ -0,0 +1,7 @@
+---
+title: Drawer
+---
+
+# Drawer
+
+<div>The content container that pops out from the side of the page.</div>
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
index 4381e2699..2c48daf74 100644
--- a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
@@ -5,15 +5,14 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>详细用法参考如下示例</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>详细用法参考如下示例。</p>', 'en-US': '' },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'placement',
       'name': { 'zh-CN': '抽屉方向', 'en-US': '' },
       'desc': {
-        'zh-CN':
-          '<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>left | right | top | bottom</code>，默认值为 <code>right</code>。</p>',
+        'zh-CN': `<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>'left' | 'right' | 'top' | 'bottom'</code>，默认值为 <code>'right'</code>。</p>`,
         'en-US': ''
       },
       'codeFiles': ['placement.vue']
@@ -21,7 +20,10 @@ export default {
     {
       'demoId': 'width',
       'name': { 'zh-CN': '抽屉宽度', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 <code>500px</code></p>', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 <code>500px</code>。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['width.vue']
     },
     {
@@ -83,7 +85,7 @@ export default {
     {
       'demoId': 'default-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>自定义抽屉主体内容</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>自定义抽屉主体内容。</p>', 'en-US': '' },
       'codeFiles': ['default-slot.vue']
     },
     {
@@ -128,39 +130,24 @@ export default {
       'name': 'drawer',
       'type': 'component',
       'props': [
-        {
-          'name': 'visible',
-          'type': 'boolean',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '控制抽屉显示与关闭', 'en-US': '' },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'placement',
-          'type': `'left' | 'right' | 'top' | 'bottom' `,
-          'defaultValue': 'right',
-          'desc': { 'zh-CN': '添加 placement 属性设置抽屉的方向', 'en-US': '' },
-          'demoId': 'placement'
-        },
-        {
-          'name': 'width',
-          'type': 'string',
-          'defaultValue': '500px',
-          'desc': { 'zh-CN': '设置抽屉的宽度', 'en-US': '' },
-          'demoId': 'width'
-        },
         {
           'name': 'dragable',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '控制抽屉开启或关闭宽度拖拽功能', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制抽屉开启或关闭宽度拖拽功能',
+            'en-US': ''
+          },
           'demoId': 'dragable'
         },
         {
           'name': 'mask',
           'type': 'boolean',
           'defaultValue': 'true',
-          'desc': { 'zh-CN': '控制遮罩层显示隐藏 ', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制遮罩层显示隐藏 ',
+            'en-US': ''
+          },
           'demoId': 'mask'
         },
         {
@@ -173,32 +160,74 @@ export default {
           },
           'demoId': 'mask-closable'
         },
+        {
+          'name': 'placement',
+          'type': "'left' | 'right' | 'top' | 'bottom' ",
+          'defaultValue': "'right'",
+          'desc': {
+            'zh-CN': '添加 placement 属性设置抽屉的方向',
+            'en-US': ''
+          },
+          'demoId': 'placement'
+        },
         {
           'name': 'show-close',
           'type': 'boolean',
           'defaultValue': 'true',
-          'desc': { 'zh-CN': '控制关闭图标显示', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制关闭图标显示',
+            'en-US': ''
+          },
           'demoId': 'show-close'
         },
-        {
-          'name': 'show-header',
-          'type': 'boolean',
-          'defaultValue': 'true',
-          'desc': { 'zh-CN': '控制头部显示', 'en-US': '' },
-          'demoId': 'show-header'
-        },
         {
           'name': 'show-footer',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '控制底部显示', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制底部显示',
+            'en-US': ''
+          },
           'demoId': 'show-footer'
         },
+        {
+          'name': 'show-header',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '控制头部显示',
+            'en-US': ''
+          },
+          'demoId': 'show-header'
+        },
+        {
+          'name': 'visible',
+          'type': 'boolean',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '控制抽屉显示与关闭',
+            'en-US': ''
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'width',
+          'type': 'string',
+          'defaultValue': "'500px'",
+          'desc': {
+            'zh-CN': '设置抽屉的宽度',
+            'en-US': ''
+          },
+          'demoId': 'width'
+        },
         {
           'name': 'z-index',
           'type': 'number',
           'defaultValue': '2000',
-          'desc': { 'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）', 'en-US': '' },
+          'desc': {
+            'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
+            'en-US': ''
+          },
           'demoId': 'z-index'
         }
       ],
@@ -207,14 +236,20 @@ export default {
           'name': 'close',
           'type': '()=> void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '关闭抽屉事件', 'en-US': '' },
+          'desc': {
+            'zh-CN': '关闭抽屉事件',
+            'en-US': ''
+          },
           'demoId': 'close-event'
         },
         {
           'name': 'confirm',
           'type': '()=> void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '确认事件，设置 :show-footer="true" 时有效', 'en-US': '' },
+          'desc': {
+            'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
+            'en-US': ''
+          },
           'demoId': 'confirm-event'
         }
       ],
@@ -223,29 +258,41 @@ export default {
           'name': 'default',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
+          'desc': {
+            'zh-CN': '默认插槽',
+            'en-US': ''
+          },
           'demoId': 'default-slot'
         },
+        {
+          'name': 'footer',
+          'type': '--',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '底部插槽',
+            'en-US': ''
+          },
+          'demoId': 'footer-slot'
+        },
         {
           'name': 'header',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '头部插槽', 'en-US': '' },
+          'desc': {
+            'zh-CN': '头部插槽',
+            'en-US': ''
+          },
           'demoId': 'header-slot'
         },
         {
           'name': 'header-right',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
+          'desc': {
+            'zh-CN': '头部右侧插槽',
+            'en-US': ''
+          },
           'demoId': 'header-right-slot'
-        },
-        {
-          'name': 'footer',
-          '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 ce2c5e4f8..110dab8ea 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
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
+    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
       <div>
         <br />
diff --git a/examples/sites/demos/pc/app/drawer/z-index.spec.ts b/examples/sites/demos/pc/app/drawer/z-index.spec.ts
index d123ab979..6ceecb723 100644
--- a/examples/sites/demos/pc/app/drawer/z-index.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/z-index.spec.ts
@@ -5,6 +5,6 @@ test('自定义堆叠顺序', async ({ page }) => {
   await page.goto('drawer#z-index')
 
   const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '自定义z-index' }).click()
+  await page.getByRole('button', { name: '自定义 z-index' }).click()
   await expect(drawer).toHaveCSS('z-index', '3000')
 })
diff --git a/examples/sites/demos/pc/app/drawer/z-index.vue b/examples/sites/demos/pc/app/drawer/z-index.vue
index 231b4259d..c1c533268 100644
--- a/examples/sites/demos/pc/app/drawer/z-index.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
+    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
       <div>
         <br />