From 3e40c0c32d6ec30ff7c157d3492ac6a1c39aa16e Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Thu, 14 Aug 2025 20:25:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(menu):=20=E2=9C=A8=20=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0small=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_styles/mixin.scss    |   8 +-
 packages/opendesign/src/_utils/dom.ts         |  11 ++
 packages/opendesign/src/menu/OMenu.vue        |  34 +++-
 packages/opendesign/src/menu/OMenuItem.vue    |  36 ++--
 packages/opendesign/src/menu/OSubMenu.vue     |  71 +++++---
 .../src/menu/__demo__/IndexMenu.vue           |   8 +
 .../opendesign/src/menu/__demo__/MenuSize.vue | 154 ++++++++++++++++++
 .../src/menu/__demo__/RecursiveSubMenu.vue    |  29 ++++
 .../opendesign/src/menu/__demo__/utils.ts     |  64 ++++++++
 packages/opendesign/src/menu/index.ts         |   1 +
 packages/opendesign/src/menu/provide.ts       |  15 +-
 packages/opendesign/src/menu/style/media.scss |  26 ++-
 packages/opendesign/src/menu/style/style.scss |  99 ++++++++---
 packages/opendesign/src/menu/style/var.scss   |  67 +++++++-
 packages/opendesign/src/menu/types.ts         |  11 ++
 packages/portal/package.json                  |   2 +-
 16 files changed, 555 insertions(+), 81 deletions(-)
 create mode 100644 packages/opendesign/src/menu/__demo__/MenuSize.vue
 create mode 100644 packages/opendesign/src/menu/__demo__/RecursiveSubMenu.vue
 create mode 100644 packages/opendesign/src/menu/__demo__/utils.ts

diff --git a/packages/opendesign/src/_styles/mixin.scss b/packages/opendesign/src/_styles/mixin.scss
index cbdf2c02..f100fd65 100644
--- a/packages/opendesign/src/_styles/mixin.scss
+++ b/packages/opendesign/src/_styles/mixin.scss
@@ -22,7 +22,13 @@ $breakpoints: (
   '<=laptop': (0, 1440px),
   '>laptop': 1441px,
   'pad-laptop': (601px, 1440px),
-  'pad_v-laptop': (841px, 1440px)
+  'pad_v-laptop': (841px, 1440px),
+  'pad_v-pc_s': (841px, 1680px),
+  'pc_s': (1441px, 1680px),
+  '<=pc_s': (0px, 1680px),
+  'pc_l': (1681px, 1920px),
+  '>pc_s': 1681px,
+  'laptop-pc_s': (1201px, 1680px)
 );
 
 @mixin respond-to($breakname) {
diff --git a/packages/opendesign/src/_utils/dom.ts b/packages/opendesign/src/_utils/dom.ts
index 77f9c9c5..b2ea905a 100644
--- a/packages/opendesign/src/_utils/dom.ts
+++ b/packages/opendesign/src/_utils/dom.ts
@@ -189,3 +189,14 @@ export function scrollTo(y: number, opts: ScrollTopOptions) {
     throttleRAF(frameFn)();
   });
 }
+
+/*判断一个元素是否触发溢出隐藏*/
+export function isOverflown(element?: HTMLElement) {
+  if (!element) {
+    return false;
+  }
+  return (
+    element.scrollWidth > element.clientWidth ||
+    element.scrollHeight > element.clientHeight
+  );
+}
diff --git a/packages/opendesign/src/menu/OMenu.vue b/packages/opendesign/src/menu/OMenu.vue
index 396cccdd..20ef636a 100644
--- a/packages/opendesign/src/menu/OMenu.vue
+++ b/packages/opendesign/src/menu/OMenu.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { onMounted, provide, ref, toRefs, watch } from 'vue';
-import { menuInjectKey } from './provide';
+import { onMounted, provide, ref, shallowRef, toRefs, watch } from 'vue';
+import { menuInjectKey, type ShowTooltipContent, type ShowTooltipOptions } from './provide';
 import { menuProps } from './types';
 import MenuTree from './menu';
 import { isArray, isUndefined } from '../_utils/is';
+import { OPopover } from '../popover';
+import '../popover/style';
 
 const props = defineProps(menuProps);
 
