fix(dropdown,actionMenu): [dropdown,action-menu] Adapt to Dropdown an… (#1967)

* fix(dropdown,actionMenu): [dropdown,action-menu] Adapt to Dropdown and Actimenu SMB Theme

* feat(action-menu): [action-menu] Modify test cases

examples/sites/demos/pc/app/action-menu/icon-composition-api.vue

@@ -6,10 +6,14 @@
       :options="options"
       :suffix-icon="tinyIconEllipsis"
       more-text=""
-      spacing="12px"
+      spacing="8px"
       :max-show-num="3"
     >
     </tiny-action-menu>
+    <br />
+    <tiny-action-menu :options="options" :suffix-icon="tinyIconEllipsis" more-text="" spacing="8px" :max-show-num="3">
+    </tiny-action-menu>
+    <br />
     <p>场景2：只显示文本</p>
     <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
   </div>
@@ -18,12 +22,12 @@
 <script setup>
 import { ref } from 'vue'
 import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
-import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+import { IconPreChecked, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
 
 const options = ref([
   {
     label: '远程登陆',
-    icon: iconWebPlus()
+    icon: IconPreChecked()
   },
   {
     label: '开机',
@@ -70,4 +74,30 @@ p {
   font-size: 14px;
   margin-top: 30px;
 }
+
+.custom-icon.tiny-action-menu {
+  :deep(.tiny-action-menu__wrap) {
+    .tiny-action-menu__item {
+      .tiny-dropdown-item__wrap {
+        color: #191919;
+        .tiny-svg {
+          fill: #191919;
+        }
+      }
+
+      &:hover {
+        .tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
+          fill: #191919;
+        }
+      }
+
+      .tiny-dropdown {
+        color: #191919;
+        .tiny-svg {
+          fill: #191919;
+        }
+      }
+    }
+  }
+}
 </style>

examples/sites/demos/pc/app/action-menu/icon.spec.ts

@@ -25,7 +25,7 @@ test('只显示文本', async ({ page }) => {
   await page.goto('action-menu#icon')
 
   const wrap = page.locator('#icon')
-  const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(2)
   const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
 
   await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()

examples/sites/demos/pc/app/action-menu/icon.vue

@@ -6,7 +6,7 @@
       :options="options"
       :suffix-icon="tinyIconEllipsis"
       more-text=""
-      spacing="12px"
+      spacing="8px"
       :max-show-num="3"
     >
     </tiny-action-menu>
@@ -17,7 +17,7 @@
 
 <script>
 import { ActionMenu } from '@opentiny/vue'
-import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+import { IconPreChecked, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -28,7 +28,7 @@ export default {
       options: [
         {
           label: '远程登陆',
-          icon: iconWebPlus()
+          icon: IconPreChecked()
         },
         {
           label: '开机',
@@ -76,4 +76,30 @@ p {
   font-size: 14px;
   margin-top: 30px;
 }
+
+.custom-icon.tiny-action-menu {
+  :deep(.tiny-action-menu__wrap) {
+    .tiny-action-menu__item {
+      .tiny-dropdown-item__wrap {
+        color: #191919;
+        .tiny-svg {
+          fill: #191919;
+        }
+      }
+
+      &:hover {
+        .tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
+          fill: #191919;
+        }
+      }
+
+      .tiny-dropdown {
+        color: #191919;
+        .tiny-svg {
+          fill: #191919;
+        }
+      }
+    }
+  }
+}
 </style>

examples/sites/demos/pc/app/action-menu/spacing-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-action-menu :options="options" spacing="10px"> </tiny-action-menu>
+    <tiny-action-menu :options="options" spacing="8px"> </tiny-action-menu>
     <br />
     <tiny-action-menu :options="options" :spacing="20"> </tiny-action-menu>
   </div>

examples/sites/demos/pc/app/action-menu/spacing.spec.ts

@@ -10,8 +10,8 @@ test('菜单项间距', async ({ page }) => {
   const tenPXSpacing = actionMenu.first()
   const twentyPXSpacing = actionMenu.nth(1)
 
-  await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-left', '10px')
-  await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-right', '10px')
+  await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-left', '8px')
+  await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-right', '8px')
   await expect(getDivider(twentyPXSpacing)).toHaveCSS('margin-left', '20px')
   await expect(getDivider(twentyPXSpacing)).toHaveCSS('margin-right', '20px')
 })

examples/sites/demos/pc/app/action-menu/spacing.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-action-menu :options="options" spacing="10px"> </tiny-action-menu>
+    <tiny-action-menu :options="options" spacing="8px"> </tiny-action-menu>
     <br />
     <tiny-action-menu :options="options" :spacing="20"> </tiny-action-menu>
   </div>

examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue

@@ -14,7 +14,7 @@
       </template>
     </tiny-dropdown>
     <p>场景2：自定义图且只显示图标</p>
-    <tiny-dropdown title="" :suffix-icon="tinyIconEllipsis">
+    <tiny-dropdown title="" :suffix-icon="tinyIconEllipsis" class="only-icon">
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
@@ -46,4 +46,15 @@ p {
   font-size: 14px;
   margin-top: 30px;
 }
+
+.tiny-dropdown.only-icon {
+  :deep(.tiny-dropdown__trigger) {
+    .tiny-svg {
+      fill: #191919;
+      &:hover {
+        fill: #191919;
+      }
+    }
+  }
+}
 </style>

examples/sites/demos/pc/app/dropdown/show-icon.vue

@@ -14,7 +14,7 @@
       </template>
     </tiny-dropdown>
     <p>场景2：自定义图且只显示图标</p>
-    <tiny-dropdown class="custom-icon" title="" :suffix-icon="tinyIconEllipsis">
+    <tiny-dropdown class="only-icon" title="" :suffix-icon="tinyIconEllipsis">
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
@@ -53,4 +53,15 @@ p {
   font-size: 14px;
   margin-top: 30px;
 }
+
+.tiny-dropdown.only-icon {
+  :deep(.tiny-dropdown__trigger) {
+    .tiny-svg {
+      fill: #191919;
+      &:hover {
+        fill: #191919;
+      }
+    }
+  }
+}
 </style>

examples/sites/demos/pc/app/dropdown/visible-arrow-composition-api.vue

@@ -1,22 +1,25 @@
 <template>
-  <tiny-dropdown>
-    <template #dropdown>
-      <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>
-        <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>是否显示箭头：<tiny-switch v-model="isShowArrow"></tiny-switch></p>
+    <br />
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu :visible-arrow="isShowArrow" :key="isShowArrow">
+          <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 disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { ref } from 'vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinySwitch } from '@opentiny/vue'
+
+const isShowArrow = ref(true)
 </script>

examples/sites/demos/pc/app/dropdown/visible-arrow.vue

@@ -1,26 +1,35 @@
 <template>
-  <tiny-dropdown>
-    <template #dropdown>
-      <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>
-        <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>是否显示箭头：<tiny-switch v-model="isShowArrow"></tiny-switch></p>
+    <br />
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu :visible-arrow="isShowArrow" :key="isShowArrow">
+          <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 disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
+  },
+  data() {
+    return {
+      isShowArrow: true
+    }
   }
 }
 </script>

packages/design/smb/src/action-menu/index.ts

@@ -1,3 +1,5 @@
 export default {
-  icons: {}
+  props: {
+    spacing: '8px'
+  }
 }

packages/renderless/src/action-menu/index.ts

@@ -26,7 +26,7 @@ export const computedMaxShowNum =
   }
 
 export const computedSpacing =
-  ({ props, state }: Pick<IActionMenuRenderlessParams, 'props' | 'state'>) =>
+  ({ props, state, designConfig }: Pick<IActionMenuRenderlessParams, 'props' | 'state', 'designConfig'>) =>
   (): string => {
     if (props.spacing !== undefined) {
       return String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px'
@@ -34,7 +34,7 @@ export const computedSpacing =
     if (state.isCardMode) {
       return '10px'
     } else {
-      return '5px'
+      return designConfig?.props.spacing || '5px'
     }
   }
 

packages/renderless/src/action-menu/vue.ts

@@ -32,7 +32,7 @@ export const api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChang
 export const renderless = (
   props: IActionMenuProps,
   { computed, reactive }: ISharedRenderlessParamHooks,
-  { emit, t }: IActionMenuRenderlessParamUtils
+  { emit, t, designConfig }: IActionMenuRenderlessParamUtils
 ): IActionMenuApi => {
   const api = {} as IActionMenuApi
 
@@ -52,7 +52,7 @@ export const renderless = (
     handleItemClick: handleItemClick(emit),
     visibleChange: visibleChange(emit),
     computedMaxShowNum: computedMaxShowNum({ props, state }),
-    computedSpacing: computedSpacing({ props, state }),
+    computedSpacing: computedSpacing({ props, state, designConfig }),
     computedMoreText: computedMoreText({ props, state, t }),
     computedSuffixIcon: computedSuffixIcon({ props, state })
   })

packages/theme/src/action-menu/index.less

@@ -75,11 +75,15 @@
         &.@{action-menu-prefix-cls}__item-visable {
           .@{dropdown-item-prefix-cls} {
             background-color: var(--ti-action-menu-item-hover-bg-color);
-          }
-        }
 
-        .tiny-svg {
-          fill: var(--ti-action-menu-item-hover-text-color); // TINY-TODO :没有使用--ti-base-color-brand-8的图标色
+            > .tiny-dropdown-item__wrap {
+              > .tiny-dropdown-item__content {
+                .tiny-svg {
+                  fill: var(--ti-action-menu-item-hover-icon-color);
+                }
+              }
+            }
+          }
         }
       }
 

packages/theme/src/action-menu/smb-theme.js

@@ -3,13 +3,13 @@ export const tinyActionMenuSmbTheme = {
   '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-font-weight': 'var(--ti-common-font-weight-normal)',
   '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)',
+  'ti-action-menu-more-icon-width': 'var(--ti-common-size-4x)',
+  'ti-action-menu-more-icon-height': 'var(--ti-common-size-4x)',
   'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-primary)',
   'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-primary)'
 }

packages/theme/src/action-menu/vars.less

@@ -35,6 +35,8 @@
   --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
   // 下拉菜单项文本悬浮色
   --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
+  // 下拉菜单项图标悬浮色
+  --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
   // 下拉菜单项顶部内边距
   --ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px);
   // 下拉菜单项右侧内边距
@@ -44,7 +46,7 @@
   // 下拉菜单项右侧内边距
   --ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
   // 下拉菜单项图标顶部内边距
-  --ti-action-menu-item-svg-margin-top: -2px;
+  --ti-action-menu-item-svg-margin-top: var(--ti-common-space-0, 0px);
   // 下拉菜单项图标右侧内边距
   --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
   // 下拉菜单项图标底部部内边距

packages/theme/src/dropdown-item/aurora-theme.js

@@ -1,6 +1,6 @@
 export const tinyDropdownItemAuroraTheme = {
   'ti-dropdown-item-height': '32px',
-  'ti-dropdown-item-font-size': '14px',
+  'ti-dropdown-item-font-size': 'var(--ti-common-font-size-base)',
   'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-2x)',
   'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-6)',
   'ti-dropdown-item-margin-bottom': 'var(--ti-common-space-base)',

packages/theme/src/dropdown-item/smb-theme.js

@@ -3,14 +3,14 @@ export const tinyDropdownItemSmbTheme = {
   'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-0)',
   'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-4x)',
   'ti-dropdown-item-hover-text-color': 'var(--ti-common-color-text-primary)',
-  'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-text-link-hover)',
   'ti-dropdown-item-expand-svg-margin-left': 'var(--ti-common-space-0)',
   'ti-dropdown-item-expand-svg-margin-right': 'var(--ti-common-space-2x)',
   'ti-dropdown-item-content-margin-left': 'calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x))',
   'ti-dropdown-item-max-width': 'var(--ti-common-size-auto)',
   'ti-dropdown-item-height': 'var(--ti-common-size-height-normal)',
-  'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon)',
-  'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-6)',
+  'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon-normal)',
+  'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-icon-hover)',
+  'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-4)',
   'ti-dropdown-item-active-bg-color': 'var(--ti-common-color-bg-white-normal)',
   'ti-dropdown-item-active-text-color': '#1476FF',
   'ti-dropdown-item-content-text-hover': '#1476FF',
@@ -20,5 +20,6 @@ export const tinyDropdownItemSmbTheme = {
   'ti-dropdown-item-before-height': '0',
   'ti-dropdown-item-bg-color-selected': 'var(--ti-common-color-bg-white-normal)',
   'ti-dropdown-item-text-color-selected': '#1476FF',
-  'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)'
+  'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)',
+  'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-bg-normal)'
 }

packages/theme/src/dropdown-menu/aurora-theme.js

@@ -5,5 +5,7 @@ export const tinyDropdownMenuAuroraTheme = {
   'ti-dropdown-menu-padding-vertical': 'var(--ti-common-space-base)',
   'ti-dropdown-menu-margin-vertical': 'var(--ti-common-space-3x)',
   'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-hover-background)',
-  'ti-dropdown-menu-min-width': 'auto'
+  'ti-dropdown-menu-min-width': 'auto',
+  'ti-dropdown-menu-arrow-margin-top': 'var(--ti-common-space-3x)',
+  'ti-dropdown-menu-arrow-margin-bottom': 'var(--ti-common-space-3x)'
 }

packages/theme/src/dropdown-menu/index.less

@@ -60,7 +60,9 @@
   }
 
   &.@{css-prefix}popper[x-placement^='top'] {
-    margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom);
+    &:has(.popper__arrow) {
+      margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom);
+    }
   }
 
   &.@{css-prefix}popper[x-placement^='top'] .popper__arrow {
@@ -79,7 +81,9 @@
   }
 
   &.@{css-prefix}popper[x-placement^='bottom'] {
-    margin-top: var(--ti-dropdown-menu-arrow-margin-top);
+    &:has(.popper__arrow) {
+      margin-top: var(--ti-dropdown-menu-arrow-margin-top);
+    }
   }
 
   &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow {
@@ -191,4 +195,4 @@
       margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-mini-before-margin-horizontal);
     }
   }
-}
+}

