[Fix-8834][UI Next][V1.0.0-Alpha] Rectify this issue about missing the path in the page of file management. (#8963)

* fix this issue

* merge from dev

dolphinscheduler-ui-next/src/components/card/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType } from 'vue'
+import {CSSProperties, defineComponent, PropType} from 'vue'
 import { NCard } from 'naive-ui'
 
 const headerStyle = {
@@ -26,9 +26,22 @@ const contentStyle = {
   padding: '8px 10px'
 }
 
+const headerExtraStyle = {
+
+}
+
 const props = {
   title: {
     type: String as PropType<string>
+  },
+  headerStyle: {
+    type: String as PropType<string | CSSProperties>
+  },
+  headerExtraStyle: {
+    type: String as PropType<string | CSSProperties>
+  },
+  contentStyle: {
+    type: String as PropType<string | CSSProperties>
   }
 }
 
@@ -41,8 +54,9 @@ const Card = defineComponent({
       <NCard
         title={title}
         size='small'
-        headerStyle={headerStyle}
-        contentStyle={contentStyle}
+        headerStyle={this.headerStyle? this.headerStyle:headerStyle}
+        headerExtraStyle={this.headerExtraStyle? this.headerExtraStyle:headerExtraStyle}
+        contentStyle={this.contentStyle? this.contentStyle:contentStyle}
       >
         {$slots}
       </NCard>

dolphinscheduler-ui-next/src/views/resource/file/index.module.scss

@@ -71,6 +71,16 @@
   }
 }
 
+.table-card {
+  > div div {
+    flex: none !important;
+  }
+}
+
+.breadcrumb {
+  padding-left: 10px;
+}
+
 .conditions-model {
   display: flex;
   justify-content: space-between;

dolphinscheduler-ui-next/src/views/resource/file/index.tsx

@@ -32,7 +32,9 @@ import {
   NButtonGroup,
   NButton,
   NPagination,
-  NInput
+  NInput,
+  NBreadcrumb,
+  NBreadcrumbItem
 } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { SearchOutlined } from '@vicons/antd'
@@ -42,11 +44,14 @@ import { useFileState } from './use-file'
 import ResourceFolderModal from './folder'
 import ResourceUploadModal from './upload'
 import ResourceRenameModal from './rename'
-import { IRenameFile } from './types'
+import {BreadcrumbItem, IRenameFile} from './types'
 import type { Router } from 'vue-router'
 import styles from './index.module.scss'
 import { useFileStore } from '@/store/file/file'
-import { queryCurrentResourceById } from '@/service/modules/resources'
+import {
+  queryCurrentResourceById,
+  queryResourceById
+} from '@/service/modules/resources'
 import { ResourceFile } from '@/service/modules/resources/types'
 
 export default defineComponent({
@@ -151,6 +156,23 @@ export default defineComponent({
       resourceListRef.value = getResourceListState(fileId.value)
     })
 
+    const breadcrumbItemsRef: Ref<Array<BreadcrumbItem> | undefined> = ref(
+        [
+          {
+            id: 1,
+            fullName: 'l1'
+          },
+          {
+            id: 2,
+            fullName: 'l2'
+          },
+          {
+            id: 4,
+            fullName: 'l3'
+          }
+        ]
+    )
+
     watch(
       () => router.currentRoute.value.params.id,
       // @ts-ignore
@@ -170,6 +192,44 @@ export default defineComponent({
       }
     )
 
+    const initBreadcrumb = async (dirs: string[]) => {
+      let index = 0
+      for (let dir of dirs) {
+        const newDir = dirs.slice(0, index + 1).join('/')
+        if (newDir) {
+          const id = 0
+          let resource = await queryResourceById(
+              {
+                id,
+                type: 'FILE',
+                fullName: newDir
+              },
+              id
+          )
+          breadcrumbItemsRef.value?.push({id: resource.id, fullName: dir})
+        } else {
+          breadcrumbItemsRef.value?.push({id: 0, fullName: 'Root'})
+        }
+        index = index + 1
+      }
+    }
+
+    onMounted(
+        () => {
+          breadcrumbItemsRef.value = []
+          if (fileId.value != -1) {
+            queryCurrentResourceById(fileId.value).then((res: ResourceFile) => {
+              if (res.fullName) {
+                const dirs = res.fullName.split('/')
+                if (dirs && dirs.length > 1) {
+                  initBreadcrumb(dirs)
+                }
+              }
+            })
+          }
+        }
+    )
+
     return {
       fileId,
       serachRef,
@@ -187,7 +247,8 @@ export default defineComponent({
       handleUpdatePage,
       handleUpdatePageSize,
       pagination: paginationReactive,
-      renameInfo
+      renameInfo,
+      breadcrumbItemsRef,
     }
   },
   render() {
@@ -199,6 +260,7 @@ export default defineComponent({
       handleCreateFile,
       handleUploadFile
     } = this
+
     return (
       <div>
         <Card style={{ marginBottom: '8px' }}>
@@ -238,44 +300,61 @@ export default defineComponent({
             </div>
           </div>
         </Card>
-        <Card title={t('resource.file.file_manage')}>
-          <NDataTable
-            remote
-            columns={columnsRef}
-            data={this.resourceListRef?.value.table}
-            striped
-            size={'small'}
-            class={styles['table-box']}
-            row-class-name='items'
-          />
-          <div class={styles.pagination}>
-            <NPagination
-              v-model:page={this.pagination.page}
-              v-model:pageSize={this.pagination.pageSize}
-              pageSizes={this.pagination.pageSizes}
-              item-count={this.pagination.itemCount}
-              onUpdatePage={this.handleUpdatePage}
-              onUpdatePageSize={this.handleUpdatePageSize}
-              show-quick-jumper
-              show-size-picker
-            />
-          </div>
-          <ResourceFolderModal
+        <Card title={t('resource.file.file_manage')} class={styles['table-card']}>
+          {{
+            'header-extra': () => (
+                <NBreadcrumb separator='>' class={styles['breadcrumb']}>
+                  {
+                    this.breadcrumbItemsRef?.map((item: BreadcrumbItem) => {
+                      return (
+                          <NBreadcrumbItem href={item.id.toString()}>{item.fullName}</NBreadcrumbItem>
+                      )
+                    })
+                  }
+                </NBreadcrumb>
+            ),
+            default: () => (
+                <div>
+                  <NDataTable
+                      remote
+                      columns={columnsRef}
+                      data={this.resourceListRef?.value.table}
+                      striped
+                      size={'small'}
+                      class={styles['table-box']}
+                      row-class-name='items'
+                  />
+                  <div class={styles.pagination}>
+                    <NPagination
+                    v-model:page={this.pagination.page}
+                    v-model:pageSize={this.pagination.pageSize}
+                    pageSizes={this.pagination.pageSizes}
+                    item-count={this.pagination.itemCount}
+                    onUpdatePage={this.handleUpdatePage}
+                    onUpdatePageSize={this.handleUpdatePageSize}
+                    show-quick-jumper
+                    show-size-picker
+                    />
+                  </div>
+                </div>
+            )
+          }}
+        </Card>
+        <ResourceFolderModal
             v-model:show={this.folderShowRef}
             onUpdateList={this.updateList}
-          />
-          <ResourceUploadModal
+        />
+        <ResourceUploadModal
             v-model:show={this.uploadShowRef}
             onUpdateList={this.updateList}
-          />
-          <ResourceRenameModal
+        />
+        <ResourceRenameModal
             v-model:show={this.renameShowRef}
             id={this.renameInfo.id}
             name={this.renameInfo.name}
             description={this.renameInfo.description}
             onUpdateList={this.updateList}
-          />
-        </Card>
+        />
       </div>
     )
   }

dolphinscheduler-ui-next/src/views/resource/file/types.ts

@@ -64,3 +64,8 @@ export interface PaginationProps {
 export interface ISetPagination {
   (itemCount: number): void
 }
+
+export interface BreadcrumbItem {
+  id: number,
+  fullName: string
+}