refactor(agent): 重构智能对话页面布局和样式

- 重新设计了页面布局，分为左、右两个主要区域
- 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等
- 右侧区域保留聊天窗口，并增加了顶部栏
-优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示
- 调整了颜色、字体等样式，提升了页面视觉效果

src/views/agent/work-flow/index.vue

@@ -35,18 +35,9 @@
           <div class="section">
             <div class="text">历史对话</div>
           </div>
-          <div class="history-item">
+          <div class="history-item" v-for="(item, index) in history">
             <div class="item-body">
-              <div class="text">博主的粉丝数量与增长趋势</div>
+              <div class="text" @click="getHistoryInfo(item)">{{ item.title }}</div>
-            </div>
-            <div class="item-body">
-              <div class="text">博主的粉丝数量与增长趋势</div>
-            </div>
-            <div class="item-body">
-              <div class="text">博主的粉丝数量与增长趋势</div>
-            </div>
-            <div class="item-body">
-              <div class="text">博主的粉丝数量与增长趋势</div>
             </div>
           </div>
         </div>
@@ -80,7 +71,6 @@
 
 <script setup>
 import { ref, reactive } from 'vue';
-import HistoryChat from './components/HistoryChat.vue';
 import DynamicForm from './components/DynamicForm.vue';
 import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
 import { useRoute, useRouter } from 'vue-router';
@@ -91,6 +81,7 @@ import menuUnfold from '@/assets/svg/menu-unfold.svg';
 import workflow from '@/assets/svg/workflow.svg';
 
 const formFields = ref({});
+const history = ref([]);
 // 是否折叠状态
 const isCollapsed = ref(false);
 
@@ -124,6 +115,7 @@ const getData = async () => {
   const { code, data } = await getWorkFlowInfo(query.id);
   Object.assign(cozeInfo, data.info);
   formFields.value = data.form_config;
+  history.value = data.history;
 };
 const workFlowRes = reactive({
   output: '',
@@ -148,12 +140,26 @@ const handleSubmit = async (formData) => {
     if (code === 200) {
       Object.assign(workFlowRes, data.data);
       loading.value = false;
+      console.log(data.history_item, 'data.history_item');
+      addHistoryItem(data.history_item);
     }
   } catch (error) {
     loading.value = false;
   }
 };
 
+const addHistoryItem = (item) => {
+  history.value.unshift(item);
+
+};
+
+const getHistoryInfo = (item) => {
+  formData.value = item.param;
+  workFlowRes.output = item.result.output;
+
+  console.log(formData.value, 'formData');
+};
+
 onMounted(() => {
   getData();
 });

src/views/agent/work-flow/style.scss

@@ -147,7 +147,7 @@
       align-items: center;
       gap: 10px;
       display: flex;
-
+      padding: 10px;
       .text {
         align-self: stretch;
         color: var(--Text-2, #3C4043);
@@ -184,7 +184,7 @@
       justify-content: flex-start;
       align-items: flex-start;
       display: flex;
-
+      padding: 10px;
       .section {
         align-self: stretch;
         height: 40px;