packages/theme/src/dropdown-menu/vars.less

@@ -39,14 +39,14 @@
   --ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0, 0px);
   // 下拉菜单弹框箭头的尺寸
   --ti-dropdown-menu-arrow-border-width: 6px;
-  // 下拉菜单弹框箭头的底部外边距
-  --ti-dropdown-menu-arrow-margin-bottom: 12px;
-  // 下拉菜单弹框箭头的顶部外边距
-  --ti-dropdown-menu-arrow-margin-top: 12px;
+  // 下拉菜单带箭头弹框的底部外边距
+  --ti-dropdown-menu-arrow-margin-bottom: var(--ti-common-space-3x);
+  // 下拉菜单带箭头弹框的顶部外边距
+  --ti-dropdown-menu-arrow-margin-top: var(--ti-common-space-3x);
   // 下拉菜单弹框箭头的边框色
   --ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal, #adb0b8);
   // 下拉菜单弹框箭头的颜色
   --ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light, #fff);
   // 下拉菜单弹框周边的填充色
   --ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent, transparent);
-}
+}

packages/theme/src/dropdown/aurora-theme.js

@@ -9,5 +9,6 @@ export const tinyDropdownAuroraTheme = {
   'ti-dropdown-caret-button-padding-left': 'var(--ti-common-space-2x)',
   'ti-dropdown-caret-button-padding-right': 'var(--ti-common-space-2x)',
   'ti-dropdown-caret-svg-margin-horizontal': 'var(--ti-common-space-0)',
-  'ti-dropdown-caret-svg-padding-left': 'var(--ti-common-space-0)'
+  'ti-dropdown-caret-svg-padding-left': 'var(--ti-common-space-0)',
+  'ti-dropdown-suffix-icon-margin-vertical': 'var(--ti-common-space-2x)'
 }

