..

src/App.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
+import { NBreadcrumbItem, NBreadcrumb } from 'naive-ui'
+import type { stats, file, directory } from '@/types/type.ts'
+import VirtualDirectory from '@/class/virtualDirectory';
+// import test from './hooks/test.ts';
+
+const testData: string[] = ['111', '222', '333']
+
 </script>
 
 <template>
-  <div>
-    miao
-  </div>
+  <n-breadcrumb separator=">">
+    <n-breadcrumb-item v-for="(title, index) in testData">
+      {{ title }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+    <div>miao</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/class/virtualDirectory.ts

@@ -0,0 +1,51 @@
+import type { stats, file, directory } from '@/types/type.ts'
+
+class VirtualFile {
+    constructor(info: file, parent: VirtualDirectory) {
+        this.name = info.name
+        this.size = info.size
+        this.stats = info.stats
+        this.parent = parent
+    }
+    name: string
+    size: number
+    stats: stats
+    parent: VirtualDirectory
+    get path() {
+        return `${this.parent.path}${this.name}`
+    }
+}
+
+class VirtualDirectory {
+    constructor(info: directory, parent: VirtualDirectory) {
+        this.name = info.name
+        this.type = info.type
+        this.stats = info.stats
+        this.parent = parent ?? undefined
+        // 这里要改
+        this.content = info.content.map((v) => {
+            if (v.type === 'file') {
+                return new VirtualFile(v, this)
+            } else {
+                return new VirtualDirectory(v, this)
+            }
+        })
+    }
+    name: string
+    content: (VirtualFile | VirtualDirectory)[]
+    type: 'directory'
+    stats: stats
+    parent?: VirtualDirectory
+
+    /**
+     * 相对于根目录的路径， 如: "/",  "/123/321/"
+     * @returns {string}
+     */
+    get path(): string {
+        if (!this.parent) {
+            return '/'
+        }
+        return `${this.parent.path}${this.name}/`
+    }
+}
+export default VirtualDirectory

src/config.ts

@@ -0,0 +1,3 @@
+export default {
+  baseUrl: 'http://127.0.0.1:17705/'
+}

src/types/type.ts

@@ -0,0 +1,21 @@
+export type stats = {
+    atimeMs: number // 上次访问时间（毫秒）
+    birthtimeMs: number // 创建时间（毫秒）
+    ctimeMs: number // 状态更改时间（毫秒）
+    mtimeMs: number // 上次修改时间（毫秒）
+}
+
+export type file = {
+    name: string
+    size: number
+    type: 'file'
+    stats: stats
+}
+
+export type directory = {
+    name: string
+    content: (file | directory)[]
+    type: 'directory'
+    stats: stats
+    parent?: directory
+}