From be5f76664e327d7afeaa9e5e2124be3719608f9e Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Wed, 8 Nov 2023 23:58:47 -0800
Subject: [PATCH] docs(dropdown): [dropdown] optimite dropdown demos and api
 docs

---
 .../app/dropdown/disabled-composition-api.vue |  25 +-
 .../sites/demos/pc/app/dropdown/disabled.vue  |  32 +-
 .../app/dropdown/events-composition-api.vue   |  75 ++-
 .../sites/demos/pc/app/dropdown/events.vue    |  71 ++-
 .../hide-on-click-composition-api.vue         |  32 +-
 .../demos/pc/app/dropdown/hide-on-click.vue   |  32 +-
 .../inherit-width-composition-api.vue         |  37 +-
 .../demos/pc/app/dropdown/inherit-width.vue   |  37 +-
 .../dropdown/multi-level-composition-api.vue  |  10 +-
 .../demos/pc/app/dropdown/multi-level.vue     |  43 +-
 .../app/dropdown/options-composition-api.vue  |  22 +-
 .../sites/demos/pc/app/dropdown/options.vue   |  22 +-
 .../dropdown/show-icon-composition-api.vue    |  26 +
 .../sites/demos/pc/app/dropdown/show-icon.vue |  26 +
 .../pc/app/dropdown/size-composition-api.vue  |  20 +-
 examples/sites/demos/pc/app/dropdown/size.vue |  20 +-
 ...tion-api.vue => slots-composition-api.vue} |  16 +-
 .../{slot-default.spec.ts => slots.spec.ts}   |   0
 .../dropdown/{slot-default.vue => slots.vue}  |  21 +-
 .../dropdown/split-button-composition-api.vue |   2 +-
 .../demos/pc/app/dropdown/split-button.vue    |   2 +-
 .../pc/app/dropdown/tip-composition-api.vue   |  10 +-
 examples/sites/demos/pc/app/dropdown/tip.vue  |  10 +-
 .../app/dropdown/trigger-composition-api.vue  |  69 ++-
 .../sites/demos/pc/app/dropdown/trigger.vue   |  81 ++--
 .../visible-arrow-composition-api.vue         |   2 +-
 .../demos/pc/app/dropdown/visible-arrow.vue   |   2 +-
 .../pc/app/dropdown/webdoc/dropdown.cn.md     |   2 +-
 .../pc/app/dropdown/webdoc/dropdown.en.md     |   2 +-
 .../demos/pc/app/dropdown/webdoc/dropdown.js  | 456 +++++++++++-------
 packages/renderless/src/dropdown/index.ts     |   2 +-
 .../renderless/types/dropdown-item.type.ts    |   4 +-
 packages/theme/src/dropdown-item/index.less   |   7 +
 packages/theme/src/dropdown/index.less        |  28 +-
 packages/vue/src/dropdown-item/src/pc.vue     |   8 +-
 packages/vue/src/dropdown/src/pc.vue          |   2 +-
 36 files changed, 800 insertions(+), 456 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/dropdown/show-icon.vue
 rename examples/sites/demos/pc/app/dropdown/{slot-default-composition-api.vue => slots-composition-api.vue} (72%)
 rename examples/sites/demos/pc/app/dropdown/{slot-default.spec.ts => slots.spec.ts} (100%)
 rename examples/sites/demos/pc/app/dropdown/{slot-default.vue => slots.vue} (68%)

diff --git a/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue b/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
index a9555c1260..fe454b1c54 100644
--- a/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
@@ -1,22 +1,19 @@
 <template>
   <div>
-    <tiny-dropdown>
+    <p>场景1：下拉菜单禁用</p>
+    <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
           <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <br />
-    <br />
-    <br />
-
-    <tiny-dropdown disabled>
+    <p>场景2：按钮类型禁用</p>
+    <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@@ -27,6 +24,18 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+    <p>场景3：菜单项禁用</p>
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/dropdown/disabled.vue b/examples/sites/demos/pc/app/dropdown/disabled.vue
index 8f7f152bfa..30c9b8cab4 100644
--- a/examples/sites/demos/pc/app/dropdown/disabled.vue
+++ b/examples/sites/demos/pc/app/dropdown/disabled.vue
@@ -1,22 +1,19 @@
 <template>
   <div>
-    <tiny-dropdown>
+    <p>场景1：下拉菜单禁用</p>
+    <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
           <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <br />
-    <br />
-    <br />
-
-    <tiny-dropdown disabled>
+    <p>场景2：按钮类型禁用</p>
+    <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@@ -27,6 +24,18 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+    <p>场景3：菜单项禁用</p>
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 
@@ -41,3 +50,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
index 5ebf6cebd8..e51e5e7a8e 100644
--- a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
@@ -1,27 +1,63 @@
 <template>
-  <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
-    下拉菜单
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="黄金糕"></tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+
+    <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item
+            v-for="(item, index) in options"
+            :key="index"
+            :label="item.label"
+            :disabled="item.disabled"
+            :divided="item.divided"
+            :icon="item.icon"
+            :item-data="item"
+          ></tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <p>场景2：配置式</p>
+    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem,
   Notify
 } from '@opentiny/vue'
+import { iconStarDisable } from '@opentiny/vue-icon'
+
+const options = [
+  {
+    label: '黄金糕'
+  },
+  {
+    label: '狮子头',
+    disabled: true
+  },
+  {
+    label: '螺蛳粉',
+    divided: true
+  },
+  {
+    label: '双皮奶',
+    icon: iconStarDisable()
+  },
+  {
+    label: '蚵仔煎'
+  }
+]
 
