refactor(agent): 优化客服和工作流界面布局和样式

- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局
- 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示

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

@@ -1,53 +1,79 @@
 <template>
-  <div class="chat-wrap">
-    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
-
-    <div class="chat-contain">
-      <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 : 8"
-          :xxl="isCollapsed ? 0 : 5"
-        >
-          <HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
-        </a-col>
-        <div class="toggle-btn" @click="toggleCollapse">
-          <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
-            <img class="status-icon" :src="isCollapsed ?  menuUnfold  : menuFold" />
-          </a-tooltip>
+  <div>
+    <span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+    <div class="workflow-container">
+      <div class="left-wap" v-if="isCollapsed == false">
+        <div class="header">
+          <div class="image-body">
+            <img :src="cozeInfo.image_url" />
+          </div>
         </div>
-        <!-- 动态表单 -->
-        <a-col
-          :xs="isCollapsed ? 3 : 3"
-          :sm="isCollapsed ? 3 : 3"
-          :md="isCollapsed ? 4 : 4"
-          :lg="isCollapsed ? 6 : 6"
-          :xl="isCollapsed ? 6 : 6"
-          :xxl="isCollapsed ? 5 : 5"
-          class="dynamic-form"
-        >
-          <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
-        </a-col>
-
-        <!-- 主内容区域 -->
-        <a-col
-          class="right-box content-container"
-          :xs="isCollapsed ? 4 : 2"
-          :sm="isCollapsed ? 4 : 4"
-          :md="isCollapsed ? 6 : 6"
-          :lg="isCollapsed ? 8 : 8"
-          :xl="isCollapsed ? 10 : 9"
-          :xxl="isCollapsed ? 12 : 12"
-        >
-          <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
-          <div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
-          <NoData v-if="loading == false && workFlowRes?.output == ''" />
-        </a-col>
-      </a-row>
+        <div class="content">
+          <div class="title-body">
+            <div class="text">{{ cozeInfo.name }}</div>
+            <div data-尺寸="迷你-20px" data-颜色="red" class="tag-body">
+              <div class="">
+                <img class="status-icon" :src="workflow" />
+              </div>
+              <div class="text">工作流</div>
+            </div>
+          </div>
+          <div class="use-body">
+            <div class="num">{{ cozeInfo.views }}</div>
+            <div class="text">次使用</div>
+          </div>
+        </div>
+        <div class="description">
+          <div class="text">
+            {{ cozeInfo.description }}
+          </div>
+        </div>
+        <div class="out-line">
+          <div class="out-line-div"></div>
+        </div>
+        <div class="history">
+          <div class="section">
+            <div class="text">历史对话</div>
+          </div>
+          <div class="history-item">
+            <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 class="item-body">
+              <div class="text">博主的粉丝数量与增长趋势</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-wap">
+        <div class="header">
+          <div class="body">
+            <div class="">
+              <div class="toggle-btn" @click="toggleCollapse">
+                <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
+                  <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
+                </a-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="form">
+            <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
+          </div>
+          <div class="res">
+            <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
+            <div v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
+            <NoData v-if="workFlowRes.output == '' && loading === false" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -62,6 +88,7 @@ import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import menuFold from '@/assets/svg/menu-fold.svg';
 import menuUnfold from '@/assets/svg/menu-unfold.svg';
+import workflow from '@/assets/svg/workflow.svg';
 
 const formFields = ref({});
 // 是否折叠状态