vue的在线编辑器综测导航部分的CSShover效果宽度不满意，希望撑满

由于没有采用details和sumary来实现，然后在这个宽度部分被难住了，没办法实现到横条被占满，可以采用JavaScript实现，或者最好能够单纯用CSS实现，我想不出来解决办法

目前效果：

希望它的横条可以撑满，像VS Code的效果

示例项目下载：https://gitee.com/anxwefndu/online-vs-code

目前项目的文件夹导入方式只写了拖拽导入，那个选择文件的还没有写完，需要手动解析出来文件夹路径，然后拼接出来，同时也希望这方面可以给一些解决方法；我可以写出来手动解析的过程，只是比较麻烦，如果可以有包含文件和文件夹的对象获取到，那就方便操作了，和拖拽式的一样。

可以参考element的el-tree，他是给文本节点加padding-left处理缩进，这样不会影响整体的宽度，可以参照在你的file-item做处理

el-tree-node__content处源码

试试吧

使用flex布局：

HTML结构：

<div class="nav-container">
  <ul class="nav-list">
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
    <!-- 其他导航项 -->
  </ul>
</div>

CSS样式：

.nav-container {
  display: flex;
}

.nav-list {
  display: flex;
  flex: 1;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.nav-list li {
  flex-grow: 1;
}

.nav-list li a {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
}

.nav-list li:hover a {
  background-color: #999;
}

使用grid布局：

HTML结构：

<div class="nav-container">
  <ul class="nav-list">
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
    <!-- 其他导航项 -->
  </ul>
</div>

CSS样式：

.nav-container {
  display: grid;
}

.nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 10px;
  list-style: none;
  padding: 0;
}

.nav-list li a {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
}

.nav-list li:hover a {
  background-color: #999;
}

根据你的描述，你想要实现一个导航部分的CSS hover效果，使其宽度能够撑满。

在Vue.js中，你可以通过以下步骤来实现这个效果：

首先，在导航部分的CSS样式中，为导航项设置一个初始的宽度值，比如 width: 100px;。
然后，使用CSS的hover伪类选择器来定义鼠标悬停时的样式。在该样式中，将宽度设置为100%或撑满父容器的宽度，比如 width: 100%; 或 width: 100vw;。
以下是示例代码，演示如何实现这个效果：


html
<template>
  <div class="navigation">
    <div class="nav-item" v-for="item in navigationItems" :key="item.id" :class="{ 'active': item.isActive }">
      {{ item.name }}
    </div>
  </div>
</template>

<style scoped>
.navigation {
  display: flex;
  background-color: #f0f0f0;
}

.nav-item {
  padding: 10px;
  width: 100px;
  transition: width 0.3s ease;
}

.nav-item:hover {
  width: 100%;
}

.active {
  background-color: #ccc;
}
</style>

在这个示例代码中，.navigation 类表示导航栏的外层容器，.nav-item 类表示每个导航项。当鼠标悬停在导航项上时，使用 .nav-item:hover 选择器来设置宽度为100%。

你可以根据自己的项目需求进行调整和修改样式。如果你希望实现更复杂的动画效果，你可以考虑使用Vue的过渡效果或动画库，比如Vue的transition组件或CSS动画库，例如Animate.css。

至于文件夹导入的问题，请提供更多关于如何解析文件夹路径的信息，以便我能够更好地帮助你找到解决办法。
有用请采纳，谢谢！