feat(Case): new case button, transparent Question component

src/G6/nodeConfig.ts

@@ -120,20 +120,20 @@ export const breakdownNode: ShapeOptions = {
         stroke: "#5B8FF9",
         fill: "#D7DCF1",
         lineWidth: 2,
-        cursor: "pointer",
+        // cursor: "pointer",
       },
       name: "root-node-key-shape",
     });
     group.addShape("text", {
       attrs: {
-        text: textWrapping(cfg.label as string, 200),
+        text: textWrapping(cfg.label as string, 300),
         fill: "#000",
         fontSize: 12,
         x: 2 * r,
         // y: -r / 2,
         textAlign: "left",
         textBaseline: "middle",
-        cursor: "pointer",
+        // cursor: "pointer",
       },
       name: "root-text-shape",
     });

src/api/mock.ts

@@ -18,7 +18,7 @@ export const fetchJob = (task: string) =>
             ),
           ),
         }),
-      100,
+      500,
     );
   });
 
@@ -34,6 +34,6 @@ export const fetchTool = (_toolId: string) =>
             ),
           ),
         }),
-      100,
+      500,
     );
   });

src/components/Case.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useSessionStore } from "../store/session.ts";
+import { onMounted } from "vue";
+
+const props = defineProps<{
+  name: string;
+}>();
+const sessionStore = useSessionStore();
+
+function handleClick() {
+  sessionStore.session.question = "Calculation of Flood Affected Area";
+  sessionStore.chatted();
+}
+
+onMounted(() => {
+  // handleClick();
+});
+</script>
+
+<template>
+  <el-button @click="handleClick"
+    ><div>
+      {{ props.name }}
+    </div></el-button
+  >
+</template>
+
+<style scoped lang="less"></style>

src/components/Question.vue

@@ -3,23 +3,25 @@ import { Promotion } from "@element-plus/icons-vue";
 import { useSessionStore } from "../store/session.ts";
 
 const sessionStore = useSessionStore();
-sessionStore.session.question = "Calculation of Flood Affected Area";
-sessionStore.chatted();
+// sessionStore.session.question = "Calculation of Flood Affected Area";
+// sessionStore.chatted();
 </script>
 
 <template>
-  <div class="container">
-    <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" 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>
 </template>
 
 <style lang="less" scoped>
@@ -28,22 +30,35 @@ sessionStore.chatted();
   bottom: 25px;
   left: 30px;
   right: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   height: 70px;
-  background-color: #fff;
-  box-shadow: 0 4px 4px 0 rgba(1C, 1C, 1C, 0.2);
-  border-radius: 10px;
+  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 {
-    height: 50px;
-    padding: 0 20px;
-    width: 100%;
+    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: 10px;
+      //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;
+}
 </style>

src/components/taskConfig/index.vue

@@ -49,7 +49,7 @@ function onCancel() {
 <template>
   <el-card
     v-if="taskStore.isShowed"
-    style="position: absolute; bottom: 120px; right: 30px; width: 500px"
+    style="position: absolute; bottom: 30px; right: 30px; width: 500px"
     shadow="hover"
   >
     <el-button

src/pages/Home/components/LeftBox.vue

@@ -8,37 +8,48 @@ const sessionStore = useSessionStore();
 <template>
   <div class="container">
     <template v-if="sessionStore.graphShow">
-      <div class="block">{{ sessionStore.session.question }}</div>
-      <div class="block">
-        <BreakdownChart
-          :graph-id="sessionStore.session.sessionId + '-breakdown'"
-        />
+      <div class="collapse-item">
+        <div class="collapse-title">
+          <div>Question</div>
+        </div>
+        <div class="collapse-content">
+          {{ sessionStore.session.question }}
+        </div>
+      </div>
+      <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>
     </template>
   </div>
 </template>
 
 <style lang="less" scoped>
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .block {
+  .collapse-item {
     box-sizing: border-box;
-    width: calc(100% - 16px);
-    margin: 8px 0;
-    &:nth-child(1) {
-      //margin-top: 20px;
+    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;
     }
+  }
+  .collapse-content {
+    //margin: 15px 20px 20px;
     padding: 10px;
-    background-color: #f3f4f6;
-    box-shadow: 0 0 2px 1px rgba(black, 0.2);
-    border-radius: 4px;
-    color: grey;
-    &:nth-child(2n) {
-      height: calc(100vh - 170px);
-      //flex: 1;
-    }
+    font-size: 14px;
+
+    border-top: 1px dashed rgba(0, 0, 0, 0.18);
+    //border-radius: 3px;
   }
 }
 </style>

src/pages/Home/components/RightBox.vue

@@ -20,6 +20,6 @@ const sessionStore = useSessionStore();
 
 <style lang="less" scoped>
 .container {
-  height: calc(100vh - 170px);
+  height: 100%;
 }
 </style>

src/pages/Home/components/TopBox.vue

@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-color: #fff;
+  //background-color: #fff;
   .title {
     font-size: 20px;
   }

src/pages/Home/index.less

@@ -1,17 +1,34 @@
 .el-container {
   .el-header {
-    border-bottom: 1px solid #e4e7ed;
-    background-color: #fff;
+    //box-shadow: 2px 2px #e4e7ed;
+    background-color:#FFF;
+    border-bottom: 1px solid rgba(6,7,9,0.1);
+    //box-shadow: 0 6px 8px 0 rgba(29,28,35,.06),0 0 2px 0 rgba(29,28,35,.18);
+    z-index: 2;
   }
   .el-aside {
+    position: relative;
     height: calc(100vh - 60px);
     background-color: #f7f9fb;
-    border-right: 1px solid #e4e7ed;
+    //border-right: 2px solid #e4e7ed;
+    //border-right: 1px solid rgba(6,7,9,0.1);
+    box-shadow:  6px 0  8px 0 rgba(29,28,35,.06),0 0 2px 0 rgba(29,28,35,.18);
+    z-index: 1;
   }
   .el-main {
     position: relative;
     height: calc(100vh - 60px);
-    background-color: #f3f4f6;
+    //background-color: #f7f9fb;
+    background-color:#F4F4F6;
     padding: 0;
   }
 }
+.case-button {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+}
+.question-button{
+  position: absolute;
+  bottom: 20px;
+}

src/pages/Home/index.vue

@@ -3,6 +3,7 @@ import TopBox from "@/pages/Home/components/TopBox.vue";
 import LeftBox from "@/pages/Home/components/LeftBox.vue";
 import RightBox from "@/pages/Home/components/RightBox.vue";
 import Question from "@/components/Question.vue";
+import Case from "@/components/Case.vue";
 </script>
 
 <template>
@@ -14,10 +15,11 @@ import Question from "@/components/Question.vue";
       <el-container>
         <el-aside width="30%">
           <LeftBox />
+          <Case class="case-button" name="Calculation of Flood Affected Area" />
         </el-aside>
         <el-main>
           <RightBox />
-          <Question />
+          <Question class="question-button" />
         </el-main>
       </el-container>
     </el-container>

src/store/session.ts

@@ -18,12 +18,14 @@ export const useSessionStore = defineStore("session", () => {
     question: "",
   });
   const graphShow = ref(false);
+  const questionShow = ref(true);
 
   // TODO chatted?
   async function chatted() {
     await jobStore.updateData(session.question);
     graphShow.value = true;
+    questionShow.value = false;
   }
 
-  return { session, graphShow, chatted };
+  return { session, graphShow, questionShow, chatted };
 });