'processedit'

frontend/src/components/ProcessView/index.less

@@ -58,6 +58,10 @@
                     .dashed_line {
                         position: absolute;
                         width: 13px;
+
+                        img {
+                            width: 100%;
+                        }
                     }
                 }
 
@@ -98,8 +102,8 @@
 
                     .dashed_line {
                         transform: rotate(-90deg);
-                        top: -34px;
-                        left: 108px;
+                        top: -38px;
+                        left: 113px;
                     }
                 }
 
@@ -118,7 +122,7 @@
 
                     .dashed_line {
                         top: 61px;
-                        left: 24px;
+                        left: 28px;
                         width: 12.4px;
                     }
                 }
@@ -138,8 +142,8 @@
 
                     .dashed_line {
                         transform: rotate(90deg);
-                        top: -28px;
-                        left: -66.6px;
+                        top: -23px;
+                        left: -70.6px;
                     }
                 }
 
@@ -158,8 +162,8 @@
 
                     .dashed_line {
                         transform: rotate(180deg);
-                        top: -113px;
-                        left: 20px;
+                        top: -117px;
+                        left: 14px;
                         width: 12.4px;
                     }
                 }

frontend/src/components/ProcessView/index.vue

@@ -7,7 +7,9 @@
             <img class="item_round" :src="item.url" alt="" />
             <p class="p">{{ item.goup }}</p>
             <span class="span">{{ item.content }}</span>
-            <div class="dashed_line"></div>
+            <div class="dashed_line">
+              <img src="../../assets/chart/dashed_line_arrow.png" alt="" />
+            </div>
           </div>
           <div class="centent_box" v-else>
             <div class="item_text">

frontend/src/components/collapseView/index.vue

@@ -12,12 +12,14 @@
               ><component :is="getIcon()"></component
             ></el-icon>
           </div>
-          <div class="title">{{ generateTitle("模型调用流程") }}</div>
+          <div class="title">{{ generateTitle('模型调用流程') }}</div>
         </div>
         <div style="height: 100%" v-show="isCollapse">
           <steps-view :reasoningList="reasoningList" />
         </div>
-        <ProcessView />
+        <div v-show="isCollapse">
+          <ProcessView />
+        </div>
         <!-- <div class="user-box">
         <img src="../../assets/logo.png" alt="" />
         <span v-show="isCollapse">Jayson</span>
@@ -95,70 +97,70 @@
 </template>
 
 <script setup lang="ts">
-import StepsView from "../StepsView.vue";
-import ProcessView from "../ProcessView/index.vue";
-import { ref, defineProps, defineExpose, defineEmits } from "vue";
-import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
-import { generateTitle } from "../../utils/i18n";
+import StepsView from '../StepsView.vue'
+import ProcessView from '../ProcessView/index.vue'
+import { ref, defineProps, defineExpose, defineEmits } from 'vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { generateTitle } from '../../utils/i18n'
 const getIcon = () => {
-  return isCollapse.value ? ArrowLeft : ArrowRight;
-};
+  return isCollapse.value ? ArrowLeft : ArrowRight
+}
 const props = defineProps({
   reasoningList: {
     type: Array,
-    default: [],
-  },
-});
+    default: []
+  }
+})
 const chartList = ref<Array<any>>([
   {
-    type: "G1",
-    group_name: "Planner",
+    type: 'G1',
+    group_name: 'Planner'
   },
   {
-    type: "G2",
-    group_name: "Retrieval",
+    type: 'G2',
+    group_name: 'Retrieval'
   },
   {
-    type: "G3",
-    group_name: "Generate",
+    type: 'G3',
+    group_name: 'Generate'
   },
   {
-    type: "G4",
-    group_name: "Converter",
+    type: 'G4',
+    group_name: 'Converter'
   },
   {
-    type: "G5",
-    group_name: "Executor",
+    type: 'G5',
+    group_name: 'Executor'
   },
   {
-    type: "G6",
-    group_name: "Optimize",
-  },
-]);
-const emits = defineEmits(["changeStatusFun"]);
-const getStatus = (val: any) => {
-  let arr: any = props.reasoningList;
-  if (arr.length) {
-    let children: any = arr[arr.length - 1].children;
-    if (!children.length) {
-      return false;
-    }
-    let group_name = children[children.length - 1].group_name.toLowerCase();
-    return group_name === val.toLowerCase();
-  } else {
-    return false;
+    type: 'G6',
+    group_name: 'Optimize'
   }
-};
+])
+const emits = defineEmits(['changeStatusFun'])
+const getStatus = (val: any) => {
+  let arr: any = props.reasoningList
+  if (arr.length) {
+    let children: any = arr[arr.length - 1].children
+    if (!children.length) {
+      return false
+    }
+    let group_name = children[children.length - 1].group_name.toLowerCase()
+    return group_name === val.toLowerCase()
+  } else {
+    return false
+  }
+}
 const changeStatusFun = () => {
-  isCollapse.value = !isCollapse.value;
-  emits("changeStatusFun", isCollapse.value);
-};
-const isCollapse = ref<boolean>(true);
+  isCollapse.value = !isCollapse.value
+  emits('changeStatusFun', isCollapse.value)
+}
+const isCollapse = ref<boolean>(true)
 defineExpose({
-  isCollapse,
-});
+  isCollapse
+})
 </script>
 
 <style scoped>
-@import "./index.less";
+@import './index.less';
 </style>

frontend/src/view/reasoning/index.less

@@ -92,4 +92,11 @@
             }
         }
     }
+
+    .message_btn {
+        position: fixed;
+        top: 0;
+        left: 150px;
+        cursor: pointer;
+    }
 }

frontend/src/view/reasoning/index.vue

@@ -41,6 +41,18 @@
         <span>监控2</span>
       </div>
     </div>
+    <div class="message_btn">
+      <el-icon color="#fff" size="16" v-show="messageShow"><Expand /></el-icon>
+      <el-icon color="#fff" size="16" v-show="!messageShow"><Fold /></el-icon>
+    </div>
+    <el-drawer
+      v-model="messageShow"
+      title="I am the title"
+      direction="ltr"
+      :before-close="handleClose"
+    >
+      <span>Hi, there!</span>
+    </el-drawer>
     <CameraView
       ref="cameraViewRef"
       v-show="cameraShow"
@@ -53,7 +65,7 @@ import ReasoningView from '../../components/ReasoningView/index.vue'
 import TextareaView from '../../components/TextareaView.vue'
 import collapseView from '../../components/collapseView/index.vue'
 import CameraView from '../../components/CameraView/index.vue'
-import { Plus, VideoCameraFilled } from '@element-plus/icons-vue'
+import { Plus, VideoCameraFilled, Expand, Fold } from '@element-plus/icons-vue'
 import { ref, onMounted, nextTick } from 'vue'
 // import { getModelList } from '../../api/user'
 import { useRoute } from 'vue-router'
@@ -66,10 +78,14 @@ const textareaRef = ref<any>(null)
 const collapseRef = ref<any>(null)
 const isCollapse = ref<boolean>(true)
 const cameraShow = ref<boolean>(false)
+const messageShow = ref<boolean>(false)
 const cameraViewRef = ref<any>(null)
 const changeStatusFun = (val: boolean) => {
   isCollapse.value = val
 }
+const handleClose = () => {
+  messageShow.value = false
+}
 const cameraFun = (val: number) => {
   cameraShow.value = true
   cameraViewRef.value.cameraNumber = val