@@ -16,7 +18,7 @@ const emits = defineEmits<{
 
 const menuTree = new MenuTree(NaN, null);
 
-const { accordion, levelIndent, modelValue, defaultValue, expanded, defaultExpanded } = toRefs(props);
+const { size, accordion, modelValue, defaultValue, expanded, defaultExpanded } = toRefs(props);
 
 // value值
 const realValue = ref(modelValue?.value ?? defaultValue.value);
@@ -65,12 +67,28 @@ 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,
-  levelIndent,
   realValue,
   activeNodes,
   realExpanded,
@@ -78,11 +96,17 @@ provide(menuInjectKey, {
   depth,
   updateModelValue,
   updateExpanded,
+  showTooltip,
+  hideTooltip
 });
 </script>
 
 <template>
-  <ul class="o-menu">
+  <ul :class="['o-menu', `o-menu-${size}`]">
     <slot></slot>
+    <OPopover v-if="tooltipTarget" visible :offset="16" :target="tooltipTarget">
+      <template v-if="['string', 'number'].includes(typeof tooltipContent)">{{ tooltipContent }}</template>
+      <component v-else :is="tooltipContent" />
+    </OPopover>
   </ul>
 </template>
diff --git a/packages/opendesign/src/menu/OMenuItem.vue b/packages/opendesign/src/menu/OMenuItem.vue
index 3bc5685e..6e2363a5 100644
--- a/packages/opendesign/src/menu/OMenuItem.vue
+++ b/packages/opendesign/src/menu/OMenuItem.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { menuItemProps } from './types';
 import { menuInjectKey, subMenuInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
+import { isOverflown } from '../_utils/dom.ts';
 
 const props = defineProps(menuItemProps);
 
@@ -13,6 +14,8 @@ 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) {
     return menuInjection.realValue.value === props.value;
@@ -38,30 +41,39 @@ const onItemClick = (ev: MouseEvent) => {
 
 const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
 
-const style = computed(() => {
-  if (depth === 1) {
-    return {};
-  } else {
-    return {
-      paddingLeft: `${(menuInjection?.levelIndent.value ?? 20) * depth}px`,
-    };
-  }
+
+const cssVars = computed(() => {
+  return {
+    '--menu-item-level': depth,
+  };
 });
 
 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)) {
+    return;
+  }
+  showTooltip?.({ el: e.target as HTMLElement, content: itemContentRef.value?.innerText });
+};
+const handleMouseleave = () => {
+  hideTooltip?.();
+};
 </script>
 
 <template>
-  <li class="o-menu-item" :class="{ 'o-menu-item-selected': isSelected, 'o-menu-item-disabled': $props.disabled }" :style="style" @click="onItemClick">
-    <span v-if="props.icon || $slots.icon" class="o-menu-item-icon">
+  <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">
+    <span v-if="size !== 'small' && (props.icon || $slots.icon)" class="o-menu-item-icon">
       <slot name="icon">
         <component :is="props.icon" />
       </slot>
     </span>
-    <span class="o-menu-item-content">
+    <span class="o-menu-item-content" ref="itemContentRef">
       <slot></slot>
     </span>
   </li>
diff --git a/packages/opendesign/src/menu/OSubMenu.vue b/packages/opendesign/src/menu/OSubMenu.vue
index d8b99886..dcb5ff47 100644
--- a/packages/opendesign/src/menu/OSubMenu.vue
+++ b/packages/opendesign/src/menu/OSubMenu.vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-import { computed, inject, provide } from 'vue';
+import { computed, inject, provide, ref } from 'vue';
 import { subMenuProps } from './types';
-import { IconChevronRight } from '../_utils/icons';
+import { IconChevronDown } from '../_utils/icons';
 import { menuInjectKey, subMenuInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
+import { isOverflown } from '../_utils/dom.ts';
 
 const props = defineProps(subMenuProps);
 
 const menuInjection = inject(menuInjectKey, null);
 const subMenuInjection = inject(subMenuInjectKey, null);
 
+const { size = ref('medium'), showTooltip, hideTooltip } = menuInjection || {};
+
 // 是否展开
 const isExpanded = computed(() => {
   if (isUndefined(props.value)) {
@@ -74,18 +77,11 @@ const onSubItemClick = (ev: Event) => {
 
 const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
 
-const style = computed(() => {
-  if (depth === 1) {
-    return {};
-  } else {
-    return {
-      paddingLeft: `${(menuInjection?.levelIndent.value ?? 20) * depth}px`,
-    };
-  }
+provide(subMenuInjectKey, {
+  value: props.value,
+  depth,
 });
 
-provide(subMenuInjectKey, { value: props.value, depth });
-
 menuInjection?.menuTree.addChild({
   value: props.value as string,
   parentVal: subMenuInjection?.value,
@@ -108,26 +104,47 @@ const onBeforeLeave = (el: Element) => {
 const onLeave = (el: Element) => {
   (el as HTMLUListElement).style.height = '0px';
 };
+
+
+const itemContentRef = ref<HTMLSpanElement>();
+const handleMouseenter = (e: MouseEvent) => {
+  if (!e.target || !isOverflown(itemContentRef.value)) {
+    return;
+  }
+  showTooltip?.({ el: e.target as HTMLElement, content: itemContentRef.value?.innerText });
+};
+const handleMouseleave = () => {
+  hideTooltip?.();
+};
 </script>
 
 <template>
-  <li
-    class="o-sub-menu"
+  <li class="o-sub-menu"
     :class="{ 'o-sub-menu-selected': isSelected, 'o-sub-menu-associated-selected': isAssociatedSelected, 'o-sub-menu-expanded': isExpanded }"
-    @click="onSubItemClick"
-  >
-    <div class="o-sub-menu-title" :style="style">
-      <span v-if="$slots.icon" class="o-sub-menu-title-icon">
-        <slot name="icon"></slot>
-      </span>
-      <span class="o-sub-menu-title-content">
-        <slot name="title"></slot>
-      </span>
-      <span class="o-sub-menu-title-arrow">
-        <IconChevronRight />
-      </span>
+    :style="{ '--sub-menu-level': depth }" @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" class="o-sub-menu-title-icon">
+          <slot name="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>
-    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave">
+    <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>
diff --git a/packages/opendesign/src/menu/__demo__/IndexMenu.vue b/packages/opendesign/src/menu/__demo__/IndexMenu.vue
index e5334052..f5180b5f 100644
--- a/packages/opendesign/src/menu/__demo__/IndexMenu.vue
+++ b/packages/opendesign/src/menu/__demo__/IndexMenu.vue
@@ -2,11 +2,19 @@
 import '../style';
 import MenuBasic from './MenuBasic.vue';
 import MenuAccordion from './MenuAccordion.vue';
+import MenuSize from './MenuSize.vue';
 </script>
 
 <template>
   <div class="page-demo">
     <MenuBasic />
     <MenuAccordion />
+    <MenuSize />
   </div>
 </template>
+
+<style scoped>
+.page-demo {
+  background-color: var(--o-color-fill2);
+}
+</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/__demo__/MenuSize.vue b/packages/opendesign/src/menu/__demo__/MenuSize.vue
new file mode 100644
index 00000000..0f920cad
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/MenuSize.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue';
+import { OForm, OFormItem } from '../../form';
+import '../../form/style';
+import { OInputNumber } from '../../input-number';
+import '../../input-number/style';
+import { ORadio } from '../../radio';
+import '../../radio/style';
+import { ORadioGroup } from '../../radio-group';
+import '../../radio-group/style';
+
+import { mockTreeArr, MockTreeParams } from './utils.ts';
+import { OMenu } from '../index';
+import RecursiveSubMenu from './RecursiveSubMenu.vue';
+import OIconMore from './OIconMore.vue';
+
+const params = reactive<Pick<MockTreeParams, 'depth' | 'maxChild' | 'minChild'> & {
+  iconType: 'all' | 'some' | 'none'
+}>({
+  depth: 3, minChild: 2, maxChild: 10, iconType: 'none'
+});
+const data = computed(() => mockTreeArr({
+  ...params,
+  getIcon(item, i) {
+    if (params.iconType === 'all') {
+      return OIconMore;
+    } else if (params.iconType === 'some') {
+      return i % 2 ? OIconMore : undefined;
+    }
+    return undefined;
+  }
+}));
+const activeVal = ref();
+const expandedArr = ref([]);
+</script>
+
+<template>
+  <h4>带缩进指示线及背景颜色</h4>
+  <div>
+    <OForm>
+      <OFormItem label="最大深度" required>
+        <OInputNumber v-model="params.depth"/>
+      </OFormItem>
+      <OFormItem label="最小子节点数量" required>
+        <OInputNumber v-model="params.minChild"/>
+      </OFormItem>
+      <OFormItem label="最大子节点数量" required>
+        <OInputNumber v-model="params.maxChild"/>
+      </OFormItem>
+      <OFormItem label="图标" field="radio">
+        <ORadioGroup v-model="params.iconType">
+          <ORadio value="all">全部</ORadio>
+          <ORadio value="some">部分</ORadio>
+          <ORadio value="none">无</ORadio>
+        </ORadioGroup>
+      </OFormItem>
+    </OForm>
+  </div>
+  <section :key="params.iconType">
+    <div>
+      medium
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion :level-indicator="true" 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">
+        <RecursiveSubMenu v-for="item in data" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+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__/RecursiveSubMenu.vue b/packages/opendesign/src/menu/__demo__/RecursiveSubMenu.vue
new file mode 100644
index 00000000..e7e762b9
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/RecursiveSubMenu.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { MockTreeItem } from './utils.ts';
+import {  OMenuItem, OSubMenu } from '../index';
+
+const props = defineProps<{
+  data: MockTreeItem
+}>();
+
+</script>
+
+<template>
+  <OSubMenu v-if="props.data.children?.length"  :value="props.data.label" >
+    <template #title>{{props.data.label}}</template>
+    <template #icon v-if="props.data.icon">
+      <component :is="props.data.icon"/>
+    </template>
+    <RecursiveSubMenu v-for="item in props.data.children" :key="item.label" :data="item"/>
+  </OSubMenu>
+  <OMenuItem v-else :value="props.data.label">
+    <template #icon v-if="props.data.icon">
+      <component :is="props.data.icon"/>
+    </template>
+    {{props.data.label}}
+  </OMenuItem>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/__demo__/utils.ts b/packages/opendesign/src/menu/__demo__/utils.ts
new file mode 100644
index 00000000..350103e8
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/utils.ts
@@ -0,0 +1,64 @@
+import OIconMore from './OIconMore.vue';
+import { type Component } from 'vue';
+
+export type MockTreeItem = {
+  label: string;
+  icon?: Component;
+  children?: MockTreeItem[];
+};
+
+export type MockTreeParams = {
+  depth: number;
+  maxChild: number;
+  minChild: number;
+  label?: string;
+  getIcon?: (item: Omit<MockTreeItem, 'icon'>, index: number) => Component | undefined;
+  overflowText?: string;
+};
+const defaultOverflowText = '这是个长度的文字超长的文字用于测试溢出行为';
+
+export function mockTreeItem({
+  depth,
+  maxChild,
+  minChild,
+  label,
+  getIcon,
+  overflowText = defaultOverflowText,
+}: MockTreeParams & { label: string }): Omit<MockTreeItem, 'icon'> {
+  const children =
+    depth > 1
+      ? mockTreeArr({
+          depth: depth - 1,
+          maxChild,
+          minChild,
+          label,
+          getIcon,
+          overflowText,
+        })
+      : undefined;
+  return {
+    label,
+    children,
+  };
+}
+
+export function mockTreeArr({ depth, maxChild, minChild, label = '1', getIcon, overflowText = defaultOverflowText }: MockTreeParams): MockTreeItem[] {
+  if (depth <= 0) return [];
+  return new Array<number>(Math.floor(Math.random() * (maxChild - minChild + 1)) + minChild).fill(1).map((_, i) => {
+    const _item: MockTreeItem = mockTreeItem({
+      depth: depth,
+      maxChild,
+      minChild,
+      label: `${`${label}-${i + 1}`.replace(overflowText, '')}${overflowText}`,
+      getIcon,
+      overflowText,
+    });
+    if (getIcon) {
+      _item.icon = getIcon(_item, i);
+    } else {
+      _item.icon = OIconMore;
+    }
+
+    return _item;
+  });
+}
diff --git a/packages/opendesign/src/menu/index.ts b/packages/opendesign/src/menu/index.ts
index 30fb5df5..b3aafc75 100644
--- a/packages/opendesign/src/menu/index.ts
+++ b/packages/opendesign/src/menu/index.ts
@@ -16,3 +16,4 @@ const OMenu = Object.assign(_OMenu, {
 
 export { OMenu, OSubMenu, OMenuItem };
 export * from './types';
+export * from './provide';
diff --git a/packages/opendesign/src/menu/provide.ts b/packages/opendesign/src/menu/provide.ts
index 99811e06..1c866282 100644
--- a/packages/opendesign/src/menu/provide.ts
+++ b/packages/opendesign/src/menu/provide.ts
@@ -1,9 +1,18 @@
-import { InjectionKey, Ref } from 'vue';
+import { Component, 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>;
-  levelIndent: Ref<number>;
   realValue: Ref<string>;
   activeNodes: Ref<Array<string | undefined>>;
   realExpanded: Ref<Array<string>>;
@@ -11,6 +20,8 @@ export const menuInjectKey: InjectionKey<{
   depth: number;
   updateModelValue: (val: string) => void;
   updateExpanded: (val: Array<string>) => void;
+  showTooltip: (options: ShowTooltipOptions) => void;
+  hideTooltip: () => void;
 }> = Symbol('provide-menu');
 
 export const subMenuInjectKey: InjectionKey<{
diff --git a/packages/opendesign/src/menu/style/media.scss b/packages/opendesign/src/menu/style/media.scss
index 0d74fdbd..0b319424 100644
--- a/packages/opendesign/src/menu/style/media.scss
+++ b/packages/opendesign/src/menu/style/media.scss
@@ -1,18 +1,38 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('<=laptop') {
+@include respond-to('pad_v-pc_s') {
   .o-menu {
-    --menu-padding-v: 11px;
-    --menu-secondary-padding-v: 11px;
+    --menu-padding-v: 9px;
+    --menu-secondary-padding-v: 5px;
   }
 
   .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-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.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);
+  }
+}
\ 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 06282d06..d95d0450 100644
--- a/packages/opendesign/src/menu/style/style.scss
+++ b/packages/opendesign/src/menu/style/style.scss
@@ -14,10 +14,6 @@
   font-size: var(--sub-menu-text-size);
   line-height: var(--sub-menu-text-height);
   color: var(--sub-menu-color);
-
-  & + .o-sub-menu {
-    margin-top: 2px;
-  }
 }
 
 .o-sub-menu-selected,
@@ -46,7 +42,7 @@
 .o-sub-menu-expanded {
   & > .o-sub-menu-title {
     .o-sub-menu-title-arrow {
-      transform: rotate(90deg);
+      transform: rotate(-180deg);
     }
   }
 }
@@ -56,9 +52,7 @@
   display: flex;
   align-items: center;
   padding: 16px 48px 16px 8px;
-  padding-top: var(--menu-padding-v);
-  padding-bottom: var(--menu-padding-v);
-  padding-left: var(--menu-padding-h);
+  padding-left: var(--sub-menu-level-indent, var(--menu-padding-h));
   padding-right: var(--sub-menu-padding-right);
   border-radius: var(--sub-menu-radius);
   cursor: pointer;
@@ -72,10 +66,18 @@
 }
 
 .o-sub-menu-title-icon {
-  margin-left: calc(-1 * var(--sub-menu-icon-gap));
   margin-right: var(--sub-menu-icon-gap);
   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-title-content {
@@ -86,7 +88,7 @@
 
 .o-sub-menu-title-arrow {
   position: absolute;
-  right: 16px;
+  right: var(--menu-padding-h);
   transform: rotate(0);
   font-size: var(--sub-menu-arrow-size);
   transition: transform var(--o-duration-m2) var(--o-easing-standard);
@@ -100,23 +102,38 @@
   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 {
-  margin-top: 2px;
+  .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-item-secondary-text-height);
-    padding-top: var(--menu-secondary-padding-v);
-    padding-bottom: var(--menu-secondary-padding-v);
+    line-height: var(--sub-menu-secondary-text-height);
   }
+
   .o-menu-item {
     font-size: var(--menu-item-secondary-text-size);
     line-height: var(--menu-item-secondary-text-height);
-    padding-top: var(--menu-secondary-padding-v);
-    padding-bottom: var(--menu-secondary-padding-v);
   }
 }
 
-//menu-item
 .o-menu-item {
   display: flex;
   align-items: center;
@@ -124,29 +141,27 @@
   font-size: var(--menu-item-text-size);
   line-height: var(--menu-item-text-height);
   border-radius: var(--menu-item-radius);
-  padding-top: var(--menu-padding-v);
-  padding-bottom: var(--menu-padding-v);
-  padding-left: var(--menu-padding-h);
+  padding-left: var(--menu-item-level-indent, var(--menu-padding-h));
   padding-right: var(--menu-item-padding-right);
   cursor: pointer;
   transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  position: relative;
 
   @include hover {
     &:hover {
       background-color: var(--menu-item-bg-color-hover);
     }
   }
-
-  & + .o-menu-item {
-    margin-top: 2px;
-  }
 }
 
 .o-menu-item-icon {
-  margin-left: calc(-1 * var(--menu-item-icon-gap));
   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 {
@@ -175,3 +190,37 @@
   cursor: not-allowed;
   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-sub-menu-title-arrow {
+    position: unset;
+  }
+
+  > .o-sub-menu-expanded {
+    background-color: var(--sub-expanded-bg-color);
+    /*第一级不展示引导线*/
+    --menu-indicator-display: none;
+
+    .o-sub-menu-expanded {
+      --menu-indicator-display: block;
+    }
+  }
+}
\ 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 b3c28bf7..10724186 100644
--- a/packages/opendesign/src/menu/style/var.scss
+++ b/packages/opendesign/src/menu/style/var.scss
@@ -1,10 +1,13 @@
 .o-menu {
   --menu-width: 240px;
   --menu-bg-color: transparent;
-  --menu-padding-v: 15px;
-  --menu-secondary-padding-v: 11px;
-  --menu-padding-h: 16px;
+  --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 {
@@ -29,7 +32,14 @@
   --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: var(--o-color-control3-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 {
@@ -53,5 +63,52 @@
   --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: var(--o-color-control3-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;
+  --menu-padding-h: 4px;
+
+}
+
+.o-menu-small .o-sub-menu {
+  --sub-menu-radius: 0px;
+
+  --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-xs);
+  --sub-menu-icon-gap: 4px;
+
+  --sub-menu-padding-right: var(--menu-padding-h);
+
+  --sub-menu-arrow-size: var(--o-icon_size_control-xs);
+
+  --sub-expanded-bg-color: rgb(var(--o-mixedgray-2));
+
+  --sub-menu-base-indent: var(--o-icon_size_control-s);
+}
+
+.o-menu-small .o-menu-item {
+  --menu-item-radius: 0px;
+
+  --menu-item-padding-right: var(--menu-padding-h);
+
+  --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-xs);
+  --menu-item-icon-gap: 4px;
+
+  --menu-item-base-indent: var(--o-icon_size_control-s);
 }
diff --git a/packages/opendesign/src/menu/types.ts b/packages/opendesign/src/menu/types.ts
index f78b5205..a2d09d14 100644
--- a/packages/opendesign/src/menu/types.ts
+++ b/packages/opendesign/src/menu/types.ts
@@ -1,7 +1,18 @@
 import type { ExtractPropTypes, PropType, Component } from 'vue';
 
+export const MenuSizeTypes = ['medium', 'small'] as const;
+export type MenuSizeT = (typeof MenuSizeTypes)[number];
+
 // MenuProps
 export const menuProps = {
+  /**
+   * @zh-CN 菜单尺寸
+   * @en-US Menu size
+   */
+  size: {
+    type: String as PropType<MenuSizeT>,
+    default: 'medium'
+  },
   /**
    * 是否开启手风琴模式
    */
diff --git a/packages/portal/package.json b/packages/portal/package.json
index 1a800e0b..46035351 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "gen:icon": "open-scripts gen:icon --config __test_scripts/icons/icon.config.ts"
   },
-- 
Gitee