-function itemClick(data) {
+const itemClick = (data) => {
   Notify({
     type: 'info',
     title: 'itemClick 回调事件',
@@ -31,14 +67,21 @@ function itemClick(data) {
   })
 }
 
-function buttonClick() {
+const buttonClick = () => {
   Notify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
 }
 
-function visibleChange(status) {
+const visibleChange = (status) => {
   Notify({
     message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
     status: 'info'
   })
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/events.vue b/examples/sites/demos/pc/app/dropdown/events.vue
index a693eee1f2..ba1c9fee05 100644
--- a/examples/sites/demos/pc/app/dropdown/events.vue
+++ b/examples/sites/demos/pc/app/dropdown/events.vue
@@ -1,20 +1,34 @@
 <template>
-  <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
-    下拉菜单
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="黄金糕"></tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+    <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item
+            v-for="(item, index) in options"
+            :key="index"
+            :label="item.label"
+            :disabled="item.disabled"
+            :divided="item.divided"
+            :icon="item.icon"
+            :item-data="item"
+          ></tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <p>场景2：配置式</p>
+    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Dropdown, DropdownMenu, DropdownItem, Notify } from '@opentiny/vue'
+import { iconStarDisable } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -22,6 +36,30 @@ export default {
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem
   },
+  data() {
+    return {
+      options: [
+        {
+          label: '黄金糕'
+        },
+        {
+          label: '狮子头',
+          disabled: true
+        },
+        {
+          label: '螺蛳粉',
+          divided: true
+        },
+        {
+          label: '双皮奶',
+          icon: iconStarDisable()
+        },
+        {
+          label: '蚵仔煎'
+        }
+      ]
+    }
+  },
   methods: {
     itemClick(data) {
       Notify({
@@ -44,3 +82,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue b/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
index 33ec202279..6cdea16f41 100644
--- a/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
@@ -1,15 +1,18 @@
 <template>
-  <tiny-dropdown :hide-on-click="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>点击后不收起菜单弹框:</p>
+    <tiny-dropdown :hide-on-click="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script setup>
@@ -19,3 +22,10 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/hide-on-click.vue b/examples/sites/demos/pc/app/dropdown/hide-on-click.vue
index 700b7c4ecd..53b80c7491 100644
--- a/examples/sites/demos/pc/app/dropdown/hide-on-click.vue
+++ b/examples/sites/demos/pc/app/dropdown/hide-on-click.vue
@@ -1,15 +1,18 @@
 <template>
-  <tiny-dropdown :hide-on-click="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>点击后不收起菜单弹框:</p>
+    <tiny-dropdown :hide-on-click="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script>
@@ -23,3 +26,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
index e8d1b3bf05..79236e7d5f 100644
--- a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>默认</p>
+    <p>场景1：默认</p>
     <tiny-dropdown split-button type="success">
       更多菜单
       <template #dropdown>
@@ -13,26 +13,33 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>设置inherit-width</p>
+    <p>场景2：设置inherit-width</p>
+    <tiny-dropdown split-button type="success" :inherit-width="true">
+      更多菜单
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
-  <tiny-dropdown split-button type="success" :inherit-width="true">
-    更多菜单
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width.vue b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
index 7a17ca66ba..a1acb0329b 100644
--- a/examples/sites/demos/pc/app/dropdown/inherit-width.vue
+++ b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>默认</p>
+    <p>场景1：默认</p>
     <tiny-dropdown split-button type="success">
       更多菜单
       <template #dropdown>
@@ -13,23 +13,23 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>设置inherit-width</p>
+    <p>场景2：设置inherit-width</p>
+    <tiny-dropdown split-button type="success" :inherit-width="true">
+      更多菜单
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
-  <tiny-dropdown split-button type="success" :inherit-width="true">
-    更多菜单
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
 </template>
 
-<script lang="jsx">
+<script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 
 export default {
@@ -40,3 +40,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue b/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
index e44c1ed216..9dd6721093 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <p>场景1：使用 menu-options 属性定义 children</p>
+    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <p>场景2：使用 options 属性定义 children</p>
     <tiny-dropdown @item-click="itemClick">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
@@ -47,8 +50,9 @@ function itemClick(data) {
 }
 </script>
 
-<style scoped>
-.tiny-dropdown {
-  margin-right: 20px;
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level.vue b/examples/sites/demos/pc/app/dropdown/multi-level.vue
index c399b2b300..02a10b80d6 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <p>场景1：使用 menu-options 属性定义 children</p>
+    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <p>场景2：使用 options 属性定义 children</p>
     <tiny-dropdown @item-click="itemClick">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
@@ -40,6 +43,39 @@ export default {
           label: '黄金糕',
           icon: iconStarDisable()
         }
+      ],
+      menuOptions: {
+        options: [
+          {
+            label: '老友粉',
+            icon: iconStarDisable(),
+            children: [
+              {
+                label: '老友粉2.1',
+                children: [{ label: '狮子头3.1' }]
+              },
+              { label: '老友粉2.2' },
+              { label: '老友粉2.3', disabled: true }
+            ]
+          },
+          {
+            label: '狮子头',
+            divided: true
+          },
+          {
+            label: '黄金糕',
+            divided: true,
+            icon: iconStarDisable()
+          }
+        ]
+      },
+      childrenOption: [
+        {
+          label: '老友粉2.1',
+          children: [{ label: '狮子头3.1' }]
+        },
+        { label: '老友粉2.2' },
+        { label: '老友粉2.3', disabled: true }
       ]
     }
   },
@@ -57,8 +93,9 @@ export default {
 }
 </script>
 
-<style scoped>
-.tiny-dropdown {
-  margin-right: 20px;
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/options-composition-api.vue b/examples/sites/demos/pc/app/dropdown/options-composition-api.vue
index c111386aef..97dc13167c 100644
--- a/examples/sites/demos/pc/app/dropdown/options-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/options-composition-api.vue
@@ -1,22 +1,23 @@
 <template>
   <div>
+    <p>场景1：使用 menu-options 属性配置 tiny-dropdown</p>
+    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <p>场景2：使用 menu-options 和 title 属性配置 tiny-dropdown</p>
+    <tiny-dropdown :menu-options="menuOptions" title="点击下拉" @item-click="itemClick"></tiny-dropdown>
+    <p>场景3：使用 menu-options 和 text-field 属性配置 tiny-dropdown</p>
+    <tiny-dropdown :menu-options="menuOptions1" text-field="name"></tiny-dropdown>
+    <p>场景4：使用 options 属性配置 tiny-dropdown-menu</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
+    <p>场景5：使用 options 和 text-field 属性配置 tiny-dropdown-menu</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu :options="options1" text-field="name"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <tiny-dropdown :menu-options="menuOptions" title="点击下拉" @item-click="itemClick"></tiny-dropdown>
-
-    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
-
-    <tiny-dropdown :menu-options="menuOptions1" text-field="name"></tiny-dropdown>
   </div>
 </template>
 
@@ -102,8 +103,9 @@ function itemClick(data) {
 }
 </script>
 
-<style scoped>
-.tiny-dropdown {
-  margin-right: 20px;
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/options.vue b/examples/sites/demos/pc/app/dropdown/options.vue
index e6f4929186..c66bd06089 100644
--- a/examples/sites/demos/pc/app/dropdown/options.vue
+++ b/examples/sites/demos/pc/app/dropdown/options.vue
@@ -1,22 +1,23 @@
 <template>
   <div>
+    <p>场景1：使用 menu-options 属性配置 tiny-dropdown</p>
+    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <p>场景2：使用 menu-options 和 title 属性配置 tiny-dropdown</p>
+    <tiny-dropdown :menu-options="menuOptions" title="点击下拉" @item-click="itemClick"></tiny-dropdown>
+    <p>场景3：使用 menu-options 和 text-field 属性配置 tiny-dropdown</p>
+    <tiny-dropdown :menu-options="menuOptions1" text-field="name"></tiny-dropdown>
+    <p>场景4：使用 options 属性配置 tiny-dropdown-menu</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
+    <p>场景5：使用 options 和 text-field 属性配置 tiny-dropdown-menu</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu :options="options1" text-field="name"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <tiny-dropdown :menu-options="menuOptions" title="点击下拉" @item-click="itemClick"></tiny-dropdown>
-
-    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
-
-    <tiny-dropdown :menu-options="menuOptions1" text-field="name"></tiny-dropdown>
   </div>
 </template>
 
@@ -112,8 +113,9 @@ export default {
 }
 </script>
 
-<style scoped>
-.tiny-dropdown {
-  margin-right: 20px;
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue b/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
new file mode 100644
index 0000000000..4081107a85
--- /dev/null
+++ b/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
@@ -0,0 +1,26 @@
+<template>
+  <tiny-dropdown :show-icon="false">
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon.vue b/examples/sites/demos/pc/app/dropdown/show-icon.vue
new file mode 100644
index 0000000000..4081107a85
--- /dev/null
+++ b/examples/sites/demos/pc/app/dropdown/show-icon.vue
@@ -0,0 +1,26 @@
+<template>
+  <tiny-dropdown :show-icon="false">
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
index 37c20bf2ed..267597e534 100644
--- a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p>默认：</p>
     <tiny-dropdown split-button type="primary">
       默认尺寸
       <template #dropdown>
@@ -12,7 +13,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <span>&nbsp;</span>
+    <p>其他尺寸：</p>
     <tiny-dropdown size="medium" split-button type="primary">
       中等尺寸
       <template #dropdown>
@@ -25,7 +26,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <span>&nbsp;</span>
+
     <tiny-dropdown size="small" split-button type="primary">
       小型尺寸
       <template #dropdown>
@@ -38,7 +39,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <span>&nbsp;</span>
+
     <tiny-dropdown size="mini" split-button type="primary">
       超小尺寸
       <template #dropdown>
@@ -54,10 +55,21 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.tiny-dropdown {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/size.vue b/examples/sites/demos/pc/app/dropdown/size.vue
index 94980624d0..12379cf0c2 100644
--- a/examples/sites/demos/pc/app/dropdown/size.vue
+++ b/examples/sites/demos/pc/app/dropdown/size.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p>默认：</p>
     <tiny-dropdown split-button type="primary">
       默认尺寸
       <template #dropdown>
@@ -12,7 +13,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <span>&nbsp;</span>
+    <p>其他尺寸：</p>
     <tiny-dropdown size="medium" split-button type="primary">
       中等尺寸
       <template #dropdown>
@@ -25,7 +26,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <span>&nbsp;</span>
+
     <tiny-dropdown size="small" split-button type="primary">
       小型尺寸
       <template #dropdown>
@@ -38,7 +39,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <span>&nbsp;</span>
+
     <tiny-dropdown size="mini" split-button type="primary">
       超小尺寸
       <template #dropdown>
@@ -54,7 +55,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 
 export default {
@@ -65,3 +66,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.tiny-dropdown {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/slot-default-composition-api.vue b/examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
similarity index 72%
rename from examples/sites/demos/pc/app/dropdown/slot-default-composition-api.vue
rename to examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
index ef434455ec..4e8dd905b9 100644
--- a/examples/sites/demos/pc/app/dropdown/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
@@ -1,7 +1,9 @@
 <template>
   <tiny-dropdown @visible-change="visibleChange">
     <span>默认插槽</span>
-
+    <template #suffix-icon>
+      <tiny-icon-sandwich-collapse></tiny-icon-sandwich-collapse>
+    </template>
     <template #dropdown>
       <tiny-dropdown-menu>
         <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@@ -15,20 +17,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { iconSandwichCollapse } from '@opentiny/vue-icon'
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 
-const visible = ref(false)
-
-const IconChevronDown = iconChevronDown()
-const IconChevronUp = iconChevronUp()
-
-function visibleChange(status) {
-  visible.value = status
-}
+const TinyIconSandwichCollapse = iconSandwichCollapse()
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/slot-default.spec.ts b/examples/sites/demos/pc/app/dropdown/slots.spec.ts
similarity index 100%
rename from examples/sites/demos/pc/app/dropdown/slot-default.spec.ts
rename to examples/sites/demos/pc/app/dropdown/slots.spec.ts
diff --git a/examples/sites/demos/pc/app/dropdown/slot-default.vue b/examples/sites/demos/pc/app/dropdown/slots.vue
similarity index 68%
rename from examples/sites/demos/pc/app/dropdown/slot-default.vue
rename to examples/sites/demos/pc/app/dropdown/slots.vue
index 8f3574a97c..45267edf92 100644
--- a/examples/sites/demos/pc/app/dropdown/slot-default.vue
+++ b/examples/sites/demos/pc/app/dropdown/slots.vue
@@ -1,7 +1,9 @@
 <template>
-  <tiny-dropdown @visible-change="visibleChange">
+  <tiny-dropdown>
     <span>默认插槽</span>
-
+    <template #suffix-icon>
+      <tiny-icon-ascending></tiny-icon-ascending>
+    </template>
     <template #dropdown>
       <tiny-dropdown-menu>
         <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@@ -15,7 +17,7 @@
 </template>
 
 <script>
-import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { iconAscending } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 
 export default {
@@ -23,18 +25,7 @@ export default {
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem,
-    IconChevronDown: iconChevronDown(),
-    IconChevronUp: iconChevronUp()
-  },
-  data() {
-    return {
-      visible: false
-    }
-  },
-  methods: {
-    visibleChange(status) {
-      this.visible = status
-    }
+    TinyIconAscending: iconAscending()
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue b/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
index 12ff947d5e..ca2f536ea7 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
@@ -13,7 +13,7 @@
   </tiny-dropdown>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
diff --git a/examples/sites/demos/pc/app/dropdown/split-button.vue b/examples/sites/demos/pc/app/dropdown/split-button.vue
index 1ce508c4da..75a42331e5 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button.vue
+++ b/examples/sites/demos/pc/app/dropdown/split-button.vue
@@ -13,7 +13,7 @@
   </tiny-dropdown>
 </template>
 
-<script lang="jsx">
+<script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue b/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue
index d4541a9729..4973bd5756 100644
--- a/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
+    <p>场景1：配置式设置提示信息</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
+    <p>场景2：使用 tip 和 tip-position 属性设置提示信息</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu popper-class="my-class">
@@ -63,8 +64,9 @@ function itemClick(data) {
 }
 </script>
 
-<style scoped>
-.tiny-dropdown {
-  margin-right: 20px;
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/tip.vue b/examples/sites/demos/pc/app/dropdown/tip.vue
index add094862a..05b05d2ee2 100644
--- a/examples/sites/demos/pc/app/dropdown/tip.vue
+++ b/examples/sites/demos/pc/app/dropdown/tip.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
+    <p>场景1：配置式设置提示信息</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
+    <p>场景2：使用 tip 和 tip-position 属性设置提示信息</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu popper-class="my-class">
@@ -69,8 +70,9 @@ export default {
 }
 </script>
 
-<style scoped>
-.tiny-dropdown {
-  margin-right: 20px;
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue b/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
index 4999b7c1d2..d7e24d517c 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
@@ -1,44 +1,36 @@
 <template>
-  <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="2">
-        <p>hover 激活</p>
-        <tiny-dropdown>
-          <template #dropdown>
-            <tiny-dropdown-menu>
-              <tiny-dropdown-item><tiny-icon-plus></tiny-icon-plus> 黄金糕</tiny-dropdown-item>
-              <tiny-dropdown-item><tiny-icon-plus-circle></tiny-icon-plus-circle> 狮子头</tiny-dropdown-item>
-              <tiny-dropdown-item><tiny-icon-plus-square></tiny-icon-plus-square> 螺蛳粉</tiny-dropdown-item>
-              <tiny-dropdown-item><tiny-icon-checked-linear></tiny-icon-checked-linear> 双皮奶</tiny-dropdown-item>
-              <tiny-dropdown-item><tiny-icon-checked-sur></tiny-icon-checked-sur> 蚵仔煎</tiny-dropdown-item>
-            </tiny-dropdown-menu>
-          </template>
-        </tiny-dropdown>
-      </tiny-col>
-      <tiny-col :span="2">
-        <p>click 激活</p>
-        <tiny-dropdown trigger="click">
-          <template #dropdown>
-            <tiny-dropdown-menu>
-              <tiny-dropdown-item :icon="TinyIconPlus">黄金糕</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="TinyIconPlusCircle">狮子头</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="TinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="TinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="TinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
-            </tiny-dropdown-menu>
-          </template>
-        </tiny-dropdown>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
+  <div>
+    <p>场景1： 默认悬浮时触发下拉</p>
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item><tiny-icon-plus></tiny-icon-plus> 黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-plus-circle></tiny-icon-plus-circle> 狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-plus-square></tiny-icon-plus-square> 螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-checked-linear></tiny-icon-checked-linear> 双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-checked-sur></tiny-icon-checked-sur> 蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <p>场景2： 设置点击时触发下拉</p>
+    <tiny-dropdown trigger="click">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script setup>
 import { iconPlus, iconPlusCircle, iconPlusSquare, iconCheckedLinear, iconCheckedSur } from '@opentiny/vue-icon'
 import {
-  Layout as TinyLayout,
-  Row as TinyRow,
-  Col as TinyCol,
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem
@@ -50,3 +42,10 @@ const TinyIconPlusSquare = iconPlusSquare()
 const TinyIconCheckedLinear = iconCheckedLinear()
 const TinyIconCheckedSur = iconCheckedSur()
 </script>
+
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/trigger.vue b/examples/sites/demos/pc/app/dropdown/trigger.vue
index 65f91f6bd2..4e4b87c01a 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger.vue
+++ b/examples/sites/demos/pc/app/dropdown/trigger.vue
@@ -1,55 +1,47 @@
 <template>
-  <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="2">
-        <p>hover 激活</p>
-        <tiny-dropdown>
-          <template #dropdown>
-            <tiny-dropdown-menu>
-              <tiny-dropdown-item><icon-plus></icon-plus> 黄金糕</tiny-dropdown-item>
-              <tiny-dropdown-item><icon-plus-circle></icon-plus-circle> 狮子头</tiny-dropdown-item>
-              <tiny-dropdown-item><icon-plus-square></icon-plus-square> 螺蛳粉</tiny-dropdown-item>
-              <tiny-dropdown-item><icon-checked-linear></icon-checked-linear> 双皮奶</tiny-dropdown-item>
-              <tiny-dropdown-item><icon-checked-sur></icon-checked-sur> 蚵仔煎</tiny-dropdown-item>
-            </tiny-dropdown-menu>
-          </template>
-        </tiny-dropdown>
-      </tiny-col>
-      <tiny-col :span="2">
-        <p>click 激活</p>
-        <tiny-dropdown trigger="click">
-          <template #dropdown>
-            <tiny-dropdown-menu>
-              <tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
-            </tiny-dropdown-menu>
-          </template>
-        </tiny-dropdown>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
+  <div>
+    <p>场景1： 默认悬浮时触发下拉</p>
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item><tiny-icon-plus></tiny-icon-plus> 黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-plus-circle></tiny-icon-plus-circle> 狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-plus-square></tiny-icon-plus-square> 螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-checked-linear></tiny-icon-checked-linear> 双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item><tiny-icon-checked-sur></tiny-icon-checked-sur> 蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <p>场景2： 设置点击时触发下拉</p>
+    <tiny-dropdown trigger="click">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script>
 import { iconPlus, iconPlusCircle, iconPlusSquare, iconCheckedLinear, iconCheckedSur } from '@opentiny/vue-icon'
-import { Layout, Row, Col, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem,
-    IconPlus: iconPlus(),
-    IconPlusCircle: iconPlusCircle(),
-    IconPlusSquare: iconPlusSquare(),
-    IconCheckedLinear: iconCheckedLinear(),
-    IconCheckedSur: iconCheckedSur()
+    TinyIconPlus: iconPlus(),
+    TinyIconPlusCircle: iconPlusCircle(),
+    TinyIconPlusSquare: iconPlusSquare(),
+    TinyIconCheckedLinear: iconCheckedLinear(),
+    TinyIconCheckedSur: iconCheckedSur()
   },
   data() {
     return {
@@ -62,3 +54,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/visible-arrow-composition-api.vue b/examples/sites/demos/pc/app/dropdown/visible-arrow-composition-api.vue
index e9dc6b9f06..7514652300 100644
--- a/examples/sites/demos/pc/app/dropdown/visible-arrow-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/visible-arrow-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-dropdown>
     <template #dropdown>
-      <tiny-dropdown-menu popper-class="my-class" placement="top" :visible-arrow="true">
+      <tiny-dropdown-menu :visible-arrow="true">
         <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
         <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
         <tiny-dropdown-item>狮子头</tiny-dropdown-item>
diff --git a/examples/sites/demos/pc/app/dropdown/visible-arrow.vue b/examples/sites/demos/pc/app/dropdown/visible-arrow.vue
index 02c0907b32..e720939475 100644
--- a/examples/sites/demos/pc/app/dropdown/visible-arrow.vue
+++ b/examples/sites/demos/pc/app/dropdown/visible-arrow.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-dropdown>
     <template #dropdown>
-      <tiny-dropdown-menu popper-class="my-class" placement="top" :visible-arrow="true">
+      <tiny-dropdown-menu :visible-arrow="true">
         <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
         <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
         <tiny-dropdown-item>狮子头</tiny-dropdown-item>
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
index 597c9dd893..e3f56f0dc2 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
@@ -4,4 +4,4 @@ title: Dropdown 下拉菜单
 
 # Dropdown 下拉菜单
 
-<div>Dropdown 下拉菜单。</div>
+> 可以配置菜单列表，点击或悬浮时下拉，支持多级菜单
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
index 29dcedd76f..c5b99a8a63 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
@@ -4,4 +4,4 @@ title: Dropdown drop-down list
 
 # Dropdown drop-down list
 
-<div>Dropdown drop-down list.</div>
+> Can configure menu list, drop down when clicked or hovered, supports multi-level menus
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
index c788de95b7..057917f4eb 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -5,17 +5,47 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '<p>基本用法</p>\n', 'en-US': '<p>Basic Usage</p>\n' },
+      'desc': { 'zh-CN': '<p></p>\n', 'en-US': '<p></p>\n' },
       'codeFiles': ['basic-usage.vue']
     },
+    {
+      'demoId': 'disabled',
+      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>disabled</code> 属性设置 菜单 或者 菜单项 为禁用状态。</p>\n',
+        'en-US': 'The <p>Use the<code>disabled</code>attribute to set the menu or menu item to a disabled state. </p>\n'
+      },
+      'codeFiles': ['disabled.vue']
+    },
+    {
+      'demoId': 'size',
+      'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>size</code> 属性可配置其他尺寸，可选值：<code>medium</code> / <code>small</code> / <code>mini</code>。</p>\n',
+        'en-US':
+          '<p>Use the<code>size</code>attribute to configure other sizes, with optional values:<code>medium</code>/<code>small</code>/<code>mini</code>. </p>\n'
+      },
+      'codeFiles': ['size.vue']
+    },
+    {
+      'demoId': 'show-icon',
+      'name': { 'zh-CN': '隐藏图标', 'en-US': 'Show icons' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>show-icon</code> 属性设置触发源的图标显示或隐藏，默认显示，设置为 false 时隐藏。</p>\n',
+        'en-US':
+          '<p>Additional sizes: <code>medium</code>, <code>small</code>, <code>mini</code>, configured by setting the <code>size</code> property. </p>\n'
+      },
+      'codeFiles': ['show-icon.vue']
+    },
     {
       'demoId': 'split-button',
-      'name': { 'zh-CN': '触发对象', 'en-US': 'Trigger object' },
+      'name': { 'zh-CN': '按钮类型', 'en-US': 'Button type' },
       'desc': {
         'zh-CN':
-          '<p>配置<code>split-button</code>属性，可以使用内置按钮触发下拉菜单,同时可以通过<code>type</code>属性配置按钮状态，用法同<code>Button</code>组件</p>\n',
+          '<p>通过 <code>split-button</code> 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 <code>type</code> 属性设置按钮状态。</p>\n',
         'en-US':
-          '<p>Configure the <code>split-button</code> attribute. You can use the built-in button to trigger the drop-down menu. In addition, you can use the <code>type</code> attribute to configure the button status. The usage is the same as that of the <code>Button</code> component</p>\n'
+          '<p>Set the drop-down menu to display as a button type through the<code>split button</code>attribute. When only button types are used, the<code>type</code>attribute setting button status is supported.</p>\n'
       },
       'codeFiles': ['split-button.vue']
     },
@@ -23,70 +53,63 @@ export default {
       'demoId': 'trigger',
       'name': { 'zh-CN': '触发方式', 'en-US': 'Trigger Mode' },
       'desc': {
-        'zh-CN': '<p>可以配置 <code>click</code> 激活或者 <code>hover</code> 激活</p>\n',
-        'en-US': '<p>You can configure <code>click</code> or <code>hover</code> to activate</p>\n'
+        'zh-CN':
+          '<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为: <code>click</code> / <code>hover</code> 。</p>\n',
+        'en-US':
+          '<p>By setting the<code>trigger</code>attribute to trigger a drop-down, the default is<code>hover</code>. The optional values are:<code>click</code>/<code>hover</code>.</p>\n'
       },
       'codeFiles': ['trigger.vue']
     },
     {
-      'demoId': 'visible-arrow',
-      'name': { 'zh-CN': '显示箭头', 'en-US': 'Display Arrow' },
+      'demoId': 'tip',
+      'name': { 'zh-CN': '提示信息', 'en-US': 'Prompt' },
       'desc': {
-        'zh-CN': '<p>可以配置 <code>visible-arrow</code> 为true ,显示箭头，默认不显示</p>\n',
+        'zh-CN': '通过 <p><code>tip</code> 属性设置提示信息，<code>tip-position</code> 属性设置提示信息的位置。</p>\n',
         'en-US':
-          '<p>You can set <code>visible-arrow</code> to true to display the arrow. By default, the arrow is not displayed.</p>\n'
+          '<p>Set the prompt information through the<p><code>tip</code>attribute, and set the position of the prompt information through the<code>tip position</code>attribute.</p>\n'
       },
-      'codeFiles': ['visible-arrow.vue']
+      'codeFiles': ['tip.vue']
     },
     {
-      'demoId': 'title',
-      'name': { 'zh-CN': '自定义文本', 'en-US': 'Custom Text' },
+      'demoId': 'visible-arrow',
+      'name': { 'zh-CN': '显示箭头', 'en-US': 'Display Arrow' },
       'desc': {
-        'zh-CN': '<p>Dropdown 可以通过<code>title</code> 属性去自定义显示文本</p>\n',
-        'en-US': '<p>Dropdown can use the <code>title</code> attribute to customize the display text</p>\n'
+        'zh-CN':
+          '<p>通过 <code>visible-arrow</code> 属性设置下拉弹框是否显示箭头，默认不显示。<code>visible-arrow</code> 为 true 时显示箭头。</p>\n',
+        'en-US':
+          '<p>Use the <code>visible arrow</code> attribute to set whether the drop-down pop-up box displays an arrow, which is not displayed by default< Show arrows when code>visible arrow</code>is true.</p>\n'
       },
-      'codeFiles': ['title.vue']
+      'codeFiles': ['visible-arrow.vue']
     },
     {
       'demoId': 'hide-on-click',
-      'name': { 'zh-CN': '菜单隐藏方式', 'en-US': 'Menu hiding mode' },
+      'name': { 'zh-CN': '点击后收起', 'en-US': 'Click to collapse' },
       'desc': {
         'zh-CN':
-          '<p>下拉菜单默认在点击菜单项后会被隐藏，将 <code>hide-on-click</code> 属性默认为 <code>false</code> 可以关闭此功能。</p>\n',
+          '<p>通过 <code>hide-on-click</code> 属性设置点击菜单项后是否收起菜单弹框。默认为 true，点击后收起。</p>\n',
         'en-US':
-          'The <p> drop-down menu is hidden by default after a menu item is clicked. You can disable this function by setting <code>hide-on-click</code> to <code>false</code>. </p>\n'
+          '<p>Use the <code>hide on click</code> attribute to set whether to collapse the menu pop-up after clicking on the menu item. The default is true, and it will be collapsed after clicking. </p>\n'
       },
       'codeFiles': ['hide-on-click.vue']
     },
     {
-      'demoId': 'disabled',
-      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-      'desc': {
-        'zh-CN': '<p>Dropdown、DropdownItem 两个组件分别可以通过 <code>disabled</code> 属性设置禁用状态。</p>\n',
-        'en-US':
-          'The <p>Dropdown and DropdownItem components can be disabled through the <code>disabled</code> attribute. </p>\n'
-      },
-      'codeFiles': ['disabled.vue']
-    },
-    {
-      'demoId': 'size',
-      'name': { 'zh-CN': '不同尺寸', 'en-US': 'Different Sizes' },
+      'demoId': 'title',
+      'name': { 'zh-CN': '触发源文本', 'en-US': 'Trigger Source Text' },
       'desc': {
-        'zh-CN':
-          '<p>额外的尺寸：<code>medium</code>、<code>small</code>、<code>mini</code>，通过设置 <code>size</code> 属性来配置它们。</p>\n',
+        'zh-CN': '<p>通过 <code>title</code> 属性设置触发源的文本，默认为 <code>下拉菜单</code>。</p>\n',
         'en-US':
-          '<p>Additional sizes: <code>medium</code>, <code>small</code>, <code>mini</code>, configured by setting the <code>size</code> property. </p>\n'
+          '<p>Set the text of the trigger source through the<code>title</code>attribute, which defaults to the<code>drop-down menu</code>.</p>\n'
       },
-      'codeFiles': ['size.vue']
+      'codeFiles': ['title.vue']
     },
     {
       'demoId': 'options',
-      'name': { 'zh-CN': '使用配置式', 'en-US': 'Use Profile' },
+      'name': { 'zh-CN': '配置式', 'en-US': 'Configuration' },
       'desc': {
         'zh-CN':
-          '<p>Dropdown 可以通过<code>menu-options</code>属性配置 DropdownMenu 的属性，<code>title</code>配置触发源的名称</p><p>DropdownMenu 可以通过<code>options</code>属性配置 DropdownItem 的属性，<code>text-field</code> 结合 <code>options</code> 使用，可以指定菜单文案显示的字段。<code>text-field</code> 默认为label</p>\n',
+          '<p><code>menu-options</code>属性：只使用 tiny-dropdown 组件配置式时使用。</p>\n<p><code>options</code>属性：使用 tiny-dropdown-menu 组件配置式时使用。</p>\n<p><code>text-field</code>属性：指定菜单文案显示的字段，默认为 label。 </p>\n<p><code>title</code>属性：设置触发源的文本。</p>\n',
         'en-US':
-          '<p>DropdownYou can configure the attributes of DropdownMenu through the <code>menu-options</code> attribute. <code>title</code>Configure the name of the trigger source</p><p>DropdownMenu You can configure the attributes of DropdownItem through the <code>options</code> attribute. <code>text-field</code> is used together with <code>options</code> to specify the fields displayed in the menu copywriting. <code>text-field</code> The default value is label</p>\n'
+          '<p><code>menu options</code>Properties: Used only when using the tiny dropdown component configuration</p>\n<p><code>options</code>Properties: Used when using the tiny dropdown menu component configuration</p> \n<p><code>text field</code>Attribute: specifies the field displayed in the menu copy, which defaults to label</p> \n<p><code>title</code>Property: Set the text of the trigger source</p>\n'
       },
       'codeFiles': ['options.vue']
     },
@@ -94,7 +117,7 @@ export default {
       'demoId': 'multi-level',
       'name': { 'zh-CN': '多级菜单', 'en-US': 'Multi-Level Menu' },
       'desc': {
-        'zh-CN': '<p>Dropdown 可以通过<code>children</code> 字段设置菜单的子节点</p>\n',
+        'zh-CN': '<p>通过 <code>children</code> 字段定义多级菜单的子节点，仅配置式时生效。</p>\n',
         'en-US': '<p>Dropdown can set the subnodes of a menu through the <code>children</code> field</p>\n'
       },
       'codeFiles': ['multi-level.vue']
@@ -102,46 +125,37 @@ export default {
     {
       'demoId': 'inherit-width',
       'name': {
-        'zh-CN': '弹框最小宽度与触发源一致',
-        'en-US': 'The minimum width of the dialog box is the same as that of the trigger source.'
+        'zh-CN': '继承宽度',
+        'en-US': 'Inherit Width'
       },
       'desc': {
-        'zh-CN': '<p>Dropdown 可以通过<code>inherit-width</code>属性配置 DropdownMenu 的最小宽度继承触发源的宽度</p>\n',
+        'zh-CN': '<p>通过 <code>inherit-width</code> 属性设置下拉弹框的最小宽度继承触发源的宽度。</p>\n',
         'en-US':
-          '<p>Dropdown can use the <code>inherit-width</code> attribute to configure the minimum width of DropdownMenu to inherit the width of the trigger source</p>\n'
+          '<p>Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through the<code>inherit width</code>attribute.</p>\n'
       },
       'codeFiles': ['inherit-width.vue']
     },
-    {
-      'demoId': 'tip',
-      'name': { 'zh-CN': '提示信息', 'en-US': 'Prompt' },
-      'desc': {
-        'zh-CN':
-          '<p>DropdownItem 可以通过 <code>tip</code> 设置提示信息，<code>tip-position</code>设置提示信息的位置</p>\n',
-        'en-US':
-          '<p>DropdownItem can use <code>tip</code> to set the prompt information and <code>tip-position</code> to set the position of the prompt information</p>\n'
-      },
-      'codeFiles': ['tip.vue']
-    },
     {
       'demoId': 'events',
-      'name': { 'zh-CN': '内置事件', 'en-US': 'Internal Event' },
+      'name': { 'zh-CN': '事件', 'en-US': 'Events' },
       'desc': {
         'zh-CN':
-          '<p>内置事件包含：<code>button-click</code>、<code>item-click</code>、<code>visible-change</code> 事件。</p>\n',
+          '<p><code>button-click</code>：按钮类型时，监听左侧按钮点击事件。</p><p><code>item-click</code>：监听点击菜单项事件。</p><p><code>visible-change</code>：监听下拉弹框显示隐藏发生变化。</p>\n',
         'en-US':
-          '<p>The built-in events include the <code>button-click</code>, <code>item-click</code>, and <code>visible-change</code> events. </p>\n'
+          '<p><code>button-click</code>: When the button type is selected, listen for the left button click event.</p>\n<p><code>item-click</code>: Listens for menu item click events</p>\n<p>code>visible-change</code>: Listens for changes in the display and hiding of dropdown pop ups.</p>\n'
       },
       'codeFiles': ['events.vue']
     },
     {
-      'demoId': 'slot-default',
-      'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
+      'demoId': 'slots',
+      'name': { 'zh-CN': '插槽', 'en-US': 'Slots' },
       'desc': {
-        'zh-CN': '<p>Dropdown 可以通过<code>default</code> 插槽去自定义显示内容</p>\n',
-        'en-US': '<p>Dropdown can be customized through the <code>default</code> slot</p>\n'
+        'zh-CN':
+          '<p>通过 <code>default</code> 插槽自定义触发源文本区域。<code>suffix-icon</code> 插槽自定义触发源图标区域。</p>\n',
+        'en-US':
+          '<p>Customize the trigger source text area through the<code>default</code>slot.</p>\n<p>Customize the trigger source icon area through the<code>suffix icon</code>slot.</p>\n'
       },
-      'codeFiles': ['slot-default.vue']
+      'codeFiles': ['slots.vue']
     }
   ],
   apis: [
@@ -150,164 +164,177 @@ export default {
       'type': 'component',
       'properties': [
         {
-          'name': 'type',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '菜单按钮类型，同 Button 组件(只在split-button为 true 的情况下有效)。',
-            'en-US':
-              'Menu button type, which is the same as the Button component. (Valid only if split-button is true).'
-          },
-          'demoId': 'split-button'
-        },
-        {
-          'name': 'size',
-          'type': 'string',
-          'defaultValue': '',
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': '菜单尺寸，在split-button为 true 的情况下也对触发按钮生效。可选值（medium / small / mini）',
-            'en-US':
-              'Menu size. When split-button is set to true, this parameter is also valid for triggering a button. Available values (medium / small / mini)'
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
           },
-          'demoId': 'size'
+          'demoId': 'disabled'
         },
         {
-          'name': 'split-button',
+          'name': 'hide-on-click',
           'type': 'boolean',
-          'defaultValue': 'false',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': '下拉触发元素呈现为按钮组。默认值：false',
-            'en-US': 'The drop-down trigger element is displayed as a button group. Default value: false'
+            'zh-CN': '点击菜单项后是否收起菜单。默认点击后收起',
+            'en-US': 'Whether to collapse the menu after clicking on the menu item. Collapse after clicking by default'
           },
-          'demoId': 'split-button'
+          'demoId': 'hide-on-click'
         },
         {
-          'name': 'trigger',
-          'type': 'string',
-          'defaultValue': 'hover',
+          'name': 'hide-timeout',
+          'type': 'number',
+          'defaultValue': '150',
           'desc': {
-            'zh-CN': '触发下拉的行为。可选值（hover, click），默认值：hover',
-            'en-US': 'Trigger drop-down behavior. The value can be hover or click. The default value is hover'
+            'zh-CN': '延时多久收起下拉菜单，单位毫秒。注意：仅在 trigger 为 hover 时有效',
+            'en-US':
+              'How long is the delay in retracting the pull-down menu, in milliseconds. Note: Only valid when trigger is hover'
           },
           'demoId': 'trigger'
         },
         {
-          'name': 'hide-on-click',
+          'name': 'inherit-width',
           'type': 'boolean',
-          'defaultValue': 'true',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': '是否在点击菜单项后隐藏菜单。默认为 true。',
-            'en-US': 'Indicates whether to hide a menu after a menu item is clicked. The default value is true.'
+            'zh-CN': '下拉弹框的最小宽度是否继承触发源的宽度，默认不继承',
+            'en-US':
+              'Whether the minimum width of the dropdown pop-up inherit the width of the trigger source.It is not inherited by default'
           },
-          'demoId': 'hide-on-click'
+          'demoId': 'inherit-width'
         },
         {
-          'name': 'show-timeout',
-          'type': 'number',
-          'defaultValue': '',
+          'name': 'menu-options',
+          'type': 'IMenuOption',
+          'typeAnchorName': 'IMenuOption',
+          'defaultValue': `<pre>
+{
+  options:[],
+  textField:"label",
+  popperClass:"",
+  placement:"bottom-end"
+}
+</pre>`,
           'desc': {
-            'zh-CN': '展开下拉菜单的延时（仅在 trigger 为 hover 时有效）。默认：250 毫秒',
-            'en-US':
-              'Delay for expanding the drop-down list. This parameter is valid only when trigger is hover. Default value: 250 ms'
+            'zh-CN': '配置式且只使用 tiny-dropdown 组件时使用',
+            'en-US': 'Used when configuring and only using the tiny dropdown component'
           },
-          'demoId': 'trigger'
+          'demoId': 'options'
         },
         {
-          'name': 'hide-timeout',
+          'name': 'show-timeout',
           'type': 'number',
-          'defaultValue': '',
+          'defaultValue': '250',
           'desc': {
-            'zh-CN': '收起下拉菜单的延时（仅在 trigger 为 hover 时有效）。默认：150 毫秒',
+            'zh-CN': '延时多久展开下拉菜单，单位毫秒。注意：仅在 trigger 为 hover 时有效',
             'en-US':
-              'Delay for collapsing the drop-down list. This parameter is valid only when trigger is hover. Default value: 150 ms'
+              'How long is the delay to expand the drop-down menu, in milliseconds. Note: Only valid when trigger is hover'
           },
           'demoId': 'trigger'
         },
         {
-          'name': 'tabindex',
-          'type': 'number',
-          'defaultValue': '',
-          'desc': { 'zh-CN': 'Dropdown 组件的 tabindex。', 'en-US': 'tabindex of the Dropdown component.' },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'disabled',
+          'name': 'split-button',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '是否禁用。默认值：false',
-            'en-US': 'Whether to disable the function. Default value: false'
+            'zh-CN': '下拉触发元素呈现为按钮',
+            'en-US': 'Dropdown trigger elements are presented as button groups'
           },
-          'demoId': 'disabled'
+          'demoId': 'split-button'
         },
         {
-          'name': 'menu-options',
-          'type': 'object',
-          'defaultValue': '{"options":[],"textField":"label","popper-class":"","placement":"bottom-end"}',
-          'desc': { 'zh-CN': '配置式配置 DropdownMenu 属性', 'en-US': 'Configuring DropdownMenu in Profiles' },
-          'demoId': 'options'
+          'name': 'size',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '菜单尺寸，可选值： medium / small / mini。注意：只在 split-button为 true 的情况下生效',
+            'en-US': 'Menu size, optional values: medium/small/mini. Note: Only takes effect when split-button is true'
+          },
+          'demoId': 'size'
         },
         {
-          'name': 'visible-arrow',
-          'type': 'boolean',
-          'defaultValue': 'false',
+          'name': 'type',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '是否显示箭头。默认值不显示',
-            'en-US': 'Indicates whether to display arrows. The default value is not displayed'
+            'zh-CN':
+              '按钮类型，可选值: primary / success / warning / danger / info / text。注意：只在split-button为 true 的情况下有效',
+            'en-US':
+              'Button type, optional values: primary/success/warning/danger/info/text. Note: Only valid if split button is true'
           },
-          'demoId': 'visible-arrow'
+          'demoId': 'split-button'
         },
         {
           'name': 'title',
           'type': 'string',
           'defaultValue': '下拉菜单',
           'desc': {
-            'zh-CN': '不使用默认插槽时，title属性可以配置菜单标题',
-            'en-US': 'When the default slot is not used, the menu title can be configured in the title attribute.'
+            'zh-CN': '自定义触发源的文本',
+            'en-US': 'Text for custom trigger source'
           },
           'demoId': 'options'
         },
         {
-          'name': 'inherit-width',
+          'name': 'trigger',
+          'type': 'string',
+          'defaultValue': 'hover',
+          'desc': {
+            'zh-CN': '触发下拉的方式。可选值：hover / click',
+            'en-US': 'Trigger the dropdown method. Optional values: hover / click'
+          },
+          'demoId': 'trigger'
+        },
+        {
+          'name': 'tabindex',
+          'type': 'number',
+          'defaultValue': '0',
+          'desc': {
+            'zh-CN': '初始化触发元素的原生属性 tabindex',
+            'en-US': 'Initialize the native attribute tabindex of the triggering element'
+          },
+          'demoId': ''
+        },
+        {
+          'name': 'visible-arrow',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '默认为false,设置true时，弹框的最小宽度继承触发源的宽度',
-            'en-US':
-              'The default value is false. When this parameter is set to true, the minimum width of the dialog box inherits the width of the trigger source.'
+            'zh-CN': '下拉弹框是否显示箭头，默认不显示',
+            'en-US': 'Indicates whether to display arrows. The default value is not displayed'
           },
-          'demoId': 'inherit-width'
+          'demoId': 'visible-arrow'
         }
       ],
       'events': [
         {
           'name': 'button-click',
-          'type': 'Function',
+          'type': 'Function() => void',
           'defaultValue': 'Function',
           'desc': {
-            'zh-CN': 'split-button 为 true 时，点击左侧按钮的事件回调。',
-            'en-US': 'When split-button is set to true, click the callback function of the button on the left.'
+            'zh-CN': '监听左侧按钮点击事件，仅 split-button 为 true 时生效',
+            'en-US': 'Listen for the left button click event, only effective when split-button is true'
           },
           'demoId': 'events'
         },
         {
           'name': 'item-click',
-          'type': 'Function',
-          'defaultValue': 'Function(data:object)',
+          'type': 'Function(data:IItemClickParam) => void',
+          'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '点击菜单项触发的事件回调。返回数据data为object类型，对象包含字段 itemData 和 vm 字段，itemData 为当前选中项的数据（仅配置式时生效），vm 为当前选中项的实例',
-            'en-US': 'Callback triggered by clicking a menu item.'
+            'zh-CN': '监听点击菜单项事件',
+            'en-US': 'Listen for menu item click events'
           },
           'demoId': 'events'
         },
         {
           'name': 'visible-change',
-          'type': 'Function',
-          'defaultValue': 'Function(status:boolean)',
+          'type': 'Function(status:boolean) => void',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉框显示/隐藏时触发。回调参数 status 为 boolean 类型，true 表示显示，false 表示隐藏',
-            'en-US': 'This event is triggered when the drop-down list box is displayed or hidden.'
+            'zh-CN': '监听下拉框的显示或隐藏状态',
+            'en-US': 'Monitor the display or hidden status of the dropdown box'
           },
           'demoId': 'events'
         }
@@ -318,9 +345,8 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件。',
-            'en-US':
-              'Element that triggers the display of the drop-down list. Note: The value must be an element or component.'
+            'zh-CN': '自定义触发源文本区域。 注意： 必须是一个元素或者或者组件',
+            'en-US': 'Customize the trigger source text area. Note: must be an element or component'
           },
           'demoId': 'basic-usage'
         },
@@ -329,21 +355,36 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉列表，通常是 <tiny-dropdown-menu> 组件。',
-            'en-US': 'drop-down list, usually the <tiny-dropdown-menu> component.'
+            'zh-CN': '自定义下拉列表区域，通常使用 tiny-dropdown-menu 组件',
+            'en-US': 'Customize the dropdown list area, usually using the tiny dropdown menu component'
           },
           'demoId': 'basic-usage'
         }
-      ],
-      'dropdownMenuattrs': [
+      ]
+    },
+    {
+      'name': 'dropdownMenu',
+      'type': 'component',
+      'properties': [
+        {
+          'name': 'options',
+          'type': 'IItem []',
+          'typeAnchorName': 'IItem',
+          'defaultValue': '[]',
+          'desc': {
+            'zh-CN': '通过配置式设置菜单项的属性',
+            'en-US': 'Setting menu item properties through configuration'
+          },
+          'demoId': 'options'
+        },
         {
           'name': 'placement',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': 'bottom-end',
           'desc': {
-            'zh-CN': '菜单弹出位置。可选值（top/top-start/top-end/bottom/bottom-start/bottom-end），默认：bottom-end',
+            'zh-CN': '菜单弹出位置。可选值: top / top-start / top-end / bottom / bottom-start / bottom-end',
             'en-US':
-              'Menu pop-up position. The value can be (top/top-start/top-end/bottom/bottom-start/bottom-end). The default value is bottom-end'
+              'Menu pop-up location. Optional values: top / top-start / top-end/bottom / bottom-start / bottom-end'
           },
           'demoId': 'basic-usage'
         },
@@ -351,82 +392,127 @@ export default {
           'name': 'popper-class',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置弹出下拉自定义样式。', 'en-US': 'Set the pop-up drop-down style.' },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options',
-          'type': 'Array',
-          'defaultValue': '[]',
           'desc': {
-            'zh-CN': '通过配置式设置菜单项的属性',
-            'en-US': 'Setting the properties of a menu item using a profile'
+            'zh-CN': '下拉弹框的类名，用于自定义样式',
+            'en-US': 'The class name of the dropdown pop-up box, used for customizing styles'
           },
-          'demoId': 'options'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'text-field',
           'type': 'string',
           'defaultValue': 'label',
           'desc': {
-            'zh-CN': '结合options 属性使用，指定菜单项的显示文案的字段，默认字段为 label',
-            'en-US':
-              'Used together with the options attribute to specify the copywriting field of a menu item. The default field is label.'
+            'zh-CN': '菜单项文本的字段,结合 options 属性使用',
+            'en-US': 'The field of menu item text, used in conjunction with the options attribute'
           },
           'demoId': 'options'
         }
       ],
-      'dropdownMenu-slots': [
+      'slots': [
         {
           'name': 'default',
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉列表选项通常是 <tiny-dropdown-item> 组件。',
-            'en-US': 'The drop-down list is usually a <tiny-dropdown-item> component.'
+            'zh-CN': '下拉弹框区域，通常使用 tiny-dropdown-item 组件',
+            'en-US': 'Dropdown the pop-up area, usually using the tiny-dropdown item component'
           },
           'demoId': 'basic-usage'
         }
-      ],
-      'dropdownItemattrs': [
+      ]
+    },
+    {
+      'name': 'dropdownItem',
+      'type': 'component',
+      'properties': [
         {
           'name': 'disabled',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '禁用。默认：false', 'en-US': 'Disabled. Default value: false' },
+          'desc': { 'zh-CN': '是否禁用', 'en-US': 'Is it disabled' },
           'demoId': 'disabled'
         },
         {
           'name': 'divided',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '显示分割线。默认值：false', 'en-US': 'Displays the split line. Default value: false' },
-          'demoId': 'hide-on-click'
+          'desc': { 'zh-CN': '是否显示分割线', 'en-US': 'Show split lines' },
+          'demoId': 'events'
         },
         {
           'name': 'icon',
-          'type': 'object',
+          'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '内嵌图标。', 'en-US': 'Embedded icon.' },
-          'demoId': 'trigger'
+          'desc': { 'zh-CN': '内嵌图标', 'en-US': 'Embedded icon' },
+          'demoId': 'events'
+        },
+        {
+          'name': 'item-data',
+          'type': 'IItemData',
+          'typeAnchorName': 'IItemData',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '菜单项的配置信息', 'en-US': 'Configuration information for menu items' },
+          'demoId': 'events'
         },
         {
           'name': 'label',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '菜单项的显示值', 'en-US': 'Display value of a menu item' },
-          'demoId': 'basic-usage'
+          'desc': { 'zh-CN': '菜单项的文本', 'en-US': 'Text for menu items' },
+          'demoId': 'events'
         }
       ],
-      'dropdownItem-slots': [
+      'slots': [
         {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '下拉列表选项内容。', 'en-US': 'The options in the drop-down list box are displayed.' },
+          'desc': { 'zh-CN': '菜单项文本区域', 'en-US': 'Menu item text area' },
           'demoId': 'basic-usage'
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IMenuOption',
+      type: 'interface',
+      code: `
+interface IMenuOption {
+  "options": IItemData[]
+  "textField"?: string
+  "popper-class"?: string
+  "placement"?: top | top-start | top-end | bottom | bottom-start | bottom-end
+}        
+`
+    },
+    {
+      name: 'IItemClickParam',
+      type: 'interface',
+      code: `        
+interface IMenuOption {
+  "itemData": IItemData
+  // dropdownItem 组件的实例
+  "vm": {
+    "selected": boolean
+    "textField: string
+    "tipPosition: string
+    "$el": HTMLElement
+  }
+}
+`
+    },
+    {
+      name: 'IItemData',
+      type: 'interface',
+      code: `        
+interface IItemData {
+  "label"?: string
+  "disabled"?: boolean
+  "divided"?: boolean
+}
+`
+    }
   ]
 }
