优化货源卡片布局和图片显示，修复图表数据标签

Management.html

@@ -834,6 +834,11 @@
                             beginAtZero: true,
                             ticks: {
                                 stepSize: 1
+                            },
+                            // 动态计算Y轴最大值，为顶部数字留出空间
+                            max: function(context) {
+                                const max = Math.max(...context.chart.data.datasets[0].data);
+                                return max + 1;
                             }
                         },
                         x: {
@@ -871,6 +876,34 @@
             });
         }
         
+        // 添加Chart.js自定义插件用于显示数据标签
+        Chart.register({
+            id: 'customDataLabels',
+            afterDraw: function(chart) {
+                const ctx = chart.ctx;
+                chart.data.datasets.forEach(function(dataset, datasetIndex) {
+                    const meta = chart.getDatasetMeta(datasetIndex);
+                    if (meta.hidden) return;
+                    
+                    meta.data.forEach(function(element, index) {
+                        // 获取柱子的位置
+                        const x = element.x;
+                        const y = element.y; // 柱子顶部的Y坐标
+                        const value = dataset.data[index];
+                        
+                        // 设置文本样式
+                        ctx.fillStyle = '#333';
+                        ctx.font = 'bold 14px Arial';
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'bottom';
+                        
+                        // 在柱子顶部上方5像素处绘制数值
+                        ctx.fillText(value, x, y - 5);
+                    });
+                });
+            }
+        });
+        
         // 显示指定卖家的货源
         async function showSuppliesBySeller(sellerId) {
             // 获取当前筛选条件和日期范围
@@ -1030,21 +1063,16 @@
                     const isVideo = mediaUrl.startsWith('data:video/') || mediaUrl.match(/\.(mp4|mov|avi|wmv|flv|webm|mkv)$/i);
                     if (isVideo) {
                         // 视频文件
-                        mediaElement = `<video src="${mediaUrl}" alt="${supply.productName}" controls style="width: 100%; height: 200px; object-fit: cover; cursor: pointer;" onclick="showPreview('${mediaUrl}')"></video>`;
+                        mediaElement = `<video src="${mediaUrl}" alt="${supply.productName}" controls style="width: 100%; height: 250px; object-fit: contain; cursor: pointer; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 10px;" onclick="showPreview('${mediaUrl}')"></video>`;
                     } else {
                         // 图片文件
-                        mediaElement = `<img src="${mediaUrl}" alt="${supply.productName}" style="width: 100%; height: 200px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; cursor: pointer;" onclick="showPreview('${mediaUrl}')">`;
+                        mediaElement = `<img src="${mediaUrl}" alt="${supply.productName}" style="width: 100%; height: 250px; object-fit: contain; border-radius: 4px; margin-bottom: 10px; cursor: pointer; background-color: #f5f5f5;" onclick="showPreview('${mediaUrl}')">`;
                     }
                 }
                 
                 // 构建详细信息HTML
                 let detailsHTML = '';
                 
-                // 蛋黄
-                if (supply.yolk) {
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>蛋黄:</strong> ${supply.yolk}</p>`;
-                }
-                
                 // 产品ID
                 if (supply.productId) {
                     detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>产品ID:</strong> ${supply.productId}</p>`;
@@ -1132,44 +1160,25 @@
                     detailsHTML += `</div>`;
                 }
                 
-                // 货源描述（限制显示长度）
-                if (supply.description) {
-                    const shortDesc = supply.description.length > 50 ? `${supply.description.substring(0, 50)}...` : supply.description;
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>货源描述:</strong> ${shortDesc}</p>`;
-                }
-                
-                // 货源类型
-                if (supply.sourceType) {
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>货源类型:</strong> ${supply.sourceType}</p>`;
-                }
-                
-                // 新鲜程度
-                if (supply.freshness) {
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>新鲜程度:</strong> ${supply.freshness}</p>`;
-                }
-                
-                // 产品包装
-                if (supply.producting) {
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>产品包装:</strong> ${supply.producting}</p>`;
-                }
-                
                 // 商品地区
                 if (supply.region) {
                     detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>商品地区:</strong> ${supply.region}</p>`;
                 }
                 
-                // 商品联系人信息
+                // 商品联系人和联系电话一行展示，只显示联系人名称和电话号码
-                if (supply.product_contact) {
+                if (supply.product_contact || supply.contact_phone) {
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>商品联系人:</strong> ${supply.product_contact}</p>`;
+                    let contactText = `<strong>商品联系人:</strong> `;
-                }
+                    if (supply.product_contact) {
-                
+                        contactText += supply.product_contact;
-                if (supply.contact_phone) {
+                    }
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>联系电话:</strong> ${supply.contact_phone}</p>`;
+                    if (supply.contact_phone) {
-                }
+                        if (supply.product_contact) {
-                
+                            contactText += ` ${supply.contact_phone}`;
-                // 种类
+                        } else {
-                if (supply.category) {
+                            contactText += supply.contact_phone;
-                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>种类:</strong> ${supply.category}</p>`;
+                        }
+                    }
+                    detailsHTML += `<p style="margin: 5px 0; font-size: 14px;">${contactText}</p>`;
                 }
                 
                 // 创建时间
@@ -1180,13 +1189,38 @@
                     detailsHTML += `<p style="margin: 5px 0; font-size: 14px;"><strong>修改时间:</strong> ${new Date(supply.updated_at).toLocaleString()}</p>`;
                 }
                 
+                // 货源描述（限制显示长度）- 灰色背景放在修改时间后面
+                if (supply.description) {
+                    const shortDesc = supply.description.length > 50 ? `${supply.description.substring(0, 50)}...` : supply.description;
+                    detailsHTML += `<div style="margin: 10px 0; font-size: 14px; background-color: #f5f5f5; padding: 10px 12px; border-radius: 4px;">
+                        <strong style="display: block; margin-bottom: 5px;">货源描述:</strong>
+                        <div>${shortDesc}</div>
+                    </div>`;
+                }
+                
+
+                
                 // 状态
                 detailsHTML += `<span class="supply-status ${statusClass}" style="display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; margin-top: 5px;">${statusText}</span>`;
                 
+                // 第一行展示：种类|蛋黄|货源类型|产品包装|新鲜程度，只展示数据
+                let firstLineParts = [];
+                if (supply.category) firstLineParts.push(supply.category);
+                if (supply.yolk) firstLineParts.push(supply.yolk);
+                if (supply.sourceType) firstLineParts.push(supply.sourceType);
+                if (supply.producting) firstLineParts.push(supply.producting);
+                if (supply.freshness) firstLineParts.push(supply.freshness);
+                
+                let firstLineHTML = '';
+                if (firstLineParts.length > 0) {
+                    firstLineHTML = `<p style="margin: 5px 0 10px 0; font-size: 14px; line-height: 1.4; color: #666; font-weight: 500;">${firstLineParts.join(' | ')}</p>`;
+                }
+                
                 card.innerHTML = `
                     <div style="margin-bottom: 15px;">
                         ${mediaElement}
                         <div class="supply-title" style="font-weight: bold; font-size: 16px; margin: 10px 0;">${supply.productName}</div>
+                        ${firstLineHTML}
                     </div>
                     <div class="supply-info" style="font-size: 14px;">
                         ${detailsHTML}