From df8790042fd1309a6599c2db45bae7c61e1a2600 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 15 May 2026 19:33:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=AF=BC=E8=88=AA=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=94=AF=E6=8C=81=E8=8F=9C=E5=8D=95=E9=A1=B9=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA=E6=94=B6=E7=BA=B3=EF=BC=8C=E6=96=B0=E5=A2=9E=20NavMen?=
 =?UTF-8?q?uColumn=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 抽离每列渲染逻辑为 NavMenuColumn 组件，监听容器宽度
- 容器空间不足时自动隐藏溢出项，并通过更多按钮 Popover 展开
- ToolButton 暴露根元素引用，便于父级测量宽度
- design ButtonProps 新增 bg 属性，用于更多按钮的激活态样式
- 补充 NavMenuColumn / NavMenu / ToolButton 的单元测试

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/design/src/types.ts                  |   1 +
 packages/editor/src/components/ToolButton.vue |   8 +-
 packages/editor/src/layouts/NavMenu.vue       |  13 +-
 packages/editor/src/layouts/NavMenuColumn.vue | 252 ++++++++++++
 packages/editor/src/theme/nav-menu.scss       |  61 +++
 .../tests/unit/components/ToolButton.spec.ts  |  27 ++
 .../editor/tests/unit/layouts/NavMenu.spec.ts |   8 +-
 .../tests/unit/layouts/NavMenuColumn.spec.ts  | 362 ++++++++++++++++++
 8 files changed, 725 insertions(+), 7 deletions(-)
 create mode 100644 packages/editor/src/layouts/NavMenuColumn.vue
 create mode 100644 packages/editor/tests/unit/layouts/NavMenuColumn.spec.ts

diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index 4bfebfd6..7c5572a3 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -32,6 +32,7 @@ export interface ButtonProps {
   circle?: boolean;
   icon?: any;
   variant?: string;
+  bg?: boolean;
 }
 
 export interface CardProps {
diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index baad32fa..14288541 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="display"
+    ref="rootEl"
     class="menu-item"
     :class="`${data.type} ${data.className || ''}`"
     @click="clickHandler(data, $event)"
@@ -56,7 +57,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
 import {
@@ -93,6 +94,9 @@ const props = withDefaults(
 );
 const services = useServices();
 
+const rootElRef = useTemplateRef<HTMLDivElement>('rootEl');
+const getElRef = () => rootElRef;
+
 const disabled = computed(() => {
   if (typeof props.data === 'string') return false;
   if (props.data.type === 'component') return false;
@@ -145,4 +149,6 @@ const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) =>
     buttonHandler(item, event);
   }
 };
+
+defineExpose({ getElRef });
 </script>
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index 7b4de5db..fe0e8eae 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }" ref="navMenu">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
-      <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
-    </div>
+    <NavMenuColumn
+      v-for="key in keys"
+      :key="key"
+      :column-key="key"
+      :items="buttons[key]"
+      :width="columnWidth?.[key]"
+    ></NavMenuColumn>
   </div>
 </template>
 
@@ -12,10 +16,11 @@ import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, Z
 
 import { NodeType } from '@tmagic/core';
 
-import ToolButton from '@editor/components/ToolButton.vue';
 import { useServices } from '@editor/hooks/use-services';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem } from '@editor/type';
 
+import NavMenuColumn from './NavMenuColumn.vue';
+
 defineOptions({
   name: 'MEditorNavMenu',
 });
