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

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