From bab81b7a9252b24906c95c80b07eaba4cdb03fa6 Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Mon, 30 Sep 2024 16:15:15 -0700
Subject: [PATCH 1/3] feat(demo): [action-menu] modify demo for action-menu

---
 .../action-menu/disabled-composition-api.vue  | 32 ++++++++++++++++++-
 .../demos/pc/app/action-menu/disabled.vue     | 31 +++++++++++++++++-
 .../action-menu/slot-item-composition-api.vue |  2 +-
 .../demos/pc/app/action-menu/slot-item.vue    |  2 +-
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue b/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue
index b75e3fe001..59fe335e88 100644
--- a/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue
@@ -1,10 +1,17 @@
 <template>
-  <tiny-action-menu :options="options"> </tiny-action-menu>
+  <div>
+    <tiny-action-menu :options="options"> </tiny-action-menu>
+    <br />
+    <tiny-action-menu :options="options1"> </tiny-action-menu>
+    <br />
+    <tiny-action-menu :options="options1" mode="card"> </tiny-action-menu>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
 
 const options = ref([
   {
@@ -28,4 +35,27 @@ const options = ref([
     ]
   }
 ])
+
+const options1 = ref([
+  {
+    label: '远程登陆',
+    icon: iconWebPlus()
+  },
+  {
+    label: '开机',
+    icon: iconSuccessful(),
+    disabled: true
+  },
+  {
+    label: '关机',
+    icon: iconCloseSquare()
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
 </script>
diff --git a/examples/sites/demos/pc/app/action-menu/disabled.vue b/examples/sites/demos/pc/app/action-menu/disabled.vue
index 83c36d2a34..1f79b19b30 100644
--- a/examples/sites/demos/pc/app/action-menu/disabled.vue
+++ b/examples/sites/demos/pc/app/action-menu/disabled.vue
@@ -1,9 +1,16 @@
 <template>
-  <tiny-action-menu :options="options"> </tiny-action-menu>
+  <div>
+    <tiny-action-menu :options="options"> </tiny-action-menu>
+    <br />
+    <tiny-action-menu :options="options1"> </tiny-action-menu>
+    <br />
+    <tiny-action-menu :options="options1" mode="card"> </tiny-action-menu>
+  </div>
 </template>
 
 <script>
 import { ActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -33,6 +40,28 @@ export default {
             { label: '切换VPC', divided: true }
           ]
         }
+      ],
+      options1: [
+        {
+          label: '远程登陆',
+          icon: iconWebPlus()
+        },
+        {
+          label: '开机',
+          icon: iconSuccessful(),
+          disabled: true
+        },
+        {
+          label: '关机',
+          icon: iconCloseSquare()
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
       ]
     }
   }
diff --git a/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue b/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
index e229ebb810..08cdb54c9e 100644
--- a/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
@@ -2,7 +2,7 @@
   <tiny-action-menu :options="options">
     <template #item="{ data }">
       <tiny-icon-smile></tiny-icon-smile>
-      <span> {{ data.name }}</span>
+      <span style="vertical-align: middle"> {{ data.name }}</span>
     </template>
   </tiny-action-menu>
 </template>
diff --git a/examples/sites/demos/pc/app/action-menu/slot-item.vue b/examples/sites/demos/pc/app/action-menu/slot-item.vue
index 1723640a2c..cdde94029a 100644
--- a/examples/sites/demos/pc/app/action-menu/slot-item.vue
+++ b/examples/sites/demos/pc/app/action-menu/slot-item.vue
@@ -2,7 +2,7 @@
   <tiny-action-menu :options="options">
     <template #item="{ data }">
       <icon-smile></icon-smile>
-      <span> {{ data.name }}</span>
+      <span style="vertical-align: middle"> {{ data.name }}</span>
     </template>
   </tiny-action-menu>
 </template>

From 391479b773bf413a0558605833586a0593dec8d5 Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Mon, 30 Sep 2024 16:17:48 -0700
Subject: [PATCH 2/3] refactor(action-menu): [action-menu] modify variable
 names and add refactor styles

---
 packages/theme/src/action-menu/index.less | 115 +++++++---------------
 packages/theme/src/action-menu/vars.less  |  55 ++++-------
 2 files changed, 53 insertions(+), 117 deletions(-)

diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
index 3df4b4c7c3..dc405ec507 100644
--- a/packages/theme/src/action-menu/index.less
+++ b/packages/theme/src/action-menu/index.less
@@ -20,115 +20,72 @@
 .@{action-menu-prefix-cls} {
   .component-css-vars-action-menu();
 
-  .@{dropdown-prefix-cls} {
-    .@{dropdown-prefix-cls}-trigger {
-      .tiny-svg {
-        margin-right: var(--ti-action-menu-more-icon-margin-right);
-      }
-    }
-  }
+  font-size: var(--tv-ActionMenu-font-size);
 
-  font-size: var(--ti-action-menu-font-size);
-  font-weight: var(--ti-action-menu-font-weight);
-  color: var(--ti-action-menu-text-color);
+  .tiny-svg {
+    font-size: var(--tv-ActionMenu-icon-size);
+  }
 
   &__wrap {
     display: flex;
 
-    &.@{action-menu-prefix-cls}__card-mode {
-      .@{action-menu-prefix-cls}__item {
-        .tiny-svg {
-          fill: var(--ti-action-menu-item-card-text-color);
-        }
-
-        .@{dropdown-prefix-cls} {
-          .@{dropdown-prefix-cls}-trigger {
-            &:hover {
-              .tiny-svg {
-                fill: var(--ti-action-menu-item-card-text-color);
-              }
-            }
-          }
-        }
-      }
-    }
-
     .@{action-menu-prefix-cls}__item {
       display: flex;
       justify-content: space-between;
       align-items: center;
 
-      .tiny-svg {
-        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 {
-        &.@{action-menu-prefix-cls}__item-visable {
-          .@{dropdown-item-prefix-cls} {
-            background-color: var(--ti-action-menu-item-hover-bg-color);
-
-            > .tiny-dropdown-item__wrap {
-              > .tiny-dropdown-item__content {
-                .tiny-svg {
-                  fill: var(--ti-action-menu-item-hover-icon-color);
-                }
-              }
-            }
-          }
-        }
-      }
-
+      // 默认
       &.@{action-menu-prefix-cls}__item-visable {
         .@{dropdown-item-prefix-cls} {
           .@{dropdown-item-prefix-cls}__wrap {
-            color: var(--ti-action-menu-text-color);
+            color: var(--tv-ActionMenu-text-color);
             margin: 0px;
             height: auto;
 
-            &:hover {
-              background-color: var(--ti-action-menu-item-hover-bg-color);
-              text-decoration: var(--ti-action-menu-hover-text-decoration);
-              color: var(--ti-action-menu-item-hover-text-color);
+            .tiny-svg {
+              fill: var(--tv-ActionMenu-icon-color);
             }
           }
         }
 
-        &.@{action-menu-prefix-cls}__card-item {
+        // 悬浮
+        &:not(.is-disabled):hover {
           .@{dropdown-item-prefix-cls}__wrap {
-            color: var(--ti-action-menu-item-card-text-color);
-
-            .tiny-svg {
-              fill: var(--ti-action-menu-item-card-text-color);
-            }
-
-            &:hover {
-              color: var(--ti-action-menu-item-card-hover-text-color);
-            }
+            text-decoration: underline;
           }
         }
 
+        //  禁用
         &.is-disabled {
           .@{dropdown-item-prefix-cls}__wrap {
-            color: var(--ti-action-menu-item-disabled-text-color);
+            .tiny-dropdown-item__content {
+              color: var(--tv-ActionMenu-text-color-disabled);
+
+              .tiny-svg {
+                fill: var(--tv-ActionMenu-icon-color-disabled);
+              }
+            }
           }
         }
       }
+    }
 
-      .@{action-menu-prefix-cls}__item-line {
-        position: relative;
-        width: var(--ti-action-menu-item-line-width);
-        height: 12px;
-        background: var(--ti-action-menu-item-line-bg-color);
-        display: inline-block;
+    /* card 类型 */
+    &.@{action-menu-prefix-cls}__card-mode {
+      .tiny-svg {
+        fill: var(--tv-ActionMenu-icon-color-card);
+      }
+
+      .@{action-menu-prefix-cls}__item {
+        &.@{action-menu-prefix-cls}__item-visable {
+          .@{dropdown-item-prefix-cls}__wrap {
+            color: var(--tv-ActionMenu-text-color-card);
+
+            .tiny-svg {
+              fill: var(--tv-ActionMenu-icon-color-card);
+            }
+          }
+        }
       }
     }
   }
diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less
index d9df05c754..23bddf89b7 100644
--- a/packages/theme/src/action-menu/vars.less
+++ b/packages/theme/src/action-menu/vars.less
@@ -11,42 +11,21 @@
 */
 
 .component-css-vars-action-menu() {
-  // 按钮文本字重
-  --ti-action-menu-font-weight: var(--ti-common-font-weight-normal, 400);
-  // 按钮文本装饰
-  --ti-action-menu-hover-text-decoration: underline;
-  // 更多...图标的宽度
-  --ti-action-menu-more-icon-width: var(--ti-common-size-4x, 16px);
-  // 更多...图标的高度
-  --ti-action-menu-more-icon-height: var(--ti-common-size-4x, 16px);
-  // 更多...图标的右边外边距
-  --ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
-  // 下拉触发源文本颜色
-  --ti-action-menu-text-color: var(--ti-common-color-text-link, #1476ff);
-  // 下拉触发源文本禁用色
-  --ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
-  // 下拉触发源文本字号
-  --ti-action-menu-font-size: var(--ti-common-font-size-base, 14px);
-  // 分割线颜色
-  --ti-action-menu-item-line-bg-color: transparent;
-  // 分割线宽度
-  --ti-action-menu-item-line-width: var(--ti-common-space-0, 0px);
-  // 下拉菜单项悬浮背景色
-  --ti-action-menu-item-hover-bg-color: transparent;
-  // 下拉菜单项文本悬浮色
-  --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link, #1476ff);
-  // 下拉菜单项图标悬浮色
-  --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #1476ff); // 没有这个颜色的图标色
-  // 下拉菜单项图标顶部内边距
-  --ti-action-menu-item-svg-margin-top: 0px;
-  // 下拉菜单项图标右侧内边距
-  --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
-  // 下拉菜单项图标底部部内边距
-  --ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0, 0px);
-  // 下拉菜单项图标左侧内边距
-  --ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px);
-  // 下拉菜单卡片模式字体颜色
-  --ti-action-menu-item-card-text-color: var(--ti-common-color-text-primary, #191919);
-  // 下拉菜单卡片模式字体颜色
-  --ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-primary, #191919);
+  // 文本字号
+  --tv-ActionMenu-font-size: var(--tv-font-size-md, 14px);
+  // 文本色（默认）
+  --tv-ActionMenu-text-color: var(--tv-color-text-link, #1476ff);
+  //  文本色（card 类型）
+  --tv-ActionMenu-text-color-card: var(--tv-color-text, #191919);
+  // 文本禁用色
+  --tv-ActionMenu-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
+
+  // 图标尺寸
+  --tv-ActionMenu-icon-size: var(--tv-icon-size, 16px);
+  // 图标色（默认）
+  --tv-ActionMenu-icon-color: var(--tv-color-icon-link, #1476ff);
+  // 图标色（ card 类型）
+  --tv-ActionMenu-icon-color-card: var(--tv-color-icon-control);
+  // 图标禁用色
+  --tv-ActionMenu-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
 }

From 6ef786a1ec51339a4732457f91f6fbe4ea35d653 Mon Sep 17 00:00:00 2001
From: zhanyini <zhanyini666@163.com>
Date: Mon, 30 Sep 2024 16:41:12 -0700
Subject: [PATCH 3/3] test(action-menu): [action-menu] modify test cases

---
 examples/sites/demos/pc/app/action-menu/disabled.spec.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/sites/demos/pc/app/action-menu/disabled.spec.ts b/examples/sites/demos/pc/app/action-menu/disabled.spec.ts
index af20bc70b5..a3ce3c2943 100644
--- a/examples/sites/demos/pc/app/action-menu/disabled.spec.ts
+++ b/examples/sites/demos/pc/app/action-menu/disabled.spec.ts
@@ -6,7 +6,10 @@ test('禁用', async ({ page }) => {
 
   const wrap = page.locator('#disabled')
   const actionMenu = wrap.locator('.tiny-action-menu')
-  const disabledItem = actionMenu.locator('.tiny-dropdown-item.tiny-dropdown-menu__item').filter({ hasText: '开机' })
+  const disabledItem = actionMenu
+    .nth(0)
+    .locator('.tiny-dropdown-item.tiny-dropdown-menu__item')
+    .filter({ hasText: '开机' })
 
   await expect(disabledItem).toHaveClass(/is-disabled/)
   await expect(disabledItem).toHaveCSS('cursor', 'not-allowed')