From 058d5ef066a946c3fe01246eaf1d72dde9e2a2db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Mon, 28 Jul 2025 17:07:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(agent):=20=E9=87=8D=E6=9E=84=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E4=BD=93=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-调整了智能体卡片的布局结构，优化了标题和描述的显示方式
- 改进了历史对话的展示样式，增加了滚动指示器
- 统一了标签和图标的样式，提升了视觉一致性
- 优化了搜索框和卡片列表的样式，提高了用户体验
---
 .../work-flow/components/DynamicForm.vue      |  2 +
 .../work-flow/components/HistoryChat.vue      |  2 +-
 src/views/agent/work-flow/index.vue           | 66 ++++++++++++++-----
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/views/agent/work-flow/components/DynamicForm.vue b/src/views/agent/work-flow/components/DynamicForm.vue
index 2dbe195..c7e66f7 100644
--- a/src/views/agent/work-flow/components/DynamicForm.vue
+++ b/src/views/agent/work-flow/components/DynamicForm.vue
@@ -7,6 +7,7 @@
         :label="field.props.label"
         :field="field.props.name"
         :rules="field.props.rules"
+        :tooltip="field.props.tip"
       >
         <a-input
           allowClear
@@ -31,6 +32,7 @@
             {{ option.label }}
           </a-option>
         </a-select>
+
       </a-form-item>
     </a-form>
     <a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
diff --git a/src/views/agent/work-flow/components/HistoryChat.vue b/src/views/agent/work-flow/components/HistoryChat.vue
index 98d42b0..20063bf 100644
--- a/src/views/agent/work-flow/components/HistoryChat.vue
+++ b/src/views/agent/work-flow/components/HistoryChat.vue
@@ -2,7 +2,7 @@
   <div class="agent-card">
     <div class="header-section">
       <div class="image-container">
-        <img :src="cozeInfo.icon_url" alt="" />
+        <img :src="cozeInfo.icon_url"  alt="" />
       </div>
     </div>
     <div class="info-section">
diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue
index f866252..40b2168 100644
--- a/src/views/agent/work-flow/index.vue
+++ b/src/views/agent/work-flow/index.vue
@@ -3,21 +3,49 @@
     <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
 
     <div class="chat-contain">
-      <a-layout>
-        <a-layout>
-          <a-layout-sider width="15%">
-            <HistoryChat :cozeInfo="cozeInfo" />
-          </a-layout-sider>
-          <a-layout-sider class="layout-sider" width="17%">
-            <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
-          </a-layout-sider>
-          <a-layout-content ref="contentRef" class="content-container">
-            <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
-            <div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
-            <NoData v-else />
-          </a-layout-content>
-        </a-layout>
-      </a-layout>
+      <a-row class="grid-layout">
+        <!-- 左侧历史聊天 -->
+        <a-col :xs="isCollapsed ? 0 : 3"
+               :sm="isCollapsed ? 0 : 3"
+               :md="isCollapsed ? 0 : 4"
+               :lg="isCollapsed ? 0 : 6"
+               :xl="isCollapsed ? 0 : 4"
+               :xxl="isCollapsed ? 0 : 5" class="history-chat">
+          <HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
+
+        </a-col>
+        <div class="toggle-btn" @click="toggleCollapse">
+          <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
+            <img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
+          </a-tooltip>
+        </div>
+        <!-- 动态表单 -->
+        <a-col  :xs="isCollapsed ? 3 : 3"
+                :sm="isCollapsed ? 3 : 3"
+                :md="isCollapsed ? 4 : 4"
+                :lg="isCollapsed ? 6 : 6"
+                :xl="isCollapsed ? 4 : 4"
+                :xxl="isCollapsed ? 5 : 5" class="dynamic-form">
+          <DynamicForm
+            :formFields="formFields.form"
+            :formData="formData"
+            :loading="loading"
+            @submit="handleSubmit"
+          />
+        </a-col>
+
+        <!-- 主内容区域 -->
+        <a-col  :xs="isCollapsed ? 4 : 2"
+                :sm="isCollapsed ? 4 : 4"
+                :md="isCollapsed ? 6 : 6"
+                :lg="isCollapsed ? 8 : 8"
+                :xl="isCollapsed ? 10 : 10"
+                :xxl="isCollapsed ? 12 : 12" class="content-container">
+          <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
+          <div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
+          <NoData v-else />
+        </a-col>
+      </a-row>
     </div>
   </div>
 </template>
@@ -30,9 +58,17 @@ import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
 import { useRoute, useRouter } from 'vue-router';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+import menuFold from '@/assets/svg/menu-fold.svg';
+import menuUnfold from '@/assets/svg/menu-unfold.svg';
 
 const formFields = ref({});
+// 是否折叠状态
+const isCollapsed = ref(false);
 
+// 切换折叠状态
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
 // 表单数据对象（动态生成初始值）
 const formData = ref({});