update: 文件管理器导航栏长文件名缩略处理

components.d.ts

@@ -16,9 +16,12 @@ declare module 'vue' {
     MiaoMask: typeof import('./src/components/miaoMask.vue')['default']
     MiaoPopupInput: typeof import('./src/components/miaoPopupInput.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NDropdown: typeof import('naive-ui')['NDropdown']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NGrid: typeof import('naive-ui')['NGrid']

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -27,7 +27,9 @@
                      v-for="dir in currentDirectory?.getParents"
                      @click="handleClickBreadcrumbItem(dir)"
                      :clickable="true">
-                     <div>{{ dir.name }}</div>
+                     <n-ellipsis class="!max-w-[100px]">
+                        {{ dir.name }}
+                     </n-ellipsis>
                   </n-breadcrumb-item>
                </n-breadcrumb>
             </div>
@@ -59,13 +61,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-   NBreadcrumbItem,
-   NBreadcrumb,
-   NIcon,
-   NDropdown,
-   NScrollbar
-} from 'naive-ui'
 import {
    CloudOutline,
    ChevronBackOutline,
@@ -74,6 +69,7 @@ import {
 } from '@vicons/ionicons5'
 import VirtualDirectory from '@/class/VirtualDirectory'
 import { ref } from 'vue'
+import { NScrollbar } from 'naive-ui/es/scrollbar';
 
 const props = defineProps<{
    color: string