From 77466bf63f38bebc75c3221f5b26967959783990 Mon Sep 17 00:00:00 2001
From: martsi <martsisme@gmail.com>
Date: Fri, 28 Jun 2024 16:36:47 +0800
Subject: [PATCH] chore: add type file

---
 src/pages/Home/components/LeftBox.vue  | 16 ++++++++-------
 src/pages/Home/components/RightBox.vue |  1 -
 src/pages/Home/components/TopBox.vue   |  1 -
 src/store/data.ts                      |  5 +++--
 src/store/node.ts                      | 12 +----------
 src/type.ts                            | 28 ++++++++++++++++++++++++++
 src/utils/graphUtil.ts                 |  9 ++-------
 7 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 src/type.ts

diff --git a/src/pages/Home/components/LeftBox.vue b/src/pages/Home/components/LeftBox.vue
index 8a03c8e..25d93f6 100644
--- a/src/pages/Home/components/LeftBox.vue
+++ b/src/pages/Home/components/LeftBox.vue
@@ -8,8 +8,8 @@ const sessionStore = useSessionStore();
 <template>
   <div class="container">
     <template v-if="sessionStore.graphShow">
-      <div class="bubble">{{ sessionStore.session.question }}</div>
-      <div class="bubble">
+      <div class="block">{{ sessionStore.session.question }}</div>
+      <div class="block">
         <BreakdownChart
           :graph-id="sessionStore.session.sessionId + '-breakdown'"
         />
@@ -23,19 +23,21 @@ const sessionStore = useSessionStore();
   display: flex;
   flex-direction: column;
   align-items: center;
-  .bubble {
-    width: 80%;
+  .block {
+    box-sizing: border-box;
+    width: calc(100% - 16px);
     margin: 8px 0;
     &:nth-child(1) {
-      margin-top: 20px;
+      //margin-top: 20px;
     }
     padding: 10px;
     background-color: #f3f4f6;
-    box-shadow: 0px 0px 2px 1px rgba(black, 0.2);
-    border-radius: 10px;
+    box-shadow: 0 0 2px 1px rgba(black, 0.2);
+    border-radius: 4px;
     color: grey;
     &:nth-child(2n) {
       height: calc(100vh - 170px);
+      //flex: 1;
     }
   }
 }
diff --git a/src/pages/Home/components/RightBox.vue b/src/pages/Home/components/RightBox.vue
index 7d4c277..a142189 100644
--- a/src/pages/Home/components/RightBox.vue
+++ b/src/pages/Home/components/RightBox.vue
@@ -21,6 +21,5 @@ const sessionStore = useSessionStore();
 <style lang="less" scoped>
 .container {
   height: calc(100vh - 170px);
-  overflow: hidden;
 }
 </style>
diff --git a/src/pages/Home/components/TopBox.vue b/src/pages/Home/components/TopBox.vue
index 657b3d5..06b016d 100644
--- a/src/pages/Home/components/TopBox.vue
+++ b/src/pages/Home/components/TopBox.vue
@@ -14,7 +14,6 @@
   height: 100%;
   background-color: #fff;
   .title {
-    position: relative;
     font-size: 20px;
   }
 }
diff --git a/src/store/data.ts b/src/store/data.ts
index 010236c..9d0e3b4 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -1,11 +1,12 @@
 import { defineStore } from "pinia";
-import { Job, jobData2Tree, tree2Graph } from "@/utils/graphUtil.ts";
+import { jobData2Tree, tree2Graph } from "@/utils/graphUtil.ts";
 import { computed, reactive } from "vue";
 import { mockFetchJob } from "@/api/fetch.ts";
+import { Task } from "@/type.ts";
 // import axios from "@/api";
 
 export const useDataStore = defineStore("data", () => {
-  let localData = reactive({}) as Job;
+  let localData = reactive({}) as Task;
 
   const getTreeData = computed(() => jobData2Tree(localData));
 
diff --git a/src/store/node.ts b/src/store/node.ts
index 5e17003..5773fa1 100644
--- a/src/store/node.ts
+++ b/src/store/node.ts
@@ -1,16 +1,6 @@
 import { defineStore } from "pinia";
 import { reactive, ref } from "vue";
-
-type Node = {
-  id: string;
-  name: string;
-  description: string;
-  args: {
-    name: string;
-    description: string;
-    required: boolean;
-  }[];
-};
+import { Node } from "@/type.ts";
 
 export const useNodeStore = defineStore("node", () => {
   const activateNode = reactive<Node>({
diff --git a/src/type.ts b/src/type.ts
new file mode 100644
index 0000000..238023b
--- /dev/null
+++ b/src/type.ts
@@ -0,0 +1,28 @@
+export type Task = {
+  task: string;
+  toolId: string;
+  toolName: string;
+  subtasks: Task[];
+};
+
+// export type Tool = {
+//   id: string;
+//   name: string;
+//   description: string;
+//   args: {
+//     name: string;
+//     type: string;
+//     description: string;
+//   }[];
+// };
+export type Node = {
+  id: string;
+  name: string;
+  description: string;
+  // props: Task;
+  args: {
+    name: string;
+    description: string;
+    required: boolean;
+  }[];
+};
diff --git a/src/utils/graphUtil.ts b/src/utils/graphUtil.ts
index ababdfe..e5ffc98 100644
--- a/src/utils/graphUtil.ts
+++ b/src/utils/graphUtil.ts
@@ -5,13 +5,8 @@
  */
 import G6, { TreeGraphData } from "@antv/g6";
 import { GraphData } from "@antv/g6-core/lib/types";
+import { Task } from "@/type.ts";
 
-export type Job = {
-  task: string;
-  toolId: string;
-  toolName: string;
-  subtasks: Job[];
-};
 // export type Tool = {
 //   id: string;
 //   name: string;
@@ -29,7 +24,7 @@ export type Job = {
 //   children: TreeNode[];
 // };
 
-export function jobData2Tree(data: Job) {
+export function jobData2Tree(data: Task) {
   const { subtasks } = data;
   const graphData: TreeGraphData = {
     id: generateId(),