diff --git a/packages/renderless/src/dropdown/index.ts b/packages/renderless/src/dropdown/index.ts
index 7690c26a6e..dc6fe09437 100644
--- a/packages/renderless/src/dropdown/index.ts
+++ b/packages/renderless/src/dropdown/index.ts
@@ -224,7 +224,7 @@ export const handleMenuItemClick =
     }
 
     if (!disabled) {
-      const data = { itemData, vm, disabled }
+      const data = { itemData, vm }
       emit('item-click', data)
     }
   }
diff --git a/packages/renderless/types/dropdown-item.type.ts b/packages/renderless/types/dropdown-item.type.ts
index c54c29e241..11f9ec4ce6 100644
--- a/packages/renderless/types/dropdown-item.type.ts
+++ b/packages/renderless/types/dropdown-item.type.ts
@@ -27,9 +27,7 @@ import type {
 export type IDropdownItemVm = ComponentPublicInstance & {
   type: string
   toggle: (value: boolean, options?: object) => void
-  state: {
-    showPopup: boolean
-  }
+  state: IDropdownItemState
 } & IDropdownItemProps
 
 export type IDropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>
diff --git a/packages/theme/src/dropdown-item/index.less b/packages/theme/src/dropdown-item/index.less
index 2906bb0260..b866b2e4e9 100644
--- a/packages/theme/src/dropdown-item/index.less
+++ b/packages/theme/src/dropdown-item/index.less
@@ -61,6 +61,13 @@
     .@{dropdown-item-prefix-cls}__content {
       display: flex;
       align-items: center;
+      width: 100%;
+
+      .@{dropdown-item-prefix-cls}__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
       .@{svg-prefix-cls} {
         margin-right: 4px;
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
index 63a155f1bb..b55e311ffd 100644
--- a/packages/theme/src/dropdown/index.less
+++ b/packages/theme/src/dropdown/index.less
@@ -51,19 +51,20 @@
       fill: var(--ti-button-normal-text-color);
     }
 
-    &:not(.@{dropdown-prefix-cls}__caret-button):hover {
+    &:not(.@{dropdown-prefix-cls}__caret-button):not(.is-disabled):hover {
       color: var(--ti-dropdown-text-color-hover);
 
       .@{svg-prefix-cls} {
         fill: var(--ti-dropdown-icon-color-hover);
       }
+    }
 
-      &[disabled] {
-        color: var(--ti-dropdown-text-color-disabled);
+    &.is-disabled {
+      cursor: not-allowed;
+      color: var(--ti-dropdown-text-color-disabled);
 
-        .@{svg-prefix-cls} {
-          fill: var(--ti-dropdown-text-color-disabled);
-        }
+      .@{svg-prefix-cls} {
+        fill: var(--ti-dropdown-text-color-disabled);
       }
     }
   }
@@ -91,6 +92,10 @@
   .@{dropdown-prefix-cls}__title-button {
     padding-left: var(--ti-dropdown-title-button-padding-left);
     padding-right: var(--ti-dropdown-title-button-padding-right);
+
+    &.is-disabled.tiny-button--default:hover {
+      z-index: 0;
+    }
   }
 
   .@{dropdown-prefix-cls}__caret-button {
@@ -117,7 +122,7 @@
       background: var(--ti-dropdown-caret-line-bg-color-default);
     }
 
-    &.@{css-prefix}button--default:hover:before {
+    &.@{css-prefix}button--default:hover:not(.is-disabled):before {
       background-color: var(--ti-dropdown-caret-line-bg-color-default-hover);
     }
 
@@ -137,15 +142,6 @@
     outline-width: 0;
   }
 
-  [disabled] {
-    cursor: not-allowed;
-    color: var(--ti-dropdown-text-color-disabled);
-
-    svg {
-      fill: var(--ti-dropdown-text-color-disabled);
-    }
-  }
-
   &:hover {
     cursor: pointer;
   }
diff --git a/packages/vue/src/dropdown-item/src/pc.vue b/packages/vue/src/dropdown-item/src/pc.vue
index f1ba53b6e3..a80a7c8e99 100644
--- a/packages/vue/src/dropdown-item/src/pc.vue
+++ b/packages/vue/src/dropdown-item/src/pc.vue
@@ -35,9 +35,11 @@
         </span>
         <div class="tiny-dropdown-item__content tiny-dropdown-menu__item-content">
           <component v-if="icon" :is="icon" class="tiny-svg-size" />
-          <slot :item-data="itemData">
-            <span>{{ label }}</span>
-          </slot>
+          <span class="tiny-dropdown-item__label">
+            <slot :item-data="itemData">
+              <span>{{ label }}</span>
+            </slot>
+          </span>
         </div>
         <ul
           v-if="itemData.children && itemData.children.length"
diff --git a/packages/vue/src/dropdown/src/pc.vue b/packages/vue/src/dropdown/src/pc.vue
index 7936768355..4c0ca23eda 100644
--- a/packages/vue/src/dropdown/src/pc.vue
+++ b/packages/vue/src/dropdown/src/pc.vue
@@ -116,7 +116,7 @@ export default defineComponent({
             onClick={handleMainButtonClick}
             disabled={disabled}
             class="tiny-dropdown__title-button">
-            {defaultSlot}
+            {defaultSlot || <span>{title}</span>}
           </tiny-button>
           <tiny-button
             ref="trigger"