From 42cbac4dfee97fb1a356a29f1cee426e283dedb3 Mon Sep 17 00:00:00 2001
From: martsi <martsisme@gmail.com>
Date: Wed, 3 Jul 2024 17:35:58 +0800
Subject: [PATCH] feat: skeleton, upload and download button

---
 src/api/mock.ts                        |  2 +-
 src/components/WorkflowChart.vue       |  6 ++
 src/components/taskConfig/index.vue    | 23 +++++-
 src/pages/Home/components/LeftBox.vue  | 99 +++++++++++++++++---------
 src/pages/Home/components/RightBox.vue |  4 +-
 src/pages/Home/components/TopBox.vue   | 10 ++-
 src/store/session.ts                   | 11 ++-
 7 files changed, 113 insertions(+), 42 deletions(-)

diff --git a/src/api/mock.ts b/src/api/mock.ts
index 0ade641..404258b 100644
--- a/src/api/mock.ts
+++ b/src/api/mock.ts
@@ -18,7 +18,7 @@ export const fetchJob = (task: string) =>
             ),
           ),
         }),
-      500,
+      1000,
     );
   });
 
diff --git a/src/components/WorkflowChart.vue b/src/components/WorkflowChart.vue
index 96abcc9..8b61b96 100644
--- a/src/components/WorkflowChart.vue
+++ b/src/components/WorkflowChart.vue
@@ -7,12 +7,14 @@
 import { onMounted } from "vue";
 import G6 from "@antv/g6";
 import { useJobStore } from "@/store/job.ts";
+import { useTaskStore } from "@/store/task.ts";
 
 const props = defineProps<{
   graphId: string;
 }>();
 
 const jobStore = useJobStore();
+const taskStore = useTaskStore();
 
 const getGraphNum = function () {
   return "mountNode-" + props.graphId;
@@ -43,6 +45,10 @@ onMounted(() => {
 
   const group = graph.get("edgeGroup");
   group.toFront();
+
+  graph.on("click", (e) => {
+    taskStore.close();
+  });
 });
 </script>
 
diff --git a/src/components/taskConfig/index.vue b/src/components/taskConfig/index.vue
index 354800e..5fbf3cd 100644
--- a/src/components/taskConfig/index.vue
+++ b/src/components/taskConfig/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Close } from "@element-plus/icons-vue";
+import { Close, Download } from "@element-plus/icons-vue";
 import { useTaskStore } from "@/store/task.ts";
 import { storeToRefs } from "pinia";
 import { reactive, ref } from "vue";
