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

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

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>
-        <FileUpload v-if="field.type == 'upload_file'" v-model="formData[field.props.name]" :limit="field.props.limit"></FileUpload>
+        <ImageUpload
+          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;