packages/theme/src/dropdown/index.less

@@ -176,6 +176,13 @@
     cursor: pointer;
   }
 
+  .tiny-dropdown__suffix-inner {
+    .tiny-svg {
+      margin: var(--ti-dropdown-suffix-icon-margin-vertical) 0;
+      vertical-align: top;
+    }
+  }
+
   &--visible {
     // rotate(180deg) 会受svg的margin影响，位置会变动！
     transform: scaleY(-1);

packages/theme/src/dropdown/smb-theme.js

@@ -14,5 +14,7 @@ export const tinyDropdownSmbTheme = {
   '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)'
+  'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)',
+  'ti-dropdown-line-height': 'var(--ti-common-line-height-1)',
+  'ti-dropdown-suffix-icon-margin-vertical': 'var(--ti-common-space-2x)'
 }

packages/theme/src/dropdown/vars.less

@@ -67,4 +67,6 @@
   --ti-dropdown-title-button-padding-right: var(--ti-common-space-5x, 20px);
   // 下拉菜单文字按钮的右侧内边距
   --ti-dropdown-title-button-padding-left: var(--ti-common-space-5x, 20px);
+  // 下拉图标垂直内边距
+  --ti-dropdown-suffix-icon-margin-vertical: calc(var(--ti-common-space-2x, 8px) - 1px);
 }

