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

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

src/views/agent/chat/components/HistoryChat.vue

@@ -28,18 +28,7 @@
         {{cozeInfo.description}}
       </div>
     </div>
-    <div class="divider"></div>
-<!--    <div class="history-section">-->
-<!--      <div class="history-title">-->
-<!--        <div class="text">历史对话</div>-->
-<!--      </div>-->
-<!--      <div class="history-list">-->
-<!--        <div class="history-item">-->
-<!--          <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
-<!--        </div>-->
 
-<!--      </div>-->
-<!--    </div>-->
   </div>
 </template>
 

src/views/agent/chat/components/history.scss

@@ -37,7 +37,7 @@
 
   .info-section {
     align-self: stretch;
-    padding: 15px;
+    padding: 10px 0 0 10px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -110,7 +110,7 @@
       }
 
       .label {
-        left: 43px;
+        left: 22px;
         top: 10px;
         position: absolute;
         color: var(--Text-3, #737478);
@@ -142,12 +142,7 @@
     }
   }
 
-  .divider {
+
-    align-self: stretch;
-    height: 0px;
-    outline: 1px var(--Border-2, #E6E6E8) solid;
-    outline-offset: -0.50px;
-  }
 
   .history-section {
     align-self: stretch;

src/views/agent/chat/index.vue

@@ -14,20 +14,23 @@
                    class="history-chat-col">
           <HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
         </a-col>
+
         <!-- 右侧聊天内容 -->
         <a-col    :xs="24"
                   :sm="isCollapsed ? 24 : 12"
                   :md="isCollapsed ? 24 : 16"
                   :lg="isCollapsed ? 24 : 18"
-                  :xl="isCollapsed ? 24 : 15" class="chat-content-col">
+                  :xl="isCollapsed ? 24 : 16" class="chat-content-col">
+
+          <a-card :bordered="false">
+            <div class="chat-content-col" style="min-height: fit-content;">
               <div class="toggle-btn" @click="toggleCollapse">
                 <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
-              <img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
+                  <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
                 </a-tooltip>
               </div>
-          <a-card :bordered="false">
-
               <div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
+            </div>
           </a-card>
         </a-col>
       </a-row>
@@ -107,7 +110,7 @@ const initChat = async () => {
   }
 
   Object.assign(cozeInfo, data.info);
-  await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
+  await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.17/libs/cn/index.js');
   let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
   cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
   showChatPage();
@@ -124,7 +127,7 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
     ui: {
       chatBot: {
         el: document.getElementById('coze-chat-container'),
-        width: '80%',
+        width: '95%',
         height: '100%',
         title: name,
         isNeedFunctionCallMessage: true,
@@ -132,10 +135,20 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
       base: {
         icon: '',
         zIndex: 1000,
+        lang:'zh-CN'
       },
       footer: {
         expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
       },
+      header: {
+        isShow: true,
+        isNeedClose: true
+      },
+      conversations: {
+        isNeed: true,
+        isNeedAddNewConversationBoolean: true,
+        isNeedQuoteBoolean: true,
+      }
     },
     auth: auth,
     userInfo: userInfo,

src/views/agent/work-flow/components/DynamicForm.vue

@@ -17,12 +17,20 @@
         />
         <a-textarea
           v-if="field.type === 'textarea'"
-          style="width: 500px; height: 200px;"
+          style="width: 500px; height: 200px"
           v-model="formData[field.props.name]"
           :placeholder="field?.props?.placeholder"
         />
-        <ImageUpload v-if="field.type == 'upload_image'" v-model="formData[field.props.name]" :limit="field.props.limit"></ImageUpload>
+        <ImageUpload
-        <FileUpload v-if="field.type == 'upload_file'" v-model="formData[field.props.name]" :limit="field.props.limit"></FileUpload>
+          v-if="field.type == 'upload_image'"
+          v-model="formData[field.props.name]"
+          :limit="field.props.limit"
+        ></ImageUpload>
+        <FileUpload
+          v-if="field.type == 'upload_file'"
+          v-model="formData[field.props.name]"
+          :limit="field.props.limit"
+        ></FileUpload>
         <a-select
           v-else-if="field.type === 'select'"
           v-model="formData[field.props.name]"
@@ -32,10 +40,9 @@
             {{ option.label }}
           </a-option>
         </a-select>
-
       </a-form-item>
     </a-form>
-    <a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
+    <a-button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
   </div>
 </template>
 <script setup>
@@ -72,7 +79,8 @@ const handleSubmit = async () => {
   padding: 24px;
   border: 1px solid #d7d7d9; /* 添加灰色边框 */
   background: var(--BG-White, white);
-  height:70vh;
+  height: 70vh;
+
   :deep(.arco-input-wrapper),
   :deep(.arco-textarea-wrapper) {
     border-radius: 4px;
@@ -92,5 +100,10 @@ const handleSubmit = async () => {
       height: 60px;
     }
   }
+
+  .submit-btn {
+    display: block;
+    margin: 0 auto;
+  }
 }
 </style>

src/views/agent/work-flow/components/HistoryChat.vue

@@ -28,18 +28,7 @@
         {{cozeInfo.description}}
       </div>
     </div>
-    <div class="divider"></div>
-    <!--    <div class="history-section">-->
-    <!--      <div class="history-title">-->
-    <!--        <div class="text">历史对话</div>-->
-    <!--      </div>-->
-    <!--      <div class="history-list">-->
-    <!--        <div class="history-item">-->
-    <!--          <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
-    <!--        </div>-->
 
-    <!--      </div>-->
-    <!--    </div>-->
   </div>
 </template>
 

src/views/agent/work-flow/components/history.scss

@@ -36,8 +36,6 @@
 
   .info-section {
     align-self: stretch;
-    padding-top: 15px;
-    padding-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -47,7 +45,7 @@
       justify-content: flex-start;
       align-items: center;
       gap: 4px;
-      padding: 24px;
+      padding: 10px 24px 0 24px;
       .title {
         color: var(--Text-1, #211F24);
         font-size: 18px;
@@ -97,10 +95,10 @@
       width: 79px;
       height: 34px;
       position: relative;
-      margin-top: 24px;
+      margin-top: 10px;
       margin-right: 24px;
       .count {
-        left: 0px;
+        left: 20px;
         top: 10px;
         position: absolute;
         color: var(--Text-2, #3C4043);
@@ -143,12 +141,7 @@
     }
   }
 
-  .divider {
+
-    align-self: stretch;
-    height: 0px;
-    outline: 1px var(--Border-2, #E6E6E8) solid;
-    outline-offset: -0.50px;
-  }
 
   .history-section {
     align-self: stretch;

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

@@ -5,45 +5,48 @@
     <div class="chat-contain">
       <a-row class="grid-layout">
         <!-- 左侧历史聊天 -->
-        <a-col :xs="isCollapsed ? 0 : 3"
+        <a-col
+          :xs="isCollapsed ? 0 : 3"
           :sm="isCollapsed ? 0 : 3"
           :md="isCollapsed ? 0 : 4"
           :lg="isCollapsed ? 0 : 6"
           :xl="isCollapsed ? 0 : 7"
-               :xxl="isCollapsed ? 0 : 5" >
+          :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 ? menuFold : menuUnfold" />
+            <img class="status-icon" :src="isCollapsed ?  menuUnfold  : menuFold" />
           </a-tooltip>
         </div>
         <!-- 动态表单 -->
-        <a-col  :xs="isCollapsed ? 3 : 3"
+        <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">
+          :xxl="isCollapsed ? 5 : 5"
-          <DynamicForm
+          class="dynamic-form"
-            :formFields="formFields.form"
+        >
-            :formData="formData"
+          <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
-            :loading="loading"
-            @submit="handleSubmit"
-          />
         </a-col>
 
         <!-- 主内容区域 -->
-        <a-col class="right-box content-container" style="height: 70vh;" :xs="isCollapsed ? 4 : 2"
+        <a-col
+          class="right-box content-container"
+          style="height: 70vh"
+          :xs="isCollapsed ? 4 : 2"
           :sm="isCollapsed ? 4 : 4"
           :md="isCollapsed ? 6 : 6"
           :lg="isCollapsed ? 8 : 8"
           :xl="isCollapsed ? 10 : 10"
-                :xxl="isCollapsed ? 12 : 12" >
+          :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-else  />
+          <NoData v-if="loading == false && workFlowRes?.output == ''" />
         </a-col>
       </a-row>
     </div>
@@ -113,7 +116,7 @@ const renderedMarkdown = computed(() => {
 const handleSubmit = async (formData) => {
   try {
     const param = { form_data: formData, workflow_id: cozeInfo.workflow_id, bot_id: formFields.value.bot_id };
-    console.log(param, 'param');
+    workFlowRes.output = '';
     loading.value = true;
     const { code, data } = await executeWorkFlow(param);
     if (code === 200) {
@@ -121,7 +124,6 @@ const handleSubmit = async (formData) => {
       loading.value = false;
     }
   } catch (error) {
-    console.log(error, 'error');
     loading.value = false;
   }
 };