修复搜索结果卡片视图筛选可视性，优化季集显示位置，重构nodatafound情形ui，重构文件管理器ui并增加文件树功能，优化侧边栏高度规避竖向滑动条

src/@layouts/components/VerticalNav.vue

@@ -117,13 +117,23 @@ function handleNavScroll(evt: Event) {
   }
 
   .nav-items {
+    overflow-x: hidden;
+    overflow-y: auto;
     block-size: 100%;
-
-    // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
-    // overflow-x: hidden;
-
-    // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
-    // overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0 0 16px 0;
+    
+    /* 完全隐藏滚动条 */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    
+    > li {
+      margin-block-end: 2px;
+    }
   }
 
   .nav-item-title {
@@ -151,4 +161,4 @@ function handleNavScroll(evt: Event) {
     }
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavLayout.vue

@@ -206,4 +206,4 @@ export default defineComponent({
     width: 100%;
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavLink.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { NavLink } from '@layouts/types'
 
-defineProps<{
+// 定义类型必须使用vuetify中正确导出的类型
+const props = defineProps<{
   item: NavLink
 }>()
 </script>
@@ -15,12 +16,14 @@ defineProps<{
       :is="item.to ? 'RouterLink' : 'a'"
       :to="item.to"
       :href="item.href"
+      class="link-wrapper"
     >
       <VIcon
-        :icon="item.icon"
+        v-if="item.icon != null"
+        :icon="item.icon?.toString()"
+        size="20"
         class="nav-item-icon"
       />
-      <!-- 👉 Title -->
       <span class="nav-item-title">
         {{ item.title }}
       </span>
@@ -30,13 +33,54 @@ defineProps<{
 
 <style lang="scss">
 .layout-vertical-nav {
-  .nav-link a {
-    display: flex;
-    align-items: center;
-    border-radius: 0 3.125rem 3.125rem 0 !important;
-    cursor: pointer;
-    margin-inline-end: 1.125em;
-    padding-inline: 1.375rem 1rem;
+  .nav-link {
+    margin: 1px 16px;
+    position: relative;
+    
+    &.disabled {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+    
+    .router-link-active {
+      background-color: rgb(var(--v-theme-primary));
+      position: relative;
+      border-radius: 6px;
+      
+      .nav-item-icon,
+      .nav-item-title {
+        color: white;
+      }
+    }
+    
+    a, .link-wrapper {
+      display: flex;
+      align-items: center;
+      border-radius: 6px;
+      cursor: pointer;
+      padding: 8px 10px;
+      transition: background-color 0.2s ease;
+      position: relative;
+      
+      &:hover:not(.router-link-active) {
+        background-color: rgba(var(--v-theme-on-surface), 0.05);
+      }
+    }
+  }
+  
+  .nav-item-icon {
+    color: rgba(var(--v-theme-on-surface), 0.75);
+    margin-right: 8px;
+    min-width: 20px;
+  }
+  
+  .nav-item-title {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: rgba(var(--v-theme-on-surface), 0.85);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavSectionTitle.vue

@@ -8,22 +8,22 @@ defineProps<{
 
 <template>
   <li class="nav-section-title">
-    <div class="title-wrapper">
-      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-      <span
-        class="title-text"
-        v-text="item.heading"
-      />
-      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-    </div>
+    <div class="title-text">{{ item.heading }}</div>
   </li>
 </template>
 
 <style lang="scss">
 .layout-vertical-nav {
   .nav-section-title {
-    padding-left: 1.375rem;
-    padding-right: 1rem;
+    margin: 16px 16px 6px 16px;
+    position: relative;
+    
+    .title-text {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: rgb(var(--v-theme-primary));
+      padding-left: 0;
+    }
   }
 }
 </style>