From 73d78abfbe0edcd227214396b709dd7e98e17541 Mon Sep 17 00:00:00 2001
From: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Date: Fri, 8 Dec 2023 16:30:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(action-menu):=20[dropdown,action-menu]=20A?=
 =?UTF-8?q?ctionMenu=20component=20adds=20showIcon=20and=20suffixIcon=20at?=
 =?UTF-8?q?tributes=EF=BC=8Csupplemented=20the=20documents=20and=20example?=
 =?UTF-8?q?s.=20(#1051)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(action-menu): [action-menu,dropdown] ActionMenu component adds showIcon and suffixIcon attributes, supplementary documentation and examples

* test(action-menu): [action-menu] Modify e2e test cases
---
 .../action-menu/add-icon-composition-api.vue  | 31 --------
 .../demos/pc/app/action-menu/add-icon.vue     | 39 ---------
 .../demos/pc/app/action-menu/basic-usage.vue  |  4 +-
 .../app/action-menu/icon-composition-api.vue  | 73 +++++++++++++++++
 .../sites/demos/pc/app/action-menu/icon.vue   | 79 +++++++++++++++++++
 .../pc/app/action-menu/popper-class.spec.ts   |  3 +-
 .../pc/app/action-menu/webdoc/action-menu.js  | 48 ++++++++---
 .../app/dropdown/events-composition-api.vue   |  2 +-
 .../demos/pc/app/dropdown/events.spec.ts      |  1 +
 .../dropdown/multi-level-composition-api.vue  | 12 +--
 .../demos/pc/app/dropdown/multi-level.spec.ts | 25 +++---
 .../demos/pc/app/dropdown/multi-level.vue     | 10 +--
 .../dropdown/show-icon-composition-api.vue    | 65 ++++++++++-----
 .../sites/demos/pc/app/dropdown/show-icon.vue | 54 ++++++++++---
 .../demos/pc/app/dropdown/webdoc/dropdown.js  | 37 +++++++--
 packages/design/smb/src/action-menu/index.ts  |  6 +-
 packages/renderless/src/action-menu/vue.ts    |  5 +-
 .../theme/src/action-menu/aurora-theme.js     |  3 +-
 packages/theme/src/action-menu/index.less     | 21 ++---
 packages/theme/src/action-menu/smb-theme.js   | 27 +++----
 packages/theme/src/action-menu/vars.less      | 10 +--
 packages/theme/src/dropdown/index.less        | 30 ++++++-
 packages/theme/src/dropdown/smb-theme.js      |  8 +-
 packages/theme/src/dropdown/vars.less         | 14 ++++
 packages/vue/src/action-menu/src/index.ts     |  5 ++
 packages/vue/src/action-menu/src/pc.vue       | 12 ++-
 packages/vue/src/dropdown/src/index.ts        |  3 +-
 packages/vue/src/dropdown/src/pc.vue          | 11 ++-
 28 files changed, 427 insertions(+), 211 deletions(-)
 delete mode 100644 examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/action-menu/add-icon.vue
 create mode 100644 examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/action-menu/icon.vue

diff --git a/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
deleted file mode 100644
index af2b9138e..000000000
--- a/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <tiny-action-menu :options="options" :max-show-num="3"> </tiny-action-menu>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
-import { IconWebPlus, IconSuccessful, IconCloseSquare } from '@opentiny/vue-icon';
-
-const options = ref([
-  {
-    label: '远程登陆',
-    icon: IconWebPlus()
-  },
-  {
-    label: '开机',
-    icon: IconSuccessful()
-  },
-  {
-    label: '关机',
-    icon: IconCloseSquare()
-  },
-  {
-    label: '重启'
-  },
-  {
-    label: '网络设置',
-    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
-  }
-])
-</script>
diff --git a/examples/sites/demos/pc/app/action-menu/add-icon.vue b/examples/sites/demos/pc/app/action-menu/add-icon.vue
deleted file mode 100644
index 1fce60d69..000000000
--- a/examples/sites/demos/pc/app/action-menu/add-icon.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <tiny-action-menu :options="options" spacing="12px" :max-show-num="3"> </tiny-action-menu>
-</template>
-
-<script lang="jsx">
-import { ActionMenu } from '@opentiny/vue'
-import { IconWebPlus, IconSuccessful, IconCloseSquare } from '@opentiny/vue-icon';
-
-export default {
-  components: {
-    TinyActionMenu: ActionMenu
-  },
-  data() {
-    return {
-      options: [
-        {
-          label: '远程登陆',
-          icon: IconWebPlus()
-        },
-        {
-          label: '开机',
-          icon: IconSuccessful()
-        },
-        {
-          label: '关机',
-          icon: IconCloseSquare()
-        },
-        {
-          label: '重启'
-        },
-        {
-          label: '网络设置',
-          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage.vue b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
index b4bace8a5..77361dc0e 100644
--- a/examples/sites/demos/pc/app/action-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-action-menu :options="options" more-text="更多"> </tiny-action-menu>
+  <tiny-action-menu :options="options"> </tiny-action-menu>
 </template>
 
 <script>
@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆',
+          label: '远程登陆'
         },
         {
           label: '开机'
diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
new file mode 100644
index 000000000..c1b1c23cb
--- /dev/null
+++ b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <p>场景1：只显示图标</p>
+    <tiny-action-menu
+      class="custom-icon"
+      :options="options"
+      :suffix-icon="tinyIconEllipsis"
+      more-text=""
+      spacing="12px"
+      :max-show-num="3"
+    >
+    </tiny-action-menu>
+    <p>场景2：只显示文本</p>
+    <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+
+const options = ref([
+  {
+    label: '远程登陆',
+    icon: iconWebPlus()
+  },
+  {
+    label: '开机',
+    icon: iconSuccessful()
+  },
+  {
+    label: '关机',
+    icon: iconCloseSquare()
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+const options1 = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+const tinyIconEllipsis = iconEllipsis()
+</script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/action-menu/icon.vue b/examples/sites/demos/pc/app/action-menu/icon.vue
new file mode 100644
index 000000000..4d003acc5
--- /dev/null
+++ b/examples/sites/demos/pc/app/action-menu/icon.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <p>场景1：只显示图标</p>
+    <tiny-action-menu
+      class="custom-icon"
+      :options="options"
+      :suffix-icon="tinyIconEllipsis"
+      more-text=""
+      spacing="12px"
+      :max-show-num="3"
+    >
+    </tiny-action-menu>
+    <p>场景2：只显示文本</p>
+    <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
+  </div>
+</template>
+
+<script>
+import { ActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆',
+          icon: iconWebPlus()
+        },
+        {
+          label: '开机',
+          icon: iconSuccessful()
+        },
+        {
+          label: '关机',
+          icon: iconCloseSquare()
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ],
+      options1: [
+        {
+          label: '远程登陆'
+        },
+        {
+          label: '开机'
+        },
+        {
+          label: '关机'
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ],
+      tinyIconEllipsis: iconEllipsis()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts b/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
index faf9e334b..ba12438af 100644
--- a/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
+++ b/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
@@ -9,8 +9,9 @@ test('弹框样式', async ({ page }) => {
   const visibleItem = actionMenu.locator('.tiny-action-menu__item')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
 
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(1300)
   await visibleItem.last().hover()
+  await page.waitForTimeout(200)
   await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
   await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
 })
diff --git a/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js b/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
index 6d6d8b769..b34f935c8 100644
--- a/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
+++ b/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
@@ -22,14 +22,15 @@ export default {
       'codeFiles': ['disabled.vue']
     },
     {
-      'demoId': 'add-icon',
+      'demoId': 'icon',
       'name': { 'zh-CN': '图标', 'en-US': 'Icon' },
       'desc': {
-        'zh-CN': '通过属性 <code>icon</code> 配置菜单按钮前的图标。',
+        'zh-CN':
+          '通过 <code>icon</code> 属性设置菜单项的图标，<code>suffix-icon</code> 设置下拉触发源图标，<code>show-icon</code> 设置是否显示下拉触发源图标。',
         'en-US':
-          'The <code>icon</code> attribute is used to Configure the icon in front of the menu button.'
+          'Set the icon of the attribute setting menu item through <code>icon</code>, set the drop-down trigger source icon through <code>suffix-icon</code>, and set whether to display the drop-down trigger source icon through <code>show-icon</code>.'
       },
-      'codeFiles': ['add-icon.vue']
+      'codeFiles': ['icon.vue']
     },
     {
       'demoId': 'text-field',
@@ -139,13 +140,6 @@ export default {
           },
           'demoId': 'more-text'
         },
-        {
-          'name': 'icon',
-          'type': 'component',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '菜单项显示值前的图标', 'en-US': 'Icon of a menu item' },
-          'demId': 'add-icon'
-        },
         {
           'name': 'options',
           'type': 'IItemData[]',
@@ -198,6 +192,16 @@ export default {
           },
           'demoId': 'disabled'
         },
+        {
+          'name': 'options.icon',
+          'type': 'VueComponent',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '菜单项图标',
+            'en-US': 'Icon of a menu item'
+          },
+          'demId': 'icon'
+        },
         {
           'name': 'popper-class',
           'type': 'string',
@@ -211,13 +215,33 @@ export default {
         {
           'name': 'spacing',
           'type': 'string | number',
-          'defaultValue': '5px',
+          'defaultValue': "'5px'",
           'desc': {
             'zh-CN': '菜单按钮之间的间距',
             'en-US': 'Spacing between menu buttons'
           },
           'demoId': 'spacing'
         },
+        {
+          'name': 'suffix-icon',
+          'type': 'VueComponent',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '下拉触发源图标',
+            'en-US': 'Dropdown trigger source icon'
+          },
+          'demoId': 'icon'
+        },
+        {
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示下拉触发源图标',
+            'en-US': 'Is the dropdown trigger source icon displayed'
+          },
+          'demoId': 'icon'
+        },
         {
           'name': 'text-field',
           'type': 'string',
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 e51e5e7a8..370573f24 100644
--- a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
@@ -19,7 +19,7 @@
     </tiny-dropdown>
 
     <p>场景2：配置式</p>
-    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+    <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
diff --git a/examples/sites/demos/pc/app/dropdown/events.spec.ts b/examples/sites/demos/pc/app/dropdown/events.spec.ts
index 0db4c75c1..01ba126de 100644
--- a/examples/sites/demos/pc/app/dropdown/events.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/events.spec.ts
@@ -35,6 +35,7 @@ test('配置式内置事件', async ({ page }) => {
   const wrap = page.locator('#events')
   const notify = page.locator('.tiny-notify')
   const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+
   await expect(dropDown).toHaveClass(/options-event/)
   const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
 
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 72ea87e02..0720ad848 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,7 +1,7 @@
 <template>
   <div>
     <p>场景1：使用 menu-options 属性定义 children</p>
-    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
     <p>场景2：使用 options 属性定义 children</p>
     <tiny-dropdown @item-click="itemClick">
       <template #dropdown>
@@ -14,7 +14,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Notify } from '@opentiny/vue'
+import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Modal } from '@opentiny/vue'
 
 const options = reactive([
   {
@@ -66,12 +66,8 @@ const menuOptions = reactive({
 })
 
 const itemClick = (data) => {
-  Notify({
-    type: 'info',
-    title: 'itemData',
-    message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`,
-    position: 'top-right',
-    duration: 2000
+  Modal.message({
+    message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
   })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts b/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts
index 6870ccafb..c767a1feb 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts
@@ -5,22 +5,27 @@ test('多级菜单,使用 menu-options', async ({ page }) => {
   await page.goto('dropdown#multi-level')
 
   const wrap = page.locator('#multi-level')
-  const dropDown = wrap.locator('.tiny-dropdown').first()
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
-  const notify = page.locator('.tiny-notify')
 
-  await page.waitForTimeout(1500)
+  await page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.getByText('老友粉2.1').hover()
+  await expect(dropDownMenuItem.getByText('狮子头3.1')).toBeVisible()
   await dropDownMenuItem.getByText('狮子头3.1').click()
+  await page.waitForTimeout(1000)
+
   await expect(
-    notify.filter({
+    page.locator('.tiny-modal').filter({
       hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
     })
-  ).toBeVisible()
+  ).toHaveCount(1)
+  await page.waitForTimeout(500)
 })
 
 test('多级菜单,使用 options', async ({ page }) => {
@@ -31,17 +36,19 @@ test('多级菜单,使用 options', async ({ page }) => {
   const dropDown = wrap.locator('.tiny-dropdown').nth(1)
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
-  const notify = page.locator('.tiny-notify')
 
-  await page.waitForTimeout(1500)
+  await page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.getByText('老友粉2.1').hover()
   await dropDownMenuItem.getByText('狮子头3.1').click()
+  await page.waitForTimeout(1000)
   await expect(
-    notify.filter({
+    page.locator('.tiny-modal').filter({
       hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
     })
-  ).toBeVisible()
+  ).toHaveCount(1)
 })
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level.vue b/examples/sites/demos/pc/app/dropdown/multi-level.vue
index c91c2aa5f..3ea987a19 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level.vue
@@ -13,7 +13,7 @@
 
 <script>
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, Notify } from '@opentiny/vue'
+import { Dropdown, DropdownMenu, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -73,12 +73,8 @@ export default {
   },
   methods: {
     itemClick(data) {
-      Notify({
-        type: 'info',
-        title: 'itemData',
-        message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`,
-        position: 'top-right',
-        duration: 2000
+      Modal.message({
+        message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
       })
     }
   }
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
index 4081107a8..08c0b936a 100644
--- a/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
@@ -1,26 +1,49 @@
 <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>
+  <div>
+    <p>场景1： 只显示文本</p>
+    <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>
+    <p>场景2：自定义图且只显示图标</p>
+    <tiny-dropdown title="" :suffix-icon="tinyIconEllipsis">
+      <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>
+  </div>
 </template>
 
-<script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+<script setup>
+import {
+  Dropdown as TinyDropdown,
+  DropdownMenu as TinyDropdownMenu,
+  DropdownItem as TinyDropdownItem
+} from '@opentiny/vue'
+import { iconEllipsis } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
-  }
-}
+const tinyIconEllipsis = iconEllipsis()
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon.vue b/examples/sites/demos/pc/app/dropdown/show-icon.vue
index 4081107a8..8aa0e8c64 100644
--- a/examples/sites/demos/pc/app/dropdown/show-icon.vue
+++ b/examples/sites/demos/pc/app/dropdown/show-icon.vue
@@ -1,26 +1,56 @@
 <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>
+  <div>
+    <p>场景1： 只显示文本</p>
+    <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>
+    <p>场景2：自定义图且只显示图标</p>
+    <tiny-dropdown class="custom-icon" title="" :suffix-icon="tinyIconEllipsis">
+      <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>
+  </div>
 </template>
 
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { iconEllipsis } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem
+  },
+  data() {
+    return {
+      tinyIconEllipsis: iconEllipsis()
+    }
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
index 5f0744078..e2518deba 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -33,11 +33,12 @@ export default {
     },
     {
       'demoId': 'show-icon',
-      'name': { 'zh-CN': '隐藏图标', 'en-US': 'Show icons' },
+      'name': { 'zh-CN': '图标', 'en-US': 'Show icons' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-icon</code> 属性设置触发源的图标显示或隐藏，默认显示，设置为 false 时隐藏。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>show-icon</code> 属性设置是否显示下拉触发源图标，<code>suffix-icon</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 whether to display the dropdown trigger source icon through the <code>show-icon</code> attribute, and set the dropdown trigger source icon through the <code>suffix-icon</code> setting. </p>\n'
       },
       'codeFiles': ['show-icon.vue']
     },
@@ -237,6 +238,16 @@ export default {
           },
           'demoId': 'trigger'
         },
+        {
+          'name': 'size',
+          'type': '"medium" | "small" | "mini"',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
+            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+          },
+          'demoId': 'size'
+        },
         {
           'name': 'split-button',
           'type': 'boolean',
@@ -248,14 +259,24 @@ export default {
           'demoId': 'split-button'
         },
         {
-          'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示下拉触发源图标',
+            'en-US': 'Is the dropdown trigger source icon displayed'
+          },
+          'demoId': 'show-icon'
+        },
+        {
+          'name': 'suffix-icon',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
-            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+            'zh-CN': '下拉触发源图标',
+            'en-US': 'Dropdown trigger source icon'
           },
-          'demoId': 'size'
+          'demoId': 'show-icon'
         },
         {
           'name': 'type',
diff --git a/packages/design/smb/src/action-menu/index.ts b/packages/design/smb/src/action-menu/index.ts
index 8ec39cc2a..c7f87dc12 100644
--- a/packages/design/smb/src/action-menu/index.ts
+++ b/packages/design/smb/src/action-menu/index.ts
@@ -1,7 +1,3 @@
-import { IconEllipsis } from '@opentiny/vue-icon'
-
 export default {
-  icons: {
-    moreIcon: IconEllipsis()
-  }
+  icons: {}
 }
diff --git a/packages/renderless/src/action-menu/vue.ts b/packages/renderless/src/action-menu/vue.ts
index 331da8245..99c8c6bc9 100644
--- a/packages/renderless/src/action-menu/vue.ts
+++ b/packages/renderless/src/action-menu/vue.ts
@@ -24,13 +24,12 @@ export const api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChang
 export const renderless = (
   props: IActionMenuProps,
   { computed, reactive }: ISharedRenderlessParamHooks,
-  { emit, designConfig }: IActionMenuRenderlessParamUtils
+  { emit }: IActionMenuRenderlessParamUtils
 ): IActionMenuApi => {
   const state: IActionMenuState = reactive({
     visibleOptions: computed(() => props.options.slice(0, props.maxShowNum)),
     moreOptions: computed(() => props.options.slice(props.maxShowNum)),
-    spacing: computed(() => (String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px')),
-    moreIcon:  computed(() => designConfig?.icons?.moreIcon)
+    spacing: computed(() => (String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px'))
   })
 
   const api: IActionMenuApi = {
diff --git a/packages/theme/src/action-menu/aurora-theme.js b/packages/theme/src/action-menu/aurora-theme.js
index c2dc5aead..e5e0dd82b 100644
--- a/packages/theme/src/action-menu/aurora-theme.js
+++ b/packages/theme/src/action-menu/aurora-theme.js
@@ -1,5 +1,4 @@
 export const tinyActionMenuAuroraTheme = {
   'ti-action-menu-text-color': 'var(--ti-common-color-text-highlight)',
-  'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover)',
-  'ti-action-menu-suffix-inner-display': 'inline-block'
+  'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover)'
 }
diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
index b5ae1bef5..b9df25a6b 100644
--- a/packages/theme/src/action-menu/index.less
+++ b/packages/theme/src/action-menu/index.less
@@ -19,25 +19,15 @@
 
 .@{action-menu-prefix-cls} {
   .component-css-vars-action-menu();
+
   .@{dropdown-prefix-cls} {
-    .@{dropdown-prefix-cls}__suffix-inner {
-      display: var(--ti-action-menu-suffix-inner-display);
-    }
-
     .@{dropdown-prefix-cls}-trigger {
-      &:hover {
-        background-color: var(--ti-action-menu-more-icon-hover-bgc);
-        border-radius: var(--ti-action-menu-more-icon-hover-radius);
-      }
-
       .tiny-svg {
-        margin-right: 0;
-        padding: var(--ti-action-menu-more-icon-padding);
-        width: var(--ti-action-menu-more-icon-width);
-        height: var(--ti-action-menu-more-icon-height);
+        margin-right: var(--ti-action-menu-more-icon-margin-right);
       }
     }
   }
+
   font-size: var(--ti-action-menu-font-size);
   font-weight: var(--ti-action-menu-font-weight);
   color: var(--ti-action-menu-text-color);
@@ -54,8 +44,13 @@
         fill: var(--ti-action-menu-text-color); // TINY-TODO :没有使用--ti-base-color-brand-7的图标色
         margin: var(--ti-action-menu-item-svg-margin-top) var(--ti-action-menu-item-svg-margin-right)
           var(--ti-action-menu-item-svg-margin-bottom) var(--ti-action-menu-item-svg-margin-left);
+      }
+
+      &:not(:has(.tiny-dropdown)) {
+        .tiny-svg {
           width: var(--ti-action-menu-more-icon-width);
           height: var(--ti-action-menu-more-icon-height);
+        }
       }
 
       &:not(.is-disabled):hover {
diff --git a/packages/theme/src/action-menu/smb-theme.js b/packages/theme/src/action-menu/smb-theme.js
index 221871637..5963ed6b6 100644
--- a/packages/theme/src/action-menu/smb-theme.js
+++ b/packages/theme/src/action-menu/smb-theme.js
@@ -1,16 +1,13 @@
 export const tinyActionMenuSmbTheme = {
-    'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-transparent)',
-    'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
-    'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
-    'ti-action-menu-item-svg-margin-top': '0',
-    'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)',
-    'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
-    'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
-    'ti-action-menu-hover-text-decoratio': 'underline',
-    'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
-    'ti-action-menu-suffix-inner-display': 'none',
-    'ti-action-menu-more-icon-width': 'var(--ti-common-size-6x)',
-    'ti-action-menu-more-icon-height': 'var(--ti-common-size-6x)',
-    'ti-action-menu-more-icon-hover-bgc': 'rgba(0,0,0,0.05)',
-    'ti-action-menu-more-icon-hover-radius': 'var(--ti-common-border-radius-2)'
-}
\ No newline at end of file
+  'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-transparent)',
+  'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
+  'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
+  'ti-action-menu-item-svg-margin-top': '0',
+  'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)',
+  'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
+  'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
+  'ti-action-menu-hover-text-decoratio': 'underline',
+  'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
+  'ti-action-menu-more-icon-width': 'var(--ti-common-size-5x)',
+  'ti-action-menu-more-icon-height': 'var(--ti-common-size-5x)'
+}
diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less
index cce7486ea..9e3463495 100644
--- a/packages/theme/src/action-menu/vars.less
+++ b/packages/theme/src/action-menu/vars.less
@@ -15,18 +15,12 @@
   --ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
   // 按钮文本装饰
   --ti-action-menu-hover-text-decoratio: none;
-  // 更多后面的箭头是否显示
-  --ti-action-menu-suffix-inner-display: none;
   // 更多...图标的宽度
   --ti-action-menu-more-icon-width: 1em;
   // 更多...图标的高度
   --ti-action-menu-more-icon-height: 1em;
-  // 更多...图标hover态的背景颜色
-  --ti-action-menu-more-icon-hover-bgc: transparent;
-  // 更多...图标的内边距
-  --ti-action-menu-more-icon-padding: 2px;
-  // 更多...图标的圆角
-  --ti-action-menu-more-icon-hover-radius: var(--ti-common-border-radius-0);
+  // 更多...图标的右边外边距
+  --ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
   // 下拉触发源文本颜色
   --ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc);
   // 下拉触发源文本禁用色
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
index b55e311ff..5f6e805aa 100644
--- a/packages/theme/src/dropdown/index.less
+++ b/packages/theme/src/dropdown/index.less
@@ -29,22 +29,44 @@
     display: inline-block;
   }
 
-  &__trigger {
+  & &__trigger:not(.tiny-button) {
+    display: flex;
+    align-items: center;
+
+    .tiny-svg {
+      margin-top: var(--ti-dropdown-trigger-svg-margin-top);
+      margin-bottom: var(--ti-dropdown-trigger-svg-margin-bottom);
+      vertical-align: top;
+    }
+
+    &:not(:has(.@{dropdown-prefix-cls}__title)) > .@{dropdown-prefix-cls}__suffix-inner {
+      .tiny-svg {
+        width: var(--ti-dropdown-trigger-only-svg-width);
+        height: var(--ti-dropdown-trigger-only-svg-height);
+        margin: 2px;
+      }
+      &:hover {
+        background-color: var(--ti-dropdown-trigger-only-svg-hover-bg-color);
+        border-radius: var(--ti-dropdown-trigger-only-svg-hover-radius);
+      }
+    }
+  }
+
+  & &__trigger {
     .@{dropdown-prefix-cls}__title {
       line-height: var(--ti-dropdown-line-height);
+      margin-right: var(--ti-dropdown-trigger-title-margin-right);
     }
 
     .@{svg-prefix-cls} {
       fill: var(--ti-dropdown-icon-color);
       font-size: var(--ti-dropdown-icon-size);
-      vertical-align: middle;
-      margin-top: -4px;
-      margin-left: var(--ti-dropdown-trigger-svg-margin-left);
     }
 
     &.@{css-prefix}button .@{svg-prefix-cls} {
       fill: var(--ti-dropdown-button-icon-color);
       font-size: var(--ti-dropdown-button-icon-size);
+      margin-left: var(--ti-dropdown-trigger-svg-margin-left);
     }
 
     &.@{css-prefix}button--default .@{svg-prefix-cls} {
diff --git a/packages/theme/src/dropdown/smb-theme.js b/packages/theme/src/dropdown/smb-theme.js
index 68304a5ae..da3c16583 100644
--- a/packages/theme/src/dropdown/smb-theme.js
+++ b/packages/theme/src/dropdown/smb-theme.js
@@ -8,5 +8,11 @@ export const tinyDropdownSmbTheme = {
   'ti-dropdown-caret-line-width': 'var(--ti-common-size-0)',
   'ti-dropdown-title-button-padding-left': 'var(--ti-common-space-6x)',
   'ti-dropdown-title-button-padding-right': 'var(--ti-common-space-0)',
-  'ti-dropdown-button-icon-size': 'var(--ti-common-font-size-2)'
+  'ti-dropdown-button-icon-size': 'var(--ti-common-font-size-2)',
+  'ti-dropdown-trigger-svg-margin-top': 'var(--ti-common-space-0)',
+  'ti-dropdown-trigger-svg-margin-bottom': 'var(--ti-common-space-0)',
+  'ti-dropdown-trigger-only-svg-width': 'var(--ti-common-size-5x)',
+  'ti-dropdown-trigger-only-svg-height': 'var(--ti-common-size-5x)',
+  'ti-dropdown-trigger-only-svg-hover-bg-color': 'rgba(0,0,0,0.05)',
+  'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)'
 }
diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
index 20bee359e..fb3d9a815 100644
--- a/packages/theme/src/dropdown/vars.less
+++ b/packages/theme/src/dropdown/vars.less
@@ -13,14 +13,28 @@
   --ti-dropdown-icon-color: var(--ti-common-color-text-link, #526ecc);
   // 下拉菜单触发元素悬浮时的图标颜色
   --ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover, #344899);
+  // 下拉菜单触发元素只有图标时的图标宽度
+  --ti-dropdown-trigger-only-svg-width: var(--ti-common-size-5x);
+  // 下拉菜单触发元素只有图标时的图标高度
+  --ti-dropdown-trigger-only-svg-height: var(--ti-common-size-5x);
+  // 下拉菜单触发元素只有图标时的图标悬浮背景色
+  --ti-dropdown-trigger-only-svg-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
+  // 下拉菜单触发元素只有图标时的图标圆角
+  --ti-dropdown-trigger-only-svg-hover-radius: var(--ti-common-border-radius-normal);
   // 下拉菜单触发元素按钮类型时图标颜色
   --ti-dropdown-button-icon-color: var(--ti-common-color-icon-white, #fff);
   // 下拉菜单触发元素按钮类型时图标尺寸
   --ti-dropdown-button-icon-size: var(--ti-common-font-size-1, 14px);
   // 下拉菜单触发元素的文本禁用色
   --ti-dropdown-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
+  // 下拉菜单触发源图标的右侧外边距
+  --ti-dropdown-trigger-title-margin-right: var(--ti-common-space-base, 4px);
   // 下拉菜单触发源图标的左侧外边距
   --ti-dropdown-trigger-svg-margin-left: var(--ti-common-space-base, 4px);
+  // 下拉菜单触发源图标的上侧外边距
+  --ti-dropdown-trigger-svg-margin-top: 1px;
+  // 下拉菜单触发源图标的下侧外边距
+  --ti-dropdown-trigger-svg-margin-bottom: 1px;
   // 下拉菜触发元素为按钮组时，下拉按钮的左侧内边距
   --ti-dropdown-caret-button-padding-left: var(--ti-common-space-base, 4px);
   // 下拉菜单触发元素为按钮组时，下拉按钮的右侧侧内边距
diff --git a/packages/vue/src/action-menu/src/index.ts b/packages/vue/src/action-menu/src/index.ts
index 5148f5c1b..54d0dbe39 100644
--- a/packages/vue/src/action-menu/src/index.ts
+++ b/packages/vue/src/action-menu/src/index.ts
@@ -43,6 +43,11 @@ export const actionMenuProps = {
   trigger: {
     type: String,
     default: 'hover'
+  },
+  suffixIcon: Object,
+  showIcon: {
+    type: Boolean,
+    default: true
   }
 }
 
diff --git a/packages/vue/src/action-menu/src/pc.vue b/packages/vue/src/action-menu/src/pc.vue
index bec9bd6e0..5a3586341 100644
--- a/packages/vue/src/action-menu/src/pc.vue
+++ b/packages/vue/src/action-menu/src/pc.vue
@@ -23,15 +23,14 @@
 
       <li v-if="state.moreOptions.length" class="tiny-action-menu__item">
         <tiny-dropdown
+          :title="moreText"
           :trigger="trigger"
+          :suffix-icon="suffixIcon"
+          :show-icon="showIcon"
           @item-click="handleItemClick"
           @handle-click="handleMoreClick"
           @visible-change="visibleChange"
         >
-        <template v-if="state.moreIcon">
-          <component :is="state.moreIcon"/>
-        </template>
-        <span v-else>{{ moreText }}</span>
           <template #dropdown>
             <tiny-dropdown-menu :text-field="textField" :popper-class="popperClass">
               <tiny-dropdown-item
@@ -102,6 +101,11 @@ export default defineComponent({
     trigger: {
       type: String,
       default: 'hover'
+    },
+    suffixIcon: Object,
+    showIcon: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/dropdown/src/index.ts b/packages/vue/src/dropdown/src/index.ts
index 30b4e71ed..49da3ffbe 100644
--- a/packages/vue/src/dropdown/src/index.ts
+++ b/packages/vue/src/dropdown/src/index.ts
@@ -71,7 +71,8 @@ export const dropdownProps = {
   inheritWidth: {
     type: Boolean,
     default: false
-  }
+  },
+  suffixIcon: Object
 }
 export default defineComponent({
   name: $prefix + 'Dropdown',
diff --git a/packages/vue/src/dropdown/src/pc.vue b/packages/vue/src/dropdown/src/pc.vue
index 4c0ca23ed..1ac01633e 100644
--- a/packages/vue/src/dropdown/src/pc.vue
+++ b/packages/vue/src/dropdown/src/pc.vue
@@ -88,14 +88,15 @@ export default defineComponent({
     inheritWidth: {
       type: Boolean,
       default: false
-    }
+    },
+    suffixIcon: Object
   },
   emits: ['visible-change', 'item-click', 'button-click', 'menu-item-click', 'handle-click'],
   setup(props, context) {
     return setup({ props, context, renderless, api, h })
   },
   render() {
-    const { splitButton, type, disabled, handleMainButtonClick, menuOptions, title } = this
+    const { splitButton, type, disabled, handleMainButtonClick, menuOptions, title, suffixIcon } = this
     const { slots, size, state, border, showIcon, round, clickOutside } = this
     const params = { visible: state.visible }
     let triggerElm = null
@@ -103,7 +104,8 @@ export default defineComponent({
     const triggerClass = 'tiny-dropdown__trigger tiny-dropdown-trigger'
     const visibleClass = state.visible ? 'tiny-dropdown--visible tiny-dropdown-visible' : ''
 
-    const IconDown = state.designConfig?.icons?.dropdownIcon || iconDeltaDown()
+    // 优先级：suffix-icon 插槽 > suffixIcon 属性 > 其他主题图标 > 默认主题图标
+    const IconDown = suffixIcon || state.designConfig?.icons?.dropdownIcon || iconDeltaDown()
     const ButtonIconDown = state.designConfig?.icons?.dropdownIcon || iconDownWard()
     const defaultSlot = slots.default && slots.default(params)
 
@@ -146,7 +148,8 @@ export default defineComponent({
         ''
       )
 
-      const defaultTriggerElm = defaultSlot || <span class={'tiny-dropdown__title'}>{title}</span>
+      let defaultTriggerElm =
+        defaultSlot || title ? <span class={'tiny-dropdown__title'}>{defaultSlot || title}</span> : null
 
       triggerElm = border ? (
         <tiny-button