diff --git a/packages/editor/src/layouts/NavMenuColumn.vue b/packages/editor/src/layouts/NavMenuColumn.vue
new file mode 100644
index 00000000..390d0aca
--- /dev/null
+++ b/packages/editor/src/layouts/NavMenuColumn.vue
@@ -0,0 +1,252 @@
+<template>
+  <div
+    :class="`menu-${columnKey} m-editor-nav-menu-column`"
+    :style="width != null ? `width: ${width}px` : ''"
+    ref="columnEl"
+  >
+    <ToolButton
+      v-for="(item, index) in items"
+      :data="item"
+      :key="`item-${index}`"
+      :class="{ 'm-editor-nav-menu-slot-hidden': hiddenIndexSet.has(index) }"
+      :ref="(comp: any) => setItemRef(comp, index)"
+    ></ToolButton>
+
+    <div
+      class="m-editor-nav-menu-more-wrapper"
+      :class="{ 'm-editor-nav-menu-more-wrapper-hidden': !hasOverflow }"
+      ref="moreWrapperEl"
+    >
+      <TMagicPopover
+        placement="bottom-end"
+        popper-class="m-editor-nav-menu-popover"
+        :width="popoverWidth"
+        :visible="popoverVisible"
+      >
+        <div class="m-editor-nav-menu-overflow-list">
+          <ToolButton v-for="(item, index) in overflowItems" :data="item" :key="`o-${index}`"></ToolButton>
+        </div>
+        <template #reference>
+          <div class="menu-item button m-editor-nav-menu-more" ref="referenceEl" @click="togglePopover">
+            <TMagicButton
+              size="small"
+              text
+              :icon="popoverVisible ? ArrowUp : ArrowDown"
+              :bg="popoverVisible"
+              :type="popoverVisible ? 'primary' : ''"
+            ></TMagicButton>
+          </div>
+        </template>
+      </TMagicPopover>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicPopover } from '@tmagic/design';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import { MenuButton, MenuComponent } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorNavMenuColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    columnKey: string;
+    items: (MenuButton | MenuComponent)[];
+    width?: number;
+    /** 子元素之间的间距，需与 SCSS gap 保持一致 */
+    gap?: number;
+    /** Popover 内容宽度 */
+    popoverWidth?: number;
+  }>(),
+  {
+    items: () => [],
+    gap: 3,
+    popoverWidth: 180,
+  },
+);
+
+const columnEl = useTemplateRef<HTMLDivElement>('columnEl');
+const moreWrapperEl = useTemplateRef<HTMLDivElement>('moreWrapperEl');
+
+const popoverVisible = ref(false);
+const togglePopover = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
+const itemInstances = ref<(InstanceType<typeof ToolButton> | null)[]>([]);
+let slotsRO: ResizeObserver | undefined;
+const observedEls = new Set<HTMLElement>();
+
+const setItemRef = (inst: InstanceType<typeof ToolButton> | null, index: number) => {
+  itemInstances.value[index] = inst ?? null;
+};
+
+const itemEls = computed<(HTMLElement | null)[]>(() =>
+  itemInstances.value.map((inst) => inst?.getElRef?.().value ?? null),
+);
+
+const reobserveSlots = () => {
+  if (!slotsRO) return;
+  for (const el of observedEls) slotsRO.unobserve(el);
+  observedEls.clear();
+  for (const el of itemEls.value) {
+    if (el) {
+      slotsRO.observe(el);
+      observedEls.add(el);
+    }
+  }
+};
+
+const cachedWidths = ref<Map<number, number>>(new Map());
+const moreWidth = ref(0);
+const containerWidth = ref(0);
+const hiddenIndexSet = ref<Set<number>>(new Set());
+
+const hasOverflow = computed(() => hiddenIndexSet.value.size > 0);
+const overflowItems = computed(() => props.items.filter((_, index) => hiddenIndexSet.value.has(index)));
+
+const measureAndCompute = () => {
+  if (!columnEl.value) return;
+
+  containerWidth.value = columnEl.value.clientWidth;
+
+  const els = itemEls.value;
+  for (let i = 0; i < props.items.length; i++) {
+    const el = els[i];
+    if (!el) {
+      cachedWidths.value.delete(i);
+      continue;
+    }
+    const w = el.getBoundingClientRect().width;
+    if (w > 0) {
+      cachedWidths.value.set(i, w);
+    } else {
+      cachedWidths.value.delete(i);
+    }
+  }
+
+  if (moreWrapperEl.value) {
+    const w = moreWrapperEl.value.getBoundingClientRect().width;
+    if (w > 0) moreWidth.value = w;
+  }
+
+  const total = props.items.length;
+  if (total === 0 || containerWidth.value <= 0) {
+    if (hiddenIndexSet.value.size > 0) hiddenIndexSet.value = new Set();
+    return;
+  }
+
+  let fullSum = 0;
+  let positive = 0;
+  for (let i = 0; i < total; i++) {
+    const w = cachedWidths.value.get(i) ?? 0;
+    if (w > 0) {
+      fullSum += w;
+      positive += 1;
+    }
+  }
+  fullSum += props.gap * Math.max(0, positive - 1);
+
+  // more 按钮位置始终保留，参与"是否放得下"的判断，避免出现时再次挤压
+  const effectiveMoreWidth = moreWidth.value > 0 ? moreWidth.value : 32;
+  const reservedMore = effectiveMoreWidth + (positive > 0 ? props.gap : 0);
+
+  let nextHidden: Set<number> | null = null;
+  if (fullSum + reservedMore <= containerWidth.value + 0.5) {
+    if (hiddenIndexSet.value.size > 0) nextHidden = new Set();
+  } else {
+    const newHidden = new Set<number>();
+    let used = effectiveMoreWidth;
+    let cutoff = -1;
+    for (let i = 0; i < total; i++) {
+      const w = cachedWidths.value.get(i) ?? 0;
+      if (w === 0) continue;
+      const need = props.gap + w;
+      if (used + need > containerWidth.value) {
+        cutoff = i;
+        break;
+      }
+      used += need;
+    }
+    if (cutoff >= 0) {
+      for (let j = cutoff; j < total; j++) newHidden.add(j);
+    }
+    nextHidden = newHidden;
+  }
+
+  if (nextHidden) {
+    const same =
+      nextHidden.size === hiddenIndexSet.value.size && [...nextHidden].every((v) => hiddenIndexSet.value.has(v));
+    if (!same) hiddenIndexSet.value = nextHidden;
+  }
+};
+
+let raf = 0;
+const scheduleMeasure = () => {
+  if (raf) cancelAnimationFrame(raf);
+  raf = requestAnimationFrame(() => {
+    raf = 0;
+    measureAndCompute();
+    if (hasOverflow.value && moreWidth.value === 0) {
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        measureAndCompute();
+      });
+    }
+  });
+};
+
+watch(hasOverflow, (value) => {
+  if (!value) popoverVisible.value = false;
+});
+
+watch(
+  () => props.items,
+  () => {
+    cachedWidths.value = new Map();
+    hiddenIndexSet.value = new Set();
+  },
+  { deep: true },
+);
+
+watch(itemEls, () => {
+  cachedWidths.value = new Map();
+  reobserveSlots();
+  scheduleMeasure();
+});
+
+watch(
+  () => props.width,
+  () => scheduleMeasure(),
+);
+
+let ro: ResizeObserver | undefined;
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    if (columnEl.value) {
+      ro = new ResizeObserver(() => scheduleMeasure());
+      ro.observe(columnEl.value);
+    }
+    slotsRO = new ResizeObserver(() => scheduleMeasure());
+    reobserveSlots();
+  }
+
+  scheduleMeasure();
+});
+
+onBeforeUnmount(() => {
+  if (raf) cancelAnimationFrame(raf);
+  ro?.disconnect();
+  slotsRO?.disconnect();
+  slotsRO = undefined;
+  observedEls.clear();
+});
+</script>
diff --git a/packages/editor/src/theme/nav-menu.scss b/packages/editor/src/theme/nav-menu.scss
index 50e3914e..6740e91f 100644
--- a/packages/editor/src/theme/nav-menu.scss
+++ b/packages/editor/src/theme/nav-menu.scss
@@ -22,6 +22,10 @@
     height: 100%;
     z-index: 1;
     align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    position: relative;
