From 417e1f4bb9f24efa9b44c1f6312f7e133ca34153 Mon Sep 17 00:00:00 2001
From: martsi <martsisme@gmail.com>
Date: Wed, 17 Jul 2024 00:37:14 +0800
Subject: [PATCH] refactor(Question,Home): move Question to Home page include
 style changes

---
 src/App.vue                              |  6 +-
 src/api/job.ts                           | 12 ++--
 src/components/Case.vue                  | 25 ++++----
 src/components/Question.vue              | 70 +++++++-------------
 src/pages/Home.vue                       | 82 +++++++++++-------------
 src/pages/Workflow/components/TopBox.vue |  4 +-
 src/pages/Workflow/index.less            |  4 --
 src/pages/Workflow/index.vue             |  6 +-
 src/router/index.ts                      |  4 +-
 src/store/session.ts                     |  3 -
 src/style.less                           | 12 ++++
 11 files changed, 104 insertions(+), 124 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 258eb8a..bb3376c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup></script>
 
 <template>
-  <RouterView />
+  <RouterView v-slot="{ Component }">
+    <Transition name="fade">
+      <Component :is="Component" />
+    </Transition>
+  </RouterView>
 </template>
diff --git a/src/api/job.ts b/src/api/job.ts
index ce4cb8e..9ad7d97 100644
--- a/src/api/job.ts
+++ b/src/api/job.ts
@@ -19,11 +19,15 @@ const axiosInstance = createAxiosInstance(axiosConfig);
  * @param data
  */
 export function fetchJob(data: string) {
-  return axiosInstance.post("gis_agent_backend/simple/task_plan/", data, {
-    headers: {
-      "Content-Type": "application/json",
+  return axiosInstance.post(
+    "/gis_agent_backend/plan2level/task_plan/?modelName=gpt-4o",
+    data,
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
     },
-  });
+  );
 }
 
 /**
diff --git a/src/components/Case.vue b/src/components/Case.vue
index ab87768..aa75022 100644
--- a/src/components/Case.vue
+++ b/src/components/Case.vue
@@ -1,34 +1,35 @@
 <script setup lang="ts">
 import { useSessionStore } from "../store/session.ts";
-import { onMounted } from "vue";
 
 const sessionStore = useSessionStore();
 
 function handleClick() {
   sessionStore.session.question =
-    "Extract elevation data of Sri Lanka from multiple TIF files using the shape of the island from a vector file";
+    "Extract elevation data of Sri Lanka from multiple TIF files using the shape of the island from a vector file.";
   sessionStore.chatted();
 }
-
-onMounted(() => {
-  // handleClick();
-});
 </script>
 
 <template>
   <el-button
     class="case-button"
     @click="handleClick"
-    v-if="sessionStore.questionShow"
-    >Elevation of Sri Lanka</el-button
+    :disabled="sessionStore.loading"
+    plain
   >
-  <div></div>
+    <template #default> Elevation of Sri Lanka </template>
+  </el-button>
 </template>
 
 <style scoped lang="less">
 .case-button {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
+  height: 100px;
+  width: 100%;
+  box-shadow:
+    0 0 8px 6px rgba(29, 28, 35, 0.06),
+    0 0 2px 0 rgba(29, 28, 35, 0.18);
+}
+.el-button + .el-button {
+  margin: 0;
 }
 </style>
diff --git a/src/components/Question.vue b/src/components/Question.vue
index c3ff07f..23196f2 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -1,64 +1,38 @@
 <script lang="ts" setup>
-import { Promotion } from "@element-plus/icons-vue";
+import { Search, Top } from "@element-plus/icons-vue";
 import { useSessionStore } from "../store/session.ts";
 
 const sessionStore = useSessionStore();
-// sessionStore.session.question = "Calculation of Flood Affected Area";
-// sessionStore.chatted();
 </script>
 
 <template>
-  <Transition>
-    <div class="container" v-show="sessionStore.questionShow">
-      <el-input
-        v-model="sessionStore.session.question"
-        placeholder="Type Something"
-        @change="sessionStore.chatted()"
-        :disabled="sessionStore.graphShow"
-      >
-        <template #suffix>
-          <el-button :icon="Promotion" :disabled="sessionStore.graphShow" />
-        </template>
-      </el-input>
-    </div>
-  </Transition>
+  <div class="container">
+    <el-input
+      v-model="sessionStore.session.question"
+      placeholder="Type Something"
+      @change="sessionStore.chatted()"
+      style="height: 50px"
+      resize="none"
+      size="large"
+      :disabled="sessionStore.loading"
+    >
+      <template #suffix>
+        <el-button text :icon="Top" :loading="sessionStore.loading" />
+      </template>
+      <template #prefix>
+        <el-icon><Search /></el-icon>
+      </template>
+    </el-input>
+  </div>
 </template>
 
 <style lang="less" scoped>
 .container {
-  position: absolute;
-  bottom: 25px;
-  left: 30px;
-  right: 30px;
-  height: 70px;
-  background-color: #f7f9fb;
   box-shadow:
     0 0 8px 6px rgba(29, 28, 35, 0.06),
     0 0 2px 0 rgba(29, 28, 35, 0.18);
-  border-radius: 3px;
-  .el-input {
-    box-sizing: border-box;
-    //height: 50px;
-    //margin: 5px;
-    //padding: 0 20px;
-    padding: 10px;
-    height: 100%;
-    //width: 100%;
-    :deep(.el-input__wrapper) {
-      //background-color: #f7f9fb;
-      border-radius: 3px;
-      color: #828282;
-    }
-  }
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
+  margin: 20px;
+  width: 100%;
+  border-radius: 5px;
 }
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index fcd1178..86dfd1c 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,60 +1,56 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
-
-const router = useRouter();
+import Question from "@/components/Question.vue";
+import Case from "@/components/Case.vue";
 </script>
 
 <template>
   <div id="container">
-    <div class="title">Welcome</div>
-    <el-button
-      class="button"
-      @click="
-        () => {
-          router.push('/workflow');
-        }
-      "
-      >Build Workflow</el-button
-    >
-    <el-button
-      class="button"
-      @click="
-        () => {
-          router.push('/chat');
-        }
-      "
-      >Go Chat</el-button
-    >
+    <el-image
+      src="http://8.217.104.137:39999/_next/image?url=%2Flogo-light.png&w=640&q=75"
+      mode="fit"
+      style="position: absolute; top: 35px; right: 35px; height: 35px"
+    />
+    <div class="title">AI GIS SYSTEM</div>
+    <div class="content">
+      <Question />
+      <div class="cases">
+        <Case />
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped lang="less">
+@import "@/style.less";
 #container {
   height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
+  background: @bg-color;
+  text-align: center;
   .title {
-    font-size: 100px;
+    padding-top: calc(23% - 50px);
+    font-size: 50px;
     text-align: center;
-    background: linear-gradient(135deg, #c850c0, #4158d0);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-family: AppleSystemUIFont, serif;
+    color: #000000;
+    font-weight: bolder;
+    font-family: sans-serif;
+    text-shadow: 3px 2px rgba(darkblue, 0.3);
   }
-
-  .button {
-    font-size: 25px;
-    margin: 20px;
-    height: 100px;
-    width: 200px;
-    font-family: AppleSystemUIFont, serif;
-    color: #ffffff;
-    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 70%;
+    margin: 80px auto auto;
+    .cases {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-gap: 50px;
+      justify-items: center;
+      align-items: center;
+      padding: 20px;
+      width: 100%;
+    }
   }
 }
 </style>
diff --git a/src/pages/Workflow/components/TopBox.vue b/src/pages/Workflow/components/TopBox.vue
index d8a8ce6..60e39df 100644
--- a/src/pages/Workflow/components/TopBox.vue
+++ b/src/pages/Workflow/components/TopBox.vue
@@ -7,7 +7,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 const go = () => {
-  router.push({ path: "/chat", replace: true });
+  router.push({ path: "/", replace: true });
 };
 </script>
 
@@ -18,7 +18,7 @@ const go = () => {
     <!--      >Upload</el-button-->
     <!--    >-->
     <el-button @click="go" style="position: absolute; left: 10px"
-      >Go Chat</el-button
+      >Back</el-button
     >
   </div>
 </template>
diff --git a/src/pages/Workflow/index.less b/src/pages/Workflow/index.less
index 10d9d8c..5579d0a 100644
--- a/src/pages/Workflow/index.less
+++ b/src/pages/Workflow/index.less
@@ -22,8 +22,4 @@
     background-color:#F4F4F6;
     padding: 0;
   }
-}
-.question-button{
-  position: absolute;
-  bottom: 20px;
 }
\ No newline at end of file
diff --git a/src/pages/Workflow/index.vue b/src/pages/Workflow/index.vue
index 6cddcca..42497fe 100644
--- a/src/pages/Workflow/index.vue
+++ b/src/pages/Workflow/index.vue
@@ -2,8 +2,6 @@
 import TopBox from "@/pages/Workflow/components/TopBox.vue";
 import LeftBox from "@/pages/Workflow/components/LeftBox.vue";
 import RightBox from "@/pages/Workflow/components/RightBox.vue";
-import Question from "@/components/Question.vue";
-import Case from "@/components/Case.vue";
 </script>
 
 <template>
@@ -13,13 +11,11 @@ import Case from "@/components/Case.vue";
         <TopBox />
       </el-header>
       <el-container>
-        <el-aside width="50%">
+        <el-aside width="35%">
           <LeftBox />
-          <Case />
         </el-aside>
         <el-main>
           <RightBox />
-          <Question class="question-button" />
         </el-main>
       </el-container>
     </el-container>
diff --git a/src/router/index.ts b/src/router/index.ts
index 5b57cfe..65a3460 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,12 +1,12 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import { default as WorkflowIndex } from "@/pages/Workflow/index.vue";
-import { default as ChatIndex } from "@/pages/Chat/index.vue";
+// import { default as ChatIndex } from "@/pages/Chat/index.vue";
 import Home from "@/pages/Home.vue";
 
 const routes: RouteRecordRaw[] = [
   { path: "/", component: Home },
   { path: "/workflow", component: WorkflowIndex },
-  { path: "/chat", component: ChatIndex },
+  // { path: "/chat", component: ChatIndex },
 ];
 
 const router = createRouter({
diff --git a/src/store/session.ts b/src/store/session.ts
index 1e1bef4..0597fd3 100644
--- a/src/store/session.ts
+++ b/src/store/session.ts
@@ -20,7 +20,6 @@ export const useSessionStore = defineStore("session", () => {
     question: "",
   });
   const graphShow = ref(false);
-  const questionShow = ref(true);
   const loading = ref(false);
 
   // TODO chatted?
@@ -29,14 +28,12 @@ export const useSessionStore = defineStore("session", () => {
     await jobStore.updateData(session.question);
     await router.push("/workflow");
     graphShow.value = true;
-    questionShow.value = false;
     loading.value = false;
   }
 
   return {
     session,
     graphShow,
-    questionShow,
     loading,
     chatted,
   };
diff --git a/src/style.less b/src/style.less
index 761937b..15a6a0f 100644
--- a/src/style.less
+++ b/src/style.less
@@ -1,3 +1,5 @@
+@bg-color: #F4F4F6;
+
 html,
 body {
   margin: 0;
@@ -6,3 +8,13 @@ body {
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
+
+.fade-enter, .fade-leave-to {
+  opacity: 0
+}
+.fade-leave, .fade-enter-to {
+  opacity: 1
+}
+.fade-enter-active, .fade-leave-active {
+  transition: all .2s
+}
\ No newline at end of file