feat: 实现文件路径面包屑导航

frontend/package-lock.json

@@ -1541,7 +1541,7 @@
         },
         "node_modules/@vitejs/plugin-vue-jsx": {
             "version": "1.3.10",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-1.3.10.tgz",
+            "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-1.3.10.tgz",
             "integrity": "sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==",
             "dev": true,
             "dependencies": {
@@ -10987,7 +10987,7 @@
         },
         "@vitejs/plugin-vue-jsx": {
             "version": "1.3.10",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-1.3.10.tgz",
+            "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-1.3.10.tgz",
             "integrity": "sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==",
             "dev": true,
             "requires": {

frontend/src/api/modules/files.ts

@@ -1,7 +1,6 @@
 import { File } from '@/api/interface/file';
 import http from '@/api';
-import { ResultData } from '@/api/interface';
 
 export const GetFilesList = (params: File.ReqFile) => {
-    return http.post<ResultData<File.File>>('files/search', params);
+    return http.post<File.File>('files/search', params);
 };

frontend/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "panel"; /* Project id 3575356 */
-  src: url('iconfont.woff2?t=1660728283223') format('woff2'),
+  src: url('iconfont.woff2?t=1661325242934') format('woff2'),
-       url('iconfont.woff?t=1660728283223') format('woff'),
+       url('iconfont.woff?t=1661325242934') format('woff'),
-       url('iconfont.ttf?t=1660728283223') format('truetype'),
+       url('iconfont.ttf?t=1661325242934') format('truetype'),
-       url('iconfont.svg?t=1660728283223#panel') format('svg');
+       url('iconfont.svg?t=1661325242934#panel') format('svg');
 }
 
 .panel {
@@ -14,6 +14,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.p-arrow-right:before {
+  content: "\e665";
+}
+
+.p-home:before {
+  content: "\e615";
+}
+
+.p-terminal:before {
+  content: "\e864";
+}
+
+.p-terminal1:before {
+  content: "\e663";
+}
+
 .p-language:before {
   content: "\e605";
 }

frontend/src/components/bread-crumbs/bread-crumbs-item.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="bread-crumbs-item">
+        <el-link><slot></slot></el-link> <i v-if="!props.right" :class="'panel p-arrow-right'"></i>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    right: Boolean,
+});
+</script>

frontend/src/components/bread-crumbs/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="bread-crumbs"><slot></slot></div>
+</template>
+<style lang="scss">
+.bread-crumbs {
+    display: flex;
+    &-item {
+        a {
+            text-decoration: none;
+            transition: all 0.4s;
+        }
+    }
+    i {
+        font-size: 12px;
+        margin-left: 5px;
+        margin-right: 5px;
+        line-height: 22px;
+    }
+}
+</style>

frontend/src/views/file-management/index.vue

@@ -15,14 +15,17 @@
             </el-col>
             <el-col :span="18">
                 <div class="path">
-                    <el-breadcrumb :separator-icon="ArrowRight">
+                    <BreadCrumbs>
-                        <el-breadcrumb-item @click="jump(-1)">root</el-breadcrumb-item>
+                        <BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">root</BreadCrumbItem>
-                        <el-breadcrumb-item v-for="(item, key) in paths" :key="key" @click="jump(key)">{{
+                        <BreadCrumbItem
-                            item
+                            v-for="(item, key) in paths"
-                        }}</el-breadcrumb-item>
+                            :key="key"
-                    </el-breadcrumb>
+                            @click="jump(key)"
+                            :right="key == paths.length - 1"
+                            >{{ item }}</BreadCrumbItem
+                        >
+                    </BreadCrumbs>
                 </div>
-
                 <ComplexTable
                     :pagination-config="paginationConfig"
                     v-model:selects="selects"
@@ -92,8 +95,9 @@ import ComplexTable from '@/components/complex-table/index.vue';
 import i18n from '@/lang';
 import { GetFilesList } from '@/api/modules/files';
 import { dateFromat } from '@/utils/util';
-import { ArrowRight } from '@element-plus/icons-vue';
 import { File } from '@/api/interface/file';
+import BreadCrumbs from '@/components/bread-crumbs/index.vue';
+import BreadCrumbItem from '@/components/bread-crumbs/bread-crumbs-item.vue';
 interface Tree {
     id: number;
     label: string;
@@ -136,6 +140,14 @@ const search = (req: File.ReqFile) => {
     GetFilesList(req)
         .then((res) => {
             data.value = res.data.items;
+            req.path = res.data.path;
+            const pathArray = req.path.split('/');
+            paths.value = [];
+            for (const p of pathArray) {
+                if (p != '') {
+                    paths.value.push(p);
+                }
+            }
         })
         .finally(() => {
             loading.value = false;

frontend/tsconfig.json

@@ -16,6 +16,8 @@
         // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
         "jsx": "preserve",
+        "jsxFactory": "h",
+        "jsxFragmentFactory": "Fragment",
         "sourceMap": true,
         "resolveJsonModule": true,
         "esModuleInterop": true,