+    min-width: 0;
   }
 
   .menu-center {
@@ -32,8 +36,33 @@
     justify-content: flex-end;
   }
 
+  .m-editor-nav-menu-slot-hidden {
+    position: absolute;
+    left: -99999px;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .m-editor-nav-menu-more-wrapper {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &.m-editor-nav-menu-more-wrapper-hidden {
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  .m-editor-nav-menu-more {
+    flex: 0 0 auto;
+  }
+
   .menu-item {
     flex-direction: row;
+    flex: 0 0 auto;
     -webkit-box-align: center;
     align-items: center;
     vertical-align: middle;
@@ -47,6 +76,7 @@
     transition: all 0.3s ease 0s;
     border-bottom: 2px solid transparent;
     margin: 0;
+    white-space: nowrap;
 
     .is-disabled {
       opacity: 0.5;
@@ -70,6 +100,7 @@
 
     .menu-item-text {
       color: $nav-color;
+      white-space: nowrap;
     }
 
     &.rule {
@@ -84,3 +115,33 @@
     }
   }
 }
+
+.m-editor-nav-menu-popover {
+  .m-editor-nav-menu-overflow-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0;
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &.divider {
+        padding: 0;
+        cursor: default;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/editor/tests/unit/components/ToolButton.spec.ts b/packages/editor/tests/unit/components/ToolButton.spec.ts
index 8f8711db..67ac1f66 100644
--- a/packages/editor/tests/unit/components/ToolButton.spec.ts
+++ b/packages/editor/tests/unit/components/ToolButton.spec.ts
@@ -194,4 +194,31 @@ describe('ToolButton.vue', () => {
     await wrapper.find('.menu-item').trigger('click');
     expect(handler).not.toHaveBeenCalled();
   });
+
+  test('暴露 getElRef，可获取根元素引用', () => {
+    const wrapper = mount(ToolButton as any, {
+      ...provideServices(),
+      props: {
+        data: { type: 'button', text: 'x' } as any,
+      },
+    });
+    const exposed = wrapper.vm as any;
+    expect(typeof exposed.getElRef).toBe('function');
+
+    const elRef = exposed.getElRef();
+    expect(elRef).toBeDefined();
+    expect(elRef.value).toBe(wrapper.find('.menu-item').element);
+  });
+
+  test('display 为 false 时 getElRef 返回的 ref.value 为 null', () => {
+    const wrapper = mount(ToolButton as any, {
+      ...provideServices(),
+      props: {
+        data: { type: 'button', display: false, text: 'x' } as any,
+      },
+    });
+    const exposed = wrapper.vm as any;
+    const elRef = exposed.getElRef();
+    expect(elRef.value).toBeNull();
+  });
 });
diff --git a/packages/editor/tests/unit/layouts/NavMenu.spec.ts b/packages/editor/tests/unit/layouts/NavMenu.spec.ts
index da621758..7a512385 100644
--- a/packages/editor/tests/unit/layouts/NavMenu.spec.ts
+++ b/packages/editor/tests/unit/layouts/NavMenu.spec.ts
@@ -4,7 +4,7 @@
  * Copyright (C) 2025 Tencent.
  */
 import { beforeEach, describe, expect, test, vi } from 'vitest';
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref } from 'vue';
 import { mount } from '@vue/test-utils';
 
 import NavMenu from '@editor/layouts/NavMenu.vue';
@@ -31,11 +31,14 @@ vi.mock('@editor/components/ToolButton.vue', () => ({
   default: defineComponent({
     name: 'ToolButton',
     props: ['data'],
-    setup(props) {
+    setup(props, { expose }) {
+      const rootEl = ref<HTMLElement | null>(null);
+      expose({ getElRef: () => rootEl });
       return () =>
         h(
           'button',
           {
+            ref: rootEl,
             class: ['tool-btn', (props.data as any).className],
             onClick: () => (props.data as any).handler?.(),
           },
@@ -56,6 +59,7 @@ class FakeResizeObserver {
     this.cb = cb;
   }
   observe() {}
+  unobserve() {}
   disconnect() {}
 }
 (globalThis as any).ResizeObserver = FakeResizeObserver;
diff --git a/packages/editor/tests/unit/layouts/NavMenuColumn.spec.ts b/packages/editor/tests/unit/layouts/NavMenuColumn.spec.ts
new file mode 100644
index 00000000..497ef6ce
--- /dev/null
+++ b/packages/editor/tests/unit/layouts/NavMenuColumn.spec.ts
@@ -0,0 +1,362 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.
+ */
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+
+import NavMenuColumn from '@editor/layouts/NavMenuColumn.vue';
+
+vi.mock('@editor/components/ToolButton.vue', () => ({
+  default: defineComponent({
+    name: 'ToolButton',
+    props: ['data'],
+    setup(props, { expose }) {
+      const rootEl = ref<HTMLElement | null>(null);
+      expose({ getElRef: () => rootEl });
+      return () =>
+        h(
+          'button',
+          {
+            ref: rootEl,
+            class: ['tool-btn', (props.data as any)?.className],
+          },
+          (props.data as any)?.text || '',
+        );
+    },
+  }),
+}));
+
+vi.mock('@tmagic/design', () => ({
+  TMagicButton: defineComponent({
+    name: 'TMagicButton',
+    props: ['icon', 'bg', 'type', 'size', 'text'],
+    setup(_, { slots }) {
+      return () => h('span', { class: 'tmagic-btn' }, slots.default?.());
+    },
+  }),
+  TMagicPopover: defineComponent({
+    name: 'TMagicPopover',
+    props: ['placement', 'popperClass', 'width', 'visible'],
+    setup(props, { slots }) {
+      return () =>
+        h('div', { class: 'tmagic-popover', 'data-visible': String(props.visible) }, [
+          slots.reference?.(),
+          h('div', { class: 'tmagic-popover-content' }, slots.default?.()),
+        ]);
+    },
+  }),
+}));
+
+let roCallbacks: Array<(entries?: any) => void> = [];
+class FakeResizeObserver {
+  cb: any;
+  constructor(cb: any) {
+    this.cb = cb;
+    roCallbacks.push(cb);
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+(globalThis as any).ResizeObserver = FakeResizeObserver;
+
+const flushRaf = async () => {
+  await new Promise((r) => requestAnimationFrame(() => r(null)));
+  await nextTick();
+};
+
+beforeEach(() => {
+  roCallbacks = [];
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('NavMenuColumn', () => {
+  test('渲染 columnKey 对应类名与所有 ToolButton', () => {
+    const items = [
+      { type: 'button', className: 'a', text: 'A' },
+      { type: 'button', className: 'b', text: 'B' },
+    ];
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items },
+    });
+
+    expect(wrapper.find('.menu-left').exists()).toBe(true);
+    expect(wrapper.find('.m-editor-nav-menu-column').exists()).toBe(true);
+    expect(wrapper.findAll('.tool-btn')).toHaveLength(items.length + /* overflow popover slot */ 0);
+    expect(wrapper.find('.a').exists()).toBe(true);
+    expect(wrapper.find('.b').exists()).toBe(true);
+  });
+
+  test('提供 width 时设置宽度样式', () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'center', items: [], width: 240 },
+    });
+    const column = wrapper.find('.m-editor-nav-menu-column');
+    expect((column.element as HTMLElement).getAttribute('style')).toContain('width: 240px');
+  });
+
+  test('未提供 width 时不设置宽度样式', () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'center', items: [] },
+    });
+    const column = wrapper.find('.m-editor-nav-menu-column');
+    const style = (column.element as HTMLElement).getAttribute('style') || '';
+    expect(style).not.toContain('width');
+  });
+
+  test('始终渲染 more 按钮容器，无 overflow 时通过 hidden 类隐藏', () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items: [{ type: 'button', text: 'A' }] },
+    });
+    const moreWrapper = wrapper.find('.m-editor-nav-menu-more-wrapper');
+    expect(moreWrapper.exists()).toBe(true);
+    expect(moreWrapper.classes()).toContain('m-editor-nav-menu-more-wrapper-hidden');
+  });
+
+  test('点击 more 引用元素切换 popover 显示状态', async () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items: [{ type: 'button', text: 'A' }] },
+    });
+
+    const popover = wrapper.find('.tmagic-popover');
+    expect(popover.attributes('data-visible')).toBe('false');
+
+    await wrapper.find('.m-editor-nav-menu-more').trigger('click');
+    expect(wrapper.find('.tmagic-popover').attributes('data-visible')).toBe('true');
+
+    await wrapper.find('.m-editor-nav-menu-more').trigger('click');
+    expect(wrapper.find('.tmagic-popover').attributes('data-visible')).toBe('false');
+  });
+
+  test('items 为空时仍可正常渲染，更多按钮容器隐藏', () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'right', items: [] },
+    });
+    expect(wrapper.findAll('.tool-btn')).toHaveLength(0);
+    expect(wrapper.find('.m-editor-nav-menu-more-wrapper').classes()).toContain(
+      'm-editor-nav-menu-more-wrapper-hidden',
+    );
+  });
+
+  test('items 变化时重置 overflow 状态（无 hidden 类）', async () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: {
+        columnKey: 'left',
+        items: [
+          { type: 'button', text: 'A' },
+          { type: 'button', text: 'B' },
+        ],
+      },
+    });
+
+    await wrapper.setProps({
+      items: [
+        { type: 'button', text: 'X' },
+        { type: 'button', text: 'Y' },
+        { type: 'button', text: 'Z' },
+      ],
+    });
+    await nextTick();
+
+    const buttons = wrapper.findAll('.tool-btn');
+    expect(buttons).toHaveLength(3);
+    buttons.forEach((b) => {
+      expect(b.classes()).not.toContain('m-editor-nav-menu-slot-hidden');
+    });
+  });
+
+  test('容器宽度不足时应将溢出项标记为 hidden 并在 popover 中显示', async () => {
+    const items = Array.from({ length: 5 }).map((_, i) => ({
+      type: 'button',
+      className: `btn-${i}`,
+      text: `B${i}`,
+    }));
+
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items, width: 100 },
+      attachTo: document.body,
+    });
+
+    const columnEl = wrapper.find('.m-editor-nav-menu-column').element as HTMLElement;
+    Object.defineProperty(columnEl, 'clientWidth', { configurable: true, get: () => 100 });
+
+    const moreEl = wrapper.find('.m-editor-nav-menu-more-wrapper').element as HTMLElement;
+    moreEl.getBoundingClientRect = () => ({
+      width: 30,
+      height: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+
+    const itemEls = wrapper.findAll('.tool-btn');
+    itemEls.forEach((b) => {
+      const el = b.element as HTMLElement;
+      el.getBoundingClientRect = () => ({
+        width: 40,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      });
+    });
+
+    roCallbacks.forEach((cb) => cb());
+    await flushRaf();
+    await flushRaf();
+
+    const updated = wrapper.findAll('.tool-btn');
+    const hiddenCount = updated.filter((b) => b.classes().includes('m-editor-nav-menu-slot-hidden')).length;
+    expect(hiddenCount).toBeGreaterThan(0);
+
+    expect(wrapper.find('.m-editor-nav-menu-more-wrapper').classes()).not.toContain(
+      'm-editor-nav-menu-more-wrapper-hidden',
+    );
+
+    wrapper.unmount();
+  });
+
+  test('容器宽度足够时不隐藏任何项', async () => {
+    const items = Array.from({ length: 3 }).map((_, i) => ({
+      type: 'button',
+      className: `btn-${i}`,
+      text: `B${i}`,
+    }));
+
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items, width: 1000 },
+      attachTo: document.body,
+    });
+
+    const columnEl = wrapper.find('.m-editor-nav-menu-column').element as HTMLElement;
+    Object.defineProperty(columnEl, 'clientWidth', { configurable: true, get: () => 1000 });
+
+    const moreEl = wrapper.find('.m-editor-nav-menu-more-wrapper').element as HTMLElement;
+    moreEl.getBoundingClientRect = () => ({
+      width: 30,
+      height: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+
+    wrapper.findAll('.tool-btn').forEach((b) => {
+      const el = b.element as HTMLElement;
+      el.getBoundingClientRect = () => ({
+        width: 40,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      });
+    });
+
+    roCallbacks.forEach((cb) => cb());
+    await flushRaf();
+    await flushRaf();
+
+    wrapper.findAll('.tool-btn').forEach((b) => {
+      expect(b.classes()).not.toContain('m-editor-nav-menu-slot-hidden');
+    });
+    expect(wrapper.find('.m-editor-nav-menu-more-wrapper').classes()).toContain(
+      'm-editor-nav-menu-more-wrapper-hidden',
+    );
+
+    wrapper.unmount();
+  });
+
+  test('overflow 消失时自动关闭 popover', async () => {
+    const items = Array.from({ length: 4 }).map((_, i) => ({ type: 'button', text: `B${i}` }));
+
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items, width: 80 },
+      attachTo: document.body,
+    });
+
+    const columnEl = wrapper.find('.m-editor-nav-menu-column').element as HTMLElement;
+    let containerW = 80;
+    Object.defineProperty(columnEl, 'clientWidth', { configurable: true, get: () => containerW });
+
+    const moreEl = wrapper.find('.m-editor-nav-menu-more-wrapper').element as HTMLElement;
+    moreEl.getBoundingClientRect = () => ({
+      width: 30,
+      height: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+
+    wrapper.findAll('.tool-btn').forEach((b) => {
+      const el = b.element as HTMLElement;
+      el.getBoundingClientRect = () => ({
+        width: 40,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      });
+    });
+
+    roCallbacks.forEach((cb) => cb());
+    await flushRaf();
+    await flushRaf();
+
+    await wrapper.find('.m-editor-nav-menu-more').trigger('click');
+    expect(wrapper.find('.tmagic-popover').attributes('data-visible')).toBe('true');
+
+    containerW = 1000;
+    roCallbacks.forEach((cb) => cb());
+    await flushRaf();
+    await flushRaf();
+
+    expect(wrapper.find('.tmagic-popover').attributes('data-visible')).toBe('false');
+
+    wrapper.unmount();
+  });
+
+  test('卸载时清理 ResizeObserver', () => {
+    const wrapper = mount(NavMenuColumn as any, {
+      props: { columnKey: 'left', items: [{ type: 'button', text: 'A' }] },
+    });
+
+    const disconnectSpy = vi.fn();
+    const originalDisconnect = FakeResizeObserver.prototype.disconnect;
+    FakeResizeObserver.prototype.disconnect = disconnectSpy;
+
+    wrapper.unmount();
+
+    expect(disconnectSpy).toHaveBeenCalled();
+
+    FakeResizeObserver.prototype.disconnect = originalDisconnect;
+  });
+});