From bd5a91c7c7aa516454fc22e4fccd994301a8e813 Mon Sep 17 00:00:00 2001
From: devin-cwd <caowendong@huawei.com>
Date: Tue, 9 Dec 2025 17:39:00 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88menu=EF=BC=89=EF=BC=9A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=BC=95=E5=AF=BC=E7=BA=BF=EF=BC=8C=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E3=80=82=E7=A7=BB=E9=99=A4item=E7=9A=84Mouse?=
 =?UTF-8?q?leave=E4=BA=8B=E4=BB=B6=E3=80=82popover=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B7=B2=E7=BB=8F=E7=9B=91=E5=90=AC=E7=9B=B8=E5=85=B3=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_utils/icons.ts       |   1 +
 packages/opendesign/src/menu/OMenu.vue        |  42 +---
 packages/opendesign/src/menu/OMenuItem.vue    |  64 +++---
 packages/opendesign/src/menu/OSubMenu.vue     | 111 ++++-----
 .../src/menu/__demo__/IndexMenu.vue           |   2 +
 .../src/menu/__demo__/MenuBasic.vue           | 163 ++++++++++++--
 .../opendesign/src/menu/__demo__/MenuSize.vue |  77 +------
 .../src/menu/__demo__/MenuSizeIcon.vue        | 181 +++++++++++++++
 packages/opendesign/src/menu/provide.ts       |  15 +-
 packages/opendesign/src/menu/style/index.ts   |   1 +
 packages/opendesign/src/menu/style/media.scss |  33 +--
 packages/opendesign/src/menu/style/style.scss | 212 +++++++-----------
 packages/opendesign/src/menu/style/var.scss   | 135 ++++++-----
 packages/opendesign/src/menu/types.ts         |   8 +
 14 files changed, 592 insertions(+), 453 deletions(-)
 create mode 100644 packages/opendesign/src/menu/__demo__/MenuSizeIcon.vue

diff --git a/packages/opendesign/src/_utils/icons.ts b/packages/opendesign/src/_utils/icons.ts
index d5779186b..cdc7e3811 100644
--- a/packages/opendesign/src/_utils/icons.ts
+++ b/packages/opendesign/src/_utils/icons.ts
@@ -198,3 +198,4 @@ export const IconCalendarPrevYear = shallowRef<Component>(OIconDoubleArrowLeft);
 export const IconCalendarNextYear = shallowRef<Component>(OIconDoubleArrowRight);
 export const IconCalendarPrevMonth = shallowRef<Component>(OIconChevronLeft);
 export const IconCalendarNextMonth = shallowRef<Component>(OIconChevronRight);
+
diff --git a/packages/opendesign/src/menu/OMenu.vue b/packages/opendesign/src/menu/OMenu.vue
index 56a26095f..7e77e4603 100644
--- a/packages/opendesign/src/menu/OMenu.vue
+++ b/packages/opendesign/src/menu/OMenu.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { computed, provide, ref, shallowRef, toRefs } from 'vue';
-import { menuInjectKey, type ShowTooltipContent, type ShowTooltipOptions } from './provide';
+import { computed, provide, ref, toRefs, toRef } from 'vue';
+import { menuInjectKey } from './provide';
 import { menuProps } from './types';
 import MenuTree from './menu';
-import { isArray } from '../_utils/is';
-import { OPopover } from '../popover';
-import '../popover/style';
+import { isArray, isUndefined } from '../_utils/is';
 
 const props = defineProps(menuProps);
 
@@ -47,25 +45,6 @@ const updateExpanded = (val: Array<string>) => {
   emits('expanded-change', val);
 };
 
