From 2de026185b892c10403ad2566ff7341c928656d9 Mon Sep 17 00:00:00 2001
From: martsi <martsisme@gmail.com>
Date: Mon, 22 Jul 2024 21:07:11 +0800
Subject: [PATCH] feat(tab)

---
 src/components/BreakdownChart.vue         |  1 +
 src/pages/Workflow/components/LeftBox.vue | 54 +++++++----------------
 2 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/src/components/BreakdownChart.vue b/src/components/BreakdownChart.vue
index 28532ff..3ee75ca 100644
--- a/src/components/BreakdownChart.vue
+++ b/src/components/BreakdownChart.vue
@@ -25,6 +25,7 @@ onMounted(() => {
   tree.value = new G6.TreeGraph({
     container: getGraphNum(),
     animate: false,
+    linkCenter: true,
     layout: {
       type: "indented",
       direction: "LR",
diff --git a/src/pages/Workflow/components/LeftBox.vue b/src/pages/Workflow/components/LeftBox.vue
index 318a1d6..3272a31 100644
--- a/src/pages/Workflow/components/LeftBox.vue
+++ b/src/pages/Workflow/components/LeftBox.vue
@@ -6,37 +6,11 @@ const sessionStore = useSessionStore();
 </script>
 
 <template>
-  <el-skeleton animated :loading="sessionStore.loading">
-    <template #template>
-      <div style="padding: 20px">
-        <el-skeleton-item
-          variant="h1"
-          style="height: 50px; margin-bottom: 5px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h3"
-          style="height: 30px; width: 95%; margin-bottom: 10px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h3"
-          style="height: 30px; width: 95%; margin-bottom: 10px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h3"
-          style="height: 30px; width: 95%; margin-bottom: 10px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h1"
-          style="height: 50px; margin-bottom: 5px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="image"
-          style="width: 100%; height: 500px"
-        ></el-skeleton-item>
-      </div>
-    </template>
-
-    <template #default>
+  <el-tabs stretch type="border-card">
+    <el-tab-pane
+      label="breakdown"
+      style="height: calc(100vh - 131px); overflow-y: auto"
+    >
       <template v-if="sessionStore.graphShow">
         <div class="collapse-item">
           <div class="collapse-title">
@@ -50,24 +24,30 @@ const sessionStore = useSessionStore();
           <div class="collapse-title">
             <div>Breakdown</div>
           </div>
-          <div class="collapse-content" style="height: calc(100vh - 380px)">
+          <div class="collapse-content" style="height: calc(100vh - 350px)">
             <BreakdownChart
               :graph-id="sessionStore.session.sessionId + '-breakdown'"
             />
           </div>
         </div>
       </template>
-    </template>
-  </el-skeleton>
+    </el-tab-pane>
+    <el-tab-pane
+      label="workspace"
+      style="height: calc(100vh - 131px); overflow-y: auto"
+    >
+      <div style="text-align: center; height: 100%">BUILDING</div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <style lang="less" scoped>
 .collapse-item {
-  box-sizing: border-box;
-  background-color: #ffffff;
+  //box-sizing: border-box;
+  //background-color: #ffffff;
   border: 1px solid rgb(220, 223, 230);
   border-radius: 3px;
-  margin: 20px 20px 0 20px;
+  margin: 20px;
   .collapse-title {
     box-sizing: border-box;
     margin: 10px;