feat(action-menu): [dropdown,action-menu] ActionMenu component adds showIcon and suffixIcon attributes，supplemented the documents and examples. (#1051)

* 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
2023-12-08 16:30:17 +08:00 · 2023-12-08 16:30:17 +08:00 · 73d78abfbe
parent 8202a8d2e8
commit 73d78abfbe
28 changed files with 427 additions and 211 deletions
--- 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
@ -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>
--- a/examples/sites/demos/pc/app/action-menu/add-icon.vue
+++ b/examples/sites/demos/pc/app/action-menu/add-icon.vue
@ -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>
--- 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: '开机'
--- a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
+++ 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>
--- a/examples/sites/demos/pc/app/action-menu/icon.vue
+++ 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>
--- 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)')
 })
--- 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',
--- 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>
--- 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')

--- 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>
--- 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)
 })
--- 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)}`
      })
    }
  }
--- 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>
--- 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>
--- 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',
--- 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: {}
 }
--- 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 = {
--- 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)'
 }
--- 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 {
--- 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)'
-}
+  '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)'
+}
--- 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);
  // 下拉触发源文本禁用色
--- 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} {
--- 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)'
 }
--- 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);
  // 下拉菜单触发元素为按钮组时，下拉按钮的右侧侧内边距
--- 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
  }
 }

--- 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) {
--- 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',
--- 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