-const tooltipTarget = shallowRef<HTMLElement>();
-const tooltipContent = shallowRef<ShowTooltipContent>('');
-/**
- * 对溢出元素创建tooltip，避免逐个元素创建浪费性能
- */
-const showTooltip = (options: ShowTooltipOptions) => {
-  const { el, content } = options;
-  tooltipTarget.value = el;
-  tooltipContent.value = content || el.innerText;
-};
-const hideTooltip = () => {
-  tooltipContent.value = '';
-  tooltipTarget.value = undefined;
-};
-
-// 节点嵌套深度
-const depth = 0;
-
-
 provide(menuInjectKey, {
   size,
   accordion,
@@ -73,20 +52,19 @@ provide(menuInjectKey, {
   activeNodes,
   realExpanded,
   menuTree,
-  depth,
   updateModelValue,
   updateExpanded,
-  showTooltip,
-  hideTooltip
+  arrowPosition: toRef(props, 'arrowPosition')
 });
 </script>
 
 <template>
-  <ul :class="['o-menu', `o-menu-${size}`]">
+  <ul :class="[
+    'o-menu',
+    `o-menu-${size}`,
+    arrowPosition && `o-menu-arrow-${arrowPosition}`
+    ]"
+  >
     <slot></slot>
-    <OPopover v-if="tooltipTarget" visible :offset="16" :target="tooltipTarget" position="bottom">
-      <template v-if="['string', 'number'].includes(typeof tooltipContent)">{{ tooltipContent }}</template>
-      <component :is="tooltipContent" v-else />
-    </OPopover>
   </ul>
 </template>
diff --git a/packages/opendesign/src/menu/OMenuItem.vue b/packages/opendesign/src/menu/OMenuItem.vue
index 98e3927a6..5a2ea8517 100644
--- a/packages/opendesign/src/menu/OMenuItem.vue
+++ b/packages/opendesign/src/menu/OMenuItem.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, onMounted, useTemplateRef } from 'vue';
 import { menuItemProps } from './types';
 import { menuInjectKey, subMenuInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
-import { isOverflown } from '../_utils/dom.ts';
+import { isOverflown } from '../_utils/dom';
+import { OPopover } from '../popover';
 
 const props = defineProps(menuItemProps);
 
@@ -14,7 +15,6 @@ const emits = defineEmits<{
 const menuInjection = inject(menuInjectKey, null);
 const subMenuInjection = inject(subMenuInjectKey, null);
 
-const { size = ref('medium'), showTooltip, hideTooltip } = menuInjection || {};
 
 const isSelected = computed(() => {
   if (menuInjection) {
@@ -39,51 +39,51 @@ const onItemClick = (ev: MouseEvent) => {
   menuInjection?.updateModelValue(props.value);
 };
 
-const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
-
-
-const cssVars = computed(() => {
-  return {
-    '--menu-item-level': depth,
-  };
-});
+// 当前节点深度
+const currentDepth = subMenuInjection ? subMenuInjection.parentDepth + 1 : 0;
 
 menuInjection?.menuTree.addChild({
   value: props.value as string,
   parentVal: subMenuInjection?.value,
 });
 
-const itemContentRef = ref<HTMLSpanElement>();
-const handleMouseenter = (e: MouseEvent) => {
-  if (!e.target || !isOverflown(itemContentRef.value)) {
+// 支持超出隐藏，hover时popover提示，当前不支持内容变化，动态刷新
+const menuItemRef = useTemplateRef('menuItemRef');
+const itemContentRef = useTemplateRef('itemContentRef');
+const isContentOverflow = ref(false);
+const content= ref('');
+
+onMounted(() => {
+  if (!itemContentRef.value) {
     return;
   }
-  showTooltip?.({ el: e.target as HTMLElement, content: itemContentRef.value?.innerText });
-};
-const handleMouseleave = () => {
-  hideTooltip?.();
-};
+  isContentOverflow.value = isOverflown(itemContentRef.value);
+  content.value = itemContentRef.value?.innerText || '';
+});
+
 </script>
 
 <template>
   <li
-    class="o-menu-item" 
-    :class="{  
-      'o-menu-item-selected': isSelected, 
-      'o-menu-item-disabled': $props.disabled 
-    }" 
-    :style="cssVars" 
-    @click="onItemClick" 
-    @mouseenter="handleMouseenter" 
-    @mouseleave="handleMouseleave"
+      :class="{
+    'o-menu-item': true,
+    'o-menu-item-selected': isSelected,
+    'o-menu-item-disabled': $props.disabled ,
+  }"
+    :style="{
+      '--menu-level': currentDepth,
+    }"
+    @click="onItemClick"
+    ref="menuItemRef"
   >
-    <span v-if="size !== 'small' && (props.icon || $slots.icon)" class="o-menu-item-icon">
+    <div v-if="props.icon || $slots.icon" class="o-menu-item-icon">
       <slot name="icon">
         <component :is="props.icon" />
       </slot>
-    </span>
-    <span ref="itemContentRef" class="o-menu-item-content">
+    </div>
+    <div class="o-menu-item-content" ref="itemContentRef">
       <slot></slot>
-    </span>
+    </div>
+    <OPopover v-if="isContentOverflow" :offset="12" :target="menuItemRef" position="bottom" wrapClass="o-menu-popover">{{ content }}</OPopover>
   </li>
 </template>
diff --git a/packages/opendesign/src/menu/OSubMenu.vue b/packages/opendesign/src/menu/OSubMenu.vue
index dc30c2ff9..fc25c590c 100644
--- a/packages/opendesign/src/menu/OSubMenu.vue
+++ b/packages/opendesign/src/menu/OSubMenu.vue
@@ -1,17 +1,18 @@
 <script lang="ts" setup>
-import { computed, inject, provide, ref } from 'vue';
+import { computed, inject, onMounted, provide, ref, useTemplateRef } from 'vue';
 import { subMenuProps } from './types';
 import { IconChevronDown } from '../_utils/icons';
 import { menuInjectKey, subMenuInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
 import { isOverflown } from '../_utils/dom.ts';
+import { OPopover } from '../popover';
 
 const props = defineProps(subMenuProps);
 
 const menuInjection = inject(menuInjectKey, null);
 const subMenuInjection = inject(subMenuInjectKey, null);
 
-const { size = ref('medium'), showTooltip, hideTooltip } = menuInjection || {};
+const { arrowPosition } = menuInjection || {};
 
 // 是否展开
 const isExpanded = computed(() => {
@@ -75,11 +76,12 @@ const onSubItemClick = (ev: Event) => {
   }
 };
 
-const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
+// 当前节点深度
+const currentDepth = subMenuInjection ? subMenuInjection.parentDepth + 1 : 0;
 
 provide(subMenuInjectKey, {
   value: props.value,
-  depth,
+  parentDepth: currentDepth,
 });
 
 menuInjection?.menuTree.addChild({
@@ -87,81 +89,56 @@ menuInjection?.menuTree.addChild({
   parentVal: subMenuInjection?.value,
 });
 
-// 过渡动画
-const onBeforeEnter = (el: Element) => {
-  (el as HTMLUListElement).style.height = '0px';
-};
-const onEnter = (el: Element) => {
-  (el as HTMLUListElement).style.height = `${el.scrollHeight}px`;
-};
-// 进入动画完成后高度设置为auto，支持嵌套子菜单展开
-const onAfterEnter = (el: Element) => {
-  (el as HTMLUListElement).style.height = 'auto';
-};
-const onBeforeLeave = (el: Element) => {
-  (el as HTMLUListElement).style.height = `${(el as HTMLUListElement).offsetHeight}px`;
-};
-const onLeave = (el: Element) => {
-  (el as HTMLUListElement).style.height = '0px';
-};
 
+// 支持超出隐藏，hover时popover提示，当前不支持内容变化，动态刷新
+const subMenuTitleRef = useTemplateRef('subMenuTitleRef');
+const itemContentRef = useTemplateRef('itemContentRef');
+const isContentOverflow = ref(false);
+const content= ref('');
 
-const itemContentRef = ref<HTMLSpanElement>();
-const handleMouseenter = (e: MouseEvent) => {
-  if (!e.target || !isOverflown(itemContentRef.value)) {
+onMounted(() => {
+  if (!itemContentRef.value) {
     return;
   }
-  showTooltip?.({ el: e.target as HTMLElement, content: itemContentRef.value?.innerText });
-};
-const handleMouseleave = () => {
-  hideTooltip?.();
-};
+  isContentOverflow.value = isOverflown(itemContentRef.value);
+  content.value = itemContentRef.value?.innerText || '';
+});
 </script>
 
 <template>
   <li
-    class="o-sub-menu"
-    :class="{ 
-      'o-sub-menu-selected': isSelected, 
-      'o-sub-menu-associated-selected': isAssociatedSelected, 
-      'o-sub-menu-expanded': isExpanded 
+    :class="{
+      'o-sub-menu': true,
+      'o-sub-menu-selected': isSelected,
+      'o-sub-menu-associated-selected': isAssociatedSelected,
+      'o-sub-menu-expanded': isExpanded,
     }"
-    :style="{ 
-      '--sub-menu-level': depth 
-    }" 
+    :style="{ '--menu-level': currentDepth }"
+    :level="currentDepth"
     @click="onSubItemClick"
   >
-    <div class="o-sub-menu-title" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-      <template v-if="size === 'small'">
-        <span class="o-sub-menu-title-arrow o-sub-menu-title-icon">
-          <IconChevronDown />
-        </span>
-        <span ref="itemContentRef" class="o-sub-menu-title-content">
-          <slot name="title"></slot>
-        </span>
-      </template>
-      <template v-else>
-        <span v-if="$slots.icon || props.icon" class="o-sub-menu-title-icon">
-          <slot name="icon"><component :is="props.icon" /></slot>
-        </span>
-        <span ref="itemContentRef" class="o-sub-menu-title-content">
-          <slot name="title"></slot>
-        </span>
-        <span class="o-sub-menu-title-arrow">
-          <IconChevronDown />
-        </span>
-      </template>
+    <div class="o-sub-menu-title" ref="subMenuTitleRef">
+      <div class="o-sub-menu-arrow" v-if="arrowPosition === 'left'">
+        <IconChevronDown />
+      </div>
+      <div v-if="$slots.icon || props.icon" class="o-sub-menu-title-icon">
+        <slot name="icon">
+          <component :is="props.icon" />
+        </slot>
+      </div>
+      <div ref="itemContentRef" class="o-sub-menu-title-content">
+        <slot name="title"></slot>
+      </div>
+      <div class="o-sub-menu-arrow" v-if="!arrowPosition || arrowPosition === 'right'">
+        <IconChevronDown />
+      </div>
     </div>
-    <Transition
-      @before-enter="onBeforeEnter" 
-      @enter="onEnter" 
-      @after-enter="onAfterEnter" 
-      @before-leave="onBeforeLeave"
-      @leave="onLeave"
-    >
-      <ul v-show="isExpanded" class="o-sub-menu-children">
-        <slot></slot>
+      <ul class="o-sub-menu-children" :class="{'expanded': isExpanded}">
+        <div class="o-sub-menu-children-wrap">
+          <slot></slot>
+        </div>
       </ul>
-    </Transition>
+
+    <OPopover v-if="isContentOverflow" :offset="12" :target="subMenuTitleRef" position="bottom" wrapClass="o-menu-popover">{{ content }}</OPopover>
   </li>
 </template>
diff --git a/packages/opendesign/src/menu/__demo__/IndexMenu.vue b/packages/opendesign/src/menu/__demo__/IndexMenu.vue
index f5180b5f8..a5fa1f49e 100644
--- a/packages/opendesign/src/menu/__demo__/IndexMenu.vue
+++ b/packages/opendesign/src/menu/__demo__/IndexMenu.vue
@@ -3,6 +3,7 @@ import '../style';
 import MenuBasic from './MenuBasic.vue';
 import MenuAccordion from './MenuAccordion.vue';
 import MenuSize from './MenuSize.vue';
+import MenuSizeIcon from './MenuSizeIcon.vue';
 </script>
 
 <template>
@@ -10,6 +11,7 @@ import MenuSize from './MenuSize.vue';
     <MenuBasic />
     <MenuAccordion />
     <MenuSize />
+    <MenuSizeIcon />
   </div>
 </template>
 
diff --git a/packages/opendesign/src/menu/__demo__/MenuBasic.vue b/packages/opendesign/src/menu/__demo__/MenuBasic.vue
index f0c41c154..37d1c082c 100644
--- a/packages/opendesign/src/menu/__demo__/MenuBasic.vue
+++ b/packages/opendesign/src/menu/__demo__/MenuBasic.vue
@@ -25,24 +25,73 @@ const checkboxVals = ref([]);
 
 <template>
   <h4>基础用法</h4>
+  <h5>多级菜单</h5>
   <section>
     <div>
       <DefineTemplate>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange" arrow-position="left">
         <OSubMenu value="1">
-          <template #title>一级菜单1一级菜单1一级菜单1</template>
-          <template #icon><OIconMore /></template>
+          <template #title>一级菜单1一级菜单1一级菜单1一级菜单1一级菜单1</template>
           <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
           <OMenuItem value="1-2" disabled>二级菜单1-2</OMenuItem>
           <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
           <OMenuItem value="1-4">二级菜单1-4</OMenuItem>
         </OSubMenu>
+        <OSubMenu value="2">
+          <template #title>一级菜单2</template>
+          <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
+          <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
+          <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
+          <OMenuItem value="2-4">二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="3">
+          <template #title>菜单3</template>
+          <OSubMenu value="3-1">
+            <template #title>菜单3-1</template>
+            <OSubMenu value="3-1-1">
+              <template #title>菜单3-1-1</template>
+              <OMenuItem value="3-1-1-1">菜单3-1-1-1</OMenuItem>
+              <OMenuItem value="3-1-1-2">菜单3-1-1-2</OMenuItem>
+              <OMenuItem value="3-1-1-3">菜单3-1-1-3</OMenuItem>
+              <OMenuItem value="3-1-1-4">菜单3-1-1-4</OMenuItem>
+            </OSubMenu>
+            <OMenuItem value="3-1-2">菜单3-1-2</OMenuItem>
+            <OMenuItem value="3-1-3">菜单3-1-3</OMenuItem>
+            <OSubMenu value="3-1-4">
+              <template #title>菜单3-1-4</template>
+              <OMenuItem value="3-1-4-1">菜单3-1-4-1</OMenuItem>
+              <OMenuItem value="3-1-4-2">菜单3-1-4-2</OMenuItem>
+              <OMenuItem value="3-1-4-3">菜单3-1-4-3</OMenuItem>
+              <OMenuItem value="3-1-4-4">菜单3-1-4-4</OMenuItem>
+            </OSubMenu>
+            <OMenuItem value="3-1-5">菜单3-1-5</OMenuItem>
+            <OMenuItem value="3-1-6">菜单3-1-6</OMenuItem>
+          </OSubMenu>
+          <OMenuItem value="3-2">菜单3-2</OMenuItem>
+          <OMenuItem value="3-3">菜单3-3</OMenuItem>
+          <OMenuItem value="3-4">菜单3-4</OMenuItem>
+          <OMenuItem value="3-5">菜单3-5</OMenuItem>
+        </OSubMenu>
+      </OMenu>
+      </DefineTemplate>
+    </div>
+    <div>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange" arrow-position="right">
+        <OSubMenu value="1">
+          <template #title>一级菜单1一级菜单1一级菜单1一级菜单1一级菜单1</template>
+          <template #icon><OIconMore /></template>
+          <OMenuItem value="1-1" :icon="OIconMore">二级菜单1-1</OMenuItem>
+          <OMenuItem value="1-2" disabled>二级菜单1-2</OMenuItem>
+          <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
+          <OMenuItem value="1-4">二级菜单1-4</OMenuItem>
+        </OSubMenu>
         <OSubMenu value="2">
           <template #title>一级菜单2</template>
           <template #icon><OIconMore /></template>
           <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
           <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
           <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
-          <OMenuItem value="2-4">二级菜单2-4</OMenuItem>
+          <OMenuItem value="2-4">二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4</OMenuItem>
         </OSubMenu>
         <OSubMenu value="3">
           <template #title>一级菜单3</template>
@@ -55,28 +104,114 @@ const checkboxVals = ref([]);
             <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
             <OMenuItem value="3-1-4">三级菜单3-1-4</OMenuItem>
           </OSubMenu>
+          <OMenuItem value="3-2" :icon="OIconMore">二级菜单3-2</OMenuItem>
+          <OMenuItem value="3-3" :icon="OIconMore">二级菜单3-3</OMenuItem>
+          <OMenuItem value="3-4" :icon="OIconMore">二级菜单3-4</OMenuItem>
+          <OMenuItem value="3-5" :icon="OIconMore">二级菜单3-5</OMenuItem>
+        </OSubMenu>
+          <OMenuItem value="3-5" :icon="OIconMore">二级菜单3-5</OMenuItem>
+      </OMenu>
+    </div>
+    <div>
+      <DefineTemplate>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange" arrow-position="left" size="small">
+        <OSubMenu value="1">
+          <template #title>一级菜单1一级菜单1一级菜单1一级菜单1一级菜单1</template>
+          <!-- <template #icon><OIconMore /></template> -->
+          <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
+          <OMenuItem value="1-2" disabled>二级菜单1-2</OMenuItem>
+          <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
+          <OMenuItem value="1-4">二级菜单1-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="2">
+          <template #title>一级菜单2</template>
+          <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
+          <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
+          <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
+          <OMenuItem value="2-4">二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="3">
+          <template #title>一级菜单3</template>
+          <!-- <template #icon><OIconMore /></template> -->
+          <OSubMenu value="3-1">
+            <template #title>二级菜单3-1</template>
+            <!-- <template #icon><OIconMore /></template> -->
+            <OMenuItem value="3-1-1">三级菜单3-1-1</OMenuItem>
+            <OMenuItem value="3-1-2">三级菜单3-1-2</OMenuItem>
+            <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
+            <OMenuItem value="3-1-4">三级菜单3-1-4</OMenuItem>
+          </OSubMenu>
           <OMenuItem value="3-2">二级菜单3-2</OMenuItem>
           <OMenuItem value="3-3">二级菜单3-3</OMenuItem>
           <OMenuItem value="3-4">二级菜单3-4</OMenuItem>
           <OMenuItem value="3-5">二级菜单3-5</OMenuItem>
         </OSubMenu>
+      </OMenu>
       </DefineTemplate>
       <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange">
         <ReuseTemplate />
       </OMenu>
     </div>
-
     <div>
-      <OMenu v-model="activeVal2" :style="{ width: '120px' }" @change="handleChange">
-        <OMenuItem value="2-1">菜单2-1</OMenuItem>
-        <OMenuItem value="2-2">菜单2-2</OMenuItem>
-        <OMenuItem value="2-3">菜单2-3</OMenuItem>
-        <OMenuItem value="2-4">菜单2-4</OMenuItem>
-
-        <OMenuItem value="3-2">菜单3-2</OMenuItem>
-        <OMenuItem value="3-3">菜单3-3</OMenuItem>
-        <OMenuItem value="3-4">菜单3-4</OMenuItem>
-        <OMenuItem value="3-5">菜单3-5</OMenuItem>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange" arrow-position="right" size="small">
+        <OSubMenu value="1">
+          <template #title>一级菜单1一级菜单1一级菜单1一级菜单1一级菜单1</template>
+          <!-- <template #icon><OIconMore /></template> -->
+          <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
+          <OMenuItem value="1-2" disabled>二级菜单1-2</OMenuItem>
+          <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
+          <OMenuItem value="1-4">二级菜单1-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="2">
+          <template #title>一级菜单2</template>
+          <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
+          <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
+          <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
+          <OMenuItem value="2-4">二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4二级菜单2-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="3">
+          <template #title>一级菜单3</template>
+          <template #icon><OIconMore /></template>
+          <OSubMenu value="3-1">
+            <template #title>二级菜单3-1</template>
+            <template #icon><OIconMore /></template>
+            <OMenuItem value="3-1-1" :icon="OIconMore">三级菜单3-1-1</OMenuItem>
+            <OMenuItem value="3-1-2">三级菜单3-1-2</OMenuItem>
+            <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
+            <OMenuItem value="3-1-4">三级菜单3-1-4</OMenuItem>
+          </OSubMenu>
+          <OMenuItem value="3-2">二级菜单3-2</OMenuItem>
+          <OMenuItem value="3-3">二级菜单3-3</OMenuItem>
+          <OMenuItem value="3-4">二级菜单3-4</OMenuItem>
+          <OMenuItem value="3-5">二级菜单3-5</OMenuItem>
+        </OSubMenu>
+      </OMenu>
+    </div>
+  </section>
+  <h5>一级菜单</h5>
+  <section>
+  <div>
+      <OMenu v-model="activeVal2" @change="handleChange">
+        <OMenuItem value="2-1" :icon="OIconMore">菜单2-1</OMenuItem>
+        <OMenuItem value="2-2" :icon="OIconMore">菜单2-2</OMenuItem>
+        <OMenuItem value="2-3" :icon="OIconMore">菜单2-3</OMenuItem>
+        <OMenuItem value="2-4" :icon="OIconMore">菜单2-4</OMenuItem>
+        <OMenuItem value="3-2" :icon="OIconMore">菜单3-2</OMenuItem>
+        <OMenuItem value="3-3" :icon="OIconMore">菜单3-3</OMenuItem>
+        <OMenuItem value="3-4" :icon="OIconMore">菜单3-4</OMenuItem>
+        <OMenuItem value="3-5" :icon="OIconMore">菜单3-5</OMenuItem>
+      </OMenu>
+    </div>
+    <div>
+      <OMenu v-model="activeVal2" @change="handleChange"  size="small">
+        <OMenuItem value="2-1" :icon="OIconMore">菜单2-1</OMenuItem>
+        <OMenuItem value="2-2" :icon="OIconMore">菜单2-2</OMenuItem>
+        <OMenuItem value="2-3" :icon="OIconMore">菜单2-3</OMenuItem>
+        <OMenuItem value="2-4" :icon="OIconMore">菜单2-4</OMenuItem>
+        <OMenuItem value="3-2" :icon="OIconMore">菜单3-2</OMenuItem>
+        <OMenuItem value="3-3" :icon="OIconMore">菜单3-3</OMenuItem>
+        <OMenuItem value="3-4" :icon="OIconMore">菜单3-4</OMenuItem>
+        <OMenuItem value="3-5" :icon="OIconMore">菜单3-5</OMenuItem>
       </OMenu>
     </div>
   </section>
diff --git a/packages/opendesign/src/menu/__demo__/MenuSize.vue b/packages/opendesign/src/menu/__demo__/MenuSize.vue
index 0f920cadf..561b21c3d 100644
--- a/packages/opendesign/src/menu/__demo__/MenuSize.vue
+++ b/packages/opendesign/src/menu/__demo__/MenuSize.vue
@@ -59,13 +59,13 @@ const expandedArr = ref([]);
   <section :key="params.iconType">
     <div>
       medium
-      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion :level-indicator="true" size="medium">
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion size="medium">
         <RecursiveSubMenu v-for="item in data" :key="item.label" :data="item"/>
       </OMenu>
     </div>
     <div>
       small
-      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion :level-indicator="true" size="small">
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion size="small">
         <RecursiveSubMenu v-for="item in data" :key="item.label" :data="item"/>
       </OMenu>
     </div>
@@ -77,78 +77,5 @@ section {
   display: flex;
   align-items: stretch;
   gap: 120px;
-
-  :deep(.o-menu1) {
-
-    /*箭头调整*/
-    .o-sub-menu-title-arrow {
-      display: none;
-    }
-
-    .o-sub-menu-title-icon {
-      transition: transform var(--o-duration-m2) var(--o-easing-standard);
-    }
-
-    .o-sub-menu-expanded > .o-sub-menu-title .o-sub-menu-title-icon {
-      transform: rotate(-180deg);
-    }
-
-    /*引导线*/
-    .o-sub-menu-expanded {
-      .o-sub-menu-children {
-        position: relative;
-
-        &:before {
-          content: '';
-          display: block;
-          position: absolute;
-          z-index: var(--guid-line-z-index);
-          width: 1px;
-          height: 100%;
-          background-color: red;
-          left: var(--parent-padding-left);
-          top: 0;
-          bottom: 0;
-        }
-      }
-    }
-
-    > .o-sub-menu > .o-sub-menu-children:before {
-      display: none;
-    }
-
-    /*尺寸调整*/
-    .o-sub-menu {
-      --sub-menu-radius: 0;
-      --sub-menu-icon-size: 16px;
-      --padding-y: calc((var(--o-control_size-m) - var(--menu-item-secondary-text-height)) / 2);
-    }
-
-    .o-menu-item {
-      --menu-item-radius: 0;
-      padding-top: var(--padding-y);
-      padding-bottom: var(--padding-y);
-    }
-
-    .o-menu-item + .o-menu-item {
-      margin-top: 0;
-    }
-
-    .o-sub-menu-associated-selected {
-      background-color: #f7f8fa;
-
-      > .o-sub-menu-title .o-sub-menu-title-content {
-        color: var(--o-color-info1);
-        font-weight: 700;
-
-      }
-    }
-
-    .o-menu-item-selected {
-      background-color: #d1d6db;
-      color: var(--o-color-info1);
-      font-weight: 700;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/__demo__/MenuSizeIcon.vue b/packages/opendesign/src/menu/__demo__/MenuSizeIcon.vue
new file mode 100644
index 000000000..c731f4e75
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/MenuSizeIcon.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { OMenu } from '../index';
+import OIconMore from './OIconMore.vue';
+import RecursiveSubMenu from './RecursiveSubMenu.vue';
+import { ref } from 'vue';
+
+const getData = (withIcon = true) => {
+  const icon = withIcon ? OIconMore : undefined;
+  return [
+    {
+      label: '1-1',
+      icon,
+      children: [
+        {
+          label: '1-1-1',
+          children: [
+            { label: '1-1-1-1' },
+            { label: '1-1-1-2', icon },
+            { label: '1-1-1-3' }
+          ]
+        },
+        {
+          label: '1-1-2',
+          children: [
+            { label: '1-1-2-1' },
+            { label: '1-1-2-2' },
+            { label: '1-1-2-3' }
+          ]
+        },
+        {
+          label: '1-1-3',
+          children: [
+            { label: '1-1-3-1' },
+            { label: '1-1-3-2' },
+            { label: '1-1-3-3' },
+            { label: '1-1-3-4' }
+          ]
+        },
+        {
+          label: '1-1-4',
+          children: [
+            { label: '1-1-4-1' },
+            { label: '1-1-4-2' },
+            { label: '1-1-4-3' },
+            { label: '1-1-4-4' }
+          ]
+        }
+      ]
+    },
+    {
+      label: '1-2',
+      icon,
+      children: [
+        {
+          label: '1-2-1',
+          children: [
+            { label: '1-2-1-1' },
+            { label: '1-2-1-2' },
+            { label: '1-2-1-3' }
+          ]
+        },
+        {
+          label: '1-2-2',
+          children: [
+            { label: '1-2-2-1' },
+            { label: '1-2-2-2' },
+            { label: '1-2-2-3' }
+          ]
+        },
+        {
+          label: '1-2-3',
+          children: [
+            { label: '1-2-3-1' },
+            { label: '1-2-3-2' },
+            { label: '1-2-3-3' },
+            { label: '1-2-3-4' }
+          ]
+        },
+        {
+          label: '1-2-4',
+          children: [
+            { label: '1-2-4-1' },
+            { label: '1-2-4-2' },
+            { label: '1-2-4-3' }
+          ]
+        }
+      ]
+    },
+    {
+      label: '1-3',
+      children: [
+        {
+          label: '1-3-1',
+          children: [
+            { label: '1-3-1-1' },
+            { label: '1-3-1-2' },
+            { label: '1-3-1-3' },
+            { label: '1-3-1-4' }
+          ]
+        },
+        {
+          label: '1-3-2',
+          children: [
+            { label: '1-3-2-1' },
+            { label: '1-3-2-2' },
+            { label: '1-3-2-3' }
+          ]
+        },
+        {
+          label: '1-3-3',
+          children: [
+            { label: '1-3-3-1' },
+            { label: '1-3-3-2' },
+            { label: '1-3-3-3' },
+            { label: '1-3-3-4' }
+          ]
+        },
+        {
+          label: '1-3-4',
+          children: [
+            { label: '1-3-4-1' },
+            { label: '1-3-4-2' },
+            { label: '1-3-4-3' },
+            { label: '1-3-4-4' }
+          ]
+        }
+      ]
+    },
+    {
+      label: '1-4',
+    }
+  ];
+};
+
+const activeVal = ref('1-1-1-1');
+const expandedArr = ref(['1-1', '1-1-1']);
+</script>
+
+<template>
+  <h4>是否有icon & size</h4>
+  <section>
+    <div>
+      <h5>有icon & medium</h5>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" size="medium">
+        <RecursiveSubMenu v-for="item in getData()" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+    <div>
+      <h5>有icon & small</h5>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" size="small">
+        <RecursiveSubMenu v-for="item in getData()" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+    <div>
+      <h5>无icon & medium</h5>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" size="medium">
+        <RecursiveSubMenu v-for="item in getData(false)" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+    <div>
+      <h5>无icon & small</h5>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" size="small">
+        <RecursiveSubMenu v-for="item in getData(false)" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+
+section {
+  display: flex;
+  align-items: stretch;
+  gap: 120px;
+
+  >div {
+    margin: var(--o-gap-3);
+    border: 1px solid var(--o-color-control1-light);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/provide.ts b/packages/opendesign/src/menu/provide.ts
index 2cf63d021..fd3a63374 100644
--- a/packages/opendesign/src/menu/provide.ts
+++ b/packages/opendesign/src/menu/provide.ts
@@ -1,30 +1,21 @@
-import { Component, InjectionKey, Ref } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
 import MenuTree from './menu';
 import { type MenuSizeT } from './types.ts';
 
 
-export type ShowTooltipContent = string | number| Component
-export type ShowTooltipOptions = {
-  el: HTMLElement;
-  /* 不传取el的innerText*/
-  content?: ShowTooltipContent;
-}
-
 export const menuInjectKey: InjectionKey<{
   size: Ref<MenuSizeT>;
   accordion: Ref<boolean>;
   realValue: Ref<string>;
   activeNodes: Ref<Array<string | undefined>>;
   realExpanded: Ref<Array<string>>;
+  arrowPosition: Ref<'left'|'right'| undefined>;
   menuTree: MenuTree;
-  depth: number;
   updateModelValue: (val: string) => void;
   updateExpanded: (val: Array<string>) => void;
-  showTooltip: (options: ShowTooltipOptions) => void;
-  hideTooltip: () => void;
 }> = Symbol('provide-menu');
 
 export const subMenuInjectKey: InjectionKey<{
   value: string;
-  depth: number;
+  parentDepth: number;
 }> = Symbol('provide-sub-menu');
diff --git a/packages/opendesign/src/menu/style/index.ts b/packages/opendesign/src/menu/style/index.ts
index 786fce9c5..b0b424b87 100644
--- a/packages/opendesign/src/menu/style/index.ts
+++ b/packages/opendesign/src/menu/style/index.ts
@@ -1,2 +1,3 @@
+import '../../popover/style';
 import '../../_styles';
 import './index.scss';
diff --git a/packages/opendesign/src/menu/style/media.scss b/packages/opendesign/src/menu/style/media.scss
index 0b3194241..e187c03a0 100644
--- a/packages/opendesign/src/menu/style/media.scss
+++ b/packages/opendesign/src/menu/style/media.scss
@@ -1,38 +1,27 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('pad_v-pc_s') {
-  .o-menu {
-    --menu-padding-v: 9px;
-    --menu-secondary-padding-v: 5px;
-  }
+@include respond-to('<=pc_s') {
+  .o-menu-medium {
+    --sub-menu-height: 40px;
+    --menu-item-height: 32px;
 
-  .o-sub-menu {
     --sub-menu-text-size: var(--o-font_size-tip1);
     --sub-menu-text-height: var(--o-line_height-tip1);
-
     --sub-menu-icon-size: var(--o-icon_size_control-s);
-  }
-
-  .o-menu-item {
-    --menu-item-text-size: var(--o-font_size-text1);
-    --menu-item-text-height: var(--o-line_height-text1);
 
+    --menu-item-text-size: var(--o-font_size-tip1);
+    --menu-item-text-height: var(--o-line_height-tip1);
     --menu-item-icon-size: var(--o-icon_size_control-s);
   }
 }
 
 @include respond-to("<=pad_v") {
-  .o-menu.o-menu-small {
-    --menu-secondary-padding-v: 5px;
-
-  }
-  .o-menu.o-menu-small .o-sub-menu {
-    --sub-menu-secondary-text-size: var(--o-font_size-tip2);
-    --sub-menu-secondary-text-height: var(--o-line_height-tip2);
+  .o-menu-small {
+    --sub-menu-height: 32px;
+    --menu-item-height: 28px;
   }
 
-  .o-menu.o-menu-small .o-menu-item {
-    --menu-item-secondary-text-size: var(--o-font_size-tip2);
-    --menu-item-secondary-text-height: var(--o-line_height-tip2);
+  .o-menu-small .o-sub-menu .o-sub-menu {
+    --sub-menu-height: 28px;
   }
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/style/style.scss b/packages/opendesign/src/menu/style/style.scss
index b45d543e6..80115a158 100644
--- a/packages/opendesign/src/menu/style/style.scss
+++ b/packages/opendesign/src/menu/style/style.scss
@@ -8,59 +8,37 @@
   padding: 0;
 }
 
-// submenu
+/**** submenu ****/
 .o-sub-menu {
   font-size: var(--sub-menu-text-size);
   line-height: var(--sub-menu-text-height);
   color: var(--sub-menu-color);
 }
 
-.o-sub-menu-selected,
-.o-sub-menu-associated-selected {
-  & > .o-sub-menu-title {
-    font-weight: 500;
-    color: var(--sub-menu-color-selected);
-
-    .o-sub-menu-title-icon {
-      color: var(--sub-menu-icon-color-selected);
-    }
-  }
-}
-
-.o-sub-menu-selected {
-  background-color: var(--sub-menu-bg-color-selected);
-}
-
-.o-sub-menu-associated-selected {
-  & > .o-sub-menu-title {
-    font-weight: 500;
-    color: var(--sub-menu-color-selected);
-  }
-}
-
-.o-sub-menu-expanded {
-  & > .o-sub-menu-title {
-    .o-sub-menu-title-arrow {
-      transform: rotate(-180deg);
-    }
-  }
-}
-
 .o-sub-menu-title {
   position: relative;
   display: flex;
   align-items: center;
-  padding: 16px 48px 16px 8px;
-  padding-left: var(--sub-menu-level-indent, var(--menu-padding-h));
-  padding-right: var(--sub-menu-padding-right);
+  height: calc(var(--sub-menu-height) - 2px);
+  margin: 1px 0;
+  padding-right: var(--menu-padding-h);
+  padding-left: var(--menu-level-indent);
   border-radius: var(--sub-menu-radius);
   cursor: pointer;
-  transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  transition: all var(--o-duration-s) var(--o-easing-standard);
 
   @include hover {
-    &:hover {
-      background-color: var(--sub-menu-bg-color-hover);
-    }
+    background-color: var(--sub-menu-bg-color-hover);
+  }
+
+  .o-sub-menu-selected > & {
+    background-color: var(--sub-menu-bg-color-selected);
+  }
+
+  .o-sub-menu-selected > &,
+  .o-sub-menu-associated-selected > &{
+    font-weight: 600;
+    color: var(--sub-menu-color-selected);
   }
 }
 
@@ -69,108 +47,80 @@
   font-size: var(--sub-menu-icon-size);
   color: var(--sub-menu-icon-color);
 
-  /*纠正容器高度计算错误及空图标占位*/
+  // /*纠正容器高度计算错误及空图标占位*/
   display: flex;
   align-items: center;
 
-  .o-sub-menu-title-icon-placeholder {
-    height: var(--sub-menu-icon-size);
-    width: var(--sub-menu-icon-size);
+  .o-sub-menu-selected > .o-sub-menu-title &,
+  .o-sub-menu-associated-selected > .o-sub-menu-title &{
+    color: var(--sub-menu-icon-color-selected);
   }
 }
 
 .o-sub-menu-title-content {
+  margin-right: auto;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.o-sub-menu-title-arrow {
-  position: absolute;
-  right: var(--menu-padding-h);
-  transform: rotate(0);
+.o-sub-menu-arrow {
+  margin-right: var(--sub-menu-icon-gap);
   font-size: var(--sub-menu-arrow-size);
+  transform: rotate(0);
   transition: transform var(--o-duration-m2) var(--o-easing-standard);
+
+  .o-sub-menu-expanded > .o-sub-menu-title > & {
+    transform: rotate(-180deg);
+  }
+
 }
 
 .o-sub-menu-children {
+  width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
   overflow: hidden;
-  transition: height var(--o-duration-m2) var(--o-easing-standard);
-}
-
-.o-sub-menu-title, .o-menu-item {
-  --effect-padding-v: var(--menu-padding-v);
-  padding-top: var(--effect-padding-v);
-  padding-bottom: var(--effect-padding-v);
-}
-
-/*选中状态，高度减2px，上下让出1px间距*/
-.o-menu-item-selected,
-.o-sub-menu-selected > .o-sub-menu-title,
-.o-sub-menu-associated-selected > .o-sub-menu-title {
-  margin-top: var(--menu-selected-gap-v);
-  margin-bottom: var(--menu-selected-gap-v);
-  padding-top: calc(var(--effect-padding-v) - var(--menu-selected-gap-v));
-  padding-bottom: calc(var(--effect-padding-v) - var(--menu-selected-gap-v));
-}
-
-.o-sub-menu-children {
-  .o-sub-menu-title, .o-menu-item {
-    --effect-padding-v: var(--menu-secondary-padding-v);
-  }
-
-  .o-sub-menu-title {
-    font-size: var(--sub-menu-secondary-text-size);
-    line-height: var(--sub-menu-secondary-text-height);
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: all var(--o-duration-m2) var(--o-easing-standard);
+  &.expanded {
+    grid-template-rows: 1fr;
   }
+}
 
-  .o-menu-item {
-    font-size: var(--menu-item-secondary-text-size);
-    line-height: var(--menu-item-secondary-text-height);
-  }
+.o-sub-menu-children-wrap {
+  min-height: 0;
+  min-width: 0;
+  position: relative;
 }
 
+/**** menu-item ****/
 .o-menu-item {
+  height: calc(var(--menu-item-height) - 2px);
+  margin: 1px 0;
   display: flex;
   align-items: center;
   color: var(--menu-item-color);
   font-size: var(--menu-item-text-size);
   line-height: var(--menu-item-text-height);
   border-radius: var(--menu-item-radius);
-  padding-left: var(--menu-item-level-indent, var(--menu-padding-h));
-  padding-right: var(--menu-item-padding-right);
+  padding-left: var(--menu-level-indent);
+  padding-right: var(--menu-padding-h);
   cursor: pointer;
   transition: background-color var(--o-duration-s) var(--o-easing-standard);
   position: relative;
 
-  @include hover {
-    &:hover {
+  &:not(.o-menu-item-disabled) {
+    @include hover {
       background-color: var(--menu-item-bg-color-hover);
     }
   }
 }
 
-.o-menu-item-icon {
-  margin-right: var(--menu-item-icon-gap);
-  font-size: var(--menu-item-icon-size);
-  color: var(--menu-item-icon-color);
-
-  /*纠正容器高度计算错误及空图标占位*/
-  display: flex;
-  align-items: center;
-}
-
-.o-menu-item-content {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .o-menu-item-selected {
-  font-weight: 500;
+  font-weight: 600;
   color: var(--menu-item-color-selected);
   background-color: var(--menu-item-bg-color-selected);
 
@@ -179,9 +129,7 @@
   }
 
   @include hover {
-    &:hover {
-      background-color: var(--menu-item-bg-color-selected);
-    }
+    background-image: var(--menu-item-bg-image-selected);
   }
 }
 
@@ -190,36 +138,40 @@
   color: var(--menu-item-color-disabled);
 }
 
-.o-menu-small {
-  /*引导线*/
-  .o-sub-menu-expanded {
-    .o-sub-menu-children {
-      position: relative;
-
-      &:before {
-        content: '';
-        display: var(--menu-indicator-display);
-        position: absolute;
-        width: var(--menu-indicator-width);
-        background-color: var(--menu-indicator-bg-color);
-        left: calc(var(--sub-menu-level-indent, var(--menu-padding-h)) + var(--sub-menu-arrow-size) / 2);
-        top: 0;
-        bottom: 0;
-      }
-    }
-  }
+.o-menu-item-icon {
+  margin-right: var(--menu-item-icon-gap);
+  font-size: var(--menu-item-icon-size);
+  color: var(--menu-item-icon-color);
 
-  .o-sub-menu-title-arrow {
-    position: unset;
-  }
+  /*纠正容器高度计算错误及空图标占位*/
+  display: flex;
+  align-items: center;
+}
 
-  > .o-sub-menu-expanded {
-    background-color: var(--sub-expanded-bg-color);
-    /*第一级不展示引导线*/
-    --menu-indicator-display: none;
+.o-menu-item-content {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: auto;
+}
 
-    .o-sub-menu-expanded {
-      --menu-indicator-display: block;
-    }
+.o-sub-menu {
+  position: relative;
+  .o-menu-arrow-left &::before {
+    content: '';
+    position: absolute;
+    top: var(--sub-menu-height);
+    left: calc(var(--sub-menu-arrow-size) / 2  + var(--menu-level-indent));
+    bottom: 0;
+    width: var(--menu-indicator-width);
+    background-color: var(--menu-indicator-bg-color);
+    z-index: 0;
+  }
+  &[level='0']::before {
+    display: none;
   }
+}
+
+.o-menu-popover {
+  max-width: var(--menu-popover-width);
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/style/var.scss b/packages/opendesign/src/menu/style/var.scss
index 10724186d..f594bfc4b 100644
--- a/packages/opendesign/src/menu/style/var.scss
+++ b/packages/opendesign/src/menu/style/var.scss
@@ -1,114 +1,111 @@
 .o-menu {
   --menu-width: 240px;
   --menu-bg-color: transparent;
-  --menu-padding-v: 12px;
-  --menu-secondary-padding-v: 9px;
-  --menu-padding-h: 8px;
-  --menu-secondary-padding-h: 16px;
   --menu-indicator-width: 1px;
   --menu-indicator-bg-color: var(--o-color-control4);
-  --menu-selected-gap-v: 1px;
-}
 
-.o-sub-menu {
+  // sub-menu
+  --sub-menu-icon-color: var(--sub-menu-color);
+  --sub-menu-icon-color-selected: var(--sub-menu-color-selected);
+
   --sub-menu-color: var(--o-color-info1);
   --sub-menu-color-selected: var(--o-color-primary1);
+  --sub-menu-bg-color-hover: var(--o-color-control2-light);
+  --sub-menu-bg-color-selected: var(--o-color-control3-light);
+
+  // menu-item
+  --menu-item-icon-color: currentColor;
+  --menu-item-icon-color-selected: currentColor;
+
+  --menu-item-color: var(--o-color-info1);
+  --menu-item-color-disabled: var(--o-color-info4);
+  --menu-item-color-selected: var(--o-color-primary1);
+  --menu-item-bg-color-hover: var(--o-color-control2-light);
+  --menu-item-bg-color-selected: var(--o-color-control3-light);
 
-  --sub-menu-radius: var(--o-radius_control-s);
+  // 缩进
+  --menu-base-indent: calc(var(--sub-menu-icon-size) + var(--sub-menu-icon-gap));
+}
+
+.o-menu-medium {
+  --sub-menu-height: 48px;
+  --menu-item-height: 40px;
+  --menu-padding-h: 8px;
 
+  // sub-menu
+  --sub-menu-radius: var(--o-radius_control-xs);
+  
   --sub-menu-text-size: var(--o-font_size-text1);
   --sub-menu-text-height: var(--o-line_height-text1);
-
   --sub-menu-secondary-text-size: var(--o-font_size-tip1);
   --sub-menu-secondary-text-height: var(--o-line_height-tip1);
 
   --sub-menu-icon-size: var(--o-icon_size_control-m);
-  --sub-menu-icon-color: var(--o-color-info1);
-  --sub-menu-icon-color-selected: var(--o-color-primary1);
   --sub-menu-icon-gap: 8px;
 
-  --sub-menu-padding-right: calc(var(--menu-padding-h) + var(--sub-menu-icon-size) + var(--sub-menu-icon-gap));
-
+  // arrow size
   --sub-menu-arrow-size: var(--o-icon_size_control-m);
 
-  --sub-menu-bg-color-hover: var(--o-color-control2-light);
-  --sub-menu-bg-color-selected: rgb(var(--o-mixedgray-6));
-
-  --sub-menu-base-indent: var(--o-icon_size_control-l);
-  --sub-menu-level-indent: calc(var(--menu-padding-h) + (var(--sub-menu-base-indent)) * (var(--sub-menu-level) - 1));
-}
-
-.o-menu > .o-sub-menu {
-  --sub-menu-level-indent: var(--menu-padding-h);
-}
-
-.o-menu-item {
-  --menu-item-color: var(--o-color-info1);
-  --menu-item-color-disabled: var(--o-color-info4);
-  --menu-item-color-selected: var(--o-color-primary1);
-
-  --menu-item-radius: var(--o-radius_control-s);
-
-  --menu-item-icon-size: var(--o-icon_size_control-m);
-  --menu-item-icon-color: var(--o-color-info1);
-  --menu-item-icon-color-selected: var(--o-color-primary1);
+  // menu-item
   --menu-item-icon-gap: 8px;
-
-  --menu-item-padding-right: calc(var(--menu-padding-h) + var(--menu-item-icon-gap));
+  --menu-item-radius: var(--o-radius_control-xs);
 
   --menu-item-text-size: var(--o-font_size-text1);
   --menu-item-text-height: var(--o-line_height-text1);
+  --menu-item-icon-size: var(--o-icon_size_control-m);
 
-  --menu-item-secondary-text-size: var(--o-font_size-tip1);
-  --menu-item-secondary-text-height: var(--o-line_height-tip1);
-
-  --menu-item-bg-color-hover: var(--o-color-control2-light);
-  --menu-item-bg-color-selected: rgb(var(--o-mixedgray-6));
-
-  --menu-item-base-indent: var(--o-icon_size_control-l);
-  --menu-item-level-indent: calc(var(--menu-padding-h) + (var(--menu-item-base-indent)) * (var(--menu-item-level) - 1));
-}
-
-.o-menu > .o-menu-item {
-  --menu-item-level-indent: var(--menu-padding-h);
 }
-
-.o-menu.o-menu-small {
-  --menu-padding-v: 5px;
-  --menu-secondary-padding-v: 5px;
-  --menu-selected-gap-v: 0px;
+.o-menu-small {
+  --sub-menu-height: 40px;
+  --menu-item-height: 32px;
   --menu-padding-h: 4px;
 
-}
-
-.o-menu-small .o-sub-menu {
-  --sub-menu-radius: 0px;
+  // sub-menu
+  --sub-menu-radius: var(--o-radius_control-xs);
 
   --sub-menu-text-size: var(--o-font_size-tip1);
   --sub-menu-text-height: var(--o-line_height-tip1);
+  --sub-menu-secondary-text-size: var(--o-font_size-tip1);
+  --sub-menu-secondary-text-height: var(--o-line_height-tip1);
 
   --sub-menu-icon-size: var(--o-icon_size_control-xs);
   --sub-menu-icon-gap: 4px;
 
-  --sub-menu-padding-right: var(--menu-padding-h);
-
+  // arrow size
   --sub-menu-arrow-size: var(--o-icon_size_control-xs);
+  
+  // menu-item
+  --menu-item-icon-gap: 4px;
+  --menu-item-radius: var(--o-radius_control-xs);
 
-  --sub-expanded-bg-color: rgb(var(--o-mixedgray-2));
+  --menu-item-text-size: var(--o-font_size-tip1);
+  --menu-item-text-height: var(--o-line_height-tip1);  
+  --menu-item-icon-size: var(--o-icon_size_control-xs);
 
-  --sub-menu-base-indent: var(--o-icon_size_control-s);
 }
 
-.o-menu-small .o-menu-item {
-  --menu-item-radius: 0px;
+// 缩进
+.o-menu-item,
+.o-sub-menu {
+  --menu-level-indent: calc(var(--menu-padding-h) + (var(--menu-base-indent)) * (var(--menu-level)));
+}
+.o-menu-arrow-left .o-menu-item{
+  --menu-level-indent: calc(var(--menu-padding-h) + (var(--menu-base-indent)) * (var(--menu-level))  + var(--sub-menu-arrow-size) + var(--sub-menu-icon-gap));
+}
 
-  --menu-item-padding-right: var(--menu-padding-h);
+.o-menu-popover {
+  --menu-popover-width: 240px;
+}
 
-  --menu-item-text-size: var(--o-font_size-text1);
-  --menu-item-text-height: var(--o-line_height-text1);
+.o-menu-arrow-left {
+  --sub-menu-base-indent: calc(var(--sub-menu-arrow-size) + var(--sub-menu-icon-gap));
+  --menu-item-base-indent: calc(20px + var(--sub-menu-icon-gap));
+}
 
-  --menu-item-icon-size: var(--o-icon_size_control-xs);
-  --menu-item-icon-gap: 4px;
+.o-menu-arrow-left.o-menu-small {
+  --menu-item-base-indent: 24px;
+}
 
-  --menu-item-base-indent: var(--o-icon_size_control-s);
+.o-menu > .o-menu-item {
+  --menu-item-level-indent: var(--menu-padding-h)
 }
diff --git a/packages/opendesign/src/menu/types.ts b/packages/opendesign/src/menu/types.ts
index e265ed95b..bff79f207 100644
--- a/packages/opendesign/src/menu/types.ts
+++ b/packages/opendesign/src/menu/types.ts
@@ -64,6 +64,14 @@ export const menuProps = {
     type: Array as PropType<Array<string>>,
     default: () => [],
   },
+  // 父子节点是否关联
+  selectStrictly: {
+    type: Boolean,
+    default: false,
+  },
+  arrowPosition: {
+    type: String as PropType<'left'|'right'>,
+  }
 };
 
 export type MenuPropsT = ExtractPropTypes<typeof menuProps>;
-- 
Gitee