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

-调整了智能体卡片的布局结构，优化了标题和描述的显示方式
- 改进了历史对话的展示样式，增加了滚动指示器
- 统一了标签和图标的样式，提升了视觉一致性
- 优化了搜索框和卡片列表的样式，提高了用户体验

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>

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-row class="grid-layout">
-        <a-layout>
+        <!-- 左侧历史聊天 -->
-          <a-layout-sider width="15%">
+        <a-col :xs="isCollapsed ? 0 : 3"
-            <HistoryChat :cozeInfo="cozeInfo" />
+               :sm="isCollapsed ? 0 : 3"
-          </a-layout-sider>
+               :md="isCollapsed ? 0 : 4"
-          <a-layout-sider class="layout-sider" width="17%">
+               :lg="isCollapsed ? 0 : 6"
-            <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
+               :xl="isCollapsed ? 0 : 4"
-          </a-layout-sider>
+               :xxl="isCollapsed ? 0 : 5" class="history-chat">
-          <a-layout-content ref="contentRef" class="content-container">
+          <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-layout-content>
+        </a-col>
-        </a-layout>
+      </a-row>
-      </a-layout>
     </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({});