@@ -45,6 +45,10 @@ async function onExecute(id: string, input: typeof argConfig) {
 function onCancel() {
   taskStore.close();
 }
+
+function handleClick() {
+  console.log("click");
+}
 </script>
 <template>
   <el-card
@@ -86,10 +90,22 @@ function onCancel() {
         </el-table>
       </el-form-item>
       <el-descriptions v-if="res" direction="vertical" :column="1">
-        <el-descriptions-item label="Result">
+        <el-descriptions-item>
+          <template #label>
+            Result
+            <el-button
+              type="primary"
+              :icon="Download"
+              circle
+              v-if="res.message"
+              style="float: right"
+              @click="handleClick"
+            />
+          </template>
           {{ res?.message }}
         </el-descriptions-item>
       </el-descriptions>
+
       <el-form-item>
         <div style="width: 100%; display: flex; justify-content: space-between">
           <el-button @click="onCancel">Cancel</el-button>
@@ -108,4 +124,7 @@ function onCancel() {
   background-color: aqua;
   border-color: aqua;
 }
+/deep/ .el-textarea__inner {
+  resize: none;
+}
 </style>
diff --git a/src/pages/Home/components/LeftBox.vue b/src/pages/Home/components/LeftBox.vue
index 3ce0805..318a1d6 100644
--- a/src/pages/Home/components/LeftBox.vue
+++ b/src/pages/Home/components/LeftBox.vue
@@ -6,50 +6,79 @@ const sessionStore = useSessionStore();
 </script>
 
 <template>
-  <div class="container">
-    <template v-if="sessionStore.graphShow">
-      <div class="collapse-item">
-        <div class="collapse-title">
-          <div>Question</div>
-        </div>
-        <div class="collapse-content">
-          {{ sessionStore.session.question }}
-        </div>
+  <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>
-      <div class="collapse-item">
-        <div class="collapse-title">
-          <div>Breakdown</div>
+    </template>
+
+    <template #default>
+      <template v-if="sessionStore.graphShow">
+        <div class="collapse-item">
+          <div class="collapse-title">
+            <div>Question</div>
+          </div>
+          <div class="collapse-content">
+            {{ sessionStore.session.question }}
+          </div>
         </div>
-        <div class="collapse-content" style="height: calc(100vh - 380px)">
-          <BreakdownChart
-            :graph-id="sessionStore.session.sessionId + '-breakdown'"
-          />
+        <div class="collapse-item">
+          <div class="collapse-title">
+            <div>Breakdown</div>
+          </div>
+          <div class="collapse-content" style="height: calc(100vh - 380px)">
+            <BreakdownChart
+              :graph-id="sessionStore.session.sessionId + '-breakdown'"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </template>
-  </div>
+  </el-skeleton>
 </template>
 
 <style lang="less" scoped>
-.container {
-  .collapse-item {
+.collapse-item {
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid rgb(220, 223, 230);
+  border-radius: 3px;
+  margin: 20px 20px 0 20px;
+  .collapse-title {
     box-sizing: border-box;
-    background-color: #ffffff;
-    border: 1px solid rgb(220, 223, 230);
-    border-radius: 3px;
-    margin: 20px 20px 0 20px;
-    .collapse-title {
-      box-sizing: border-box;
-      margin: 10px;
-    }
+    margin: 10px;
   }
-  .collapse-content {
-    //margin: 15px 20px 20px;
-    padding: 10px;
-    font-size: 14px;
+}
+.collapse-content {
+  //margin: 15px 20px 20px;
+  padding: 10px;
+  font-size: 14px;
 
-    border-top: 1px dashed rgba(0, 0, 0, 0.18);
-    //border-radius: 3px;
-  }
+  border-top: 1px dashed rgba(0, 0, 0, 0.18);
+  //border-radius: 3px;
 }
 </style>
diff --git a/src/pages/Home/components/RightBox.vue b/src/pages/Home/components/RightBox.vue
index 86dfd42..1c7be0c 100644
--- a/src/pages/Home/components/RightBox.vue
+++ b/src/pages/Home/components/RightBox.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import WorkflowChart from "@/components/WorkflowChart.vue";
-import NodeConfig from "@/components/taskConfig/index.vue";
+import TaskConfig from "@/components/taskConfig/index.vue";
 import { useTaskStore } from "@/store/task.ts";
 import { useSessionStore } from "@/store/session.ts";
 
@@ -14,7 +14,7 @@ const sessionStore = useSessionStore();
       v-if="sessionStore.graphShow"
       :graph-id="sessionStore.session.sessionId + '-workflow'"
     />
-    <NodeConfig v-if="taskStore.isShowed" />
+    <TaskConfig v-if="taskStore.isShowed" />
   </div>
 </template>
 
diff --git a/src/pages/Home/components/TopBox.vue b/src/pages/Home/components/TopBox.vue
index 64e157a..312841c 100644
--- a/src/pages/Home/components/TopBox.vue
+++ b/src/pages/Home/components/TopBox.vue
@@ -1,8 +1,15 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+function handleClick() {
+  console.log("click");
+}
+</script>
 
 <template>
   <div class="container">
     <div class="title">AI GIS SYSTEM</div>
+    <el-button style="position: absolute; right: 20px" @click="handleClick"
+      >Upload</el-button
+    >
   </div>
 </template>
 
@@ -12,6 +19,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  position: relative;
   //background-color: #fff;
   .title {
     font-size: 20px;
diff --git a/src/store/session.ts b/src/store/session.ts
index 11225cf..88b8b6b 100644
--- a/src/store/session.ts
+++ b/src/store/session.ts
@@ -19,13 +19,22 @@ export const useSessionStore = defineStore("session", () => {
   });
   const graphShow = ref(false);
   const questionShow = ref(true);
+  const loading = ref(false);
 
   // TODO chatted?
   async function chatted() {
+    loading.value = true;
     await jobStore.updateData(session.question);
     graphShow.value = true;
     questionShow.value = false;
+    loading.value = false;
   }
 
-  return { session, graphShow, questionShow, chatted };
+  return {
+    session,
+    graphShow,
+    questionShow,
+    loading,
+    chatted,
+  };
 });