🐛 [Bug]: [NavMenu]导航栏并没有溢出，但是显示为折叠状态

[KyLenMou]

Version

3.19.0

Vue Version

5.0.8

Link to minimal reproduction

页面初始化，导航栏如下所示：

实际情况是，导航栏只有四个菜单，应该不会溢出而显示“更多”
在按住ctrl并滑动鼠标滚轮来缩放页面后，导航栏恢复了正常：

Step to reproduce

<template>
  <div id="defaultLayout">
    <tiny-nav-menu :data="menuData" style="height: 50px">
      <!-- logo -->
      <template #logo>
        <tiny-image fit="fill" :src="getImg()" style="height: 40px" />
      </template>
      <!-- toolbar -->
      <template #toolbar>
        <tiny-layout style="width: 200px">
          <tiny-search mini placeholder="请输入关键词"></tiny-search>
        </tiny-layout>
        <tiny-divider direction="vertical"></tiny-divider>
        <tiny-badge is-dot :hidden="true">
          <template #default>
            <tiny-button :icon="IconPublicNotice" circle></tiny-button>
          </template>
        </tiny-badge>
        <tiny-divider direction="vertical"></tiny-divider>
        <tiny-user-head type="icon" round min></tiny-user-head>
      </template>
    </tiny-nav-menu>

    <tiny-layout class="content-and-footer">
      <tiny-row id="oj-content">
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.fullPath" />
        </router-view>
      </tiny-row>
      <tiny-row class="layout-footer">
        <span> KOJ KCode Online Judge ©2024 Created by KyLen </span>
      </tiny-row>
    </tiny-layout>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { iconPublicNotice } from '@opentiny/vue-icon'
const IconPublicNotice = iconPublicNotice()
const getImg = () => {
  return new URL(`@/assets/logo-koj.png`, import.meta.url).href
}

const menuData = ref([
  {
    title: '首页',
    url: '/home'
  },
  {
    title: '题目集',
    url: '/problemset'
  },
  {
    title: '在线调试',
    url: '/debug'
  },
  {
    title: '评测队列',
    url: '/queue'
  }
])
</script>
<style scoped>
#defaultLayout {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
}

#oj-content {
  padding: 1em 15%;
  overflow-y: auto;
  min-height: 90vh;
}

:deep(.slot-toolbar) {
  display: flex;
  align-items: center;
  height: 100%;
}

:deep(.tiny-nav-menu) {
  width: 100%;
  margin: 0 auto;
  padding: 0 15%;
}

:deep(.slot-logo) {
  margin-top: 5px;
}

.content-and-footer {
  overflow-y: auto;
}

.layout-footer {
  margin-top: auto;
  padding: 1rem 2.5rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #6e6e6e;
  background-color: #ffffff;
  text-align: center;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
}
</style>

What is expected

No response

What is actually happening

No response

What is your project name

KOJ

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: [NavMenu]The navigation bar does not overflow, but is displayed in a collapsed state

[KyLenMou]

目前只能通过等待navmenu加载完成后再加载router-view解决：

<template>
  <div id="defaultLayout">
    <tiny-layout ref="navMenu">
      <tiny-nav-menu :data="menuData" style="height: 50px">
        <!-- logo -->
        <template #logo>
          <tiny-image fit="fill" :src="getImg()" style="height: 40px" />
        </template>
        <!-- toolbar -->
        <template #toolbar>
          <tiny-layout style="width: 200px">
            <tiny-search mini placeholder="请输入关键词"></tiny-search>
          </tiny-layout>
          <tiny-divider direction="vertical"></tiny-divider>
          <tiny-badge is-dot :hidden="true">
            <template #default>
              <tiny-button :icon="IconPublicNotice" circle></tiny-button>
            </template>
          </tiny-badge>
          <tiny-divider direction="vertical"></tiny-divider>
          <tiny-user-head type="icon" round min></tiny-user-head>
        </template>
      </tiny-nav-menu>
    </tiny-layout>
    <tiny-layout class="content-and-footer">
      <tiny-row id="oj-content">
        <router-view v-slot="{ Component }" v-if="!isNavMenuLoading">
          <component :is="Component" />
        </router-view>
      </tiny-row>
      <tiny-row class="layout-footer">
        <span> KOJ KCode Online Judge ©2024 Created by KyLen </span>
      </tiny-row>
    </tiny-layout>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, watchEffect } from 'vue'