packages/vue/src/action-menu/src/pc.vue

@@ -22,7 +22,11 @@
             <slot name="item" :data="itemData"></slot>
           </template>
         </tiny-dropdown-item>
-        <span class="tiny-action-menu__item-line" :style="{ margin: '0 ' + state.spacing }"></span>
+        <span
+          v-if="index !== state.visibleOptions.length - 1 || state.moreOptions.length"
+          class="tiny-action-menu__item-line"
+          :style="{ margin: '0 ' + state.spacing }"
+        ></span>
       </li>
 
       <li v-if="state.moreOptions.length" class="tiny-action-menu__item">

packages/vue/src/dropdown-item/src/index.ts

@@ -84,6 +84,10 @@ export const dropdownItemProps = {
   tipPosition: {
     type: String,
     default: 'right'
+  },
+  effect: {
+    type: String,
+    default: 'light'
   }
 }
 

packages/vue/src/dropdown-item/src/pc.vue

@@ -13,7 +13,7 @@
 <template>
   <!-- TINY-TODO:  tiny-dropdown-menu__item命名不规范，后续统一有个迭代去掉 -->
   <li
-    v-auto-tip="{ always: true, content: getTip, effect: 'dark', placement: tipPosition }"
+    v-auto-tip="{ always: true, content: getTip, effect, placement: tipPosition }"
     class="tiny-dropdown-item tiny-dropdown-menu__item"
     :class="{
       'is-disabled': disabled,
@@ -96,7 +96,8 @@ export default defineComponent({
     'appendToBody',
     'textField',
     'tip',
-    'tipPosition'
+    'tipPosition',
+    'effect'
   ],
   components: {
     IconDeltaLeft: iconDeltaLeft()