feat(agent): 优化聊天历史组件样式和图片展示，调整卡片布局和图片处理

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

@@ -29,17 +29,17 @@
       </div>
     </div>
     <div class="divider"></div>
-    <div class="history-section">
+<!--    <div class="history-section">-->
-      <div class="history-title">
+<!--      <div class="history-title">-->
-        <div class="text">历史对话</div>
+<!--        <div class="text">历史对话</div>-->
-      </div>
+<!--      </div>-->
 <!--      <div class="history-list">-->
 <!--        <div class="history-item">-->
 <!--          <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
 <!--        </div>-->
-<!--    -->
+
+<!--      </div>-->
 <!--    </div>-->
-    </div>
   </div>
 </template>
 

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

@@ -12,7 +12,7 @@
 
   .header-section {
     align-self: stretch;
-    height: 160px;
+    height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -20,20 +20,16 @@
     gap: 10px;
 
     .image-container {
-      align-self: stretch;
+      height: 400px;
-      flex: 1 1 0;
-      position: relative;
-      background: #FFEDED;
       overflow: hidden;
       border-radius: 8px;
-
-      img {
-        width: 408.14px;
-        height: 219px;
-        left: -24.07px;
-        top: -29px;
-        position: absolute;
     }
+
+    .image-container img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
     }
   }
 
@@ -57,6 +53,7 @@
         font-family: 'Alibaba PuHuiTi', sans-serif;
         font-weight: 400;
         line-height: 26px;
+        padding: 10px;
       }
 
       .tag {
@@ -140,6 +137,7 @@
       font-family: 'Alibaba PuHuiTi', sans-serif;
       font-weight: 400;
       line-height: 22px;
+      padding: 10px;
     }
   }
 

src/views/agent/chat/index.vue

@@ -104,15 +104,15 @@ const cozeWebSdkConfig = (botId, name, auth) => {
         title: name,
         isNeedFunctionCallMessage: true,
       },
+      base: {
+        icon: '',
+        zIndex: 1000,
+      },
       footer:{
         expressionText:"内容由AI生成，无法确保真实准确，仅供参考。",
       },
     },
     auth: auth,
-    base: {
-      icon: '',
-      zIndex: 1000,
-    },
     header: {
       isShow: true,
       isNeedClose: false,

src/views/agent/index/index.vue

@@ -18,7 +18,11 @@
         <a-col :span="3" v-for="(product, k) in item.agent_products">
           <div class="card-container" @click="goDetail(product?.type, product?.id)">
             <div class="card-image-container">
-              <img class="card-image" :src="product?.icon_url" />
+              <img
+                class="card-image"
+                :src="product?.icon_url"
+                style="width: 100%; height: 100%; object-fit: cover;"
+              />
             </div>
             <div class="card-content">
               <div class="card-title">{{ product?.name }}</div>

src/views/agent/index/style.scss

@@ -34,23 +34,20 @@
   }
 
   .card-image-container {
-    position: relative;
+    width: 99%; // 设置宽度
-    align-self: stretch;
+    height: 200px; // 设置高度，与宽度一致，保持正方形比例
-    height: 120px;
+    display: flex;
-    background: #ffe9e7; /* 可以替换成变量 */
+    justify-content: center;
-    overflow: hidden;
+    align-items: center;
-    border-top-left-radius: 8px;
+    overflow: hidden; // 防止图片超出容器
-    border-top-right-radius: 8px;
   }
 
   .card-image {
     width: 100%;
     height: 100%;
-    left: 0;
+    border-radius: 7px;
-    top: -3px;
+    object-fit: cover; // 确保图片按比例缩放并裁剪
-    position: absolute;
   }
-
   .card-content {
     align-self: stretch;
     display: flex;