feat(Workspace)

src/components/Workspace.vue

@@ -0,0 +1,37 @@
+<!--
+    @Description: Workspace Component
+    @Author: Chris
+    @Date: 2024/7/24
+-->
+<script lang="ts" setup>
+import {useWorkspaceStore} from "@/store/workspace.ts";
+import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
+
+// TODO 上传 下载 删除
+const workspaceStore = useWorkspaceStore();
+let treeData = storeToRefs(workspaceStore).treeData;
+
+const treeProps = {
+  label: "name",
+}
+
+async function update() {
+  await workspaceStore.updateData();
+}
+
+onMounted(() => {
+  update();
+});
+</script>
+
+<template>
+  <el-tree
+      :data="treeData"
+      :props="treeProps"
+  />
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/pages/Workflow/components/LeftBox.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { useSessionStore } from "@/store/session.ts";
+import {useSessionStore} from "@/store/session.ts";
 import BreakdownChart from "@/components/BreakdownChart.vue";
+import Workspace from "@/components/Workspace.vue";
 
 const sessionStore = useSessionStore();
 </script>
@@ -10,6 +11,7 @@ const sessionStore = useSessionStore();
     <el-tab-pane
       label="breakdown"
       style="height: calc(100vh - 131px); overflow-y: auto"
+      lazy
     >
       <template v-if="sessionStore.graphShow">
         <div class="collapse-item">
@@ -35,8 +37,11 @@ const sessionStore = useSessionStore();
     <el-tab-pane
       label="workspace"
       style="height: calc(100vh - 131px); overflow-y: auto"
+      lazy
     >
-      <div style="text-align: center; height: 100%">BUILDING</div>
+      <div style="text-align: center; height: 100%">
+        <Workspace/>
+      </div>
     </el-tab-pane>
   </el-tabs>
 </template>

src/store/workspace.ts

@@ -3,29 +3,20 @@
  * @Author: Chris
  * @Date: 2024/7/23
  */
-import { defineStore } from "pinia";
-import { FileNode, Response } from "@/type.ts";
-import { fetchWorkspace } from "@/api";
-import { ref } from "vue";
+import {defineStore} from "pinia";
+import {FileNode, Response} from "@/type.ts";
+import {fetchWorkspace} from "@/api";
+import {computed, ref} from "vue";
 
 export const useWorkspaceStore = defineStore("workspace", () => {
-  let _fileTree = ref<FileNode>();
+  let root = ref<FileNode>({});
 
   async function updateData() {
-    const res = (await fetchWorkspace()).data as Response<any>;
-    _fileTree.value = convertData(res.data);
+    const res = (await fetchWorkspace()).data as Response<FileNode>;
+    root.value = res.data;
   }
 
-  function convertData(data: any) {
-    const children = data.children;
-    const fileNode = new FileNode(data.name, data.type);
-    if (children && children.length > 0) {
-      for (let i = 0; i < children.length; i++) {
-        fileNode.addChild(convertData(children[i]));
-      }
-    }
-    return fileNode;
-  }
+  const treeData = computed(() => root.value.children);
 
-  return { updateData };
+  return {treeData, updateData};
 });

src/type.ts

@@ -33,12 +33,12 @@ export class Tool {
 }
 
 export class FileNode {
-  label: string;
+  name: string;
   type: string;
   children: FileNode[];
 
-  constructor(label: string, type: string) {
-    this.label = label;
+  constructor(name: string, type: string) {
+    this.name = name;
     this.type = type;
     this.children = [] as FileNode[];
   }