import { iconPublicNotice } from '@opentiny/vue-icon'
const IconPublicNotice = iconPublicNotice()
// 获得logo图片
const getImg = () => {
  return new URL(`@/assets/logo-koj.png`, import.meta.url).href
}
// 菜单数据
const menuData = ref([
  {
    title: '首页',
    url: '/home'
  },
  {
    title: '题目集',
    url: '/problemset'
  },
  {
    title: '在线调试',
    url: '/debug'
  },
  {
    title: '评测队列',
    url: '/queue'
  }
])

// 等待菜单加载完成后再显示内容
const navMenu = ref(null)
const isNavMenuLoading = ref(true)
watchEffect(() => {
  if (navMenu.value) {
    isNavMenuLoading.value = false
  }
})
</script>

[wuyiping0628]

本地用你的代码没有复现该问题，小屏幕也是没有问题的，是不是你们设置的全局样式影响了，可以给nav-menu或者它的父元素加个宽度

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Using your code locally does not reproduce the problem, and there is no problem with small screens. Is it affected by the global style you set? You can add a width to nav-menu or its parent element.

[KyLenMou]

本地用你的代码没有复现该问题，小屏幕也是没有问题的，是不是你们设置的全局样式影响了，可以给nav-menu或者它的父元素加个宽度

router-view里面我用了tiny-grid，然后出现的这个问题，我重新开了一个干净的vite项目，编写了复现上述问题的最简的App.vue的代码：

<template>
  <div>
    <tiny-nav-menu :data="menuData"> </tiny-nav-menu>

    <tiny-grid :data="data">
      <tiny-grid-column field="problem_id" title="ID"></tiny-grid-column>
      <tiny-grid-column field="title" title="标题"> </tiny-grid-column>
      <tiny-grid-column field="difficulty" title="难度"></tiny-grid-column>
      <tiny-grid-column field="acNumber" title="已通过"></tiny-grid-column>
    </tiny-grid>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TinyNavMenu, TinyGrid, TinyGridColumn } from '@opentiny/vue'

const data = ref([
  {
    problem_id: 1,
    title: 'test',
    difficulty: 100,
    acNumber: 0,
    status: '0'
  }
])
const menuData = ref([
  {
    title: '首页',
    url: '/home'
  },
  {
    title: '题目集',
    url: '/problemset'
  },
  {
    title: '在线调试',
    url: '/debug'
  },
  {
    title: '评测队列',
    url: '/queue'
  }
])
</script>
<style scoped></style>

我使用了不同的浏览器和手机打开页面，还是出现了该问题：

文件目录如下：

没有任何css样式代码，项目使用的是npm init vue初始化的

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Using your code locally does not reproduce the problem, and there is no problem with small screens. Is it affected by the global style you set? You can add a width to nav-menu or its parent element.

I used tiny-grid in router-view, and when this problem arose, I reopened a clean vite project and wrote the simplest App.vue code that reproduces the above problem:

<template>
  <div>
    <tiny-nav-menu :data="menuData"> </tiny-nav-menu>

    <tiny-grid :data="data">
      <tiny-grid-column field="problem_id" title="ID"></tiny-grid-column>
      <tiny-grid-column field="title" title="title"> </tiny-grid-column>
      <tiny-grid-column field="difficulty" title="Difficulty"></tiny-grid-column>
      <tiny-grid-column field="acNumber" title="Passed"></tiny-grid-column>
    </tiny-grid>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TinyNavMenu, TinyGrid, TinyGridColumn } from '@opentiny/vue'

const data = ref([
  {
    problem_id: 1,
    title: 'test',
    difficulty: 100,
    acNumber: 0,
    status: '0'
  }
])
const menuData = ref([
  {
    title: 'Home',
    url: '/home'
  },
  {
    title: 'Question Set',
    url: '/problemset'
  },
  {
    title: 'Online debugging',
    url: '/debug'
  },
  {
    title: 'Evaluation Queue',
    url: '/queue'
  }
])
</script>
<style scoped></style>

I used different browsers and mobile phones to open the page, but the problem still occurred:

The file directory is as follows:

There is no css style code, the project is initialized using npm init vue